@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/sidebar/index.js

@@ -289,7 +289,7 @@ import"@lostgradient/cinder/sidebar/styles";
 
 // src/components/sidebar/sidebar.svelte
 import"svelte/internal/disclose-version";
-import * as $5 from "svelte/internal/client";
+import * as $6 from "svelte/internal/client";
 import { MediaQuery as MediaQuery2 } from "svelte/reactivity";
 
 // src/_internal/sidebar-context.ts
@@ -315,7 +315,7 @@ var getSidebarContext = optionalContext(getSidebarContextStrict);
 
 // src/components/drawer/drawer.svelte
 import"svelte/internal/disclose-version";
-import * as $4 from "svelte/internal/client";
+import * as $5 from "svelte/internal/client";
 import { onDestroy } from "svelte";
 
 // src/_internal/overlay.ts
@@ -378,91 +378,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 () => {
@@ -470,6 +385,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) => {
@@ -477,17 +396,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;
         }
       }
@@ -581,314 +502,463 @@ function useReducedMotion() {
   };
 }
 
-// src/components/drawer/drawer.svelte
-var root_2 = $4.from_html(`<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>`);
-var root_5 = $4.from_html(`<h2 class="cinder-sr-only"> </h2>`);
-var root_4 = $4.from_html(`<!> <!>`, 1);
-var root_6 = $4.from_html(`<h2 class="cinder-drawer__title"> </h2>`);
-var root_7 = $4.from_html(`<div class="cinder-drawer__footer"><!></div>`);
-var root_3 = $4.from_html(`<div class="cinder-drawer__panel"><header class="cinder-drawer__header"><!> <!></header> <div class="cinder-drawer__body" tabindex="-1"><!></div> <!></div>`);
-var root_1 = $4.from_html(`<dialog><!></dialog>`);
-function Drawer($$anchor, $$props) {
-  const titleId = $4.props_id();
-  $4.push($$props, true);
-  let open = $4.prop($$props, "open", 15, false), side = $4.prop($$props, "side", 3, "right"), size = $4.prop($$props, "size", 3, "md"), triggerRef = $4.prop($$props, "triggerRef", 3, null), rest = $4.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "open",
-    "side",
-    "size",
-    "title",
-    "class",
-    "triggerRef",
-    "ariaLabelledBy",
-    "header",
-    "children",
-    "footer"
-  ]);
-  let dialogElement = $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 activeSide = $4.state($4.proxy(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();
+// 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);
   }
-  function acquireEscapeMarker() {
-    if (releaseEscape)
+  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;
-    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(activeSide, side());
-        $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(activeSide, side());
-        $4.set(renderPanel, true);
+      if (!this.renderPanel) {
+        this.renderPanel = true;
       }
-      if (!$4.get(dialogElement).open) {
-        capturedFocus = captureFocus();
-        $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);
+      this.renderPanel = false;
     }
-  });
-  function resolveInitialFocus() {
-    if (!$4.get(dialogElement))
-      return null;
-    const explicitlyAutofocused = $4.get(dialogElement).querySelector("[autofocus]") ?? Array.from($4.get(dialogElement).querySelectorAll("*")).find((element) => element.autofocus === true) ?? null;
-    return explicitlyAutofocused;
   }
-  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);
-    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;
+  }
+  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 !== $4.get(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();
     }
-    open(false);
-    returnFocus();
   }
-  function requestClose() {
-    if (!open() && ($4.get(isClosing) || !$4.get(dialogElement)?.open))
+  #acquireScrollLock() {
+    if (this.#releaseScrollLock)
       return;
-    open(false);
-    beginClosing();
+    this.#releaseScrollLock = lockBodyScroll();
   }
-  function returnFocus() {
-    const candidates = [triggerRef(), capturedFocus];
+  #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;
     }
-    capturedFocus = null;
-  }
-  function handleNativeCancel(event) {
-    event.preventDefault();
-    requestClose();
   }
