@db-vincent/components 0.1.0 → 0.1.1

package/src/data/icons.ts

@@ -43,6 +43,7 @@ export const ICONS: Record<string, string> = {
   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"/>',
@@ -97,8 +98,23 @@ export const ICONS: Record<string, string> = {
   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();
+  };
+}

package/src/scripts/toast.ts

@@ -94,10 +94,27 @@ let counter = 0;
 let resizeObserver: ResizeObserver | null = null;
 
 function nextId(): string {
-  counter += 1;
+  do {
+    counter += 1;
+  } while (records.has(`toast-${counter}`));
   return `toast-${counter}`;
 }
 
+const SAFE_PROTOCOLS: ReadonlySet<string> = new Set([
+  "http:",
+  "https:",
+  "mailto:",
+]);
+
+/** Relative and #fragment URLs resolve to the page protocol, so they pass. */
+function isSafeHref(href: string): boolean {
+  try {
+    return SAFE_PROTOCOLS.has(new URL(href, document.baseURI).protocol);
+  } catch {
+    return false;
+  }
+}
+
 function normalizeType(type?: ToastType): ResolvedType {
   if (type === "error") return "danger";
   return type ?? "info";
@@ -152,8 +169,16 @@ function onRegionClick(event: MouseEvent): void {
   }
 }
 
