@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

package/dist/wire-corner-status.d.ts

@@ -0,0 +1,11 @@
+type Root = HTMLElement | Document;
+/**
+ * Open every overlay `CornerStatus` below root in the top layer, now and as
+ * renders insert them. Opening never moves focus, and a manual popover has no
+ * light dismiss or Escape, so the status stays until the application removes
+ * it. Where the Popover API is missing the host stays a fixed-position
+ * element. Dispose with the owning application.
+ */
+declare function wireCornerStatus(root: Root): () => void;
+
+export { wireCornerStatus };

package/dist/wire-corner-status.js

@@ -0,0 +1,3 @@
+export { wireCornerStatus } from './chunk-ZKKO4MHC.js';
+
+//# sourceMappingURL=wire-corner-status.js.map

package/dist/wire-corner-status.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"wire-corner-status.js"}

package/dist/wire-file-pickers.d.ts

@@ -0,0 +1,26 @@
+type Root = HTMLElement | Document;
+/** Files a picker reported, and how they arrived. */
+interface FilePickerSelection {
+    /** The trigger or drop zone element. */
+    picker: HTMLElement;
+    /** Its `pickerId`, when set. */
+    id?: string;
+    files: File[];
+    via: 'browse' | 'drop';
+}
+interface WireFilePickersOptions {
+    onFiles: (selection: FilePickerSelection) => void;
+}
+/** Whether a file matches a native `accept` list (`.png, image/*, text/plain`). */
+declare function fileMatchesAccept(file: File, accept: string): boolean;
+/**
+ * Report files chosen through any `FilePickerTrigger` or `FileDropZone` below
+ * root, or dropped on a `FileDropZone`, and mark a zone `data-dragging` while
+ * files are dragged over it. Dropped files are filtered by the input's
+ * `accept` (and to one when it is not `multiple`); a disabled picker ignores
+ * drops. The input is reset after each report, so choosing the same file again
+ * reports again. Dispose with the owning application.
+ */
+declare function wireFilePickers(root: Root, { onFiles }: WireFilePickersOptions): () => void;
+
+export { type FilePickerSelection, type WireFilePickersOptions, fileMatchesAccept, wireFilePickers };

package/dist/wire-file-pickers.js

@@ -0,0 +1,3 @@
+export { fileMatchesAccept, wireFilePickers } from './chunk-2MSPNRWJ.js';
+
+//# sourceMappingURL=wire-file-pickers.js.map

package/dist/wire-file-pickers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"wire-file-pickers.js"}

package/dist/wire-list-focus-scroll.d.ts

@@ -0,0 +1,16 @@
+type Root = HTMLElement | Document;
+/**
+ * Bring a keyboard-focused row of a `scrollable` List below `root` fully into
+ * view, focus ring included. Engines differ on how `focus()` scrolls a partly
+ * hidden row: Chromium scrolls it to the nearest edge plus scroll padding,
+ * Firefox waits until about half of it is hidden and then centers it, and
+ * WebKit leaves it where it is. On `focusin`, when the newly focused element
+ * matches `:focus-visible` and its ring crosses the nearest scrollable List's
+ * clip, this calls `scrollIntoView({ block: 'nearest', inline: 'nearest' })`,
+ * which honors the List's ring-room scroll padding in every engine. Pointer
+ * focus is left alone, so a click never scrolls the row out from under the
+ * pointer. Returns a disposer.
+ */
+declare function wireListFocusScroll(root: Root): () => void;
+
+export { wireListFocusScroll };

package/dist/wire-list-focus-scroll.js

@@ -0,0 +1,3 @@
+export { wireListFocusScroll } from './chunk-QDSZTQXL.js';
+
+//# sourceMappingURL=wire-list-focus-scroll.js.map

package/dist/wire-list-focus-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"wire-list-focus-scroll.js"}

package/dist/wire-list-reorder.d.ts

