@threadlabs/looma 0.37.3 → 0.37.5

package/components/shared/active-item-reveal.js

@@ -0,0 +1,74 @@
+// Reveal within the component's own scrollport; browser focus/scrollIntoView can move the page.
+const pending = new WeakMap();
+
+export function cancelActiveItemReveal(root) {
+  const current = pending.get(root);
+  if (!current) return;
+  root.ownerDocument.defaultView.cancelAnimationFrame(current.frame);
+  pending.delete(root);
+}
+
+function scrollport(root, item, view) {
+  for (let parent = item.parentElement; parent && root.contains(parent); parent = parent.parentElement) {
+    if (parent.scrollHeight > parent.clientHeight && /^(auto|scroll|hidden)$/.test(view.getComputedStyle(parent).overflowY)) return parent;
+    if (parent === root) break;
+  }
+  return null;
+}
+
+function destination(port, item, view) {
+  const bounds = port.getBoundingClientRect();
+  const scale = port.offsetHeight ? bounds.height / port.offsetHeight : 1;
+  if (!scale) return port.scrollTop;
+  const style = view.getComputedStyle(port);
+  const fade = style.maskImage !== "none" ? parseFloat(style.getPropertyValue("--_ui-scroll-fade-size")) || 0 : 0;
+  const top = bounds.top + (port.clientTop + Math.max(parseFloat(style.scrollPaddingTop) || 0, fade)) * scale;
+  const bottom = bounds.top + (port.clientTop + port.clientHeight - Math.max(parseFloat(style.scrollPaddingBottom) || 0, fade)) * scale;
+  const row = item.getBoundingClientRect();
+  const delta = row.top < top ? row.top - top : row.bottom > bottom ? Math.min(row.bottom - bottom, row.top - top) : 0;
+  return Math.max(0, Math.min(port.scrollHeight - port.clientHeight, port.scrollTop + delta / scale));
+}
+
+/** Resolve after rendering so HTML and framework adapters reveal the same active row. */
+export function revealActiveItem(root, resolve) {
+  const view = root.ownerDocument.defaultView;
+  const item = typeof resolve === "function" ? resolve() : resolve;
+  if (item && pending.get(root)?.item === item) return;
+  cancelActiveItemReveal(root);
+  const current = { item, frame: 0 };
+  pending.set(root, current);
+  current.frame = view.requestAnimationFrame(() => {
+    current.item = typeof resolve === "function" ? resolve() : resolve;
+    if (!root.isConnected || !current.item?.getClientRects().length || !root.contains(current.item)) {
+      pending.delete(root);
+      return;
+    }
+    const port = scrollport(root, current.item, view);
+    if (!port) { pending.delete(root); return; }
+    const from = port.scrollTop;
+    const to = destination(port, current.item, view);
+    const token = view.getComputedStyle(root).getPropertyValue("--ui-motion-fast").trim();
+    const duration = view.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0
+      : (parseFloat(token) || 0) * (token.endsWith("ms") ? 1 : 1000);
+    if (Math.abs(to - from) < 1 || duration <= 0) {
+      port.scrollTop = to;
+      pending.delete(root);
+      return;
+    }
+    const started = view.performance.now();
+    const animate = (now) => {
+      if (!root.isConnected || !current.item.getClientRects().length) { pending.delete(root); return; }
+      const progress = Math.min(1, (now - started) / duration);
+      port.scrollTop = from + (to - from) * (1 - (1 - progress) ** 3);
+      if (progress < 1) current.frame = view.requestAnimationFrame(animate);
+      else pending.delete(root);
+    };
+    current.frame = view.requestAnimationFrame(animate);
+  });
+}
+
+export function focusAndRevealItem(root, item) {
+  if (!item) return;
+  item.focus({ preventScroll: true });
+  revealActiveItem(root, item);
+}

package/components/shared/menu-navigation.js

@@ -1,3 +1,5 @@
+import { focusAndRevealItem } from "./active-item-reveal.js";
+
 const itemSelector = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
 const searches = new WeakMap();
 
@@ -44,6 +46,6 @@ export function navigateMenu(event, menu) {
     }
   }
   event.preventDefault();
-  if (next >= 0) items[next].focus();
+  if (next >= 0) focusAndRevealItem(menu, items[next]);
   return true;
 }

