@db-vincent/components 0.0.0-stage → 0.1.1

package/src/data/icons.ts

@@ -0,0 +1,120 @@
+export const ICONS: Record<string, string> = {
+  "app-window":
+    '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 9h20"/><path d="M6 6.5h.01M9 6.5h.01"/>',
+  card: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 15h18"/>',
+  "check-square":
+    '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="m8 12 3 3 5-6"/>',
+  "chevrons-up-down": '<path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/>',
+  "circle-dot":
+    '<circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/>',
+  loader:
+    '<path d="M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8"/>',
+  "message-square":
+    '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/>',
+  "mouse-pointer": '<path d="m4 4 7 17 2.5-7.5L21 11 4 4Z"/>',
+  "panel-top":
+    '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/>',
+  "rectangle-horizontal": '<rect x="3" y="8" width="18" height="8" rx="2"/>',
+  rows: '<rect x="3" y="3" width="18" height="7" rx="1.5"/><rect x="3" y="14" width="18" height="7" rx="1.5"/>',
+  "square-dashed":
+    '<path d="M5 3a2 2 0 0 0-2 2M19 3a2 2 0 0 1 2 2M21 19a2 2 0 0 1-2 2M5 21a2 2 0 0 1-2-2M9 3h1M9 21h1M14 3h1M14 21h1M3 9v1M21 9v1M3 14v1M21 14v1"/>',
+  table:
+    '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 9v12"/>',
+  tag: '<path d="M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4Z"/><circle cx="7.5" cy="7.5" r="1"/>',
+  "text-cursor":
+    '<path d="M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1"/><path d="M7 22h1a4 4 0 0 0 4-4v-1"/><path d="M7 2h1a4 4 0 0 1 4 4v1"/>',
+  "alert-circle":
+    '<circle cx="12" cy="12" r="9"/><path d="M12 8v4"/><path d="M12 16h.01"/>',
+  "alert-triangle":
+    '<path d="M10.3 3.6 2.4 17a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.6a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+  "arrow-left": '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
+  "arrow-right": '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
+  "arrow-up-right": '<path d="M7 17 17 7"/><path d="M7 7h10v10"/>',
+  activity: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
+  bell: '<path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/>',
+  book: '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z"/>',
+  box: '<path d="m21 8-9 5-9-5"/><path d="M3 8v8l9 5 9-5V8"/><path d="m12 3 9 5-9 5-9-5 9-5Z"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
+  "check-circle":
+    '<circle cx="12" cy="12" r="9"/><path d="m8.5 12 2.5 2.5 4.5-5"/>',
+  "chevron-down": '<path d="m6 9 6 6 6-6"/>',
+  "chevron-left": '<path d="m15 18-6-6 6-6"/>',
+  "chevron-right": '<path d="m9 18 6-6-6-6"/>',
+  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+  command:
+    '<path d="M9 6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6Z"/>',
+  copy: '<rect x="8" y="8" width="14" height="14" rx="2"/><path d="M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2"/>',
+  cpu: '<rect x="6" y="6" width="12" height="12" rx="2"/><path d="M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4"/>',
+  database:
+    '<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5"/><path d="M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3"/>',
+  download: '<path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/>',
+  external:
+    '<path d="M15 3h6v6"/><path d="m10 14 11-11"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
+  eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>',
+  "eye-off":
+    '<path d="m3 3 18 18"/><path d="M10.6 10.6a3 3 0 0 0 4.2 4.2"/><path d="M9.9 5.2A10.5 10.5 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-2.2 3.2"/><path d="M6.6 6.6A17 17 0 0 0 2 12s3.5 7 10 7a10.5 10.5 0 0 0 4.1-.8"/>',
+  "file-text":
+    '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6"/><path d="M8 13h8M8 17h6"/>',
+  filter: '<path d="M3 5h18l-7 8v6l-4 2v-8Z"/>',
+  "git-branch":
+    '<path d="M6 3v12"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
+  grid: '<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>',
+  "hard-drive":
+    '<path d="M22 12H2"/><path d="M5.5 5h13L22 12v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5Z"/><path d="M6 16h.01M10 16h.01"/>',
+  home: '<path d="m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1Z"/>',
+  inbox:
+    '<path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5h13L22 12v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5Z"/>',
+  info: '<circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><path d="M12 8h.01"/>',
+  layers:
+    '<path d="m12 2 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/>',
+  login:
+    '<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><path d="m10 17 5-5-5-5"/><path d="M15 12H3"/>',
+  "log-out":
+    '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/>',
+  menu: '<path d="M4 6h16M4 12h16M4 18h16"/>',
+  minus: '<path d="M5 12h14"/>',
+  "more-horizontal":
+    '<circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/>',
+  moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/>',
+  network:
+    '<rect x="9" y="2" width="6" height="6" rx="1"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="16" y="16" width="6" height="6" rx="1"/><path d="M12 8v4M5 16v-4h14v4"/>',
+  "panel-left":
+    '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/>',
+  pause: '<path d="M9 5v14M15 5v14"/>',
+  play: '<path d="m7 4 13 8-13 8Z"/>',
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  refresh:
+    '<path d="M20 11a8 8 0 0 0-14.9-4L3 10"/><path d="M3 4v6h6"/><path d="M4 13a8 8 0 0 0 14.9 4L21 14"/><path d="M21 20v-6h-6"/>',
+  search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/>',
+  server:
+    '<rect x="3" y="3" width="18" height="7" rx="2"/><rect x="3" y="14" width="18" height="7" rx="2"/><path d="M7 6.5h.01M7 17.5h.01"/>',
+  settings:
+    '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/>',
+  shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/>',
+  sliders:
+    '<path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3"/><path d="M1 14h6M9 8h6M17 16h6"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>',
+  terminal: '<path d="m4 17 6-6-6-6"/><path d="M12 19h8"/>',
+  trash:
+    '<path d="M3 6h18"/><path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M10 11v6M14 11v6"/>',
+  upload: '<path d="M12 21V9"/><path d="m7 14 5-5 5 5"/><path d="M5 3h14"/>',
+  user: '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
+  users:
+    '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9"/><path d="M16 3.1a4 4 0 0 1 0 7.8"/>',
+  x: '<path d="M18 6 6 18M6 6l12 12"/>',
+  zap: '<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8Z"/>',
+  "toggle-right":
+    '<rect x="2" y="7" width="20" height="10" rx="5"/><circle cx="16" cy="12" r="2.5"/>',
+  "panel-right":
+    '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M15 3v18"/>',
+  "message-square-text":
+    '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/><path d="M8 9h8M8 13h5"/>',
+  "folder-tabs":
+    '<path d="M3 21V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3h9a1 1 0 0 1 1 1v12Z"/>',
+  tooltip:
+    '<rect x="3" y="4" width="18" height="12" rx="2"/><path d="m9 16 3 4 3-4"/>',
+  "list-ordered":
+    '<path d="M10 6h11M10 12h11M10 18h11"/><path d="M4 6h1v4M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3a1 1 0 0 0-2 0"/>',
+  "bar-progress":
+    '<rect x="3" y="9" width="18" height="6" rx="3"/><path d="M6 12h6"/>',
+};