@@ -0,0 +1,41 @@
+/** Which edge of the target row the moved rows land beside. */
+type ListDropPosition = 'before' | 'after';
+/** How the person asked for the move. */
+type ListReorderSource = 'pointer' | 'keyboard';
+/** The row the moved rows land beside, and on which side of it. */
+interface ListReorderTarget {
+    id: string;
+    position: ListDropPosition;
+}
+/** One requested reorder. The application applies it to its own ordered state. */
+interface ListReorder {
+    /** The containing list's `data-list-id`, when it has one. */
+    listId?: string;
+    /** The moved rows' `itemId`s, in their current order. */
+    sourceIds: string[];
+    target: ListReorderTarget;
+    source: ListReorderSource;
+}
+interface WireListReorderOptions {
+    /** Apply the change synchronously (for example with `reorderListItems`) and re-render. */
+    onReorder: (change: ListReorder) => void;
+}
+/**
+ * Move `sourceIds` (kept in their current relative order) to `target`'s side
+ * of the target row. Returns a new array; an unknown target, a target that is
+ * itself being moved, or no known sources leave the order unchanged.
+ */
+declare function reorderListItems<T>(items: readonly T[], getId: (item: T) => string, sourceIds: readonly string[], target: ListReorderTarget): T[];
+/**
+ * Wire native drag-and-drop and Alt+Shift+ArrowUp/ArrowDown reordering for
+ * draggable `ListItem`, `ListItemLink`, and `ListActionRow` rows below `root`.
+ * Rows reorder within their `List` (or parent element) and are identified by
+ * `itemId`. Dragging a selected or pressed row moves every selected row of
+ * its list. While a pointer drag is in progress the wiring paints the same
+ * `data-dragging` / `data-drop-position` attributes the rows' `dragging` and
+ * `dropPosition` props render. Order stays application state: `onReorder`
+ * reports the change and the application re-renders. Returns a disposer.
+ */
+declare function wireListReorder(root: HTMLElement | Document, { onReorder }: WireListReorderOptions): () => void;
+
+export { type ListDropPosition, type ListReorder, type ListReorderSource, type ListReorderTarget, type WireListReorderOptions, reorderListItems, wireListReorder };

package/dist/wire-list-reorder.js

@@ -0,0 +1,3 @@
+export { reorderListItems, wireListReorder } from './chunk-MJ5RU6XT.js';
+
+//# sourceMappingURL=wire-list-reorder.js.map

package/dist/wire-list-reorder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"wire-list-reorder.js"}

package/dist/wire-nav-stack.d.ts