+const OPEN_POPUP = 'dialog[open], [role="listbox"], [aria-expanded="true"]';
+
 function onKeydown(event: KeyboardEvent): void {
-  if (event.key !== "Escape") return;
+  if (event.key !== "Escape" || event.defaultPrevented) return;
+  const target = event.target;
+  const inRegion = target instanceof Node && !!region?.contains(target);
+  // Escape belongs to an open dialog or popup unless focus is in the toasts.
+  if (!inRegion && target instanceof Element && target.closest(OPEN_POPUP)) {
+    return;
+  }
   const toasts = region?.querySelectorAll<HTMLElement>("[data-toast]");
   const latest = toasts?.[toasts.length - 1];
   if (latest) dismiss(latest);
@@ -163,15 +188,19 @@ function createAction(
   element: HTMLElement,
   id: string,
   action: ToastActionProps,
-): HTMLElement {
+): HTMLElement | null {
   const label = action.label ?? action.children ?? "Action";
-  const node = document.createElement(action.href ? "a" : "button");
+  const href = action.href && isSafeHref(action.href) ? action.href : undefined;
+  // An action whose only target was an unsafe URL has nothing left to do.
+  if (action.href && !href && !action.onClick) return null;
+
+  const node = document.createElement(href ? "a" : "button");
   node.className = "ds-toast__action";
   node.setAttribute("data-toast-action", "");
   node.textContent = label;
 
-  if (action.href) {
-    (node as HTMLAnchorElement).href = action.href;
+  if (href) {
+    (node as HTMLAnchorElement).href = href;
   } else {
     (node as HTMLButtonElement).type = "button";
   }
@@ -226,10 +255,13 @@ function render(element: HTMLElement, id: string, options: ToastOptions): void {
 
   const action = options.action ?? options.actionProps;
   if (action) {
-    const actions = document.createElement("div");
-    actions.className = "ds-toast__actions";
-    actions.append(createAction(element, id, action));
-    element.append(actions);
+    const node = createAction(element, id, action);
+    if (node) {
+      const actions = document.createElement("div");
+      actions.className = "ds-toast__actions";
+      actions.append(node);
+      element.append(actions);
+    }
   }
 
   if (options.dismissible !== false) {
@@ -446,8 +478,10 @@ export function close(id: string): boolean {
  * region and give it the same timer, pause-on-hover and dismissal behaviour.
  */
 export function mount(element: HTMLElement, origin?: HTMLElement): string {
-  const id = element.id || nextId();
+  // Clones of one template share an id, so every mounted toast gets its own.
+  const id = nextId();
   element.id = id;
+  element.setAttribute("data-toast-id", id);
   const rawDuration = element.dataset.toastDuration;
   const parsed = rawDuration === undefined ? Number.NaN : Number(rawDuration);
   const duration = Number.isFinite(parsed) ? parsed : DEFAULT_DURATION;

package/src/scripts/tooltip.ts

@@ -0,0 +1,127 @@
+/**
+ * Tooltip runtime. Dependency-free; shared by the Astro component and the
+ * React port. The surface is a `popover="manual"` element so it escapes
+ * clipping; this script decides when it shows.
+ *
+ *   import { mountTooltip } from "@db-vincent/components/scripts/tooltip";
+ *   const destroy = mountTooltip(document.querySelector("[data-ds-tooltip]"));
+ *
+ * Hover opens after a delay and only on hover-capable fine pointers. Keyboard
+ * focus opens at once. Escape, leaving, pressing the trigger and blur close it.
+ * While one tooltip is open, and briefly after it closes, the next one opens
+ * with `data-instant` so it skips the animation.
+ */
+
+const HOVER_CAPABLE = "(hover: hover) and (pointer: fine)";
+const DEFAULT_DELAY_MS = 400;
+/** Time to cross the gap between trigger and surface without closing. */
+const LEAVE_GRACE_MS = 100;
+/** How long after a close the next tooltip still opens instantly. */
+const WARM_MS = 300;
+
+interface Handle {
+  hide: (instant: boolean) => void;
+}
+
+let current: Handle | null = null;
+let warmUntil = 0;
+
+/** A tooltip is open, or one closed moments ago: skip delay and animation. */
+const isWarm = () => current !== null || performance.now() < warmUntil;
+
+/** Wire up one `[data-ds-tooltip]` root. Returns a cleanup function. */
+export function mountTooltip(root: HTMLElement): () => void {
+  const surface = root.querySelector<HTMLElement>('[role="tooltip"]');
+  const trigger = root.querySelector<HTMLElement>(
+    ':scope > :not([role="tooltip"])',
+  );
+  if (!surface || !trigger) return () => {};
+
+  const describedBy = new Set(
+    (trigger.getAttribute("aria-describedby") ?? "")
+      .split(/\s+/)
+      .filter(Boolean),
+  );
+  describedBy.add(surface.id);
+  trigger.setAttribute("aria-describedby", [...describedBy].join(" "));
+
+  const delay = Number(root.dataset.delay ?? DEFAULT_DELAY_MS);
+  let showTimer = 0;
+  let hideTimer = 0;
+
+  const isOpen = () => surface.matches(":popover-open");
+  const clearTimers = () => {
+    window.clearTimeout(showTimer);
+    window.clearTimeout(hideTimer);
+  };
+
+  const onDocumentKeydown = (event: KeyboardEvent) => {
+    if (event.key !== "Escape" || !isOpen()) return;
+    // Dismiss the tooltip first; do not also close a surrounding dialog.
+    event.preventDefault();
+    event.stopPropagation();
+    hide(false);
+  };
+
+  const handle: Handle = { hide: (instant) => hide(instant) };
+
+  function hide(instant: boolean) {
+    clearTimers();
+    if (!isOpen()) return;
+    surface!.toggleAttribute("data-instant", instant);
+    surface!.hidePopover();
+    document.removeEventListener("keydown", onDocumentKeydown, true);
+    if (current === handle) {
+      current = null;
+      warmUntil = performance.now() + WARM_MS;
+    }
+  }
+
+  function show() {
+    clearTimers();
+    if (isOpen()) return;
+    const instant = isWarm();
+    current?.hide(true);
+    surface!.toggleAttribute("data-instant", instant);
+    surface!.showPopover();
+    current = handle;
+    document.addEventListener("keydown", onDocumentKeydown, true);
+  }
+
+  const onPointerEnter = (event: PointerEvent) => {
+    if (event.pointerType === "touch" || !matchMedia(HOVER_CAPABLE).matches)
+      return;
+    clearTimers();
+    if (isOpen()) return;
+    if (isWarm()) show();
+    else showTimer = window.setTimeout(show, delay);
+  };
+
+  const onPointerLeave = () => {
+    clearTimers();
+    if (isOpen())
+      hideTimer = window.setTimeout(() => hide(false), LEAVE_GRACE_MS);
+  };
+
+  const onFocusIn = (event: FocusEvent) => {
+    if ((event.target as Element).matches(":focus-visible")) show();
+  };
+
+  const onFocusOut = () => hide(false);
+  const onPointerDown = () => hide(false);
+
+  root.addEventListener("pointerenter", onPointerEnter);
+  root.addEventListener("pointerleave", onPointerLeave);
+  root.addEventListener("pointerdown", onPointerDown);
+  root.addEventListener("focusin", onFocusIn);
+  root.addEventListener("focusout", onFocusOut);
+
+  return () => {
+    hide(true);
+    root.removeEventListener("pointerenter", onPointerEnter);
+    root.removeEventListener("pointerleave", onPointerLeave);
+    root.removeEventListener("pointerdown", onPointerDown);
+    root.removeEventListener("focusin", onFocusIn);
+    root.removeEventListener("focusout", onFocusOut);
+  };
+}

package/src/styles/accordion.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-accordion {
     display: grid;

package/src/styles/alert.css

@@ -1,3 +1,5 @@
+@layer reset, tokens, base, components, motion, utilities;
+
 @layer components {
   .ds-alert {
     background: var(--alert-info-bg);