package/src/scripts/avatar.ts

@@ -0,0 +1,33 @@
+/**
+ * Avatar runtime. Dependency-free; shared by the Astro component and the
+ * React port.
+ *
+ *   import { getInitials, mountAvatar } from "@db-vincent/components/scripts/avatar";
+ *
+ * An image that fails to load marks the avatar `data-failed`, which hides the
+ * image and leaves the initials (or icon) underneath showing.
+ */
+
+/** First letter of the first and last word, upper-cased: "ada king lovelace" -> "AL". */
+export function getInitials(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "";
+  const first = words[0];
+  const last = words.length > 1 ? words[words.length - 1] : "";
+  return `${[...first][0] ?? ""}${[...last][0] ?? ""}`.toUpperCase();
+}
+
+/** Wire up one `[data-ds-avatar]` root. Returns a cleanup function. */
+export function mountAvatar(root: HTMLElement): () => void {
+  const image = root.querySelector<HTMLImageElement>(".ds-avatar__img");
+  if (!image) return () => {};
+
+  const fail = () => {
+    root.dataset.failed = "";
+  };
+  image.addEventListener("error", fail);
+  // The error may have fired before this script ran.
+  if (image.complete && image.naturalWidth === 0) fail();
+
+  return () => image.removeEventListener("error", fail);
+}

package/src/scripts/menu.ts

