@thl-ui/vue 0.0.0-stage → 0.1.0

package/dist/components/nav.d.ts

@@ -0,0 +1,295 @@
+import { PropType } from 'vue';
+import { TabsItem, BreadcrumbItem, StepItem, TimelineItem } from '@thl-ui/core';
+export declare const ThlTabs: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<TabsItem[]>;
+        required: true;
+    };
+    modelValue: StringConstructor;
+    variant: StringConstructor;
+    justified: BooleanConstructor;
+    keepMounted: BooleanConstructor;
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<TabsItem[]>;
+        required: true;
+    };
+    modelValue: StringConstructor;
+    variant: StringConstructor;
+    justified: BooleanConstructor;
+    keepMounted: BooleanConstructor;
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    justified: boolean;
+    keepMounted: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const ThlBreadcrumb: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<BreadcrumbItem[]>;
+        required: true;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<BreadcrumbItem[]>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const ThlPagination: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    page: {
+        type: NumberConstructor;
+        required: true;
+    };
+    total: {
+        type: NumberConstructor;
+        required: true;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxPages: NumberConstructor;
+    size: StringConstructor;
+    showTotal: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    showFirstLast: BooleanConstructor;
+    split: BooleanConstructor;
+    rounded: BooleanConstructor;
+    pageSizes: PropType<number[]>;
+    ariaLabel: StringConstructor;
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "update:page" | "update:pageSize")[], "change" | "update:page" | "update:pageSize", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    page: {
+        type: NumberConstructor;
+        required: true;
+    };
+    total: {
+        type: NumberConstructor;
+        required: true;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxPages: NumberConstructor;
+    size: StringConstructor;
+    showTotal: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    showFirstLast: BooleanConstructor;
+    split: BooleanConstructor;
+    rounded: BooleanConstructor;
+    pageSizes: PropType<number[]>;
+    ariaLabel: StringConstructor;
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:page"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:pageSize"?: ((...args: any[]) => any) | undefined;
+}>, {
+    rounded: boolean;
+    split: boolean;
+    showFirstLast: boolean;
+    pageSize: number;
+    showTotal: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const ThlSteps: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<StepItem[]>;
+        required: true;
+    };
+    current: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: PropType<string>;
+        default: string;
+    };
+    clickable: BooleanConstructor;
+    vertical: BooleanConstructor;
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:current"[], "update:current", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<StepItem[]>;
+        required: true;
+    };
+    current: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: PropType<string>;
+        default: string;
+    };
+    clickable: BooleanConstructor;
+    vertical: BooleanConstructor;
+}>> & Readonly<{
+    "onUpdate:current"?: ((...args: any[]) => any) | undefined;
+}>, {
+    vertical: boolean;
+    variant: string;
+    clickable: boolean;
+    current: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const ThlTimeline: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<TimelineItem[]>;
+        required: true;
+    };
+    variant: {
+        type: PropType<"left" | "alternate">;
+        default: "left" | "alternate";
+    };
+    headingLevel: {
+        type: PropType<2 | 3 | 4 | 5 | 6>;
+        default: number;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<TimelineItem[]>;
+        required: true;
+    };
+    variant: {
+        type: PropType<"left" | "alternate">;
+        default: "left" | "alternate";
+    };
+    headingLevel: {
+        type: PropType<2 | 3 | 4 | 5 | 6>;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    variant: "left" | "alternate";
+    headingLevel: 2 | 3 | 4 | 5 | 6;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const ThlActivityFeed: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<Array<{
+            avatar?: string;
+            icon?: string;
+            title: string;
+            time?: string;
+            content?: string;
+            color?: string;
+        }>>;
+        required: true;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<Array<{
+            avatar?: string;
+            icon?: string;
+            title: string;
+            time?: string;
+            content?: string;
+            color?: string;
+        }>>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const ThlHorizontalTimeline: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<Array<{
+            date: string;
+            title: string;
+            content?: string;
+        }>>;
+        required: true;
+    };
+    headingLevel: {
+        type: PropType<2 | 3 | 4 | 5 | 6>;
+        default: number;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    items: {
+        type: PropType<Array<{
+            date: string;
+            title: string;
+            content?: string;
+        }>>;
+        required: true;
+    };
+    headingLevel: {
+        type: PropType<2 | 3 | 4 | 5 | 6>;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    headingLevel: 2 | 3 | 4 | 5 | 6;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const ThlCarousel: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    slides: {
+        type: PropType<Array<{
+            image?: string;
+            caption?: string;
+            alt?: string;
+        }>>;
+        required: true;
+    };
+    interval: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fade: BooleanConstructor;
+    arrows: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dots: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: PropType<string | number>;
+        required: false;
+    };
+    ariaLabel: StringConstructor;
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    slides: {
+        type: PropType<Array<{
+            image?: string;
+            caption?: string;
+            alt?: string;
+        }>>;
+        required: true;
+    };
+    interval: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fade: BooleanConstructor;
+    arrows: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    dots: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    height: {
+        type: PropType<string | number>;
+        required: false;
+    };
+    ariaLabel: StringConstructor;
+}>> & Readonly<{}>, {
+    fade: boolean;
+    interval: number;
+    arrows: boolean;
+    dots: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/nav.js

@@ -0,0 +1,398 @@
+import { defineComponent as m, h as a, watch as z, onMounted as B, onBeforeUnmount as w, ref as S } from "vue";
+import { bem as b, cx as p, createCarousel as q, paginate as A, uid as L, createTabs as N } from "@thl-ui/core";
+import { usePrefix as g, useI18n as T, useStore as x, useDefaults as $ } from "../context.js";
+import { icon as v, any as F, str as C } from "./util.js";
+import { ThlBadge as P } from "./basic.js";
+const I = /* @__PURE__ */ m({
+  name: "ThlTabs",
+  props: { items: { type: Array, required: !0 }, modelValue: String, variant: String, justified: Boolean, keepMounted: Boolean },
+  emits: ["update:modelValue", "change"],
+  setup(e, { slots: r, emit: c }) {
+    const t = g(), l = $("Tabs", e), i = L("tabs"), s = N({
+      items: e.items,
+      active: e.modelValue,
+      onChange: (n) => {
+        c("update:modelValue", n), c("change", n);
+      }
+    });
+    z(
+      () => e.items,
+      (n) => s.setItems(n)
+    ), z(
+      () => e.modelValue,
+      (n) => {
+        n !== void 0 && n !== s.active() && s.state.set(n);
+      }
+    );
+    const o = x(s.state), d = S();
+    return () => {
+      const n = b("tabs", t.value), y = l.value.variant, k = y === "vertical";
+      return a("div", { class: n({ [y ?? "default"]: !!y && y !== "default", justified: e.justified }) }, [
+        a(
+          "div",
+          {
+            ref: d,
+            role: "tablist",
+            "aria-orientation": k ? "vertical" : "horizontal",
+            class: n("list"),
+            onKeydown: (u) => {
+              s.onKeyDown(u, k ? "vertical" : "horizontal") && requestAnimationFrame(() => d.value?.querySelector('[aria-selected="true"]')?.focus());
+            }
+          },
+          e.items.map((u) => {
+            const f = s.ids(i, u.key), h = u.key === o.value;
+            return a(
+              "button",
+              {
+                key: u.key,
+                id: f.tab,
+                role: "tab",
+                type: "button",
+                "aria-selected": h,
+                "aria-controls": f.panel,
+                tabindex: h ? 0 : -1,
+                disabled: u.disabled,
+                class: p(n("tab"), { "is-active": h }),
+                onClick: () => s.select(u.key)
+              },
+              [
+                v(u.icon),
+                r[`tab-${u.key}`] ? r[`tab-${u.key}`]() : u.label,
+                u.badge !== void 0 ? a(P, { color: "danger" }, () => u.badge) : null
+              ]
+            );
+          })
+        ),
+        ...e.items.map((u) => {
+          const f = s.ids(i, u.key), h = u.key === o.value;
+          return !h && !e.keepMounted ? null : a(
+            "div",
+            { key: u.key, id: f.panel, role: "tabpanel", "aria-labelledby": f.tab, hidden: !h, tabindex: 0, class: n("panel") },
+            r[u.key]?.() ?? r.default?.({ key: u.key })
+          );
+        })
+      ]);
+    };
+  }
+}), K = /* @__PURE__ */ m({
+  name: "ThlBreadcrumb",
+  props: { items: { type: Array, required: !0 } },
+  setup(e, { slots: r }) {
+    const c = g();
+    return () => {
+      const t = b("breadcrumb", c.value);
+      return a(
+        "nav",
+        { "aria-label": "breadcrumb" },
+        a(
+          "ol",
+          { class: t() },
+          e.items.map((l, i) => {
+            const s = i === e.items.length - 1, o = [v(l.icon), l.label];
+            return a(
+              "li",
+              { key: i, class: p(t("item"), { "is-active": s }), "aria-current": s ? "page" : void 0 },
+              !s && l.href ? r.link ? r.link({ item: l }) : a("a", { href: l.href }, o) : o
+            );
+          })
+        )
+      );
+    };
+  }
+}), U = /* @__PURE__ */ m({
+  name: "ThlPagination",
+  props: {
+    page: { type: Number, required: !0 },
+    total: { type: Number, required: !0 },
+    pageSize: { type: Number, default: 10 },
+    maxPages: Number,
+    size: String,
+    showTotal: { type: Boolean, default: void 0 },
+    showFirstLast: Boolean,
+    split: Boolean,
+    rounded: Boolean,
+    pageSizes: Array,
+    ariaLabel: String
+  },
+  emits: ["update:page", "update:pageSize", "change"],
+  setup(e, { emit: r }) {
+    const c = g(), { t } = T(), l = $("Pagination", e), i = (s) => {
+      r("update:page", s), r("change", s);
+    };
+    return () => {
+      const s = A({ page: e.page, total: e.total, pageSize: e.pageSize, maxPages: l.value.maxPages }), o = b("pagination", c.value), d = (n, y, k, u) => a("li", a("button", { type: "button", class: o("item"), disabled: k, onClick: () => i(y), "aria-label": u }, n));
+      return a("nav", { "aria-label": e.ariaLabel ?? t("pagination.goto"), class: `${c.value}-flex` }, [
+        l.value.showTotal ? a("span", { class: o("total") }, t("pagination.total", { count: e.total })) : null,
+        a("ul", { class: o({ split: e.split, rounded: e.rounded, size: e.size && e.size !== "md" ? e.size : void 0 }) }, [
+          e.showFirstLast ? d(v("chevrons-left"), 1, !s.hasPrev, t("pagination.first")) : null,
+          d(v("chevron-left"), s.page - 1, !s.hasPrev, t("pagination.prev")),
+          ...s.items.map(
+            (n) => n.type === "ellipsis" ? a("li", { key: n.key }, a("span", { class: o("item", { ellipsis: !0 }) }, "…")) : a(
+              "li",
+              { key: n.page },
+              a(
+                "button",
+                {
+                  type: "button",
+                  class: p(o("item"), { "is-active": n.active }),
+                  "aria-current": n.active ? "page" : void 0,
+                  onClick: () => i(n.page),
+                  "aria-label": t("pagination.page", { page: n.page })
+                },
+                n.page
+              )
+            )
+          ),
+          d(v("chevron-right"), s.page + 1, !s.hasNext, t("pagination.next")),
+          e.showFirstLast ? d(v("chevrons-right"), s.pageCount, !s.hasNext, t("pagination.last")) : null
+        ]),
+        e.pageSizes ? a(
+          "select",
+          {
+            class: p(`${c.value}-input`, `${c.value}-input--size-sm`, o("size")),
+            style: { width: "auto" },
+            value: e.pageSize,
+            "aria-label": t("pagination.pageSize", { size: e.pageSize }),
+            onChange: (n) => r("update:pageSize", Number(n.target.value))
+          },
+          e.pageSizes.map((n) => a("option", { value: n }, t("pagination.pageSize", { size: n })))
+        ) : null
+      ]);
+    };
+  }
+}), X = /* @__PURE__ */ m({
+  name: "ThlSteps",
+  props: {
+    items: { type: Array, required: !0 },
+    current: { type: Number, default: 0 },
+    variant: C("default"),
+    clickable: Boolean,
+    vertical: Boolean
+  },
+  emits: ["update:current"],
+  setup(e, { emit: r }) {
+    const c = g(), { t } = T();
+    return () => {
+      const l = b("steps", c.value);
+      return a(
+        "ol",
+        { class: l({ [e.variant]: e.variant !== "default", vertical: e.vertical }) },
+        e.items.map((i, s) => {
+          const o = s < e.current ? "done" : s === e.current ? "active" : "pending";
+          return a(
+            "li",
+            { key: s, style: { display: "contents" } },
+            a(
+              e.clickable ? "button" : "div",
+              {
+                type: e.clickable ? "button" : void 0,
+                onClick: e.clickable ? () => r("update:current", s) : void 0,
+                "aria-current": o === "active" ? "step" : void 0,
+                class: p(l("item"), `is-${o}`, { "is-clickable": e.clickable })
+              },
+              [
+                a("span", { class: l("number") }, o === "done" ? v(i.icon ?? "check") : i.icon ? v(i.icon) : String(s + 1)),
+                a("span", [
+                  a("span", { class: l("title"), style: { display: "block" } }, i.title),
+                  i.description ? a("span", { class: l("desc") }, i.description) : null,
+                  a("span", { class: `${c.value}-sr-only` }, o === "done" ? t("steps.completed") : t("steps.step", { n: s + 1 }))
+                ])
+              ]
+            )
+          );
+        })
+      );
+    };
+  }
+}), _ = /* @__PURE__ */ m({
+  name: "ThlTimeline",
+  props: {
+    items: { type: Array, required: !0 },
+    variant: C("alternate"),
+    headingLevel: { type: Number, default: 3 }
+  },
+  setup(e, { slots: r }) {
+    const c = g();
+    return () => {
+      const t = b("timeline", c.value);
+      return a(
+        "ul",
+        { class: t({ left: e.variant === "left" }) },
+        e.items.map(
+          (l, i) => a("li", { key: i, class: t("item", { inverted: e.variant === "alternate" && i % 2 === 1 }) }, [
+            a("div", { class: t("badge", { [l.color ?? "inverse"]: !0 }) }, l.image ? a("img", { src: l.image, alt: "" }) : v(l.icon)),
+            a("div", { class: t("panel") }, [
+              a(`h${e.headingLevel}`, { class: t("title") }, l.title),
+              l.time ? a("small", { class: t("time") }, [v("clock"), " ", l.time]) : null,
+              r.item ? r.item({ item: l, index: i }) : a("div", l.content)
+            ])
+          ])
+        )
+      );
+    };
+  }
+}), E = /* @__PURE__ */ m({
+  name: "ThlActivityFeed",
+  props: {
+    items: {
+      type: Array,
+      required: !0
+    }
+  },
+  setup(e) {
+    const r = g();
+    return () => {
+      const c = b("activity-feed", r.value);
+      return a(
+        "div",
+        { class: c() },
+        e.items.map(
+          (t, l) => a("div", { key: l, class: c("item") }, [
+            a(
+              "div",
+              { class: c("left"), style: t.color ? { background: `var(--${r.value}-color-${t.color})` } : void 0 },
+              t.avatar ? a("img", { src: t.avatar, alt: "" }) : v(t.icon)
+            ),
+            a("div", { class: c("right") }, [
+              a("div", [a("strong", t.title), t.time ? a("span", { class: c("time") }, t.time) : null]),
+              a("div", t.content)
+            ])
+          ])
+        )
+      );
+    };
+  }
+}), G = /* @__PURE__ */ m({
+  name: "ThlHorizontalTimeline",
+  props: {
+    items: { type: Array, required: !0 },
+    headingLevel: { type: Number, default: 3 }
+  },
+  setup(e) {
+    const r = g(), { t: c } = T(), t = S(0);
+    return () => {
+      const l = b("htimeline", r.value), i = e.items[t.value];
+      return a("div", { class: l() }, [
+        a(
+          "div",
+          { class: l("track"), role: "tablist" },
+          e.items.map(
+            (s, o) => a(
+              "button",
+              {
+                key: o,
+                type: "button",
+                role: "tab",
+                "aria-selected": o === t.value,
+                class: p(l("dot"), { "is-active": o === t.value, "is-done": o < t.value }),
+                onClick: () => t.value = o
+              },
+              s.date
+            )
+          )
+        ),
+        a("div", { class: l("content"), role: "tabpanel" }, [a(`h${e.headingLevel}`, i?.title), a("div", i?.content)]),
+        a("div", { class: l("nav") }, [
+          a(
+            "button",
+            { type: "button", class: `${r.value}-btn ${r.value}-btn--size-sm`, disabled: t.value === 0, onClick: () => t.value-- },
+            c("common.previous")
+          ),
+          a(
+            "button",
+            { type: "button", class: `${r.value}-btn ${r.value}-btn--size-sm`, disabled: t.value === e.items.length - 1, onClick: () => t.value++ },
+            c("common.next")
+          )
+        ])
+      ]);
+    };
+  }
+}), J = /* @__PURE__ */ m({
+  name: "ThlCarousel",
+  props: {
+    slides: { type: Array, required: !0 },
+    interval: { type: Number, default: 5e3 },
+    fade: Boolean,
+    arrows: { type: Boolean, default: !0 },
+    dots: { type: Boolean, default: !0 },
+    height: F(),
+    ariaLabel: String
+  },
+  setup(e, { slots: r }) {
+    const c = g(), { t } = T(), l = q({ count: e.slides.length, interval: e.interval, loop: !0 });
+    z(
+      () => e.slides.length,
+      (s) => l.setCount(s)
+    ), B(l.play), w(l.destroy);
+    const i = x(l.state);
+    return () => {
+      const s = b("carousel", c.value), o = typeof e.height == "number" ? `${e.height}px` : e.height;
+      return a(
+        "div",
+        {
+          class: s({ fade: e.fade }),
+          role: "region",
+          "aria-roledescription": "carousel",
+          "aria-label": e.ariaLabel ?? `${t("common.carousel")} (${e.slides.length})`,
+          onMouseenter: l.pause,
+          onMouseleave: l.play,
+          onFocusin: l.pause,
+          onFocusout: l.play
+        },
+        [
+          a(
+            "div",
+            { class: s("track"), style: e.fade ? void 0 : { transform: `translateX(-${i.value * 100}%)` } },
+            e.slides.map(
+              (d, n) => a(
+                "div",
+                {
+                  key: n,
+                  class: p(s("slide"), { "is-active": n === i.value }),
+                  role: "group",
+                  "aria-roledescription": "slide",
+                  "aria-hidden": n !== i.value,
+                  style: { height: o }
+                },
+                [
+                  d.image ? a("img", { src: d.image, alt: d.alt ?? "", style: o ? { height: "100%", objectFit: "cover" } : void 0 }) : null,
+                  r.slide?.({ slide: d, index: n }),
+                  d.caption ? a("div", { class: s("caption") }, d.caption) : null
+                ]
+              )
+            )
+          ),
+          e.arrows && e.slides.length > 1 ? [
+            a("button", { type: "button", class: s("arrow", { prev: !0 }), onClick: l.prev, "aria-label": t("common.previous") }, v("chevron-left")),
+            a("button", { type: "button", class: s("arrow", { next: !0 }), onClick: l.next, "aria-label": t("common.next") }, v("chevron-right"))
+          ] : null,
+          e.dots && e.slides.length > 1 ? a(
+            "div",
+            { class: s("dots") },
+            e.slides.map(
+              (d, n) => a("button", {
+                key: n,
+                type: "button",
+                class: p({ "is-active": n === i.value }),
+                onClick: () => l.goTo(n),
+                "aria-label": String(n + 1),
+                "aria-current": n === i.value
+              })
+            )
+          ) : null
+        ]
+      );
+    };
+  }
+});
+export {
+  E as ThlActivityFeed,
+  K as ThlBreadcrumb,
+  J as ThlCarousel,
+  G as ThlHorizontalTimeline,
+  U as ThlPagination,
+  X as ThlSteps,
+  I as ThlTabs,
+  _ as ThlTimeline
+};
+//# sourceMappingURL=nav.js.map