@ansh-ui/vue 0.2.0

package/dist/chunk-T425FIC7.js

@@ -0,0 +1,773 @@
+import { useRovingFocus } from './chunk-TMG3M6TK.js';
+import { useControllableState } from './chunk-OAQ7MDYX.js';
+import { useId, cx, resolveSlotContent } from './chunk-NJDDNO4C.js';
+import { defineComponent, ref, computed, h, onBeforeUnmount, watch } from 'vue';
+
+var Tabs = defineComponent({
+  name: "AnshTabs",
+  inheritAttrs: false,
+  props: {
+    items: { type: Array, required: true },
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: void 0 },
+    variant: { type: String, default: "underline" },
+    orientation: { type: String, default: "horizontal" },
+    size: { type: String, default: "md" },
+    /** Stretch tabs to fill the available width. */
+    fitted: { type: Boolean, default: false },
+    /**
+     * Activate on arrow-key focus, rather than requiring Enter/Space.
+     *
+     * Automatic is the ARIA-preferred default for cheap panels. Set `false` when switching a tab
+     * triggers a fetch — arrowing past three tabs would fire three requests.
+     */
+    activateOnFocus: { type: Boolean, default: true },
+    /** Accessible name for the tab list. */
+    label: { type: String, required: true }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { attrs, emit, slots }) {
+    const initialActive = props.defaultValue ?? props.items.find((item) => !item.disabled)?.id ?? "";
+    const [active, setActive] = useControllableState(
+      () => props.modelValue,
+      initialActive,
+      (next) => emit("update:modelValue", next)
+    );
+    const baseId = useId();
+    const tabRefs = ref([]);
+    const activeItem = computed(() => props.items.find((item) => item.id === active.value));
+    const enabledIds = computed(
+      () => props.items.filter((item) => !item.disabled).map((item) => item.id)
+    );
+    const onRovingActiveChange = (position) => {
+      const id = enabledIds.value[position];
+      if (id !== void 0 && props.activateOnFocus) setActive(id);
+    };
+    const onKeydown = useRovingFocus({
+      items: tabRefs,
+      active: () => enabledIds.value.indexOf(active.value),
+      onActiveChange: onRovingActiveChange,
+      orientation: props.orientation,
+      loop: true
+    });
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      const currentActive = active.value;
+      const currentActiveItem = activeItem.value;
+      const hasPanel = currentActiveItem?.content !== void 0 || Boolean(slots.default);
+      return h(
+        "div",
+        {
+          class: cx(
+            "ansh-tabs",
+            `ansh-tabs--${props.variant}`,
+            `ansh-tabs--${props.orientation}`,
+            `ansh-tabs--${props.size}`,
+            attrClass
+          ),
+          ...restAttrs
+        },
+        [
+          h(
+            "div",
+            {
+              role: "tablist",
+              "aria-label": props.label,
+              "aria-orientation": props.orientation,
+              class: cx("ansh-tabs__list", props.fitted && "ansh-tabs__list--fitted"),
+              onKeydown
+            },
+            props.items.map((item, index) => {
+              const selected = item.id === currentActive;
+              return h(
+                "button",
+                {
+                  key: item.id,
+                  ref: (node) => {
+                    tabRefs.value[index] = item.disabled ? null : node;
+                  },
+                  type: "button",
+                  role: "tab",
+                  id: `${baseId}-tab-${item.id}`,
+                  "aria-selected": selected,
+                  "aria-controls": `${baseId}-panel-${item.id}`,
+                  // Exactly one tab is in the tab order. Without this, a bar of eight tabs costs a
+                  // keyboard user eight presses to pass.
+                  tabindex: selected ? "0" : "-1",
+                  disabled: item.disabled,
+                  class: cx(
+                    "ansh-tabs__tab",
+                    selected && "ansh-tabs__tab--active",
+                    "ansh-focusable"
+                  ),
+                  onClick: () => setActive(item.id)
+                },
+                [
+                  item.icon !== void 0 ? h("span", { class: "ansh-tabs__icon" }, [resolveSlotContent(item.icon)]) : null,
+                  h("span", {}, [resolveSlotContent(item.label)]),
+                  item.badge !== void 0 ? h("span", { class: "ansh-tabs__badge" }, [resolveSlotContent(item.badge)]) : null
+                ]
+              );
+            })
+          ),
+          hasPanel ? h(
+            "div",
+            {
+              role: "tabpanel",
+              id: `${baseId}-panel-${currentActive}`,
+              "aria-labelledby": `${baseId}-tab-${currentActive}`,
+              // Focusable so a keyboard user can Tab from the tab into its panel and scroll it,
+              // which is required when the panel has no focusable content of its own.
+              tabindex: "0",
+              class: "ansh-tabs__panel ansh-focusable"
+            },
+            [
+              currentActiveItem?.content !== void 0 ? resolveSlotContent(currentActiveItem.content) : slots.default?.()
+            ]
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var Breadcrumbs = defineComponent({
+  name: "AnshBreadcrumbs",
+  inheritAttrs: false,
+  props: {
+    items: { type: Array, required: true },
+    /** Collapse the middle when there are more than this many. Default `Infinity`. */
+    maxItems: { type: Number, default: Number.POSITIVE_INFINITY },
+    separator: { type: [String, Object, Function], default: void 0 }
+  },
+  setup(props, { attrs }) {
+    const expanded = ref(false);
+    const defaultChevron = () => h("svg", { viewBox: "0 0 12 12", width: "12", height: "12", "aria-hidden": "true" }, [
+      h("path", {
+        d: "M4.5 2.5L8 6l-3.5 3.5",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        fill: "none",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      })
+    ]);
+    const renderChevron = () => props.separator !== void 0 ? resolveSlotContent(props.separator) : defaultChevron();
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      const items = props.items;
+      const collapsed = !expanded.value && items.length > props.maxItems && props.maxItems >= 2;
+      const shown = collapsed ? [items[0], ...items.slice(-2)] : items;
+      const gapAfter = collapsed ? 0 : -1;
+      return h(
+        "nav",
+        {
+          "aria-label": "Breadcrumb",
+          class: cx("ansh-breadcrumbs", attrClass),
+          ...restAttrs
+        },
+        [
+          h(
+            "ol",
+            { class: "ansh-breadcrumbs__list" },
+            shown.map((crumb, index) => {
+              const isLast = index === shown.length - 1;
+              return h("li", { key: index, class: "ansh-breadcrumbs__item" }, [
+                index > 0 ? h("span", { class: "ansh-breadcrumbs__separator", "aria-hidden": "true" }, [
+                  renderChevron()
+                ]) : null,
+                isLast ? h("span", { class: "ansh-breadcrumbs__current", "aria-current": "page" }, [
+                  crumb.icon !== void 0 ? resolveSlotContent(crumb.icon) : null,
+                  resolveSlotContent(crumb.label)
+                ]) : h(
+                  "a",
+                  {
+                    href: crumb.href ?? "#",
+                    class: "ansh-breadcrumbs__link ansh-focusable",
+                    onClick: crumb.onClick ? (event) => {
+                      event.preventDefault();
+                      crumb.onClick();
+                    } : void 0
+                  },
+                  [
+                    crumb.icon !== void 0 ? resolveSlotContent(crumb.icon) : null,
+                    resolveSlotContent(crumb.label)
+                  ]
+                ),
+                index === gapAfter ? [
+                  h("span", { class: "ansh-breadcrumbs__separator", "aria-hidden": "true" }, [
+                    renderChevron()
+                  ]),
+                  h(
+                    "button",
+                    {
+                      type: "button",
+                      class: "ansh-breadcrumbs__more ansh-focusable",
+                      "aria-label": `Show ${items.length - 3} hidden breadcrumbs`,
+                      "aria-expanded": false,
+                      onClick: () => {
+                        expanded.value = true;
+                      }
+                    },
+                    "\u2026"
+                  )
+                ] : null
+              ]);
+            })
+          )
+        ]
+      );
+    };
+  }
+});
+var Stepper = defineComponent({
+  name: "AnshStepper",
+  inheritAttrs: false,
+  props: {
+    steps: { type: Array, required: true },
+    /** Index of the current step. Steps before it are complete. */
+    current: { type: Number, required: true },
+    orientation: { type: String, default: "horizontal" }
+  },
+  emits: ["update:current"],
+  setup(props, { attrs, emit }) {
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h(
+        "nav",
+        {
+          class: cx("ansh-stepper", `ansh-stepper--${props.orientation}`, attrClass),
+          "aria-label": "Progress",
+          ...restAttrs
+        },
+        [
+          h(
+            "ol",
+            { class: "ansh-stepper__list" },
+            props.steps.map((step, index) => {
+              const complete = index < props.current;
+              const active = index === props.current;
+              const state = step.error ? "error" : complete ? "complete" : active ? "current" : "upcoming";
+              const interactive = step.clickable && index !== props.current;
+              const inner = [
+                h(
+                  "span",
+                  {
+                    class: cx("ansh-stepper__marker", `ansh-stepper__marker--${state}`),
+                    "aria-hidden": "true"
+                  },
+                  [
+                    step.error ? "!" : complete ? h("svg", { viewBox: "0 0 14 14", width: "12", height: "12" }, [
+                      h("path", {
+                        d: "M2.5 7.5l3 3 6-6.5",
+                        stroke: "currentColor",
+                        "stroke-width": "2",
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        fill: "none"
+                      })
+                    ]) : String(index + 1)
+                  ]
+                ),
+                h("span", { class: "ansh-stepper__text" }, [
+                  h("span", { class: "ansh-stepper__label" }, [resolveSlotContent(step.label)]),
+                  step.description ? h("span", { class: "ansh-stepper__description" }, [
+                    resolveSlotContent(step.description)
+                  ]) : null,
+                  h("span", { class: "ansh-visually-hidden" }, [
+                    step.error ? " \u2014 has errors" : complete ? " \u2014 completed" : active ? " \u2014 current step" : " \u2014 not started"
+                  ])
+                ])
+              ];
+              return h(
+                "li",
+                {
+                  key: step.id,
+                  class: cx("ansh-stepper__item", `ansh-stepper__item--${state}`),
+                  "aria-current": active ? "step" : void 0
+                },
+                [
+                  interactive ? h(
+                    "button",
+                    {
+                      type: "button",
+                      class: "ansh-stepper__button ansh-focusable",
+                      onClick: () => emit("update:current", index)
+                    },
+                    inner
+                  ) : h("span", { class: "ansh-stepper__button" }, inner)
+                ]
+              );
+            })
+          )
+        ]
+      );
+    };
+  }
+});
+var NavigationMenu = defineComponent({
+  name: "AnshNavigationMenu",
+  inheritAttrs: false,
+  props: {
+    items: { type: Array, required: true },
+    label: { type: String, default: "Main navigation" }
+  },
+  setup(props, { attrs }) {
+    const openId = ref(null);
+    const rootRef = ref(null);
+    const baseId = useId();
+    let timer;
+    const schedule = (next, delay) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        openId.value = next;
+      }, delay);
+    };
+    onBeforeUnmount(() => clearTimeout(timer));
+    watch(openId, (id, _previous, onCleanup) => {
+      if (!id) return;
+      const root = rootRef.value;
+      if (!root) return;
+      const onFocusOut = (event) => {
+        const next = event.relatedTarget;
+        if (next && root.contains(next)) return;
+        openId.value = null;
+      };
+      const onKeyDown = (event) => {
+        if (event.key !== "Escape") return;
+        openId.value = null;
+        root.querySelector('[aria-expanded="true"]')?.focus();
+      };
+      root.addEventListener("focusout", onFocusOut);
+      document.addEventListener("keydown", onKeyDown);
+      onCleanup(() => {
+        root.removeEventListener("focusout", onFocusOut);
+        document.removeEventListener("keydown", onKeyDown);
+      });
+    });
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h(
+        "nav",
+        {
+          ref: rootRef,
+          class: cx("ansh-navmenu", attrClass),
+          "aria-label": props.label,
+          onMouseleave: () => schedule(null, 200),
+          ...restAttrs
+        },
+        [
+          h(
+            "ul",
+            { class: "ansh-navmenu__list" },
+            props.items.map((item) => {
+              const hasPanel = Boolean(item.columns?.length);
+              const open = openId.value === item.id;
+              const panelId = `${baseId}-${item.id}`;
+              if (!hasPanel) {
+                return h("li", { key: item.id, class: "ansh-navmenu__item" }, [
+                  h(
+                    "a",
+                    { href: item.href ?? "#", class: "ansh-navmenu__link ansh-focusable" },
+                    item.label
+                  )
+                ]);
+              }
+              return h(
+                "li",
+                {
+                  key: item.id,
+                  class: cx("ansh-navmenu__item", open && "ansh-navmenu__item--open"),
+                  onMouseenter: () => schedule(item.id, 80)
+                },
+                [
+                  h(
+                    "button",
+                    {
+                      type: "button",
+                      class: "ansh-navmenu__link ansh-navmenu__link--trigger ansh-focusable",
+                      "aria-expanded": open,
+                      "aria-controls": panelId,
+                      onClick: () => {
+                        openId.value = open ? null : item.id;
+                      },
+                      onKeydown: (event) => {
+                        if (event.key !== "ArrowDown") return;
+                        event.preventDefault();
+                        openId.value = item.id;
+                        requestAnimationFrame(() => {
+                          document.getElementById(panelId)?.querySelector("a, button")?.focus();
+                        });
+                      }
+                    },
+                    [
+                      item.label,
+                      h(
+                        "span",
+                        {
+                          class: cx("ansh-navmenu__chevron", open && "ansh-navmenu__chevron--open"),
+                          "aria-hidden": "true"
+                        },
+                        [
+                          h("svg", { viewBox: "0 0 12 12", width: "10", height: "10" }, [
+                            h("path", {
+                              d: "M3 4.5L6 7.5l3-3",
+                              stroke: "currentColor",
+                              "stroke-width": "1.5",
+                              fill: "none",
+                              "stroke-linecap": "round",
+                              "stroke-linejoin": "round"
+                            })
+                          ])
+                        ]
+                      )
+                    ]
+                  ),
+                  h(
+                    "div",
+                    {
+                      id: panelId,
+                      class: "ansh-navmenu__panel",
+                      hidden: !open,
+                      onMouseenter: () => clearTimeout(timer)
+                    },
+                    [
+                      h("div", { class: "ansh-navmenu__grid" }, [
+                        ...item.columns.map(
+                          (column) => h("div", { class: "ansh-navmenu__column", key: column.id }, [
+                            column.heading ? h("p", { class: "ansh-navmenu__heading" }, column.heading) : null,
+                            h(
+                              "ul",
+                              { class: "ansh-navmenu__links" },
+                              column.links.map(
+                                (link) => h("li", { key: link.id }, [
+                                  h(
+                                    "a",
+                                    {
+                                      href: link.href ?? "#",
+                                      class: "ansh-navmenu__entry ansh-focusable",
+                                      onClick: link.onClick ? (event) => {
+                                        event.preventDefault();
+                                        link.onClick();
+                                        openId.value = null;
+                                      } : () => {
+                                        openId.value = null;
+                                      }
+                                    },
+                                    [
+                                      link.icon !== void 0 ? h(
+                                        "span",
+                                        { class: "ansh-navmenu__icon", "aria-hidden": "true" },
+                                        [resolveSlotContent(link.icon)]
+                                      ) : null,
+                                      h("span", { class: "ansh-navmenu__entry-text" }, [
+                                        h(
+                                          "span",
+                                          { class: "ansh-navmenu__entry-label" },
+                                          link.label
+                                        ),
+                                        link.description ? h(
+                                          "span",
+                                          { class: "ansh-navmenu__entry-description" },
+                                          link.description
+                                        ) : null
+                                      ])
+                                    ]
+                                  )
+                                ])
+                              )
+                            )
+                          ])
+                        ),
+                        item.feature !== void 0 ? h("div", { class: "ansh-navmenu__feature" }, [
+                          resolveSlotContent(item.feature)
+                        ]) : null
+                      ])
+                    ]
+                  )
+                ]
+              );
+            })
+          )
+        ]
+      );
+    };
+  }
+});
+var Collapsible = defineComponent({
+  name: "AnshCollapsible",
+  inheritAttrs: false,
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    trigger: { type: [String, Object, Function], required: true },
+    bare: { type: Boolean, default: false }
+  },
+  emits: ["update:open"],
+  setup(props, { attrs, emit, slots }) {
+    const [isOpen, setOpen] = useControllableState(
+      () => props.open,
+      props.defaultOpen,
+      (next) => emit("update:open", next)
+    );
+    const id = useId();
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h(
+        "div",
+        {
+          class: cx("ansh-collapsible", attrClass),
+          "data-state": isOpen.value ? "open" : "closed",
+          ...restAttrs
+        },
+        [
+          h(
+            "button",
+            {
+              type: "button",
+              class: cx(
+                props.bare ? "ansh-collapsible__bare" : "ansh-collapsible__trigger",
+                "ansh-focusable"
+              ),
+              "aria-expanded": isOpen.value,
+              "aria-controls": id,
+              onClick: () => setOpen(!isOpen.value)
+            },
+            [
+              resolveSlotContent(props.trigger),
+              h(
+                "span",
+                {
+                  class: cx(
+                    "ansh-collapsible__chevron",
+                    isOpen.value && "ansh-collapsible__chevron--open"
+                  ),
+                  "aria-hidden": "true"
+                },
+                [
+                  h("svg", { viewBox: "0 0 12 12", width: "12", height: "12" }, [
+                    h("path", {
+                      d: "M3 4.5L6 7.5l3-3",
+                      stroke: "currentColor",
+                      "stroke-width": "1.5",
+                      fill: "none",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    })
+                  ])
+                ]
+              )
+            ]
+          ),
+          h(
+            "div",
+            {
+              class: "ansh-collapsible__region",
+              id,
+              role: "region",
+              "data-state": isOpen.value ? "open" : "closed"
+            },
+            [
+              // `inert` on the collapsed panel removes its contents from the tab order and the
+              // accessibility tree. Without it, a keyboard user tabs into links inside a section
+              // that is visually closed — invisible focus, and no way to tell where they are.
+              h(
+                "div",
+                { class: "ansh-collapsible__inner", ...isOpen.value ? null : { inert: true } },
+                slots.default?.()
+              )
+            ]
+          )
+        ]
+      );
+    };
+  }
+});
+var Accordion = defineComponent({
+  name: "AnshAccordion",
+  inheritAttrs: false,
+  props: {
+    items: { type: Array, required: true },
+    /** Allow several panels open at once. Default `false`. */
+    multiple: { type: Boolean, default: false },
+    modelValue: { type: Array, default: void 0 },
+    defaultValue: { type: Array, default: () => [] },
+    variant: { type: String, default: "bordered" }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { attrs, emit }) {
+    const [openIds, setOpenIds] = useControllableState(
+      () => props.modelValue,
+      props.defaultValue,
+      (next) => emit("update:modelValue", next)
+    );
+    const baseId = useId();
+    const headerRefs = ref([]);
+    const toggle = (id) => {
+      if (openIds.value.includes(id)) {
+        setOpenIds(openIds.value.filter((entry) => entry !== id));
+      } else {
+        setOpenIds(props.multiple ? [...openIds.value, id] : [id]);
+      }
+    };
+    const onKeydown = useRovingFocus({
+      items: headerRefs,
+      // There is no single "active" header the way `Tabs` has a selected tab — arrow keys move
+      // relative to whichever header currently owns focus.
+      active: () => {
+        const enabled = headerRefs.value.filter((node) => node !== null);
+        return enabled.indexOf(document.activeElement);
+      },
+      // The hook already moves focus to the target header; there is no selection model to sync.
+      onActiveChange: () => {
+      },
+      orientation: "vertical",
+      loop: true
+    });
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      return h(
+        "div",
+        {
+          class: cx("ansh-accordion", `ansh-accordion--${props.variant}`, attrClass),
+          onKeydown,
+          ...restAttrs
+        },
+        props.items.map((item, index) => {
+          const open = openIds.value.includes(item.id);
+          const panelId = `${baseId}-panel-${item.id}`;
+          const headerId = `${baseId}-header-${item.id}`;
+          return h(
+            "div",
+            {
+              key: item.id,
+              class: cx("ansh-accordion__item", open && "ansh-accordion__item--open"),
+              "data-state": open ? "open" : "closed"
+            },
+            [
+              h("h3", { class: "ansh-accordion__heading" }, [
+                h(
+                  "button",
+                  {
+                    ref: (node) => {
+                      headerRefs.value[index] = item.disabled ? null : node;
+                    },
+                    type: "button",
+                    id: headerId,
+                    class: "ansh-accordion__trigger ansh-focusable",
+                    "aria-expanded": open,
+                    "aria-controls": panelId,
+                    disabled: item.disabled,
+                    onClick: () => toggle(item.id)
+                  },
+                  [
+                    item.icon !== void 0 ? h("span", { class: "ansh-accordion__icon" }, [
+                      resolveSlotContent(item.icon)
+                    ]) : null,
+                    h("span", { class: "ansh-accordion__text" }, [
+                      h("span", { class: "ansh-accordion__title" }, [
+                        resolveSlotContent(item.title)
+                      ]),
+                      item.subtitle ? h("span", { class: "ansh-accordion__subtitle" }, [
+                        resolveSlotContent(item.subtitle)
+                      ]) : null
+                    ]),
+                    h(
+                      "span",
+                      {
+                        class: cx(
+                          "ansh-accordion__chevron",
+                          open && "ansh-accordion__chevron--open"
+                        ),
+                        "aria-hidden": "true"
+                      },
+                      [
+                        h("svg", { viewBox: "0 0 12 12", width: "12", height: "12" }, [
+                          h("path", {
+                            d: "M3 4.5L6 7.5l3-3",
+                            stroke: "currentColor",
+                            "stroke-width": "1.5",
+                            fill: "none",
+                            "stroke-linecap": "round",
+                            "stroke-linejoin": "round"
+                          })
+                        ])
+                      ]
+                    )
+                  ]
+                )
+              ]),
+              h(
+                "div",
+                {
+                  class: "ansh-accordion__region",
+                  id: panelId,
+                  role: "region",
+                  "aria-labelledby": headerId,
+                  "data-state": open ? "open" : "closed"
+                },
+                [
+                  h("div", { class: "ansh-accordion__panel", ...open ? null : { inert: true } }, [
+                    resolveSlotContent(item.content)
+                  ])
+                ]
+              )
+            ]
+          );
+        })
+      );
+    };
+  }
+});
+var DisclosureList = defineComponent({
+  name: "AnshDisclosureList",
+  inheritAttrs: false,
+  props: {
+    items: { type: Array, required: true },
+    initial: { type: Number, default: 3 },
+    moreLabel: {
+      type: Function,
+      default: (hidden) => `Show ${hidden} more`
+    },
+    lessLabel: { type: String, default: "Show less" }
+  },
+  setup(props, { attrs }) {
+    const expanded = ref(false);
+    const id = useId();
+    return () => {
+      const { class: attrClass, ...restAttrs } = attrs;
+      const hidden = props.items.length - props.initial;
+      if (hidden <= 0) {
+        return h(
+          "ul",
+          { class: cx("ansh-disclosure-list", attrClass), ...restAttrs },
+          props.items.map((item, index) => h("li", { key: index }, [resolveSlotContent(item)]))
+        );
+      }
+      const shown = expanded.value ? props.items : props.items.slice(0, props.initial);
+      return h("div", { class: attrClass, ...restAttrs }, [
+        h(
+          "ul",
+          { class: "ansh-disclosure-list", id },
+          shown.map((item, index) => h("li", { key: index }, [resolveSlotContent(item)]))
+        ),
+        h(
+          "button",
+          {
+            type: "button",
+            class: "ansh-disclosure-list__toggle ansh-focusable",
+            "aria-expanded": expanded.value,
+            "aria-controls": id,
+            onClick: () => {
+              expanded.value = !expanded.value;
+            }
+          },
+          expanded.value ? props.lessLabel : props.moreLabel(hidden)
+        )
+      ]);
+    };
+  }
+});
+
+export { Accordion, Breadcrumbs, Collapsible, DisclosureList, NavigationMenu, Stepper, Tabs };
+//# sourceMappingURL=chunk-T425FIC7.js.map
+//# sourceMappingURL=chunk-T425FIC7.js.map