@lostgradient/cinder 0.2.0 → 0.4.0

package/dist/server/components/sidebar/index.js

@@ -1,40 +1,253 @@
 import { createRequire } from "node:module";
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-function __accessProp(key) {
-  return this[key];
-}
-var __toESMCache_node;
-var __toESMCache_esm;
-var __toESM = (mod, isNodeMode, target) => {
-  var canCache = mod != null && typeof mod === "object";
-  if (canCache) {
-    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
-    var cached = cache.get(mod);
-    if (cached)
-      return cached;
-  }
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: __accessProp.bind(mod, key),
-        enumerable: true
-      });
-  if (canCache)
-    cache.set(mod, to);
-  return to;
-};
-var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 
+// src/components/focus-trap/focus-trap.svelte
+import * as $2 from "svelte/internal/server";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// src/components/focus-trap/focus-trap.utilities.svelte.ts
+import * as $ from "svelte/internal/server";
+
+// src/utilities/focus.ts
+function restoreFocusTo(target) {
+  if (!target)
+    return false;
+  if (typeof document === "undefined")
+    return false;
+  if (!target.isConnected)
+    return false;
+  if (target.ownerDocument !== document)
+    return false;
+  try {
+    target.focus();
+  } catch {
+    return false;
+  }
+  return true;
+}
+
+// src/utilities/read-option.ts
+function isOptionGetter(value) {
+  return typeof value === "function";
+}
+function readOption(value) {
+  return isOptionGetter(value) ? value() : value;
+}
+
+// src/components/focus-trap/focus-trap.utilities.svelte.ts
+var trapStack = [];
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "summary",
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable]:not([contenteditable="false"])'
+].join(", ");
+function noop() {}
+function isHiddenByTree(element) {
+  if (element.hidden)
+    return true;
+  if (element.matches('[inert], [aria-hidden="true"]'))
+    return true;
+  const ancestor = element.closest('[hidden], [inert], [aria-hidden="true"]');
+  return ancestor !== null && ancestor !== element;
+}
+function isFocusableCandidate(element) {
+  if (isHiddenByTree(element))
+    return false;
+  if (element.hasAttribute("disabled"))
+    return false;
+  if (element.hasAttribute("tabindex") && element.tabIndex < 0)
+    return false;
+  return true;
+}
+var NATIVELY_FOCUSABLE_TAGS = new Set(["BUTTON", "INPUT", "SELECT", "TEXTAREA", "SUMMARY"]);
+function isProgrammaticallyFocusable(element) {
+  if (isHiddenByTree(element))
+    return false;
+  if (element.hasAttribute("disabled"))
+    return false;
+  if (element.hasAttribute("tabindex"))
+    return true;
+  if (NATIVELY_FOCUSABLE_TAGS.has(element.tagName))
+    return true;
+  if (element.tagName === "A" && element.hasAttribute("href"))
+    return true;
+  const contentEditable = element.getAttribute("contenteditable");
+  if (contentEditable !== null && contentEditable !== "false")
+    return true;
+  return false;
+}
+function getTabbableElements(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => root.contains(element) && isFocusableCandidate(element));
+}
+function resolveScopedTarget(root, target) {
+  const resolved = readOption(target ?? null);
+  if (!resolved)
+    return null;
+  if (typeof resolved === "string") {
+    let match = null;
+    try {
+      match = root.querySelector(resolved);
+    } catch {
+      return null;
+    }
+    return match && root.contains(match) ? match : null;
+  }
+  return resolved instanceof HTMLElement && root.contains(resolved) ? resolved : null;
+}
+function getFallbackTarget(root, fallbackFocus) {
+  const resolved = resolveScopedTarget(root, fallbackFocus);
+  return resolved && isProgrammaticallyFocusable(resolved) ? resolved : null;
+}
+function tryFocus(element) {
+  element.focus();
+  return document.activeElement === element;
+}
+function ensureRootFocusable(root) {
+  if (root.hasAttribute("tabindex")) {
+    return () => {};
+  }
+  root.setAttribute("tabindex", "-1");
+  return () => {
+    root.removeAttribute("tabindex");
+  };
+}
+function pushTrap(instance) {
+  const existingIndex = trapStack.findIndex((entry) => entry.id === instance.id);
+  if (existingIndex !== -1) {
+    trapStack.splice(existingIndex, 1);
+  }
+  trapStack.push(instance);
+}
+function removeTrap(id) {
+  const index = trapStack.findIndex((entry) => entry.id === id);
+  if (index !== -1) {
+    trapStack.splice(index, 1);
+  }
+}
+function isTopTrap(id) {
+  return trapStack.at(-1)?.id === id;
+}
+function createFocusTrap(options = {}) {
+  const trapId = Symbol("focus-trap");
+  return (node) => {
+    const isActive = () => readOption(options.active ?? true);
+    const restoreFocus = options.restoreFocus ?? true;
+    const initialFocus = options.initialFocus ?? null;
+    const fallbackFocus = options.fallbackFocus ?? null;
+    const manageInitialFocus = options.manageInitialFocus ?? true;
+    let activated = false;
+    let activationGeneration = 0;
+    let capturedFocus = null;
+    let restoreRootFocusability = noop;
+    function focusTrapTarget() {
+      const preferred = resolveScopedTarget(node, initialFocus);
+      if (preferred && isProgrammaticallyFocusable(preferred) && tryFocus(preferred)) {
+        return;
+      }
+      const tabbable = getTabbableElements(node);
+      if (tabbable.length > 0 && tabbable[0] && tryFocus(tabbable[0])) {
+        return;
+      }
+      const fallbackTarget = getFallbackTarget(node, fallbackFocus);
+      if (fallbackTarget && tryFocus(fallbackTarget)) {
+        return;
+      }
+      restoreRootFocusability = ensureRootFocusable(node);
+      node.focus();
+    }
+    function activate() {
+      if (activated)
+        return;
+      activated = true;
+      const generation = ++activationGeneration;
+      capturedFocus = document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : null;
+      pushTrap({ id: trapId, node });
+      if (!manageInitialFocus)
+        return;
+      queueMicrotask(() => {
+        if (!activated || generation !== activationGeneration || !isActive())
+          return;
+        focusTrapTarget();
+      });
+    }
+    function deactivate() {
+      if (!activated)
+        return;
+      activated = false;
+      restoreRootFocusability();
+      restoreRootFocusability = noop;
+      removeTrap(trapId);
+      if (restoreFocus) {
+        restoreFocusTo(capturedFocus);
+      }
+      capturedFocus = null;
+    }
+    function handleKeydown(event) {
+      if (!isActive() || !isTopTrap(trapId) || event.key !== "Tab")
+        return;
+      const tabbable = getTabbableElements(node);
+      if (tabbable.length === 0) {
+        const fallbackTarget = getFallbackTarget(node, fallbackFocus);
+        event.preventDefault();
+        if (!fallbackTarget || !tryFocus(fallbackTarget)) {
+          restoreRootFocusability = ensureRootFocusable(node);
+          node.focus();
+        }
+        return;
+      }
+      const first = tabbable[0];
+      const last = tabbable[tabbable.length - 1];
+      const activeElement = document.activeElement;
+      if (event.shiftKey && activeElement === first) {
+        event.preventDefault();
+        last?.focus();
+      } else if (!event.shiftKey && activeElement === last) {
+        event.preventDefault();
+        first?.focus();
+      }
+    }
+    node.addEventListener("keydown", handleKeydown);
+    return () => {
+      node.removeEventListener("keydown", handleKeydown);
+      deactivate();
+    };
+  };
+}
+
+// src/components/focus-trap/focus-trap.svelte
+function Focus_trap($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      active = true,
+      restoreFocus = true,
+      initialFocus = null,
+      fallbackFocus = null,
+      class: className,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    $$renderer2.push(`<div${$2.attributes({ class: $2.clsx(classNames(className)), ...rest })}>`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+  });
+}
+
+// src/components/focus-trap/index.ts
+var focus_trap_default = Focus_trap;
 // src/components/sidebar/sidebar.svelte
