@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/sheet/index.js

@@ -289,7 +289,7 @@ import"@lostgradient/cinder/sheet/styles";
 
 // src/components/sheet/sheet.svelte
 import"svelte/internal/disclose-version";
-import * as $4 from "svelte/internal/client";
+import * as $5 from "svelte/internal/client";
 import { onDestroy, tick } from "svelte";
 
 // src/_internal/overlay.ts
@@ -352,91 +352,6 @@ 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 createBodyScrollLock() {
   return () => {
@@ -444,6 +359,10 @@ function createBodyScrollLock() {
     return release;
   };
 }
+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) => {
@@ -451,17 +370,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;
         }
       }
@@ -555,316 +476,460 @@ function useReducedMotion() {
   };
 }
 
-// src/components/sheet/sheet.svelte
-var root_2 = $4.from_html(`<button type="button" class="cinder-sheet__close" aria-label="Close sheet"><svg class="cinder-sheet__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>`);
-var root_4 = $4.from_html(`<div class="cinder-sheet__drag-handle" aria-hidden="true"><span class="cinder-sheet__drag-handle-pill"></span></div>`);
-var root_6 = $4.from_html(`<h2 class="cinder-sr-only"> </h2>`);
-var root_5 = $4.from_html(`<!> <!>`, 1);
-var root_7 = $4.from_html(`<h2 class="cinder-sheet__title"> </h2>`);
-var root_8 = $4.from_html(`<div class="cinder-sheet__footer"><!></div>`);
-var root_3 = $4.from_html(`<div class="cinder-sheet__panel"><!> <header class="cinder-sheet__header"><!> <!></header> <div class="cinder-sheet__body" tabindex="-1"><!></div> <!></div>`);
-var root_1 = $4.from_html(`<dialog><!></dialog>`);
-function Sheet($$anchor, $$props) {
-  const titleId = $4.props_id();
-  $4.push($$props, true);
-  let open = $4.prop($$props, "open", 15, false), triggerRef = $4.prop($$props, "triggerRef", 3, null), showDragHandle = $4.prop($$props, "showDragHandle", 3, false), rest = $4.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "open",
-    "title",
-    "class",
-    "triggerRef",
-    "ariaLabelledBy",
-    "showDragHandle",
-    "header",
-    "children",
-    "footer"
-  ]);
-  let dialogElement = $4.state(undefined);
-  let bodyElement = $4.state(undefined);
-  let panelElement = $4.state(undefined);
-  let hydrated = $4.state(false);
-  let renderPanel = $4.state($4.proxy(open()));
-  let isClosing = $4.state(false);
-  let closeGeneration = $4.state(0);
-  let pendingOpenFocus = $4.state(false);
-  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();
+// src/components/_internal/create-sliding-dialog-state.svelte.ts
+import * as $4 from "svelte/internal/client";
+
+// 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);
   }