package/components/ui-button/ui-button.html

@@ -19,6 +19,9 @@
     >Height, padding, and type size. xs is 1.5rem with the smallest text, for a control inside a line of small text; sm is the small control height (2rem by
       default) with tighter padding and smaller text, md is the standard control height (2.5rem), and lg is taller (3rem) with roomier padding. Visible sizes
       stay the same on touch. Inline xs and link actions can gain an adjustable invisible hit area.</prop>
+    <prop name="square" type="boolean" default="false"
+    >Gives short labels and icons the same square minimum footprint at each size. Longer labels grow naturally. Applies to boxed actions; link and card variants
+      keep their normal layout.</prop>
     <prop name="shape" type="keyword" values="rounded, pill" default="rounded"
     >rounded uses the theme's action radius; pill rounds the ends fully, for a compact choice such as a status or a person.</prop>
     <prop name="tone" type="keyword" values="accent, neutral, danger, success, warning, info" default="accent"
@@ -233,6 +236,7 @@
     }
 
     :host {
+      --_button-square-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       appearance: none;
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       border-style: solid;
@@ -297,6 +301,7 @@
     }
 
     :host([size="xs"]) {
+      --_button-square-size: 1.5rem;
       min-block-size: 1.5rem;
       padding: calc(var(--ui-space-0-5) * 1.5) calc(var(--ui-space-1) * 1.25) !important;
       font-size: var(--ui-font-size-xs);
@@ -307,17 +312,25 @@
     }
 
     :host([size="sm"]) {
+      --_button-square-size: var(--ui-control-size-sm);
       min-block-size: var(--ui-control-size-sm);
       padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-action-inset-sm, var(--ui-space-2)) !important;
       font-size: var(--ui-font-size-sm);
     }
 
     :host([size="lg"]) {
+      --_button-square-size: var(--ui-control-size-lg);
       min-block-size: var(--ui-control-size-lg);
       padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-action-inset-lg, var(--ui-space-4)) !important;
       font-size: var(--ui-font-size-md);
     }
 
