@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -247,7 +247,7 @@ function Focus_trap($$renderer, $$props) {
 // src/components/focus-trap/index.ts
 var focus_trap_default = Focus_trap;
 // src/components/drawer/drawer.svelte
-import * as $4 from "svelte/internal/server";
+import * as $5 from "svelte/internal/server";
 import { onDestroy } from "svelte";
 
 // src/_internal/overlay.ts
@@ -310,92 +310,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) => {
@@ -403,17 +322,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;
         }
       }
@@ -507,10 +428,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 = $4.props_id($$renderer2);
+    const titleId = $5.props_id($$renderer2);
     let {
       open = false,
       side = "right",
@@ -528,131 +678,48 @@ function Drawer($$renderer, $$props) {
     } = $$props;
     let dialogElement = undefined;
     let panelElement = undefined;
-    let hydrated = false;
-    let renderPanel = open;
-    let isClosing = false;
-    let closeGeneration = 0;
     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(() => {});
-    }
+    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;
     }
-    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;
-      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();
-      }
-    }
     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${$4.attributes({
+      $$renderer2.push(`<dialog${$5.attributes({
         ...rest,
-        class: $4.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"${$4.attr("data-cinder-side", activeSide)}${$4.attr("data-cinder-size", size)}${$4.attr("data-cinder-closing", isClosing ? "" : undefined)}${$4.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${$4.attr("id", titleId)} class="cinder-sr-only">${$4.escape(title)}</h2>`);
+            $$renderer2.push(`<h2${$5.attr("id", titleId)} class="cinder-sr-only">${$5.escape(title)}</h2>`);
           } else {
             $$renderer2.push("<!--[-1-->");
           }
@@ -661,7 +728,7 @@ function Drawer($$renderer, $$props) {
           $$renderer2.push(`<!---->`);
         } else {
           $$renderer2.push("<!--[-1-->");
-          $$renderer2.push(`<h2${$4.attr("id", titleId)} class="cinder-drawer__title">${$4.escape(title)}</h2>`);
+          $$renderer2.push(`<h2${$5.attr("id", titleId)} class="cinder-drawer__title">${$5.escape(title)}</h2>`);
         }
         $$renderer2.push(`<!--]--> `);
         closeButton($$renderer2);
@@ -685,7 +752,7 @@ function Drawer($$renderer, $$props) {
       $$renderer2.push("<!--[-1-->");
     }
     $$renderer2.push(`<!--]-->`);
-    $4.bind_props($$props, { open });
+    $5.bind_props($$props, { open });
   });
 }
 
@@ -696,4 +763,4 @@ export {
   Drawer
 };
 
-//# debugId=36951BF7A9340B7C64756E2164756E21
+//# debugId=CAD0FD3DEFD0E91A64756E2164756E21

package/dist/server/components/dropdown/index.css

@@ -69,7 +69,7 @@
     border-radius: var(--cinder-radius-md);
     background: var(--cinder-surface-raised);
     color: var(--cinder-text);
-    box-shadow: var(--cinder-shadow-lg);
+    box-shadow: var(--cinder-shadow-overlay);
   }
 
   .cinder-dropdown__menu {
@@ -201,10 +201,16 @@
       position: fixed;
       inset: auto;
       top: calc(anchor(bottom)  + var(--cinder-space-1));
+      left: auto;
       right: anchor(right);
       position-try-fallbacks: flip-block, flip-inline;
     }
 
+    .cinder-dropdown-menu[popover][dir="rtl"] {
+      right: auto;
+      left: anchor(left);
+    }
+
     .cinder-dropdown__menu[popover] {
       position: fixed;
       margin: 0;