@lostgradient/cinder 0.12.0 → 0.13.0

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

@@ -2642,25 +2642,69 @@ var rest_excludes3 = new Set([
   "$$events",
   "$$legacy",
   "value",
+  "href",
+  "download",
+  "target",
+  "rel",
+  "current",
+  "currentToken",
   "disabled",
   "controls",
   "leading",
   "trailing",
   "children",
-  "class"
+  "class",
+  "onclick"
 ]);
 var root3 = $6.from_html(`<span class="cinder-segmented-control-option-icon" aria-hidden="true"><!></span>`);
 var root_1 = $6.from_html(`<span class="cinder-segmented-control-option-trailing" aria-hidden="true"><!></span>`);
-var root_2 = $6.from_html(`<button><!> <!> <!></button>`);
+var root_2 = $6.from_html(`<!> <!> <!>`, 1);
+var root_3 = $6.from_html(`<a><!></a>`);
+var root_4 = $6.from_html(`<button><!></button>`);
 function Segment($$anchor, $$props) {
   $6.push($$props, true);
-  let disabled = $6.prop($$props, "disabled", 3, false), rest = $6.rest_props($$props, rest_excludes3);
+  const content = ($$anchor2) => {
+    var fragment = root_2();
+    var node_1 = $6.first_child(fragment);
+    {
+      var consequent = ($$anchor3) => {
+        var span = root3();
+        var node_2 = $6.child(span);
+        $6.snippet(node_2, () => $$props.leading);
+        $6.reset(span);
+        $6.append($$anchor3, span);
+      };
+      $6.if(node_1, ($$render) => {
+        if ($$props.leading)
+          $$render(consequent);
+      });
+    }
+    var node_3 = $6.sibling(node_1, 2);
+    $6.snippet(node_3, () => $$props.children ?? $6.noop);
+    var node_4 = $6.sibling(node_3, 2);
+    {
+      var consequent_1 = ($$anchor3) => {
+        var span_1 = root_1();
+        var node_5 = $6.child(span_1);
+        $6.snippet(node_5, () => $$props.trailing);
+        $6.reset(span_1);
+        $6.append($$anchor3, span_1);
+      };
+      $6.if(node_4, ($$render) => {
+        if ($$props.trailing)
+          $$render(consequent_1);
+      });
+    }
+    $6.append($$anchor2, fragment);
+  };
+  let current = $6.prop($$props, "current", 3, false), currentToken = $6.prop($$props, "currentToken", 3, "page"), disabled = $6.prop($$props, "disabled", 3, false), rest = $6.rest_props($$props, rest_excludes3);
   const context = getSegmentedControlContext();
+  const buttonValue = $6.derived(() => $$props.value ?? $$props.href ?? "");
   const registerSegment = (node) => {
     return untrack(() => context.register({
       node,
       get value() {
-        return $$props.value;
+        return $6.get(buttonValue);
       },
       get disabled() {
         return disabled() || context.controlDisabled;
@@ -2670,64 +2714,83 @@ function Segment($$anchor, $$props) {
       }
     }));
   };
-  const isSelected = $6.derived(() => context.isSelected($$props.value));
-  const isFocusable = $6.derived(() => context.isFocusable($$props.value));
+  const isSelected = $6.derived(() => context.isSelected($6.get(buttonValue)));
+  const isFocusable = $6.derived(() => context.isFocusable($6.get(buttonValue)));
   const effectiveDisabled = $6.derived(() => disabled() || context.controlDisabled);
+  const isNavigationItem = $6.derived(() => context.variant === "navigation");
+  const anchorDisabled = $6.derived(() => $6.get(effectiveDisabled) || $$props.href === undefined);
+  const elementAttributes = $6.derived(() => rest);
+  const anchorTabindex = $6.derived(() => $6.get(anchorDisabled) ? -1 : $6.get(elementAttributes).tabindex);
   const role = $6.derived(() => context.selectionMode === "multiple" ? undefined : context.variant === "tablist" ? "tab" : "radio");
-  var button = root_2();
-  var event_handler = () => context.toggle($$props.value);
-  $6.attribute_effect(button, ($0) => ({
-    ...rest,
-    type: "button",
-    role: $6.get(role),
-    "data-cinder-segment-value": $$props.value,
-    "aria-checked": $6.get(role) === "radio" ? $6.get(isSelected) : undefined,
-    "aria-selected": $6.get(role) === "tab" ? $6.get(isSelected) : undefined,
-    "aria-pressed": context.selectionMode === "multiple" ? $6.get(isSelected) : undefined,
-    "aria-controls": $6.get(role) === "tab" ? $$props.controls : undefined,
-    "aria-disabled": $6.get(effectiveDisabled) ? "true" : undefined,
-    disabled: context.selectionMode === "multiple" ? $6.get(effectiveDisabled) : undefined,
-    tabindex: $6.get(isFocusable) ? 0 : -1,
-    class: $0,
-    "data-cinder-selected": $6.get(isSelected) ? "" : undefined,
-    "data-cinder-pressed": context.selectionMode === "multiple" && $6.get(isSelected) ? "" : undefined,
-    onclick: event_handler
-  }), [
-    () => classNames("cinder-segmented-control-option", $$props.class)
-  ]);
-  var node_1 = $6.child(button);
-  {
-    var consequent = ($$anchor2) => {
-      var span = root3();
-      var node_2 = $6.child(span);
-      $6.snippet(node_2, () => $$props.leading);
-      $6.reset(span);
-      $6.append($$anchor2, span);
-    };
-    $6.if(node_1, ($$render) => {
-      if ($$props.leading)
-        $$render(consequent);
-    });
+  function handleAnchorClick(event) {
+    if ($6.get(anchorDisabled)) {
+      event.preventDefault();
+      return;
+    }
+    $$props.onclick?.(event);
   }
-  var node_3 = $6.sibling(node_1, 2);
-  $6.snippet(node_3, () => $$props.children ?? $6.noop);
-  var node_4 = $6.sibling(node_3, 2);
+  var fragment_1 = $6.comment();
+  var node_6 = $6.first_child(fragment_1);
   {
-    var consequent_1 = ($$anchor2) => {
-      var span_1 = root_1();
-      var node_5 = $6.child(span_1);
-      $6.snippet(node_5, () => $$props.trailing);
-      $6.reset(span_1);
-      $6.append($$anchor2, span_1);
+    var consequent_2 = ($$anchor2) => {
+      var a = root_3();
+      $6.attribute_effect(a, ($0) => ({
+        ...$6.get(elementAttributes),
+        href: $6.get(anchorDisabled) ? undefined : $$props.href,
+        download: $$props.download,
+        target: $$props.target,
+        rel: $$props.rel,
+        "data-cinder-segment-value": $6.get(buttonValue),
+        "aria-current": current() ? currentToken() : undefined,
+        "aria-disabled": $6.get(anchorDisabled) ? "true" : undefined,
+        tabindex: $6.get(anchorTabindex),
+        class: $0,
+        "data-cinder-current": current() ? "" : undefined,
+        onclick: handleAnchorClick
+      }), [
+        () => classNames("cinder-segmented-control-option", $$props.class)
+      ]);
+      var node_7 = $6.child(a);
+      content(node_7);
+      $6.reset(a);
+      $6.append($$anchor2, a);
     };
-    $6.if(node_4, ($$render) => {
-      if ($$props.trailing)
-        $$render(consequent_1);
+    var alternate = ($$anchor2) => {
+      var button = root_4();
+      var event_handler = () => context.toggle($6.get(buttonValue));
+      $6.attribute_effect(button, ($0) => ({
+        ...$6.get(elementAttributes),
+        type: "button",
+        role: $6.get(role),
+        "data-cinder-segment-value": $6.get(buttonValue),
+        "aria-checked": $6.get(role) === "radio" ? $6.get(isSelected) : undefined,
+        "aria-selected": $6.get(role) === "tab" ? $6.get(isSelected) : undefined,
+        "aria-pressed": context.selectionMode === "multiple" ? $6.get(isSelected) : undefined,
+        "aria-controls": $6.get(role) === "tab" ? $$props.controls : undefined,
+        "aria-disabled": $6.get(effectiveDisabled) ? "true" : undefined,
+        disabled: context.selectionMode === "multiple" ? $6.get(effectiveDisabled) : undefined,
+        tabindex: $6.get(isFocusable) ? 0 : -1,
+        class: $0,
+        "data-cinder-selected": $6.get(isSelected) ? "" : undefined,
+        "data-cinder-pressed": context.selectionMode === "multiple" && $6.get(isSelected) ? "" : undefined,
+        onclick: event_handler
+      }), [
+        () => classNames("cinder-segmented-control-option", $$props.class)
+      ]);
+      var node_8 = $6.child(button);
+      content(node_8);
+      $6.reset(button);
+      $6.attach(button, () => registerSegment);
+      $6.append($$anchor2, button);
+    };
+    $6.if(node_6, ($$render) => {
+      if ($6.get(isNavigationItem))
+        $$render(consequent_2);
+      else
+        $$render(alternate, -1);
     });
   }
-  $6.reset(button);
-  $6.attach(button, () => registerSegment);
-  $6.append($$anchor, button);
+  $6.append($$anchor, fragment_1);
   $6.pop();
 }
 
@@ -2758,9 +2821,11 @@ var rest_excludes4 = new Set([
   "onchange",
   "children"
 ]);
-var root4 = $7.from_html(`<input type="hidden"/>`);
-var root_12 = $7.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
-var root_22 = $7.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div> <!></div>`);
+var root4 = $7.from_html(`<nav><!></nav>`);
+var root_12 = $7.from_html(`<div><!></div>`);
+var root_22 = $7.from_html(`<input type="hidden"/>`);
+var root_32 = $7.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
+var root_42 = $7.from_html(`<div class="cinder-segmented-control-container"><span> </span> <!> <!></div>`);
 function Segmented_control($$anchor, $$props) {
   $7.push($$props, true);
   let value = $7.prop($$props, "value", 15), hideLabel = $7.prop($$props, "hideLabel", 3, false), disabled = $7.prop($$props, "disabled", 3, false), size = $7.prop($$props, "size", 3, "md"), orientation = $7.prop($$props, "orientation", 3, "horizontal"), detached = $7.prop($$props, "detached", 3, false), fullWidth = $7.prop($$props, "fullWidth", 3, false), variant = $7.prop($$props, "variant", 3, "radiogroup"), selectionMode = $7.prop($$props, "selectionMode", 3, "single"), disallowEmptySelection = $7.prop($$props, "disallowEmptySelection", 3, true), rest = $7.rest_props($$props, rest_excludes4);
@@ -2768,9 +2833,11 @@ function Segmented_control($$anchor, $$props) {
   let resetSyncTimeout;
   const initialSingleValue = untrack2(() => typeof value() === "string" ? value() : undefined);
   const initialMultipleValues = untrack2(() => selectionMode() === "multiple" && value() instanceof SvelteSet ? Array.from(value()) : undefined);
+  const effectiveVariant = $7.derived(() => selectionMode() === "multiple" && variant() !== "radiogroup" ? "radiogroup" : variant());
+  const rendersNavigation = $7.derived(() => $7.get(effectiveVariant) === "navigation");
   const controller = new SegmentedControlController({
     selectionMode: () => selectionMode(),
-    variant: () => variant(),
+    variant: () => $7.get(effectiveVariant),
     orientation: () => orientation(),
     controlDisabled: () => disabled(),
     disallowEmptySelection: () => disallowEmptySelection(),
@@ -2785,7 +2852,7 @@ function Segmented_control($$anchor, $$props) {
       return selectionMode();
     },
     get variant() {
-      return variant();
+      return $7.get(effectiveVariant);
     },
     get controlDisabled() {
       return disabled();
@@ -2796,7 +2863,7 @@ function Segmented_control($$anchor, $$props) {
     toggle: (segmentValue) => controller.toggle(segmentValue)
   };
   setSegmentedControlContext(contextValue);
-  const groupRole = $7.derived(() => selectionMode() === "multiple" ? "group" : variant() === "tablist" ? "tablist" : "radiogroup");
+  const groupRole = $7.derived(() => selectionMode() === "multiple" ? "group" : variant() === "navigation" ? undefined : variant() === "tablist" ? "tablist" : "radiogroup");
   const effectiveSize = $7.derived(() => $$props.density === "toolbar" ? "sm" : size());
   const selectedValues = $7.derived(() => selectionMode() === "multiple" ? value() instanceof SvelteSet ? Array.from(value()) : [] : typeof value() === "string" ? [value()] : []);
   function resetToInitialValue(event) {
@@ -2827,41 +2894,74 @@ function Segmented_control($$anchor, $$props) {
       }
     };
   });
-  var div = root_22();
+  var div = root_42();
   var span = $7.child(div);
   var text = $7.child(span, true);
   $7.reset(span);
-  var div_1 = $7.sibling(span, 2);
-  var event_handler = (event) => controller.handleKeydown(event);
-  $7.attribute_effect(div_1, ($0) => ({
-    ...rest,
-    id: $$props.id,
-    role: $7.get(groupRole),
-    "aria-labelledby": `${$$props.id}-label`,
-    "aria-disabled": disabled() ? "true" : undefined,
-    "aria-orientation": selectionMode() === "single" ? orientation() : undefined,
-    "data-cinder-orientation": orientation(),
-    "data-cinder-size": $7.get(effectiveSize),
-    "data-cinder-density": $$props.density === "toolbar" ? "toolbar" : undefined,
-    "data-cinder-selection-mode": selectionMode(),
-    "data-cinder-detached": detached() ? "" : undefined,
-    "data-cinder-full-width": fullWidth() ? "" : undefined,
-    "data-cinder-variant": variant(),
-    class: $0,
-    onkeydown: event_handler
-  }), [() => classNames("cinder-segmented-control", $$props.class)]);
-  var node = $7.child(div_1);
-  $7.snippet(node, () => $$props.children);
-  $7.reset(div_1);
-  var node_1 = $7.sibling(div_1, 2);
+  var node = $7.sibling(span, 2);
   {
     var consequent = ($$anchor2) => {
-      var fragment = root_12();
+      var nav = root4();
+      $7.attribute_effect(nav, ($0) => ({
+        ...rest,
+        id: $$props.id,
+        role: "navigation",
+        "aria-labelledby": `${$$props.id}-label`,
+        "data-cinder-orientation": orientation(),
+        "data-cinder-size": $7.get(effectiveSize),
+        "data-cinder-density": $$props.density === "toolbar" ? "toolbar" : undefined,
+        "data-cinder-selection-mode": selectionMode(),
+        "data-cinder-detached": detached() ? "" : undefined,
+        "data-cinder-full-width": fullWidth() ? "" : undefined,
+        "data-cinder-variant": $7.get(effectiveVariant),
+        class: $0
+      }), [() => classNames("cinder-segmented-control", $$props.class)]);
+      var node_1 = $7.child(nav);
+      $7.snippet(node_1, () => $$props.children);
+      $7.reset(nav);
+      $7.append($$anchor2, nav);
+    };
+    var alternate = ($$anchor2) => {
+      var div_1 = root_12();
+      var event_handler = (event) => controller.handleKeydown(event);
+      $7.attribute_effect(div_1, ($0) => ({
+        ...rest,
+        id: $$props.id,
+        role: $7.get(groupRole),
+        "aria-labelledby": `${$$props.id}-label`,
+        "aria-disabled": disabled() ? "true" : undefined,
+        "aria-orientation": selectionMode() === "single" ? orientation() : undefined,
+        "data-cinder-orientation": orientation(),
+        "data-cinder-size": $7.get(effectiveSize),
+        "data-cinder-density": $$props.density === "toolbar" ? "toolbar" : undefined,
+        "data-cinder-selection-mode": selectionMode(),
+        "data-cinder-detached": detached() ? "" : undefined,
+        "data-cinder-full-width": fullWidth() ? "" : undefined,
+        "data-cinder-variant": $7.get(effectiveVariant),
+        class: $0,
+        onkeydown: event_handler
+      }), [() => classNames("cinder-segmented-control", $$props.class)]);
+      var node_2 = $7.child(div_1);
+      $7.snippet(node_2, () => $$props.children);
+      $7.reset(div_1);
+      $7.append($$anchor2, div_1);
+    };
+    $7.if(node, ($$render) => {
+      if ($7.get(rendersNavigation))
+        $$render(consequent);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  var node_3 = $7.sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var fragment = root_32();
       var input_1 = $7.first_child(fragment);
       $7.bind_this(input_1, ($$value) => $7.set(resetInputElement, $$value), () => $7.get(resetInputElement));
-      var node_2 = $7.sibling(input_1, 2);
-      $7.each(node_2, 16, () => $7.get(selectedValues), (selectedValue) => selectedValue, ($$anchor3, selectedValue) => {
-        var input_2 = root4();
+      var node_4 = $7.sibling(input_1, 2);
+      $7.each(node_4, 16, () => $7.get(selectedValues), (selectedValue) => selectedValue, ($$anchor3, selectedValue) => {
+        var input_2 = root_22();
         $7.remove_input_defaults(input_2);
         $7.template_effect(() => {
           $7.set_attribute(input_2, "name", $$props.name);
@@ -2872,9 +2972,9 @@ function Segmented_control($$anchor, $$props) {
       });
       $7.append($$anchor2, fragment);
     };
-    $7.if(node_1, ($$render) => {
-      if ($$props.name)
-        $$render(consequent);
+    $7.if(node_3, ($$render) => {
+      if ($$props.name && !$7.get(rendersNavigation))
+        $$render(consequent_1);
     });
   }
   $7.reset(div);
@@ -4459,7 +4559,7 @@ var rest_excludes9 = new Set([
 var root11 = $31.from_html(`<div class="cinder-dropdown__menu" popover="auto" role="menu"><!></div>`);
 var root_14 = $31.from_html(`<div class="cinder-dropdown__menu" role="menu"><!></div>`);
 var root_23 = $31.from_html(`<div class="cinder-dropdown__trigger" role="presentation"><!></div> <!>`, 1);
-var root_3 = $31.from_html(`<div><!></div>`);
+var root_33 = $31.from_html(`<div><!></div>`);
 function Dropdown($$anchor, $$props) {
   const generatedId = $31.props_id();
   $31.push($$props, true);
@@ -4571,7 +4671,7 @@ function Dropdown($$anchor, $$props) {
     const toggleEvent = event3;
     open(toggleEvent.newState === "open");
   }
-  var div = root_3();
+  var div = root_33();
   $31.attribute_effect(div, ($0) => ({
     id: id(),
     class: $0,
@@ -5879,13 +5979,13 @@ var rest_excludes14 = new Set([
 var root17 = $37.from_html(`<span class="cinder-button__icon" aria-hidden="true"><!></span>`);
 var root_19 = $37.from_html(`<span class="cinder-sr-only"> </span>`);
 var root_25 = $37.from_html(`<!> <!>`, 1);
-var root_32 = $37.from_html(`<!> <!> <!>`, 1);
-var root_4 = $37.from_html(`<a><!></a>`);
+var root_34 = $37.from_html(`<!> <!> <!>`, 1);
+var root_43 = $37.from_html(`<a><!></a>`);
 var root_5 = $37.from_html(`<button><!></button>`);
 function Button($$anchor, $$props) {
   $37.push($$props, true);
   const buttonContent = ($$anchor2) => {
-    var fragment = root_32();
+    var fragment = root_34();
     var node = $37.first_child(fragment);
     {
       var consequent = ($$anchor3) => {
@@ -6016,7 +6116,7 @@ function Button($$anchor, $$props) {
   var node_9 = $37.first_child(fragment_4);
   {
     var consequent_6 = ($$anchor2) => {
-      var a = root_4();
+      var a = root_43();
       $37.attribute_effect(a, () => ({
         ...anchorAttributes,
         href: loading() ? undefined : $$props.href,
@@ -6158,8 +6258,8 @@ var rest_excludes15 = new Set([
 var root18 = $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_110 = $38.from_html(`<input/>`);
 var root_26 = $38.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
-var root_33 = $38.from_html(`<label> <!></label>`);
-var root_42 = $38.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
+var root_35 = $38.from_html(`<label> <!></label>`);
+var root_44 = $38.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
 var root_52 = $38.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
 var root_6 = $38.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
 var root_7 = $38.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
@@ -6252,7 +6352,7 @@ function Input($$anchor, $$props) {
   var node = $38.child(div);
   {
     var consequent_1 = ($$anchor2) => {
-      var label_1 = root_33();
+      var label_1 = root_35();
       var text2 = $38.child(label_1);
       var node_1 = $38.sibling(text2);
       {
@@ -6288,7 +6388,7 @@ function Input($$anchor, $$props) {
       var node_3 = $38.child(div_1);
       {
         var consequent_2 = ($$anchor3) => {
-          var span_1 = root_42();
+          var span_1 = root_44();
           var node_4 = $38.child(span_1);
           $38.snippet(node_4, () => $$props.leading);
           $38.reset(span_1);
@@ -6721,8 +6821,8 @@ var rest_excludes16 = new Set([
 var root20 = $42.from_html(`<div class="toolbar-leading svelte-1mxvqjb"><!></div>`);
 var root_112 = $42.from_html(`<div class="toolbar-actions svelte-1mxvqjb"><!></div>`);
 var root_27 = $42.from_html(`<!> <!>`, 1);
-var root_34 = $42.from_html(`<div class="toolbar-mode-toggle svelte-1mxvqjb"><!></div>`);
-var root_43 = $42.from_html(`<div class="editor-toolbar-wrapper svelte-1mxvqjb"><!> <!> <!> <!></div>`);
+var root_36 = $42.from_html(`<div class="toolbar-mode-toggle svelte-1mxvqjb"><!></div>`);
+var root_45 = $42.from_html(`<div class="editor-toolbar-wrapper svelte-1mxvqjb"><!> <!> <!> <!></div>`);
 var root_53 = $42.from_html(`<div class="cinder-markdown-content markdown-editor surface svelte-1mxvqjb" role="application" tabindex="0"></div>`);
 var root_62 = $42.from_html(`<textarea class="markdown-editor surface source-mode svelte-1mxvqjb" aria-multiline="true"></textarea>`);
 var root_72 = $42.from_html(`<div><div class="markdown-editor-layout svelte-1mxvqjb"><!> <!></div> <!></div>`);
@@ -7147,7 +7247,7 @@ function Markdown_editor($$anchor, $$props) {
           $42.append($$anchor3, fragment_1);
         };
         var alternate = ($$anchor3) => {
-          var div_2 = root_43();
+          var div_2 = root_45();
           var node_3 = $42.child(div_2);
           {
             var consequent_1 = ($$anchor4) => {
@@ -7216,7 +7316,7 @@ function Markdown_editor($$anchor, $$props) {
           var node_8 = $42.sibling(node_6, 2);
           {
             var consequent_3 = ($$anchor4) => {
-              var div_5 = root_34();
+              var div_5 = root_36();
               var node_9 = $42.child(div_5);
               {
                 let $0 = $42.derived(() => `${$$props.id}-mode-toggle`);
@@ -7391,4 +7491,4 @@ export {
   Markdown_editor as MarkdownEditor
 };
 
-//# debugId=76C8DBBE69E4BDC864756E2164756E21
+//# debugId=2E2BA5561757E54B64756E2164756E21