@lostgradient/cinder 0.4.0 → 0.4.1

package/dist/components/markdown-editor/index.js

@@ -211,7 +211,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   }
   return coords;
 }
-async function detectOverflow(state4, options) {
+async function detectOverflow(state5, options) {
   var _await$platform$isEle;
   if (options === undefined) {
     options = {};
@@ -223,14 +223,14 @@ async function detectOverflow(state4, options) {
     rects,
     elements,
     strategy
-  } = state4;
+  } = state5;
   const {
     boundary = "clippingAncestors",
     rootBoundary = "viewport",
     elementContext = "floating",
     altBoundary = false,
     padding = 0
-  } = evaluate(options, state4);
+  } = evaluate(options, state5);
   const paddingObject = getPaddingObject(padding);
   const altContext = elementContext === "floating" ? "reference" : "floating";
   const element2 = elements[altBoundary ? altContext : elementContext];
@@ -314,19 +314,19 @@ function getRectsByLine(rects) {
   }
   return groups.map((rect) => rectToClientRect(getBoundingRect(rect)));
 }
-async function convertValueToCoords(state4, options) {
+async function convertValueToCoords(state5, options) {
   const {
     placement,
     platform,
     elements
-  } = state4;
+  } = state5;
   const rtl = await (platform.isRTL == null ? undefined : platform.isRTL(elements.floating));
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === "y";
   const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = evaluate(options, state4);
+  const rawValue = evaluate(options, state5);
   let {
     mainAxis,
     crossAxis,
@@ -440,7 +440,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
 }, arrow = (options) => ({
   name: "arrow",
   options,
-  async fn(state4) {
+  async fn(state5) {
     const {
       x,
       y,
@@ -449,11 +449,11 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
       platform,
       elements,
       middlewareData
-    } = state4;
+    } = state5;
     const {
       element: element2,
       padding = 0
-    } = evaluate(options, state4) || {};
+    } = evaluate(options, state5) || {};
     if (element2 == null) {
       return {};
     }
@@ -505,7 +505,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "autoPlacement",
     options,
-    async fn(state4) {
+    async fn(state5) {
       var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
       const {
         rects,
@@ -513,16 +513,16 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
         placement,
         platform,
         elements
-      } = state4;
+      } = state5;
       const {
         crossAxis = false,
         alignment,
         allowedPlacements = placements,
         autoAlignment = true,
         ...detectOverflowOptions
-      } = evaluate(options, state4);
+      } = evaluate(options, state5);
       const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
-      const overflow = await platform.detectOverflow(state4, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state5, detectOverflowOptions);
       const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? undefined : _middlewareData$autoP.index) || 0;
       const currentPlacement = placements$1[currentIndex];
       if (currentPlacement == null) {
@@ -580,7 +580,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "flip",
     options,
-    async fn(state4) {
+    async fn(state5) {
       var _middlewareData$arrow, _middlewareData$flip;
       const {
         placement,
@@ -589,7 +589,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
         initialPlacement,
         platform,
         elements
-      } = state4;
+      } = state5;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true,
@@ -598,7 +598,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
         fallbackAxisSideDirection = "none",
         flipAlignment = true,
         ...detectOverflowOptions
-      } = evaluate(options, state4);
+      } = evaluate(options, state5);
       if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -612,7 +612,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements2 = [initialPlacement, ...fallbackPlacements];
-      const overflow = await platform.detectOverflow(state4, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state5, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? undefined : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -684,18 +684,18 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "hide",
     options,
-    async fn(state4) {
+    async fn(state5) {
       const {
         rects,
         platform
-      } = state4;
+      } = state5;
       const {
         strategy = "referenceHidden",
         ...detectOverflowOptions
-      } = evaluate(options, state4);
+      } = evaluate(options, state5);
       switch (strategy) {
         case "referenceHidden": {
-          const overflow = await platform.detectOverflow(state4, {
+          const overflow = await platform.detectOverflow(state5, {
             ...detectOverflowOptions,
             elementContext: "reference"
           });
@@ -708,7 +708,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
           };
         }
         case "escaped": {
-          const overflow = await platform.detectOverflow(state4, {
+          const overflow = await platform.detectOverflow(state5, {
             ...detectOverflowOptions,
             altBoundary: true
           });
@@ -733,19 +733,19 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "inline",
     options,
-    async fn(state4) {
+    async fn(state5) {
       const {
         placement,
         elements,
         rects,
         platform,
         strategy
-      } = state4;
+      } = state5;
       const {
         padding = 2,
         x,
         y
-      } = evaluate(options, state4);
+      } = evaluate(options, state5);
       const nativeClientRects = Array.from(await (platform.getClientRects == null ? undefined : platform.getClientRects(elements.reference)) || []);
       const clientRects = getRectsByLine(nativeClientRects);
       const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
@@ -823,15 +823,15 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "offset",
     options,
-    async fn(state4) {
+    async fn(state5) {
       var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
         y,
         placement,
         middlewareData
-      } = state4;
-      const diffCoords = await convertValueToCoords(state4, options);
+      } = state5;
+      const diffCoords = await convertValueToCoords(state5, options);
       if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? undefined : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -852,13 +852,13 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "shift",
     options,
-    async fn(state4) {
+    async fn(state5) {
       const {
         x,
         y,
         placement,
         platform
-      } = state4;
+      } = state5;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = false,
@@ -875,12 +875,12 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
           }
         },
         ...detectOverflowOptions
-      } = evaluate(options, state4);
+      } = evaluate(options, state5);
       const coords = {
         x,
         y
       };
-      const overflow = await platform.detectOverflow(state4, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state5, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -900,7 +900,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
         crossAxisCoord = clamp(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
-        ...state4,
+        ...state5,
         [mainAxis]: mainAxisCoord,
         [crossAxis]: crossAxisCoord
       });
@@ -923,19 +923,19 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   }
   return {
     options,
-    fn(state4) {
+    fn(state5) {
       const {
         x,
         y,
         placement,
         rects,
         middlewareData
-      } = state4;
+      } = state5;
       const {
         offset: offset2 = 0,
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true
-      } = evaluate(options, state4);
+      } = evaluate(options, state5);
       const coords = {
         x,
         y
@@ -944,7 +944,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
-      const rawOffset = evaluate(offset2, state4);
+      const rawOffset = evaluate(offset2, state5);
       const computedOffset = typeof rawOffset === "number" ? {
         mainAxis: rawOffset,
         crossAxis: 0
@@ -988,19 +988,19 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
   return {
     name: "size",
     options,
-    async fn(state4) {
+    async fn(state5) {
       var _state$middlewareData, _state$middlewareData2;
       const {
         placement,
         rects,
         platform,
         elements
-      } = state4;
+      } = state5;
       const {
         apply = () => {},
         ...detectOverflowOptions
-      } = evaluate(options, state4);
-      const overflow = await platform.detectOverflow(state4, detectOverflowOptions);
+      } = evaluate(options, state5);
+      const overflow = await platform.detectOverflow(state5, detectOverflowOptions);
       const side = getSide(placement);
       const alignment = getAlignment(placement);
       const isYAxis = getSideAxis(placement) === "y";
@@ -1021,13 +1021,13 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
       const maximumClippingWidth = width - overflow.left - overflow.right;
       const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
       const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
-      const noShift = !state4.middlewareData.shift;
+      const noShift = !state5.middlewareData.shift;
       let availableHeight = overflowAvailableHeight;
       let availableWidth = overflowAvailableWidth;
-      if ((_state$middlewareData = state4.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
+      if ((_state$middlewareData = state5.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
         availableWidth = maximumClippingWidth;
       }
-      if ((_state$middlewareData2 = state4.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
+      if ((_state$middlewareData2 = state5.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
         availableHeight = maximumClippingHeight;
       }
       if (noShift && !alignment) {
@@ -1042,7 +1042,7 @@ var MAX_RESET_COUNT = 50, computePosition = async (reference, floating, config)
         }
       }
       await apply({
-        ...state4,
+        ...state5,
         availableWidth,
         availableHeight
       });
@@ -2300,17 +2300,21 @@ import * as $5 from "svelte/internal/client";
 import { createContext } from "svelte";
 
 // src/utilities/document-order.ts
+var DOCUMENT_POSITION_PRECEDING = 2;
+var DOCUMENT_POSITION_FOLLOWING = 4;
 function inDocumentOrder(items) {
-  return items.toSorted((a, b) => {
+  const sortedItems = [...items];
+  sortedItems.sort((a, b) => {
     if (a.node === b.node)
       return 0;
     const position = a.node.compareDocumentPosition(b.node);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+    if (position & DOCUMENT_POSITION_FOLLOWING)
       return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+    if (position & DOCUMENT_POSITION_PRECEDING)
       return 1;
     return 0;
   });
+  return sortedItems;
 }
 
 // src/utilities/roving-tabindex.ts
@@ -2609,7 +2613,11 @@ function Segment($$anchor, $$props) {
 // src/components/segmented-control/segmented-control.svelte
 import"svelte/internal/disclose-version";
 import * as $7 from "svelte/internal/client";
-var root4 = $7.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div></div>`);
+import { untrack as untrack2 } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+var root_22 = $7.from_html(`<input type="hidden"/>`);
+var root_12 = $7.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
+var root4 = $7.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div> <!></div>`);
 function Segmented_control($$anchor, $$props) {
   $7.push($$props, true);
   let value = $7.prop($$props, "value", 15), hideLabel = $7.prop($$props, "hideLabel", 3, false), disabled = $7.prop($$props, "disabled", 3, false), size = $7.prop($$props, "size", 3, "md"), orientation = $7.prop($$props, "orientation", 3, "horizontal"), detached = $7.prop($$props, "detached", 3, false), fullWidth = $7.prop($$props, "fullWidth", 3, false), variant = $7.prop($$props, "variant", 3, "radiogroup"), selectionMode = $7.prop($$props, "selectionMode", 3, "single"), disallowEmptySelection = $7.prop($$props, "disallowEmptySelection", 3, true), rest = $7.rest_props($$props, [
@@ -2619,6 +2627,7 @@ function Segmented_control($$anchor, $$props) {
     "id",
     "value",
     "label",
+    "name",
     "hideLabel",
     "disabled",
     "size",
@@ -2633,6 +2642,10 @@ function Segmented_control($$anchor, $$props) {
     "onchange",
     "children"
   ]);
+  let resetInputElement = $7.state(null);
+  let resetSyncTimeout;
+  const initialSingleValue = untrack2(() => typeof value() === "string" ? value() : undefined);
+  const initialMultipleValues = untrack2(() => selectionMode() === "multiple" && value() instanceof SvelteSet ? Array.from(value()) : undefined);
   const controller = new SegmentedControlController({
     selectionMode: () => selectionMode(),
     variant: () => variant(),
@@ -2663,6 +2676,35 @@ function Segmented_control($$anchor, $$props) {
   setSegmentedControlContext(contextValue);
   const groupRole = $7.derived(() => selectionMode() === "multiple" ? "group" : variant() === "tablist" ? "tablist" : "radiogroup");
   const effectiveSize = $7.derived(() => $$props.density === "toolbar" ? "sm" : size());
+  const selectedValues = $7.derived(() => selectionMode() === "multiple" ? value() instanceof SvelteSet ? Array.from(value()) : [] : typeof value() === "string" ? [value()] : []);
+  function resetToInitialValue(event) {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (event.defaultPrevented)
+        return;
+      if (selectionMode() === "multiple") {
+        value(initialMultipleValues === undefined ? undefined : new SvelteSet(initialMultipleValues));
+        return;
+      }
+      value(initialSingleValue);
+    }, 0);
+  }
+  $7.user_effect(() => {
+    const input = $7.get(resetInputElement);
+    if (input === null)
+      return;
+    const form = input.form;
+    form?.addEventListener("reset", resetToInitialValue);
+    return () => {
+      form?.removeEventListener("reset", resetToInitialValue);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
   var div = root4();
   var span = $7.child(div);
   var text = $7.child(span, true);
@@ -2689,6 +2731,30 @@ function Segmented_control($$anchor, $$props) {
   var node = $7.child(div_1);
   $7.snippet(node, () => $$props.children);
   $7.reset(div_1);
+  var node_1 = $7.sibling(div_1, 2);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment = root_12();
+      var input_1 = $7.first_child(fragment);
+      $7.bind_this(input_1, ($$value) => $7.set(resetInputElement, $$value), () => $7.get(resetInputElement));
+      var node_2 = $7.sibling(input_1, 2);
+      $7.each(node_2, 16, () => $7.get(selectedValues), (selectedValue) => selectedValue, ($$anchor3, selectedValue) => {
+        var input_2 = root_22();
+        $7.remove_input_defaults(input_2);
+        $7.template_effect(() => {
+          $7.set_attribute(input_2, "name", $$props.name);
+          $7.set_value(input_2, selectedValue);
+          input_2.disabled = disabled();
+        });
+        $7.append($$anchor3, input_2);
+      });
+      $7.append($$anchor2, fragment);
+    };
+    $7.if(node_1, ($$render) => {
+      if ($$props.name)
+        $$render(consequent);
+    });
+  }
   $7.reset(div);
   $7.template_effect(($0) => {
     $7.set_attribute(span, "id", `${$$props.id}-label`);
@@ -2704,7 +2770,7 @@ function Segmented_control($$anchor, $$props) {
 // src/components/markdown-editor/editor-skeleton.svelte
 import"svelte/internal/disclose-version";
 import * as $8 from "svelte/internal/client";
-var root_12 = $8.from_html(`<div class="skeleton-line svelte-1h3fabh"></div>`);
+var root_13 = $8.from_html(`<div class="skeleton-line svelte-1h3fabh"></div>`);
 var root5 = $8.from_html(`<div><span class="sr-only svelte-1h3fabh">Loading editor...</span> <div class="skeleton-content svelte-1h3fabh"></div></div>`);
 function Editor_skeleton($$anchor, $$props) {
   $8.push($$props, true);
@@ -2728,7 +2794,7 @@ function Editor_skeleton($$anchor, $$props) {
   ], undefined, undefined, "svelte-1h3fabh");
   var div_1 = $8.sibling($8.child(div), 2);
   $8.each(div_1, 21, () => $8.get(lineWidths), $8.index, ($$anchor2, width) => {
-    var div_2 = root_12();
+    var div_2 = root_13();
     let styles;
     $8.template_effect(() => styles = $8.set_style(div_2, "", styles, { "--skeleton-line-width": `${$8.get(width) ?? ""}%` }));
     $8.append($$anchor2, div_2);
@@ -3213,7 +3279,7 @@ import {
 // src/components/toolbar/toolbar.svelte
 import"svelte/internal/disclose-version";
 import * as $25 from "svelte/internal/client";
-import { untrack as untrack3 } from "svelte";
+import { untrack as untrack4 } from "svelte";
 import { on } from "svelte/events";
 
 // src/utilities/use-mutation-observer.svelte.ts
@@ -3572,7 +3638,7 @@ function Toolbar($$anchor, $$props) {
   }
   function toolbarSetup(node) {
     rootElement = node;
-    syncToolbarItems(untrack3(() => $25.get(activeItem)));
+    syncToolbarItems(untrack4(() => $25.get(activeItem)));
     const cleanupKeyboardListener = on(node, "keydown", handleToolbarKeyDown, { capture: true });
     const cleanupFocusInListener = on(node, "focusin", handleToolbarFocusIn);
     const detachMutationObserver = useMutationObserver(() => {
@@ -3801,6 +3867,66 @@ function createAnchoredOverlay(options) {
   };
 }
 
+// src/_internal/overlay.ts
+var escapeStack = [];
+function pushEscapeHandler(handler) {
+  escapeStack.push(handler);
+  if (escapeStack.length === 1 && typeof window !== "undefined") {
+    window.addEventListener("keydown", onEscapeKeydown, { capture: true });
+  }
+  let released = false;
+  return () => {
+    if (released)
+      return;
+    released = true;
+    const index3 = escapeStack.lastIndexOf(handler);
+    if (index3 !== -1)
+      escapeStack.splice(index3, 1);
+    if (escapeStack.length === 0 && typeof window !== "undefined") {
+      window.removeEventListener("keydown", onEscapeKeydown, { capture: true });
+    }
+  };
+}
+function onEscapeKeydown(event) {
+  if (event.key !== "Escape")
+    return;
+  const handler = escapeStack.at(-1);
+  if (!handler)
+    return;
+  handler(event);
+}
+var scrollLockCount = 0;
+var originalBodyOverflow = null;
+function lockBodyScroll() {
+  if (typeof document === "undefined")
+    return () => {};
+  if (scrollLockCount === 0) {
+    originalBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  scrollLockCount += 1;
+  let released = false;
+  return () => {
+    if (released)
+      return;
+    released = true;
+    scrollLockCount = Math.max(0, scrollLockCount - 1);
+    if (scrollLockCount === 0) {
+      document.body.style.overflow = originalBodyOverflow ?? "";
+      originalBodyOverflow = null;
+    }
+  };
+}
+function captureFocus() {
+  if (typeof document === "undefined")
+    return null;
+  const active = document.activeElement;
+  if (active && active !== document.body && active instanceof HTMLElement) {
+    return active;
+  }
+  return null;
+}
+
 // src/components/tooltip/tooltip.svelte
 var root8 = $27.from_html(`<span role="presentation"><!> <span role="tooltip" class="cinder-tooltip"> </span></span>`);
 function Tooltip($$anchor, $$props) {
@@ -3825,23 +3951,42 @@ function Tooltip($$anchor, $$props) {
   ].join(", ");
   let visible = $27.state(false);
   let showTimer;
-  let hasPendingShow = $27.state(false);
+  let releasePendingEscapeListener;
   let wrapperElement = $27.state(undefined);
   let tooltipElement = $27.state(undefined);
   let anchorElement = $27.state(null);
-  function show() {
+  function releasePendingEscape() {
+    releasePendingEscapeListener?.();
+    releasePendingEscapeListener = undefined;
+  }
+  function clearPendingShow() {
     clearTimeout(showTimer);
-    $27.set(hasPendingShow, true);
+    showTimer = undefined;
+    releasePendingEscape();
+  }
+  function handlePendingEscapeKeydown(event2) {
+    if (event2.key !== "Escape")
+      return;
+    clearPendingShow();
+  }
+  function registerPendingEscape() {
+    releasePendingEscape();
+    document.addEventListener("keydown", handlePendingEscapeKeydown, { capture: true });
+    releasePendingEscapeListener = () => {
+      document.removeEventListener("keydown", handlePendingEscapeKeydown, { capture: true });
+    };
+  }
+  function show() {
+    clearPendingShow();
+    registerPendingEscape();
     showTimer = setTimeout(() => {
       showTimer = undefined;
-      $27.set(hasPendingShow, false);
+      releasePendingEscape();
       $27.set(visible, true);
     }, 100);
   }
   function hide3() {
-    clearTimeout(showTimer);
-    showTimer = undefined;
-    $27.set(hasPendingShow, false);
+    clearPendingShow();
     $27.set(visible, false);
   }
   function handleMouseEnter() {
@@ -3856,10 +4001,9 @@ function Tooltip($$anchor, $$props) {
   function handleFocusOut() {
     hide3();
   }
-  function handleKeydown(event2) {
-    if (event2.key === "Escape") {
-      hide3();
-    }
+  function handleEscape(event2 = undefined) {
+    hide3();
+    event2?.preventDefault();
   }
   function isFocusableCandidate2(element2) {
     if (element2.matches(":disabled"))
@@ -3920,13 +4064,15 @@ function Tooltip($$anchor, $$props) {
   });
   const isTooltipExposed = $27.derived(() => $27.get(visible) && anchoredOverlay.positionReady);
   $27.user_effect(() => {
-    if (!$27.get(visible) && !$27.get(hasPendingShow))
-      return;
-    document.addEventListener("keydown", handleKeydown);
     return () => {
-      document.removeEventListener("keydown", handleKeydown);
+      clearPendingShow();
     };
   });
+  $27.user_effect(() => {
+    if (!$27.get(visible))
+      return;
+    return pushEscapeHandler(handleEscape);
+  });
   var span = root8();
   var node = $27.child(span);
   $27.snippet(node, () => $$props.children);
@@ -3959,7 +4105,7 @@ function Tooltip($$anchor, $$props) {
 $27.delegate(["focusin", "focusout"]);
 
 // src/components/markdown-editor/editor-toolbar/toolbar-button.svelte
-var root_13 = $28.from_html(`<button><!></button>`);
+var root_14 = $28.from_html(`<button><!></button>`);
 function Toolbar_button($$anchor, $$props) {
   $28.push($$props, true);
   let toggle = $28.prop($$props, "toggle", 3, false), pressed = $28.prop($$props, "pressed", 3, false), disabled = $28.prop($$props, "disabled", 3, false), rest = $28.rest_props($$props, [
@@ -3982,7 +4128,7 @@ function Toolbar_button($$anchor, $$props) {
     },
     placement: "bottom",
     children: ($$anchor2, $$slotProps) => {
-      var button = root_13();
+      var button = root_14();
       $28.attribute_effect(button, ($0) => ({
         type: "button",
         class: $0,
@@ -4052,66 +4198,6 @@ function Check($$anchor, $$props) {
 import"svelte/internal/disclose-version";
 import * as $31 from "svelte/internal/client";
 
-// src/_internal/overlay.ts
-var escapeStack = [];
-function pushEscapeHandler(handler) {
-  escapeStack.push(handler);
-  if (escapeStack.length === 1 && typeof window !== "undefined") {
-    window.addEventListener("keydown", onEscapeKeydown, { capture: true });
-  }
-  let released = false;
-  return () => {
-    if (released)
-      return;
-    released = true;
-    const index3 = escapeStack.lastIndexOf(handler);
-    if (index3 !== -1)
-      escapeStack.splice(index3, 1);
-    if (escapeStack.length === 0 && typeof window !== "undefined") {
-      window.removeEventListener("keydown", onEscapeKeydown, { capture: true });
-    }
-  };
-}
-function onEscapeKeydown(event2) {
-  if (event2.key !== "Escape")
-    return;
-  const handler = escapeStack.at(-1);
-  if (!handler)
-    return;
-  handler(event2);
-}
-var scrollLockCount = 0;
-var originalBodyOverflow = null;
-function lockBodyScroll() {
-  if (typeof document === "undefined")
-    return () => {};
-  if (scrollLockCount === 0) {
-    originalBodyOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-  }
-  scrollLockCount += 1;
-  let released = false;
-  return () => {
-    if (released)
-      return;
-    released = true;
-    scrollLockCount = Math.max(0, scrollLockCount - 1);
-    if (scrollLockCount === 0) {
-      document.body.style.overflow = originalBodyOverflow ?? "";
-      originalBodyOverflow = null;
-    }
-  };
-}
-function captureFocus() {
-  if (typeof document === "undefined")
-    return null;
-  const active = document.activeElement;
-  if (active && active !== document.body && active instanceof HTMLElement) {
-    return active;
-  }
-  return null;
-}
-
 // src/utilities/attachments.ts
 function createBodyScrollLock() {
   return () => {
@@ -4235,7 +4321,7 @@ var getDropdownSetOpen = getDropdownSetOpenStrict;
 // src/components/dropdown/dropdown.svelte
 var root_3 = $31.from_html(`<div class="cinder-dropdown__menu" popover="auto" role="menu"><!></div>`);
 var root_5 = $31.from_html(`<div class="cinder-dropdown__menu" role="menu"><!></div>`);
-var root_14 = $31.from_html(`<div class="cinder-dropdown__trigger" role="presentation"><!></div> <!>`, 1);
+var root_15 = $31.from_html(`<div class="cinder-dropdown__trigger" role="presentation"><!></div> <!>`, 1);
 var root10 = $31.from_html(`<div><!></div>`);
 function Dropdown($$anchor, $$props) {
   const generatedId = $31.props_id();
@@ -4369,7 +4455,7 @@ function Dropdown($$anchor, $$props) {
   var node = $31.child(div);
   {
     var consequent_5 = ($$anchor2) => {
-      var fragment = root_14();
+      var fragment = root_15();
       var div_1 = $31.first_child(fragment);
       var node_1 = $31.child(div_1);
       {
@@ -4469,7 +4555,7 @@ $31.delegate(["click"]);
 // src/components/dropdown-trigger/dropdown-trigger.svelte
 import"svelte/internal/disclose-version";
 import * as $32 from "svelte/internal/client";
-var root_22 = $32.from_svg(`<svg class="cinder-dropdown-trigger__caret" aria-hidden="true" focusable="false" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8l4 4 4-4"></path></svg>`);
+var root_23 = $32.from_svg(`<svg class="cinder-dropdown-trigger__caret" aria-hidden="true" focusable="false" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8l4 4 4-4"></path></svg>`);
 var root11 = $32.from_html(`<button><!> <!></button>`);
 function Dropdown_trigger($$anchor, $$props) {
   $32.push($$props, true);
@@ -4525,7 +4611,7 @@ function Dropdown_trigger($$anchor, $$props) {
   var node_3 = $32.sibling(node_1, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var svg = root_22();
+      var svg = root_23();
       $32.append($$anchor2, svg);
     };
     $32.if(node_3, ($$render) => {
@@ -4736,8 +4822,52 @@ function observeTextDirection(element2, onChange) {
   return () => observer.disconnect();
 }
 
+// src/utilities/typeahead.ts
+function isTypeaheadKey(event3) {
+  return event3.key.length === 1 && event3.key !== " " && !event3.ctrlKey && !event3.metaKey && !event3.altKey && !event3.isComposing;
+}
+function findTypeaheadMatch(candidates, prefix, currentIndex) {
+  if (candidates.length === 0)
+    return;
+  const normalizedPrefix = prefix.toLocaleLowerCase();
+  const startIndex = currentIndex < 0 ? -1 : currentIndex;
+  for (let offset3 = 1;offset3 <= candidates.length; offset3 += 1) {
+    const index3 = (startIndex + offset3) % candidates.length;
+    const candidate = candidates[index3];
+    if (!candidate || candidate.disabled)
+      continue;
+    if (candidate.label.toLocaleLowerCase().startsWith(normalizedPrefix)) {
+      return candidate.value;
+    }
+  }
+  return;
+}
+
+class TypeaheadBuffer {
+  #value = "";
+  #timer = null;
+  push(character) {
+    this.clearTimer();
+    this.#value += character.toLocaleLowerCase();
+    this.#timer = setTimeout(() => {
+      this.reset();
+    }, 500);
+    return this.#value;
+  }
+  reset() {
+    this.clearTimer();
+    this.#value = "";
+  }
+  clearTimer() {
+    if (this.#timer === null)
+      return;
+    clearTimeout(this.#timer);
+    this.#timer = null;
+  }
+}
+
 // src/components/dropdown-menu/dropdown-menu.svelte
-var root_15 = $33.from_html(`<div><!></div>`);
+var root_16 = $33.from_html(`<div><!></div>`);
 function Dropdown_menu($$anchor, $$props) {
   $33.push($$props, true);
   let rest = $33.rest_props($$props, [
@@ -4763,6 +4893,7 @@ function Dropdown_menu($$anchor, $$props) {
   const fallbackAnchorElement = $33.derived(() => context.fallbackAnchorElement === undefined ? context.anchorElement : context.fallbackAnchorElement);
   let menuElement = $33.state(null);
   let focusedFallbackOpen = false;
+  const typeaheadBuffer = new TypeaheadBuffer;
   const anchoredFallback = createAnchoredOverlay({
     open: () => context.isOpen && !context.supportsPopover && Boolean($33.get(fallbackAnchorElement)),
     anchor: () => $33.get(fallbackAnchorElement),
@@ -4783,6 +4914,13 @@ function Dropdown_menu($$anchor, $$props) {
     registerMenu($33.get(menuElement));
     return () => registerMenu(null);
   });
+  $33.user_effect(() => {
+    return () => typeaheadBuffer.reset();
+  });
+  $33.user_effect(() => {
+    if (!context.isOpen)
+      typeaheadBuffer.reset();
+  });
   $33.user_effect(() => {
     if ($$props.dir && $$props.dir !== "auto")
       return;
@@ -4805,7 +4943,11 @@ function Dropdown_menu($$anchor, $$props) {
   function getOwnedMenuItems() {
     if (!$33.get(menuElement))
       return [];
-    return Array.from($33.get(menuElement).querySelectorAll('[role="menuitem"]:not([data-disabled]), [role="menuitemradio"]:not([data-disabled])')).filter((item) => item.closest('[role="menu"]') === $33.get(menuElement));
+    return Array.from($33.get(menuElement).querySelectorAll([
+      '[role="menuitem"]:not([data-disabled])',
+      '[role="menuitemcheckbox"]:not([data-disabled])',
+      '[role="menuitemradio"]:not([data-disabled])'
+    ].join(", "))).filter((item) => item.closest('[role="menu"]') === $33.get(menuElement));
   }
   function focusMenuItem(index3) {
     const items = getOwnedMenuItems();
@@ -4848,6 +4990,16 @@ function Dropdown_menu($$anchor, $$props) {
       event3.preventDefault();
       event3.stopPropagation();
       focusMenuItem(itemsArray.length - 1);
+    } else if (isTypeaheadKey(event3)) {
+      event3.preventDefault();
+      event3.stopPropagation();
+      const match = findTypeaheadMatch(itemsArray.map((item, index3) => ({
+        value: index3,
+        label: item.textContent?.trim() ?? "",
+        disabled: item.hasAttribute("data-disabled")
+      })), typeaheadBuffer.push(event3.key), currentIndex);
+      if (match !== undefined)
+        focusMenuItem(match);
     }
   }
   function handleToggle(event3) {
@@ -4863,7 +5015,7 @@ function Dropdown_menu($$anchor, $$props) {
   var node = $33.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
-      var div = root_15();
+      var div = root_16();
       $33.attribute_effect(div, ($0) => ({
         id: context.menuId,
         popover: context.supportsPopover ? "auto" : undefined,
@@ -4912,7 +5064,7 @@ function Dropdown_menu($$anchor, $$props) {
 // src/components/dropdown-item/dropdown-item.svelte
 import"svelte/internal/disclose-version";
 import * as $34 from "svelte/internal/client";
-var root_16 = $34.from_html(`<a><!></a>`);
+var root_17 = $34.from_html(`<a><!></a>`);
 var root_32 = $34.from_html(`<button><!></button>`);
 function Dropdown_item($$anchor, $$props) {
   $34.push($$props, true);
@@ -4967,12 +5119,12 @@ function Dropdown_item($$anchor, $$props) {
   const anchorAttributes = $34.derived(() => rest);
   const buttonAttributes = $34.derived(() => rest);
   const buttonType = $34.derived(() => $$props.type ?? "button");
-  const ariaChecked = $34.derived(() => itemRole() === "menuitemradio" ? checked() : undefined);
+  const ariaChecked = $34.derived(() => itemRole() === "menuitemcheckbox" || itemRole() === "menuitemradio" ? checked() : undefined);
   var fragment = $34.comment();
   var node = $34.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
-      var a = root_16();
+      var a = root_17();
       $34.attribute_effect(a, () => ({
         ...$34.get(anchorAttributes),
         href: $$props.href,
@@ -5045,9 +5197,9 @@ function Dropdown_item($$anchor, $$props) {
 }
 
 // src/components/markdown-editor/editor-toolbar/toolbar-dropdown.svelte
-var root_23 = $35.from_html(`<!> <span class="toolbar-dropdown-label svelte-1v28aut"> </span>`, 1);
+var root_24 = $35.from_html(`<!> <span class="toolbar-dropdown-label svelte-1v28aut"> </span>`, 1);
 var root_6 = $35.from_html(`<!> <span class="dropdown-item-label svelte-1v28aut"> </span> <!>`, 1);
-var root_17 = $35.from_html(`<!> <!>`, 1);
+var root_18 = $35.from_html(`<!> <!>`, 1);
 function Toolbar_dropdown($$anchor, $$props) {
   $35.push($$props, true);
   let disabled = $35.prop($$props, "disabled", 3, false);
@@ -5060,7 +5212,7 @@ function Toolbar_dropdown($$anchor, $$props) {
       return $$props.id;
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment_1 = root_17();
+      var fragment_1 = root_18();
       var node = $35.first_child(fragment_1);
       {
         let $0 = $35.derived(() => classNames("toolbar-dropdown-trigger", $$props.class));
@@ -5076,7 +5228,7 @@ function Toolbar_dropdown($$anchor, $$props) {
             return $35.get($1);
           },
           children: ($$anchor3, $$slotProps2) => {
-            var fragment_2 = root_23();
+            var fragment_2 = root_24();
             var node_1 = $35.first_child(fragment_2);
             {
               var consequent = ($$anchor4) => {
@@ -5157,8 +5309,8 @@ function Toolbar_dropdown($$anchor, $$props) {
 }
 
 // src/components/markdown-editor/editor-toolbar/editor-toolbar.svelte
-var root_24 = $36.from_html(`<div class="toolbar-spacer svelte-1m9m099"></div> <!>`, 1);
-var root_18 = $36.from_html(`<div class="toolbar-group svelte-1m9m099" role="group" aria-label="History"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block type"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Text formatting"><!> <!> <!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Links"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Lists"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block operations"><!></div> <!>`, 1);
+var root_25 = $36.from_html(`<div class="toolbar-spacer svelte-1m9m099"></div> <!>`, 1);
+var root_19 = $36.from_html(`<div class="toolbar-group svelte-1m9m099" role="group" aria-label="History"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block type"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Text formatting"><!> <!> <!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Links"><!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Lists"><!> <!></div> <!> <div class="toolbar-group svelte-1m9m099" role="group" aria-label="Block operations"><!></div> <!>`, 1);
 function Editor_toolbar($$anchor, $$props) {
   $36.push($$props, true);
   let canUndo = $36.prop($$props, "canUndo", 3, false), canRedo = $36.prop($$props, "canRedo", 3, false), disabled = $36.prop($$props, "disabled", 3, false), linkPopoverOpen = $36.prop($$props, "linkPopoverOpen", 3, false), rest = $36.rest_props($$props, [
@@ -5279,7 +5431,7 @@ function Editor_toolbar($$anchor, $$props) {
       }
     }, () => rest, {
       children: ($$anchor2, $$slotProps) => {
-        var fragment_1 = root_18();
+        var fragment_1 = root_19();
         var div = $36.first_child(fragment_1);
         var node = $36.child(div);
         {
@@ -5541,7 +5693,7 @@ function Editor_toolbar($$anchor, $$props) {
         var node_16 = $36.sibling(div_5, 2);
         {
           var consequent = ($$anchor3) => {
-            var fragment_2 = root_24();
+            var fragment_2 = root_25();
             var node_17 = $36.sibling($36.first_child(fragment_2), 2);
             $36.snippet(node_17, () => $$props.actions);
             $36.append($$anchor3, fragment_2);
@@ -5566,22 +5718,22 @@ import { tick as tick2 } from "svelte";
 // src/components/button/button.svelte
 import"svelte/internal/disclose-version";
 import * as $37 from "svelte/internal/client";
-var root_25 = $37.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
+var root_26 = $37.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
 var root_4 = $37.from_html(`<span class="cinder-sr-only"> </span>`);
 var root_52 = $37.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
 var root_33 = $37.from_html(`<!> <!>`, 1);
 var root_8 = $37.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
-var root_19 = $37.from_html(`<!> <!> <!>`, 1);
+var root_110 = $37.from_html(`<!> <!> <!>`, 1);
 var root_9 = $37.from_html(`<a><!></a>`);
 var root_10 = $37.from_html(`<button><!></button>`);
 function Button($$anchor, $$props) {
   $37.push($$props, true);
   const buttonContent = ($$anchor2) => {
-    var fragment = root_19();
+    var fragment = root_110();
     var node = $37.first_child(fragment);
     {
       var consequent = ($$anchor3) => {
-        var span = root_25();
+        var span = root_26();
         var node_1 = $37.child(span);
         $37.snippet(node_1, () => $$props.leadingIcon);
         $37.reset(span);
@@ -5844,11 +5996,11 @@ function commitValue(proposed, onValueChange, setValue) {
 
 // src/components/input/input.svelte
 var calendarIcon = ($$anchor) => {
-  var svg = root_110();
+  var svg = root_111();
   $38.append($$anchor, svg);
 };
-var root_110 = $38.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
-var root_26 = $38.from_html(`<input/>`);
+var root_111 = $38.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
+var root_27 = $38.from_html(`<input/>`);
 var root_42 = $38.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
 var root_34 = $38.from_html(`<label class="cinder-input-field__label"> <!></label>`);
 var root_62 = $38.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
@@ -5861,7 +6013,7 @@ var root12 = $38.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div
 function Input($$anchor, $$props) {
   $38.push($$props, true);
   const inputElement = ($$anchor2) => {
-    var input = root_26();
+    var input = root_27();
     $38.attribute_effect(input, ($0) => ({
       id: $$props.id,
       type: type(),
@@ -6679,8 +6831,8 @@ function Markdown_editor($$anchor, $$props) {
     getPlugins: () => plugins(),
     getPlaceholderCompletion: () => $$props.placeholderCompletion,
     getPlaceholderDecoration: () => $$props.placeholderDecoration,
-    onready: (state11) => {
-      $42.set(editorState, state11, true);
+    onready: (state12) => {
+      $42.set(editorState, state12, true);
       $42.set(isInitializing, false);
       $$props.onready?.();
     },
@@ -7096,4 +7248,4 @@ export {
   Markdown_editor as MarkdownEditor
 };
 
-//# debugId=8D9BBB18489EA95464756E2164756E21
+//# debugId=13DC79C3BE7E9EF164756E2164756E21