@lostgradient/cinder 0.5.0 → 0.6.0

package/dist/components/json-schema-editor/index.js

@@ -1930,9 +1930,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) {
@@ -1940,13 +1941,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;
@@ -1954,8 +1993,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);
@@ -1968,26 +2032,31 @@ function createPortalAttachment(options = {}) {
       anchor.parentNode.insertBefore(element, anchor.nextSibling);
     }
     $.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();
         }
@@ -2040,7 +2109,12 @@ function Portal($$anchor, $$props) {
   $2.attach(div, () => createPortalAttachment({
     target: () => target(),
     disabled: () => disabled(),
-    inheritAttributes: () => inheritAttributes()
+    inheritAttributes: () => inheritAttributes(),
+    explicitAttributes: () => ({
+      dir: $$props.dir,
+      dataTheme: rest["data-theme"],
+      theme: rest["data-cinder-theme"]
+    })
   }));
   $2.append($$anchor, div);
   $2.pop();
@@ -2148,7 +2222,7 @@ function useAnnouncer(options) {
 import"svelte/internal/disclose-version";
 import * as $4 from "svelte/internal/client";
 var root_3 = $4.from_svg(`<path></path>`);
-var root_2 = $4.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_2 = $4.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_1 = $4.from_html(`<!> <!>`, 1);
 var root2 = $4.from_html(`<span><!></span>`);
 function Badge($$anchor, $$props) {
@@ -2542,7 +2616,7 @@ var root5 = $8.from_html(`<div><!></div>`);
 function Tabs($$anchor, $$props) {
   const baseId = $8.props_id();
   $8.push($$props, true);
-  let value = $8.prop($$props, "value", 15, ""), orientation = $8.prop($$props, "orientation", 3, "horizontal");
+  let value = $8.prop($$props, "value", 15, ""), orientation = $8.prop($$props, "orientation", 3, "horizontal"), fill = $8.prop($$props, "fill", 3, false);
   const effectiveActivateOnFocus = $8.derived(() => $$props.activateOnFocus ?? orientation() === "horizontal");
   const buttons = new Map;
   let version = $8.state(0);
@@ -2710,6 +2784,7 @@ function Tabs($$anchor, $$props) {
   $8.template_effect(($0) => {
     $8.set_class(div, 1, $0);
     $8.set_attribute(div, "data-cinder-orientation", orientation());
+    $8.set_attribute(div, "data-cinder-fill", fill() ? "" : undefined);
   }, [() => $8.clsx(classNames("cinder-tabs", $$props.class))]);
   $8.append($$anchor, div);
   $8.pop();
@@ -3526,10 +3601,10 @@ function Front_matter_header($$anchor, $$props) {
   var node = $18.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" });
     };
     $18.if(node, ($$render) => {
       if (expanded())
@@ -3540,7 +3615,7 @@ function Front_matter_header($$anchor, $$props) {
   }
   $18.reset(span);
   var node_1 = $18.sibling(span, 2);
-  File_text(node_1, { class: "icon-sm" });
+  File_text(node_1, { class: "cinder-icon-sm" });
   var span_1 = $18.sibling(node_1, 2);
   var text4 = $18.child(span_1, true);
   $18.reset(span_1);
@@ -4810,7 +4885,7 @@ function Diff_toolbar($$anchor, $$props) {
         children: ($$anchor3, $$slotProps) => {
           var fragment_11 = root_172();
           var node_13 = $28.first_child(fragment_11);
-          Rotate_ccw(node_13, { class: "icon-sm" });
+          Rotate_ccw(node_13, { class: "cinder-icon-sm" });
           $28.next();
           $28.append($$anchor3, fragment_11);
         },
@@ -4837,7 +4912,7 @@ function Diff_toolbar($$anchor, $$props) {
         children: ($$anchor3, $$slotProps) => {
           var fragment_13 = root_192();
           var node_15 = $28.first_child(fragment_13);
-          Refresh_cw(node_15, { class: "icon-sm" });
+          Refresh_cw(node_15, { class: "cinder-icon-sm" });
           $28.next();
           $28.append($$anchor3, fragment_13);
         },
@@ -4867,7 +4942,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 }
           });
@@ -4883,7 +4958,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 }
           });
@@ -5258,7 +5333,7 @@ ${match[1] ?? ""}
                 children: ($$anchor5, $$slotProps2) => {
                   var fragment_8 = root_113();
                   var node_10 = $29.first_child(fragment_8);
-                  Rotate_ccw(node_10, { class: "icon-xs" });
+                  Rotate_ccw(node_10, { class: "cinder-icon-xs" });
                   $29.next();
                   $29.append($$anchor5, fragment_8);
                 },
@@ -5530,7 +5605,7 @@ var root_213 = $32.from_html(`<span class="cinder-_required-marker" aria-hidden=
 var root_117 = $32.from_html(`<label class="cinder-checkbox-field__label"> <!></label>`);
 var root_35 = $32.from_html(`<p class="cinder-checkbox-field__description"> </p>`);
 var root_44 = $32.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
-var root17 = $32.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 root17 = $32.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 = $32.props_id();
   $32.push($$props, true);
@@ -5547,6 +5622,7 @@ function Checkbox($$anchor, $$props) {
     "error",
     "disabled",
     "required",
+    "fieldClass",
     "class",
     "aria-describedby",
     "aria-invalid",
@@ -5694,6 +5770,9 @@ function Checkbox($$anchor, $$props) {
     });
   }
   $32.reset(div);
+  $32.template_effect(($0) => $32.set_class(div, 1, $0), [
+    () => $32.clsx(classNames("cinder-checkbox-field", $$props.fieldClass))
+  ]);
   $32.append($$anchor, div);
   $32.pop();
 }
@@ -8976,7 +9055,7 @@ function Copy_button($$anchor, $$props) {
       $45.append($$anchor2, fragment_1);
     };
     var consequent_1 = ($$anchor2) => {
-      Check($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
+      Check($$anchor2, { class: "cinder-icon-sm", "aria-hidden": "true" });
     };
     var consequent_2 = ($$anchor2) => {
       var text13 = $45.text("Copied");
@@ -8989,7 +9068,7 @@ function Copy_button($$anchor, $$props) {
       $45.append($$anchor2, fragment_3);
     };
     var consequent_4 = ($$anchor2) => {
-      Copy($$anchor2, { class: "icon-sm", "aria-hidden": "true" });
+      Copy($$anchor2, { class: "cinder-icon-sm", "aria-hidden": "true" });
     };
     var alternate = ($$anchor2) => {
       var text_1 = $45.text("Copy");
@@ -9830,4 +9909,4 @@ export {
   Json_schema_editor as JsonSchemaEditor
 };
 
-//# debugId=D0D5CD7713B3768364756E2164756E21
+//# debugId=4E1D439273CEAF3764756E2164756E21

package/dist/components/logo-cloud/logo-cloud.css

@@ -2,6 +2,7 @@
 @layer cinder.components {
   .cinder-logo-cloud {
     container-type: inline-size;
+    container-name: cinder-logo-cloud;
     padding-block: var(--cinder-space-8);
   }
 
@@ -80,7 +81,7 @@
     opacity: 1;
   }
 
-  @container (min-width: 48rem) {
+  @container cinder-logo-cloud (min-width: 48rem) {
     .cinder-logo-cloud[data-cinder-columns='3'] .cinder-logo-cloud__list {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
@@ -92,7 +93,7 @@
     }
   }
 
-  @container (min-width: 64rem) {
+  @container cinder-logo-cloud (min-width: 64rem) {
     .cinder-logo-cloud[data-cinder-columns='5'] .cinder-logo-cloud__list {
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }

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

@@ -2180,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) {
@@ -2190,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;
@@ -2204,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);
@@ -2218,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();
         }
@@ -2290,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();
@@ -4171,7 +4245,7 @@ function Toolbar_button($$anchor, $$props) {
       }), [() => classNames("toolbar-button", $$props.class)], undefined, undefined, "svelte-143lto0");
       var node = $28.child(button);
       $28.component(node, () => $$props.icon, ($$anchor3, Icon_1) => {
-        Icon_1($$anchor3, { class: "icon-sm" });
+        Icon_1($$anchor3, { class: "cinder-icon-sm" });
       });
       $28.reset(button);
       $28.append($$anchor2, button);
@@ -5268,7 +5342,7 @@ function Toolbar_dropdown($$anchor, $$props) {
                 var fragment_3 = $35.comment();
                 var node_2 = $35.first_child(fragment_3);
                 $35.component(node_2, () => $35.get(currentOption).icon, ($$anchor5, currentOption_icon) => {
-                  currentOption_icon($$anchor5, { class: "icon-sm" });
+                  currentOption_icon($$anchor5, { class: "cinder-icon-sm" });
                 });
                 $35.append($$anchor4, fragment_3);
               };
@@ -5308,7 +5382,7 @@ function Toolbar_dropdown($$anchor, $$props) {
                   var fragment_6 = root_6();
                   var node_5 = $35.first_child(fragment_6);
                   $35.component(node_5, () => $35.get(option).icon, ($$anchor6, option_icon) => {
-                    option_icon($$anchor6, { class: "icon-sm" });
+                    option_icon($$anchor6, { class: "cinder-icon-sm" });
                   });
                   var span_1 = $35.sibling(node_5, 2);
                   var text_1 = $35.child(span_1, true);
@@ -5316,7 +5390,7 @@ function Toolbar_dropdown($$anchor, $$props) {
                   var node_6 = $35.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" });
                     };
                     $35.if(node_6, ($$render) => {
                       if ($35.get(isActive))
@@ -6444,12 +6518,12 @@ function Link_popover($$anchor, $$props) {
   var header = $41.child(div);
   var h2 = $41.child(header);
   var node = $41.child(h2);
-  Link(node, { class: "icon-sm" });
+  Link(node, { class: "cinder-icon-sm" });
   var text_1 = $41.sibling(node);
   $41.reset(h2);
   var button = $41.sibling(h2, 2);
   var node_1 = $41.child(button);
-  X(node_1, { class: "icon-sm" });
+  X(node_1, { class: "cinder-icon-sm" });
   $41.reset(button);
   $41.reset(header);
   var div_1 = $41.sibling(header, 2);
@@ -6515,7 +6589,7 @@ function Link_popover($$anchor, $$props) {
         children: ($$anchor3, $$slotProps) => {
           var fragment_2 = root_35();
           var node_5 = $41.first_child(fragment_2);
-          Unlink(node_5, { class: "icon-sm" });
+          Unlink(node_5, { class: "cinder-icon-sm" });
           $41.next();
           $41.append($$anchor3, fragment_2);
         },
@@ -6594,9 +6668,9 @@ 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_112 = $42.from_html(`<div class="cinder-markdown-content prose markdown-editor surface svelte-1mxvqjb" role="application" tabindex="0"></div>`);
+var root_112 = $42.from_html(`<div class="cinder-markdown-content 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>`);
+var root14 = $42.from_html(`<div><div class="markdown-editor-layout svelte-1mxvqjb"><!> <!></div> <!></div>`);
 function Markdown_editor($$anchor, $$props) {
   $42.push($$props, true);
   let label = $42.prop($$props, "label", 3, "Markdown editor"), value = $42.prop($$props, "value", 15, ""), mode = $42.prop($$props, "mode", 15, "wysiwyg"), showModeToggle = $42.prop($$props, "showModeToggle", 3, false), modeLabel = $42.prop($$props, "modeLabel", 3, "Editor mode"), readonly = $42.prop($$props, "readonly", 3, false), placeholder = $42.prop($$props, "placeholder", 3, "Start writing..."), showToolbar = $42.prop($$props, "showToolbar", 3, true), plugins = $42.prop($$props, "plugins", 19, () => []), snapshotMode = $42.prop($$props, "snapshotMode", 3, false), rest = $42.rest_props($$props, [
@@ -7031,7 +7105,8 @@ function Markdown_editor($$anchor, $$props) {
     "data-snapshot-mode": snapshotMode() || undefined,
     ...rest
   }), [() => classNames("markdown-editor-wrapper", $$props.class)], undefined, undefined, "svelte-1mxvqjb");
-  var node = $42.child(div);
+  var div_1 = $42.child(div);
+  var node = $42.child(div_1);
   {
     var consequent_4 = ($$anchor2) => {
       var fragment = $42.comment();
@@ -7044,15 +7119,15 @@ function Markdown_editor($$anchor, $$props) {
           $42.append($$anchor3, fragment_1);
         };
         var alternate = ($$anchor3) => {
-          var div_1 = root_36();
-          var node_3 = $42.child(div_1);
+          var div_2 = root_36();
+          var node_3 = $42.child(div_2);
           {
             var consequent_1 = ($$anchor4) => {
-              var div_2 = root_43();
-              var node_4 = $42.child(div_2);
+              var div_3 = root_43();
+              var node_4 = $42.child(div_3);
               $42.snippet(node_4, () => $$props.toolbarLeading, () => $42.get(toolbarContext));
-              $42.reset(div_2);
-              $42.append($$anchor4, div_2);
+              $42.reset(div_3);
+              $42.append($$anchor4, div_3);
             };
             $42.if(node_3, ($$render) => {
               if ($$props.toolbarLeading)
@@ -7099,11 +7174,11 @@ function Markdown_editor($$anchor, $$props) {
           var node_6 = $42.sibling(node_5, 2);
           {
             var consequent_2 = ($$anchor4) => {
-              var div_3 = root_54();
-              var node_7 = $42.child(div_3);
+              var div_4 = root_54();
+              var node_7 = $42.child(div_4);
               $42.snippet(node_7, () => $$props.toolbarActions, () => $42.get(toolbarContext));
-              $42.reset(div_3);
-              $42.append($$anchor4, div_3);
+              $42.reset(div_4);
+              $42.append($$anchor4, div_4);
             };
             $42.if(node_6, ($$render) => {
               if ($$props.toolbarActions)
@@ -7113,8 +7188,8 @@ function Markdown_editor($$anchor, $$props) {
           var node_8 = $42.sibling(node_6, 2);
           {
             var consequent_3 = ($$anchor4) => {
-              var div_4 = root_63();
-              var node_9 = $42.child(div_4);
+              var div_5 = root_63();
+              var node_9 = $42.child(div_5);
               {
                 let $0 = $42.derived(() => `${$$props.id}-mode-toggle`);
                 Segmented_control(node_9, {
@@ -7160,16 +7235,16 @@ function Markdown_editor($$anchor, $$props) {
                   $$slots: { default: true }
                 });
               }
-              $42.reset(div_4);
-              $42.append($$anchor4, div_4);
+              $42.reset(div_5);
+              $42.append($$anchor4, div_5);
             };
             $42.if(node_8, ($$render) => {
               if (showModeToggle())
                 $$render(consequent_3);
             });
           }
-          $42.reset(div_1);
-          $42.append($$anchor3, div_1);
+          $42.reset(div_2);
+          $42.append($$anchor3, div_2);
         };
         $42.if(node_1, ($$render) => {
           if ($$props.toolbar)
@@ -7192,18 +7267,18 @@ function Markdown_editor($$anchor, $$props) {
       var node_13 = $42.first_child(fragment_3);
       {
         var consequent_5 = ($$anchor3) => {
-          var div_5 = root_112();
+          var div_6 = root_112();
           let styles;
-          $42.attach(div_5, () => editorAttachment);
+          $42.attach(div_6, () => editorAttachment);
           $42.template_effect(() => {
-            $42.set_attribute(div_5, "id", $$props.id);
-            $42.set_attribute(div_5, "data-readonly", readonly() || undefined);
-            $42.set_attribute(div_5, "aria-label", $42.get(accessibleEditorLabel));
-            styles = $42.set_style(div_5, "", styles, {
+            $42.set_attribute(div_6, "id", $$props.id);
+            $42.set_attribute(div_6, "data-readonly", readonly() || undefined);
+            $42.set_attribute(div_6, "aria-label", $42.get(accessibleEditorLabel));
+            styles = $42.set_style(div_6, "", styles, {
               "--editor-placeholder": `'${$42.get(escapedPlaceholder) ?? ""}'`
             });
           });
-          $42.append($$anchor3, div_5);
+          $42.append($$anchor3, div_6);
         };
         var alternate_1 = ($$anchor3) => {
           var textarea = root_122();
@@ -7238,7 +7313,8 @@ function Markdown_editor($$anchor, $$props) {
         $$render(alternate_2, -1);
     });
   }
-  var node_14 = $42.sibling(node_12, 2);
+  $42.reset(div_1);
+  var node_14 = $42.sibling(div_1, 2);
   {
     var consequent_7 = ($$anchor2) => {
       {
@@ -7287,4 +7363,4 @@ export {
   Markdown_editor as MarkdownEditor
 };
 
-//# debugId=470073BB9F5AAF7A64756E2164756E21
+//# debugId=4E706F75185E062764756E2164756E21