@lostgradient/cinder 0.4.1 → 0.6.0

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

@@ -1,4 +1,34 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __returnValue = (v) => v;
 function __exportSetter(name, newValue) {
   this[name] = __returnValue.bind(null, newValue);
@@ -2150,9 +2180,10 @@ function resolvePortalTarget(target) {
 }
 function copyInheritedPortalAttributes(element, source, inheritAttributes, fallbackAttributes = {
   dir: element.getAttribute("dir"),
+  dataTheme: element.getAttribute("data-theme"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const preservesExplicitDirection = fallbackAttributes.preserveDirection || element.dataset["cinderExplicitDirection"] === "true";
   const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
@@ -2160,13 +2191,51 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   } else {
     element.removeAttribute("dir");
   }
-  const inheritedTheme = inheritAttributes && source ? source.closest("[data-cinder-theme]")?.getAttribute("data-cinder-theme") : null;
+  const preservesExplicitDataTheme = fallbackAttributes.preserveDataTheme === true;
+  const inheritedDataTheme = inheritAttributes && source && !preservesExplicitDataTheme && fallbackAttributes.dataTheme === null ? source.closest("[data-theme]")?.getAttribute("data-theme") : null;
+  const nextDataTheme = inheritedDataTheme ?? fallbackAttributes.dataTheme;
+  if (nextDataTheme) {
+    element.setAttribute("data-theme", nextDataTheme);
+  } else {
+    element.removeAttribute("data-theme");
+  }
+  const preservesExplicitTheme = fallbackAttributes.preserveTheme === true;
+  const inheritedTheme = inheritAttributes && source && !preservesExplicitTheme && fallbackAttributes.theme === null ? source.closest("[data-cinder-theme]")?.getAttribute("data-cinder-theme") : null;
   const nextTheme = inheritedTheme ?? fallbackAttributes.theme;
   if (nextTheme) {
     element.setAttribute("data-cinder-theme", nextTheme);
   } else {
     element.removeAttribute("data-cinder-theme");
   }
+  return {
+    dir: inheritedDir ?? null,
+    dataTheme: inheritedDataTheme ?? null,
+    theme: inheritedTheme ?? null
+  };
+}
+function observeInheritedPortalAttributes(source, inheritAttributes, syncAttributes) {
+  if (!inheritAttributes || !source || typeof MutationObserver === "undefined")
+    return null;
+  const observer = new MutationObserver(() => {
+    syncAttributes();
+  });
+  function observe(elementToObserve) {
+    if (!elementToObserve || observedElements.includes(elementToObserve))
+      return;
+    observedElements.push(elementToObserve);
+    observer.observe(elementToObserve, {
+      attributes: true,
+      attributeFilter: ["dir", "data-theme", "data-cinder-theme"]
+    });
+  }
+  const observedElements = [];
+  let ancestor = source;
+  while (ancestor) {
+    observe(ancestor);
+    ancestor = ancestor.parentElement;
+  }
+  observe(document.documentElement);
+  return () => observer.disconnect();
 }
 function createPortalAttachment(options = {}) {
   let lastWarnedUnresolvedKey = null;
@@ -2174,8 +2243,33 @@ function createPortalAttachment(options = {}) {
     const initialParent = element.parentElement;
     const initialAttributes = {
       dir: element.getAttribute("dir"),
+      dataTheme: element.getAttribute("data-theme"),
       theme: element.getAttribute("data-cinder-theme")
     };
+    const managedAttributes = { dir: null, dataTheme: null, theme: null };
+    function currentFallbackAttributes() {
+      const explicitAttributes = readOption(options.explicitAttributes ?? {});
+      const explicitDirection = explicitAttributes.dir;
+      const explicitDataTheme = explicitAttributes.dataTheme;
+      const explicitTheme = explicitAttributes.theme;
+      const direction = element.getAttribute("dir");
+      const dataTheme = element.getAttribute("data-theme");
+      const theme = element.getAttribute("data-cinder-theme");
+      return {
+        dir: explicitDirection !== undefined ? explicitDirection : direction !== managedAttributes.dir ? direction : initialAttributes.dir,
+        preserveDirection: explicitDirection !== undefined,
+        dataTheme: explicitDataTheme !== undefined ? explicitDataTheme : dataTheme !== managedAttributes.dataTheme ? dataTheme : null,
+        preserveDataTheme: explicitDataTheme !== undefined,
+        theme: explicitTheme !== undefined ? explicitTheme : theme !== managedAttributes.theme ? theme : null,
+        preserveTheme: explicitTheme !== undefined
+      };
+    }
+    function syncInheritedAttributes(source, inheritAttributes) {
+      const nextManagedAttributes = copyInheritedPortalAttributes(element, source, inheritAttributes, currentFallbackAttributes());
+      managedAttributes.dir = nextManagedAttributes.dir;
+      managedAttributes.dataTheme = nextManagedAttributes.dataTheme;
+      managedAttributes.theme = nextManagedAttributes.theme;
+    }
     const anchor = typeof document !== "undefined" ? document.createComment("@lostgradient/cinder/portal") : null;
     if (anchor && initialParent && element.parentNode === initialParent) {
       initialParent.insertBefore(anchor, element);
@@ -2188,26 +2282,31 @@ function createPortalAttachment(options = {}) {
       anchor.parentNode.insertBefore(element, anchor.nextSibling);
     }
     $3.user_effect(() => {
+      let stopObservingInheritedAttributes = null;
       const disabled = readOption(options.disabled ?? false);
       const inheritAttributes = readOption(options.inheritAttributes ?? true);
       const targetValue = readOption(options.target ?? null);
       const attributeSource = readOption(options.source ?? initialParent) ?? initialParent;
       const resolved = disabled ? null : resolvePortalTarget(targetValue);
       if (!disabled && resolved?.kind === "resolved") {
-        copyInheritedPortalAttributes(element, attributeSource, inheritAttributes, initialAttributes);
+        syncInheritedAttributes(attributeSource, inheritAttributes);
+        stopObservingInheritedAttributes = observeInheritedPortalAttributes(attributeSource, inheritAttributes, () => syncInheritedAttributes(attributeSource, inheritAttributes));
         resolved.target.appendChild(element);
         lastWarnedUnresolvedKey = null;
       } else if (!disabled && resolved?.kind === "unresolved") {
         restoreInline();
+        syncInheritedAttributes(null, false);
         if (lastWarnedUnresolvedKey !== resolved.key) {
           devWarn(`[cinder/portal] could not resolve portal target ${JSON.stringify(resolved.key)}.`);
           lastWarnedUnresolvedKey = resolved.key;
         }
       } else if (disabled) {
         restoreInline();
+        syncInheritedAttributes(null, false);
         lastWarnedUnresolvedKey = null;
       }
       return () => {
+        stopObservingInheritedAttributes?.();
         if (element.isConnected) {
           element.remove();
         }
@@ -2260,7 +2359,12 @@ function Portal($$anchor, $$props) {
   $4.attach(div, () => createPortalAttachment({
     target: () => target(),
     disabled: () => disabled(),
-    inheritAttributes: () => inheritAttributes()
+    inheritAttributes: () => inheritAttributes(),
+    explicitAttributes: () => ({
+      dir: $$props.dir,
+      dataTheme: rest["data-theme"],
+      theme: rest["data-cinder-theme"]
+    })
   }));
   $4.append($$anchor, div);
   $4.pop();
@@ -2468,7 +2572,10 @@ function stringify(value, indent = 2) {
   if (value === null || value === undefined)
     return "";
   try {
-    return JSON.stringify(value, null, indent);
+    const serializedValue = JSON.stringify(value, null, indent);
+    if (serializedValue !== undefined)
+      return serializedValue;
+    return typeof value === "number" || typeof value === "boolean" || typeof value === "symbol" ? String(value) : "[Unserializable value]";
   } catch {
     if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint" || typeof value === "symbol") {
       return String(value);
@@ -2482,7 +2589,7 @@ function stringifyOrNull(value, indent = 2) {
   if (typeof value === "string")
     return value;
   try {
-    return JSON.stringify(value, null, indent);
+    return JSON.stringify(value, null, indent) ?? null;
   } catch {
     return null;
   }
@@ -4361,7 +4468,7 @@ function Toolbar_button($$anchor, $$props) {
       }), [() => classNames("toolbar-button", $$props.class)], undefined, undefined, "svelte-143lto0");
       var node = $30.child(button);
       $30.component(node, () => $$props.icon, ($$anchor3, Icon_1) => {
-        Icon_1($$anchor3, { class: "icon-sm" });
+        Icon_1($$anchor3, { class: "cinder-icon-sm" });
       });
       $30.reset(button);
       $30.append($$anchor2, button);
@@ -4596,7 +4703,7 @@ function Dropdown($$anchor, $$props) {
       return $33.get(compoundTriggerElement);
     },
     get fallbackPlacement() {
-      return "bottom-end";
+      return placement();
     },
     get widthMode() {
       return "menu";
@@ -5002,9 +5109,8 @@ function isConditionalRuleActive(rule) {
   if (isMediaRule(rule) && typeof matchMedia === "function") {
     return matchMedia(conditionText).matches;
   }
-  if (isSupportsRule(rule) && typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+  if (isSupportsRule(rule) && typeof CSS !== "undefined" && typeof CSS.supports === "function")
     return CSS.supports(conditionText);
-  }
   return true;
 }
 function isMediaRule(rule) {
@@ -5064,25 +5170,27 @@ function findTypeaheadMatch(candidates, prefix, currentIndex) {
 }
 
 class TypeaheadBuffer {
-  #value = "";
-  #timer = null;
+  value;
+  timer;
+  constructor() {
+    this.value = "";
+    this.timer = null;
+  }
   push(character) {
     this.clearTimer();
-    this.#value += character.toLocaleLowerCase();
-    this.#timer = setTimeout(() => {
-      this.reset();
-    }, 500);
-    return this.#value;
+    this.value += character.toLocaleLowerCase();
+    this.timer = setTimeout(() => this.reset(), 500);
+    return this.value;
   }
   reset() {
     this.clearTimer();
-    this.#value = "";
+    this.value = "";
   }
   clearTimer() {
-    if (this.#timer === null)
+    if (this.timer === null)
       return;
-    clearTimeout(this.#timer);
-    this.#timer = null;
+    clearTimeout(this.timer);
+    this.timer = null;
   }
 }
 
@@ -5114,11 +5222,12 @@ function Dropdown_menu($$anchor, $$props) {
   let menuElement = $35.state(null);
   let focusedFallbackOpen = false;
   const typeaheadBuffer = new TypeaheadBuffer;
+  const preferredPlacement = $35.derived(() => context.fallbackPlacement ?? "bottom-start");
   const anchoredFallback = createAnchoredOverlay({
     open: () => context.isOpen && !context.supportsPopover && Boolean($35.get(fallbackAnchorElement)),
     anchor: () => $35.get(fallbackAnchorElement),
     panel: () => $35.get(menuElement),
-    placement: () => context.fallbackPlacement ?? "bottom-end",
+    placement: () => $35.get(preferredPlacement),
     offset: () => 4,
     widthMode: () => context.widthMode ?? "menu"
   });
@@ -5243,6 +5352,7 @@ function Dropdown_menu($$anchor, $$props) {
         style: context.supportsPopover ? `position-anchor: --${context.menuId};` : $35.get(fallbackPositionStyle),
         role: "menu",
         "aria-orientation": "vertical",
+        "data-cinder-placement": context.supportsPopover ? $35.get(preferredPlacement) : anchoredFallback.resolvedPlacement,
         "data-cinder-position-ready": !context.supportsPopover && $35.get(fallbackPositionReady) !== undefined ? $35.get(fallbackPositionReady) : undefined,
         tabindex: -1,
         onkeydown: handleKeydown,
@@ -5455,7 +5565,7 @@ function Toolbar_dropdown($$anchor, $$props) {
                 var fragment_3 = $37.comment();
                 var node_2 = $37.first_child(fragment_3);
                 $37.component(node_2, () => $37.get(currentOption).icon, ($$anchor5, currentOption_icon) => {
-                  currentOption_icon($$anchor5, { class: "icon-sm" });
+                  currentOption_icon($$anchor5, { class: "cinder-icon-sm" });
                 });
                 $37.append($$anchor4, fragment_3);
               };
@@ -5495,7 +5605,7 @@ function Toolbar_dropdown($$anchor, $$props) {
                   var fragment_6 = root_6();
                   var node_5 = $37.first_child(fragment_6);
                   $37.component(node_5, () => $37.get(option).icon, ($$anchor6, option_icon) => {
-                    option_icon($$anchor6, { class: "icon-sm" });
+                    option_icon($$anchor6, { class: "cinder-icon-sm" });
                   });
                   var span_1 = $37.sibling(node_5, 2);
                   var text_1 = $37.child(span_1, true);
@@ -5503,7 +5613,7 @@ function Toolbar_dropdown($$anchor, $$props) {
                   var node_6 = $37.sibling(span_1, 2);
                   {
                     var consequent_1 = ($$anchor6) => {
-                      Check($$anchor6, { class: "icon-sm dropdown-item-check" });
+                      Check($$anchor6, { class: "cinder-icon-sm dropdown-item-check" });
                     };
                     $37.if(node_6, ($$render) => {
                       if ($37.get(isActive))
@@ -6222,7 +6332,7 @@ var calendarIcon = ($$anchor) => {
 var root_111 = $40.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 = $40.from_html(`<input/>`);
 var root_42 = $40.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
-var root_34 = $40.from_html(`<label class="cinder-input-field__label"> <!></label>`);
+var root_34 = $40.from_html(`<label> <!></label>`);
 var root_62 = $40.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
 var root_7 = $40.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
 var root_82 = $40.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
@@ -6250,7 +6360,7 @@ function Input($$anchor, $$props) {
     $40.bind_this(input, ($$value) => $40.set(inputNode, $$value), () => $40.get(inputNode));
     $40.append($$anchor2, input);
   };
-  let value = $40.prop($$props, "value", 15, ""), type = $40.prop($$props, "type", 3, "text"), leadingInteractive = $40.prop($$props, "leadingInteractive", 3, false), trailingInteractive = $40.prop($$props, "trailingInteractive", 3, false), rest = $40.rest_props($$props, [
+  let value = $40.prop($$props, "value", 15, ""), hideLabel = $40.prop($$props, "hideLabel", 3, false), type = $40.prop($$props, "type", 3, "text"), leadingInteractive = $40.prop($$props, "leadingInteractive", 3, false), trailingInteractive = $40.prop($$props, "trailingInteractive", 3, false), rest = $40.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -6258,6 +6368,7 @@ function Input($$anchor, $$props) {
     "value",
     "onValueChange",
     "label",
+    "hideLabel",
     "description",
     "error",
     "disabled",
@@ -6351,11 +6462,14 @@ function Input($$anchor, $$props) {
         });
       }
       $40.reset(label_1);
-      $40.template_effect(() => {
+      $40.template_effect(($0) => {
         $40.set_attribute(label_1, "for", $$props.id);
+        $40.set_class(label_1, 1, $0);
         $40.set_attribute(label_1, "data-disabled", $40.get(resolvedDisabled) || undefined);
         $40.set_text(text2, `${$$props.label ?? ""} `);
-      });
+      }, [
+        () => $40.clsx(classNames("cinder-input-field__label", hideLabel() && "cinder-sr-only"))
+      ]);
       $40.append($$anchor2, label_1);
     };
     $40.if(node, ($$render) => {
@@ -6627,12 +6741,12 @@ function Link_popover($$anchor, $$props) {
   var header = $43.child(div);
   var h2 = $43.child(header);
   var node = $43.child(h2);
-  Link(node, { class: "icon-sm" });
+  Link(node, { class: "cinder-icon-sm" });
   var text_1 = $43.sibling(node);
   $43.reset(h2);
   var button = $43.sibling(h2, 2);
   var node_1 = $43.child(button);
-  X(node_1, { class: "icon-sm" });
+  X(node_1, { class: "cinder-icon-sm" });
   $43.reset(button);
   $43.reset(header);
   var div_1 = $43.sibling(header, 2);
@@ -6698,7 +6812,7 @@ function Link_popover($$anchor, $$props) {
         children: ($$anchor3, $$slotProps) => {
           var fragment_2 = root_35();
           var node_5 = $43.first_child(fragment_2);
-          Unlink(node_5, { class: "icon-sm" });
+          Unlink(node_5, { class: "cinder-icon-sm" });
           $43.next();
           $43.append($$anchor3, fragment_2);
         },
@@ -6777,9 +6891,9 @@ var root_54 = $44.from_html(`<div class="toolbar-actions svelte-1mxvqjb"><!></di
 var root_72 = $44.from_html(`<!> <!>`, 1);
 var root_63 = $44.from_html(`<div class="toolbar-mode-toggle svelte-1mxvqjb"><!></div>`);
 var root_36 = $44.from_html(`<div class="editor-toolbar-wrapper svelte-1mxvqjb"><!> <!> <!> <!></div>`);
-var root_112 = $44.from_html(`<div class="cinder-markdown-content prose markdown-editor surface svelte-1mxvqjb" role="application" tabindex="0"></div>`);
+var root_112 = $44.from_html(`<div class="cinder-markdown-content markdown-editor surface svelte-1mxvqjb" role="application" tabindex="0"></div>`);
 var root_122 = $44.from_html(`<textarea class="markdown-editor surface source-mode svelte-1mxvqjb" aria-multiline="true"></textarea>`);
-var root14 = $44.from_html(`<div><!> <!> <!></div>`);
+var root14 = $44.from_html(`<div><div class="markdown-editor-layout svelte-1mxvqjb"><!> <!></div> <!></div>`);
 function Markdown_editor($$anchor, $$props) {
   $44.push($$props, true);
   let label = $44.prop($$props, "label", 3, "Markdown editor"), value = $44.prop($$props, "value", 15, ""), mode = $44.prop($$props, "mode", 15, "wysiwyg"), showModeToggle = $44.prop($$props, "showModeToggle", 3, false), modeLabel = $44.prop($$props, "modeLabel", 3, "Editor mode"), readonly = $44.prop($$props, "readonly", 3, false), placeholder = $44.prop($$props, "placeholder", 3, "Start writing..."), showToolbar = $44.prop($$props, "showToolbar", 3, true), plugins = $44.prop($$props, "plugins", 19, () => []), snapshotMode = $44.prop($$props, "snapshotMode", 3, false), rest = $44.rest_props($$props, [
@@ -6822,6 +6936,7 @@ function Markdown_editor($$anchor, $$props) {
     }
   });
   const escapedPlaceholder = $44.derived(() => placeholder().replace(/'/g, "\\'"));
+  const accessibleEditorLabel = $44.derived(() => label().trim().length > 0 ? label().trim() : "Markdown editor");
   let editorState = $44.state(null);
   let isInitializing = $44.state(true);
   let pipelineUtilities = $44.state(null);
@@ -7046,7 +7161,7 @@ function Markdown_editor($$anchor, $$props) {
   const editorAttachment = createEditorAttachment({
     getInitialValue: () => normalizeSafely(value()),
     getReadonly: () => readonly(),
-    getAriaLabel: () => label(),
+    getAriaLabel: () => $44.get(accessibleEditorLabel),
     debounceMs: DEFAULT_DEBOUNCE_MS,
     getPlugins: () => plugins(),
     getPlaceholderCompletion: () => $$props.placeholderCompletion,
@@ -7151,6 +7266,7 @@ function Markdown_editor($$anchor, $$props) {
     const viewDom = $44.get(editorState)?.view?.dom;
     if (!viewDom)
       return;
+    viewDom.setAttribute("aria-label", $44.get(accessibleEditorLabel));
     if ($$props["aria-describedby"]) {
       viewDom.setAttribute("aria-describedby", $$props["aria-describedby"]);
     } else {
@@ -7212,7 +7328,8 @@ function Markdown_editor($$anchor, $$props) {
     "data-snapshot-mode": snapshotMode() || undefined,
     ...rest
   }), [() => classNames("markdown-editor-wrapper", $$props.class)], undefined, undefined, "svelte-1mxvqjb");
-  var node = $44.child(div);
+  var div_1 = $44.child(div);
+  var node = $44.child(div_1);
   {
     var consequent_4 = ($$anchor2) => {
       var fragment = $44.comment();
@@ -7225,15 +7342,15 @@ function Markdown_editor($$anchor, $$props) {
           $44.append($$anchor3, fragment_1);
         };
         var alternate = ($$anchor3) => {
-          var div_1 = root_36();
-          var node_3 = $44.child(div_1);
+          var div_2 = root_36();
+          var node_3 = $44.child(div_2);
           {
             var consequent_1 = ($$anchor4) => {
-              var div_2 = root_43();
-              var node_4 = $44.child(div_2);
+              var div_3 = root_43();
+              var node_4 = $44.child(div_3);
               $44.snippet(node_4, () => $$props.toolbarLeading, () => $44.get(toolbarContext));
-              $44.reset(div_2);
-              $44.append($$anchor4, div_2);
+              $44.reset(div_3);
+              $44.append($$anchor4, div_3);
             };
             $44.if(node_3, ($$render) => {
               if ($$props.toolbarLeading)
@@ -7280,11 +7397,11 @@ function Markdown_editor($$anchor, $$props) {
           var node_6 = $44.sibling(node_5, 2);
           {
             var consequent_2 = ($$anchor4) => {
-              var div_3 = root_54();
-              var node_7 = $44.child(div_3);
+              var div_4 = root_54();
+              var node_7 = $44.child(div_4);
               $44.snippet(node_7, () => $$props.toolbarActions, () => $44.get(toolbarContext));
-              $44.reset(div_3);
-              $44.append($$anchor4, div_3);
+              $44.reset(div_4);
+              $44.append($$anchor4, div_4);
             };
             $44.if(node_6, ($$render) => {
               if ($$props.toolbarActions)
@@ -7294,8 +7411,8 @@ function Markdown_editor($$anchor, $$props) {
           var node_8 = $44.sibling(node_6, 2);
           {
             var consequent_3 = ($$anchor4) => {
-              var div_4 = root_63();
-              var node_9 = $44.child(div_4);
+              var div_5 = root_63();
+              var node_9 = $44.child(div_5);
               {
                 let $0 = $44.derived(() => `${$$props.id}-mode-toggle`);
                 Segmented_control(node_9, {
@@ -7341,16 +7458,16 @@ function Markdown_editor($$anchor, $$props) {
                   $$slots: { default: true }
                 });
               }
-              $44.reset(div_4);
-              $44.append($$anchor4, div_4);
+              $44.reset(div_5);
+              $44.append($$anchor4, div_5);
             };
             $44.if(node_8, ($$render) => {
               if (showModeToggle())
                 $$render(consequent_3);
             });
           }
-          $44.reset(div_1);
-          $44.append($$anchor3, div_1);
+          $44.reset(div_2);
+          $44.append($$anchor3, div_2);
         };
         $44.if(node_1, ($$render) => {
           if ($$props.toolbar)
@@ -7373,18 +7490,18 @@ function Markdown_editor($$anchor, $$props) {
       var node_13 = $44.first_child(fragment_3);
       {
         var consequent_5 = ($$anchor3) => {
-          var div_5 = root_112();
+          var div_6 = root_112();
           let styles;
-          $44.attach(div_5, () => editorAttachment);
+          $44.attach(div_6, () => editorAttachment);
           $44.template_effect(() => {
-            $44.set_attribute(div_5, "id", $$props.id);
-            $44.set_attribute(div_5, "data-readonly", readonly() || undefined);
-            $44.set_attribute(div_5, "aria-label", label() || "Markdown editor");
-            styles = $44.set_style(div_5, "", styles, {
+            $44.set_attribute(div_6, "id", $$props.id);
+            $44.set_attribute(div_6, "data-readonly", readonly() || undefined);
+            $44.set_attribute(div_6, "aria-label", $44.get(accessibleEditorLabel));
+            styles = $44.set_style(div_6, "", styles, {
               "--editor-placeholder": `'${$44.get(escapedPlaceholder) ?? ""}'`
             });
           });
-          $44.append($$anchor3, div_5);
+          $44.append($$anchor3, div_6);
         };
         var alternate_1 = ($$anchor3) => {
           var textarea = root_122();
@@ -7393,7 +7510,7 @@ function Markdown_editor($$anchor, $$props) {
             $44.set_attribute(textarea, "id", $$props.id);
             $44.set_attribute(textarea, "placeholder", placeholder());
             textarea.readOnly = readonly() || undefined;
-            $44.set_attribute(textarea, "aria-label", label());
+            $44.set_attribute(textarea, "aria-label", $44.get(accessibleEditorLabel));
             $44.set_attribute(textarea, "aria-describedby", $$props["aria-describedby"]);
           });
           $44.delegated("input", textarea, (e) => $$props.onchange?.(e.currentTarget.value));
@@ -7419,7 +7536,8 @@ function Markdown_editor($$anchor, $$props) {
         $$render(alternate_2, -1);
     });
   }
-  var node_14 = $44.sibling(node_12, 2);
+  $44.reset(div_1);
+  var node_14 = $44.sibling(div_1, 2);
   {
     var consequent_7 = ($$anchor2) => {
       {
@@ -7719,7 +7837,7 @@ function Comment_list($$anchor, $$props) {
           var consequent_2 = ($$anchor4) => {
             var button = root_83();
             var node_7 = $47.child(button);
-            Pencil(node_7, { class: "icon-sm" });
+            Pencil(node_7, { class: "cinder-icon-sm" });
             $47.reset(button);
             $47.delegated("click", button, () => startEdit($47.get(comment29)));
             $47.append($$anchor4, button);
@@ -7735,7 +7853,7 @@ function Comment_list($$anchor, $$props) {
           var consequent_3 = ($$anchor4) => {
             var button_1 = root_92();
             var node_9 = $47.child(button_1);
-            Trash_2(node_9, { class: "icon-sm" });
+            Trash_2(node_9, { class: "cinder-icon-sm" });
             $47.reset(button_1);
             $47.delegated("click", button_1, () => $$props.ondelete?.($47.get(comment29).id));
             $47.append($$anchor4, button_1);
@@ -8082,7 +8200,7 @@ function Thread_popover($$anchor, $$props) {
     var consequent = ($$anchor2) => {
       var span = root_115();
       var node_1 = $50.child(span);
-      File_text(node_1, { class: "icon-xs" });
+      File_text(node_1, { class: "cinder-icon-xs" });
       $50.next();
       $50.reset(span);
       $50.append($$anchor2, span);
@@ -8120,7 +8238,7 @@ function Thread_popover($$anchor, $$props) {
           },
           "aria-label": "Delete thread",
           children: ($$anchor3, $$slotProps) => {
-            Trash_2($$anchor3, { class: "icon-sm" });
+            Trash_2($$anchor3, { class: "cinder-icon-sm" });
           },
           $$slots: { default: true }
         });
@@ -8133,7 +8251,7 @@ function Thread_popover($$anchor, $$props) {
   }
   var button = $50.sibling(node_2, 2);
   var node_3 = $50.child(button);
-  X(node_3, { class: "icon-sm" });
+  X(node_3, { class: "cinder-icon-sm" });
   $50.reset(button);
   $50.reset(div_2);
   $50.reset(div_1);
@@ -8550,7 +8668,7 @@ function Export_actions($$anchor, $$props) {
         children: ($$anchor3, $$slotProps2) => {
           var fragment_2 = root_38();
           var node_3 = $57.first_child(fragment_2);
-          Copy(node_3, { class: "icon-sm" });
+          Copy(node_3, { class: "cinder-icon-sm" });
           $57.next(2);
           $57.append($$anchor3, fragment_2);
         },
@@ -8570,10 +8688,10 @@ function Export_actions($$anchor, $$props) {
                   var node_6 = $57.first_child(fragment_5);
                   {
                     var consequent_1 = ($$anchor6) => {
-                      Check($$anchor6, { class: "icon-sm export-icon-success" });
+                      Check($$anchor6, { class: "cinder-icon-sm export-icon-success" });
                     };
                     var alternate = ($$anchor6) => {
-                      File_text($$anchor6, { class: "icon-sm" });
+                      File_text($$anchor6, { class: "cinder-icon-sm" });
                     };
                     $57.if(node_6, ($$render) => {
                       if (copyState.copiedKey === "content")
@@ -8615,10 +8733,10 @@ function Export_actions($$anchor, $$props) {
               var node_9 = $57.first_child(fragment_8);
               {
                 var consequent_4 = ($$anchor5) => {
-                  Check($$anchor5, { class: "icon-sm export-icon-success" });
+                  Check($$anchor5, { class: "cinder-icon-sm export-icon-success" });
                 };
                 var alternate_1 = ($$anchor5) => {
-                  File_text($$anchor5, { class: "icon-sm" });
+                  File_text($$anchor5, { class: "cinder-icon-sm" });
                 };
                 $57.if(node_9, ($$render) => {
                   if (copyState.copiedKey === "summary")
@@ -8654,10 +8772,10 @@ function Export_actions($$anchor, $$props) {
               var node_12 = $57.first_child(fragment_11);
               {
                 var consequent_6 = ($$anchor5) => {
-                  Check($$anchor5, { class: "icon-sm export-icon-success" });
+                  Check($$anchor5, { class: "cinder-icon-sm export-icon-success" });
                 };
                 var alternate_2 = ($$anchor5) => {
-                  Git_branch($$anchor5, { class: "icon-sm" });
+                  Git_branch($$anchor5, { class: "cinder-icon-sm" });
                 };
                 $57.if(node_12, ($$render) => {
                   if (copyState.copiedKey === "diff")
@@ -8695,10 +8813,10 @@ function Export_actions($$anchor, $$props) {
                   var node_15 = $57.first_child(fragment_15);
                   {
                     var consequent_8 = ($$anchor6) => {
-                      Check($$anchor6, { class: "icon-sm export-icon-success" });
+                      Check($$anchor6, { class: "cinder-icon-sm export-icon-success" });
                     };
                     var alternate_3 = ($$anchor6) => {
-                      Message_square($$anchor6, { class: "icon-sm" });
+                      Message_square($$anchor6, { class: "cinder-icon-sm" });
                     };
                     $57.if(node_15, ($$render) => {
                       if (copyState.copiedKey === "comments")
@@ -8740,10 +8858,10 @@ function Export_actions($$anchor, $$props) {
               var node_18 = $57.first_child(fragment_18);
               {
                 var consequent_11 = ($$anchor5) => {
-                  Check($$anchor5, { class: "icon-sm export-icon-success" });
+                  Check($$anchor5, { class: "cinder-icon-sm export-icon-success" });
                 };
                 var alternate_4 = ($$anchor5) => {
-                  File_code($$anchor5, { class: "icon-sm" });
+                  File_code($$anchor5, { class: "cinder-icon-sm" });
                 };
                 $57.if(node_18, ($$render) => {
                   if (copyState.copiedKey === "json")
@@ -8902,7 +9020,7 @@ function Comment_sidebar($$anchor, $$props) {
   var aside = root19();
   var div = $60.child(aside);
   var node = $60.child(div);
-  Message_square(node, { class: "icon-sm" });
+  Message_square(node, { class: "cinder-icon-sm" });
   var span = $60.sibling(node, 4);
   var text8 = $60.child(span, true);
   $60.reset(span);
@@ -8930,10 +9048,10 @@ function Comment_sidebar($$anchor, $$props) {
             var node_2 = $60.first_child(fragment_1);
             {
               var consequent = ($$anchor4) => {
-                X($$anchor4, { class: "icon-sm" });
+                X($$anchor4, { class: "cinder-icon-sm" });
               };
               var alternate = ($$anchor4) => {
-                Plus($$anchor4, { class: "icon-sm" });
+                Plus($$anchor4, { class: "cinder-icon-sm" });
               };
               $60.if(node_2, ($$render) => {
                 if ($60.get(composingDocumentComment))
@@ -8968,7 +9086,7 @@ function Comment_sidebar($$anchor, $$props) {
             "aria-label": "Comment actions",
             showCaret: false,
             children: ($$anchor4, $$slotProps2) => {
-              Ellipsis($$anchor4, { class: "icon-sm" });
+              Ellipsis($$anchor4, { class: "cinder-icon-sm" });
             },
             $$slots: { default: true }
           });
@@ -8981,7 +9099,7 @@ function Comment_sidebar($$anchor, $$props) {
                 children: ($$anchor5, $$slotProps3) => {
                   var fragment_8 = root_94();
                   var node_6 = $60.first_child(fragment_8);
-                  Trash_2(node_6, { class: "icon-sm" });
+                  Trash_2(node_6, { class: "cinder-icon-sm" });
                   $60.next();
                   $60.append($$anchor5, fragment_8);
                 },
@@ -9053,7 +9171,7 @@ function Comment_sidebar($$anchor, $$props) {
       var div_3 = root_133();
       var div_4 = $60.child(div_3);
       var node_11 = $60.child(div_4);
-      File_text(node_11, { class: "icon-xs" });
+      File_text(node_11, { class: "cinder-icon-xs" });
       $60.next(2);
       $60.reset(div_4);
       var node_12 = $60.sibling(div_4, 2);
@@ -9087,7 +9205,7 @@ function Comment_sidebar($$anchor, $$props) {
         var button = root_162();
         var div_7 = $60.child(button);
         var node_15 = $60.child(div_7);
-        File_text(node_15, { class: "icon-xs" });
+        File_text(node_15, { class: "cinder-icon-xs" });
         $60.next(2);
         $60.reset(div_7);
         var p_1 = $60.sibling(div_7, 2);
@@ -9158,7 +9276,7 @@ var root_213 = $61.from_html(`<span class="cinder-_required-marker" aria-hidden=
 var root_117 = $61.from_html(`<label class="cinder-checkbox-field__label"> <!></label>`);
 var root_39 = $61.from_html(`<p class="cinder-checkbox-field__description"> </p>`);
 var root_45 = $61.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
-var root20 = $61.from_html(`<div class="cinder-checkbox-field"><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> <!></div> <!> <!></div>`);
+var root20 = $61.from_html(`<div><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> <!></div> <!> <!></div>`);
 function Checkbox($$anchor, $$props) {
   const generatedId = $61.props_id();
   $61.push($$props, true);
@@ -9175,6 +9293,7 @@ function Checkbox($$anchor, $$props) {
     "error",
     "disabled",
     "required",
+    "fieldClass",
     "class",
     "aria-describedby",
     "aria-invalid",
@@ -9322,6 +9441,9 @@ function Checkbox($$anchor, $$props) {
     });
   }
   $61.reset(div);
+  $61.template_effect(($0) => $61.set_class(div, 1, $0), [
+    () => $61.clsx(classNames("cinder-checkbox-field", $$props.fieldClass))
+  ]);
   $61.append($$anchor, div);
   $61.pop();
 }
@@ -9571,9 +9693,7 @@ ${indentYaml(raw)}
 `);
   return { valid: true, value: parsed.data?.["value"] };
 }
-function documentPositionToBodyPosition(position, bodyOffset) {
-  return Math.max(0, position - bodyOffset);
-}
+var documentPositionToBodyPosition = (position, bodyOffset) => Math.max(0, position - bodyOffset);
 function bodyPositionToDocumentPosition(position, bodyOffset) {
   return position + bodyOffset;
 }
@@ -9939,7 +10059,7 @@ import * as $67 from "svelte/internal/client";
 import"svelte/internal/disclose-version";
 import * as $64 from "svelte/internal/client";
 var root_311 = $64.from_svg(`<path></path>`);
-var root_216 = $64.from_svg(`<svg class="icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>`);
+var root_216 = $64.from_svg(`<svg class="cinder-icon-sm" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></svg>`);
 var root_119 = $64.from_html(`<!> <!>`, 1);
 var root23 = $64.from_html(`<span><!></span>`);
 function Badge($$anchor, $$props) {
@@ -10296,7 +10416,7 @@ function Review_editor_controls($$anchor, $$props) {
       var node_1 = $67.first_child(fragment_1);
       {
         const leading = ($$anchor3) => {
-          Pencil($$anchor3, { class: "icon-xs" });
+          Pencil($$anchor3, { class: "cinder-icon-xs" });
         };
         let $0 = $67.derived(() => $$props.viewPanelIds?.editor);
         Segment(node_1, {
@@ -10320,7 +10440,7 @@ function Review_editor_controls($$anchor, $$props) {
           var node_3 = $67.first_child(fragment_3);
           {
             const leading = ($$anchor4) => {
-              Git_branch($$anchor4, { class: "icon-xs" });
+              Git_branch($$anchor4, { class: "cinder-icon-xs" });
             };
             let $0 = $67.derived(() => $$props.viewPanelIds?.diff);
             Segment(node_3, {
@@ -10340,7 +10460,7 @@ function Review_editor_controls($$anchor, $$props) {
           var node_4 = $67.sibling(node_3, 2);
           {
             const leading = ($$anchor4) => {
-              File_text($$anchor4, { class: "icon-xs" });
+              File_text($$anchor4, { class: "cinder-icon-xs" });
             };
             let $0 = $67.derived(() => $$props.viewPanelIds?.summary);
             Segment(node_4, {
@@ -10470,7 +10590,7 @@ function Review_editor_controls($$anchor, $$props) {
         children: ($$anchor3, $$slotProps) => {
           var fragment_10 = root_163();
           var node_12 = $67.first_child(fragment_10);
-          Rotate_ccw(node_12, { class: "icon-sm" });
+          Rotate_ccw(node_12, { class: "cinder-icon-sm" });
           $67.next(2);
           $67.append($$anchor3, fragment_10);
         },
@@ -10507,7 +10627,7 @@ function Review_editor_controls($$anchor, $$props) {
       children: ($$anchor2, $$slotProps) => {
         var fragment_11 = root_174();
         var node_14 = $67.first_child(fragment_11);
-        Message_square(node_14, { class: "icon-sm" });
+        Message_square(node_14, { class: "cinder-icon-sm" });
         var node_15 = $67.sibling(node_14, 2);
         Badge(node_15, {
           "aria-hidden": "true",
@@ -10893,10 +11013,10 @@ function Front_matter_header($$anchor, $$props) {
   var node = $72.child(span);
   {
     var consequent = ($$anchor2) => {
-      Chevron_down($$anchor2, { class: "icon-sm" });
+      Chevron_down($$anchor2, { class: "cinder-icon-sm" });
     };
     var alternate = ($$anchor2) => {
-      Chevron_right($$anchor2, { class: "icon-sm" });
+      Chevron_right($$anchor2, { class: "cinder-icon-sm" });
     };
     $72.if(node, ($$render) => {
       if (expanded())
@@ -10907,7 +11027,7 @@ function Front_matter_header($$anchor, $$props) {
   }
   $72.reset(span);
   var node_1 = $72.sibling(span, 2);
-  File_text(node_1, { class: "icon-sm" });
+  File_text(node_1, { class: "cinder-icon-sm" });
   var span_1 = $72.sibling(node_1, 2);
   var text11 = $72.child(span_1, true);
   $72.reset(span_1);
@@ -11770,7 +11890,7 @@ function Diff_toolbar($$anchor, $$props) {
         children: ($$anchor3, $$slotProps) => {
           var fragment_11 = root_176();
           var node_13 = $79.first_child(fragment_11);
-          Rotate_ccw(node_13, { class: "icon-sm" });
+          Rotate_ccw(node_13, { class: "cinder-icon-sm" });
           $79.next();
           $79.append($$anchor3, fragment_11);
         },
@@ -11797,7 +11917,7 @@ function Diff_toolbar($$anchor, $$props) {
         children: ($$anchor3, $$slotProps) => {
           var fragment_13 = root_194();
           var node_15 = $79.first_child(fragment_13);
-          Refresh_cw(node_15, { class: "icon-sm" });
+          Refresh_cw(node_15, { class: "cinder-icon-sm" });
           $79.next();
           $79.append($$anchor3, fragment_13);
         },
@@ -11827,7 +11947,7 @@ function Diff_toolbar($$anchor, $$props) {
             },
             "aria-label": "Previous change",
             children: ($$anchor4, $$slotProps) => {
-              Chevron_left($$anchor4, { class: "icon-sm" });
+              Chevron_left($$anchor4, { class: "cinder-icon-sm" });
             },
             $$slots: { default: true }
           });
@@ -11843,7 +11963,7 @@ function Diff_toolbar($$anchor, $$props) {
             },
             "aria-label": "Next change",
             children: ($$anchor4, $$slotProps) => {
-              Chevron_right($$anchor4, { class: "icon-sm" });
+              Chevron_right($$anchor4, { class: "cinder-icon-sm" });
             },
             $$slots: { default: true }
           });
@@ -12218,7 +12338,7 @@ ${match[1] ?? ""}
                 children: ($$anchor5, $$slotProps2) => {
                   var fragment_8 = root_1113();
                   var node_10 = $80.first_child(fragment_8);
-                  Rotate_ccw(node_10, { class: "icon-xs" });
+                  Rotate_ccw(node_10, { class: "cinder-icon-xs" });
                   $80.next();
                   $80.append($$anchor5, fragment_8);
                 },
@@ -14500,4 +14620,4 @@ export {
   Comment_composer as CommentComposer
 };
 
-//# debugId=AF8E91713FB767A464756E2164756E21
+//# debugId=10488A2BFC29CC0964756E2164756E21