+    /* Short numeric and icon actions share a minimum box; large values remain readable. */
+    :host([square]):not([data-appearance="link"], [data-appearance="card"]) {
+      min-inline-size: var(--_button-square-size);
+      padding-inline: var(--ui-space-1) !important;
+    }
+
     /* Card actions inherit Button's palette and behavior; only their shared layout changes.
        The icon may contain any decorative composition. Empty icons remove their column. */
     :host[data-appearance="card"] {

package/components/ui-combobox/ui-combobox.js

@@ -1,3 +1,4 @@
+import { cancelActiveItemReveal, revealActiveItem } from "../shared/active-item-reveal.js";
 import { afterFormReset } from "../shared/form-reset.js";
 import { closeOverlay, createAnchoredSurface, openOverlay } from "../shared/overlay.js";
 
@@ -107,6 +108,7 @@ export function connect(host) {
     lookup = undefined;
   };
   const close = () => {
+    cancelActiveItemReveal(popup);
     host.state.expanded = false;
     host.state.active = -1;
     cancelLookup();
@@ -326,7 +328,7 @@ export function connect(host) {
     const current = indices.indexOf(host.state.active);
     const next = key === "Home" ? 0 : key === "End" ? indices.length - 1 : key === "ArrowDown" ? Math.min(current + 1, indices.length - 1) : current < 0 ? indices.length - 1 : Math.max(0, current - 1);
     host.state.active = indices[next];
-    requestAnimationFrame(() => document.getElementById(`${uid}-option-${host.state.active}`)?.scrollIntoView({ block: "nearest" }));
+    revealActiveItem(popup, () => document.getElementById(`${uid}-option-${host.state.active}`));
   };
   const validateCurrent = async () => {
     validationRun?.abort();

package/components/ui-context-menu/ui-context-menu.js

@@ -1,3 +1,4 @@
+import { cancelActiveItemReveal, focusAndRevealItem } from "../shared/active-item-reveal.js";
 import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay, requestTopOverlayClose } from "../shared/overlay.js";
 import { menuItemFrom, menuItems, navigateMenu } from "../shared/menu-navigation.js";
 
@@ -19,7 +20,7 @@ export function connect(host) {
   host.state.internalOpen = lastOpenProp;
 
   const items = () => menuItems(element);
-  const focusFirst = () => requestAnimationFrame(() => items()[0]?.focus());
+  const focusFirst = () => requestAnimationFrame(() => focusAndRevealItem(element, items()[0]));
   const targetEvents = { contextmenu: onContextMenu, keydown: onTargetKeydown, pointerdown: onPointerdown, pointerup: endPress, pointercancel: endPress };
   const detach = () => {
     for (const [type, listener] of Object.entries(targetEvents)) target?.removeEventListener(type, listener);
@@ -37,6 +38,7 @@ export function connect(host) {
   // Light dismiss leaves focus where the user pointed instead of pulling it back to the target.
   const close = (reason, input, returnFocus = reason !== "light-dismiss") => {
     if (!host.state.internalOpen) return;
+    cancelActiveItemReveal(element);
     host.state.internalOpen = false;
     endPress();
     host.dispatch("close", { open: false, reason, trigger: input });
@@ -147,6 +149,7 @@ export function connect(host) {
   const stop = host.effect(apply);
   apply();
   return () => {
+    cancelActiveItemReveal(element);
     stop();
     ids.stop();
     observer.disconnect();

package/components/ui-editor-link-form/ui-editor-link-form.js

@@ -1,3 +1,4 @@
+import { cancelActiveItemReveal, focusAndRevealItem } from "../shared/active-item-reveal.js";
 // Gives each form its own field ids, reports field changes and choices, saves on Enter in a field,
 // closes on Escape, and moves between the search field and its results with the arrow keys.
 export function connect(host) {
@@ -26,7 +27,7 @@ export function connect(host) {
   const moveFocus = (event, offset) => {
     const results = [...element.querySelectorAll("[data-link-result]")];
     const next = results[results.indexOf(event.target) + offset];
-    if (next) next.focus();
+    if (next) focusAndRevealItem(element, next);
     else if (offset < 0) element.querySelector("[data-link-search]")?.focus();
     else return;
     event.preventDefault();
@@ -57,6 +58,7 @@ export function connect(host) {
   element.addEventListener("keydown", onKeyDown);
   element.addEventListener("submit", onSubmit);
   return () => {
+    cancelActiveItemReveal(element);
     element.removeEventListener("input", onInput);
     element.removeEventListener("change", onChange);
     element.removeEventListener("click", onClick);

package/components/ui-editor-mention-menu/ui-editor-mention-menu.js

@@ -1,3 +1,4 @@
+import { cancelActiveItemReveal, revealActiveItem } from "../shared/active-item-reveal.js";
 import { createViewportSurface } from "../shared/overlay.js";
 import { normalizeAnchor, positionMenu } from "../shared/editor.js";
 
@@ -25,8 +26,13 @@ export function connect(host) {
     const visible = Boolean(host.props.open.value && normalizeAnchor(host.props.anchorRect.value)
       && (host.props.loading.value || rows.length > 0 || empty));
     if (host.state.visible !== visible) host.state.visible = visible;
-    if (visible) surface.show();
-    else surface.hide();
+    if (visible) {
+      surface.show();
+      revealActiveItem(element, rows[active]);
+    } else {
+      cancelActiveItemReveal(element);
+      surface.hide();
+    }
   };
   const stop = host.effect(() => {
     if (!authoredLabel) element.setAttribute("aria-label", String(host.props.label.value || "Mentions"));
@@ -43,7 +49,7 @@ export function connect(host) {
     const row = rowOf(event);
     if (row) host.dispatch("select", { index: Number(row.dataset.index), value: row.dataset.value ?? "" });
   };
-  const onMouseover = (event) => {
+  const onMousemove = (event) => {
     const row = rowOf(event);
     if (!row) return;
     const index = Number(row.dataset.index);
@@ -56,13 +62,14 @@ export function connect(host) {
   observer.observe(element, { childList: true, subtree: true });
   element.addEventListener("mousedown", onMousedown);
   element.addEventListener("click", onClick);
-  element.addEventListener("mouseover", onMouseover);
+  element.addEventListener("mousemove", onMousemove);
   return () => {
+    cancelActiveItemReveal(element);
     stop();
     surface.destroy();
     observer.disconnect();
     element.removeEventListener("mousedown", onMousedown);
     element.removeEventListener("click", onClick);
-    element.removeEventListener("mouseover", onMouseover);
+    element.removeEventListener("mousemove", onMousemove);
   };
 }

package/components/ui-editor-slash-menu/ui-editor-slash-menu.js

@@ -1,3 +1,4 @@
+import { cancelActiveItemReveal, revealActiveItem } from "../shared/active-item-reveal.js";
 import { createViewportSurface } from "../shared/overlay.js";
 import { normalizeAnchor, positionMenu } from "../shared/editor.js";
 
@@ -33,8 +34,13 @@ export function connect(host) {
     const visible = Boolean(host.props.open.value && normalizeAnchor(host.props.anchorRect.value)
       && (rows.length > 0 || host.refs.empty.children.length));
     if (host.state.visible !== visible) host.state.visible = visible;
-    if (visible) surface.show();
-    else surface.hide();
+    if (visible) {
+      surface.show();
+      revealActiveItem(element, rows[active]);
+    } else {
+      cancelActiveItemReveal(element);
+      surface.hide();
+    }
   };
   const stop = host.effect(() => {
     const items = Array.isArray(host.props.items.value) ? host.props.items.value : [];
@@ -49,7 +55,7 @@ export function connect(host) {
     const row = rowOf(event);
     if (row && !row.hidden && row.getAttribute("aria-disabled") !== "true") host.dispatch("select", { index: Number(row.dataset.index), value: row.dataset.value ?? "" });
   };
-  const onMouseover = (event) => {
+  const onMousemove = (event) => {
     const row = rowOf(event);
     if (!row || row.hidden || row.getAttribute("aria-disabled") === "true") return;
     const index = Number(row.dataset.index);
@@ -62,13 +68,14 @@ export function connect(host) {
   observer.observe(element, { childList: true, subtree: true });
   element.addEventListener("mousedown", onMousedown);
   element.addEventListener("click", onClick);
-  element.addEventListener("mouseover", onMouseover);
+  element.addEventListener("mousemove", onMousemove);
   return () => {
+    cancelActiveItemReveal(element);
     stop();
     surface.destroy();
     observer.disconnect();
     element.removeEventListener("mousedown", onMousedown);
     element.removeEventListener("click", onClick);
-    element.removeEventListener("mouseover", onMouseover);
+    element.removeEventListener("mousemove", onMousemove);
   };
 }

package/components/ui-form-field/ui-form-field.js

@@ -74,7 +74,13 @@ export function connect(host) {
   };
   const observer = new MutationObserver(schedule);
   observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ["aria-describedby", "slot", "id", "role"] });
-  const stop = host.effect(schedule);
+  // Track props before deferred rewiring, even when no control is mounted yet.
+  const stop = host.effect(() => {
+    void host.props.disabled.value;
+    void host.props.required.value;
+    void host.props.invalid.value;
+    schedule();
+  });
   wire();
   return () => {
     stop();

package/components/ui-listbox/ui-listbox.js

@@ -1,3 +1,4 @@
+import { cancelActiveItemReveal, revealActiveItem } from "../shared/active-item-reveal.js";
 let nextId = 0;
 
 const same = (left, right) => JSON.stringify(left) === JSON.stringify(right);
@@ -79,7 +80,7 @@ export function connect(host) {
     if (index < 0 || options[index]?.disabled || !options[index]) return;
     host.state.active = index;
     render();
-    element.querySelector(`[data-index="${index}"]`)?.scrollIntoView({ block: "nearest" });
+    revealActiveItem(element, () => element.querySelector(`[data-index="${host.state.active}"]`));
   };
   const choose = (index, trigger) => {
     const option = options[index];
@@ -158,6 +159,7 @@ export function connect(host) {
   form?.addEventListener("reset", onReset);
   validity.addEventListener("invalid", onInvalid);
   return () => {
+    cancelActiveItemReveal(element);
     stop();
     observer.disconnect();
     authored.disabled = host.props.disabled.value;

package/components/ui-menu/ui-menu.js

@@ -1,3 +1,4 @@
+import { cancelActiveItemReveal, focusAndRevealItem } from "../shared/active-item-reveal.js";
 import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay, requestTopOverlayClose } from "../shared/overlay.js";
 import { menuItemFrom, menuItems, navigateMenu } from "../shared/menu-navigation.js";
 
@@ -30,11 +31,12 @@ export function connect(host) {
     else {
       host.state.internalOpen = true;
       host.dispatch("open", { open: true, reason: "action", trigger });
-      requestAnimationFrame(() => items()[0]?.focus());
+      requestAnimationFrame(() => focusAndRevealItem(element, items()[0]));
     }
   };
   const close = (reason, trigger) => {
     if (!host.state.internalOpen) return;
+    cancelActiveItemReveal(element);
     host.state.internalOpen = false;
     host.dispatch("close", { open: false, reason, trigger });
     if (reason === "escape") anchor?.focus();
@@ -102,6 +104,7 @@ export function connect(host) {
     host.dispatch("select", { value, trigger });
     if (host.props.inline.value) return;
     host.dispatch("close", { open: false, reason: "action", trigger });
+    cancelActiveItemReveal(element);
     host.state.internalOpen = false;
   };
   const onClick = (event) => select(menuItemFrom(event.target), triggerFor(event));
@@ -130,6 +133,7 @@ export function connect(host) {
   const stop = host.effect(apply);
   apply();
   return () => {
+    cancelActiveItemReveal(element);
     stop();
     ids.stop();
     element.removeEventListener("click", onClick);

package/components/ui-pagination/ui-pagination.html

@@ -0,0 +1,74 @@
+<link rel="component" href="../ui-button/ui-button.html">
+<link rel="component" href="../ui-icon/ui-icon.html">
+<link rel="component" href="../ui-cluster/ui-cluster.html">
+<template component="ui-pagination" module="./ui-pagination.js">
+  <defs>
+    <prop name="page" type="number" default="1"
+    >Current one-based page. The consumer updates it after a navigate request; activation never changes it internally.</prop>
+    <prop name="pages" type="list" default="[]">Visible numbered pages in ascending order. Omit for previous/next navigation without a known total. Gaps between
+      numbers show an ellipsis. Supply href to keep a numbered page usable as a native link before JavaScript.
+      <prop type="object"><prop name="value" type="number" required></prop><prop name="href" type="string"></prop></prop>
+    </prop>
+    <prop name="hasPrevious" type="boolean" default="false">Whether a preceding page is available. Previous is always unavailable on page one.</prop>
+    <prop name="hasNext" type="boolean" default="false">Whether another page is available. The component does not infer a total.</prop>
+    <prop name="previousHref" type="string" default="">Optional native destination for Previous. Empty renders a request button.</prop>
+    <prop name="nextHref" type="string" default="">Optional native destination for Next. Empty renders a request button.</prop>
+    <prop name="label" type="string" default="Results pages">Accessible name for the navigation landmark.</prop>
+    <prop name="previousLabel" type="string" default="Previous">Accessible label for the preceding page action.</prop>
+    <prop name="nextLabel" type="string" default="Next">Accessible label for the following page action.</prop>
+    <prop name="pageLabel" type="string" default="Page">Prefix for each numbered page's accessible name, followed by its localized number.</prop>
+    <prop name="size" type="keyword" values="sm, md, lg" default="sm"
+    >Uses Button's shared size scale. Narrow groups wrap without enlarging compact controls.</prop>
+    <prop name="disabled" type="boolean" default="false">Makes all page controls unavailable while keeping the current page visible.</prop>
+    <event name="navigate" type="object">
+      <prop name="page" type="number" required></prop><prop name="previousPage" type="number" required></prop><prop
+        name="trigger"
+        type="keyword"
+        values="keyboard, pointer, programmatic"
+        required
+      ></prop>
+    </event>
+  </defs>
+  <nav from:aria-label="$label">
+    <ui-cluster gap="xs">
+      <ui-button
+        square
+        variant="ghost"
+        tone="neutral"
+        from:size="$size"
+        from:disabled="$disabled or not $hasPrevious or $page &lt;= 1"
+        from:as="{ true: 'a', false: 'button' }[concat($previousHref != '')]"
+        from:href="$previousHref"
+        from:aria-label="$previousLabel"
+        from:data-pagination-page="$page - 1"
+      ><ui-icon name="chevron-left"></ui-icon></ui-button>
+      <template $each="item, index of $pages" $key="$item.value">
+        <span $if="$index > 0 and $item.value > $pages[$index - 1].value + 1" aria-hidden="true">&hellip;</span>
+        <ui-button
+          square
+          from:variant="{ true: 'solid', false: 'ghost' }[concat($item.value = $page)]"
+          from:tone="{ true: 'accent', false: 'neutral' }[concat($item.value = $page)]"
+          from:size="$size"
+          from:disabled="$disabled"
+          from:as="{ true: 'a', false: 'button' }[concat(default($item.href, '') != '')]"
+          from:href="$item.href"
+          from:data-pagination-page="$item.value"
+          from:aria-label="concat($pageLabel, ' ', format($item.value, 'number'))"
+          from:aria-current="{ true: 'page', false: null }[concat($item.value = $page)]"
+        >{format($item.value, 'number')}</ui-button>
+      </template>
+      <ui-button
+        square
+        variant="ghost"
+        tone="neutral"
+        from:size="$size"
+        from:disabled="$disabled or not $hasNext"
+        from:as="{ true: 'a', false: 'button' }[concat($nextHref != '')]"
+        from:href="$nextHref"
+        from:aria-label="$nextLabel"
+        from:data-pagination-page="$page + 1"
+      ><ui-icon name="chevron-right"></ui-icon></ui-button>
+      <slot></slot>
+    </ui-cluster>
+  </nav>
+</template>

package/components/ui-pagination/ui-pagination.js

@@ -0,0 +1,19 @@
+import { trackTrigger } from "../shared/trigger.js";
+
+/** Report page intent while leaving controlled state and native navigation with the consumer. */
+export function connect(host) {
+  const [takeTrigger, stopTrigger] = trackTrigger(host);
+  const activate = (event) => {
+    const control = event.target.closest?.("[data-pagination-page]");
+    if (!control || !host.element.contains(control)) return;
+    const trigger = takeTrigger();
+    if (event.defaultPrevented || event.button > 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    if (host.props.disabled.value || control.matches(":disabled, [aria-disabled='true']")) return;
+    const page = Number(control.getAttribute("data-pagination-page"));
+    const previousPage = host.props.page.value;
+    if (!Number.isSafeInteger(page) || page < 1 || page === previousPage) return;
+    host.dispatch("navigate", { page, previousPage, trigger });
+  };
+  host.element.addEventListener("click", activate);
+  return () => { stopTrigger(); host.element.removeEventListener("click", activate); };
+}

package/components/ui-search-shell/ui-search-shell.js

@@ -1,3 +1,4 @@
+import { cancelActiveItemReveal, focusAndRevealItem } from "../shared/active-item-reveal.js";
 import { closeDialog, closeOverlay, openOverlay, showDialog } from "../shared/overlay.js";
 import { trackTrigger } from "../shared/trigger.js";
 
@@ -19,6 +20,7 @@ export function connect(host) {
   };
   const closeNative = () => {
     suppressNativeClose = true;
+    cancelActiveItemReveal(dialog);
     closeDialog(dialog);
     suppressNativeClose = false;
   };
@@ -63,10 +65,10 @@ export function connect(host) {
     const index = rows.indexOf(target.closest?.(".body button[aria-current]"));
     if (!fromSearch && index < 0) return;
     event.preventDefault();
-    if (event.key === "Home") rows[0].focus();
-    else if (event.key === "End") rows.at(-1).focus();
-    else if (event.key === "ArrowDown") rows[fromSearch ? 0 : (index + 1) % rows.length].focus();
-    else rows[fromSearch ? rows.length - 1 : (index - 1 + rows.length) % rows.length].focus();
+    if (event.key === "Home") focusAndRevealItem(dialog, rows[0]);
+    else if (event.key === "End") focusAndRevealItem(dialog, rows.at(-1));
+    else if (event.key === "ArrowDown") focusAndRevealItem(dialog, rows[fromSearch ? 0 : (index + 1) % rows.length]);
+    else focusAndRevealItem(dialog, rows[fromSearch ? rows.length - 1 : (index - 1 + rows.length) % rows.length]);
   };
   const onClick = (event) => {
     if (host.props.dismissible.value && event.target === dialog) dispatchClose("light-dismiss", trigger());
@@ -83,6 +85,7 @@ export function connect(host) {
   dialog.addEventListener("click", onClick);
   dialog.addEventListener("close", onClose);
   return () => {
+    cancelActiveItemReveal(dialog);
     stop();
     stopTracking();
     dialog.removeEventListener("cancel", onCancel);