@@ -0,0 +1,218 @@
+/**
+ * Menu runtime. Dependency-free; the Astro component calls `mountMenu`, the
+ * React port uses the pure helpers. The surface is a native `popover="auto"`,
+ * so light dismiss, Escape and focus return come from the platform. This adds
+ * the WAI-ARIA menu behaviour: roving focus, arrow keys, Home/End, typeahead,
+ * Tab to close, and checkbox/radio state.
+ *
+ *   import { mountMenu } from "@db-vincent/components/scripts/menu";
+ *   const destroy = mountMenu(document.querySelector("[data-ds-menu]"));
+ */
+
+const ITEM = '[role^="menuitem"]';
+const TYPEAHEAD_RESET_MS = 500;
+
+/**
+ * Index a navigation key should focus, wrapping at both ends, or `null` when
+ * the key is not a menu navigation key. `current` is -1 when no item has focus.
+ */
+export function nextMenuIndex(
+  key: string,
+  current: number,
+  count: number,
+): number | null {
+  if (count === 0) return null;
+  if (key === "Home") return 0;
+  if (key === "End") return count - 1;
+  if (key === "ArrowDown") return current < 0 ? 0 : (current + 1) % count;
+  if (key === "ArrowUp")
+    return current < 0 ? count - 1 : (current - 1 + count) % count;
+  return null;
+}
+
+/**
+ * Index of the next label starting with `query`, case-insensitive, or `null`.
+ * A single character cycles through matches after `current`; a longer query
+ * keeps the current item when it still matches.
+ */
+export function typeaheadIndex(
+  labels: readonly string[],
+  current: number,
+  query: string,
+): number | null {
+  const needle = query.trim().toLowerCase();
+  if (!needle || labels.length === 0) return null;
+  const start = needle.length === 1 ? current + 1 : Math.max(current, 0);
+  for (let offset = 0; offset < labels.length; offset += 1) {
+    const index = (start + offset) % labels.length;
+    if (labels[index].trim().toLowerCase().startsWith(needle)) return index;
+  }
+  return null;
+}
+
+/** Wire up one `[data-ds-menu]` root. Returns a cleanup function. */
+export function mountMenu(root: HTMLElement): () => void {
+  const trigger = root.querySelector<HTMLElement>('[aria-haspopup="menu"]');
+  const surface = root.querySelector<HTMLElement>('[role="menu"]');
+  if (!trigger || !surface) return () => {};
+
+  const items = () => [...surface.querySelectorAll<HTMLElement>(ITEM)];
+  const labelOf = (item: HTMLElement) => item.textContent ?? "";
+
+  let viaKeyboard = false;
+  let landOn: "first" | "last" = "first";
+  let query = "";
+  let queryTimer = 0;
+
+  const focusItem = (index: number | null) => {
+    if (index !== null) items()[index]?.focus({ preventScroll: false });
+  };
+
+  const onTriggerKeydown = (event: KeyboardEvent) => {
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      viaKeyboard = true;
+      landOn = event.key === "ArrowUp" ? "last" : "first";
+      if (!surface.matches(":popover-open")) surface.showPopover();
+    } else if (event.key === "Enter" || event.key === " ") {
+      viaKeyboard = true;
+      landOn = "first";
+    }
+  };
+
+  const onTriggerPointerdown = () => {
+    viaKeyboard = false;
+  };
+
+  const onBeforeToggle = (event: Event) => {
+    if ((event as ToggleEvent).newState === "open") {
+      // A keyboard open appears at once; only pointer opens animate.
+      surface.toggleAttribute("data-instant", viaKeyboard);
+    }
+  };
+
+  const onToggle = (event: Event) => {
+    const open = (event as ToggleEvent).newState === "open";
+    trigger.setAttribute("aria-expanded", String(open));
+    if (open) {
+      if (viaKeyboard) {
+        const all = items();
+        focusItem(landOn === "last" ? all.length - 1 : 0);
+      } else {
+        surface.focus({ preventScroll: true });
+      }
+      return;
+    }
+    query = "";
+    window.clearTimeout(queryTimer);
+    const active = document.activeElement;
+    if (!active || active === document.body || surface.contains(active)) {
+      trigger.focus({ preventScroll: true });
+    }
+  };
+
+  const activate = (item: HTMLElement) => {
+    if (item.getAttribute("aria-disabled") === "true") return;
+    const role = item.getAttribute("role");
+    if (role === "menuitemcheckbox") {
+      item.setAttribute(
+        "aria-checked",
+        String(item.getAttribute("aria-checked") !== "true"),
+      );
+    } else if (role === "menuitemradio") {
+      const group = item.closest('[role="group"]') ?? surface;
+      for (const radio of group.querySelectorAll<HTMLElement>(
+        '[role="menuitemradio"]',
+      )) {
+        radio.setAttribute("aria-checked", String(radio === item));
+      }
+    }
+    root.dispatchEvent(
+      new CustomEvent("ds-menu-select", {
+        detail: {
+          value: item.dataset.value ?? null,
+          checked:
+            role === "menuitem"
+              ? null
+              : item.getAttribute("aria-checked") === "true",
+        },
+      }),
+    );
+    surface.hidePopover();
+  };
+
+  const onClick = (event: MouseEvent) => {
+    const item = (event.target as Element).closest<HTMLElement>(ITEM);
+    if (!item) return;
+    if (item.getAttribute("aria-disabled") === "true") {
+      event.preventDefault();
+      return;
+    }
+    activate(item);
+  };
+
+  const onKeydown = (event: KeyboardEvent) => {
+    if (event.altKey || event.ctrlKey || event.metaKey) return;
+    const all = items();
+    const current = all.indexOf(document.activeElement as HTMLElement);
+
+    if (event.key === "Tab") {
+      surface.hidePopover();
+      return;
+    }
+
+    const next = nextMenuIndex(event.key, current, all.length);
+    if (next !== null) {
+      event.preventDefault();
+      focusItem(next);
+      return;
+    }
+
+    // Space activates links like it does buttons.
+    if (
+      event.key === " " &&
+      !query &&
+      current >= 0 &&
+      all[current].tagName === "A"
+    ) {
+      event.preventDefault();
+      all[current].click();
+      return;
+    }
+
+    if (event.key.length === 1 && (event.key !== " " || query)) {
+      event.preventDefault();
+      query += event.key;
+      window.clearTimeout(queryTimer);
+      queryTimer = window.setTimeout(() => (query = ""), TYPEAHEAD_RESET_MS);
+      focusItem(typeaheadIndex(all.map(labelOf), current, query));
+    }
+  };
+
+  // Hover keeps a single highlight: the pointer moves focus with it.
+  const onPointerMove = (event: PointerEvent) => {
+    const item = (event.target as Element).closest<HTMLElement>(ITEM);
+    if (item && item !== document.activeElement)
+      item.focus({ preventScroll: true });
+  };
+
+  trigger.addEventListener("keydown", onTriggerKeydown);
+  trigger.addEventListener("pointerdown", onTriggerPointerdown);
+  surface.addEventListener("beforetoggle", onBeforeToggle);
+  surface.addEventListener("toggle", onToggle);
+  surface.addEventListener("click", onClick);
+  surface.addEventListener("keydown", onKeydown);
+  surface.addEventListener("pointermove", onPointerMove);
+
+  return () => {
+    window.clearTimeout(queryTimer);
+    trigger.removeEventListener("keydown", onTriggerKeydown);
+    trigger.removeEventListener("pointerdown", onTriggerPointerdown);
+    surface.removeEventListener("beforetoggle", onBeforeToggle);
+    surface.removeEventListener("toggle", onToggle);
+    surface.removeEventListener("click", onClick);
+    surface.removeEventListener("keydown", onKeydown);
+    surface.removeEventListener("pointermove", onPointerMove);
+  };
+}