@@ -8,7 +8,10 @@ interface WireNavStackOptions {
  * Animate a `NavStack`'s push/pop transitions and wire its back control. The app
  * owns the stack (a signal of `NavStackView[]`) and re-renders `NavStack` when it
  * changes; this helper slides the content and settles the chrome across each
- * change, and calls `onBack` when the back control is used. Returns a disposer.
+ * change, moves focus into every new top view, restores that view's last focused
+ * descendant on pop, and calls `onBack` when the back control is used. Mark a
+ * preferred initial target with `data-nav-focus`; otherwise the first focusable
+ * descendant (or the view itself) receives focus. Returns a disposer.
  */
 declare function wireNavStack(root: Element, options?: WireNavStackOptions): () => void;
 

package/dist/wire-nav-stack.js

@@ -1,17 +1,60 @@
 import { delegate } from 'kerfjs';
 
-// src/wire-nav-stack.ts
+// src/components/navigation/nav-stack/wiring/wire-nav-stack.ts
 var DEFAULT_DURATION = 200;
+var CHROME_OVERLAY = "data-chrome-overlay";
+var BOTTOM_TOOLBAR_OVERLAY = "data-bottom-toolbar-overlay";
+var OVERLAY_EDGES = [
+  {
+    presentation: "data-chrome-presentation",
+    element: ":scope > [data-nav-stack-chrome]:not([data-nav-chrome-copy])",
+    blockSize: "--_kui-nav-stack-chrome-block-size",
+    scrollbarInlineSize: "--_kui-nav-stack-scrollbar-inline-size",
+    // A Pane header lies beneath the chrome and starts its content below it.
+    paneChrome: ":scope > :is(.kui-pane__header, .kui-pane__toolbar)"
+  },
+  {
+    presentation: "data-bottom-toolbar-presentation",
+    element: ":scope > [data-nav-stack-bottom]:not([data-nav-chrome-copy])",
+    blockSize: "--_kui-nav-stack-bottom-block-size",
+    scrollbarInlineSize: "--_kui-nav-stack-bottom-scrollbar-inline-size",
+    // A Pane footer lies beneath the toolbar and ends its content above it.
+    paneChrome: ":scope > .kui-pane__footer"
+  }
+];
+var NESTED_LAYOUT = ["nav-stack", "split-view", "workbench", "tab-scaffold"].map((name) => `[data-component="${name}"]`).join(", ");
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
 function viewsOf(viewport) {
-  return Array.from(viewport.querySelectorAll(":scope > .kui-nav-stack__view"));
+  return Array.from(
+    viewport.querySelectorAll(":scope > .kui-nav-stack__view")
+  );
 }
 function topView(viewport) {
-  const live = viewsOf(viewport).filter((view) => view.dataset.navExiting !== "true");
+  const live = viewsOf(viewport).filter(
+    (view) => view.dataset.navExiting !== "true"
+  );
   return live[live.length - 1];
 }
 function reducedMotion(view) {
   return typeof view.matchMedia === "function" && view.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
+function chromeOf(section) {
+  return Array.from(
+    section.querySelectorAll(
+      ":scope > [data-nav-stack-chrome]:not([data-nav-chrome-copy]), :scope > [data-nav-stack-bottom]:not([data-nav-chrome-copy])"
+    )
+  );
+}
+function availableFocusTarget(element) {
+  return element instanceof HTMLElement && element.isConnected && !element.matches('[disabled], [aria-disabled="true"]') && !element.closest('[inert], [hidden], [aria-hidden="true"]');
+}
 function wireNavStack(root, options = {}) {
   const section = root.matches('[data-component="nav-stack"]') ? root : root.querySelector('[data-component="nav-stack"]');
   const viewport = section?.querySelector("[data-nav-stack-viewport]");
@@ -19,9 +62,52 @@ function wireNavStack(root, options = {}) {
   };
   const view = section.ownerDocument.defaultView ?? window;
   const duration = options.duration ?? DEFAULT_DURATION;
-  const disposeBack = delegate(section, "click", "[data-nav-back]", () => options.onBack?.());
+  const previousDuration = section.style.getPropertyValue(
+    "--kui-nav-stack-transition-duration"
+  );
+  section.style.setProperty(
+    "--kui-nav-stack-transition-duration",
+    `${Math.max(0, duration)}ms`
+  );
+  const disposeBack = delegate(
+    section,
+    "click",
+    "[data-nav-back]",
+    () => options.onBack?.()
+  );
   let activeKey = topView(viewport)?.dataset.navKey;
   const timers = /* @__PURE__ */ new Set();
+  const frames = /* @__PURE__ */ new Set();
+  const frame = (fn) => {
+    const id = view.requestAnimationFrame(() => {
+      frames.delete(id);
+      fn();
+    });
+    frames.add(id);
+  };
+  const finishTransition = () => {
+    for (const id of frames) view.cancelAnimationFrame(id);
+    frames.clear();
+    for (const id of timers) view.clearTimeout(id);
+    timers.clear();
+    section.querySelectorAll(":scope > [data-nav-chrome-copy]").forEach((element) => element.remove());
+    chromeOf(section).forEach(
+      (element) => element.classList.remove("kui-nav-stack__chrome--entering")
+    );
+    viewsOf(viewport).forEach((element) => {
+      if (element.dataset.navExiting === "true") element.remove();
+      else {
+        element.classList.remove("kui-nav-stack__view--entering");
+        delete element.dataset.navRevealed;
+      }
+    });
+    delete section.dataset.navChromeTransition;
+  };
+  const rememberedFocus = /* @__PURE__ */ new Map();
+  const generatedFallbacks = /* @__PURE__ */ new Map();
+  let chromeSnapshots = chromeOf(section).map(
+    (element) => element.cloneNode(true)
+  );
   const settle = (fn) => {
     if (duration <= 0 || reducedMotion(view)) {
       fn();
@@ -39,47 +125,298 @@ function wireNavStack(root, options = {}) {
       el.classList.add("kui-nav-stack__view--entering");
       if (animated) {
         void el.offsetWidth;
-        view.requestAnimationFrame(() => el.classList.remove("kui-nav-stack__view--entering"));
+        frame(() => el.classList.remove("kui-nav-stack__view--entering"));
       } else {
         el.classList.remove("kui-nav-stack__view--entering");
       }
     } else if (animated) {
-      view.requestAnimationFrame(() => el.classList.add("kui-nav-stack__view--exiting"));
+      frame(() => el.classList.add("kui-nav-stack__view--exiting"));
     } else {
       el.classList.add("kui-nav-stack__view--exiting");
     }
   };
+  const rememberFocusedView = (target) => {
+    if (!(target instanceof HTMLElement)) return;
+    const owner = target.closest(".kui-nav-stack__view");
+    const key = owner?.dataset.navKey;
+    if (key && owner !== target && viewport.contains(owner))
+      rememberedFocus.set(key, target);
+  };
+  let fallbackView;
+  const focusTargetIn = (targetView) => {
+    const key = targetView.dataset.navKey;
+    const remembered = key ? rememberedFocus.get(key) : void 0;
+    const preferred = Array.from(
+      targetView.querySelectorAll("[data-nav-focus]")
+    ).find(availableFocusTarget);
+    const first = Array.from(
+      targetView.querySelectorAll(FOCUSABLE_SELECTOR)
+    ).find(availableFocusTarget);
+    return (availableFocusTarget(remembered) && targetView.contains(remembered) ? remembered : void 0) ?? preferred ?? first;
+  };
+  const keepFallbackFocus = () => {
+    const view2 = fallbackView;
+    if (!view2) return;
+    const active = view2.ownerDocument.activeElement;
+    const body = view2.ownerDocument.body;
+    if (!view2.isConnected || view2 !== topView(viewport) || active !== view2 && active !== body && active !== null) {
+      fallbackView = void 0;
+      return;
+    }
+    const target = focusTargetIn(view2);
+    if (target) {
+      fallbackView = void 0;
+      target.focus({ preventScroll: true });
+      return;
+    }
+    if (view2.getAttribute("tabindex") !== "-1") view2.tabIndex = -1;
+    if (active !== view2) view2.focus({ preventScroll: true });
+  };
+  const focusInto = (targetView) => {
+    fallbackView = void 0;
+    const target = focusTargetIn(targetView);
+    if (target) {
+      target.focus({ preventScroll: true });
+      return;
+    }
+    if (!generatedFallbacks.has(targetView)) {
+      generatedFallbacks.set(
+        targetView,
+        targetView.hasAttribute("tabindex") ? targetView.getAttribute("tabindex") : null
+      );
+      targetView.tabIndex = -1;
+    }
+    targetView.focus({ preventScroll: true });
+    fallbackView = targetView;
+  };
+  const edges = OVERLAY_EDGES.map((edge) => [
+    edge,
+    { covers: false }
+  ]);
+  const measuredEdge = (state) => state.element !== void 0 && state.size !== void 0;
+  let measuredScroller;
+  let scrollbarSize = 0;
+  const writeProperty = (name, value) => {
+    if (section.style.getPropertyValue(name) === value) return;
+    if (value) section.style.setProperty(name, value);
+    else section.style.removeProperty(name);
+  };
+  const publishOverlay = () => {
+    for (const [edge, state] of edges) {
+      const measured = measuredEdge(state);
+      writeProperty(edge.blockSize, measured ? `${state.size}px` : "");
+      writeProperty(
+        edge.scrollbarInlineSize,
+        measured && state.covers && scrollbarSize > 0 ? `${scrollbarSize}px` : ""
+      );
+    }
+    if (section.getAttribute("style") === "") section.removeAttribute("style");
+    const [top, bottom] = edges.map(([, state]) => measuredEdge(state));
+    if (top && section.getAttribute(CHROME_OVERLAY) !== "measured")
+      section.setAttribute(CHROME_OVERLAY, "measured");
+    else if (!top && section.hasAttribute(CHROME_OVERLAY))
+      section.removeAttribute(CHROME_OVERLAY);
+    if (bottom && section.getAttribute(BOTTOM_TOOLBAR_OVERLAY) !== "measured")
+      section.setAttribute(BOTTOM_TOOLBAR_OVERLAY, "measured");
+    else if (!bottom && section.hasAttribute(BOTTOM_TOOLBAR_OVERLAY))
+      section.removeAttribute(BOTTOM_TOOLBAR_OVERLAY);
+  };
+  const activeScroller = () => {
+    const top = topView(viewport);
+    const only = top?.children.length === 1 ? top.children[0] : void 0;
+    if (!only) return { scroller: top };
+    if (only.matches(".kui-pane"))
+      return {
+        scroller: only.querySelector(":scope > .kui-pane__content") ?? void 0,
+        pane: only
+      };
+    return { scroller: only.matches(NESTED_LAYOUT) ? void 0 : top };
+  };
+  const measureScrollbar = () => {
+    const scroller = measuredScroller;
+    if (!scroller) {
+      scrollbarSize = 0;
+      return;
+    }
+    const style = view.getComputedStyle(scroller);
+    scrollbarSize = Math.max(
+      0,
+      scroller.offsetWidth - scroller.clientWidth - (Number.parseFloat(style.borderLeftWidth) || 0) - (Number.parseFloat(style.borderRightWidth) || 0)
+    );
+  };
+  const chromeObserver = view.ResizeObserver ? new view.ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const state = edges.find(
+        ([, edgeState]) => edgeState.element === entry.target
+      )?.[1];
+      if (state)
+        state.size = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height;
+      else if (entry.target === measuredScroller) measureScrollbar();
+    }
+    publishOverlay();
+  }) : void 0;
+  const syncOverlay = () => {
+    for (const [edge, state] of edges) {
+      const element = section.getAttribute(edge.presentation) === "overlay" ? section.querySelector(edge.element) ?? void 0 : void 0;
+      if (element === state.element) continue;
+      if (state.element) chromeObserver?.unobserve(state.element);
+      state.element = element;
+      if (!element) state.size = void 0;
+      else {
+        if (state.size === void 0 || !chromeObserver)
+          state.size = element.getBoundingClientRect().height;
+        chromeObserver?.observe(element, { box: "border-box" });
+      }
+    }
+    const { scroller, pane } = activeScroller();
+    for (const [edge, state] of edges)
+      state.covers = state.element !== void 0 && scroller !== void 0 && !pane?.querySelector(edge.paneChrome);
+    const covered = edges.some(([, state]) => state.covers) ? scroller : void 0;
+    if (covered !== measuredScroller) {
+      if (measuredScroller) chromeObserver?.unobserve(measuredScroller);
+      measuredScroller = covered;
+      measureScrollbar();
+      if (measuredScroller) chromeObserver?.observe(measuredScroller);
+    }
+    publishOverlay();
+  };
+  const overlayObserver = new MutationObserver(syncOverlay);
+  overlayObserver.observe(section, {
+    childList: true,
+    attributes: true,
+    attributeFilter: [
+      ...OVERLAY_EDGES.map((edge) => edge.presentation),
+      CHROME_OVERLAY,
+      BOTTOM_TOOLBAR_OVERLAY,
+      "style"
+    ]
+  });
+  syncOverlay();
+  const onFocusIn = (event) => rememberFocusedView(event.target);
+  section.addEventListener("focusin", onFocusIn);
+  rememberFocusedView(section.ownerDocument.activeElement);
+  const crossFadeChrome = () => {
+    const current = chromeOf(section);
+    const animated = duration > 0 && !reducedMotion(view);
+    if (!animated) {
+      chromeSnapshots = current.map(
+        (element) => element.cloneNode(true)
+      );
+      return;
+    }
+    section.dataset.navChromeTransition = "true";
+    const copies = chromeSnapshots.map((snapshot) => {
+      const copy = snapshot.cloneNode(true);
+      copy.classList.add("kui-nav-stack__chrome-copy");
+      copy.dataset.navChromeCopy = "";
+      copy.setAttribute("aria-hidden", "true");
+      copy.setAttribute("inert", "");
+      if (copy.hasAttribute("data-nav-stack-bottom"))
+        copy.classList.add("kui-nav-stack__chrome-copy--bottom");
+      section.append(copy);
+      return copy;
+    });
+    current.forEach(
+      (element) => element.classList.add("kui-nav-stack__chrome--entering")
+    );
+    void section.offsetWidth;
+    frame(() => {
+      current.forEach(
+        (element) => element.classList.remove("kui-nav-stack__chrome--entering")
+      );
+      copies.forEach(
+        (copy) => copy.classList.add("kui-nav-stack__chrome-copy--exiting")
+      );
+    });
+    settle(() => {
+      copies.forEach((copy) => copy.remove());
+      delete section.dataset.navChromeTransition;
+    });
+    chromeSnapshots = current.map((element) => {
+      const snapshot = element.cloneNode(true);
+      snapshot.classList.remove("kui-nav-stack__chrome--entering");
+      return snapshot;
+    });
+  };
   const observer = new MutationObserver((records) => {
     const removed = [];
-    let added = false;
     for (const record of records) {
+      if (record.target !== viewport) continue;
       record.removedNodes.forEach((node) => {
-        if (node instanceof HTMLElement && node.classList.contains("kui-nav-stack__view") && node.dataset.navExiting !== "true") removed.push(node);
-      });
-      record.addedNodes.forEach((node) => {
-        if (node instanceof HTMLElement && node.classList.contains("kui-nav-stack__view")) added = true;
+        if (node instanceof HTMLElement && node.classList.contains("kui-nav-stack__view") && node.dataset.navExiting !== "true")
+          removed.push(node);
       });
     }
     const top = topView(viewport);
     const currentKey = top?.dataset.navKey;
     const poppedTop = removed.find((node) => node.dataset.navKey === activeKey);
     if (poppedTop && currentKey !== activeKey) {
+      finishTransition();
+      poppedTop.classList.remove(
+        "kui-nav-stack__view--entering",
+        "kui-nav-stack__view--exiting"
+      );
       poppedTop.dataset.navExiting = "true";
       poppedTop.setAttribute("aria-hidden", "true");
       viewport.append(poppedTop);
+      void poppedTop.offsetWidth;
       play(poppedTop, "exiting");
+      crossFadeChrome();
+      if (top) focusInto(top);
       settle(() => poppedTop.remove());
-    } else if (added && currentKey !== activeKey && top) {
+    } else if (currentKey !== activeKey && top) {
+      finishTransition();
+      const previous = viewsOf(viewport).find(
+        (element) => element.dataset.navKey === activeKey
+      );
+      if (previous) {
+        previous.dataset.navRevealed = "true";
+        settle(() => delete previous.dataset.navRevealed);
+      }
+      rememberFocusedView(section.ownerDocument.activeElement);
       play(top, "entering");
+      crossFadeChrome();
+      focusInto(top);
     }
     activeKey = currentKey;
+    keepFallbackFocus();
+    syncOverlay();
+  });
+  observer.observe(viewport, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["data-nav-key", "data-nav-active", "tabindex"]
   });
-  observer.observe(viewport, { childList: true });
   return () => {
     disposeBack();
+    section.removeEventListener("focusin", onFocusIn);
     observer.disconnect();
-    for (const timer of timers) view.clearTimeout(timer);
-    timers.clear();
+    overlayObserver.disconnect();
+    chromeObserver?.disconnect();
+    for (const [, state] of edges) {
+      state.element = void 0;
+      state.size = void 0;
+      state.covers = false;
+    }
+    measuredScroller = void 0;
+    scrollbarSize = 0;
+    publishOverlay();
+    finishTransition();
+    for (const [element, previousTabIndex] of generatedFallbacks) {
+      if (!element.isConnected || element.tabIndex !== -1) continue;
+      if (previousTabIndex === null) element.removeAttribute("tabindex");
+      else element.setAttribute("tabindex", previousTabIndex);
+    }
+    generatedFallbacks.clear();
+    fallbackView = void 0;
+    rememberedFocus.clear();
+    if (previousDuration)
+      section.style.setProperty(
+        "--kui-nav-stack-transition-duration",
+        previousDuration
+      );
+    else section.style.removeProperty("--kui-nav-stack-transition-duration");
   };
 }