-  function handleBackdropClick(event) {
-    if (event.target === $4.get(dialogElement)) {
-      requestClose();
+}
+function createSlidingDialogState(options) {
+  return new SlidingDialogState(options);
+}
+
+// src/components/drawer/drawer.svelte
+var root_2 = $5.from_html(`<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>`);
+var root_5 = $5.from_html(`<h2 class="cinder-sr-only"> </h2>`);
+var root_4 = $5.from_html(`<!> <!>`, 1);
+var root_6 = $5.from_html(`<h2 class="cinder-drawer__title"> </h2>`);
+var root_7 = $5.from_html(`<div class="cinder-drawer__footer"><!></div>`);
+var root_3 = $5.from_html(`<div class="cinder-drawer__panel"><header class="cinder-drawer__header"><!> <!></header> <div class="cinder-drawer__body" tabindex="-1"><!></div> <!></div>`);
+var root_1 = $5.from_html(`<dialog><!></dialog>`);
+function Drawer($$anchor, $$props) {
+  const titleId = $5.props_id();
+  $5.push($$props, true);
+  let open = $5.prop($$props, "open", 15, false), side = $5.prop($$props, "side", 3, "right"), size = $5.prop($$props, "size", 3, "md"), triggerRef = $5.prop($$props, "triggerRef", 3, null), rest = $5.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "open",
+    "side",
+    "size",
+    "title",
+    "class",
+    "triggerRef",
+    "ariaLabelledBy",
+    "header",
+    "children",
+    "footer"
+  ]);
+  let dialogElement = $5.state(undefined);
+  let panelElement = $5.state(undefined);
+  let activeSide = $5.state($5.proxy(side()));
+  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()
+  });
+  $5.user_effect(() => {
+    dialogState.markHydrated();
+  });
+  $5.user_effect(() => {
+    if (open()) {
+      if (dialogState.isClosing) {
+        $5.set(activeSide, side());
+      }
+      if (!dialogState.renderPanel) {
+        $5.set(activeSide, side());
+      }
     }
+    dialogState.syncOpenState();
+  });
+  function resolveInitialFocus() {
+    if (!$5.get(dialogElement))
+      return null;
+    const explicitlyAutofocused = $5.get(dialogElement).querySelector("[autofocus]") ?? Array.from($5.get(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();
   });
-  var fragment = $4.comment();
-  var node = $4.first_child(fragment);
+  var fragment = $5.comment();
+  var node = $5.first_child(fragment);
   {
     var consequent_4 = ($$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-drawer", $$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_3 = ($$anchor3) => {
             var div = root_3();
-            var header_1 = $4.child(div);
-            var node_2 = $4.child(header_1);
+            var header_1 = $5.child(div);
+            var node_2 = $5.child(header_1);
             {
               var consequent_1 = ($$anchor4) => {
                 var fragment_1 = root_4();
-                var node_3 = $4.first_child(fragment_1);
+                var node_3 = $5.first_child(fragment_1);
                 {
                   var consequent = ($$anchor5) => {
                     var h2 = root_5();
-                    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_3, ($$render) => {
+                  $5.if(node_3, ($$render) => {
                     if (!$$props.ariaLabelledBy)
                       $$render(consequent);
                   });
                 }
-                var node_4 = $4.sibling(node_3, 2);
-                $4.snippet(node_4, () => $$props.header);
-                $4.append($$anchor4, fragment_1);
+                var node_4 = $5.sibling(node_3, 2);
+                $5.snippet(node_4, () => $$props.header);
+                $5.append($$anchor4, fragment_1);
               };
               var alternate = ($$anchor4) => {
                 var h2_1 = root_6();
-                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_2, ($$render) => {
+              $5.if(node_2, ($$render) => {
                 if ($$props.header)
                   $$render(consequent_1);
                 else
                   $$render(alternate, -1);
               });
             }
-            var node_5 = $4.sibling(node_2, 2);
+            var node_5 = $5.sibling(node_2, 2);
             closeButton(node_5);
-            $4.reset(header_1);
-            var div_1 = $4.sibling(header_1, 2);
-            var node_6 = $4.child(div_1);
-            $4.snippet(node_6, () => $$props.children);
-            $4.reset(div_1);
-            $4.attach(div_1, () => bodyOverflowFade);
-            var node_7 = $4.sibling(div_1, 2);
+            $5.reset(header_1);
+            var div_1 = $5.sibling(header_1, 2);
+            var node_6 = $5.child(div_1);
+            $5.snippet(node_6, () => $$props.children);
+            $5.reset(div_1);
+            $5.attach(div_1, () => bodyOverflowFade);
+            var node_7 = $5.sibling(div_1, 2);
             {
               var consequent_2 = ($$anchor4) => {
                 var div_2 = root_7();
-                var node_8 = $4.child(div_2);
-                $4.snippet(node_8, () => $$props.footer);
-                $4.reset(div_2);
-                $4.append($$anchor4, div_2);
+                var node_8 = $5.child(div_2);
+                $5.snippet(node_8, () => $$props.footer);
+                $5.reset(div_2);
+                $5.append($$anchor4, div_2);
               };
-              $4.if(node_7, ($$render) => {
+              $5.if(node_7, ($$render) => {
                 if ($$props.footer)
                   $$render(consequent_2);
               });
             }
-            $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,
               initialFocus: resolveInitialFocus
             }));
-            $4.template_effect(() => {
-              $4.set_attribute(div, "data-cinder-side", $4.get(activeSide));
-              $4.set_attribute(div, "data-cinder-size", size());
-              $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-side", $5.get(activeSide));
+              $5.set_attribute(div, "data-cinder-size", size());
+              $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_3);
           });
         }
-        $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_4);
     });
   }