-import * as $3 from "svelte/internal/server";
+import * as $6 from "svelte/internal/server";
 import { MediaQuery as MediaQuery2 } from "svelte/reactivity";
 
 // src/_internal/sidebar-context.ts
@@ -58,14 +271,9 @@ function setSidebarContext(context) {
 }
 var getSidebarContext = optionalContext(getSidebarContextStrict);
 
-// src/utilities/class-names.ts
-function classNames(...parts) {
-  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
-}
-
 // src/components/drawer/drawer.svelte
-import * as $2 from "svelte/internal/server";
-import { onDestroy, tick } from "svelte";
+import * as $5 from "svelte/internal/server";
+import { onDestroy } from "svelte";
 
 // src/_internal/overlay.ts
 var escapeStack = [];
@@ -93,7 +301,7 @@ function onEscapeKeydown(event) {
   const handler = escapeStack.at(-1);
   if (!handler)
     return;
-  handler();
+  handler(event);
 }
 var scrollLockCount = 0;
 var originalBodyOverflow = null;
@@ -127,92 +335,11 @@ function captureFocus() {
   return null;
 }
 
-// src/_internal/transition-completion.ts
-function parseTimeValueList(value) {
-  return value.split(",").map((part) => part.trim()).map((part) => {
-    if (part.endsWith("ms"))
-      return Number.parseFloat(part);
-    if (part.endsWith("s"))
-      return Number.parseFloat(part) * 1000;
-    return 0;
-  }).filter((part) => Number.isFinite(part));
-}
-function getLongestTransitionTime(element) {
-  const style = window.getComputedStyle(element);
-  const durations = parseTimeValueList(style.transitionDuration);
-  const delays = parseTimeValueList(style.transitionDelay);
-  const count = Math.max(durations.length, delays.length);
-  let longest = 0;
-  for (let index = 0;index < count; index += 1) {
-    const duration = durations[index] ?? durations.at(-1) ?? 0;
-    const delay = delays[index] ?? delays.at(-1) ?? 0;
-    longest = Math.max(longest, duration + delay);
-  }
-  return longest;
-}
-function getTrackedTransitionProperties(element) {
-  const style = window.getComputedStyle(element);
-  const properties = style.transitionProperty.split(",").map((part) => part.trim()).filter(Boolean);
-  const durations = parseTimeValueList(style.transitionDuration);
-  const delays = parseTimeValueList(style.transitionDelay);
-  const count = Math.max(properties.length, durations.length, delays.length);
-  const trackedProperties = new Set;
-  for (let index = 0;index < count; index += 1) {
-    const property = properties[index] ?? properties.at(-1) ?? "all";
-    const duration = durations[index] ?? durations.at(-1) ?? 0;
-    const delay = delays[index] ?? delays.at(-1) ?? 0;
-    if (duration + delay <= 0)
-      continue;
-    if (property === "all")
-      return null;
-    trackedProperties.add(property);
-  }
-  return trackedProperties;
-}
-function waitForTransitionCompletion({
-  element,
-  reducedMotion,
-  onComplete
-}) {
-  let completed = false;
-  let fallbackTimer;
-  const finish = () => {
-    if (completed)
-      return;
-    completed = true;
-    element.removeEventListener("transitionend", handleTransitionEnd);
-    element.removeEventListener("transitioncancel", finish);
-    if (fallbackTimer) {
-      clearTimeout(fallbackTimer);
-      fallbackTimer = undefined;
-    }
-    onComplete();
-  };
-  const handleTransitionEnd = (event) => {
-    if (event.target instanceof Element && event.target !== element)
-      return;
-    if (!pendingProperties) {
-      finish();
-      return;
-    }
-    pendingProperties.delete(event.propertyName);
-    if (pendingProperties.size === 0) {
-      finish();
-    }
-  };
-  const totalTransitionTime = reducedMotion ? 0 : getLongestTransitionTime(element);
-  const pendingProperties = reducedMotion ? new Set : getTrackedTransitionProperties(element);
-  if (totalTransitionTime <= 0) {
-    queueMicrotask(finish);
-    return finish;
-  }
-  element.addEventListener("transitionend", handleTransitionEnd);
-  element.addEventListener("transitioncancel", finish);
-  fallbackTimer = setTimeout(finish, totalTransitionTime + 50);
-  return finish;
-}
-
 // src/utilities/attachments.ts
