@nuykon/basecoat-vue 0.0.0-stage → 1.0.2

package/dist/index.js

@@ -0,0 +1,2548 @@
+// src/primitives.ts
+import {
+  cloneVNode,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  h,
+  mergeProps
+} from "vue";
+
+// ../core/src/chart.ts
+function attachCanvasChart(canvas, config) {
+  const doc = canvas.ownerDocument, win = doc.defaultView, ctx = canvas.getContext("2d");
+  if (!ctx) return () => {
+  };
+  const data = config.data ?? [], series = Object.entries(config.series ?? {}), labelKey = config.labelKey ?? "label";
+  const color = (value) => value.startsWith("var(") ? win.getComputedStyle(canvas).getPropertyValue(value.slice(4, -1)).trim() || "#888" : value;
+  const legend = doc.createElement("ul");
+  legend.className = "chart-legend";
+  if (config.legend) {
+    for (const [index, [key, options]] of series.entries()) {
+      const item = doc.createElement("li"), content = doc.createElement("span"), indicator = doc.createElement("span");
+      content.className = "chart-legend-item";
+      indicator.className = "chart-legend-indicator";
+      indicator.style.setProperty(
+        "--chart-indicator-color",
+        options.color ?? `var(--chart-${index + 1})`
+      );
+      content.append(indicator, doc.createTextNode(options.label ?? key));
+      item.append(content);
+      legend.append(item);
+    }
+    canvas.after(legend);
+  }
+  canvas.style.width = "100%";
+  canvas.style.aspectRatio = "16 / 9";
+  canvas.style.display = "block";
+  const draw = () => {
+    const width = Math.max(200, canvas.parentElement?.clientWidth ?? 400), height = width * 9 / 16, ratio = win.devicePixelRatio || 1;
+    canvas.width = Math.round(width * ratio);
+    canvas.height = Math.round(height * ratio);
+    canvas.style.height = `${height}px`;
+    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    const padding = { left: 30, top: 10, right: 10, bottom: 30 }, w = width - padding.left - padding.right, h25 = height - padding.top - padding.bottom;
+    const max = Math.max(
+      1,
+      ...data.map(
+        (row) => config.options?.scales?.y?.stacked ? series.reduce((sum, [key]) => sum + Number(row[key] ?? 0), 0) : Math.max(...series.map(([key]) => Number(row[key] ?? 0)))
+      )
+    );
+    const x = (index) => padding.left + index / Math.max(1, data.length - 1) * w, y = (value) => padding.top + h25 - value / max * h25;
+    ctx.font = '12px "Geist Sans",system-ui';
+    ctx.fillStyle = color("var(--muted-foreground)");
+    ctx.strokeStyle = color("var(--border)");
+    ctx.lineWidth = 0.5;
+    if (config.type !== "doughnut" && config.type !== "radar") {
+      for (let index = 0; index <= 4; index++) {
+        const top = padding.top + index * h25 / 4;
+        ctx.beginPath();
+        ctx.moveTo(padding.left, top);
+        ctx.lineTo(width - padding.right, top);
+        ctx.stroke();
+        ctx.fillText(String(Math.round(max * (4 - index) / 4)), 0, top + 4);
+      }
+      for (let index = 0; index < data.length; index++)
+        if (index % Math.max(1, Math.ceil(data.length / 6)) === 0)
+          ctx.fillText(String(data[index][labelKey] ?? ""), x(index) - 10, height - 8);
+    }
+    if (config.type === "doughnut") {
+      const key = series[0]?.[0] ?? "value", values = data.map((row) => Number(row[key] ?? 0)), total = values.reduce((a, b) => a + b, 0) || 1, radius = Math.min(w, h25) * 0.45, cx3 = width / 2, cy = height / 2;
+      let start = -Math.PI / 2;
+      values.forEach((value, index) => {
+        const end = start + value / total * Math.PI * 2;
+        ctx.beginPath();
+        ctx.arc(cx3, cy, radius, start, end);
+        ctx.arc(cx3, cy, radius * 0.62, end, start, true);
+        ctx.closePath();
+        ctx.fillStyle = color(`var(--chart-${index % 5 + 1})`);
+        ctx.fill();
+        start = end;
+      });
+    } else if (config.type === "radar") {
+      const radius = Math.min(w, h25) * 0.4, cx3 = width / 2, cy = height / 2;
+      const point = (index, scale) => {
+        const angle = index / Math.max(1, data.length) * Math.PI * 2 - Math.PI / 2;
+        return [
+          cx3 + Math.cos(angle) * radius * scale,
+          cy + Math.sin(angle) * radius * scale
+        ];
+      };
+      for (let ring = 1; ring <= 4; ring++) {
+        ctx.beginPath();
+        data.forEach((_, i) => {
+          const [x2, y2] = point(i, ring / 4);
+          if (i === 0) ctx.moveTo(x2, y2);
+          else ctx.lineTo(x2, y2);
+        });
+        ctx.closePath();
+        ctx.stroke();
+      }
+      series.forEach(([key, options], index) => {
+        ctx.beginPath();
+        data.forEach((row, i) => {
+          const [x2, y2] = point(i, Number(row[key] ?? 0) / max);
+          if (i === 0) ctx.moveTo(x2, y2);
+          else ctx.lineTo(x2, y2);
+        });
+        ctx.closePath();
+        ctx.strokeStyle = color(options.color ?? `var(--chart-${index + 1})`);
+        ctx.stroke();
+        ctx.globalAlpha = 0.2;
+        ctx.fillStyle = ctx.strokeStyle;
+        ctx.fill();
+        ctx.globalAlpha = 1;
+      });
+      ctx.fillStyle = color("var(--muted-foreground)");
+      data.forEach((row, i) => {
+        const [x2, y2] = point(i, 1.15);
+        ctx.fillText(String(row[labelKey] ?? ""), x2 - 15, y2);
+      });
+    } else {
+      const stacks2 = data.map(() => 0);
+      series.forEach(([key, options], seriesIndex) => {
+        const fill = color(options.color ?? `var(--chart-${seriesIndex + 1})`);
+        ctx.strokeStyle = fill;
+        ctx.fillStyle = fill;
+        ctx.lineWidth = 1.5;
+        if (config.type === "bar")
+          data.forEach((row, index) => {
+            const value = Number(row[key] ?? 0), stacked = config.options?.scales?.y?.stacked, group = w / Math.max(1, data.length), barWidth = group * 0.65 / (stacked ? 1 : series.length), left = padding.left + index * group + group * 0.15 + (stacked ? 0 : seriesIndex * barWidth), base = stacks2[index];
+            ctx.beginPath();
+            ctx.roundRect(
+              left,
+              y(value + base),
+              Math.max(1, barWidth - 2),
+              Math.max(0, y(base) - y(value + base)),
+              3
+            );
+            ctx.fill();
+            if (stacked) stacks2[index] += value;
+          });
+        else {
+          ctx.beginPath();
+          data.forEach((row, index) => {
+            const top = y(Number(row[key] ?? 0));
+            if (index === 0) ctx.moveTo(x(index), top);
+            else if (options.dataset?.stepped) {
+              ctx.lineTo(x(index), y(Number(data[index - 1][key] ?? 0)));
+              ctx.lineTo(x(index), top);
+            } else ctx.lineTo(x(index), top);
+          });
+          ctx.stroke();
+          if (options.dataset?.fill || options.surface === "gradient") {
+            ctx.lineTo(x(data.length - 1), y(0));
+            ctx.lineTo(x(0), y(0));
+            ctx.closePath();
+            const gradient = ctx.createLinearGradient(0, 0, 0, height);
+            gradient.addColorStop(0, fill);
+            gradient.addColorStop(1, "transparent");
+            ctx.globalAlpha = 0.3;
+            ctx.fillStyle = gradient;
+            ctx.fill();
+            ctx.globalAlpha = 1;
+          }
+        }
+      });
+    }
+  };
+  const resize = new win.ResizeObserver(draw), themes = new win.MutationObserver(draw);
+  resize.observe(canvas.parentElement ?? canvas);
+  themes.observe(doc.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-style-variant"]
+  });
+  doc.addEventListener("basecoat:stylechange", draw);
+  draw();
+  return () => {
+    resize.disconnect();
+    themes.disconnect();
+    legend.remove();
+    doc.removeEventListener("basecoat:stylechange", draw);
+  };
+}
+
+// ../core/src/widgets.ts
+function attachWidget(root) {
+  const abort = new AbortController(), signal = abort.signal, cleanups = [];
+  const on = (element, name, fn) => element?.addEventListener(name, fn, { signal });
+  const emit = (detail) => root.dispatchEvent(new CustomEvent("basecoat:change", { bubbles: true, detail }));
+  if (root instanceof HTMLCanvasElement && root.dataset.chartConfig)
+    cleanups.push(attachCanvasChart(root, JSON.parse(root.dataset.chartConfig)));
+  if (root.classList.contains("sidebar")) {
+    const media = root.ownerDocument.defaultView.matchMedia("(min-width: 768px)");
+    root.dataset.sidebarInitialized = "true";
+    const set = (open) => root.setAttribute("aria-hidden", String(!open));
+    const toggle = () => set(root.getAttribute("aria-hidden") === "true");
+    const sidebar = root;
+    sidebar.toggle = toggle;
+    set(media.matches);
+    on(media, "change", () => set(media.matches));
+    on(root, "click", (event) => {
+      if (event.target === root && !media.matches) set(false);
+    });
+    on(root.ownerDocument, "keydown", (event) => {
+      if (event.key === "Escape" && !media.matches) set(false);
+    });
+    cleanups.push(() => {
+      delete sidebar.toggle;
+      delete root.dataset.sidebarInitialized;
+    });
+  }
+  if (root.classList.contains("toaster")) {
+    const timers = /* @__PURE__ */ new Set();
+    const toast = (message) => {
+      const item = root.ownerDocument.createElement("div");
+      item.className = "toast";
+      item.setAttribute("role", "status");
+      const content = root.ownerDocument.createElement("div");
+      content.className = "toast-content";
+      const section = root.ownerDocument.createElement("section"), heading = root.ownerDocument.createElement("h2");
+      heading.textContent = message.title ?? "";
+      section.append(heading);
+      if (message.description) {
+        const description = root.ownerDocument.createElement("p");
+        description.textContent = message.description;
+        section.append(description);
+      }
+      const footer = root.ownerDocument.createElement("footer"), close = root.ownerDocument.createElement("button");
+      close.type = "button";
+      close.className = "btn";
+      close.dataset.variant = "outline";
+      close.dataset.toastCancel = "";
+      close.textContent = message.cancel?.label ?? "Dismiss";
+      close.addEventListener("click", () => item.remove(), { signal });
+      footer.append(close);
+      if (message.action) {
+        const action = root.ownerDocument.createElement("button");
+        action.type = "button";
+        action.className = "btn";
+        action.textContent = message.action.label ?? "Action";
+        action.addEventListener(
+          "click",
+          () => {
+            message.action?.onclick?.();
+            item.remove();
+          },
+          { signal }
+        );
+        footer.append(action);
+      }
+      content.append(section, footer);
+      item.append(content);
+      root.append(item);
+      if ((message.duration ?? 5e3) > 0) {
+        const timer = setTimeout(() => {
+          item.remove();
+          timers.delete(timer);
+        }, message.duration ?? 5e3);
+        timers.add(timer);
+      }
+      return item;
+    };
+    root.toast = toast;
+    on(root, "click", (event) => {
+      const button = event.target.closest("[data-toast-cancel]");
+      button?.closest(".toast")?.remove();
+    });
+    cleanups.push(() => {
+      timers.forEach(clearTimeout);
+      delete root.toast;
+    });
+  }
+  if (root.classList.contains("tabs")) {
+    const tabs = [...root.querySelectorAll("[role=tab]")].filter(
+      (tab) => tab.closest(".tabs") === root
+    );
+    const set = (target) => {
+      if (target.disabled || target.getAttribute("aria-disabled") === "true") return;
+      for (const tab of tabs) {
+        const active = tab === target;
+        tab.setAttribute("aria-selected", String(active));
+        tab.tabIndex = active ? 0 : -1;
+        const panel = root.ownerDocument.getElementById(tab.getAttribute("aria-controls") ?? "");
+        if (panel) {
+          panel.hidden = !active;
+          panel.setAttribute("aria-selected", String(active));
+        }
+      }
+      emit(target.id);
+    };
+    for (const [index, tab] of tabs.entries()) {
+      on(tab, "click", () => set(tab));
+      on(tab, "keydown", (event) => {
+        const key = event.key, vertical = tab.parentElement?.getAttribute("aria-orientation") === "vertical";
+        if (!(vertical ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"]).includes(key) && !["Home", "End"].includes(key))
+          return;
+        event.preventDefault();
+        const target = tabs[nextIndex(
+          tabs.map((item) => ({
+            disabled: item.disabled || item.getAttribute("aria-disabled") === "true"
+          })),
+          index,
+          key
+        )];
+        target?.focus();
+        if (target) set(target);
+      });
+    }
+  }
+  if (root.classList.contains("accordion")) {
+    const summaries = [...root.querySelectorAll("summary")];
+    on(root, "keydown", (event) => {
+      const index = summaries.indexOf(event.target), key = event.key;
+      if (index >= 0 && ["ArrowUp", "ArrowDown", "Home", "End"].includes(key)) {
+        event.preventDefault();
+        summaries[nextIndex(
+          summaries.map((el) => ({ disabled: el.getAttribute("aria-disabled") === "true" })),
+          index,
+          key
+        )]?.focus();
+      }
+    });
+    on(root, "click", (event) => {
+      const summary = event.target.closest("summary");
+      if (summary?.getAttribute("aria-disabled") === "true" || summary?.parentElement?.getAttribute("aria-disabled") === "true")
+        event.preventDefault();
+    });
+  }
+  const kind = ["select", "combobox", "dropdown-menu", "popover"].find(
+    (kind2) => root.classList.contains(kind2)
+  );
+  if (kind) {
+    const trigger = root.querySelector(
+      ":scope > button, :scope > input[role=combobox], :scope > .input-group input[role=combobox]"
+    ), popup = root.querySelector(":scope > [data-popover]");
+    const search = root.querySelector(
+      "[data-popover] input, input[role=combobox]"
+    );
+    if (trigger && popup) {
+      let open = false, active = -1, disposePosition, disposeLayer;
+      const selector = kind === "dropdown-menu" ? "[role=menuitem], [role=menuitemcheckbox], [role=menuitemradio]" : "[role=option]";
+      const items = () => [...popup.querySelectorAll(selector)].filter(
+        (item) => !item.hidden && item.getAttribute("aria-hidden") !== "true"
+      );
+      const disabled = (item) => item.matches(":disabled") || item.getAttribute("aria-disabled") === "true";
+      const cursor = () => items().map((item) => ({
+        value: item.dataset.value ?? item.id,
+        label: item.textContent?.trim() ?? "",
+        disabled: disabled(item)
+      }));
+      const typeahead = createTypeahead();
+      const highlight = (index) => {
+        active = index;
+        const all = items();
+        for (const [i, item2] of all.entries()) {
+          item2.classList.toggle("active", i === index);
+          if (kind === "dropdown-menu") item2.tabIndex = i === index ? 0 : -1;
+        }
+        const item = all[index];
+        if (item) {
+          if (kind === "dropdown-menu") item.focus();
+          else {
+            const list = popup.querySelector("[role=listbox]");
+            if (list) {
+              list.setAttribute("aria-activedescendant", item.id);
+              scrollWithin(list, item);
+            }
+            search?.setAttribute("aria-activedescendant", item.id);
+          }
+        }
+      };
+      const close = (restore = false) => {
+        if (!open) return;
+        open = false;
+        disposeLayer?.();
+        disposePosition?.();
+        trigger.setAttribute("aria-expanded", "false");
+        popup.setAttribute("aria-hidden", "true");
+        popup.hidden = true;
+        if (restore) trigger.focus();
+      };
+      const show = (last = false) => {
+        if (open || disabled(trigger)) return;
+        open = true;
+        popup.hidden = false;
+        popup.setAttribute("aria-hidden", "false");
+        popup.setAttribute("popover", "manual");
+        popup.classList.add("bc-floating");
+        trigger.setAttribute("aria-expanded", "true");
+        disposePosition = attachFloating(trigger, popup, {
+          side: popup.dataset.side,
+          align: popup.dataset.align,
+          matchWidth: kind === "select" || kind === "combobox"
+        });
+        disposeLayer = dismissableLayer(root.ownerDocument, {
+          elements: () => [trigger, popup],
+          dismiss: (reason) => close(reason === "escape")
+        });
+        const list = popup.querySelector("[role=listbox],[role=menu]");
+        if (list) {
+          list.tabIndex = -1;
+          (search ?? list).focus();
+        }
+        if (kind === "popover") focusFirst(popup);
+        else highlight(nextIndex(cursor(), -1, last ? "End" : "Home"));
+      };
+      const choose = (item) => {
+        if (disabled(item)) return;
+        if (kind === "select" || kind === "combobox") {
+          const multiple = popup.querySelector("[aria-multiselectable=true]") !== null;
+          if (!multiple)
+            items().forEach(
+              (option) => option.setAttribute("aria-selected", String(option === item))
+            );
+          else
+            item.setAttribute(
+              "aria-selected",
+              String(item.getAttribute("aria-selected") !== "true")
+            );
+          const selected = items().filter(
+            (option) => option.getAttribute("aria-selected") === "true"
+          ), values = selected.map(
+            (option) => option.dataset.value ?? option.textContent?.trim() ?? ""
+          );
+          if (trigger instanceof HTMLInputElement) trigger.value = item.textContent?.trim() ?? "";
+          else {
+            const label = trigger.querySelector("span");
+            if (label)
+              label.textContent = selected.map((option) => option.textContent?.trim()).join(", ");
+          }
+          const hidden = root.querySelector("input[type=hidden]");
+          if (hidden) {
+            hidden.value = multiple ? JSON.stringify(values) : values[0] ?? "";
+            hidden.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+          emit(multiple ? values : values[0]);
+          if (!multiple) close(true);
+        } else if (kind === "dropdown-menu") {
+          if (item.getAttribute("role") === "menuitemcheckbox") {
+            item.setAttribute("aria-checked", String(item.getAttribute("aria-checked") !== "true"));
+            emit(item.id);
+          } else close(true);
+        }
+      };
+      popup.hidden = popup.getAttribute("aria-hidden") !== "false";
+      on(trigger, "click", () => open ? close() : show());
+      on(trigger, "keydown", (event) => {
+        const key = event.key;
+        if (!open && ["ArrowDown", "ArrowUp", "Enter", " "].includes(key)) {
+          event.preventDefault();
+          show(key === "ArrowUp");
+        }
+      });
+      on(popup, "keydown", (event) => {
+        const keyboard = event;
+        if (["ArrowDown", "ArrowUp", "Home", "End"].includes(keyboard.key)) {
+          event.preventDefault();
+          highlight(nextIndex(cursor(), active, keyboard.key));
+        } else if (keyboard.key === "Enter" || !search && keyboard.key === " ") {
+          event.preventDefault();
+          const item = items()[active];
+          if (item) {
+            choose(item);
+            if (item instanceof HTMLAnchorElement) item.click();
+          }
+        } else if (keyboard.key === "Tab") close();
+        else if (!search && keyboard.key.length === 1 && !keyboard.ctrlKey && !keyboard.metaKey) {
+          event.preventDefault();
+          highlight(typeahead(keyboard.key, cursor(), active));
+        }
+      });
+      on(popup, "click", (event) => {
+        const item = event.target.closest(selector);
+        if (item) {
+          if (disabled(item)) event.preventDefault();
+          else choose(item);
+        }
+      });
+      on(popup, "pointermove", (event) => {
+        const pointer = event, item = event.target.closest(selector);
+        if (item && !disabled(item) && (pointer.movementX || pointer.movementY))
+          highlight(items().indexOf(item));
+      });
+      on(search, "input", () => {
+        for (const item of popup.querySelectorAll(selector)) {
+          const hidden = !item.textContent?.toLocaleLowerCase().includes(search.value.toLocaleLowerCase());
+          item.hidden = hidden;
+          item.setAttribute("aria-hidden", String(hidden));
+        }
+        if (!open) show();
+        highlight(nextIndex(cursor(), -1, "Home"));
+      });
+      cleanups.push(() => close());
+    }
+  }
+  if (root.classList.contains("command")) {
+    const input = root.querySelector("input"), list = root.querySelector("[role=menu],[role=listbox]");
+    let active = 0;
+    const items = () => [...list?.querySelectorAll("[role=menuitem],[role=option]") ?? []].filter(
+      (item) => !item.hidden
+    );
+    const refresh = () => {
+      const all = items();
+      all.forEach((item, index) => item.classList.toggle("active", index === active));
+      const current = all[active];
+      if (current) input?.setAttribute("aria-activedescendant", current.id);
+    };
+    on(input, "input", () => {
+      list?.querySelectorAll("[role=menuitem],[role=option]").forEach((item) => {
+        item.hidden = !item.textContent?.toLocaleLowerCase().includes(input.value.toLocaleLowerCase());
+        item.setAttribute("aria-hidden", String(item.hidden));
+      });
+      active = 0;
+      refresh();
+    });
+    on(input, "keydown", (event) => {
+      const key = event.key;
+      if (["ArrowUp", "ArrowDown", "Home", "End"].includes(key)) {
+        event.preventDefault();
+        active = nextIndex(
+          items().map((item) => ({ disabled: item.getAttribute("aria-disabled") === "true" })),
+          active,
+          key
+        );
+        refresh();
+      } else if (key === "Enter") {
+        event.preventDefault();
+        items()[active]?.click();
+      }
+    });
+    root.refresh = refresh;
+  }
+  if (root.matches("input[type=range]")) {
+    const range = root, update = () => range.style.setProperty(
+      "--slider-value",
+      `${percentage(range.valueAsNumber, Number(range.min || 0), Number(range.max || 100))}%`
+    );
+    on(range, "input", update);
+    update();
+  }
+  return () => {
+    abort.abort();
+    cleanups.forEach((cleanup) => cleanup());
+  };
+}
+
+// ../core/src/index.ts
+function cx(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function percentage(value, min = 0, max = 100) {
+  return Number.isFinite(value) && max > min ? Math.min(100, Math.max(0, (value - min) / (max - min) * 100)) : 0;
+}
+function nextIndex(items, current, key, loop = true) {
+  const enabled = items.map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0);
+  if (!enabled.length) return -1;
+  if (key === "Home") return enabled[0];
+  if (key === "End") return enabled[enabled.length - 1];
+  const direction = key === "ArrowUp" || key === "ArrowLeft" ? -1 : 1;
+  const position = enabled.indexOf(current);
+  if (position < 0) return direction < 0 ? enabled[enabled.length - 1] : enabled[0];
+  const next = position + direction;
+  return enabled[loop ? (next + enabled.length) % enabled.length : Math.min(enabled.length - 1, Math.max(0, next))];
+}
+function createTypeahead() {
+  let buffer = "", last = 0;
+  return (key, items, current) => {
+    const now = Date.now();
+    buffer = now - last > 700 ? key : buffer + key;
+    last = now;
+    const query = [...buffer].every((char) => char === buffer[0]) ? buffer[0] : buffer;
+    for (let offset = 1; offset <= items.length; offset++) {
+      const index = (current + offset + items.length) % items.length;
+      if (!items[index].disabled && items[index].label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase()))
+        return index;
+    }
+    return current;
+  };
+}
+var stacks = /* @__PURE__ */ new WeakMap();
+function dismissableLayer(doc, layer) {
+  let stack = stacks.get(doc);
+  if (!stack) {
+    const layers = [];
+    const pointer = (event) => {
+      const top = layers.at(-1);
+      if (top && !top.elements().some((el) => el && event.composedPath().includes(el)))
+        top.dismiss("outside");
+    };
+    const keyboard = (event) => {
+      if (event.key === "Escape" && !event.defaultPrevented && layers.length) {
+        event.preventDefault();
+        event.stopPropagation();
+        layers.at(-1)?.dismiss("escape");
+      }
+    };
+    doc.addEventListener("pointerdown", pointer, true);
+    doc.addEventListener("keydown", keyboard);
+    stack = {
+      layers,
+      dispose: () => {
+        doc.removeEventListener("pointerdown", pointer, true);
+        doc.removeEventListener("keydown", keyboard);
+      }
+    };
+    stacks.set(doc, stack);
+  }
+  stack.layers.push(layer);
+  return () => {
+    const index = stack.layers.indexOf(layer);
+    if (index >= 0) stack.layers.splice(index, 1);
+    if (!stack.layers.length) {
+      stack.dispose();
+      stacks.delete(doc);
+    }
+  };
+}
+function floatingPosition(anchor, popup, width, height, options = {}) {
+  let side = options.side ?? "bottom";
+  const align = options.align ?? "start", offset = options.offset ?? 6, padding = 8;
+  const available = {
+    bottom: height - anchor.bottom,
+    top: anchor.top,
+    right: width - anchor.right,
+    left: anchor.left
+  };
+  const opposite = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+  };
+  const required = (side === "top" || side === "bottom" ? popup.height : popup.width) + offset + padding;
+  if (available[side] < required && available[opposite[side]] > available[side])
+    side = opposite[side];
+  const vertical = side === "top" || side === "bottom";
+  let x = vertical ? anchor.left : side === "left" ? anchor.left - popup.width - offset : anchor.right + offset;
+  let y = vertical ? side === "top" ? anchor.top - popup.height - offset : anchor.bottom + offset : anchor.top;
+  if (vertical)
+    x += align === "end" ? anchor.width - popup.width : align === "center" ? (anchor.width - popup.width) / 2 : 0;
+  else
+    y += align === "end" ? anchor.height - popup.height : align === "center" ? (anchor.height - popup.height) / 2 : 0;
+  return {
+    x: Math.max(padding, Math.min(x, width - popup.width - padding)),
+    y: Math.max(padding, Math.min(y, height - popup.height - padding)),
+    side,
+    maxHeight: Math.max(40, available[side] - offset - padding)
+  };
+}
+function attachFloating(anchor, popup, options = {}) {
+  const win = anchor.ownerDocument.defaultView;
+  if (typeof popup.showPopover === "function") popup.showPopover();
+  const update = () => {
+    const rect = anchor.getBoundingClientRect();
+    if (options.matchWidth) popup.style.minWidth = `${rect.width}px`;
+    const viewport = win.visualViewport;
+    const result = floatingPosition(
+      rect,
+      popup.getBoundingClientRect(),
+      viewport?.width ?? win.innerWidth,
+      viewport?.height ?? win.innerHeight,
+      options
+    );
+    Object.assign(popup.style, {
+      left: `${result.x + (viewport?.offsetLeft ?? 0)}px`,
+      top: `${result.y + (viewport?.offsetTop ?? 0)}px`,
+      maxHeight: `${result.maxHeight}px`
+    });
+    popup.dataset.side = result.side;
+  };
+  let frame = 0;
+  const schedule = () => {
+    win.cancelAnimationFrame(frame);
+    frame = win.requestAnimationFrame(update);
+  };
+  const observer = typeof win.ResizeObserver === "function" ? new win.ResizeObserver(schedule) : null;
+  observer?.observe(anchor);
+  observer?.observe(popup);
+  win.addEventListener("resize", schedule);
+  win.addEventListener("scroll", schedule, true);
+  win.visualViewport?.addEventListener("resize", schedule);
+  win.visualViewport?.addEventListener("scroll", schedule);
+  update();
+  return () => {
+    win.cancelAnimationFrame(frame);
+    observer?.disconnect();
+    win.removeEventListener("resize", schedule);
+    win.removeEventListener("scroll", schedule, true);
+    win.visualViewport?.removeEventListener("resize", schedule);
+    win.visualViewport?.removeEventListener("scroll", schedule);
+    if (typeof popup.hidePopover === "function" && popup.matches(":popover-open"))
+      popup.hidePopover();
+  };
+}
+var scrollLocks = /* @__PURE__ */ new WeakMap();
+function lockScroll(doc) {
+  const record = scrollLocks.get(doc) ?? { count: 0, overflow: doc.documentElement.style.overflow };
+  record.count++;
+  scrollLocks.set(doc, record);
+  doc.documentElement.style.overflow = "hidden";
+  let disposed = false;
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    if (--record.count === 0) {
+      doc.documentElement.style.overflow = record.overflow;
+      scrollLocks.delete(doc);
+    }
+  };
+}
+function focusFirst(root) {
+  const target = root.querySelector(
+    '[autofocus],button:not(:disabled),[href],input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex="0"]'
+  );
+  (target ?? root).focus({ preventScroll: true });
+}
+function scrollWithin(container, item) {
+  const parent = container.scrollHeight > container.clientHeight ? container : container.parentElement ?? container;
+  const outer = parent.getBoundingClientRect(), inner = item.getBoundingClientRect();
+  if (inner.top < outer.top) parent.scrollTop -= outer.top - inner.top;
+  else if (inner.bottom > outer.bottom) parent.scrollTop += inner.bottom - outer.bottom;
+}
+function formReset(element, reset) {
+  const form = element.closest("form");
+  let timer;
+  const listener = (event) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      if (!event.defaultPrevented) reset();
+    }, 0);
+  };
+  form?.addEventListener("reset", listener);
+  return () => {
+    clearTimeout(timer);
+    form?.removeEventListener("reset", listener);
+  };
+}
+var primitiveDefinitions = {
+  ChartRoot: ["canvas", "chart-canvas"],
+  SelectRoot: ["div", "select"],
+  ComboboxRoot: ["div", "combobox"],
+  DropdownMenuRoot: ["div", "dropdown-menu"],
+  PopoverRoot: ["div", "popover"],
+  TabsRoot: ["div", "tabs"],
+  AccordionRoot: ["div", "accordion"],
+  CommandRoot: ["div", "command"],
+  SidebarRoot: ["div", "sidebar"],
+  DialogRoot: ["dialog", "dialog"],
+  DrawerRoot: ["dialog", "drawer"],
+  AlertDialogRoot: ["dialog", "alert-dialog"],
+  Button: ["button", "btn"],
+  Badge: ["span", "badge"],
+  Card: ["article", "card"],
+  CardHeader: ["header", ""],
+  CardTitle: ["h3", "card-title"],
+  CardDescription: ["p", ""],
+  CardContent: ["section", ""],
+  CardFooter: ["footer", ""],
+  CardAction: ["div", "card-action"],
+  Alert: ["div", "alert"],
+  AlertTitle: ["h2", ""],
+  AlertDescription: ["section", ""],
+  Avatar: ["span", "avatar"],
+  AvatarImage: ["img", ""],
+  AvatarFallback: ["span", ""],
+  Breadcrumb: ["nav", "breadcrumb"],
+  BreadcrumbList: ["ol", ""],
+  BreadcrumbItem: ["li", ""],
+  BreadcrumbLink: ["a", ""],
+  BreadcrumbSeparator: ["li", ""],
+  ButtonGroup: ["div", "button-group"],
+  Field: ["div", "field"],
+  FieldLabel: ["label", "label"],
+  FieldDescription: ["p", ""],
+  FieldError: ["p", ""],
+  Label: ["label", "label"],
+  Input: ["input", "input"],
+  Textarea: ["textarea", "textarea"],
+  NativeSelect: ["select", "select"],
+  InputGroup: ["div", "input-group"],
+  InputGroupAddon: ["div", ""],
+  Empty: ["div", "empty"],
+  EmptyHeader: ["header", ""],
+  EmptyTitle: ["h3", ""],
+  EmptyDescription: ["p", ""],
+  EmptyContent: ["section", ""],
+  Item: ["div", "item"],
+  ItemContent: ["section", ""],
+  ItemTitle: ["h3", ""],
+  ItemDescription: ["p", ""],
+  ItemActions: ["div", ""],
+  Kbd: ["kbd", "kbd"],
+  ScrollArea: ["div", "scrollbar"],
+  Skeleton: ["div", "skeleton"],
+  Spinner: ["span", "bc-spinner"],
+  Separator: ["hr", ""],
+  Table: ["table", "table"],
+  TableHeader: ["thead", ""],
+  TableBody: ["tbody", ""],
+  TableFooter: ["tfoot", ""],
+  TableRow: ["tr", ""],
+  TableHead: ["th", ""],
+  TableCell: ["td", ""],
+  TableCaption: ["caption", ""],
+  DialogHeader: ["header", ""],
+  DialogTitle: ["h2", ""],
+  DialogDescription: ["p", ""],
+  DialogContent: ["section", ""],
+  DialogFooter: ["footer", ""],
+  SidebarHeader: ["header", ""],
+  SidebarContent: ["section", ""],
+  SidebarFooter: ["footer", ""],
+  SidebarGroup: ["section", ""],
+  SidebarItem: ["a", ""]
+};
+
+// src/primitives.ts
+function primitive(name, tag) {
+  return defineComponent({
+    name,
+    inheritAttrs: false,
+    props: {
+      as: String,
+      asChild: Boolean,
+      variant: String,
+      size: String
+    },
+    setup(props, { attrs, slots, expose }) {
+      let element = null;
+      let dispose;
+      onMounted(() => {
+        if (name.endsWith("Root") && element) dispose = attachWidget(element);
+      });
+      onUnmounted(() => dispose?.());
+      expose({
+        get el() {
+          return element;
+        },
+        focus: () => element?.focus()
+      });
+      const renderElement = () => {
+        const base = {
+          class: primitiveDefinitions[name][1],
+          "data-variant": props.variant,
+          "data-size": props.size
+        };
+        if (tag === "button") base.type = "button";
+        if (name === "Alert") base.role = "alert";
+        if (name === "Breadcrumb") base["aria-label"] = "Breadcrumb";
+        if (name === "BreadcrumbSeparator") {
+          base["aria-hidden"] = true;
+          base.role = "presentation";
+        }
+        if (name === "Skeleton") base["aria-hidden"] = true;
+        if (name === "Spinner") {
+          base.role = "status";
+          base["aria-label"] = "Loading";
+        }
+        if (name === "FieldError") base.role = "alert";
+        if (name === "ScrollArea") base.style = { overflow: "auto" };
+        const attributes = mergeProps(base, attrs, {
+          ref: (el) => {
+            element = el;
+          }
+        });
+        if (props.asChild) {
+          const children = slots.default?.() ?? [];
+          if (children.length !== 1)
+            throw new Error(`${name} with asChild expects a single element.`);
+          return cloneVNode(children[0], attributes, true);
+        }
+        return h(props.as ?? tag, attributes, slots.default?.());
+      };
+      return { renderElement, focus: () => element?.focus() };
+    },
+    render() {
+      return this.renderElement();
+    }
+  });
+}
+
+// src/components/ChartRoot.ts
+var ChartRoot = /* @__PURE__ */ primitive("ChartRoot", "canvas");
+
+// src/components/SelectRoot.ts
+var SelectRoot = /* @__PURE__ */ primitive("SelectRoot", "div");
+
+// src/components/ComboboxRoot.ts
+var ComboboxRoot = /* @__PURE__ */ primitive("ComboboxRoot", "div");
+
+// src/components/DropdownMenuRoot.ts
+var DropdownMenuRoot = /* @__PURE__ */ primitive("DropdownMenuRoot", "div");
+
+// src/components/PopoverRoot.ts
+var PopoverRoot = /* @__PURE__ */ primitive("PopoverRoot", "div");
+
+// src/components/TabsRoot.ts
+var TabsRoot = /* @__PURE__ */ primitive("TabsRoot", "div");
+
+// src/components/AccordionRoot.ts
+var AccordionRoot = /* @__PURE__ */ primitive("AccordionRoot", "div");
+
+// src/components/CommandRoot.ts
+var CommandRoot = /* @__PURE__ */ primitive("CommandRoot", "div");
+
+// src/components/SidebarRoot.ts
+var SidebarRoot = /* @__PURE__ */ primitive("SidebarRoot", "div");
+
+// src/components/DialogRoot.ts
+var DialogRoot = /* @__PURE__ */ primitive("DialogRoot", "dialog");
+
+// src/components/DrawerRoot.ts
+var DrawerRoot = /* @__PURE__ */ primitive("DrawerRoot", "dialog");
+
+// src/components/AlertDialogRoot.ts
+var AlertDialogRoot = /* @__PURE__ */ primitive("AlertDialogRoot", "dialog");
+
+// src/components/Button.ts
+var Button = /* @__PURE__ */ primitive("Button", "button");
+
+// src/components/Badge.ts
+var Badge = /* @__PURE__ */ primitive("Badge", "span");
+
+// src/components/Card.ts
+var Card = /* @__PURE__ */ primitive("Card", "article");
+
+// src/components/CardHeader.ts
+var CardHeader = /* @__PURE__ */ primitive("CardHeader", "header");
+
+// src/components/CardTitle.ts
+var CardTitle = /* @__PURE__ */ primitive("CardTitle", "h3");
+
+// src/components/CardDescription.ts
+var CardDescription = /* @__PURE__ */ primitive("CardDescription", "p");
+
+// src/components/CardContent.ts
+var CardContent = /* @__PURE__ */ primitive("CardContent", "section");
+
+// src/components/CardFooter.ts
+var CardFooter = /* @__PURE__ */ primitive("CardFooter", "footer");
+
+// src/components/CardAction.ts
+var CardAction = /* @__PURE__ */ primitive("CardAction", "div");
+
+// src/components/Alert.ts
+var Alert = /* @__PURE__ */ primitive("Alert", "div");
+
+// src/components/AlertTitle.ts
+var AlertTitle = /* @__PURE__ */ primitive("AlertTitle", "h2");
+
+// src/components/AlertDescription.ts
+var AlertDescription = /* @__PURE__ */ primitive("AlertDescription", "section");
+
+// src/components/Avatar.ts
+var Avatar = /* @__PURE__ */ primitive("Avatar", "span");
+
+// src/components/AvatarImage.ts
+var AvatarImage = /* @__PURE__ */ primitive("AvatarImage", "img");
+
+// src/components/AvatarFallback.ts
+var AvatarFallback = /* @__PURE__ */ primitive("AvatarFallback", "span");
+
+// src/components/Breadcrumb.ts
+var Breadcrumb = /* @__PURE__ */ primitive("Breadcrumb", "nav");
+
+// src/components/BreadcrumbList.ts
+var BreadcrumbList = /* @__PURE__ */ primitive("BreadcrumbList", "ol");
+
+// src/components/BreadcrumbItem.ts
+var BreadcrumbItem = /* @__PURE__ */ primitive("BreadcrumbItem", "li");
+
+// src/components/BreadcrumbLink.ts
+var BreadcrumbLink = /* @__PURE__ */ primitive("BreadcrumbLink", "a");
+
+// src/components/BreadcrumbSeparator.ts
+var BreadcrumbSeparator = /* @__PURE__ */ primitive("BreadcrumbSeparator", "li");
+
+// src/components/ButtonGroup.ts
+var ButtonGroup = /* @__PURE__ */ primitive("ButtonGroup", "div");
+
+// src/components/Field.ts
+var Field = /* @__PURE__ */ primitive("Field", "div");
+
+// src/components/FieldLabel.ts
+var FieldLabel = /* @__PURE__ */ primitive("FieldLabel", "label");
+
+// src/components/FieldDescription.ts
+var FieldDescription = /* @__PURE__ */ primitive("FieldDescription", "p");
+
+// src/components/FieldError.ts
+var FieldError = /* @__PURE__ */ primitive("FieldError", "p");
+
+// src/components/Label.ts
+var Label = /* @__PURE__ */ primitive("Label", "label");
+
+// src/components/Input.ts
+var Input = /* @__PURE__ */ primitive("Input", "input");
+
+// src/components/Textarea.ts
+var Textarea = /* @__PURE__ */ primitive("Textarea", "textarea");
+
+// src/components/NativeSelect.ts
+var NativeSelect = /* @__PURE__ */ primitive("NativeSelect", "select");
+
+// src/components/InputGroup.ts
+var InputGroup = /* @__PURE__ */ primitive("InputGroup", "div");
+
+// src/components/InputGroupAddon.ts
+var InputGroupAddon = /* @__PURE__ */ primitive("InputGroupAddon", "div");
+
+// src/components/Empty.ts
+var Empty = /* @__PURE__ */ primitive("Empty", "div");
+
+// src/components/EmptyHeader.ts
+var EmptyHeader = /* @__PURE__ */ primitive("EmptyHeader", "header");
+
+// src/components/EmptyTitle.ts
+var EmptyTitle = /* @__PURE__ */ primitive("EmptyTitle", "h3");
+
+// src/components/EmptyDescription.ts
+var EmptyDescription = /* @__PURE__ */ primitive("EmptyDescription", "p");
+
+// src/components/EmptyContent.ts
+var EmptyContent = /* @__PURE__ */ primitive("EmptyContent", "section");
+
+// src/components/Item.ts
+var Item = /* @__PURE__ */ primitive("Item", "div");
+
+// src/components/ItemContent.ts
+var ItemContent = /* @__PURE__ */ primitive("ItemContent", "section");
+
+// src/components/ItemTitle.ts
+var ItemTitle = /* @__PURE__ */ primitive("ItemTitle", "h3");
+
+// src/components/ItemDescription.ts
+var ItemDescription = /* @__PURE__ */ primitive("ItemDescription", "p");
+
+// src/components/ItemActions.ts
+var ItemActions = /* @__PURE__ */ primitive("ItemActions", "div");
+
+// src/components/Kbd.ts
+var Kbd = /* @__PURE__ */ primitive("Kbd", "kbd");
+
+// src/components/ScrollArea.ts
+var ScrollArea = /* @__PURE__ */ primitive("ScrollArea", "div");
+
+// src/components/Skeleton.ts
+var Skeleton = /* @__PURE__ */ primitive("Skeleton", "div");
+
+// src/components/Spinner.ts
+var Spinner = /* @__PURE__ */ primitive("Spinner", "span");
+
+// src/components/Separator.ts
+var Separator = /* @__PURE__ */ primitive("Separator", "hr");
+
+// src/components/Table.ts
+var Table = /* @__PURE__ */ primitive("Table", "table");
+
+// src/components/TableHeader.ts
+var TableHeader = /* @__PURE__ */ primitive("TableHeader", "thead");
+
+// src/components/TableBody.ts
+var TableBody = /* @__PURE__ */ primitive("TableBody", "tbody");
+
+// src/components/TableFooter.ts
+var TableFooter = /* @__PURE__ */ primitive("TableFooter", "tfoot");
+
+// src/components/TableRow.ts
+var TableRow = /* @__PURE__ */ primitive("TableRow", "tr");
+
+// src/components/TableHead.ts
+var TableHead = /* @__PURE__ */ primitive("TableHead", "th");
+
+// src/components/TableCell.ts
+var TableCell = /* @__PURE__ */ primitive("TableCell", "td");
+
+// src/components/TableCaption.ts
+var TableCaption = /* @__PURE__ */ primitive("TableCaption", "caption");
+
+// src/components/DialogHeader.ts
+var DialogHeader = /* @__PURE__ */ primitive("DialogHeader", "header");
+
+// src/components/DialogTitle.ts
+var DialogTitle = /* @__PURE__ */ primitive("DialogTitle", "h2");
+
+// src/components/DialogDescription.ts
+var DialogDescription = /* @__PURE__ */ primitive("DialogDescription", "p");
+
+// src/components/DialogContent.ts
+var DialogContent = /* @__PURE__ */ primitive("DialogContent", "section");
+
+// src/components/DialogFooter.ts
+var DialogFooter = /* @__PURE__ */ primitive("DialogFooter", "footer");
+
+// src/components/SidebarHeader.ts
+var SidebarHeader = /* @__PURE__ */ primitive("SidebarHeader", "header");
+
+// src/components/SidebarContent.ts
+var SidebarContent = /* @__PURE__ */ primitive("SidebarContent", "section");
+
+// src/components/SidebarFooter.ts
+var SidebarFooter = /* @__PURE__ */ primitive("SidebarFooter", "footer");
+
+// src/components/SidebarGroup.ts
+var SidebarGroup = /* @__PURE__ */ primitive("SidebarGroup", "section");
+
+// src/components/SidebarItem.ts
+var SidebarItem = /* @__PURE__ */ primitive("SidebarItem", "a");
+
+// src/components/Checkbox.ts
+import { defineComponent as defineComponent2, h as h2, onMounted as onMounted2, onUnmounted as onUnmounted2, ref, watchEffect as watchEffect2 } from "vue";
+
+// src/hooks.ts
+import { computed, shallowRef, watchEffect } from "vue";
+function useValue(getValue, getDefault, change) {
+  const internal = shallowRef(getDefault());
+  return computed({
+    get: () => getValue() === void 0 ? internal.value : getValue(),
+    set: (value) => {
+      if (Object.is(value, getValue() === void 0 ? internal.value : getValue())) return;
+      if (getValue() === void 0) internal.value = value;
+      change(value);
+    }
+  });
+}
+function useFloating(open, anchor, popup, close, options = () => ({})) {
+  watchEffect(
+    (cleanup) => {
+      if (!open.value || !anchor.value || !popup.value) return;
+      const trigger = anchor.value, content = popup.value;
+      const position = attachFloating(trigger, content, options());
+      const layer = dismissableLayer(trigger.ownerDocument, {
+        elements: () => [trigger, content],
+        dismiss: (reason) => close(reason === "escape")
+      });
+      cleanup(() => {
+        layer();
+        position();
+      });
+    },
+    { flush: "post" }
+  );
+}
+
+// src/components/Checkbox.ts
+var Checkbox = defineComponent2({
+  name: "Checkbox",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: Boolean, default: void 0 },
+    defaultValue: { type: Boolean, default: false },
+    indeterminate: Boolean,
+    disabled: Boolean,
+    name: String,
+    required: Boolean
+  },
+  emits: { "update:modelValue": (_value) => true },
+  setup(props, { emit, attrs, expose }) {
+    const element = ref(null), value = useValue(
+      () => props.modelValue,
+      () => props.defaultValue,
+      (value2) => emit("update:modelValue", value2)
+    );
+    watchEffect2(() => {
+      if (element.value) element.value.indeterminate = props.indeterminate;
+    });
+    let cleanup;
+    onMounted2(() => {
+      cleanup = formReset(element.value, () => {
+        value.value = props.defaultValue;
+      });
+    });
+    onUnmounted2(() => cleanup?.());
+    expose({
+      focus: () => element.value?.focus(),
+      get el() {
+        return element.value;
+      }
+    });
+    return () => h2("input", {
+      ...attrs,
+      ref: element,
+      class: cx("input", attrs.class),
+      type: "checkbox",
+      checked: value.value,
+      disabled: props.disabled,
+      name: props.name,
+      required: props.required,
+      onChange: (event) => {
+        value.value = event.target.checked;
+        attrs.onChange?.(event);
+      }
+    });
+  }
+});
+
+// src/components/Switch.ts
+import { defineComponent as defineComponent3, h as h3 } from "vue";
+var Switch = defineComponent3({
+  name: "Switch",
+  inheritAttrs: false,
+  setup: (_, { attrs, slots }) => () => h3(Checkbox, { ...attrs, role: "switch" }, slots)
+});
+
+// src/components/Slider.ts
+import { defineComponent as defineComponent4, h as h4, onMounted as onMounted3, onUnmounted as onUnmounted3, ref as ref2 } from "vue";
+var Slider = defineComponent4({
+  name: "Slider",
+  inheritAttrs: false,
+  props: {
+    modelValue: Number,
+    defaultValue: { type: Number, default: 0 },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    disabled: Boolean,
+    name: String
+  },
+  emits: { "update:modelValue": (_value) => true },
+  setup(props, { emit, attrs }) {
+    const value = useValue(
+      () => props.modelValue,
+      () => props.defaultValue,
+      (value2) => emit("update:modelValue", value2)
+    ), element = ref2(null);
+    let cleanup;
+    onMounted3(() => {
+      cleanup = formReset(element.value, () => {
+        value.value = props.defaultValue;
+      });
+    });
+    onUnmounted3(() => cleanup?.());
+    return () => h4("input", {
+      ...attrs,
+      ref: element,
+      class: cx("input", attrs.class),
+      type: "range",
+      value: value.value,
+      min: props.min,
+      max: props.max,
+      step: props.step,
+      disabled: props.disabled,
+      name: props.name,
+      style: [
+        attrs.style,
+        { "--slider-value": `${percentage(value.value, props.min, props.max)}%` }
+      ],
+      onInput: (event) => {
+        value.value = event.target.valueAsNumber;
+      }
+    });
+  }
+});
+
+// src/components/RadioGroup.ts
+import { defineComponent as defineComponent5, h as h5, onMounted as onMounted4, onUnmounted as onUnmounted4, ref as ref3, useId } from "vue";
+
+// src/shared/optionProps.ts
+var optionsProp = {
+  type: Array,
+  required: true
+};
+
+// src/components/RadioGroup.ts
+var RadioGroup = defineComponent5({
+  name: "RadioGroup",
+  inheritAttrs: false,
+  props: {
+    options: optionsProp,
+    modelValue: String,
+    defaultValue: { type: String, default: "" },
+    name: String,
+    disabled: Boolean,
+    required: Boolean
+  },
+  emits: { "update:modelValue": (_value) => true },
+  setup(props, { emit, attrs }) {
+    const value = useValue(
+      () => props.modelValue,
+      () => props.defaultValue,
+      (value2) => emit("update:modelValue", value2)
+    ), id = useId(), root = ref3(null);
+    let cleanup;
+    onMounted4(() => {
+      cleanup = formReset(root.value, () => {
+        value.value = props.defaultValue;
+      });
+    });
+    onUnmounted4(() => cleanup?.());
+    return () => h5(
+      "div",
+      {
+        ...attrs,
+        ref: root,
+        role: "radiogroup",
+        class: cx("bc-radio-group", attrs.class)
+      },
+      props.options.map(
+        (option) => h5("label", { key: option.value }, [
+          h5("input", {
+            type: "radio",
+            class: "input",
+            name: props.name ?? id,
+            value: option.value,
+            checked: value.value === option.value,
+            disabled: props.disabled || option.disabled,
+            required: props.required,
+            onChange: () => {
+              value.value = option.value;
+            }
+          }),
+          ` ${option.label}`
+        ])
+      )
+    );
+  }
+});
+
+// src/components/Progress.ts
+import { defineComponent as defineComponent6, h as h6 } from "vue";
+var Progress = defineComponent6({
+  name: "Progress",
+  props: { value: Number, max: { type: Number, default: 100 } },
+  setup: (props) => () => h6(
+    "div",
+    {
+      class: "progress",
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": props.max,
+      "aria-valuenow": props.value,
+      "aria-busy": props.value === void 0
+    },
+    h6("span", {
+      style: {
+        width: `${props.value === void 0 ? 100 : percentage(props.value, 0, props.max)}%`
+      }
+    })
+  )
+});
+
+// src/components/Tabs.ts
+import { computed as computed2, defineComponent as defineComponent7, h as h7, useId as useId2 } from "vue";
+var Tabs = defineComponent7({
+  name: "Tabs",
+  props: {
+    items: optionsProp,
+    modelValue: String,
+    defaultValue: String,
+    orientation: { type: String, default: "horizontal" },
+    activation: { type: String, default: "automatic" },
+    variant: String,
+    keepMounted: Boolean
+  },
+  emits: { "update:modelValue": (_value) => true },
+  setup(props, { emit, slots }) {
+    const id = useId2(), elements = [], value = useValue(
+      () => props.modelValue,
+      () => props.defaultValue ?? props.items.find((item) => !item.disabled)?.value ?? "",
+      (value2) => emit("update:modelValue", value2)
+    );
+    const selected = computed2(() => {
+      const index = props.items.findIndex((item) => item.value === value.value && !item.disabled);
+      return index >= 0 ? index : props.items.findIndex((item) => !item.disabled);
+    });
+    return () => h7("div", { class: "tabs" }, [
+      h7(
+        "div",
+        { role: "tablist", "aria-orientation": props.orientation, "data-variant": props.variant },
+        props.items.map(
+          (item, index) => h7(
+            "button",
+            {
+              key: item.value,
+              ref: (el) => {
+                elements[index] = el;
+              },
+              type: "button",
+              role: "tab",
+              id: `${id}-tab-${index}`,
+              "aria-controls": `${id}-panel-${index}`,
+              "aria-selected": selected.value === index,
+              disabled: item.disabled,
+              tabindex: selected.value === index ? 0 : -1,
+              onClick: () => {
+                value.value = item.value;
+              },
+              onKeydown: (event) => {
+                const arrows = props.orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+                if (!arrows.includes(event.key) && !["Home", "End"].includes(event.key)) return;
+                event.preventDefault();
+                let key = event.key;
+                if (props.orientation === "horizontal" && event.target.closest('[dir="rtl"]'))
+                  key = key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+                const next = nextIndex(props.items, index, key);
+                elements[next]?.focus();
+                if (props.activation === "automatic" && next >= 0)
+                  value.value = props.items[next].value;
+              }
+            },
+            item.label
+          )
+        )
+      ),
+      ...props.items.map(
+        (item, index) => h7(
+          "div",
+          {
+            key: item.value,
+            id: `${id}-panel-${index}`,
+            role: "tabpanel",
+            "aria-labelledby": `${id}-tab-${index}`,
+            tabindex: 0,
+            hidden: selected.value !== index
+          },
+          props.keepMounted || selected.value === index ? slots.panel?.({ item }) : void 0
+        )
+      )
+    ]);
+  }
+});
+
+// src/components/Accordion.ts
+import { defineComponent as defineComponent8, h as h8 } from "vue";
+var Accordion = defineComponent8({
+  name: "Accordion",
+  props: {
+    items: optionsProp,
+    modelValue: Array,
+    defaultValue: { type: Array, default: () => [] },
+    multiple: Boolean
+  },
+  emits: { "update:modelValue": (_value) => true },
+  setup(props, { emit, slots }) {
+    const value = useValue(
+      () => props.modelValue,
+      () => props.defaultValue,
+      (value2) => emit("update:modelValue", value2)
+    ), elements = [];
+    return () => h8(
+      "div",
+      { class: "accordion" },
+      props.items.map(
+        (item, index) => h8(
+          "details",
+          {
+            key: item.value,
+            open: value.value.includes(item.value),
+            "aria-disabled": item.disabled || void 0
+          },
+          [
+            h8(
+              "summary",
+              {
+                ref: (el) => {
+                  elements[index] = el;
+                },
+                tabindex: item.disabled ? -1 : 0,
+                "aria-disabled": item.disabled || void 0,
+                onClick: (event) => {
+                  event.preventDefault();
+                  if (!item.disabled)
+                    value.value = value.value.includes(item.value) ? value.value.filter((key) => key !== item.value) : props.multiple ? [...value.value, item.value] : [item.value];
+                },
+                onKeydown: (event) => {
+                  if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+                    event.preventDefault();
+                    elements[nextIndex(props.items, index, event.key)]?.focus();
+                  }
+                }
+              },
+              [item.label, h8("span", { "aria-hidden": true }, "\u2304")]
+            ),
+            h8("section", slots.panel?.({ item }))
+          ]
+        )
+      )
+    );
+  }
+});
+
+// src/components/Collapsible.ts
+import { defineComponent as defineComponent9, h as h9, useId as useId3 } from "vue";
+var Collapsible = defineComponent9({
+  name: "Collapsible",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: Boolean,
+    trigger: { type: String, default: "Toggle" }
+  },
+  emits: { "update:open": (_value) => true },
+  setup(props, { emit, slots }) {
+    const id = useId3(), value = useValue(
+      () => props.open,
+      () => props.defaultOpen,
+      (value2) => emit("update:open", value2)
+    );
+    return () => h9("div", { class: "collapsible" }, [
+      h9(
+        "button",
+        {
+          type: "button",
+          class: "btn",
+          "data-variant": "ghost",
+          "aria-expanded": value.value,
+          "aria-controls": id,
+          onClick: () => {
+            value.value = !value.value;
+          }
+        },
+        slots.trigger?.() ?? props.trigger
+      ),
+      h9("div", { id, hidden: !value.value }, slots.default?.())
+    ]);
+  }
+});
+
+// src/components/Dialog.ts
+import { defineComponent as defineComponent10, h as h10, nextTick, ref as ref6, useId as useId4, watchEffect as watchEffect3 } from "vue";
+var Dialog = defineComponent10({
+  name: "Dialog",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: Boolean,
+    trigger: String,
+    title: { type: String, required: true },
+    description: String,
+    closeOnOutside: { type: Boolean, default: true },
+    closeOnEscape: { type: Boolean, default: true },
+    closeLabel: { type: String, default: "Close" },
+    kind: { type: String, default: "dialog" },
+    side: { type: String, default: "right" }
+  },
+  emits: { "update:open": (_value) => true },
+  setup(props, { emit, slots }) {
+    const element = ref6(null), id = useId4(), open = useValue(
+      () => props.open,
+      () => props.defaultOpen,
+      (value) => emit("update:open", value)
+    );
+    watchEffect3(
+      (cleanup) => {
+        const dialog = element.value;
+        if (!dialog) return;
+        if (!open.value) {
+          if (dialog.open) dialog.close();
+          return;
+        }
+        if (!dialog.open) dialog.showModal();
+        const unlock = lockScroll(dialog.ownerDocument);
+        cleanup(() => {
+          unlock();
+          if (dialog.open) dialog.close();
+        });
+      },
+      { flush: "post" }
+    );
+    return () => [
+      props.trigger !== void 0 || slots.trigger ? h10(
+        "button",
+        {
+          class: "btn",
+          type: "button",
+          "data-variant": "outline",
+          onClick: () => {
+            open.value = true;
+          }
+        },
+        slots.trigger?.() ?? props.trigger
+      ) : null,
+      h10(
+        "dialog",
+        {
+          ref: element,
+          class: props.kind,
+          role: props.kind === "alert-dialog" ? "alertdialog" : void 0,
+          "data-side": props.kind === "drawer" ? props.side : void 0,
+          "aria-labelledby": `${id}-title`,
+          "aria-describedby": props.description ? `${id}-description` : void 0,
+          onCancel: (event) => {
+            event.preventDefault();
+            if (props.closeOnEscape) open.value = false;
+          },
+          onClose: () => {
+            if (open.value) {
+              open.value = false;
+              void nextTick(() => {
+                if (open.value && element.value?.isConnected && !element.value.open)
+                  element.value.showModal();
+              });
+            }
+          },
+          onClick: (event) => {
+            if (props.closeOnOutside && props.kind !== "alert-dialog" && event.target === event.currentTarget)
+              open.value = false;
+          }
+        },
+        h10("div", { class: props.kind === "drawer" ? "bc-drawer-surface" : "bc-dialog-surface" }, [
+          h10("header", [
+            h10("h2", { id: `${id}-title` }, props.title),
+            props.description ? h10("p", { id: `${id}-description` }, props.description) : null
+          ]),
+          h10("section", slots.default?.()),
+          slots.footer ? h10("footer", slots.footer()) : null,
+          props.kind !== "alert-dialog" ? h10(
+            "button",
+            {
+              type: "button",
+              class: "btn",
+              "data-variant": "ghost",
+              "data-size": "icon-sm",
+              "aria-label": props.closeLabel,
+              onClick: () => {
+                open.value = false;
+              }
+            },
+            "\xD7"
+          ) : null
+        ])
+      )
+    ];
+  }
+});
+
+// src/components/AlertDialog.ts
+import { defineComponent as defineComponent11, h as h11 } from "vue";
+var AlertDialog = defineComponent11({
+  name: "AlertDialog",
+  inheritAttrs: false,
+  setup: (_, { attrs, slots }) => () => h11(
+    Dialog,
+    { ...attrs, title: attrs.title, kind: "alert-dialog", closeOnOutside: false },
+    slots
+  )
+});
+
+// src/components/Drawer.ts
+import { defineComponent as defineComponent12, h as h12 } from "vue";
+var Drawer = defineComponent12({
+  name: "Drawer",
+  inheritAttrs: false,
+  setup: (_, { attrs, slots }) => () => h12(Dialog, { ...attrs, title: attrs.title, kind: "drawer" }, slots)
+});
+
+// src/components/Popover.ts
+import { defineComponent as defineComponent13, h as h13, nextTick as nextTick2, ref as ref7, useId as useId5, watch } from "vue";
+var Popover = defineComponent13({
+  name: "Popover",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: Boolean,
+    trigger: { type: String, default: "Open" },
+    label: { type: String, default: "Popover" },
+    side: String,
+    align: String
+  },
+  emits: { "update:open": (_value) => true },
+  setup(props, { emit, slots }) {
+    const id = useId5(), anchor = ref7(null), popup = ref7(null), open = useValue(
+      () => props.open,
+      () => props.defaultOpen,
+      (value) => emit("update:open", value)
+    );
+    useFloating(
+      open,
+      anchor,
+      popup,
+      (restore) => {
+        open.value = false;
+        if (restore) anchor.value?.focus();
+      },
+      () => ({ side: props.side, align: props.align })
+    );
+    watch(open, (value) => {
+      if (value)
+        void nextTick2(() => {
+          if (popup.value) focusFirst(popup.value);
+        });
+    });
+    return () => h13("div", { class: "popover" }, [
+      h13(
+        "button",
+        {
+          type: "button",
+          class: "btn",
+          "data-variant": "outline",
+          ref: anchor,
+          "aria-haspopup": "dialog",
+          "aria-expanded": open.value,
+          "aria-controls": id,
+          onClick: () => {
+            open.value = !open.value;
+          }
+        },
+        slots.trigger?.() ?? props.trigger
+      ),
+      open.value ? h13(
+        "div",
+        {
+          ref: popup,
+          id,
+          "data-popover": "",
+          popover: "manual",
+          class: "bc-floating",
+          role: "dialog",
+          "aria-label": props.label,
+          tabindex: -1
+        },
+        slots.default?.()
+      ) : null
+    ]);
+  }
+});
+
+// src/components/Tooltip.ts
+import { defineComponent as defineComponent14, h as h14, onUnmounted as onUnmounted5, ref as ref8, useId as useId6 } from "vue";
+var Tooltip = defineComponent14({
+  name: "Tooltip",
+  props: {
+    content: { type: String, required: true },
+    delay: { type: Number, default: 300 },
+    side: { type: String, default: "top" }
+  },
+  setup(props, { slots }) {
+    const open = ref8(false), anchor = ref8(null), popup = ref8(null), id = useId6();
+    let timer;
+    useFloating(
+      open,
+      anchor,
+      popup,
+      () => {
+        open.value = false;
+      },
+      () => ({ side: props.side, align: "center" })
+    );
+    const close = () => {
+      clearTimeout(timer);
+      open.value = false;
+    };
+    onUnmounted5(close);
+    return () => h14(
+      "span",
+      {
+        ref: anchor,
+        tabindex: 0,
+        "aria-describedby": open.value ? id : void 0,
+        onPointerenter: () => {
+          timer = setTimeout(() => {
+            open.value = true;
+          }, props.delay);
+        },
+        onPointerleave: close,
+        onFocusin: () => {
+          open.value = true;
+        },
+        onFocusout: close
+      },
+      [
+        slots.default?.(),
+        open.value ? h14(
+          "div",
+          {
+            ref: popup,
+            id,
+            role: "tooltip",
+            popover: "manual",
+            class: "bc-floating tooltip"
+          },
+          props.content
+        ) : null
+      ]
+    );
+  }
+});
+
+// src/components/Select.ts
+import {
+  computed as computed3,
+  defineComponent as defineComponent15,
+  h as h15,
+  nextTick as nextTick3,
+  onMounted as onMounted5,
+  onUnmounted as onUnmounted6,
+  ref as ref9,
+  useId as useId7,
+  watch as watch2
+} from "vue";
+var Select = defineComponent15({
+  name: "Select",
+  props: {
+    options: { type: Array, required: true },
+    modelValue: [String, Array],
+    defaultValue: [String, Array],
+    multiple: Boolean,
+    disabled: Boolean,
+    required: Boolean,
+    name: String,
+    label: { type: String, required: true },
+    placeholder: { type: String, default: "Select\u2026" },
+    searchable: Boolean,
+    searchPlaceholder: { type: String, default: "Search\u2026" },
+    emptyLabel: { type: String, default: "No results" }
+  },
+  emits: { "update:modelValue": (_value) => true },
+  setup(props, { emit }) {
+    const current = useValue(
+      () => props.modelValue,
+      () => props.defaultValue ?? (props.multiple ? [] : ""),
+      (value) => emit("update:modelValue", value)
+    );
+    const open = ref9(false), query = ref9(""), active = ref9(-1), id = useId7(), anchor = ref9(null), popup = ref9(null), list = ref9(null), search = ref9(null), native = ref9(null), typeahead = createTypeahead();
+    const visible = computed3(
+      () => props.options.filter(
+        (option) => !props.searchable || option.label.toLocaleLowerCase().includes(query.value.toLocaleLowerCase())
+      )
+    ), selected = computed3(() => Array.isArray(current.value) ? current.value : [current.value]);
+    const close = (restore) => {
+      open.value = false;
+      query.value = "";
+      if (restore) anchor.value?.focus();
+    };
+    useFloating(open, anchor, popup, close, () => ({ matchWidth: true }));
+    watch2(
+      () => props.disabled,
+      (disabled) => {
+        if (disabled) close(false);
+      }
+    );
+    watch2([open, query], () => {
+      if (open.value) {
+        active.value = nextIndex(visible.value, -1, "Home");
+        void nextTick3(() => (search.value ?? list.value)?.focus());
+      }
+    });
+    watch2(
+      active,
+      () => void nextTick3(() => {
+        const item = list.value?.querySelector(`[data-index="${active.value}"]`);
+        if (list.value && item) scrollWithin(list.value, item);
+      })
+    );
+    let cleanup;
+    onMounted5(() => {
+      cleanup = formReset(native.value, () => {
+        current.value = props.defaultValue ?? (props.multiple ? [] : "");
+      });
+    });
+    onUnmounted6(() => cleanup?.());
+    const choose = (index) => {
+      const option = visible.value[index];
+      if (!option || option.disabled) return;
+      current.value = props.multiple ? selected.value.includes(option.value) ? selected.value.filter((value) => value !== option.value) : [...selected.value.filter(Boolean), option.value] : option.value;
+      if (!props.multiple) close(true);
+    };
+    const keyboard = (event) => {
+      if (["ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+        event.preventDefault();
+        active.value = nextIndex(visible.value, active.value, event.key);
+      } else if (event.key === "Enter" || !props.searchable && event.key === " ") {
+        event.preventDefault();
+        choose(active.value);
+      } else if (event.key === "Tab") close(false);
+      else if (!props.searchable && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        event.preventDefault();
+        active.value = typeahead(event.key, visible.value, active.value);
+      }
+    };
+    return () => h15("div", { class: props.searchable ? "combobox" : "select" }, [
+      h15(
+        "button",
+        {
+          ref: anchor,
+          type: "button",
+          class: "btn",
+          "data-variant": "outline",
+          disabled: props.disabled,
+          role: "combobox",
+          "aria-label": props.label,
+          "aria-haspopup": "listbox",
+          "aria-expanded": open.value,
+          "aria-controls": `${id}-list`,
+          "aria-required": props.required,
+          onClick: () => {
+            open.value = !open.value;
+          },
+          onKeydown: (event) => {
+            if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+              event.preventDefault();
+              open.value = true;
+            }
+          }
+        },
+        [
+          h15(
+            "span",
+            props.options.filter((option) => selected.value.includes(option.value)).map((option) => option.label).join(", ") || props.placeholder
+          ),
+          h15("span", { "aria-hidden": true }, "\u2304")
+        ]
+      ),
+      open.value ? h15("div", { ref: popup, "data-popover": "", popover: "manual", class: "bc-floating" }, [
+        props.searchable ? h15("input", {
+          ref: search,
+          class: "input bc-search",
+          value: query.value,
+          role: "combobox",
+          "aria-label": props.searchPlaceholder,
+          "aria-autocomplete": "list",
+          "aria-expanded": true,
+          "aria-controls": `${id}-list`,
+          "aria-activedescendant": active.value >= 0 ? `${id}-option-${active.value}` : void 0,
+          placeholder: props.searchPlaceholder,
+          onInput: (event) => {
+            query.value = event.target.value;
+          },
+          onKeydown: keyboard
+        }) : null,
+        h15(
+          "div",
+          {
+            ref: list,
+            id: `${id}-list`,
+            role: "listbox",
+            tabindex: -1,
+            "aria-label": props.label,
+            "aria-multiselectable": props.multiple || void 0,
+            "aria-activedescendant": active.value >= 0 ? `${id}-option-${active.value}` : void 0,
+            "data-empty": props.emptyLabel,
+            onKeydown: props.searchable ? void 0 : keyboard
+          },
+          visible.value.map(
+            (option, index) => h15(
+              "div",
+              {
+                key: option.value,
+                id: `${id}-option-${index}`,
+                "data-index": index,
+                "data-value": option.value,
+                role: "option",
+                "aria-selected": selected.value.includes(option.value),
+                "aria-disabled": option.disabled || void 0,
+                class: active.value === index ? "active" : void 0,
+                onPointermove: (event) => {
+                  if ((event.movementX || event.movementY) && !option.disabled)
+                    active.value = index;
+                },
+                onPointerdown: (event) => event.preventDefault(),
+                onClick: () => choose(index)
+              },
+              option.label
+            )
+          )
+        )
+      ]) : null,
+      h15(
+        "select",
+        {
+          ref: native,
+          class: "bc-form-control",
+          tabindex: -1,
+          "aria-hidden": true,
+          name: props.name,
+          disabled: props.disabled,
+          required: props.required,
+          multiple: props.multiple,
+          onChange: (event) => {
+            const el = event.target;
+            current.value = props.multiple ? [...el.selectedOptions].map((option) => option.value) : el.value;
+          },
+          onInvalid: (event) => {
+            event.preventDefault();
+            anchor.value?.focus();
+            anchor.value?.setAttribute("aria-invalid", "true");
+          }
+        },
+        [
+          !props.multiple ? h15("option", { value: "", selected: current.value === "" }, props.placeholder) : null,
+          ...props.options.map(
+            (option) => h15(
+              "option",
+              {
+                key: option.value,
+                value: option.value,
+                selected: selected.value.includes(option.value),
+                disabled: option.disabled
+              },
+              option.label
+            )
+          )
+        ]
+      )
+    ]);
+  }
+});
+
+// src/components/Combobox.ts
+import { defineComponent as defineComponent16, h as h16 } from "vue";
+var Combobox = defineComponent16({
+  name: "Combobox",
+  inheritAttrs: false,
+  setup: (_, { attrs }) => () => h16(Select, {
+    ...attrs,
+    options: attrs.options,
+    label: attrs.label,
+    searchable: true
+  })
+});
+
+// src/components/DropdownMenu.ts
+import { computed as computed4, defineComponent as defineComponent17, h as h17, nextTick as nextTick4, ref as ref10, useId as useId8, watch as watch3 } from "vue";
+var DropdownMenu = defineComponent17({
+  name: "DropdownMenu",
+  props: {
+    items: { type: Array, required: true },
+    trigger: { type: String, default: "Menu" },
+    label: { type: String, default: "Menu" },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: Boolean,
+    side: String,
+    align: String
+  },
+  emits: { "update:open": (_value) => true, select: (_value) => true },
+  setup(props, { emit, slots }) {
+    const id = useId8(), anchor = ref10(null), popup = ref10(null), open = useValue(
+      () => props.open,
+      () => props.defaultOpen,
+      (value) => emit("update:open", value)
+    ), elements = [], typeahead = createTypeahead();
+    let initial = "Home";
+    const enabled = computed4(
+      () => props.items.map((item) => ({ ...item, disabled: item.disabled || item.separator }))
+    );
+    useFloating(
+      open,
+      anchor,
+      popup,
+      (restore) => {
+        open.value = false;
+        if (restore) anchor.value?.focus();
+      },
+      () => ({ side: props.side, align: props.align })
+    );
+    watch3(open, (value) => {
+      if (value) void nextTick4(() => elements[nextIndex(enabled.value, -1, initial)]?.focus());
+    });
+    return () => h17("div", { class: "dropdown-menu" }, [
+      h17(
+        "button",
+        {
+          ref: anchor,
+          type: "button",
+          class: "btn",
+          "data-variant": "outline",
+          "aria-haspopup": "menu",
+          "aria-controls": id,
+          "aria-expanded": open.value,
+          onClick: () => {
+            initial = "Home";
+            open.value = !open.value;
+          },
+          onKeydown: (event) => {
+            if (["ArrowDown", "ArrowUp"].includes(event.key)) {
+              event.preventDefault();
+              initial = event.key === "ArrowUp" ? "End" : "Home";
+              open.value = true;
+            }
+          }
+        },
+        slots.trigger?.() ?? props.trigger
+      ),
+      open.value ? h17(
+        "div",
+        { ref: popup, "data-popover": "", popover: "manual", class: "bc-floating" },
+        h17(
+          "div",
+          { id, role: "menu", "aria-label": props.label },
+          props.items.map(
+            (item, index) => item.separator ? h17("hr", { key: item.value, role: "separator" }) : h17(
+              item.href ? "a" : "button",
+              {
+                key: item.value,
+                ref: (el) => {
+                  elements[index] = el;
+                },
+                href: item.href,
+                type: item.href ? void 0 : "button",
+                class: "btn",
+                "data-variant": "ghost",
+                role: "menuitem",
+                tabindex: -1,
+                "aria-disabled": item.disabled || void 0,
+                disabled: !item.href && item.disabled,
+                onClick: (event) => {
+                  if (item.disabled) {
+                    event.preventDefault();
+                    return;
+                  }
+                  item.onSelect?.();
+                  emit("select", item.value);
+                  open.value = false;
+                  anchor.value?.focus();
+                },
+                onKeydown: (event) => {
+                  if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+                    event.preventDefault();
+                    elements[nextIndex(enabled.value, index, event.key)]?.focus();
+                  } else if (event.key === "Tab") open.value = false;
+                  else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey)
+                    elements[typeahead(event.key, enabled.value, index)]?.focus();
+                }
+              },
+              [
+                item.label,
+                item.shortcut ? h17("kbd", { "data-shortcut": "" }, item.shortcut) : null
+              ]
+            )
+          )
+        )
+      ) : null
+    ]);
+  }
+});
+
+// src/components/Command.ts
+import { computed as computed5, defineComponent as defineComponent18, h as h18, ref as ref11, useId as useId9 } from "vue";
+var Command = defineComponent18({
+  name: "Command",
+  props: {
+    items: { type: Array, required: true },
+    label: { type: String, default: "Commands" },
+    placeholder: { type: String, default: "Search commands\u2026" },
+    emptyLabel: { type: String, default: "No results" }
+  },
+  emits: { select: (_value) => true },
+  setup(props, { emit }) {
+    const query = ref11(""), active = ref11(0), id = useId9(), visible = computed5(
+      () => props.items.filter(
+        (item) => !item.separator && item.label.toLocaleLowerCase().includes(query.value.toLocaleLowerCase())
+      )
+    );
+    const choose = (index) => {
+      const item = visible.value[index];
+      if (item && !item.disabled) {
+        item.onSelect?.();
+        emit("select", item.value);
+      }
+    };
+    return () => h18("div", { class: "command" }, [
+      h18(
+        "header",
+        h18("input", {
+          class: "input",
+          value: query.value,
+          role: "combobox",
+          "aria-label": props.label,
+          "aria-autocomplete": "list",
+          "aria-expanded": true,
+          "aria-controls": id,
+          "aria-activedescendant": visible.value[active.value] ? `${id}-${active.value}` : void 0,
+          placeholder: props.placeholder,
+          onInput: (event) => {
+            query.value = event.target.value;
+            active.value = 0;
+          },
+          onKeydown: (event) => {
+            if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+              event.preventDefault();
+              active.value = nextIndex(visible.value, active.value, event.key);
+            } else if (event.key === "Enter") {
+              event.preventDefault();
+              choose(active.value);
+            }
+          }
+        })
+      ),
+      h18(
+        "div",
+        { id, role: "listbox", "aria-label": props.label },
+        visible.value.length ? visible.value.map(
+          (item, index) => h18(
+            "div",
+            {
+              key: item.value,
+              id: `${id}-${index}`,
+              role: "option",
+              "aria-selected": active.value === index,
+              "aria-disabled": item.disabled || void 0,
+              class: active.value === index ? "active" : void 0,
+              onPointermove: (event) => {
+                if ((event.movementX || event.movementY) && !item.disabled)
+                  active.value = index;
+              },
+              onClick: () => choose(index)
+            },
+            item.label
+          )
+        ) : h18("p", { role: "status" }, props.emptyLabel)
+      )
+    ]);
+  }
+});
+
+// src/components/Pagination.ts
+import { defineComponent as defineComponent19, h as h19 } from "vue";
+var Pagination = defineComponent19({
+  name: "Pagination",
+  props: {
+    page: { type: Number, required: true },
+    count: { type: Number, required: true },
+    label: { type: String, default: "Pagination" }
+  },
+  emits: { "update:page": (_value) => true },
+  setup: (props, { emit }) => () => {
+    const total = Math.max(1, Math.floor(props.count)), current = Math.max(1, Math.min(props.page, total));
+    return h19("nav", { class: "bc-pagination", "aria-label": props.label }, [
+      h19(
+        "button",
+        {
+          type: "button",
+          class: "btn",
+          "data-variant": "outline",
+          disabled: current === 1,
+          "aria-label": "Previous page",
+          onClick: () => emit("update:page", current - 1)
+        },
+        "\u2039"
+      ),
+      h19("span", { "aria-live": "polite" }, `${current} / ${total}`),
+      h19(
+        "button",
+        {
+          type: "button",
+          class: "btn",
+          "data-variant": "outline",
+          disabled: current === total,
+          "aria-label": "Next page",
+          onClick: () => emit("update:page", current + 1)
+        },
+        "\u203A"
+      )
+    ]);
+  }
+});
+
+// src/components/Sidebar.ts
+import { defineComponent as defineComponent20, h as h20 } from "vue";
+var Sidebar = defineComponent20({
+  name: "Sidebar",
+  props: {
+    collapsed: { type: Boolean, default: void 0 },
+    defaultCollapsed: Boolean,
+    label: { type: String, default: "Navigation" }
+  },
+  emits: { "update:collapsed": (_value) => true },
+  setup(props, { emit, slots }) {
+    const collapsed = useValue(
+      () => props.collapsed,
+      () => props.defaultCollapsed,
+      (value) => emit("update:collapsed", value)
+    );
+    return () => h20("aside", { class: "bc-sidebar", "data-collapsed": collapsed.value }, [
+      h20(
+        "button",
+        {
+          type: "button",
+          class: "btn",
+          "data-variant": "ghost",
+          "aria-label": collapsed.value ? "Expand sidebar" : "Collapse sidebar",
+          "aria-expanded": !collapsed.value,
+          onClick: () => {
+            collapsed.value = !collapsed.value;
+          }
+        },
+        "\u2630"
+      ),
+      h20("nav", { "aria-label": props.label }, slots.default?.())
+    ]);
+  }
+});
+
+// src/components/ThemeSwitcher.ts
+import { defineComponent as defineComponent21, h as h21 } from "vue";
+var ThemeSwitcher = defineComponent21({
+  name: "ThemeSwitcher",
+  props: {
+    modelValue: String,
+    defaultValue: { type: String, default: "light" },
+    label: { type: String, default: "Dark mode" }
+  },
+  emits: { "update:modelValue": (_value) => true },
+  setup(props, { emit }) {
+    const value = useValue(
+      () => props.modelValue,
+      () => props.defaultValue,
+      (value2) => emit("update:modelValue", value2)
+    );
+    return () => h21(
+      "button",
+      {
+        type: "button",
+        class: "btn",
+        "data-variant": "outline",
+        role: "switch",
+        "aria-label": props.label,
+        "aria-checked": value.value === "dark",
+        onClick: () => {
+          value.value = value.value === "dark" ? "light" : "dark";
+        }
+      },
+      value.value === "dark" ? "\u263E" : "\u2600"
+    );
+  }
+});
+
+// src/components/Toaster.ts
+import { defineComponent as defineComponent23, h as h23 } from "vue";
+
+// src/components/Toast.ts
+import { defineComponent as defineComponent22, h as h22, onMounted as onMounted6, onUnmounted as onUnmounted7 } from "vue";
+var Toast = defineComponent22({
+  name: "Toast",
+  props: { message: { type: Object, required: true } },
+  emits: ["dismiss"],
+  setup(props, { emit }) {
+    let timer, remaining = props.message.duration ?? 5e3, started = 0;
+    const pause = () => {
+      clearTimeout(timer);
+      if (started) remaining = Math.max(0, remaining - (Date.now() - started));
+      started = 0;
+    };
+    const resume = () => {
+      if ((props.message.duration ?? 5e3) <= 0 || started) return;
+      started = Date.now();
+      timer = setTimeout(() => emit("dismiss"), remaining);
+    };
+    onMounted6(resume);
+    onUnmounted7(pause);
+    return () => h22(
+      "div",
+      {
+        class: "toast",
+        "data-variant": props.message.variant,
+        onPointerenter: pause,
+        onPointerleave: resume,
+        onFocusin: pause,
+        onFocusout: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget))
+            resume();
+        }
+      },
+      h22("div", { class: "toast-content" }, [
+        h22("section", [
+          h22("h2", props.message.title),
+          props.message.description ? h22("p", props.message.description) : null
+        ]),
+        h22(
+          "footer",
+          h22(
+            "button",
+            {
+              type: "button",
+              class: "btn",
+              "data-variant": "ghost",
+              "data-size": "icon-sm",
+              "aria-label": "Dismiss notification",
+              onClick: () => emit("dismiss")
+            },
+            "\xD7"
+          )
+        )
+      ])
+    );
+  }
+});
+
+// src/components/Toaster.ts
+var Toaster = defineComponent23({
+  name: "Toaster",
+  props: {
+    messages: { type: Array, required: true },
+    label: { type: String, default: "Notifications" }
+  },
+  emits: { dismiss: (_id) => true },
+  setup: (props, { emit }) => () => h23("section", { class: "toaster", "aria-label": props.label }, [
+    h23(
+      "div",
+      { class: "bc-live", role: "status", "aria-live": "polite", "aria-atomic": true },
+      props.messages.at(-1)?.title
+    ),
+    ...props.messages.map(
+      (message) => h23(Toast, { key: message.id, message, onDismiss: () => emit("dismiss", message.id) })
+    )
+  ])
+});
+
+// src/components/Chart.ts
+import { defineComponent as defineComponent24, h as h24, useId as useId10 } from "vue";
+var Chart = defineComponent24({
+  name: "Chart",
+  props: {
+    data: { type: Array, required: true },
+    label: { type: String, required: true },
+    kind: { type: String, default: "line" }
+  },
+  setup(props) {
+    const id = useId10();
+    return () => {
+      const finite = props.data.map((point) => Number.isFinite(point.value) ? point.value : 0), min = Math.min(0, ...finite), max = Math.max(1, ...finite), y = (value) => 180 - (value - min) / (max - min) * 160;
+      return h24("figure", { class: "chart" }, [
+        h24(
+          "svg",
+          { class: "bc-chart", viewBox: "0 0 400 200", role: "img", "aria-labelledby": id },
+          [
+            h24("title", { id }, props.label),
+            props.kind === "line" ? h24("polyline", {
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": 3,
+              points: finite.map(
+                (value, index) => `${20 + index / Math.max(1, finite.length - 1) * 360},${y(value)}`
+              ).join(" ")
+            }) : finite.map(
+              (value, index) => h24("rect", {
+                x: 20 + index / Math.max(1, finite.length) * 360,
+                y: Math.min(y(0), y(value)),
+                width: Math.max(1, 360 / Math.max(1, finite.length) - 8),
+                height: Math.abs(y(value) - y(0)),
+                fill: "currentColor"
+              })
+            )
+          ]
+        ),
+        h24("figcaption", props.label),
+        h24("table", { class: "bc-live" }, [
+          h24("caption", props.label),
+          h24(
+            "tbody",
+            props.data.map(
+              (point) => h24("tr", [h24("th", { scope: "row" }, point.label), h24("td", point.value)])
+            )
+          )
+        ])
+      ]);
+    };
+  }
+});
+export {
+  Accordion,
+  AccordionRoot,
+  Alert,
+  AlertDescription,
+  AlertDialog,
+  AlertDialogRoot,
+  AlertTitle,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+  Button,
+  ButtonGroup,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Chart,
+  ChartRoot,
+  Checkbox,
+  Collapsible,
+  Combobox,
+  ComboboxRoot,
+  Command,
+  CommandRoot,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  Drawer,
+  DrawerRoot,
+  DropdownMenu,
+  DropdownMenuRoot,
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  Input,
+  InputGroup,
+  InputGroupAddon,
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+  Kbd,
+  Label,
+  NativeSelect,
+  Pagination,
+  Popover,
+  PopoverRoot,
+  Progress,
+  RadioGroup,
+  ScrollArea,
+  Select,
+  SelectRoot,
+  Separator,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarItem,
+  SidebarRoot,
+  Skeleton,
+  Slider,
+  Spinner,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsRoot,
+  Textarea,
+  ThemeSwitcher,
+  Toaster,
+  Tooltip
+};
+//# sourceMappingURL=index.js.map