@lostgradient/cinder 0.3.0 → 0.4.0

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

@@ -2152,7 +2152,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);
@@ -4118,6 +4119,10 @@ function createBodyScrollLock() {
     return release;
   };
 }
+function isInsideEventPath(event2, element2) {
+  const path = event2.composedPath();
+  return path.some((entry) => entry instanceof Node && element2.contains(entry));
+}
 function createClickOutside(options) {
   const { handler, enabled = true, eventType = "click", capture = true, ignoreRefs } = options;
   return (node) => {
@@ -4125,17 +4130,19 @@ function createClickOutside(options) {
       const isEnabled = typeof enabled === "function" ? enabled() : enabled;
       if (!isEnabled)
         return;
+      if (event2.type === "touchstart" && !event2.cancelable)
+        return;
       const target = event2.target;
       if (!(target instanceof Node)) {
         handler();
         return;
       }
-      if (node.contains(target))
+      if (isInsideEventPath(event2, node))
         return;
       if (ignoreRefs) {
         for (const ref of ignoreRefs) {
           const element2 = ref();
-          if (element2 && element2.contains(target))
+          if (element2 && isInsideEventPath(event2, element2))
             return;
         }
       }
@@ -4478,11 +4485,10 @@ function Dropdown_trigger($$anchor, $$props) {
   const context = getDropdownContext();
   const registerTrigger = getDropdownRegisterTrigger();
   const setOpen = getDropdownSetOpen();
-  let triggerElement = $32.state(null);
-  $32.user_effect(() => {
-    registerTrigger($32.get(triggerElement));
+  function attachTrigger(node) {
+    registerTrigger(node);
     return () => registerTrigger(null);
-  });
+  }
   function handleClick(event3) {
     if (typeof $$props.onclick === "function") {
       $$props.onclick(event3);
@@ -4503,32 +4509,32 @@ function Dropdown_trigger($$anchor, $$props) {
     onclick: handleClick,
     ...rest
   }), [() => classNames("cinder-dropdown-trigger", $$props.class)]);
-  var node = $32.child(button);
+  var node_1 = $32.child(button);
   {
     var consequent = ($$anchor2) => {
       var fragment = $32.comment();
-      var node_1 = $32.first_child(fragment);
-      $32.snippet(node_1, () => $$props.children);
+      var node_2 = $32.first_child(fragment);
+      $32.snippet(node_2, () => $$props.children);
       $32.append($$anchor2, fragment);
     };
-    $32.if(node, ($$render) => {
+    $32.if(node_1, ($$render) => {
       if ($$props.children)
         $$render(consequent);
     });
   }
-  var node_2 = $32.sibling(node, 2);
+  var node_3 = $32.sibling(node_1, 2);
   {
     var consequent_1 = ($$anchor2) => {
       var svg = root_22();
       $32.append($$anchor2, svg);
     };
-    $32.if(node_2, ($$render) => {
+    $32.if(node_3, ($$render) => {
       if (showCaret())
         $$render(consequent_1);
     });
   }
   $32.reset(button);
-  $32.bind_this(button, ($$value) => $32.set(triggerElement, $$value), () => $32.get(triggerElement));
+  $32.attach(button, () => attachTrigger);
   $32.append($$anchor, button);
   $32.pop();
 }
@@ -4537,23 +4543,236 @@ function Dropdown_trigger($$anchor, $$props) {
 import"svelte/internal/disclose-version";
 import * as $33 from "svelte/internal/client";
 import { tick } from "svelte";
+
+// 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(element2, fallback) {
+  let currentElement = element2 ?? 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(element2);
+  const rootComputedDirection = readComputedTextDirection(element2?.ownerDocument.documentElement);
+  if (computedDirection && computedDirection !== rootComputedDirection)
+    return computedDirection;
+  if (computedDirection && fallback && computedDirection !== fallback && hasDirectionStylingHint(element2)) {
+    return computedDirection;
+  }
+  if (!fallback && computedDirection === "rtl")
+    return computedDirection;
+  if (fallback)
+    return fallback;
+  if (documentDirection)
+    return documentDirection;
+  return;
+}
+function readComputedTextDirection(element2) {
+  if (!element2 || typeof getComputedStyle !== "function")
+    return;
+  const direction = getComputedStyle(element2).direction;
+  return direction === "rtl" || direction === "ltr" ? direction : undefined;
+}
+function hasDirectionStylingHint(element2) {
+  let currentElement = element2?.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(element2) {
+  for (const sheet of Array.from(element2.ownerDocument.styleSheets)) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (matchesDirectionStyleRuleList(element2, rules))
+      return true;
+  }
+  return false;
+}
+function matchesDirectionStyleRuleList(element2, rules) {
+  for (const rule of Array.from(rules)) {
+    if (isCssStyleRule(rule)) {
+      if (!rule.style.direction) {
+        const nestedRules2 = readNestedCssRules(rule);
+        if (nestedRules2 && matchesDirectionStyleRuleList(element2, nestedRules2))
+          return true;
+        continue;
+      }
+      try {
+        if (element2.matches(rule.selectorText))
+          return true;
+      } catch {
+        continue;
+      }
+    }
+    const nestedRules = readNestedCssRules(rule);
+    if (nestedRules && isConditionalRuleActive(rule) && matchesDirectionStyleRuleList(element2, 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(element2, onChange) {
+  if (!element2 || typeof MutationObserver === "undefined")
+    return;
+  const observedElement = element2;
+  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/components/dropdown-menu/dropdown-menu.svelte
 var root_15 = $33.from_html(`<div><!></div>`);
 function Dropdown_menu($$anchor, $$props) {
   $33.push($$props, true);
-  let rest = $33.rest_props($$props, ["$$slots", "$$events", "$$legacy", "class", "children"]);
+  let rest = $33.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "class",
+    "children",
+    "dir"
+  ]);
   const context = getDropdownContext();
   const registerMenu = getDropdownRegister();
   const setOpen = getDropdownSetOpen();
+  const localeContext = getLocaleContext();
+  let directionRevision = $33.state(0);
+  const resolvedDirection = $33.derived(() => {
+    $33.get(directionRevision);
+    if ($$props.dir === "auto") {
+      return resolveTextDirection(context.anchorElement, localeContext?.direction) ?? $$props.dir;
+    }
+    return $$props.dir ?? resolveTextDirection(context.anchorElement, localeContext?.direction);
+  });
+  const fallbackAnchorElement = $33.derived(() => context.fallbackAnchorElement === undefined ? context.anchorElement : context.fallbackAnchorElement);
   let menuElement = $33.state(null);
   let focusedFallbackOpen = false;
   const anchoredFallback = createAnchoredOverlay({
-    open: () => context.isOpen && !context.supportsPopover && Boolean(context.anchorElement),
-    anchor: () => context.anchorElement,
+    open: () => context.isOpen && !context.supportsPopover && Boolean($33.get(fallbackAnchorElement)),
+    anchor: () => $33.get(fallbackAnchorElement),
     panel: () => $33.get(menuElement),
     placement: () => context.fallbackPlacement ?? "bottom-end",
     offset: () => 4,
     widthMode: () => context.widthMode ?? "menu"
   });
+  const fallbackPositionStyle = $33.derived(() => context.fallbackPositionStyle ?? ($33.get(fallbackAnchorElement) ? anchoredFallback.positionStyle : undefined));
+  const fallbackPositionReady = $33.derived(() => context.fallbackPositionReady ?? ($33.get(fallbackAnchorElement) ? anchoredFallback.positionReady : undefined));
   const fallbackPortalAttachment = createPortalAttachment({
     target: () => typeof document === "undefined" ? null : document.body,
     source: () => context.anchorElement,
@@ -4564,6 +4783,13 @@ function Dropdown_menu($$anchor, $$props) {
     registerMenu($33.get(menuElement));
     return () => registerMenu(null);
   });
+  $33.user_effect(() => {
+    if ($$props.dir && $$props.dir !== "auto")
+      return;
+    return observeTextDirection(context.anchorElement, () => {
+      $33.set(directionRevision, $33.get(directionRevision) + 1);
+    });
+  });
   $33.user_effect(() => {
     if (context.supportsPopover || !context.isOpen) {
       focusedFallbackOpen = false;
@@ -4579,7 +4805,7 @@ function Dropdown_menu($$anchor, $$props) {
   function getOwnedMenuItems() {
     if (!$33.get(menuElement))
       return [];
-    return Array.from($33.get(menuElement).querySelectorAll('[role="menuitem"]: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="menuitemradio"]:not([data-disabled])')).filter((item) => item.closest('[role="menu"]') === $33.get(menuElement));
   }
   function focusMenuItem(index3) {
     const items = getOwnedMenuItems();
@@ -4642,14 +4868,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};` : $33.get(fallbackPositionStyle),
         role: "menu",
         "aria-orientation": "vertical",
-        "data-cinder-position-ready": !context.supportsPopover && context.anchorElement ? anchoredFallback.positionReady : undefined,
+        "data-cinder-position-ready": !context.supportsPopover && $33.get(fallbackPositionReady) !== undefined ? $33.get(fallbackPositionReady) : undefined,
         tabindex: -1,
         onkeydown: handleKeydown,
         ontoggle: context.supportsPopover ? handleToggle : undefined,
-        ...rest
+        ...rest,
+        dir: $33.get(resolvedDirection),
+        "data-cinder-explicit-direction": $33.get(resolvedDirection) ? "true" : undefined
       }), [
         () => classNames("cinder-_floating-surface", "cinder-dropdown-menu", $$props.class)
       ]);
@@ -4669,6 +4897,7 @@ function Dropdown_menu($$anchor, $$props) {
       $33.reset(div);
       $33.bind_this(div, ($$value) => $33.set(menuElement, $$value), () => $33.get(menuElement));
       $33.attach(div, () => fallbackPortalAttachment);
+      $33.template_effect(() => div.dir = div.dir);
       $33.append($$anchor2, div);
     };
     $33.if(node, ($$render) => {
@@ -4687,11 +4916,13 @@ var root_16 = $34.from_html(`<a><!></a>`);
 var root_32 = $34.from_html(`<button><!></button>`);
 function Dropdown_item($$anchor, $$props) {
   $34.push($$props, true);
-  let variant = $34.prop($$props, "variant", 3, "default"), inset = $34.prop($$props, "inset", 3, false), closeOnSelect = $34.prop($$props, "closeOnSelect", 3, true), rest = $34.rest_props($$props, [
+  let variant = $34.prop($$props, "variant", 3, "default"), itemRole = $34.prop($$props, "itemRole", 3, "menuitem"), checked = $34.prop($$props, "checked", 3, false), inset = $34.prop($$props, "inset", 3, false), closeOnSelect = $34.prop($$props, "closeOnSelect", 3, true), rest = $34.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
     "variant",
+    "itemRole",
+    "checked",
     "inset",
     "disabled",
     "closeOnSelect",
@@ -4733,18 +4964,20 @@ function Dropdown_item($$anchor, $$props) {
       return;
     event3.currentTarget.click();
   }
-  const anchorAttributes = rest;
-  const buttonAttributes = rest;
+  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);
   var fragment = $34.comment();
   var node = $34.first_child(fragment);
   {
     var consequent_1 = ($$anchor2) => {
       var a = root_16();
       $34.attribute_effect(a, () => ({
-        ...anchorAttributes,
+        ...$34.get(anchorAttributes),
         href: $$props.href,
-        role: "menuitem",
+        role: itemRole(),
+        "aria-checked": $34.get(ariaChecked),
         class: $34.get(sharedClass),
         "data-cinder-variant": variant(),
         tabindex: -1,
@@ -4772,9 +5005,10 @@ function Dropdown_item($$anchor, $$props) {
     var alternate = ($$anchor2) => {
       var button = root_32();
       $34.attribute_effect(button, () => ({
-        ...buttonAttributes,
+        ...$34.get(buttonAttributes),
         type: $34.get(buttonType),
-        role: "menuitem",
+        role: itemRole(),
+        "aria-checked": $34.get(ariaChecked),
         class: $34.get(sharedClass),
         "data-cinder-variant": variant(),
         tabindex: -1,
@@ -4881,6 +5115,10 @@ function Toolbar_dropdown($$anchor, $$props) {
                 get "data-active"() {
                   return $35.get($0);
                 },
+                itemRole: "menuitemradio",
+                get checked() {
+                  return $35.get(isActive);
+                },
                 children: ($$anchor5, $$slotProps3) => {
                   var fragment_6 = root_6();
                   var node_5 = $35.first_child(fragment_6);
@@ -4923,7 +5161,7 @@ var root_24 = $36.from_html(`<div class="toolbar-spacer svelte-1m9m099"></div> <
 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);
 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), rest = $36.rest_props($$props, [
+  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, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -4935,6 +5173,7 @@ function Editor_toolbar($$anchor, $$props) {
     "canUndo",
     "canRedo",
     "disabled",
+    "linkPopoverOpen",
     "onLinkClick",
     "onUndo",
     "onRedo",
@@ -5210,9 +5449,9 @@ function Editor_toolbar($$anchor, $$props) {
             get shortcut() {
               return $36.get($02);
             },
-            toggle: true,
-            get pressed() {
-              return $$props.activeMarks.link;
+            "aria-haspopup": "dialog",
+            get "aria-expanded"() {
+              return linkPopoverOpen();
             },
             get disabled() {
               return disabled();
@@ -5322,6 +5561,7 @@ function Editor_toolbar($$anchor, $$props) {
 // src/components/markdown-editor/editor-toolbar/link-popover.svelte
 import"svelte/internal/disclose-version";
 import * as $41 from "svelte/internal/client";
+import { tick as tick2 } from "svelte";
 
 // src/components/button/button.svelte
 import"svelte/internal/disclose-version";
@@ -5588,26 +5828,20 @@ function resolveFieldControl(input) {
 }
 
 // src/_internal/form-field-context.ts
-import { createContext as createContext3 } from "svelte";
-
-// src/_internal/optional-context.ts
-function optionalContext(getStrict) {
-  return () => {
-    try {
-      return getStrict();
-    } catch {
-      return;
-    }
-  };
-}
-
-// src/_internal/form-field-context.ts
-var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext3();
+import { createContext as createContext4 } from "svelte";
+var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext4();
 function setFormFieldContext(context) {
   setFormFieldContextRaw(context);
 }
 var getFormFieldContext = optionalContext(getFormFieldContextStrict);
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/input/input.svelte
 var calendarIcon = ($$anchor) => {
   var svg = root_110();
@@ -5615,13 +5849,14 @@ var calendarIcon = ($$anchor) => {
 };
 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_34 = $38.from_html(`<label class="cinder-input-field__label"> </label>`);
-var root_53 = $38.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
-var root_62 = $38.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
-var root_7 = $38.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
-var root_42 = $38.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
-var root_92 = $38.from_html(`<p class="cinder-input-field__description"> </p>`);
-var root_102 = $38.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
+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>`);
+var root_7 = $38.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
+var root_82 = $38.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
+var root_53 = $38.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
+var root_102 = $38.from_html(`<p class="cinder-input-field__description"> </p>`);
+var root_11 = $38.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
 var root12 = $38.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
 function Input($$anchor, $$props) {
   $38.push($$props, true);
@@ -5630,15 +5865,17 @@ function Input($$anchor, $$props) {
     $38.attribute_effect(input, ($0) => ({
       id: $$props.id,
       type: type(),
+      ...rest,
       disabled: $38.get(resolvedDisabled),
       required: $38.get(resolvedRequired),
+      value: value(),
+      oninput: handleInput,
       class: $0,
       "data-cinder-native-date": $38.get(rendersNativeDateIcon) ? "" : undefined,
       "aria-invalid": $38.get(resolvedAriaInvalid),
-      "aria-describedby": $38.get(describedBy),
-      ...rest
+      "aria-describedby": $38.get(describedBy)
     }), [() => classNames("cinder-input", $$props.class)], undefined, undefined, undefined, true);
-    $38.bind_value(input, value);
+    $38.bind_this(input, ($$value) => $38.set(inputNode, $$value), () => $38.get(inputNode));
     $38.append($$anchor2, input);
   };
   let value = $38.prop($$props, "value", 15, ""), type = $38.prop($$props, "type", 3, "text"), leadingInteractive = $38.prop($$props, "leadingInteractive", 3, false), trailingInteractive = $38.prop($$props, "trailingInteractive", 3, false), rest = $38.rest_props($$props, [
@@ -5647,6 +5884,7 @@ function Input($$anchor, $$props) {
     "$$legacy",
     "id",
     "value",
+    "onValueChange",
     "label",
     "description",
     "error",
@@ -5658,7 +5896,9 @@ function Input($$anchor, $$props) {
     "trailing",
     "leadingInteractive",
     "trailingInteractive",
-    "aria-describedby"
+    "aria-describedby",
+    "aria-invalid",
+    "oninput"
   ]);
   const context = getFormFieldContext();
   $38.user_effect(() => {
@@ -5666,83 +5906,134 @@ function Input($$anchor, $$props) {
       devWarn(`[cinder/Input] id mismatch: Input id="${$$props.id}" but wrapping FormField expects controlId="${context.controlId}". Set the same id on both.`);
     }
   });
-  const defaultDescriptionId = $38.derived(() => describeId($$props.id, !!$$props.description));
-  const defaultErrorId = $38.derived(() => errorId($$props.id, !!$$props.error));
-  const ownDescriptionId = $38.derived(() => $$props.description && $38.get(defaultDescriptionId) === context?.descriptionId ? `${$$props.id}-input-description` : $38.get(defaultDescriptionId));
-  const ownErrorId = $38.derived(() => $$props.error && $38.get(defaultErrorId) === context?.errorId ? `${$$props.id}-input-error` : $38.get(defaultErrorId));
-  const resolvedDescriptionId = $38.derived(() => $38.get(ownDescriptionId) ?? context?.descriptionId);
-  const resolvedErrorId = $38.derived(() => $38.get(ownErrorId) ?? context?.errorId);
-  const describedBy = $38.derived(() => composeDescribedBy($38.get(resolvedDescriptionId), $38.get(resolvedErrorId), $$props["aria-describedby"]));
-  const resolvedAriaInvalid = $38.derived(() => $$props.error ? ariaInvalid(true) : context?.invalid ?? rest["aria-invalid"] ?? ariaInvalid(false));
-  const resolvedRequired = $38.derived(() => $$props.required ?? context?.required ?? false);
-  const resolvedDisabled = $38.derived(() => $$props.disabled ?? context?.disabled ?? false);
+  const field = $38.derived(() => resolveFieldControl({
+    id: $$props.id,
+    generatedId: $$props.id,
+    context,
+    hasDescription: !!$$props.description,
+    hasError: !!$$props.error,
+    localIdNamespace: "input",
+    consumerDescribedBy: $$props["aria-describedby"],
+    consumerInvalid: $$props["aria-invalid"],
+    required: $$props.required,
+    disabled: $$props.disabled
+  }));
+  const ownDescriptionId = $38.derived(() => $38.get(field).ownDescriptionId);
+  const ownErrorId = $38.derived(() => $38.get(field).ownErrorId);
+  const describedBy = $38.derived(() => $38.get(field).describedBy);
+  const resolvedAriaInvalid = $38.derived(() => $38.get(field).ariaInvalid);
+  const resolvedRequired = $38.derived(() => $38.get(field).required);
+  const resolvedDisabled = $38.derived(() => $38.get(field).disabled);
   const isNativeDateInput = $38.derived(() => type() === "date");
   const rendersNativeDateIcon = $38.derived(() => $38.get(isNativeDateInput) && !$$props.trailing);
   const hasTrailing = $38.derived(() => !!$$props.trailing || $38.get(isNativeDateInput));
   const hasGroupWrapper = $38.derived(() => !!$$props.leading || $38.get(hasTrailing));
-  const isInvalid = $38.derived(() => $38.get(resolvedAriaInvalid) === "true" || $38.get(resolvedAriaInvalid) === true);
+  const isInvalid = $38.derived(() => $38.get(resolvedAriaInvalid) === "true");
+  let inputNode = $38.state(undefined);
+  let resetSyncTimeout;
+  function syncValueAfterFormReset() {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if ($38.get(inputNode))
+        value($38.get(inputNode).value);
+    }, 0);
+  }
+  $38.user_effect(() => {
+    const form = $38.get(inputNode)?.form;
+    if (!form)
+      return;
+    form.addEventListener("reset", syncValueAfterFormReset);
+    return () => {
+      form.removeEventListener("reset", syncValueAfterFormReset);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+  function handleInput(event3) {
+    const target = event3.currentTarget;
+    const committed = commitValue(target.value, $$props.onValueChange, (next) => {
+      value(next);
+    });
+    target.value = committed;
+    $$props.oninput?.(event3);
+  }
   var div = root12();
   var node = $38.child(div);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       var label_1 = root_34();
-      var text2 = $38.child(label_1, true);
+      var text2 = $38.child(label_1);
+      var node_1 = $38.sibling(text2);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_42();
+          $38.append($$anchor3, span);
+        };
+        $38.if(node_1, ($$render) => {
+          if ($38.get(resolvedRequired))
+            $$render(consequent);
+        });
+      }
       $38.reset(label_1);
       $38.template_effect(() => {
         $38.set_attribute(label_1, "for", $$props.id);
         $38.set_attribute(label_1, "data-disabled", $38.get(resolvedDisabled) || undefined);
-        $38.set_text(text2, $$props.label);
+        $38.set_text(text2, `${$$props.label ?? ""} `);
       });
       $38.append($$anchor2, label_1);
     };
     $38.if(node, ($$render) => {
       if ($$props.label)
-        $$render(consequent);
+        $$render(consequent_1);
     });
   }
-  var node_1 = $38.sibling(node, 2);
+  var node_2 = $38.sibling(node, 2);
   {
-    var consequent_4 = ($$anchor2) => {
-      var div_1 = root_42();
-      var node_2 = $38.child(div_1);
-      {
-        var consequent_1 = ($$anchor3) => {
-          var span = root_53();
-          var node_3 = $38.child(span);
-          $38.snippet(node_3, () => $$props.leading);
-          $38.reset(span);
-          $38.template_effect(() => $38.set_attribute(span, "aria-hidden", leadingInteractive() ? undefined : "true"));
-          $38.append($$anchor3, span);
-        };
-        $38.if(node_2, ($$render) => {
-          if ($$props.leading)
-            $$render(consequent_1);
-        });
-      }
-      var node_4 = $38.sibling(node_2, 2);
-      inputElement(node_4);
-      var node_5 = $38.sibling(node_4, 2);
+    var consequent_5 = ($$anchor2) => {
+      var div_1 = root_53();
+      var node_3 = $38.child(div_1);
       {
         var consequent_2 = ($$anchor3) => {
           var span_1 = root_62();
-          var node_6 = $38.child(span_1);
-          $38.snippet(node_6, () => $$props.trailing);
+          var node_4 = $38.child(span_1);
+          $38.snippet(node_4, () => $$props.leading);
           $38.reset(span_1);
-          $38.template_effect(() => $38.set_attribute(span_1, "aria-hidden", trailingInteractive() ? undefined : "true"));
+          $38.template_effect(() => $38.set_attribute(span_1, "aria-hidden", leadingInteractive() ? undefined : "true"));
           $38.append($$anchor3, span_1);
         };
+        $38.if(node_3, ($$render) => {
+          if ($$props.leading)
+            $$render(consequent_2);
+        });
+      }
+      var node_5 = $38.sibling(node_3, 2);
+      inputElement(node_5);
+      var node_6 = $38.sibling(node_5, 2);
+      {
         var consequent_3 = ($$anchor3) => {
           var span_2 = root_7();
           var node_7 = $38.child(span_2);
-          calendarIcon(node_7);
+          $38.snippet(node_7, () => $$props.trailing);
           $38.reset(span_2);
+          $38.template_effect(() => $38.set_attribute(span_2, "aria-hidden", trailingInteractive() ? undefined : "true"));
           $38.append($$anchor3, span_2);
         };
-        $38.if(node_5, ($$render) => {
+        var consequent_4 = ($$anchor3) => {
+          var span_3 = root_82();
+          var node_8 = $38.child(span_3);
+          calendarIcon(node_8);
+          $38.reset(span_3);
+          $38.append($$anchor3, span_3);
+        };
+        $38.if(node_6, ($$render) => {
           if ($$props.trailing)
-            $$render(consequent_2);
+            $$render(consequent_3);
           else if ($38.get(rendersNativeDateIcon))
-            $$render(consequent_3, 1);
+            $$render(consequent_4, 1);
         });
       }
       $38.reset(div_1);
@@ -5758,17 +6049,17 @@ function Input($$anchor, $$props) {
     var alternate = ($$anchor2) => {
       inputElement($$anchor2);
     };
-    $38.if(node_1, ($$render) => {
+    $38.if(node_2, ($$render) => {
       if ($38.get(hasGroupWrapper))
-        $$render(consequent_4);
+        $$render(consequent_5);
       else
         $$render(alternate, -1);
     });
   }
-  var node_8 = $38.sibling(node_1, 2);
+  var node_9 = $38.sibling(node_2, 2);
   {
-    var consequent_5 = ($$anchor2) => {
-      var p = root_92();
+    var consequent_6 = ($$anchor2) => {
+      var p = root_102();
       var text_1 = $38.child(p, true);
       $38.reset(p);
       $38.template_effect(() => {
@@ -5777,15 +6068,15 @@ function Input($$anchor, $$props) {
       });
       $38.append($$anchor2, p);
     };
-    $38.if(node_8, ($$render) => {
+    $38.if(node_9, ($$render) => {
       if ($$props.description)
-        $$render(consequent_5);
+        $$render(consequent_6);
     });
   }
-  var node_9 = $38.sibling(node_8, 2);
+  var node_10 = $38.sibling(node_9, 2);
   {
-    var consequent_6 = ($$anchor2) => {
-      var p_1 = root_102();
+    var consequent_7 = ($$anchor2) => {
+      var p_1 = root_11();
       var text_2 = $38.child(p_1, true);
       $38.reset(p_1);
       $38.template_effect(() => {
@@ -5794,9 +6085,9 @@ function Input($$anchor, $$props) {
       });
       $38.append($$anchor2, p_1);
     };
-    $38.if(node_9, ($$render) => {
+    $38.if(node_10, ($$render) => {
       if ($$props.error)
-        $$render(consequent_6);
+        $$render(consequent_7);
     });
   }
   $38.reset(div);
@@ -5881,6 +6172,21 @@ function Link_popover($$anchor, $$props) {
   });
   let url = $41.state($41.proxy(initialUrl()));
   let text3 = $41.state($41.proxy(initialText()));
+  let initialFocusApplied = false;
+  $41.user_effect(() => {
+    if (initialFocusApplied)
+      return;
+    if (!$41.get(popoverElement))
+      return;
+    if (anchorElement() && !anchoredOverlay.positionReady)
+      return;
+    tick2().then(() => {
+      if (initialFocusApplied)
+        return;
+      document.getElementById(`${$$props.id}-url`)?.focus();
+      initialFocusApplied = true;
+    });
+  });
   const ALLOWED_PROTOCOLS = [
     "http:",
     "https:",
@@ -6099,8 +6405,8 @@ var root_54 = $42.from_html(`<div class="toolbar-actions svelte-1mxvqjb"><!></di
 var root_72 = $42.from_html(`<!> <!>`, 1);
 var root_63 = $42.from_html(`<div class="toolbar-mode-toggle svelte-1mxvqjb"><!></div>`);
 var root_36 = $42.from_html(`<div class="editor-toolbar-wrapper svelte-1mxvqjb"><!> <!> <!> <!></div>`);
-var root_11 = $42.from_html(`<div class="cinder-markdown-content prose markdown-editor surface svelte-1mxvqjb" role="application" tabindex="0"></div>`);
-var root_122 = $42.from_html(`<textarea class="markdown-editor surface source-mode svelte-1mxvqjb"></textarea>`);
+var root_112 = $42.from_html(`<div class="cinder-markdown-content prose markdown-editor surface svelte-1mxvqjb" role="application" tabindex="0"></div>`);
+var root_122 = $42.from_html(`<textarea class="markdown-editor surface source-mode svelte-1mxvqjb" aria-multiline="true"></textarea>`);
 var root14 = $42.from_html(`<div><!> <!> <!></div>`);
 function Markdown_editor($$anchor, $$props) {
   $42.push($$props, true);
@@ -6119,10 +6425,10 @@ function Markdown_editor($$anchor, $$props) {
     "showToolbar",
     "class",
     "onchange",
-    "onReady",
+    "onready",
     "onmodechange",
-    "onSelectionChange",
-    "onCommentShortcut",
+    "onselectionchange",
+    "oncommentshortcut",
     "plugins",
     "placeholderCompletion",
     "placeholderDecoration",
@@ -6329,7 +6635,7 @@ function Markdown_editor($$anchor, $$props) {
     $42.set(linkPopoverAnchorElement, null);
     $42.get(editorState)?.focus();
   }
-  function handleLinkInsert(url, text4) {
+  function handleLinkInsert(url, text4 = undefined) {
     if (!$42.get(editorContext))
       return;
     if (text4) {
@@ -6373,12 +6679,12 @@ function Markdown_editor($$anchor, $$props) {
     getPlugins: () => plugins(),
     getPlaceholderCompletion: () => $$props.placeholderCompletion,
     getPlaceholderDecoration: () => $$props.placeholderDecoration,
-    onReady: (state11) => {
+    onready: (state11) => {
       $42.set(editorState, state11, true);
       $42.set(isInitializing, false);
-      $$props.onReady?.();
+      $$props.onready?.();
     },
-    onChange: (markdown) => {
+    onchange: (markdown) => {
       isInternalUpdate = true;
       value(markdown);
       $$props.onchange?.(markdown);
@@ -6387,16 +6693,16 @@ function Markdown_editor($$anchor, $$props) {
         isInternalUpdate = false;
       });
     },
-    onSelectionChange: (selection) => {
+    onselectionchange: (selection) => {
       $42.update(selectionVersion);
-      $$props.onSelectionChange?.(selection);
+      $$props.onselectionchange?.(selection);
     },
-    onLinkShortcut: () => {
+    onlinkshortcut: () => {
       $42.set(capturedLinkRange, $42.get(lastKnownLinkRange), true);
       $42.set(linkPopoverAnchorElement, resolveLinkPopoverAnchor(), true);
       $42.set(linkPopoverOpen, true);
     },
-    onCommentShortcut: () => $$props.onCommentShortcut?.()
+    oncommentshortcut: () => $$props.oncommentshortcut?.()
   });
   let previousMode = mode();
   $42.user_effect(() => {
@@ -6588,6 +6894,9 @@ function Markdown_editor($$anchor, $$props) {
               get canRedo() {
                 return $42.get(canRedo);
               },
+              get linkPopoverOpen() {
+                return $42.get(linkPopoverOpen);
+              },
               get disabled() {
                 return $42.get($1);
               },
@@ -6692,7 +7001,7 @@ function Markdown_editor($$anchor, $$props) {
       var node_13 = $42.first_child(fragment_3);
       {
         var consequent_5 = ($$anchor3) => {
-          var div_5 = root_11();
+          var div_5 = root_112();
           let styles;
           $42.attach(div_5, () => editorAttachment);
           $42.template_effect(() => {
@@ -6787,4 +7096,4 @@ export {
   Markdown_editor as MarkdownEditor
 };
 
-//# debugId=20AD98FD57E5763164756E2164756E21
+//# debugId=8D9BBB18489EA95464756E2164756E21