+function isInsideEventPath(event, element) {
+  const path = event.composedPath();
+  return path.some((entry) => entry instanceof Node && element.contains(entry));
+}
 function createClickOutside(options) {
   const { handler, enabled = true, eventType = "click", capture = true, ignoreRefs } = options;
   return (node) => {
@@ -220,17 +347,19 @@ function createClickOutside(options) {
       const isEnabled = typeof enabled === "function" ? enabled() : enabled;
       if (!isEnabled)
         return;
+      if (event.type === "touchstart" && !event.cancelable)
+        return;
       const target = event.target;
       if (!(target instanceof Node)) {
         handler();
         return;
       }
-      if (node.contains(target))
+      if (isInsideEventPath(event, node))
         return;
       if (ignoreRefs) {
         for (const ref of ignoreRefs) {
           const element = ref();
-          if (element && element.contains(target))
+          if (element && isInsideEventPath(event, element))
             return;
         }
       }
@@ -309,26 +438,8 @@ function overflowFade() {
   };
 }
 
-// src/utilities/focus.ts
-function restoreFocusTo(target) {
-  if (!target)
-    return false;
-  if (typeof document === "undefined")
-    return false;
-  if (!target.isConnected)
-    return false;
-  if (target.ownerDocument !== document)
-    return false;
-  try {
-    target.focus();
-  } catch {
-    return false;
-  }
-  return true;
-}
-
 // src/utilities/use-reduced-motion.svelte.ts
-import * as $ from "svelte/internal/server";
+import * as $3 from "svelte/internal/server";
 import { MediaQuery } from "svelte/reactivity";
 function useReducedMotion() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
@@ -342,10 +453,239 @@ function useReducedMotion() {
   };
 }
 
+// src/components/_internal/create-sliding-dialog-state.svelte.ts
+import * as $4 from "svelte/internal/server";
+
+// src/_internal/transition-completion.ts
+function parseTimeValueList(value) {
+  return value.split(",").map((part) => part.trim()).map((part) => {
+    if (part.endsWith("ms"))
+      return Number.parseFloat(part);
+    if (part.endsWith("s"))
+      return Number.parseFloat(part) * 1000;
+    return 0;
+  }).filter((part) => Number.isFinite(part));
+}
+function getLongestTransitionTime(element) {
+  const style = window.getComputedStyle(element);
+  const durations = parseTimeValueList(style.transitionDuration);
+  const delays = parseTimeValueList(style.transitionDelay);
+  const count = Math.max(durations.length, delays.length);
+  let longest = 0;
+  for (let index = 0;index < count; index += 1) {
+    const duration = durations[index] ?? durations.at(-1) ?? 0;
+    const delay = delays[index] ?? delays.at(-1) ?? 0;
+    longest = Math.max(longest, duration + delay);
+  }
+  return longest;
+}
+function getTrackedTransitionProperties(element) {
+  const style = window.getComputedStyle(element);
+  const properties = style.transitionProperty.split(",").map((part) => part.trim()).filter(Boolean);
+  const durations = parseTimeValueList(style.transitionDuration);
+  const delays = parseTimeValueList(style.transitionDelay);
+  const count = Math.max(properties.length, durations.length, delays.length);
+  const trackedProperties = new Set;
+  for (let index = 0;index < count; index += 1) {
+    const property = properties[index] ?? properties.at(-1) ?? "all";
+    const duration = durations[index] ?? durations.at(-1) ?? 0;
+    const delay = delays[index] ?? delays.at(-1) ?? 0;
+    if (duration + delay <= 0)
+      continue;
+    if (property === "all")
+      return null;
+    trackedProperties.add(property);
+  }
+  return trackedProperties;
+}
+function waitForTransitionCompletion({
+  element,
+  reducedMotion,
+  onComplete
+}) {
+  let completed = false;
+  let fallbackTimer;
+  const finish = () => {
+    if (completed)
+      return;
+    completed = true;
+    element.removeEventListener("transitionend", handleTransitionEnd);
+    element.removeEventListener("transitioncancel", finish);
+    if (fallbackTimer) {
+      clearTimeout(fallbackTimer);
+      fallbackTimer = undefined;
+    }
+    onComplete();
+  };
+  const handleTransitionEnd = (event) => {
+    if (event.target instanceof Element && event.target !== element)
+      return;
+    if (!pendingProperties) {
+      finish();
+      return;
+    }
+    pendingProperties.delete(event.propertyName);
+    if (pendingProperties.size === 0) {
+      finish();
+    }
+  };
+  const totalTransitionTime = reducedMotion ? 0 : getLongestTransitionTime(element);
+  const pendingProperties = reducedMotion ? new Set : getTrackedTransitionProperties(element);
+  if (totalTransitionTime <= 0) {
+    queueMicrotask(finish);
+    return finish;
+  }
+  element.addEventListener("transitionend", handleTransitionEnd);
+  element.addEventListener("transitioncancel", finish);
+  fallbackTimer = setTimeout(finish, totalTransitionTime + 50);
+  return finish;
+}
+
+// src/components/_internal/create-sliding-dialog-state.svelte.ts
+class SlidingDialogState {
+  hydrated = false;
+  renderPanel = false;
+  isClosing = false;
+  #options;
+  #closeGeneration = 0;
+  #capturedFocus = null;
+  #releaseScrollLock = null;
+  #releaseEscape = null;
+  #cancelPendingClose = null;
+  constructor(options) {
+    this.#options = options;
+    this.renderPanel = options.getOpen();
+  }
+  markHydrated() {
+    this.hydrated = true;
+  }
+  syncOpenState() {
+    const dialogElement = this.#options.getDialogElement();
+    if (!dialogElement)
+      return;
+    if (this.#options.getOpen()) {
+      if (this.isClosing) {
+        this.#closeGeneration += 1;
+        this.#cancelPendingClose?.();
+        this.#cancelPendingClose = null;
+        this.isClosing = false;
+      }
+      if (!this.renderPanel) {
+        this.renderPanel = true;
+      }
+      if (!dialogElement.open) {
+        this.#capturedFocus = captureFocus();
+        dialogElement.showModal();
+        this.#acquireScrollLock();
+        this.#acquireEscapeMarker();
+        this.#options.onOpen?.();
+      }
+      return;
+    }
+    if (dialogElement.open) {
+      this.beginClosing();
+    } else {
+      this.renderPanel = false;
+    }
+  }
+  beginClosing() {
+    const dialogElement = this.#options.getDialogElement();
+    if (!dialogElement?.open || this.isClosing)
+      return;
+    const panelElement = this.#options.getPanelElement();
+    if (!panelElement) {
+      this.#finishClosing(this.#closeGeneration);
+      return;
+    }
+    this.isClosing = true;
+    const generation = ++this.#closeGeneration;
+    this.#cancelPendingClose?.();
+    this.#cancelPendingClose = waitForTransitionCompletion({
+      element: panelElement,
+      reducedMotion: this.#options.getReducedMotion(),
+      onComplete: () => this.#finishClosing(generation)
+    });
+  }
+  handleClose() {
+    this.#releaseScrollLock?.();
+    this.#releaseScrollLock = null;
+    this.#releaseEscape?.();
+    this.#releaseEscape = null;
+    this.#options.setOpen(false);
+    this.#returnFocus();
+  }
+  requestClose() {
+    if (!this.#options.getOpen() && (this.isClosing || !this.#options.getDialogElement()?.open)) {
+      return;
+    }
+    this.#options.setOpen(false);
+    this.beginClosing();
+  }
+  handleBackdropClick(event) {
+    if (event.target === this.#options.getDialogElement()) {
+      this.requestClose();
+    }
+  }
+  handleNativeCancel(event) {
+    event.preventDefault();
+    this.requestClose();
+  }
+  destroy() {
+    this.#cancelPendingClose?.();
+    this.#cancelPendingClose = null;
+    const wasOpen = this.#releaseScrollLock !== null || this.#releaseEscape !== null;
+    this.#releaseScrollLock?.();
+    this.#releaseScrollLock = null;
+    this.#releaseEscape?.();
+    this.#releaseEscape = null;
+    if (wasOpen) {
+      this.#returnFocus();
+    }
+  }
+  #finishClosing(generation) {
+    if (generation !== this.#closeGeneration)
+      return;
+    this.#cancelPendingClose?.();
+    this.#cancelPendingClose = null;
+    this.isClosing = false;
+    if (this.#options.getOpen()) {
+      this.renderPanel = true;
+      return;
+    }
+    this.renderPanel = false;
+    this.#options.onClosed?.();
+    const dialogElement = this.#options.getDialogElement();
+    if (dialogElement?.open) {
+      dialogElement.close();
+    }
+  }
+  #acquireScrollLock() {
+    if (this.#releaseScrollLock)
+      return;
+    this.#releaseScrollLock = lockBodyScroll();
+  }
+  #acquireEscapeMarker() {
+    if (this.#releaseEscape)
+      return;
+    this.#releaseEscape = pushEscapeHandler(() => {});
+  }
+  #returnFocus() {
+    const candidates = [this.#options.getTriggerRef(), this.#capturedFocus];
+    this.#capturedFocus = null;
+    for (const candidate of candidates) {
+      if (restoreFocusTo(candidate))
+        break;
+    }
+  }
+}
+function createSlidingDialogState(options) {
+  return new SlidingDialogState(options);
+}
+
 // src/components/drawer/drawer.svelte
 function Drawer($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    const titleId = $2.props_id($$renderer2);
+    const titleId = $5.props_id($$renderer2);
     let {
       open = false,
       side = "right",
@@ -362,129 +702,49 @@ function Drawer($$renderer, $$props) {
       ...rest
     } = $$props;
     let dialogElement = undefined;
-    let bodyElement = undefined;
     let panelElement = undefined;
-    let hydrated = false;
-    let renderPanel = open;
-    let isClosing = false;
-    let closeGeneration = 0;
-    let pendingOpenFocus = false;
     let activeSide = side;
-    let capturedFocus = null;
-    let releaseScrollLock = null;
-    let releaseEscape = null;
-    let cancelPendingClose = null;
     const reducedMotion = useReducedMotion();
     const bodyOverflowFade = overflowFade();
-    function acquireScrollLock() {
-      if (releaseScrollLock)
-        return;
-      releaseScrollLock = lockBodyScroll();
-    }
-    function acquireEscapeMarker() {
-      if (releaseEscape)
-        return;
-      releaseEscape = pushEscapeHandler(() => {});
-    }
-    function beginClosing() {
-      if (!dialogElement?.open || isClosing)
-        return;
-      if (!panelElement) {
-        finishClosing(closeGeneration);
-        return;
-      }
-      isClosing = true;
-      const generation = ++closeGeneration;
-      cancelPendingClose?.();
-      cancelPendingClose = waitForTransitionCompletion({
-        element: panelElement,
-        reducedMotion: reducedMotion.current,
-        onComplete: () => finishClosing(generation)
-      });
-    }
-    function finishClosing(generation) {
-      if (generation !== closeGeneration)
-        return;
-      cancelPendingClose?.();
-      cancelPendingClose = null;
-      isClosing = false;
-      renderPanel = false;
-      pendingOpenFocus = false;
-      if (dialogElement?.open) {
-        dialogElement.close();
-      }
-    }
-    function handleClose() {
-      if (releaseScrollLock) {
-        releaseScrollLock();
-        releaseScrollLock = null;
-      }
-      if (releaseEscape) {
-        releaseEscape();
-        releaseEscape = null;
-      }
-      open = false;
-      returnFocus();
-    }
-    function requestClose() {
-      if (!open && (isClosing || !dialogElement?.open))
-        return;
-      open = false;
-      beginClosing();
-    }
-    function returnFocus() {
-      const candidates = [triggerRef, capturedFocus];
-      for (const candidate of candidates) {
-        if (restoreFocusTo(candidate))
-          break;
-      }
-      capturedFocus = null;
-    }
-    function handleNativeCancel(event) {
-      event.preventDefault();
-      requestClose();
-    }
-    function handleBackdropClick(event) {
-      if (event.target === dialogElement) {
-        requestClose();
-      }
+    const dialogState = createSlidingDialogState({
+      getOpen: () => open,
+      setOpen: (nextOpen) => {
+        open = nextOpen;
+      },
+      getDialogElement: () => dialogElement,
+      getPanelElement: () => panelElement,
+      getReducedMotion: () => reducedMotion.current,
+      getTriggerRef: () => triggerRef
+    });
+    function resolveInitialFocus() {
+      if (!dialogElement)
+        return null;
+      const explicitlyAutofocused = dialogElement.querySelector("[autofocus]") ?? Array.from(dialogElement.querySelectorAll("*")).find((element) => element.autofocus === true) ?? null;
+      return explicitlyAutofocused;
     }
     onDestroy(() => {
-      cancelPendingClose?.();
-      cancelPendingClose = null;
-      const wasOpen = releaseScrollLock !== null || releaseEscape !== null;
-      if (releaseScrollLock) {
-        releaseScrollLock();
-        releaseScrollLock = null;
-      }
-      if (releaseEscape) {
-        releaseEscape();
-        releaseEscape = null;
-      }
-      if (wasOpen) {
-        returnFocus();
-      }
+      dialogState.destroy();
     });
-    if (hydrated) {
+    if (dialogState.hydrated) {
       let closeButton = function($$renderer3) {
         $$renderer3.push(`<button type="button" class="cinder-drawer__close" aria-label="Close drawer"><svg class="cinder-drawer__close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path></svg></button>`);
       };
       $$renderer2.push("<!--[0-->");
-      $$renderer2.push(`<dialog${$2.attributes({
+      $$renderer2.push(`<dialog${$5.attributes({
         ...rest,
-        class: $2.clsx(classNames("cinder-drawer", className)),
+        class: $5.clsx(classNames("cinder-drawer", className)),
         "aria-modal": "true",
         "aria-labelledby": ariaLabelledBy ?? titleId,
-        "data-cinder-closing": isClosing ? "" : undefined
+        "data-cinder-closing": dialogState.isClosing ? "" : undefined
       })}>`);
-      if (renderPanel) {
+      if (dialogState.renderPanel) {
         $$renderer2.push("<!--[0-->");
-        $$renderer2.push(`<div class="cinder-drawer__panel"${$2.attr("data-cinder-side", activeSide)}${$2.attr("data-cinder-size", size)}${$2.attr("data-cinder-closing", isClosing ? "" : undefined)}${$2.attr("inert", isClosing, true)}><header class="cinder-drawer__header">`);
+        $$renderer2.push(`<div class="cinder-drawer__panel"${$5.attr("data-cinder-side", activeSide)}${$5.attr("data-cinder-size", size)}${$5.attr("data-cinder-closing", dialogState.isClosing ? "" : undefined)}${$5.attr("inert", dialogState.isClosing, true)}><header class="cinder-drawer__header">`);
         if (header) {
           $$renderer2.push("<!--[0-->");
           if (!ariaLabelledBy) {
             $$renderer2.push("<!--[0-->");
-            $$renderer2.push(`<h2${$2.attr("id", titleId)} class="cinder-sr-only">${$2.escape(title)}</h2>`);
+            $$renderer2.push(`<h2${$5.attr("id", titleId)} class="cinder-sr-only">${$5.escape(title)}</h2>`);
           } else {
             $$renderer2.push("<!--[-1-->");
           }
@@ -493,7 +753,7 @@ function Drawer($$renderer, $$props) {
           $$renderer2.push(`<!---->`);
         } else {
           $$renderer2.push("<!--[-1-->");
-          $$renderer2.push(`<h2${$2.attr("id", titleId)} class="cinder-drawer__title">${$2.escape(title)}</h2>`);
+          $$renderer2.push(`<h2${$5.attr("id", titleId)} class="cinder-drawer__title">${$5.escape(title)}</h2>`);
         }
         $$renderer2.push(`<!--]--> `);
         closeButton($$renderer2);
@@ -517,7 +777,7 @@ function Drawer($$renderer, $$props) {
       $$renderer2.push("<!--[-1-->");
     }
     $$renderer2.push(`<!--]-->`);
-    $2.bind_props($$props, { open });
+    $5.bind_props($$props, { open });
   });
 }
 
@@ -527,7 +787,7 @@ function Sidebar($$renderer, $$props) {
     let {
       id: sidebarId,
       collapsed = false,
-      ariaLabel = "Sidebar",
+      label = "Sidebar",
       class: className,
       brand: brandSnippet,
       navigation: navigationSnippet,
@@ -538,13 +798,13 @@ function Sidebar($$renderer, $$props) {
       $$events,
       ...rest
     } = $$props;
-    const validatedLabel = $3.derived(() => {
-      if (ariaLabel.trim() === "") {
-        throw new Error("Sidebar requires a non-empty ariaLabel.");
+    const validatedLabel = $6.derived(() => {
+      if (label.trim() === "") {
+        throw new Error("Sidebar requires a non-empty label.");
       }
-      return ariaLabel;
+      return label;
     });
-    const navigationLabel = $3.derived(() => `${validatedLabel()} navigation`);
+    const navigationLabel = $6.derived(() => `${validatedLabel()} navigation`);
     const mobile = new MediaQuery2("(max-width: 47.99rem)", false);
     const context = {
       get collapsed() {
@@ -561,7 +821,7 @@ function Sidebar($$renderer, $$props) {
         var bind_set = (value) => {
           collapsed = !value;
         };
-        Drawer($$renderer3, $3.spread_props([
+        Drawer($$renderer3, $6.spread_props([
           rest,
           {
             get open() {
@@ -575,7 +835,7 @@ function Sidebar($$renderer, $$props) {
             title: validatedLabel(),
             id: sidebarId,
             children: ($$renderer4) => {
-              $$renderer4.push(`<div${$3.attr_class($3.clsx(classNames("cinder-sidebar", "cinder-sidebar--mobile", className)))}>`);
+              $$renderer4.push(`<div${$6.attr_class($6.clsx(classNames("cinder-sidebar", "cinder-sidebar--mobile", className)))}>`);
               if (brandSnippet) {
                 $$renderer4.push("<!--[0-->");
                 $$renderer4.push(`<div class="cinder-sidebar__brand">`);
@@ -587,7 +847,7 @@ function Sidebar($$renderer, $$props) {
               $$renderer4.push(`<!--]--> `);
               if (navigationSnippet) {
                 $$renderer4.push("<!--[0-->");
-                $$renderer4.push(`<nav class="cinder-sidebar__nav"${$3.attr("aria-label", navigationLabel())}>`);
+                $$renderer4.push(`<nav class="cinder-sidebar__nav"${$6.attr("aria-label", navigationLabel())}>`);
                 navigationSnippet($$renderer4);
                 $$renderer4.push(`<!----></nav>`);
               } else {
@@ -609,10 +869,10 @@ function Sidebar($$renderer, $$props) {
         ]));
       } else {
         $$renderer3.push("<!--[-1-->");
-        $$renderer3.push(`<aside${$3.attributes({
+        $$renderer3.push(`<aside${$6.attributes({
           id: sidebarId,
           ...rest,
-          class: $3.clsx(classNames("cinder-sidebar", className)),
+          class: $6.clsx(classNames("cinder-sidebar", className)),
           "aria-label": validatedLabel(),
           "data-cinder-collapsed": collapsed ? "" : undefined
         })}>`);
@@ -627,7 +887,7 @@ function Sidebar($$renderer, $$props) {
         $$renderer3.push(`<!--]--> `);
         if (navigationSnippet) {
           $$renderer3.push("<!--[0-->");
-          $$renderer3.push(`<nav class="cinder-sidebar__nav"${$3.attr("aria-label", navigationLabel())}>`);
+          $$renderer3.push(`<nav class="cinder-sidebar__nav"${$6.attr("aria-label", navigationLabel())}>`);
           navigationSnippet($$renderer3);
           $$renderer3.push(`<!----></nav>`);
         } else {
@@ -652,7 +912,7 @@ function Sidebar($$renderer, $$props) {
       $$render_inner($$inner_renderer);
     } while (!$$settled);
     $$renderer2.subsume($$inner_renderer);
-    $3.bind_props($$props, { collapsed });
+    $6.bind_props($$props, { collapsed });
   });
 }
 
@@ -663,4 +923,4 @@ export {
   Sidebar
 };
 
-//# debugId=70F26CCE0FA1105664756E2164756E21
+//# debugId=A53706D277FCC95C64756E2164756E21