@lostgradient/cinder 0.12.1 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lostgradient/cinder
 
+## 0.13.0
+
+### Minor Changes
+
+- [#740](https://github.com/stevekinney/cinder/pull/740) [`ddefe5c`](https://github.com/stevekinney/cinder/commit/ddefe5c7fb2beff3b2593ea1179cc1bb6ed56bae) Thanks [@stevekinney](https://github.com/stevekinney)! - Add link-backed SegmentedControl navigation options for route filters.
+
 ## 0.12.1
 
 ### Patch Changes

package/components.json

@@ -3,7 +3,7 @@
   "manifestVersion": 1,
   "package": {
     "name": "@lostgradient/cinder",
-    "version": "0.12.1",
+    "version": "0.13.0",
     "framework": "svelte",
     "frameworkVersionRange": ">=5.56.0 <6",
     "classPrefix": "cinder-",
@@ -4377,11 +4377,12 @@
       "exportName": "Segment",
       "category": "form",
       "status": "stable",
-      "purpose": "Individual option inside a SegmentedControl that renders the button, wires the value, and forwards leading/trailing decorations.",
+      "purpose": "Individual option inside a SegmentedControl that renders either a selection button or a route-backed link with shared segmented styling.",
       "tags": ["form", "selection"],
       "useWhen": [
         "Authoring SegmentedControl children declaratively so consumers can compose icons, labels, and badges per segment.",
-        "Mixing disabled and enabled segments inside a single radiogroup/tablist where each segment carries its own metadata."
+        "Mixing disabled and enabled segments inside a single radiogroup/tablist where each segment carries its own metadata.",
+        "Rendering route filters as real links inside `SegmentedControl variant=\"navigation\"`."
       ],
       "avoidWhen": [
         {
@@ -4406,11 +4407,12 @@
       "exportName": "SegmentedControl",
       "category": "form",
       "status": "stable",
-      "purpose": "Compact radio-style selector that surfaces a small fixed set of options as a single connected bar and binds the chosen value.",
+      "purpose": "Compact segmented selector that surfaces a small fixed set of options as a connected bar, including bindable selections and route-backed links.",
       "tags": ["form", "selection"],
       "useWhen": [
         "Choosing one of two to five mutually exclusive options that all fit on screen at once.",
-        "Picking a view filter where seeing every option beats hiding them inside a toggle or tabs control."
+        "Picking a view filter where seeing every option beats hiding them inside a toggle or tabs control.",
+        "Rendering route-backed filters as real links with `variant=\"navigation\"` and `Segment href`."
       ],
       "avoidWhen": [
         {

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

@@ -1710,25 +1710,69 @@ var rest_excludes7 = new Set([
   "$$events",
   "$$legacy",
   "value",
+  "href",
+  "download",
+  "target",
+  "rel",
+  "current",
+  "currentToken",
   "disabled",
   "controls",
   "leading",
   "trailing",
   "children",
-  "class"
+  "class",
+  "onclick"
 ]);
 var root9 = $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-trailing" aria-hidden="true"><!></span>`);
-var root_24 = $15.from_html(`<button><!> <!> <!></button>`);
+var root_24 = $15.from_html(`<!> <!> <!>`, 1);
+var root_34 = $15.from_html(`<a><!></a>`);
+var root_43 = $15.from_html(`<button><!></button>`);
 function Segment($$anchor, $$props) {
   $15.push($$props, true);
-  let disabled = $15.prop($$props, "disabled", 3, false), rest = $15.rest_props($$props, rest_excludes7);
+  const content = ($$anchor2) => {
+    var fragment = root_24();
+    var node_1 = $15.first_child(fragment);
+    {
+      var consequent = ($$anchor3) => {
+        var span = root9();
+        var node_2 = $15.child(span);
+        $15.snippet(node_2, () => $$props.leading);
+        $15.reset(span);
+        $15.append($$anchor3, span);
+      };
+      $15.if(node_1, ($$render) => {
+        if ($$props.leading)
+          $$render(consequent);
+      });
+    }
+    var node_3 = $15.sibling(node_1, 2);
+    $15.snippet(node_3, () => $$props.children ?? $15.noop);
+    var node_4 = $15.sibling(node_3, 2);
+    {
+      var consequent_1 = ($$anchor3) => {
+        var span_1 = root_15();
+        var node_5 = $15.child(span_1);
+        $15.snippet(node_5, () => $$props.trailing);
+        $15.reset(span_1);
+        $15.append($$anchor3, span_1);
+      };
+      $15.if(node_4, ($$render) => {
+        if ($$props.trailing)
+          $$render(consequent_1);
+      });
+    }
+    $15.append($$anchor2, fragment);
+  };
+  let current = $15.prop($$props, "current", 3, false), currentToken = $15.prop($$props, "currentToken", 3, "page"), disabled = $15.prop($$props, "disabled", 3, false), rest = $15.rest_props($$props, rest_excludes7);
   const context = getSegmentedControlContext();
+  const buttonValue = $15.derived(() => $$props.value ?? $$props.href ?? "");
   const registerSegment = (node) => {
     return untrack2(() => context.register({
       node,
       get value() {
-        return $$props.value;
+        return $15.get(buttonValue);
       },
       get disabled() {
         return disabled() || context.controlDisabled;
@@ -1738,64 +1782,83 @@ function Segment($$anchor, $$props) {
       }
     }));
   };
-  const isSelected = $15.derived(() => context.isSelected($$props.value));
-  const isFocusable = $15.derived(() => context.isFocusable($$props.value));
+  const isSelected = $15.derived(() => context.isSelected($15.get(buttonValue)));
+  const isFocusable = $15.derived(() => context.isFocusable($15.get(buttonValue)));
   const effectiveDisabled = $15.derived(() => disabled() || context.controlDisabled);
+  const isNavigationItem = $15.derived(() => context.variant === "navigation");
+  const anchorDisabled = $15.derived(() => $15.get(effectiveDisabled) || $$props.href === undefined);
+  const elementAttributes = $15.derived(() => rest);
+  const anchorTabindex = $15.derived(() => $15.get(anchorDisabled) ? -1 : $15.get(elementAttributes).tabindex);
   const role = $15.derived(() => context.selectionMode === "multiple" ? undefined : context.variant === "tablist" ? "tab" : "radio");
-  var button = root_24();
-  var event_handler = () => context.toggle($$props.value);
-  $15.attribute_effect(button, ($0) => ({
-    ...rest,
-    type: "button",
-    role: $15.get(role),
-    "data-cinder-segment-value": $$props.value,
-    "aria-checked": $15.get(role) === "radio" ? $15.get(isSelected) : undefined,
-    "aria-selected": $15.get(role) === "tab" ? $15.get(isSelected) : undefined,
-    "aria-pressed": context.selectionMode === "multiple" ? $15.get(isSelected) : undefined,
-    "aria-controls": $15.get(role) === "tab" ? $$props.controls : undefined,
-    "aria-disabled": $15.get(effectiveDisabled) ? "true" : undefined,
-    disabled: context.selectionMode === "multiple" ? $15.get(effectiveDisabled) : undefined,
-    tabindex: $15.get(isFocusable) ? 0 : -1,
-    class: $0,
-    "data-cinder-selected": $15.get(isSelected) ? "" : undefined,
-    "data-cinder-pressed": context.selectionMode === "multiple" && $15.get(isSelected) ? "" : undefined,
-    onclick: event_handler
-  }), [
-    () => classNames("cinder-segmented-control-option", $$props.class)
-  ]);
-  var node_1 = $15.child(button);
-  {
-    var consequent = ($$anchor2) => {
-      var span = root9();
-      var node_2 = $15.child(span);
-      $15.snippet(node_2, () => $$props.leading);
-      $15.reset(span);
-      $15.append($$anchor2, span);
-    };
-    $15.if(node_1, ($$render) => {
-      if ($$props.leading)
-        $$render(consequent);
-    });
+  function handleAnchorClick(event) {
+    if ($15.get(anchorDisabled)) {
+      event.preventDefault();
+      return;
+    }
+    $$props.onclick?.(event);
   }
-  var node_3 = $15.sibling(node_1, 2);
-  $15.snippet(node_3, () => $$props.children ?? $15.noop);
-  var node_4 = $15.sibling(node_3, 2);
+  var fragment_1 = $15.comment();
+  var node_6 = $15.first_child(fragment_1);
   {
-    var consequent_1 = ($$anchor2) => {
-      var span_1 = root_15();
-      var node_5 = $15.child(span_1);
-      $15.snippet(node_5, () => $$props.trailing);
-      $15.reset(span_1);
-      $15.append($$anchor2, span_1);
+    var consequent_2 = ($$anchor2) => {
+      var a = root_34();
+      $15.attribute_effect(a, ($0) => ({
+        ...$15.get(elementAttributes),
+        href: $15.get(anchorDisabled) ? undefined : $$props.href,
+        download: $$props.download,
+        target: $$props.target,
+        rel: $$props.rel,
+        "data-cinder-segment-value": $15.get(buttonValue),
+        "aria-current": current() ? currentToken() : undefined,
+        "aria-disabled": $15.get(anchorDisabled) ? "true" : undefined,
+        tabindex: $15.get(anchorTabindex),
+        class: $0,
+        "data-cinder-current": current() ? "" : undefined,
+        onclick: handleAnchorClick
+      }), [
+        () => classNames("cinder-segmented-control-option", $$props.class)
+      ]);
+      var node_7 = $15.child(a);
+      content(node_7);
+      $15.reset(a);
+      $15.append($$anchor2, a);
     };
-    $15.if(node_4, ($$render) => {
-      if ($$props.trailing)
-        $$render(consequent_1);
+    var alternate = ($$anchor2) => {
+      var button = root_43();
+      var event_handler = () => context.toggle($15.get(buttonValue));
+      $15.attribute_effect(button, ($0) => ({
+        ...$15.get(elementAttributes),
+        type: "button",
+        role: $15.get(role),
+        "data-cinder-segment-value": $15.get(buttonValue),
+        "aria-checked": $15.get(role) === "radio" ? $15.get(isSelected) : undefined,
+        "aria-selected": $15.get(role) === "tab" ? $15.get(isSelected) : undefined,
+        "aria-pressed": context.selectionMode === "multiple" ? $15.get(isSelected) : undefined,
+        "aria-controls": $15.get(role) === "tab" ? $$props.controls : undefined,
+        "aria-disabled": $15.get(effectiveDisabled) ? "true" : undefined,
+        disabled: context.selectionMode === "multiple" ? $15.get(effectiveDisabled) : undefined,
+        tabindex: $15.get(isFocusable) ? 0 : -1,
+        class: $0,
+        "data-cinder-selected": $15.get(isSelected) ? "" : undefined,
+        "data-cinder-pressed": context.selectionMode === "multiple" && $15.get(isSelected) ? "" : undefined,
+        onclick: event_handler
+      }), [
+        () => classNames("cinder-segmented-control-option", $$props.class)
+      ]);
+      var node_8 = $15.child(button);
+      content(node_8);
+      $15.reset(button);
+      $15.attach(button, () => registerSegment);
+      $15.append($$anchor2, button);
+    };
+    $15.if(node_6, ($$render) => {
+      if ($15.get(isNavigationItem))
+        $$render(consequent_2);
+      else
+        $$render(alternate, -1);
     });
   }
-  $15.reset(button);
-  $15.attach(button, () => registerSegment);
-  $15.append($$anchor, button);
+  $15.append($$anchor, fragment_1);
   $15.pop();
 }
 
@@ -1826,9 +1889,11 @@ var rest_excludes8 = new Set([
   "onchange",
   "children"
 ]);
-var root10 = $16.from_html(`<input type="hidden"/>`);
-var root_16 = $16.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
-var root_25 = $16.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div> <!></div>`);
+var root10 = $16.from_html(`<nav><!></nav>`);
+var root_16 = $16.from_html(`<div><!></div>`);
+var root_25 = $16.from_html(`<input type="hidden"/>`);
+var root_35 = $16.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
+var root_44 = $16.from_html(`<div class="cinder-segmented-control-container"><span> </span> <!> <!></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, rest_excludes8);
@@ -1836,9 +1901,11 @@ function Segmented_control($$anchor, $$props) {
   let resetSyncTimeout;
   const initialSingleValue = untrack3(() => typeof value() === "string" ? value() : undefined);
   const initialMultipleValues = untrack3(() => selectionMode() === "multiple" && value() instanceof SvelteSet ? Array.from(value()) : undefined);
+  const effectiveVariant = $16.derived(() => selectionMode() === "multiple" && variant() !== "radiogroup" ? "radiogroup" : variant());
+  const rendersNavigation = $16.derived(() => $16.get(effectiveVariant) === "navigation");
   const controller = new SegmentedControlController({
     selectionMode: () => selectionMode(),
-    variant: () => variant(),
+    variant: () => $16.get(effectiveVariant),
     orientation: () => orientation(),
     controlDisabled: () => disabled(),
     disallowEmptySelection: () => disallowEmptySelection(),
@@ -1853,7 +1920,7 @@ function Segmented_control($$anchor, $$props) {
       return selectionMode();
     },
     get variant() {
-      return variant();
+      return $16.get(effectiveVariant);
     },
     get controlDisabled() {
       return disabled();
@@ -1864,7 +1931,7 @@ function Segmented_control($$anchor, $$props) {
     toggle: (segmentValue) => controller.toggle(segmentValue)
   };
   setSegmentedControlContext(contextValue);
-  const groupRole = $16.derived(() => selectionMode() === "multiple" ? "group" : variant() === "tablist" ? "tablist" : "radiogroup");
+  const groupRole = $16.derived(() => selectionMode() === "multiple" ? "group" : variant() === "navigation" ? undefined : 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) {
@@ -1895,41 +1962,74 @@ function Segmented_control($$anchor, $$props) {
       }
     };
   });
-  var div = root_25();
+  var div = root_44();
   var span = $16.child(div);
   var text6 = $16.child(span, true);
   $16.reset(span);
-  var div_1 = $16.sibling(span, 2);
-  var event_handler = (event) => controller.handleKeydown(event);
-  $16.attribute_effect(div_1, ($0) => ({
-    ...rest,
-    id: $$props.id,
-    role: $16.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": $16.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 = $16.child(div_1);
-  $16.snippet(node, () => $$props.children);
-  $16.reset(div_1);
-  var node_1 = $16.sibling(div_1, 2);
+  var node = $16.sibling(span, 2);
   {
     var consequent = ($$anchor2) => {
-      var fragment = root_16();
+      var nav = root10();
+      $16.attribute_effect(nav, ($0) => ({
+        ...rest,
+        id: $$props.id,
+        role: "navigation",
+        "aria-labelledby": `${$$props.id}-label`,
+        "data-cinder-orientation": orientation(),
+        "data-cinder-size": $16.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": $16.get(effectiveVariant),
+        class: $0
+      }), [() => classNames("cinder-segmented-control", $$props.class)]);
+      var node_1 = $16.child(nav);
+      $16.snippet(node_1, () => $$props.children);
+      $16.reset(nav);
+      $16.append($$anchor2, nav);
+    };
+    var alternate = ($$anchor2) => {
+      var div_1 = root_16();
+      var event_handler = (event) => controller.handleKeydown(event);
+      $16.attribute_effect(div_1, ($0) => ({
+        ...rest,
+        id: $$props.id,
+        role: $16.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": $16.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": $16.get(effectiveVariant),
+        class: $0,
+        onkeydown: event_handler
+      }), [() => classNames("cinder-segmented-control", $$props.class)]);
+      var node_2 = $16.child(div_1);
+      $16.snippet(node_2, () => $$props.children);
+      $16.reset(div_1);
+      $16.append($$anchor2, div_1);
+    };
+    $16.if(node, ($$render) => {
+      if ($16.get(rendersNavigation))
+        $$render(consequent);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  var node_3 = $16.sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var fragment = root_35();
       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 = root10();
+      var node_4 = $16.sibling(input_1, 2);
+      $16.each(node_4, 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);
@@ -1940,9 +2040,9 @@ function Segmented_control($$anchor, $$props) {
       });
       $16.append($$anchor2, fragment);
     };
-    $16.if(node_1, ($$render) => {
-      if ($$props.name)
-        $$render(consequent);
+    $16.if(node_3, ($$render) => {
+      if ($$props.name && !$16.get(rendersNavigation))
+        $$render(consequent_1);
     });
   }
   $16.reset(div);
@@ -2055,8 +2155,8 @@ var rest_excludes10 = new Set([
 var root12 = $20.from_html(`<!> <!> <!>`, 1);
 var root_17 = $20.from_html(`<span class="no-changes svelte-1p8ursg">No changes</span>`);
 var root_26 = $20.from_html(`<!> Revert All`, 1);
-var root_34 = $20.from_html(`<!> Compute Diff`, 1);
-var root_43 = $20.from_html(`<div class="navigation svelte-1p8ursg"><!> <span class="change-counter svelte-1p8ursg"> </span> <!></div> <div class="shortcuts svelte-1p8ursg"><!> <!></div>`, 1);
+var root_36 = $20.from_html(`<!> Compute Diff`, 1);
+var root_45 = $20.from_html(`<div class="navigation svelte-1p8ursg"><!> <span class="change-counter svelte-1p8ursg"> </span> <!></div> <div class="shortcuts svelte-1p8ursg"><!> <!></div>`, 1);
 var root_53 = $20.from_html(`<span class="front-matter-only-hint svelte-1p8ursg">Front matter only</span>`);
 var root_62 = $20.from_html(`<div><div class="toolbar-left svelte-1p8ursg"><!> <div class="stats svelte-1p8ursg"><!> <!> <!> <!> <!> <!></div></div> <div class="toolbar-right svelte-1p8ursg"><!> <!> <!> <!></div></div>`);
 function Diff_toolbar($$anchor, $$props) {
@@ -2275,7 +2375,7 @@ function Diff_toolbar($$anchor, $$props) {
           return $20.get(isComputing);
         },
         children: ($$anchor3, $$slotProps) => {
-          var fragment_13 = root_34();
+          var fragment_13 = root_36();
           var node_15 = $20.first_child(fragment_13);
           Refresh_cw(node_15, { class: "cinder-icon-sm" });
           $20.next();
@@ -2296,7 +2396,7 @@ function Diff_toolbar($$anchor, $$props) {
       var node_17 = $20.first_child(fragment_14);
       {
         var consequent_9 = ($$anchor3) => {
-          var fragment_15 = root_43();
+          var fragment_15 = root_45();
           var div_4 = $20.first_child(fragment_15);
           var node_18 = $20.child(div_4);
           Button(node_18, {
@@ -2378,8 +2478,8 @@ function Diff_toolbar($$anchor, $$props) {
 var root13 = $21.from_html(`<span class="compute-time svelte-1fvc2en"> </span>`);
 var root_18 = $21.from_html(`<div class="diff-warning svelte-1fvc2en" role="status"> <!></div>`);
 var root_27 = $21.from_html(`<!> Revert`, 1);
-var root_35 = $21.from_html(`<div class="hunk-header svelte-1fvc2en"><span class="hunk-range svelte-1fvc2en"> </span> <!></div>`);
-var root_44 = $21.from_html(`<!> <!>`, 1);
+var root_37 = $21.from_html(`<div class="hunk-header svelte-1fvc2en"><span class="hunk-range svelte-1fvc2en"> </span> <!></div>`);
+var root_46 = $21.from_html(`<!> <!>`, 1);
 var root_54 = $21.from_html(`<!> <!> <div class="diff-content svelte-1fvc2en"><!> <!></div>`, 1);
 function Diff_viewer($$anchor, $$props) {
   const instanceId = $21.props_id();
@@ -2680,11 +2780,11 @@ ${match[1] ?? ""}
         $21.each(node_7, 17, () => $21.get(lineDiffs), $21.index, ($$anchor3, lineDiff, idx) => {
           const isSelected = $21.derived(() => $21.get(selectedLineIndex) === idx);
           const hunkAtLine = $21.derived(() => $21.get(hunkStartMap).get(idx));
-          var fragment_7 = root_44();
+          var fragment_7 = root_46();
           var node_8 = $21.first_child(fragment_7);
           {
             var consequent_5 = ($$anchor4) => {
-              var div_2 = root_35();
+              var div_2 = root_37();
               var span_1 = $21.child(div_2);
               var text_2 = $21.child(span_1);
               $21.reset(span_1);
@@ -2745,4 +2845,4 @@ export {
   Diff_viewer as DiffViewer
 };
 
-//# debugId=D8CD827CC357804664756E2164756E21
+//# debugId=FA46603BE613BE0864756E2164756E21