@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/components/diff-viewer/index.js

@@ -606,9 +606,46 @@ import * as $10 from "svelte/internal/client";
 // src/components/badge/badge.svelte
 import"svelte/internal/disclose-version";
 import * as $6 from "svelte/internal/client";
+var root_32 = $6.from_svg(`<path></path>`);
+var root_22 = $6.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_12 = $6.from_html(`<!> <!>`, 1);
 var root3 = $6.from_html(`<span><!></span>`);
 function Badge($$anchor, $$props) {
   $6.push($$props, true);
+  const subscriptionStateConfigurations = {
+    active: { variant: "success", label: "Active" },
+    trialing: { variant: "info", label: "Trialing" },
+    "past-due": { variant: "warning", label: "Past due" },
+    canceled: { variant: "neutral", label: "Canceled" },
+    expired: { variant: "danger", label: "Expired" },
+    refunded: { variant: "neutral", label: "Refunded" }
+  };
+  const subscriptionStateIconPaths = {
+    active: ["M21.801 10A10 10 0 1 1 17 3.335", "m9 11 3 3L22 4"],
+    trialing: ["M12 6v6l4 2", "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"],
+    "past-due": [
+      "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",
+      "M12 9v4",
+      "M12 17h.01"
+    ],
+    canceled: [
+      "M15 9 9 15",
+      "M9 9l6 6",
+      "M22 12A10 10 0 1 1 12 2a10 10 0 0 1 10 10Z"
+    ],
+    expired: [
+      "M8 2v4",
+      "M16 2v4",
+      "M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8",
+      "M3 10h18",
+      "m17 14-5-5",
+      "m12 14 5 5"
+    ],
+    refunded: [
+      "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8",
+      "M3 3v5h5"
+    ]
+  };
   let variant = $6.prop($$props, "variant", 3, "neutral"), size = $6.prop($$props, "size", 3, "md"), mono = $6.prop($$props, "mono", 3, false), rest = $6.rest_props($$props, [
     "$$slots",
     "$$events",
@@ -616,19 +653,78 @@ function Badge($$anchor, $$props) {
     "variant",
     "size",
     "mono",
+    "subscriptionState",
     "class",
     "children"
   ]);
+  const subscriptionStateConfiguration = $6.derived(() => $$props.subscriptionState === undefined ? undefined : subscriptionStateConfigurations[$$props.subscriptionState]);
+  const resolvedVariant = $6.derived(() => $6.get(subscriptionStateConfiguration)?.variant ?? variant());
+  const resolvedSubscriptionIconPaths = $6.derived(() => $$props.subscriptionState === undefined ? undefined : subscriptionStateIconPaths[$$props.subscriptionState]);
   var span = root3();
   $6.attribute_effect(span, ($0) => ({
     class: $0,
-    "data-cinder-variant": variant(),
+    "data-cinder-variant": $6.get(resolvedVariant),
     "data-cinder-size": size(),
     "data-cinder-mono": mono() ? "" : undefined,
+    "data-cinder-subscription-state": $$props.subscriptionState,
     ...rest
   }), [() => classNames("cinder-badge", $$props.class)]);
   var node = $6.child(span);
-  $6.snippet(node, () => $$props.children ?? $6.noop);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var fragment = root_12();
+      var node_1 = $6.first_child(fragment);
+      {
+        var consequent = ($$anchor3) => {
+          var svg = root_22();
+          $6.each(svg, 20, () => $6.get(resolvedSubscriptionIconPaths), (iconPath) => iconPath, ($$anchor4, iconPath) => {
+            var path = root_32();
+            $6.template_effect(() => $6.set_attribute(path, "d", iconPath));
+            $6.append($$anchor4, path);
+          });
+          $6.reset(svg);
+          $6.append($$anchor3, svg);
+        };
+        $6.if(node_1, ($$render) => {
+          if ($6.get(resolvedSubscriptionIconPaths))
+            $$render(consequent);
+        });
+      }
+      var node_2 = $6.sibling(node_1, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var fragment_1 = $6.comment();
+          var node_3 = $6.first_child(fragment_1);
+          $6.snippet(node_3, () => $$props.children);
+          $6.append($$anchor3, fragment_1);
+        };
+        var alternate = ($$anchor3) => {
+          var text3 = $6.text();
+          $6.template_effect(() => $6.set_text(text3, $6.get(subscriptionStateConfiguration).label));
+          $6.append($$anchor3, text3);
+        };
+        $6.if(node_2, ($$render) => {
+          if ($$props.children)
+            $$render(consequent_1);
+          else
+            $$render(alternate, -1);
+        });
+      }
+      $6.append($$anchor2, fragment);
+    };
+    var alternate_1 = ($$anchor2) => {
+      var fragment_3 = $6.comment();
+      var node_4 = $6.first_child(fragment_3);
+      $6.snippet(node_4, () => $$props.children ?? $6.noop);
+      $6.append($$anchor2, fragment_3);
+    };
+    $6.if(node, ($$render) => {
+      if ($6.get(subscriptionStateConfiguration))
+        $$render(consequent_2);
+      else
+        $$render(alternate_1, -1);
+    });
+  }
   $6.reset(span);
   $6.append($$anchor, span);
   $6.pop();