package/src/scripts/tabs.ts

@@ -0,0 +1,127 @@
+/**
+ * Tabs runtime. Dependency-free; shared by the Astro component and the React
+ * port. Follows the WAI-ARIA tabs pattern with automatic activation: arrow
+ * keys, Home and End move focus and select in one step.
+ *
+ *   import { mountTabs } from "@db-vincent/components/scripts/tabs";
+ *   const destroy = mountTabs(document.querySelector("[data-ds-tabs]"));
+ */
+
+const TAB = '[role="tab"]';
+
+/**
+ * Index of the tab a key should move to, skipping disabled tabs, or `null`
+ * when the key is not a tabs key. `current` is the focused tab's index.
+ */
+export function nextTabIndex(
+  key: string,
+  current: number,
+  disabled: readonly boolean[],
+  orientation: "horizontal" | "vertical" = "horizontal",
+): number | null {
+  const count = disabled.length;
+  const step =
+    key === (orientation === "vertical" ? "ArrowDown" : "ArrowRight")
+      ? 1
+      : key === (orientation === "vertical" ? "ArrowUp" : "ArrowLeft")
+        ? -1
+        : 0;
+
+  if (key === "Home" || key === "End") {
+    const order =
+      key === "Home" ? [...disabled.keys()] : [...disabled.keys()].reverse();
+    return order.find((index) => !disabled[index]) ?? null;
+  }
+  if (!step) return null;
+
+  for (let offset = 1; offset <= count; offset += 1) {
+    const index = (((current + step * offset) % count) + count) % count;
+    if (!disabled[index]) return index;
+  }
+  return null;
+}
+
+/**
+ * Position the indicator under `tab`. Geometry is exposed as custom
+ * properties so the slide stays a transform (see tabs.css).
+ */
+export function placeIndicator(
+  list: HTMLElement,
+  tab: HTMLElement | null,
+): void {
+  if (!tab) return;
+  const track = list.scrollWidth;
+  list.style.setProperty("--ds-tabs-track", `${track}px`);
+  list.style.setProperty("--ds-tabs-x", `${tab.offsetLeft}px`);
+  list.style.setProperty("--ds-tabs-scale", String(tab.offsetWidth / track));
+  // First placement must not animate from the empty position.
+  if (!list.hasAttribute("data-indicator")) {
+    list.setAttribute("data-indicator", "");
+    requestAnimationFrame(() => list.setAttribute("data-indicator", "ready"));
+  }
+}
+
+/** Wire up one `[data-ds-tabs]` root. Returns a cleanup function. */
+export function mountTabs(root: HTMLElement): () => void {
+  const list = root.querySelector<HTMLElement>('[role="tablist"]');
+  if (!list) return () => {};
+
+  const tabs = () => [...list.querySelectorAll<HTMLButtonElement>(TAB)];
+  const panelFor = (tab: HTMLElement) =>
+    root.querySelector<HTMLElement>(
+      `#${CSS.escape(tab.getAttribute("aria-controls") ?? "")}`,
+    );
+
+  const select = (tab: HTMLButtonElement, focus: boolean) => {
+    for (const other of tabs()) {
+      const selected = other === tab;
+      other.setAttribute("aria-selected", String(selected));
+      other.tabIndex = selected ? 0 : -1;
+      const panel = panelFor(other);
+      if (panel) panel.hidden = !selected;
+    }
+    placeIndicator(list, tab);
+    if (focus) tab.focus();
+    root.dispatchEvent(
+      new CustomEvent("ds-tabs-change", { detail: { id: tab.id } }),
+    );
+  };
+
+  const selectedTab = () =>
+    tabs().find((tab) => tab.getAttribute("aria-selected") === "true") ?? null;
+
+  const onClick = (event: MouseEvent) => {
+    const tab = (event.target as Element).closest<HTMLButtonElement>(TAB);
+    if (tab && !tab.disabled) select(tab, false);
+  };
+
+  const onKeydown = (event: KeyboardEvent) => {
+    const all = tabs();
+    const current = all.indexOf(document.activeElement as HTMLButtonElement);
+    if (current < 0 || event.altKey || event.ctrlKey || event.metaKey) return;
+    const vertical = list.getAttribute("aria-orientation") === "vertical";
+    const next = nextTabIndex(
+      event.key,
+      current,
+      all.map((tab) => tab.disabled),
+      vertical ? "vertical" : "horizontal",
+    );
+    if (next === null) return;
+    event.preventDefault();
+    select(all[next], true);
+  };
+
+  list.addEventListener("click", onClick);
+  list.addEventListener("keydown", onKeydown);
+
+  const resize = new ResizeObserver(() => placeIndicator(list, selectedTab()));
+  resize.observe(list);
+  for (const tab of tabs()) resize.observe(tab);
+  placeIndicator(list, selectedTab());
+
+  return () => {
+    list.removeEventListener("click", onClick);
+    list.removeEventListener("keydown", onKeydown);
+    resize.disconnect();
+  };
+}