-  $4.append($$anchor, fragment);
-  $4.pop();
+  $5.append($$anchor, fragment);
+  $5.pop();
 }
-$4.delegate(["click"]);
+$5.delegate(["click"]);
 
 // src/components/sidebar/sidebar.svelte
-var root_32 = $5.from_html(`<div class="cinder-sidebar__brand"><!></div>`);
-var root_42 = $5.from_html(`<nav class="cinder-sidebar__nav"><!></nav>`);
-var root_52 = $5.from_html(`<div class="cinder-sidebar__footer cinder-sidebar__footer--mobile"><!></div>`);
-var root_22 = $5.from_html(`<div><!> <!> <!></div>`);
-var root_72 = $5.from_html(`<div class="cinder-sidebar__brand"><!></div>`);
-var root_8 = $5.from_html(`<nav class="cinder-sidebar__nav"><!></nav>`);
-var root_9 = $5.from_html(`<div class="cinder-sidebar__footer"><!></div>`);
-var root_62 = $5.from_html(`<aside><!> <!> <!></aside>`);
+var root_32 = $6.from_html(`<div class="cinder-sidebar__brand"><!></div>`);
+var root_42 = $6.from_html(`<nav class="cinder-sidebar__nav"><!></nav>`);
+var root_52 = $6.from_html(`<div class="cinder-sidebar__footer cinder-sidebar__footer--mobile"><!></div>`);
+var root_22 = $6.from_html(`<div><!> <!> <!></div>`);
+var root_72 = $6.from_html(`<div class="cinder-sidebar__brand"><!></div>`);
+var root_8 = $6.from_html(`<nav class="cinder-sidebar__nav"><!></nav>`);
+var root_9 = $6.from_html(`<div class="cinder-sidebar__footer"><!></div>`);
+var root_62 = $6.from_html(`<aside><!> <!> <!></aside>`);
 function Sidebar($$anchor, $$props) {
-  $5.push($$props, true);
-  let collapsed = $5.prop($$props, "collapsed", 15, false), ariaLabel = $5.prop($$props, "ariaLabel", 3, "Sidebar"), rest = $5.rest_props($$props, [
+  $6.push($$props, true);
+  let collapsed = $6.prop($$props, "collapsed", 15, false), label = $6.prop($$props, "label", 3, "Sidebar"), rest = $6.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "id",
     "collapsed",
-    "ariaLabel",
+    "label",
     "class",
     "brand",
     "navigation",
@@ -896,13 +966,13 @@ function Sidebar($$anchor, $$props) {
     "aria-label",
     "aria-labelledby"
   ]);
-  const validatedLabel = $5.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 = $5.derived(() => `${$5.get(validatedLabel)} navigation`);
+  const navigationLabel = $6.derived(() => `${$6.get(validatedLabel)} navigation`);
   const mobile = new MediaQuery2("(max-width: 47.99rem)", false);
   const context = {
     get collapsed() {
@@ -910,15 +980,15 @@ function Sidebar($$anchor, $$props) {
     }
   };
   setSidebarContext(context);
-  var fragment = $5.comment();
-  var node = $5.first_child(fragment);
+  var fragment = $6.comment();
+  var node = $6.first_child(fragment);
   {
     var consequent_3 = ($$anchor2) => {
       var bind_get = () => !collapsed();
       var bind_set = (value) => {
         collapsed(!value);
       };
-      Drawer($$anchor2, $5.spread_props(() => rest, {
+      Drawer($$anchor2, $6.spread_props(() => rest, {
         get open() {
           return bind_get();
         },
@@ -928,129 +998,129 @@ function Sidebar($$anchor, $$props) {
         side: "left",
         size: "md",
         get title() {
-          return $5.get(validatedLabel);
+          return $6.get(validatedLabel);
         },
         get id() {
           return $$props.id;
         },
         children: ($$anchor3, $$slotProps) => {
           var div = root_22();
-          var node_1 = $5.child(div);
+          var node_1 = $6.child(div);
           {
             var consequent = ($$anchor4) => {
               var div_1 = root_32();
-              var node_2 = $5.child(div_1);
-              $5.snippet(node_2, () => $$props.brand);
-              $5.reset(div_1);
-              $5.append($$anchor4, div_1);
+              var node_2 = $6.child(div_1);
+              $6.snippet(node_2, () => $$props.brand);
+              $6.reset(div_1);
+              $6.append($$anchor4, div_1);
             };
-            $5.if(node_1, ($$render) => {
+            $6.if(node_1, ($$render) => {
               if ($$props.brand)
                 $$render(consequent);
             });
           }
-          var node_3 = $5.sibling(node_1, 2);
+          var node_3 = $6.sibling(node_1, 2);
           {
             var consequent_1 = ($$anchor4) => {
               var nav = root_42();
-              var node_4 = $5.child(nav);
-              $5.snippet(node_4, () => $$props.navigation);
-              $5.reset(nav);
-              $5.template_effect(() => $5.set_attribute(nav, "aria-label", $5.get(navigationLabel)));
-              $5.append($$anchor4, nav);
+              var node_4 = $6.child(nav);
+              $6.snippet(node_4, () => $$props.navigation);
+              $6.reset(nav);
+              $6.template_effect(() => $6.set_attribute(nav, "aria-label", $6.get(navigationLabel)));
+              $6.append($$anchor4, nav);
             };
-            $5.if(node_3, ($$render) => {
+            $6.if(node_3, ($$render) => {
               if ($$props.navigation)
                 $$render(consequent_1);
             });
           }
-          var node_5 = $5.sibling(node_3, 2);
+          var node_5 = $6.sibling(node_3, 2);
           {
             var consequent_2 = ($$anchor4) => {
               var div_2 = root_52();
-              var node_6 = $5.child(div_2);
-              $5.snippet(node_6, () => $$props.footer);
-              $5.reset(div_2);
-              $5.append($$anchor4, div_2);
+              var node_6 = $6.child(div_2);
+              $6.snippet(node_6, () => $$props.footer);
+              $6.reset(div_2);
+              $6.append($$anchor4, div_2);
             };
-            $5.if(node_5, ($$render) => {
+            $6.if(node_5, ($$render) => {
               if ($$props.footer)
                 $$render(consequent_2);
             });
           }
-          $5.reset(div);
-          $5.template_effect(($0) => $5.set_class(div, 1, $0), [
-            () => $5.clsx(classNames("cinder-sidebar", "cinder-sidebar--mobile", $$props.class))
+          $6.reset(div);
+          $6.template_effect(($0) => $6.set_class(div, 1, $0), [
+            () => $6.clsx(classNames("cinder-sidebar", "cinder-sidebar--mobile", $$props.class))
           ]);
-          $5.append($$anchor3, div);
+          $6.append($$anchor3, div);
         },
         $$slots: { default: true }
       }));
     };
     var alternate = ($$anchor2) => {
       var aside = root_62();
-      $5.attribute_effect(aside, ($0) => ({
+      $6.attribute_effect(aside, ($0) => ({
         id: $$props.id,
         ...rest,
         class: $0,
-        "aria-label": $5.get(validatedLabel),
+        "aria-label": $6.get(validatedLabel),
         "data-cinder-collapsed": collapsed() ? "" : undefined
       }), [() => classNames("cinder-sidebar", $$props.class)]);
-      var node_7 = $5.child(aside);
+      var node_7 = $6.child(aside);
       {
         var consequent_4 = ($$anchor3) => {
           var div_3 = root_72();
-          var node_8 = $5.child(div_3);
-          $5.snippet(node_8, () => $$props.brand);
-          $5.reset(div_3);
-          $5.append($$anchor3, div_3);
+          var node_8 = $6.child(div_3);
+          $6.snippet(node_8, () => $$props.brand);
+          $6.reset(div_3);
+          $6.append($$anchor3, div_3);
         };
-        $5.if(node_7, ($$render) => {
+        $6.if(node_7, ($$render) => {
           if ($$props.brand)
             $$render(consequent_4);
         });
       }
-      var node_9 = $5.sibling(node_7, 2);
+      var node_9 = $6.sibling(node_7, 2);
       {
         var consequent_5 = ($$anchor3) => {
           var nav_1 = root_8();
-          var node_10 = $5.child(nav_1);
-          $5.snippet(node_10, () => $$props.navigation);
-          $5.reset(nav_1);
-          $5.template_effect(() => $5.set_attribute(nav_1, "aria-label", $5.get(navigationLabel)));
-          $5.append($$anchor3, nav_1);
+          var node_10 = $6.child(nav_1);
+          $6.snippet(node_10, () => $$props.navigation);
+          $6.reset(nav_1);
+          $6.template_effect(() => $6.set_attribute(nav_1, "aria-label", $6.get(navigationLabel)));
+          $6.append($$anchor3, nav_1);
         };
-        $5.if(node_9, ($$render) => {
+        $6.if(node_9, ($$render) => {
           if ($$props.navigation)
             $$render(consequent_5);
         });
       }
-      var node_11 = $5.sibling(node_9, 2);
+      var node_11 = $6.sibling(node_9, 2);
       {
         var consequent_6 = ($$anchor3) => {
           var div_4 = root_9();
-          var node_12 = $5.child(div_4);
-          $5.snippet(node_12, () => $$props.footer);
-          $5.reset(div_4);
-          $5.append($$anchor3, div_4);
+          var node_12 = $6.child(div_4);
+          $6.snippet(node_12, () => $$props.footer);
+          $6.reset(div_4);
+          $6.append($$anchor3, div_4);
         };
-        $5.if(node_11, ($$render) => {
+        $6.if(node_11, ($$render) => {
           if ($$props.footer)
             $$render(consequent_6);
         });
       }
-      $5.reset(aside);
-      $5.append($$anchor2, aside);
+      $6.reset(aside);
+      $6.append($$anchor2, aside);
     };
-    $5.if(node, ($$render) => {
+    $6.if(node, ($$render) => {
       if (mobile.current)
         $$render(consequent_3);
       else
         $$render(alternate, -1);
     });
   }
-  $5.append($$anchor, fragment);
-  $5.pop();
+  $6.append($$anchor, fragment);
+  $6.pop();
 }
 
 // src/components/sidebar/index.ts
@@ -1060,4 +1130,4 @@ export {
   Sidebar
 };
 
-//# debugId=DA0BB29CFE78F39D64756E2164756E21
+//# debugId=9A007D822721149064756E2164756E21