@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/components/context-menu/index.js

@@ -1902,7 +1902,8 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   dir: element.getAttribute("dir"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const inheritedDir = inheritAttributes && source ? source.closest("[dir]")?.getAttribute("dir") : null;
+  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
     element.setAttribute("dir", nextDir);
@@ -2023,7 +2024,6 @@ import"@lostgradient/cinder/context-menu/styles";
 // src/components/context-menu-trigger/context-menu-trigger.svelte
 import"svelte/internal/disclose-version";
 import * as $3 from "svelte/internal/client";
-import { onDestroy } from "svelte";
 
 // src/components/dropdown/dropdown.context.ts
 import { createContext } from "svelte";
@@ -2068,11 +2068,13 @@ function Context_menu_trigger($$anchor, $$props) {
   let startY = 0;
   let suppressClick = false;
   let suppressNextContextmenu = false;
-  $3.user_effect(() => {
-    registerTrigger($3.get(triggerElement));
+  function attachTrigger(node) {
+    registerTrigger(node);
     return () => registerTrigger(null);
+  }
+  $3.user_effect(() => {
+    return () => clearLongPress();
   });
-  onDestroy(clearLongPress);
   function clearLongPress() {
     clearTimeout(longPressTimer);
     longPressTimer = undefined;
@@ -2148,7 +2150,8 @@ function Context_menu_trigger($$anchor, $$props) {
     event.preventDefault();
     const target = event.target instanceof HTMLElement ? event.target : $3.get(triggerElement);
     const rect = target?.getBoundingClientRect() ?? $3.get(triggerElement)?.getBoundingClientRect();
-    context.openAt(rect?.left ?? 0, rect?.bottom ?? 0);
+    const x = context.direction === "rtl" ? rect?.right : rect?.left;
+    context.openAt(x ?? 0, rect?.bottom ?? 0);
     callTriggerHandler($$props.onkeydown, event);
   }
   function handlePointerup(event) {
@@ -2179,10 +2182,11 @@ function Context_menu_trigger($$anchor, $$props) {
   }), [
     () => classNames("cinder-context-menu-trigger", $$props.class)
   ]);
-  var node = $3.child(div);
-  $3.snippet(node, () => $$props.children);
+  var node_1 = $3.child(div);
+  $3.snippet(node_1, () => $$props.children);
   $3.reset(div);
   $3.bind_this(div, ($$value) => $3.set(triggerElement, $$value), () => $3.get(triggerElement));
+  $3.attach(div, () => attachTrigger);
   $3.append($$anchor, div);
   $3.pop();
 }
@@ -2199,7 +2203,7 @@ function Dropdown_group($$anchor, $$props) {
     "$$legacy",
     "class",
     "children",
-    "ariaLabel",
+    "label",
     "labelledBy"
   ]);
   function normalizeAccessibleName(value, propertyName) {
@@ -2212,21 +2216,21 @@ function Dropdown_group($$anchor, $$props) {
     return trimmedValue;
   }
   const resolvedAccessibleName = $4.derived(() => {
-    const trimmedAriaLabel = normalizeAccessibleName($$props.ariaLabel, "ariaLabel");
+    const trimmedLabel = normalizeAccessibleName($$props.label, "label");
     const trimmedLabelledBy = normalizeAccessibleName($$props.labelledBy, "labelledBy");
-    const namedByLabel = trimmedAriaLabel !== undefined;
+    const namedByLabel = trimmedLabel !== undefined;
     const namedByReference = trimmedLabelledBy !== undefined;
     if (namedByLabel === namedByReference) {
-      throw new Error("DropdownGroup requires exactly one accessible naming strategy: ariaLabel or labelledBy.");
+      throw new Error("DropdownGroup requires exactly one accessible naming strategy: label or labelledBy.");
     }
-    return { ariaLabel: trimmedAriaLabel, labelledBy: trimmedLabelledBy };
+    return { label: trimmedLabel, labelledBy: trimmedLabelledBy };
   });
   var div = root3();
   $4.attribute_effect(div, ($0) => ({
     ...rest,
     class: $0,
     role: "group",
-    "aria-label": $4.get(resolvedAccessibleName).ariaLabel,
+    "aria-label": $4.get(resolvedAccessibleName).label,
     "aria-labelledby": $4.get(resolvedAccessibleName).labelledBy
   }), [() => classNames("cinder-dropdown-group", $$props.class)]);
   var node = $4.child(div);
@@ -2254,11 +2258,13 @@ var root_1 = $5.from_html(`<a><!></a>`);
 var root_3 = $5.from_html(`<button><!></button>`);
 function Dropdown_item($$anchor, $$props) {
   $5.push($$props, true);
-  let variant = $5.prop($$props, "variant", 3, "default"), inset = $5.prop($$props, "inset", 3, false), closeOnSelect = $5.prop($$props, "closeOnSelect", 3, true), rest = $5.rest_props($$props, [
+  let variant = $5.prop($$props, "variant", 3, "default"), itemRole = $5.prop($$props, "itemRole", 3, "menuitem"), checked = $5.prop($$props, "checked", 3, false), inset = $5.prop($$props, "inset", 3, false), closeOnSelect = $5.prop($$props, "closeOnSelect", 3, true), rest = $5.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "variant",
+    "itemRole",
+    "checked",
     "inset",
     "disabled",
     "closeOnSelect",
@@ -2300,18 +2306,20 @@ function Dropdown_item($$anchor, $$props) {
       return;
     event.currentTarget.click();
   }
-  const anchorAttributes = rest;
-  const buttonAttributes = rest;
+  const anchorAttributes = $5.derived(() => rest);
+  const buttonAttributes = $5.derived(() => rest);
   const buttonType = $5.derived(() => $$props.type ?? "button");
+  const ariaChecked = $5.derived(() => itemRole() === "menuitemcheckbox" || itemRole() === "menuitemradio" ? checked() : undefined);
   var fragment = $5.comment();
   var node = $5.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
       var a = root_1();
       $5.attribute_effect(a, () => ({
-        ...anchorAttributes,
+        ...$5.get(anchorAttributes),
         href: $$props.href,
-        role: "menuitem",
+        role: itemRole(),
+        "aria-checked": $5.get(ariaChecked),
         class: $5.get(sharedClass),
         "data-cinder-variant": variant(),
         tabindex: -1,
@@ -2339,9 +2347,10 @@ function Dropdown_item($$anchor, $$props) {
     var alternate = ($$anchor2) => {
       var button = root_3();
       $5.attribute_effect(button, () => ({
-        ...buttonAttributes,
+        ...$5.get(buttonAttributes),
         type: $5.get(buttonType),
-        role: "menuitem",
+        role: itemRole(),
+        "aria-checked": $5.get(ariaChecked),
         class: $5.get(sharedClass),
         "data-cinder-variant": variant(),
         tabindex: -1,
@@ -2574,24 +2583,280 @@ function createAnchoredOverlay(options) {
   };
 }
 
+// src/_internal/locale-context.ts
+import { createContext as createContext3 } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/locale-context.ts
+var [getLocaleContextStrict, setLocaleContextRaw] = createContext3();
+function setLocaleContext(context) {
+  setLocaleContextRaw(context);
+}
+var getLocaleContext = optionalContext(getLocaleContextStrict);
+
+// src/_internal/text-direction.ts
+function resolveTextDirection(element, fallback) {
+  let currentElement = element ?? null;
+  let documentDirection;
+  let styledDirectionElement = null;
+  while (currentElement) {
+    const direction = currentElement.getAttribute("dir")?.toLowerCase();
+    if (direction === "rtl" || direction === "ltr") {
+      if (typeof getComputedStyle === "function" && styledDirectionElement) {
+        const styledDirection2 = getComputedStyle(styledDirectionElement).direction;
+        if (styledDirection2 === "rtl" || styledDirection2 === "ltr")
+          return styledDirection2;
+      }
+      if (currentElement === currentElement.ownerDocument.documentElement) {
+        documentDirection = direction;
+        break;
+      }
+      return direction;
+    }
+    if (direction === "auto" && typeof getComputedStyle === "function") {
+      const computedDirection2 = getComputedStyle(currentElement).direction;
+      if (computedDirection2 === "rtl" || computedDirection2 === "ltr")
+        return computedDirection2;
+    }
+    const styledDirection = currentElement.style.direction;
+    if (!styledDirectionElement && (styledDirection === "rtl" || styledDirection === "ltr")) {
+      styledDirectionElement = currentElement;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  if (typeof getComputedStyle === "function" && styledDirectionElement) {
+    const direction = getComputedStyle(styledDirectionElement).direction;
+    if (direction === "rtl" || direction === "ltr")
+      return direction;
+  }
+  const computedDirection = readComputedTextDirection(element);
+  const rootComputedDirection = readComputedTextDirection(element?.ownerDocument.documentElement);
+  if (computedDirection && computedDirection !== rootComputedDirection)
+    return computedDirection;
+  if (computedDirection && fallback && computedDirection !== fallback && hasDirectionStylingHint(element)) {
+    return computedDirection;
+  }
+  if (!fallback && computedDirection === "rtl")
+    return computedDirection;
+  if (fallback)
+    return fallback;
+  if (documentDirection)
+    return documentDirection;
+  return;
+}
+function readComputedTextDirection(element) {
+  if (!element || typeof getComputedStyle !== "function")
+    return;
+  const direction = getComputedStyle(element).direction;
+  return direction === "rtl" || direction === "ltr" ? direction : undefined;
+}
+function hasDirectionStylingHint(element) {
+  let currentElement = element?.parentElement;
+  while (currentElement && currentElement !== currentElement.ownerDocument.documentElement) {
+    if (currentElement.style.direction)
+      return true;
+    if (matchesDirectionStyleRule(currentElement))
+      return true;
+    currentElement = currentElement.parentElement;
+  }
+  return false;
+}
+function matchesDirectionStyleRule(element) {
+  for (const sheet of Array.from(element.ownerDocument.styleSheets)) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (matchesDirectionStyleRuleList(element, rules))
+      return true;
+  }
+  return false;
+}
+function matchesDirectionStyleRuleList(element, rules) {
+  for (const rule of Array.from(rules)) {
+    if (isCssStyleRule(rule)) {
+      if (!rule.style.direction) {
+        const nestedRules2 = readNestedCssRules(rule);
+        if (nestedRules2 && matchesDirectionStyleRuleList(element, nestedRules2))
+          return true;
+        continue;
+      }
+      try {
+        if (element.matches(rule.selectorText))
+          return true;
+      } catch {
+        continue;
+      }
+    }
+    const nestedRules = readNestedCssRules(rule);
+    if (nestedRules && isConditionalRuleActive(rule) && matchesDirectionStyleRuleList(element, nestedRules)) {
+      return true;
+    }
+  }
+  return false;
+}
+function readNestedCssRules(rule) {
+  if (!("cssRules" in rule))
+    return;
+  try {
+    const nestedRules = Reflect.get(rule, "cssRules");
+    return isCssRuleCollection(nestedRules) ? nestedRules : undefined;
+  } catch {
+    return;
+  }
+}
+function isCssRuleCollection(value) {
+  if (typeof CSSRuleList !== "undefined" && value instanceof CSSRuleList)
+    return true;
+  return Array.isArray(value) && value.every(isCssRule);
+}
+function isCssRule(value) {
+  return typeof value === "object" && value !== null && typeof Reflect.get(value, "cssText") === "string" && typeof Reflect.get(value, "type") === "number";
+}
+function isCssStyleRule(rule) {
+  return typeof Reflect.get(rule, "selectorText") === "string" && typeof Reflect.get(rule, "style") === "object" && Reflect.get(rule, "style") !== null;
+}
+function isConditionalRuleActive(rule) {
+  const conditionText = Reflect.get(rule, "conditionText");
+  if (typeof conditionText !== "string" || !conditionText.trim())
+    return true;
+  if (isMediaRule(rule) && typeof matchMedia === "function") {
+    return matchMedia(conditionText).matches;
+  }
+  if (isSupportsRule(rule) && typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    return CSS.supports(conditionText);
+  }
+  return true;
+}
+function isMediaRule(rule) {
+  return typeof Reflect.get(rule, "media") === "object" && Reflect.get(rule, "media") !== null;
+}
+function isSupportsRule(rule) {
+  return rule.constructor.name === "CSSSupportsRule" || Reflect.get(rule, "type") === 12;
+}
+function observeTextDirection(element, onChange) {
+  if (!element || typeof MutationObserver === "undefined")
+    return;
+  const observedElement = element;
+  const observer = new MutationObserver((mutations) => {
+    if (mutations.some((mutation) => mutation.type === "attributes" && mutation.attributeName === "dir")) {
+      observeDirectionChain();
+    }
+    onChange();
+  });
+  function observeDirectionChain() {
+    observer.disconnect();
+    let currentElement = observedElement;
+    while (currentElement) {
+      const isAutoDirection = currentElement.getAttribute("dir")?.toLowerCase() === "auto";
+      observer.observe(currentElement, {
+        attributes: true,
+        attributeFilter: ["dir", "style", "class"],
+        childList: isAutoDirection,
+        characterData: isAutoDirection,
+        subtree: isAutoDirection
+      });
+      currentElement = currentElement.parentElement;
+    }
+  }
+  observeDirectionChain();
+  return () => observer.disconnect();
+}
+
+// src/utilities/typeahead.ts
+function isTypeaheadKey(event) {
+  return event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey && !event.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 index = (startIndex + offset3) % candidates.length;
+    const candidate = candidates[index];
+    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_12 = $8.from_html(`<div><!></div>`);
 function Dropdown_menu($$anchor, $$props) {
   $8.push($$props, true);
-  let rest = $8.rest_props($$props, ["$$slots", "$$events", "$$legacy", "class", "children"]);
+  let rest = $8.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "class",
+    "children",
+    "dir"
+  ]);
   const context = getDropdownContext();
   const registerMenu = getDropdownRegister();
   const setOpen = getDropdownSetOpen();
+  const localeContext = getLocaleContext();
+  let directionRevision = $8.state(0);
+  const resolvedDirection = $8.derived(() => {
+    $8.get(directionRevision);
+    if ($$props.dir === "auto") {
+      return resolveTextDirection(context.anchorElement, localeContext?.direction) ?? $$props.dir;
+    }
+    return $$props.dir ?? resolveTextDirection(context.anchorElement, localeContext?.direction);
+  });
+  const fallbackAnchorElement = $8.derived(() => context.fallbackAnchorElement === undefined ? context.anchorElement : context.fallbackAnchorElement);
   let menuElement = $8.state(null);
   let focusedFallbackOpen = false;
+  const typeaheadBuffer = new TypeaheadBuffer;
   const anchoredFallback = createAnchoredOverlay({
-    open: () => context.isOpen && !context.supportsPopover && Boolean(context.anchorElement),
-    anchor: () => context.anchorElement,
+    open: () => context.isOpen && !context.supportsPopover && Boolean($8.get(fallbackAnchorElement)),
+    anchor: () => $8.get(fallbackAnchorElement),
     panel: () => $8.get(menuElement),
     placement: () => context.fallbackPlacement ?? "bottom-end",
     offset: () => 4,
     widthMode: () => context.widthMode ?? "menu"
   });
+  const fallbackPositionStyle = $8.derived(() => context.fallbackPositionStyle ?? ($8.get(fallbackAnchorElement) ? anchoredFallback.positionStyle : undefined));
+  const fallbackPositionReady = $8.derived(() => context.fallbackPositionReady ?? ($8.get(fallbackAnchorElement) ? anchoredFallback.positionReady : undefined));
   const fallbackPortalAttachment = createPortalAttachment({
     target: () => typeof document === "undefined" ? null : document.body,
     source: () => context.anchorElement,
@@ -2602,6 +2867,20 @@ function Dropdown_menu($$anchor, $$props) {
     registerMenu($8.get(menuElement));
     return () => registerMenu(null);
   });
+  $8.user_effect(() => {
+    return () => typeaheadBuffer.reset();
+  });
+  $8.user_effect(() => {
+    if (!context.isOpen)
+      typeaheadBuffer.reset();
+  });
+  $8.user_effect(() => {
+    if ($$props.dir && $$props.dir !== "auto")
+      return;
+    return observeTextDirection(context.anchorElement, () => {
+      $8.set(directionRevision, $8.get(directionRevision) + 1);
+    });
+  });
   $8.user_effect(() => {
     if (context.supportsPopover || !context.isOpen) {
       focusedFallbackOpen = false;
@@ -2617,7 +2896,11 @@ function Dropdown_menu($$anchor, $$props) {
   function getOwnedMenuItems() {
     if (!$8.get(menuElement))
       return [];
-    return Array.from($8.get(menuElement).querySelectorAll('[role="menuitem"]:not([data-disabled])')).filter((item) => item.closest('[role="menu"]') === $8.get(menuElement));
+    return Array.from($8.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"]') === $8.get(menuElement));
   }
   function focusMenuItem(index) {
     const items = getOwnedMenuItems();
@@ -2660,6 +2943,16 @@ function Dropdown_menu($$anchor, $$props) {
       event.preventDefault();
       event.stopPropagation();
       focusMenuItem(itemsArray.length - 1);
+    } else if (isTypeaheadKey(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const match = findTypeaheadMatch(itemsArray.map((item, index) => ({
+        value: index,
+        label: item.textContent?.trim() ?? "",
+        disabled: item.hasAttribute("data-disabled")
+      })), typeaheadBuffer.push(event.key), currentIndex);
+      if (match !== undefined)
+        focusMenuItem(match);
     }
   }
   function handleToggle(event) {
@@ -2680,14 +2973,16 @@ function Dropdown_menu($$anchor, $$props) {
         id: context.menuId,
         popover: context.supportsPopover ? "auto" : undefined,
         class: $0,
-        style: context.supportsPopover ? `position-anchor: --${context.menuId};` : context.anchorElement ? anchoredFallback.positionStyle : undefined,
+        style: context.supportsPopover ? `position-anchor: --${context.menuId};` : $8.get(fallbackPositionStyle),
         role: "menu",
         "aria-orientation": "vertical",
-        "data-cinder-position-ready": !context.supportsPopover && context.anchorElement ? anchoredFallback.positionReady : undefined,
+        "data-cinder-position-ready": !context.supportsPopover && $8.get(fallbackPositionReady) !== undefined ? $8.get(fallbackPositionReady) : undefined,
         tabindex: -1,
         onkeydown: handleKeydown,
         ontoggle: context.supportsPopover ? handleToggle : undefined,
-        ...rest
+        ...rest,
+        dir: $8.get(resolvedDirection),
+        "data-cinder-explicit-direction": $8.get(resolvedDirection) ? "true" : undefined
       }), [
         () => classNames("cinder-_floating-surface", "cinder-dropdown-menu", $$props.class)
       ]);
@@ -2707,6 +3002,7 @@ function Dropdown_menu($$anchor, $$props) {
       $8.reset(div);
       $8.bind_this(div, ($$value) => $8.set(menuElement, $$value), () => $8.get(menuElement));
       $8.attach(div, () => fallbackPortalAttachment);
+      $8.template_effect(() => div.dir = div.dir);
       $8.append($$anchor2, div);
     };
     $8.if(node, ($$render) => {
@@ -2820,6 +3116,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) => {
@@ -2827,17 +3127,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;
         }
       }
@@ -2927,7 +3229,9 @@ function Context_menu($$anchor, $$props) {
   let capturedFocus = null;
   let requestedX = $10.state(0);
   let requestedY = $10.state(0);
+  let directionRevision = $10.state(0);
   let previouslyOpen = false;
+  const localeContext = getLocaleContext();
   function setOpen(nextOpen) {
     if (open() === nextOpen)
       return;
@@ -2971,11 +3275,20 @@ function Context_menu($$anchor, $$props) {
     };
   }
   const virtualReference = $10.derived(() => open() ? makeVirtualReference($$props.anchorPoint?.x ?? $10.get(requestedX), $$props.anchorPoint?.y ?? $10.get(requestedY)) : null);
+  const resolvedDirection = $10.derived(() => {
+    $10.get(directionRevision);
+    return resolveTextDirection($10.get(triggerElement), localeContext?.direction);
+  });
+  $10.user_effect(() => {
+    return observeTextDirection($10.get(triggerElement), () => {
+      $10.set(directionRevision, $10.get(directionRevision) + 1);
+    });
+  });
   const anchoredOverlay = createAnchoredOverlay({
     open: () => open(),
     anchor: () => $10.get(virtualReference),
     panel: () => $10.get(menuElement),
-    placement: () => "right-start",
+    placement: () => $10.get(resolvedDirection) === "rtl" ? "left-start" : "right-start",
     offset: () => 0,
     widthMode: () => "menu"
   });
@@ -2999,6 +3312,18 @@ function Context_menu($$anchor, $$props) {
     get supportsPopover() {
       return false;
     },
+    get anchorElement() {
+      return $10.get(triggerElement);
+    },
+    get fallbackAnchorElement() {
+      return null;
+    },
+    get fallbackPositionStyle() {
+      return anchoredOverlay.positionStyle;
+    },
+    get fallbackPositionReady() {
+      return anchoredOverlay.positionReady;
+    },
     get initialFocus() {
       return "first";
     },
@@ -3018,6 +3343,9 @@ function Context_menu($$anchor, $$props) {
     get longPressDelay() {
       return longPressDelay();
     },
+    get direction() {
+      return $10.get(resolvedDirection);
+    },
     openAt,
     close
   });
@@ -3027,17 +3355,15 @@ function Context_menu($$anchor, $$props) {
     const x = $$props.anchorPoint?.x ?? $10.get(requestedX);
     const y = $$props.anchorPoint?.y ?? $10.get(requestedY);
     const menu = $10.get(menuElement);
-    if (anchoredOverlay.positionStyle) {
-      menu.setAttribute("style", anchoredOverlay.positionStyle);
-    } else {
-      menu.removeAttribute("style");
-    }
-    menu.setAttribute("data-cinder-position-ready", String(anchoredOverlay.positionReady));
     menu.setAttribute("data-cinder-requested-x", String(x));
     menu.setAttribute("data-cinder-requested-y", String(y));
+    const ownsDirection = menu.dataset["cinderExplicitDirection"] !== "true";
+    if (ownsDirection && $10.get(resolvedDirection)) {
+      menu.setAttribute("dir", $10.get(resolvedDirection));
+    }
     return () => {
-      menu.removeAttribute("style");
-      menu.removeAttribute("data-cinder-position-ready");
+      if (ownsDirection)
+        menu.removeAttribute("dir");
       menu.removeAttribute("data-cinder-requested-x");
       menu.removeAttribute("data-cinder-requested-y");
     };
@@ -3079,4 +3405,4 @@ export {
   ContextMenu
 };
 
-//# debugId=2B8AC7DCB62A960964756E2164756E21
+//# debugId=2701D23C377C637E64756E2164756E21

package/dist/components/context-menu-trigger/index.js

@@ -24,7 +24,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // src/components/context-menu-trigger/context-menu-trigger.svelte
 import"svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-import { onDestroy } from "svelte";
 
 // src/utilities/class-names.ts
 function classNames(...parts) {
@@ -74,11 +73,13 @@ function Context_menu_trigger($$anchor, $$props) {
   let startY = 0;
   let suppressClick = false;
   let suppressNextContextmenu = false;
-  $.user_effect(() => {
-    registerTrigger($.get(triggerElement));
+  function attachTrigger(node) {
+    registerTrigger(node);
     return () => registerTrigger(null);
+  }
+  $.user_effect(() => {
+    return () => clearLongPress();
   });
-  onDestroy(clearLongPress);
   function clearLongPress() {
     clearTimeout(longPressTimer);
     longPressTimer = undefined;
@@ -154,7 +155,8 @@ function Context_menu_trigger($$anchor, $$props) {
     event.preventDefault();
     const target = event.target instanceof HTMLElement ? event.target : $.get(triggerElement);
     const rect = target?.getBoundingClientRect() ?? $.get(triggerElement)?.getBoundingClientRect();
-    context.openAt(rect?.left ?? 0, rect?.bottom ?? 0);
+    const x = context.direction === "rtl" ? rect?.right : rect?.left;
+    context.openAt(x ?? 0, rect?.bottom ?? 0);
     callTriggerHandler($$props.onkeydown, event);
   }
   function handlePointerup(event) {
@@ -185,10 +187,11 @@ function Context_menu_trigger($$anchor, $$props) {
   }), [
     () => classNames("cinder-context-menu-trigger", $$props.class)
   ]);
-  var node = $.child(div);
-  $.snippet(node, () => $$props.children);
+  var node_1 = $.child(div);
+  $.snippet(node_1, () => $$props.children);
   $.reset(div);
   $.bind_this(div, ($$value) => $.set(triggerElement, $$value), () => $.get(triggerElement));
+  $.attach(div, () => attachTrigger);
   $.append($$anchor, div);
   $.pop();
 }
@@ -200,4 +203,4 @@ export {
   Context_menu_trigger as ContextMenuTrigger
 };
 
-//# debugId=4D9FAB5DBB64924D64756E2164756E21
+//# debugId=8B9EF02B91564FD864756E2164756E21