-  function acquireEscapeMarker() {
-    if (releaseEscape)
+  return trackedProperties;
+}
+function waitForTransitionCompletion({
+  element,
+  reducedMotion,
+  onComplete
+}) {
+  let completed = false;
+  let fallbackTimer;
+  const finish = () => {
+    if (completed)
       return;
-    releaseEscape = pushEscapeHandler(() => {});
+    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;
   }
-  $4.user_effect(() => {
-    $4.set(hydrated, true);
-  });
-  $4.user_effect(() => {
-    if (!$4.get(dialogElement))
+  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 = $4.state(false);
+  get hydrated() {
+    return $4.get(this.#hydrated);
+  }
+  set hydrated(value) {
+    $4.set(this.#hydrated, value, true);
+  }
+  #renderPanel = $4.state(false);
+  get renderPanel() {
+    return $4.get(this.#renderPanel);
+  }
+  set renderPanel(value) {
+    $4.set(this.#renderPanel, value, true);
+  }
+  #isClosing = $4.state(false);
+  get isClosing() {
+    return $4.get(this.#isClosing);
+  }
+  set isClosing(value) {
+    $4.set(this.#isClosing, value, true);
+  }
+  #options;
+  #closeGeneration = $4.state(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 (open()) {
-      if ($4.get(isClosing)) {
-        $4.set(closeGeneration, $4.get(closeGeneration) + 1);
-        cancelPendingClose?.();
-        cancelPendingClose = null;
-        $4.set(isClosing, false);
+    if (this.#options.getOpen()) {
+      if (this.isClosing) {
+        $4.set(this.#closeGeneration, $4.get(this.#closeGeneration) + 1);
+        this.#cancelPendingClose?.();
+        this.#cancelPendingClose = null;
+        this.isClosing = false;
       }
-      if (!$4.get(renderPanel)) {
-        $4.set(renderPanel, true);
+      if (!this.renderPanel) {
+        this.renderPanel = true;
       }
-      if (!$4.get(dialogElement).open) {
-        capturedFocus = captureFocus();
-        $4.set(pendingOpenFocus, true);
-        $4.get(dialogElement).showModal();
-        acquireScrollLock();
-        acquireEscapeMarker();
+      if (!dialogElement.open) {
+        this.#capturedFocus = captureFocus();
+        dialogElement.showModal();
+        this.#acquireScrollLock();
+        this.#acquireEscapeMarker();
+        this.#options.onOpen?.();
       }
       return;
     }
-    if ($4.get(dialogElement).open) {
-      beginClosing();
+    if (dialogElement.open) {
+      this.beginClosing();
     } else {
-      $4.set(renderPanel, false);
-      $4.set(pendingOpenFocus, false);
+      this.renderPanel = false;
     }
-  });
-  $4.user_effect(() => {
-    if (!$4.get(pendingOpenFocus) || !$4.get(dialogElement)?.open)
-      return;
-    $4.set(pendingOpenFocus, false);
-    tick().then(() => {
-      if (!open() || !$4.get(dialogElement)?.open)
-        return;
-      const hasExplicitAutofocus = $4.get(dialogElement).querySelector("[autofocus]") !== null || Array.from($4.get(dialogElement).querySelectorAll("*")).some((element) => element.autofocus === true);
-      if (!hasExplicitAutofocus && $4.get(bodyElement)) {
-        $4.get(bodyElement).focus();
-      }
-    });
-  });
-  function beginClosing() {
-    if (!$4.get(dialogElement)?.open || $4.get(isClosing))
+  }
+  beginClosing() {
+    const dialogElement = this.#options.getDialogElement();
+    if (!dialogElement?.open || this.isClosing)
       return;
-    if (!$4.get(panelElement)) {
-      finishClosing($4.get(closeGeneration));
+    const panelElement = this.#options.getPanelElement();
+    if (!panelElement) {
+      this.#finishClosing($4.get(this.#closeGeneration));
       return;
     }
-    $4.set(isClosing, true);
-    const generation = $4.update_pre(closeGeneration);
-    cancelPendingClose?.();
-    cancelPendingClose = waitForTransitionCompletion({
-      element: $4.get(panelElement),
-      reducedMotion: reducedMotion.current,
-      onComplete: () => finishClosing(generation)
+    this.isClosing = true;
+    const generation = $4.update_pre(this.#closeGeneration);
+    this.#cancelPendingClose?.();
+    this.#cancelPendingClose = waitForTransitionCompletion({
+      element: panelElement,
+      reducedMotion: this.#options.getReducedMotion(),
+      onComplete: () => this.#finishClosing(generation)
     });
   }
-  function finishClosing(generation) {
-    if (generation !== $4.get(closeGeneration))
+  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;
-    cancelPendingClose?.();
-    cancelPendingClose = null;
-    $4.set(isClosing, false);
-    $4.set(renderPanel, false);
-    $4.set(pendingOpenFocus, false);
-    if ($4.get(dialogElement)?.open) {
-      $4.get(dialogElement).close();
     }
+    this.#options.setOpen(false);
+    this.beginClosing();
   }
-  function handleClose() {
-    if (releaseScrollLock) {
-      releaseScrollLock();
-      releaseScrollLock = null;
+  handleBackdropClick(event) {
+    if (event.target === this.#options.getDialogElement()) {
+      this.requestClose();
     }
-    if (releaseEscape) {
-      releaseEscape();
-      releaseEscape = null;
-    }
-    open(false);
-    const candidates = [triggerRef(), capturedFocus];
-    capturedFocus = null;
-    for (const candidate of candidates) {
-      if (restoreFocusTo(candidate))
-        break;
+  }
+  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();
     }
   }
-  function requestClose() {
-    if (!open() && ($4.get(isClosing) || !$4.get(dialogElement)?.open))
+  #finishClosing(generation) {
+    if (generation !== $4.get(this.#closeGeneration))
+      return;
+    this.#cancelPendingClose?.();
+    this.#cancelPendingClose = null;
+    this.isClosing = false;
+    if (this.#options.getOpen()) {
+      this.renderPanel = true;
       return;
-    open(false);
-    beginClosing();
-  }
-  function handleBackdropClick(event) {
-    if (event.target === $4.get(dialogElement)) {
-      requestClose();
+    }
+    this.renderPanel = false;
+    this.#options.onClosed?.();
+    const dialogElement = this.#options.getDialogElement();
+    if (dialogElement?.open) {
+      dialogElement.close();
     }
   }
-  function handleNativeCancel(event) {
-    event.preventDefault();
-    requestClose();
+  #acquireScrollLock() {
+    if (this.#releaseScrollLock)
+      return;
+    this.#releaseScrollLock = lockBodyScroll();
   }
-  onDestroy(() => {
-    cancelPendingClose?.();
-    cancelPendingClose = null;
-    const wasOpen = releaseScrollLock !== null || releaseEscape !== null;
-    if (releaseScrollLock) {
-      releaseScrollLock();
-      releaseScrollLock = null;
+  #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;
     }
-    if (releaseEscape) {
-      releaseEscape();
-      releaseEscape = null;
+  }
+}
+function createSlidingDialogState(options) {
+  return new SlidingDialogState(options);
+}
+
+// src/components/sheet/sheet.svelte
+var root_2 = $5.from_html(`<button type="button" class="cinder-sheet__close" aria-label="Close sheet"><svg class="cinder-sheet__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>`);
+var root_4 = $5.from_html(`<div class="cinder-sheet__drag-handle" aria-hidden="true"><span class="cinder-sheet__drag-handle-pill"></span></div>`);
+var root_6 = $5.from_html(`<h2 class="cinder-sr-only"> </h2>`);
+var root_5 = $5.from_html(`<!> <!>`, 1);
+var root_7 = $5.from_html(`<h2 class="cinder-sheet__title"> </h2>`);
+var root_8 = $5.from_html(`<div class="cinder-sheet__footer"><!></div>`);
+var root_3 = $5.from_html(`<div class="cinder-sheet__panel"><!> <header class="cinder-sheet__header"><!> <!></header> <div class="cinder-sheet__body" tabindex="-1"><!></div> <!></div>`);
+var root_1 = $5.from_html(`<dialog><!></dialog>`);
+function Sheet($$anchor, $$props) {
+  const titleId = $5.props_id();
+  $5.push($$props, true);
+  let open = $5.prop($$props, "open", 15, false), triggerRef = $5.prop($$props, "triggerRef", 3, null), showDragHandle = $5.prop($$props, "showDragHandle", 3, false), rest = $5.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "open",
+    "title",
+    "class",
+    "triggerRef",
+    "ariaLabelledBy",
+    "showDragHandle",
+    "header",
+    "children",
+    "footer"
+  ]);
+  let dialogElement = $5.state(undefined);
+  let bodyElement = $5.state(undefined);
+  let panelElement = $5.state(undefined);
+  let pendingOpenFocus = $5.state(false);
+  const reducedMotion = useReducedMotion();
+  const bodyOverflowFade = overflowFade();
+  const dialogState = createSlidingDialogState({
+    getOpen: () => open(),
+    setOpen: (nextOpen) => {
+      open(nextOpen);
+    },
+    getDialogElement: () => $5.get(dialogElement),
+    getPanelElement: () => $5.get(panelElement),
+    getReducedMotion: () => reducedMotion.current,
+    getTriggerRef: () => triggerRef(),
+    onOpen: () => {
+      $5.set(pendingOpenFocus, true);
+    },
+    onClosed: () => {
+      $5.set(pendingOpenFocus, false);
     }
-    if (wasOpen) {
-      const candidates = [triggerRef(), capturedFocus];
-      capturedFocus = null;
-      for (const candidate of candidates) {
-        if (restoreFocusTo(candidate))
-          break;
+  });
+  $5.user_effect(() => {
+    dialogState.markHydrated();
+  });
+  $5.user_effect(() => {
+    dialogState.syncOpenState();
+  });
+  $5.user_effect(() => {
+    if (!$5.get(pendingOpenFocus) || !$5.get(dialogElement)?.open)
+      return;
+    $5.set(pendingOpenFocus, false);
+    tick().then(() => {
+      if (!open() || !$5.get(dialogElement)?.open)
+        return;
+      const hasExplicitAutofocus = $5.get(dialogElement).querySelector("[autofocus]") !== null || Array.from($5.get(dialogElement).querySelectorAll("*")).some((element) => element.autofocus === true);
+      if (!hasExplicitAutofocus && $5.get(bodyElement)) {
+        $5.get(bodyElement).focus();
       }
-    }
+    });
+  });
+  onDestroy(() => {
+    dialogState.destroy();
   });
-  var fragment = $4.comment();
-  var node = $4.first_child(fragment);
+  var fragment = $5.comment();
+  var node = $5.first_child(fragment);
   {
     var consequent_5 = ($$anchor2) => {
       var dialog = root_1();
-      $4.attribute_effect(dialog, ($0) => ({
+      var event_handler = () => dialogState.handleClose();
+      var event_handler_1 = (event) => dialogState.handleNativeCancel(event);
+      var event_handler_2 = (event) => dialogState.handleBackdropClick(event);
+      $5.attribute_effect(dialog, ($0) => ({
         ...rest,
         class: $0,
         "aria-modal": "true",
         "aria-labelledby": $$props.ariaLabelledBy ?? titleId,
-        "data-cinder-closing": $4.get(isClosing) ? "" : undefined,
-        onclose: handleClose,
-        oncancel: handleNativeCancel,
-        onclick: handleBackdropClick
+        "data-cinder-closing": dialogState.isClosing ? "" : undefined,
+        onclose: event_handler,
+        oncancel: event_handler_1,
+        onclick: event_handler_2
       }), [() => classNames("cinder-sheet", $$props.class)]);
       {
         const closeButton = ($$anchor3) => {
           var button = root_2();
-          $4.delegated("click", button, requestClose);
-          $4.append($$anchor3, button);
+          $5.delegated("click", button, () => dialogState.requestClose());
+          $5.append($$anchor3, button);
         };
-        var node_1 = $4.child(dialog);
+        var node_1 = $5.child(dialog);
         {
           var consequent_4 = ($$anchor3) => {
             var div = root_3();
-            var node_2 = $4.child(div);
+            var node_2 = $5.child(div);
             {
               var consequent = ($$anchor4) => {
                 var div_1 = root_4();
-                $4.append($$anchor4, div_1);
+                $5.append($$anchor4, div_1);
               };
-              $4.if(node_2, ($$render) => {
+              $5.if(node_2, ($$render) => {
                 if (showDragHandle())
                   $$render(consequent);
               });
             }
-            var header_1 = $4.sibling(node_2, 2);
-            var node_3 = $4.child(header_1);
+            var header_1 = $5.sibling(node_2, 2);
+            var node_3 = $5.child(header_1);
             {
               var consequent_2 = ($$anchor4) => {
                 var fragment_1 = root_5();
-                var node_4 = $4.first_child(fragment_1);
+                var node_4 = $5.first_child(fragment_1);
                 {
                   var consequent_1 = ($$anchor5) => {
                     var h2 = root_6();
-                    var text = $4.child(h2, true);
-                    $4.reset(h2);
-                    $4.template_effect(() => {
-                      $4.set_attribute(h2, "id", titleId);
-                      $4.set_text(text, $$props.title);
+                    var text = $5.child(h2, true);
+                    $5.reset(h2);
+                    $5.template_effect(() => {
+                      $5.set_attribute(h2, "id", titleId);
+                      $5.set_text(text, $$props.title);
                     });
-                    $4.append($$anchor5, h2);
+                    $5.append($$anchor5, h2);
                   };
-                  $4.if(node_4, ($$render) => {
+                  $5.if(node_4, ($$render) => {
                     if (!$$props.ariaLabelledBy)
                       $$render(consequent_1);
                   });
                 }
-                var node_5 = $4.sibling(node_4, 2);
-                $4.snippet(node_5, () => $$props.header);
-                $4.append($$anchor4, fragment_1);
+                var node_5 = $5.sibling(node_4, 2);
+                $5.snippet(node_5, () => $$props.header);
+                $5.append($$anchor4, fragment_1);
               };
               var alternate = ($$anchor4) => {
                 var h2_1 = root_7();
-                var text_1 = $4.child(h2_1, true);
-                $4.reset(h2_1);
-                $4.template_effect(() => {
-                  $4.set_attribute(h2_1, "id", titleId);
-                  $4.set_text(text_1, $$props.title);
+                var text_1 = $5.child(h2_1, true);
+                $5.reset(h2_1);
+                $5.template_effect(() => {
+                  $5.set_attribute(h2_1, "id", titleId);
+                  $5.set_text(text_1, $$props.title);
                 });
-                $4.append($$anchor4, h2_1);
+                $5.append($$anchor4, h2_1);
               };
-              $4.if(node_3, ($$render) => {
+              $5.if(node_3, ($$render) => {
                 if ($$props.header)
                   $$render(consequent_2);
                 else
                   $$render(alternate, -1);
               });
             }
-            var node_6 = $4.sibling(node_3, 2);
+            var node_6 = $5.sibling(node_3, 2);
             closeButton(node_6);
-            $4.reset(header_1);
-            var div_2 = $4.sibling(header_1, 2);
-            var node_7 = $4.child(div_2);
-            $4.snippet(node_7, () => $$props.children);
-            $4.reset(div_2);
-            $4.bind_this(div_2, ($$value) => $4.set(bodyElement, $$value), () => $4.get(bodyElement));
-            $4.attach(div_2, () => bodyOverflowFade);
-            var node_8 = $4.sibling(div_2, 2);
+            $5.reset(header_1);
+            var div_2 = $5.sibling(header_1, 2);
+            var node_7 = $5.child(div_2);
+            $5.snippet(node_7, () => $$props.children);
+            $5.reset(div_2);
+            $5.bind_this(div_2, ($$value) => $5.set(bodyElement, $$value), () => $5.get(bodyElement));
+            $5.attach(div_2, () => bodyOverflowFade);
+            var node_8 = $5.sibling(div_2, 2);
             {
               var consequent_3 = ($$anchor4) => {
                 var div_3 = root_8();
-                var node_9 = $4.child(div_3);
-                $4.snippet(node_9, () => $$props.footer);
-                $4.reset(div_3);
-                $4.append($$anchor4, div_3);
+                var node_9 = $5.child(div_3);
+                $5.snippet(node_9, () => $$props.footer);
+                $5.reset(div_3);
+                $5.append($$anchor4, div_3);
               };
-              $4.if(node_8, ($$render) => {
+              $5.if(node_8, ($$render) => {
                 if ($$props.footer)
                   $$render(consequent_3);
               });
             }
-            $4.reset(div);
-            $4.bind_this(div, ($$value) => $4.set(panelElement, $$value), () => $4.get(panelElement));
-            $4.attach(div, () => createFocusTrap({
-              active: () => open() && !$4.get(isClosing),
+            $5.reset(div);
+            $5.bind_this(div, ($$value) => $5.set(panelElement, $$value), () => $5.get(panelElement));
+            $5.attach(div, () => createFocusTrap({
+              active: () => open() && !dialogState.isClosing,
               restoreFocus: false,
               manageInitialFocus: false
             }));
-            $4.template_effect(() => {
-              $4.set_attribute(div, "data-cinder-closing", $4.get(isClosing) ? "" : undefined);
-              div.inert = $4.get(isClosing);
+            $5.template_effect(() => {
+              $5.set_attribute(div, "data-cinder-closing", dialogState.isClosing ? "" : undefined);
+              div.inert = dialogState.isClosing;
             });
-            $4.append($$anchor3, div);
+            $5.append($$anchor3, div);
           };
-          $4.if(node_1, ($$render) => {
-            if ($4.get(renderPanel))
+          $5.if(node_1, ($$render) => {
+            if (dialogState.renderPanel)
               $$render(consequent_4);
           });
         }
-        $4.reset(dialog);
-        $4.bind_this(dialog, ($$value) => $4.set(dialogElement, $$value), () => $4.get(dialogElement));
+        $5.reset(dialog);
+        $5.bind_this(dialog, ($$value) => $5.set(dialogElement, $$value), () => $5.get(dialogElement));
       }
-      $4.append($$anchor2, dialog);
+      $5.append($$anchor2, dialog);
     };
-    $4.if(node, ($$render) => {
-      if ($4.get(hydrated))
+    $5.if(node, ($$render) => {
+      if (dialogState.hydrated)
         $$render(consequent_5);
     });
   }
-  $4.append($$anchor, fragment);
-  $4.pop();
+  $5.append($$anchor, fragment);
+  $5.pop();
 }
-$4.delegate(["click"]);
+$5.delegate(["click"]);
 
 // src/components/sheet/index.ts
 var sheet_default = Sheet;
@@ -873,4 +938,4 @@ export {
   Sheet
 };
 
-//# debugId=1A1C21D23211891564756E2164756E21
+//# debugId=CE2DEE8569984CA864756E2164756E21