@@ -769,7 +865,7 @@ function Front_matter_header($$anchor, $$props) {
   var node_1 = $10.sibling(span, 2);
   File_text(node_1, { class: "icon-sm" });
   var span_1 = $10.sibling(node_1, 2);
-  var text3 = $10.child(span_1, true);
+  var text4 = $10.child(span_1, true);
   $10.reset(span_1);
   var node_2 = $10.sibling(span_1, 2);
   {
@@ -796,7 +892,7 @@ function Front_matter_header($$anchor, $$props) {
     });
   }
   $10.reset(button);
-  $10.template_effect(() => $10.set_text(text3, label()));
+  $10.template_effect(() => $10.set_text(text4, label()));
   $10.append($$anchor, button);
   $10.pop();
 }
@@ -804,7 +900,7 @@ function Front_matter_header($$anchor, $$props) {
 // src/components/diff-viewer/diff-line.svelte
 import"svelte/internal/disclose-version";
 import * as $11 from "svelte/internal/client";
-var root_22 = $11.from_html(`<div><span class="diff-gutter svelte-hc3elb"></span> <span class="diff-text svelte-hc3elb"> </span></div>`);
+var root_23 = $11.from_html(`<div><span class="diff-gutter svelte-hc3elb"></span> <span class="diff-text svelte-hc3elb"> </span></div>`);
 var root_42 = $11.from_html(`<button type="button"><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb"> </span></button>`);
 var root_52 = $11.from_html(`<div><span class="diff-gutter svelte-hc3elb">+</span> <span class="diff-text svelte-hc3elb"> </span></div>`);
 var root_82 = $11.from_html(`<del class="svelte-hc3elb"> </del>`);
@@ -820,7 +916,7 @@ var root_28 = $11.from_html(`<span> </span>`);
 var root_29 = $11.from_html(`<del class="word-removed svelte-hc3elb"> </del>`);
 var root_30 = $11.from_html(`<ins class="word-added svelte-hc3elb"> </ins>`);
 var root_26 = $11.from_html(`<span class="word-changes svelte-hc3elb"></span>`);
-var root_23 = $11.from_html(`<div><span class="diff-gutter svelte-hc3elb">~</span> <span class="diff-text svelte-hc3elb"><!></span></div>`);
+var root_232 = $11.from_html(`<div><span class="diff-gutter svelte-hc3elb">~</span> <span class="diff-text svelte-hc3elb"><!></span></div>`);
 function Diff_line($$anchor, $$props) {
   $11.push($$props, true);
   let selected = $11.prop($$props, "selected", 3, false);
@@ -836,6 +932,11 @@ function Diff_line($$anchor, $$props) {
     return true;
   });
   const isInteractive = $11.derived(() => $$props.diff.type !== "same" && $$props.onselect !== undefined);
+  const accessibleLineLabel = $11.derived(() => {
+    const text5 = $$props.diff.type === "modified" ? $$props.viewMode === "original" ? $$props.diff.oldText : $$props.viewMode === "final" ? $$props.diff.newText : `${$$props.diff.oldText} changed to ${$$props.diff.newText}` : $$props.diff.text;
+    const typeLabel = $$props.diff.type === "added" ? "Added line" : $$props.diff.type === "removed" ? "Removed line" : "Modified line";
+    return `${typeLabel}: ${text5 || "blank line"}`;
+  });
   var fragment = $11.comment();
   var node = $11.first_child(fragment);
   {
@@ -844,14 +945,14 @@ function Diff_line($$anchor, $$props) {
       var node_1 = $11.first_child(fragment_1);
       {
         var consequent = ($$anchor3) => {
-          var div = root_22();
+          var div = root_23();
           var span = $11.sibling($11.child(div), 2);
-          var text4 = $11.child(span, true);
+          var text_1 = $11.child(span, true);
           $11.reset(span);
           $11.reset(div);
           $11.template_effect(($0) => {
             $11.set_class(div, 1, $0, "svelte-hc3elb");
-            $11.set_text(text4, $$props.diff.text || " ");
+            $11.set_text(text_1, $$props.diff.text || " ");
           }, [() => $11.clsx(classNames("diff-line", $$props.class))]);
           $11.append($$anchor3, div);
         };
@@ -862,13 +963,14 @@ function Diff_line($$anchor, $$props) {
             var consequent_1 = ($$anchor4) => {
               var button = root_42();
               var span_1 = $11.sibling($11.child(button), 2);
-              var text_1 = $11.child(span_1, true);
+              var text_2 = $11.child(span_1, true);
               $11.reset(span_1);
               $11.reset(button);
               $11.template_effect(($0) => {
                 $11.set_class(button, 1, $0, "svelte-hc3elb");
                 $11.set_attribute(button, "data-selected", selected());
-                $11.set_text(text_1, $$props.diff.text || " ");
+                $11.set_attribute(button, "aria-label", $11.get(accessibleLineLabel));
+                $11.set_text(text_2, $$props.diff.text || " ");
               }, [
                 () => $11.clsx(classNames("diff-line diff-line-added", $$props.class))
               ]);
@@ -880,13 +982,13 @@ function Diff_line($$anchor, $$props) {
             var alternate = ($$anchor4) => {
               var div_1 = root_52();
               var span_2 = $11.sibling($11.child(div_1), 2);
-              var text_2 = $11.child(span_2, true);
+              var text_3 = $11.child(span_2, true);
               $11.reset(span_2);
               $11.reset(div_1);
               $11.template_effect(($0) => {
                 $11.set_class(div_1, 1, $0, "svelte-hc3elb");
                 $11.set_attribute(div_1, "data-selected", selected());
-                $11.set_text(text_2, $$props.diff.text || " ");
+                $11.set_text(text_3, $$props.diff.text || " ");
               }, [
                 () => $11.clsx(classNames("diff-line diff-line-added", $$props.class))
               ]);
@@ -909,22 +1011,22 @@ function Diff_line($$anchor, $$props) {
             var consequent_4 = ($$anchor4) => {
               var button_1 = root_7();
               var span_3 = $11.child(button_1);
-              var text_3 = $11.child(span_3, true);
+              var text_4 = $11.child(span_3, true);
               $11.reset(span_3);
               var span_4 = $11.sibling(span_3, 2);
               var node_4 = $11.child(span_4);
               {
                 var consequent_3 = ($$anchor5) => {
                   var del = root_82();
-                  var text_4 = $11.child(del, true);
+                  var text_5 = $11.child(del, true);
                   $11.reset(del);
-                  $11.template_effect(() => $11.set_text(text_4, $$props.diff.text || " "));
+                  $11.template_effect(() => $11.set_text(text_5, $$props.diff.text || " "));
                   $11.append($$anchor5, del);
                 };
                 var alternate_1 = ($$anchor5) => {
-                  var text_5 = $11.text();
-                  $11.template_effect(() => $11.set_text(text_5, $$props.diff.text || " "));
-                  $11.append($$anchor5, text_5);
+                  var text_6 = $11.text();
+                  $11.template_effect(() => $11.set_text(text_6, $$props.diff.text || " "));
+                  $11.append($$anchor5, text_6);
                 };
                 $11.if(node_4, ($$render) => {
                   if ($11.get(showStrikethrough))
@@ -938,7 +1040,8 @@ function Diff_line($$anchor, $$props) {
               $11.template_effect(($0) => {
                 $11.set_class(button_1, 1, $0, "svelte-hc3elb");
                 $11.set_attribute(button_1, "data-selected", selected());
-                $11.set_text(text_3, $11.get(showStrikethrough) ? "-" : "");
+                $11.set_attribute(button_1, "aria-label", $11.get(accessibleLineLabel));
+                $11.set_text(text_4, $11.get(showStrikethrough) ? "-" : "");
               }, [
                 () => $11.clsx(classNames("diff-line", $11.get(showStrikethrough) ? "diff-line-removed" : "diff-line-removed-original", $$props.class))
               ]);
@@ -950,22 +1053,22 @@ function Diff_line($$anchor, $$props) {
             var alternate_3 = ($$anchor4) => {
               var div_2 = root_102();
               var span_5 = $11.child(div_2);
-              var text_6 = $11.child(span_5, true);
+              var text_7 = $11.child(span_5, true);
               $11.reset(span_5);
               var span_6 = $11.sibling(span_5, 2);
               var node_5 = $11.child(span_6);
               {
                 var consequent_5 = ($$anchor5) => {
                   var del_1 = root_11();
-                  var text_7 = $11.child(del_1, true);
+                  var text_8 = $11.child(del_1, true);
                   $11.reset(del_1);
-                  $11.template_effect(() => $11.set_text(text_7, $$props.diff.text || " "));
+                  $11.template_effect(() => $11.set_text(text_8, $$props.diff.text || " "));
                   $11.append($$anchor5, del_1);
                 };
                 var alternate_2 = ($$anchor5) => {
-                  var text_8 = $11.text();
-                  $11.template_effect(() => $11.set_text(text_8, $$props.diff.text || " "));
-                  $11.append($$anchor5, text_8);
+                  var text_9 = $11.text();
+                  $11.template_effect(() => $11.set_text(text_9, $$props.diff.text || " "));
+                  $11.append($$anchor5, text_9);
                 };
                 $11.if(node_5, ($$render) => {
                   if ($11.get(showStrikethrough))
@@ -979,7 +1082,7 @@ function Diff_line($$anchor, $$props) {
               $11.template_effect(($0) => {
                 $11.set_class(div_2, 1, $0, "svelte-hc3elb");
                 $11.set_attribute(div_2, "data-selected", selected());
-                $11.set_text(text_6, $11.get(showStrikethrough) ? "-" : "");
+                $11.set_text(text_7, $11.get(showStrikethrough) ? "-" : "");
               }, [
                 () => $11.clsx(classNames("diff-line", $11.get(showStrikethrough) ? "diff-line-removed" : "diff-line-removed-original", $$props.class))
               ]);
@@ -1023,23 +1126,23 @@ function Diff_line($$anchor, $$props) {
                         {
                           var consequent_8 = ($$anchor8) => {
                             var span_9 = root_19();
-                            var text_9 = $11.child(span_9, true);
+                            var text_10 = $11.child(span_9, true);
                             $11.reset(span_9);
-                            $11.template_effect(() => $11.set_text(text_9, $11.get(wordChange).text));
+                            $11.template_effect(() => $11.set_text(text_10, $11.get(wordChange).text));
                             $11.append($$anchor8, span_9);
                           };
                           var consequent_9 = ($$anchor8) => {
                             var del_2 = root_20();
-                            var text_10 = $11.child(del_2, true);
+                            var text_11 = $11.child(del_2, true);
                             $11.reset(del_2);
-                            $11.template_effect(() => $11.set_text(text_10, $11.get(wordChange).text));
+                            $11.template_effect(() => $11.set_text(text_11, $11.get(wordChange).text));
                             $11.append($$anchor8, del_2);
                           };
                           var consequent_10 = ($$anchor8) => {
                             var ins = root_21();
-                            var text_11 = $11.child(ins, true);
+                            var text_12 = $11.child(ins, true);
                             $11.reset(ins);
-                            $11.template_effect(() => $11.set_text(text_11, $11.get(wordChange).text));
+                            $11.template_effect(() => $11.set_text(text_12, $11.get(wordChange).text));
                             $11.append($$anchor8, ins);
                           };
                           $11.if(node_10, ($$render) => {
@@ -1066,9 +1169,9 @@ function Diff_line($$anchor, $$props) {
                   $11.append($$anchor5, fragment_7);
                 };
                 var alternate_5 = ($$anchor5) => {
-                  var text_12 = $11.text();
-                  $11.template_effect(() => $11.set_text(text_12, $11.get(displayText) || " "));
-                  $11.append($$anchor5, text_12);
+                  var text_13 = $11.text();
+                  $11.template_effect(() => $11.set_text(text_13, $11.get(displayText) || " "));
+                  $11.append($$anchor5, text_13);
                 };
                 $11.if(node_7, ($$render) => {
                   if ($$props.viewMode === "unified")
@@ -1082,6 +1185,7 @@ function Diff_line($$anchor, $$props) {
               $11.template_effect(($0) => {
                 $11.set_class(button_2, 1, $0, "svelte-hc3elb");
                 $11.set_attribute(button_2, "data-selected", selected());
+                $11.set_attribute(button_2, "aria-label", $11.get(accessibleLineLabel));
               }, [
                 () => $11.clsx(classNames("diff-line", $11.get(lineClass), $$props.class))
               ]);
@@ -1091,7 +1195,7 @@ function Diff_line($$anchor, $$props) {
               $11.append($$anchor4, button_2);
             };
             var alternate_8 = ($$anchor4) => {
-              var div_3 = root_23();
+              var div_3 = root_232();
               var span_10 = $11.sibling($11.child(div_3), 2);
               var node_11 = $11.child(span_10);
               {
@@ -1113,23 +1217,23 @@ function Diff_line($$anchor, $$props) {
                         {
                           var consequent_14 = ($$anchor8) => {
                             var span_12 = root_28();
-                            var text_13 = $11.child(span_12, true);
+                            var text_14 = $11.child(span_12, true);
                             $11.reset(span_12);
-                            $11.template_effect(() => $11.set_text(text_13, $11.get(wordChange).text));
+                            $11.template_effect(() => $11.set_text(text_14, $11.get(wordChange).text));
                             $11.append($$anchor8, span_12);
                           };
                           var consequent_15 = ($$anchor8) => {
                             var del_3 = root_29();
-                            var text_14 = $11.child(del_3, true);
+                            var text_15 = $11.child(del_3, true);
                             $11.reset(del_3);
-                            $11.template_effect(() => $11.set_text(text_14, $11.get(wordChange).text));
+                            $11.template_effect(() => $11.set_text(text_15, $11.get(wordChange).text));
                             $11.append($$anchor8, del_3);
                           };
                           var consequent_16 = ($$anchor8) => {
                             var ins_1 = root_30();
-                            var text_15 = $11.child(ins_1, true);
+                            var text_16 = $11.child(ins_1, true);
                             $11.reset(ins_1);
-                            $11.template_effect(() => $11.set_text(text_15, $11.get(wordChange).text));
+                            $11.template_effect(() => $11.set_text(text_16, $11.get(wordChange).text));
                             $11.append($$anchor8, ins_1);
                           };
                           $11.if(node_14, ($$render) => {
@@ -1156,9 +1260,9 @@ function Diff_line($$anchor, $$props) {
                   $11.append($$anchor5, fragment_11);
                 };
                 var alternate_7 = ($$anchor5) => {
-                  var text_16 = $11.text();
-                  $11.template_effect(() => $11.set_text(text_16, $11.get(displayText) || " "));
-                  $11.append($$anchor5, text_16);
+                  var text_17 = $11.text();
+                  $11.template_effect(() => $11.set_text(text_17, $11.get(displayText) || " "));
+                  $11.append($$anchor5, text_17);
                 };
                 $11.if(node_11, ($$render) => {
                   if ($$props.viewMode === "unified")
@@ -1210,7 +1314,7 @@ function Diff_line($$anchor, $$props) {
 $11.delegate(["click"]);
 
 // src/components/diff-viewer/diff-front-matter.svelte
-var root_12 = $12.from_html(`<div class="front-matter-content svelte-113383m"></div>`);
+var root_13 = $12.from_html(`<div class="front-matter-content svelte-113383m"></div>`);
 var root5 = $12.from_html(`<div><!> <!></div>`);
 function Diff_front_matter($$anchor, $$props) {
   $12.push($$props, true);
@@ -1257,7 +1361,7 @@ function Diff_front_matter($$anchor, $$props) {
   var node_1 = $12.sibling(node, 2);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_12();
+      var div_1 = root_13();
       $12.each(div_1, 23, () => $$props.diffs, (lineDiff, idx) => `fm-${idx}:${lineDiff.type}:${lineDiff.type === "modified" ? lineDiff.newText : lineDiff.text}`, ($$anchor3, lineDiff) => {
         Diff_line($$anchor3, {
           get diff() {
@@ -1315,9 +1419,9 @@ function Kbd($$anchor, $$props) {
       $13.append($$anchor2, fragment);
     };
     var alternate = ($$anchor2) => {
-      var text5 = $13.text();
-      $13.template_effect(() => $13.set_text(text5, $$props.label));
-      $13.append($$anchor2, text5);
+      var text6 = $13.text();
+      $13.template_effect(() => $13.set_text(text6, $$props.label));
+      $13.append($$anchor2, text6);
     };
     $13.if(node, ($$render) => {
       if ($$props.children)
@@ -1341,17 +1445,21 @@ import * as $14 from "svelte/internal/client";
 import { createContext as createContext2 } from "svelte";
 
 // src/utilities/document-order.ts
+var DOCUMENT_POSITION_PRECEDING = 2;
+var DOCUMENT_POSITION_FOLLOWING = 4;
 function inDocumentOrder(items) {
-  return items.toSorted((a, b) => {
+  const sortedItems = [...items];
+  sortedItems.sort((a, b) => {
     if (a.node === b.node)
       return 0;
     const position = a.node.compareDocumentPosition(b.node);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+    if (position & DOCUMENT_POSITION_FOLLOWING)
       return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+    if (position & DOCUMENT_POSITION_PRECEDING)
       return 1;
     return 0;
   });
+  return sortedItems;
 }
 
 // src/utilities/roving-tabindex.ts
@@ -1554,7 +1662,7 @@ class SegmentedControlController {
 }
 
 // src/components/segment/segment.svelte
-var root_13 = $15.from_html(`<span class="cinder-segmented-control-option-icon" aria-hidden="true"><!></span>`);
+var root_15 = $15.from_html(`<span class="cinder-segmented-control-option-icon" aria-hidden="true"><!></span>`);
 var root_24 = $15.from_html(`<span class="cinder-segmented-control-option-trailing" aria-hidden="true"><!></span>`);
 var root7 = $15.from_html(`<button><!> <!> <!></button>`);
 function Segment($$anchor, $$props) {
@@ -1614,7 +1722,7 @@ function Segment($$anchor, $$props) {
   var node_1 = $15.child(button);
   {
     var consequent = ($$anchor2) => {
-      var span = root_13();
+      var span = root_15();
       var node_2 = $15.child(span);
       $15.snippet(node_2, () => $$props.leading);
       $15.reset(span);
@@ -1650,7 +1758,11 @@ function Segment($$anchor, $$props) {
 // src/components/segmented-control/segmented-control.svelte
 import"svelte/internal/disclose-version";
 import * as $16 from "svelte/internal/client";
-var root8 = $16.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div></div>`);
+import { untrack as untrack3 } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+var root_25 = $16.from_html(`<input type="hidden"/>`);
+var root_18 = $16.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
+var root8 = $16.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div> <!></div>`);
 function Segmented_control($$anchor, $$props) {
   $16.push($$props, true);
   let value = $16.prop($$props, "value", 15), hideLabel = $16.prop($$props, "hideLabel", 3, false), disabled = $16.prop($$props, "disabled", 3, false), size = $16.prop($$props, "size", 3, "md"), orientation = $16.prop($$props, "orientation", 3, "horizontal"), detached = $16.prop($$props, "detached", 3, false), fullWidth = $16.prop($$props, "fullWidth", 3, false), variant = $16.prop($$props, "variant", 3, "radiogroup"), selectionMode = $16.prop($$props, "selectionMode", 3, "single"), disallowEmptySelection = $16.prop($$props, "disallowEmptySelection", 3, true), rest = $16.rest_props($$props, [
@@ -1660,6 +1772,7 @@ function Segmented_control($$anchor, $$props) {
     "id",
     "value",
     "label",
+    "name",
     "hideLabel",
     "disabled",
     "size",
@@ -1674,6 +1787,10 @@ function Segmented_control($$anchor, $$props) {
     "onchange",
     "children"
   ]);
+  let resetInputElement = $16.state(null);
+  let resetSyncTimeout;
+  const initialSingleValue = untrack3(() => typeof value() === "string" ? value() : undefined);
+  const initialMultipleValues = untrack3(() => selectionMode() === "multiple" && value() instanceof SvelteSet ? Array.from(value()) : undefined);
   const controller = new SegmentedControlController({
     selectionMode: () => selectionMode(),
     variant: () => variant(),
@@ -1704,9 +1821,38 @@ function Segmented_control($$anchor, $$props) {
   setSegmentedControlContext(contextValue);
   const groupRole = $16.derived(() => selectionMode() === "multiple" ? "group" : variant() === "tablist" ? "tablist" : "radiogroup");
   const effectiveSize = $16.derived(() => $$props.density === "toolbar" ? "sm" : size());
+  const selectedValues = $16.derived(() => selectionMode() === "multiple" ? value() instanceof SvelteSet ? Array.from(value()) : [] : typeof value() === "string" ? [value()] : []);
+  function resetToInitialValue(event) {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (event.defaultPrevented)
+        return;
+      if (selectionMode() === "multiple") {
+        value(initialMultipleValues === undefined ? undefined : new SvelteSet(initialMultipleValues));
+        return;
+      }
+      value(initialSingleValue);
+    }, 0);
+  }
+  $16.user_effect(() => {
+    const input = $16.get(resetInputElement);
+    if (input === null)
+      return;
+    const form = input.form;
+    form?.addEventListener("reset", resetToInitialValue);
+    return () => {
+      form?.removeEventListener("reset", resetToInitialValue);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
   var div = root8();
   var span = $16.child(div);
-  var text5 = $16.child(span, true);
+  var text6 = $16.child(span, true);
   $16.reset(span);
   var div_1 = $16.sibling(span, 2);
   var event_handler = (event) => controller.handleKeydown(event);
@@ -1730,11 +1876,35 @@ function Segmented_control($$anchor, $$props) {
   var node = $16.child(div_1);
   $16.snippet(node, () => $$props.children);
   $16.reset(div_1);
+  var node_1 = $16.sibling(div_1, 2);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment = root_18();
+      var input_1 = $16.first_child(fragment);
+      $16.bind_this(input_1, ($$value) => $16.set(resetInputElement, $$value), () => $16.get(resetInputElement));
+      var node_2 = $16.sibling(input_1, 2);
+      $16.each(node_2, 16, () => $16.get(selectedValues), (selectedValue) => selectedValue, ($$anchor3, selectedValue) => {
+        var input_2 = root_25();
+        $16.remove_input_defaults(input_2);
+        $16.template_effect(() => {
+          $16.set_attribute(input_2, "name", $$props.name);
+          $16.set_value(input_2, selectedValue);
+          input_2.disabled = disabled();
+        });
+        $16.append($$anchor3, input_2);
+      });
+      $16.append($$anchor2, fragment);
+    };
+    $16.if(node_1, ($$render) => {
+      if ($$props.name)
+        $$render(consequent);
+    });
+  }
   $16.reset(div);
   $16.template_effect(($0) => {
     $16.set_attribute(span, "id", `${$$props.id}-label`);
     $16.set_class(span, 1, $0);
-    $16.set_text(text5, $$props.label);
+    $16.set_text(text6, $$props.label);
   }, [
     () => $16.clsx(classNames("cinder-segmented-control-label", hideLabel() && "cinder-sr-only"))
   ]);
@@ -1758,10 +1928,10 @@ function Spinner($$anchor, $$props) {
     "data-cinder-size": size()
   }), [() => classNames("cinder-spinner", $$props.class)]);
   var span_1 = $17.child(span);
-  var text5 = $17.child(span_1, true);
+  var text6 = $17.child(span_1, true);
   $17.reset(span_1);
   $17.reset(span);
-  $17.template_effect(() => $17.set_text(text5, label()));
+  $17.template_effect(() => $17.set_text(text6, label()));
   $17.append($$anchor, span);
   $17.pop();
 }
@@ -1818,7 +1988,7 @@ function Refresh_cw($$anchor, $$props) {
   }));
 }
 // src/components/diff-viewer/diff-toolbar.svelte
-var root_15 = $20.from_html(`<!> <!> <!>`, 1);
+var root_110 = $20.from_html(`<!> <!> <!>`, 1);
 var root_112 = $20.from_html(`<span class="no-changes svelte-1p8ursg">No changes</span>`);
 var root_172 = $20.from_html(`<!> Revert All`, 1);
 var root_192 = $20.from_html(`<!> Compute Diff`, 1);
@@ -1865,14 +2035,14 @@ function Diff_toolbar($$anchor, $$props) {
       viewMode($$value);
     },
     children: ($$anchor2, $$slotProps) => {
-      var fragment = root_15();
+      var fragment = root_110();
       var node_1 = $20.first_child(fragment);
       Segment(node_1, {
         value: "unified",
         children: ($$anchor3, $$slotProps2) => {
           $20.next();
-          var text6 = $20.text("Unified");
-          $20.append($$anchor3, text6);
+          var text7 = $20.text("Unified");
+          $20.append($$anchor3, text7);
         },
         $$slots: { default: true }
       });
@@ -2163,7 +2333,7 @@ var root_6 = $21.from_html(`<div class="diff-warning svelte-1fvc2en" role="statu
 var root_113 = $21.from_html(`<!> Revert`, 1);
 var root_103 = $21.from_html(`<div class="hunk-header svelte-1fvc2en"><span class="hunk-range svelte-1fvc2en"> </span> <!></div>`);
 var root_92 = $21.from_html(`<!> <!>`, 1);
-var root_18 = $21.from_html(`<!> <!> <div class="diff-content svelte-1fvc2en"><!> <!></div>`, 1);
+var root_111 = $21.from_html(`<!> <!> <div class="diff-content svelte-1fvc2en"><!> <!></div>`, 1);
 function Diff_viewer($$anchor, $$props) {
   const instanceId = $21.props_id();
   $21.push($$props, true);
@@ -2325,7 +2495,7 @@ ${match[1] ?? ""}
         return $21.get($1);
       },
       children: ($$anchor2, $$slotProps) => {
-        var fragment_1 = root_18();
+        var fragment_1 = root_111();
         var node = $21.first_child(fragment_1);
         {
           var consequent = ($$anchor3) => {
@@ -2400,8 +2570,8 @@ ${match[1] ?? ""}
         {
           var consequent_3 = ($$anchor3) => {
             var div = root_6();
-            var text6 = $21.child(div);
-            var node_5 = $21.sibling(text6);
+            var text7 = $21.child(div);
+            var node_5 = $21.sibling(text7);
             {
               var consequent_2 = ($$anchor4) => {
                 var span = root_72();
@@ -2416,7 +2586,7 @@ ${match[1] ?? ""}
               });
             }
             $21.reset(div);
-            $21.template_effect(() => $21.set_text(text6, `${$21.get(diffState).warning ?? ""} `));
+            $21.template_effect(() => $21.set_text(text7, `${$21.get(diffState).warning ?? ""} `));
             $21.append($$anchor3, div);
           };
           $21.if(node_4, ($$render) => {
@@ -2528,4 +2698,4 @@ export {
   Diff_viewer as DiffViewer
 };
 
-//# debugId=FBEE6B812FF30C0C64756E2164756E21
+//# debugId=8DE2126F46B7723F64756E2164756E21