@lostgradient/cinder 0.12.0 → 0.13.0

package/dist/components/segmented-control/index.js

@@ -305,25 +305,69 @@ var rest_excludes = new Set([
   "$$events",
   "$$legacy",
   "value",
+  "href",
+  "download",
+  "target",
+  "rel",
+  "current",
+  "currentToken",
   "disabled",
   "controls",
   "leading",
   "trailing",
   "children",
-  "class"
+  "class",
+  "onclick"
 ]);
 var root = $2.from_html(`<span class="cinder-segmented-control-option-icon" aria-hidden="true"><!></span>`);
 var root_1 = $2.from_html(`<span class="cinder-segmented-control-option-trailing" aria-hidden="true"><!></span>`);
-var root_2 = $2.from_html(`<button><!> <!> <!></button>`);
+var root_2 = $2.from_html(`<!> <!> <!>`, 1);
+var root_3 = $2.from_html(`<a><!></a>`);
+var root_4 = $2.from_html(`<button><!></button>`);
 function Segment($$anchor, $$props) {
   $2.push($$props, true);
-  let disabled = $2.prop($$props, "disabled", 3, false), rest = $2.rest_props($$props, rest_excludes);
+  const content = ($$anchor2) => {
+    var fragment = root_2();
+    var node_1 = $2.first_child(fragment);
+    {
+      var consequent = ($$anchor3) => {
+        var span = root();
+        var node_2 = $2.child(span);
+        $2.snippet(node_2, () => $$props.leading);
+        $2.reset(span);
+        $2.append($$anchor3, span);
+      };
+      $2.if(node_1, ($$render) => {
+        if ($$props.leading)
+          $$render(consequent);
+      });
+    }
+    var node_3 = $2.sibling(node_1, 2);
+    $2.snippet(node_3, () => $$props.children ?? $2.noop);
+    var node_4 = $2.sibling(node_3, 2);
+    {
+      var consequent_1 = ($$anchor3) => {
+        var span_1 = root_1();
+        var node_5 = $2.child(span_1);
+        $2.snippet(node_5, () => $$props.trailing);
+        $2.reset(span_1);
+        $2.append($$anchor3, span_1);
+      };
+      $2.if(node_4, ($$render) => {
+        if ($$props.trailing)
+          $$render(consequent_1);
+      });
+    }
+    $2.append($$anchor2, fragment);
+  };
+  let current = $2.prop($$props, "current", 3, false), currentToken = $2.prop($$props, "currentToken", 3, "page"), disabled = $2.prop($$props, "disabled", 3, false), rest = $2.rest_props($$props, rest_excludes);
   const context = getSegmentedControlContext();
+  const buttonValue = $2.derived(() => $$props.value ?? $$props.href ?? "");
   const registerSegment = (node) => {
     return untrack(() => context.register({
       node,
       get value() {
-        return $$props.value;
+        return $2.get(buttonValue);
       },
       get disabled() {
         return disabled() || context.controlDisabled;
@@ -333,64 +377,83 @@ function Segment($$anchor, $$props) {
       }
     }));
   };
-  const isSelected = $2.derived(() => context.isSelected($$props.value));
-  const isFocusable = $2.derived(() => context.isFocusable($$props.value));
+  const isSelected = $2.derived(() => context.isSelected($2.get(buttonValue)));
+  const isFocusable = $2.derived(() => context.isFocusable($2.get(buttonValue)));
   const effectiveDisabled = $2.derived(() => disabled() || context.controlDisabled);
+  const isNavigationItem = $2.derived(() => context.variant === "navigation");
+  const anchorDisabled = $2.derived(() => $2.get(effectiveDisabled) || $$props.href === undefined);
+  const elementAttributes = $2.derived(() => rest);
+  const anchorTabindex = $2.derived(() => $2.get(anchorDisabled) ? -1 : $2.get(elementAttributes).tabindex);
   const role = $2.derived(() => context.selectionMode === "multiple" ? undefined : context.variant === "tablist" ? "tab" : "radio");
-  var button = root_2();
-  var event_handler = () => context.toggle($$props.value);
-  $2.attribute_effect(button, ($0) => ({
-    ...rest,
-    type: "button",
-    role: $2.get(role),
-    "data-cinder-segment-value": $$props.value,
-    "aria-checked": $2.get(role) === "radio" ? $2.get(isSelected) : undefined,
-    "aria-selected": $2.get(role) === "tab" ? $2.get(isSelected) : undefined,
-    "aria-pressed": context.selectionMode === "multiple" ? $2.get(isSelected) : undefined,
-    "aria-controls": $2.get(role) === "tab" ? $$props.controls : undefined,
-    "aria-disabled": $2.get(effectiveDisabled) ? "true" : undefined,
-    disabled: context.selectionMode === "multiple" ? $2.get(effectiveDisabled) : undefined,
-    tabindex: $2.get(isFocusable) ? 0 : -1,
-    class: $0,
-    "data-cinder-selected": $2.get(isSelected) ? "" : undefined,
-    "data-cinder-pressed": context.selectionMode === "multiple" && $2.get(isSelected) ? "" : undefined,
-    onclick: event_handler
-  }), [
-    () => classNames("cinder-segmented-control-option", $$props.class)
-  ]);
-  var node_1 = $2.child(button);
-  {
-    var consequent = ($$anchor2) => {
-      var span = root();
-      var node_2 = $2.child(span);
-      $2.snippet(node_2, () => $$props.leading);
-      $2.reset(span);
-      $2.append($$anchor2, span);
-    };
-    $2.if(node_1, ($$render) => {
-      if ($$props.leading)
-        $$render(consequent);
-    });
+  function handleAnchorClick(event) {
+    if ($2.get(anchorDisabled)) {
+      event.preventDefault();
+      return;
+    }
+    $$props.onclick?.(event);
   }
-  var node_3 = $2.sibling(node_1, 2);
-  $2.snippet(node_3, () => $$props.children ?? $2.noop);
-  var node_4 = $2.sibling(node_3, 2);
+  var fragment_1 = $2.comment();
+  var node_6 = $2.first_child(fragment_1);
   {
-    var consequent_1 = ($$anchor2) => {
-      var span_1 = root_1();
-      var node_5 = $2.child(span_1);
-      $2.snippet(node_5, () => $$props.trailing);
-      $2.reset(span_1);
-      $2.append($$anchor2, span_1);
+    var consequent_2 = ($$anchor2) => {
+      var a = root_3();
+      $2.attribute_effect(a, ($0) => ({
+        ...$2.get(elementAttributes),
+        href: $2.get(anchorDisabled) ? undefined : $$props.href,
+        download: $$props.download,
+        target: $$props.target,
+        rel: $$props.rel,
+        "data-cinder-segment-value": $2.get(buttonValue),
+        "aria-current": current() ? currentToken() : undefined,
+        "aria-disabled": $2.get(anchorDisabled) ? "true" : undefined,
+        tabindex: $2.get(anchorTabindex),
+        class: $0,
+        "data-cinder-current": current() ? "" : undefined,
+        onclick: handleAnchorClick
+      }), [
+        () => classNames("cinder-segmented-control-option", $$props.class)
+      ]);
+      var node_7 = $2.child(a);
+      content(node_7);
+      $2.reset(a);
+      $2.append($$anchor2, a);
     };
-    $2.if(node_4, ($$render) => {
-      if ($$props.trailing)
-        $$render(consequent_1);
+    var alternate = ($$anchor2) => {
+      var button = root_4();
+      var event_handler = () => context.toggle($2.get(buttonValue));
+      $2.attribute_effect(button, ($0) => ({
+        ...$2.get(elementAttributes),
+        type: "button",
+        role: $2.get(role),
+        "data-cinder-segment-value": $2.get(buttonValue),
+        "aria-checked": $2.get(role) === "radio" ? $2.get(isSelected) : undefined,
+        "aria-selected": $2.get(role) === "tab" ? $2.get(isSelected) : undefined,
+        "aria-pressed": context.selectionMode === "multiple" ? $2.get(isSelected) : undefined,
+        "aria-controls": $2.get(role) === "tab" ? $$props.controls : undefined,
+        "aria-disabled": $2.get(effectiveDisabled) ? "true" : undefined,
+        disabled: context.selectionMode === "multiple" ? $2.get(effectiveDisabled) : undefined,
+        tabindex: $2.get(isFocusable) ? 0 : -1,
+        class: $0,
+        "data-cinder-selected": $2.get(isSelected) ? "" : undefined,
+        "data-cinder-pressed": context.selectionMode === "multiple" && $2.get(isSelected) ? "" : undefined,
+        onclick: event_handler
+      }), [
+        () => classNames("cinder-segmented-control-option", $$props.class)
+      ]);
+      var node_8 = $2.child(button);
+      content(node_8);
+      $2.reset(button);
+      $2.attach(button, () => registerSegment);
+      $2.append($$anchor2, button);
+    };
+    $2.if(node_6, ($$render) => {
+      if ($2.get(isNavigationItem))
+        $$render(consequent_2);
+      else
+        $$render(alternate, -1);
     });
   }
-  $2.reset(button);
-  $2.attach(button, () => registerSegment);
-  $2.append($$anchor, button);
+  $2.append($$anchor, fragment_1);
   $2.pop();
 }
 
@@ -421,9 +484,11 @@ var rest_excludes2 = new Set([
   "onchange",
   "children"
 ]);
-var root2 = $3.from_html(`<input type="hidden"/>`);
-var root_12 = $3.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
-var root_22 = $3.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div> <!></div>`);
+var root2 = $3.from_html(`<nav><!></nav>`);
+var root_12 = $3.from_html(`<div><!></div>`);
+var root_22 = $3.from_html(`<input type="hidden"/>`);
+var root_32 = $3.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
+var root_42 = $3.from_html(`<div class="cinder-segmented-control-container"><span> </span> <!> <!></div>`);
 function Segmented_control($$anchor, $$props) {
   $3.push($$props, true);
   let value = $3.prop($$props, "value", 15), hideLabel = $3.prop($$props, "hideLabel", 3, false), disabled = $3.prop($$props, "disabled", 3, false), size = $3.prop($$props, "size", 3, "md"), orientation = $3.prop($$props, "orientation", 3, "horizontal"), detached = $3.prop($$props, "detached", 3, false), fullWidth = $3.prop($$props, "fullWidth", 3, false), variant = $3.prop($$props, "variant", 3, "radiogroup"), selectionMode = $3.prop($$props, "selectionMode", 3, "single"), disallowEmptySelection = $3.prop($$props, "disallowEmptySelection", 3, true), rest = $3.rest_props($$props, rest_excludes2);
@@ -431,9 +496,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 = $3.derived(() => selectionMode() === "multiple" && variant() !== "radiogroup" ? "radiogroup" : variant());
+  const rendersNavigation = $3.derived(() => $3.get(effectiveVariant) === "navigation");
   const controller = new SegmentedControlController({
     selectionMode: () => selectionMode(),
-    variant: () => variant(),
+    variant: () => $3.get(effectiveVariant),
     orientation: () => orientation(),
     controlDisabled: () => disabled(),
     disallowEmptySelection: () => disallowEmptySelection(),
@@ -448,7 +515,7 @@ function Segmented_control($$anchor, $$props) {
       return selectionMode();
     },
     get variant() {
-      return variant();
+      return $3.get(effectiveVariant);
     },
     get controlDisabled() {
       return disabled();
@@ -459,7 +526,7 @@ function Segmented_control($$anchor, $$props) {
     toggle: (segmentValue) => controller.toggle(segmentValue)
   };
   setSegmentedControlContext(contextValue);
-  const groupRole = $3.derived(() => selectionMode() === "multiple" ? "group" : variant() === "tablist" ? "tablist" : "radiogroup");
+  const groupRole = $3.derived(() => selectionMode() === "multiple" ? "group" : variant() === "navigation" ? undefined : variant() === "tablist" ? "tablist" : "radiogroup");
   const effectiveSize = $3.derived(() => $$props.density === "toolbar" ? "sm" : size());
   const selectedValues = $3.derived(() => selectionMode() === "multiple" ? value() instanceof SvelteSet ? Array.from(value()) : [] : typeof value() === "string" ? [value()] : []);
   function resetToInitialValue(event) {
@@ -490,41 +557,74 @@ function Segmented_control($$anchor, $$props) {
       }
     };
   });
-  var div = root_22();
+  var div = root_42();
   var span = $3.child(div);
   var text = $3.child(span, true);
   $3.reset(span);
-  var div_1 = $3.sibling(span, 2);
-  var event_handler = (event) => controller.handleKeydown(event);
-  $3.attribute_effect(div_1, ($0) => ({
-    ...rest,
-    id: $$props.id,
-    role: $3.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": $3.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 = $3.child(div_1);
-  $3.snippet(node, () => $$props.children);
-  $3.reset(div_1);
-  var node_1 = $3.sibling(div_1, 2);
+  var node = $3.sibling(span, 2);
   {
     var consequent = ($$anchor2) => {
-      var fragment = root_12();
+      var nav = root2();
+      $3.attribute_effect(nav, ($0) => ({
+        ...rest,
+        id: $$props.id,
+        role: "navigation",
+        "aria-labelledby": `${$$props.id}-label`,
+        "data-cinder-orientation": orientation(),
+        "data-cinder-size": $3.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": $3.get(effectiveVariant),
+        class: $0
+      }), [() => classNames("cinder-segmented-control", $$props.class)]);
+      var node_1 = $3.child(nav);
+      $3.snippet(node_1, () => $$props.children);
+      $3.reset(nav);
+      $3.append($$anchor2, nav);
+    };
+    var alternate = ($$anchor2) => {
+      var div_1 = root_12();
+      var event_handler = (event) => controller.handleKeydown(event);
+      $3.attribute_effect(div_1, ($0) => ({
+        ...rest,
+        id: $$props.id,
+        role: $3.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": $3.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": $3.get(effectiveVariant),
+        class: $0,
+        onkeydown: event_handler
+      }), [() => classNames("cinder-segmented-control", $$props.class)]);
+      var node_2 = $3.child(div_1);
+      $3.snippet(node_2, () => $$props.children);
+      $3.reset(div_1);
+      $3.append($$anchor2, div_1);
+    };
+    $3.if(node, ($$render) => {
+      if ($3.get(rendersNavigation))
+        $$render(consequent);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  var node_3 = $3.sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var fragment = root_32();
       var input_1 = $3.first_child(fragment);
       $3.bind_this(input_1, ($$value) => $3.set(resetInputElement, $$value), () => $3.get(resetInputElement));
-      var node_2 = $3.sibling(input_1, 2);
-      $3.each(node_2, 16, () => $3.get(selectedValues), (selectedValue) => selectedValue, ($$anchor3, selectedValue) => {
-        var input_2 = root2();
+      var node_4 = $3.sibling(input_1, 2);
+      $3.each(node_4, 16, () => $3.get(selectedValues), (selectedValue) => selectedValue, ($$anchor3, selectedValue) => {
+        var input_2 = root_22();
         $3.remove_input_defaults(input_2);
         $3.template_effect(() => {
           $3.set_attribute(input_2, "name", $$props.name);
@@ -535,9 +635,9 @@ function Segmented_control($$anchor, $$props) {
       });
       $3.append($$anchor2, fragment);
     };
-    $3.if(node_1, ($$render) => {
-      if ($$props.name)
-        $$render(consequent);
+    $3.if(node_3, ($$render) => {
+      if ($$props.name && !$3.get(rendersNavigation))
+        $$render(consequent_1);
     });
   }
   $3.reset(div);
@@ -560,4 +660,4 @@ export {
   Segment
 };
 
-//# debugId=DB9E960BD27EB37964756E2164756E21
+//# debugId=968EAD19C4AB9BF964756E2164756E21

package/dist/components/segmented-control/segmented-control-state.svelte.d.ts

@@ -22,8 +22,8 @@ export type SegmentRegistration = {
 export type SegmentedControlContextValue = {
     /** True when the control is in single-selection mode. */
     readonly selectionMode: 'single' | 'multiple';
-    /** 'radiogroup' or 'tablist' — single mode only. */
-    readonly variant: 'radiogroup' | 'tablist';
+    /** 'radiogroup', 'tablist', or 'navigation' — single mode only. */
+    readonly variant: 'radiogroup' | 'tablist' | 'navigation';
     /** True when the whole control is disabled. */
     readonly controlDisabled: boolean;
     /** Register a segment when its DOM node mounts. Returns an unregister fn. */
@@ -45,7 +45,7 @@ export { getSegmentedControlContext, setSegmentedControlContext };
  */
 export type SegmentedControlControllerOptions = {
     selectionMode: () => 'single' | 'multiple';
-    variant: () => 'radiogroup' | 'tablist';
+    variant: () => 'radiogroup' | 'tablist' | 'navigation';
     orientation: () => 'horizontal' | 'vertical';
     controlDisabled: () => boolean;
     disallowEmptySelection: () => boolean;
@@ -65,7 +65,7 @@ export declare class SegmentedControlController {
     /** DOM-ordered view of registered segments. Re-sorts on every read. */
     get segments(): SegmentRegistration[];
     get selectionMode(): 'single' | 'multiple';
-    get variant(): 'radiogroup' | 'tablist';
+    get variant(): 'radiogroup' | 'tablist' | 'navigation';
     get controlDisabled(): boolean;
     register(registration: SegmentRegistration): () => void;
     isSelected(value: string): boolean;

package/dist/components/segmented-control/segmented-control.css

@@ -98,6 +98,7 @@
     cursor: pointer;
     font-weight: var(--cinder-font-medium);
     line-height: 1;
+    text-decoration: none;
     transition:
       background-color var(--cinder-duration-fast) var(--cinder-ease-standard),
       color var(--cinder-duration-fast) var(--cinder-ease-standard),
@@ -117,11 +118,16 @@
 
   .cinder-segmented-control:not([data-cinder-detached])
     .cinder-segmented-control-option[data-cinder-selected]:not(:first-child)::before,
+  .cinder-segmented-control:not([data-cinder-detached])
+    .cinder-segmented-control-option[data-cinder-current]:not(:first-child)::before,
   .cinder-segmented-control:not([data-cinder-detached])
     .cinder-segmented-control-option[data-cinder-pressed]:not(:first-child)::before,
   .cinder-segmented-control:not([data-cinder-detached])
     [data-cinder-selected]
     + .cinder-segmented-control-option::before,
+  .cinder-segmented-control:not([data-cinder-detached])
+    [data-cinder-current]
+    + .cinder-segmented-control-option::before,
   .cinder-segmented-control:not([data-cinder-detached])
     [data-cinder-pressed]
     + .cinder-segmented-control-option::before {
@@ -211,9 +217,9 @@
   /* Sticky-hover suppression on touch: wrap hover-only chrome so it doesn't
  * "stick" after tap on touch devices that emulate :hover. */
   @media (hover: hover) {
-    .cinder-segmented-control-option:hover:not(:disabled):not([data-cinder-selected]):not(
-        [data-cinder-pressed]
-      ) {
+    .cinder-segmented-control-option:hover:not(:disabled):not([aria-disabled='true']):not(
+        [data-cinder-selected]
+      ):not([data-cinder-current]):not([data-cinder-pressed]) {
       background: color-mix(in oklch, var(--cinder-accent), transparent 90%);
       color: var(--cinder-text);
     }
@@ -229,6 +235,9 @@
     .cinder-segmented-control-option[data-cinder-selected]:hover:not(:disabled):not(
         [aria-disabled='true']
       ),
+    .cinder-segmented-control-option[data-cinder-current]:hover:not(:disabled):not(
+        [aria-disabled='true']
+      ),
     .cinder-segmented-control-option[data-cinder-pressed]:hover:not(:disabled):not(
         [aria-disabled='true']
       ) {
@@ -248,7 +257,8 @@
 
   /* ── Disabled option ────────────────────────────────────────────────────── */
 
-  .cinder-segmented-control-option:disabled {
+  .cinder-segmented-control-option:disabled,
+  .cinder-segmented-control-option[aria-disabled='true'] {
     cursor: not-allowed;
     /* opacity centralized in foundation.css disabled-visual rule (0.6) */
   }
@@ -261,6 +271,12 @@
     box-shadow: var(--cinder-shadow-sm);
   }
 
+  .cinder-segmented-control-option[data-cinder-current] {
+    background: var(--cinder-accent);
+    color: var(--cinder-accent-contrast);
+    box-shadow: var(--cinder-shadow-sm);
+  }
+
   .cinder-segmented-control-option-icon {
     opacity: 0.9;
   }
@@ -283,7 +299,9 @@
   .cinder-segmented-control:not([data-cinder-variant='tablist'])
     .cinder-segmented-control-option[data-cinder-selected]:focus-visible,
   .cinder-segmented-control:not([data-cinder-variant='tablist'])
-    .cinder-segmented-control-option[data-cinder-pressed]:focus-visible {
+    .cinder-segmented-control-option[data-cinder-pressed]:focus-visible,
+  .cinder-segmented-control:not([data-cinder-variant='tablist'])
+    .cinder-segmented-control-option[data-cinder-current]:focus-visible {
     box-shadow:
       0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
       0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
@@ -296,7 +314,9 @@
     .cinder-segmented-control:not([data-cinder-variant='tablist'])
       .cinder-segmented-control-option[data-cinder-selected]:focus-visible,
     .cinder-segmented-control:not([data-cinder-variant='tablist'])
-      .cinder-segmented-control-option[data-cinder-pressed]:focus-visible {
+      .cinder-segmented-control-option[data-cinder-pressed]:focus-visible,
+    .cinder-segmented-control:not([data-cinder-variant='tablist'])
+      .cinder-segmented-control-option[data-cinder-current]:focus-visible {
       outline: var(--cinder-ring-width) solid Highlight;
       outline-offset: 1px;
       box-shadow: none;

package/dist/components/segmented-control/segmented-control.schema.js

@@ -97,8 +97,8 @@ var schema = {
       description: "Stretch the control to fill available width."
     },
     variant: {
-      enum: ["radiogroup", "tablist"],
-      description: "ARIA interaction pattern. Use `tablist` when options switch visible panels."
+      enum: ["radiogroup", "tablist", "navigation"],
+      description: "ARIA interaction pattern. Use `navigation` for route-backed links."
     },
     class: {
       type: "string",
@@ -142,4 +142,4 @@ export {
   segmented_control_schema_default as default
 };
 
-//# debugId=099B2110205FBC0264756E2164756E21
+//# debugId=B5990BD217C25BF364756E2164756E21

package/dist/components/segmented-control/segmented-control.svelte.d.ts

@@ -2,11 +2,12 @@
  * @cinder
  * @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.
  * @tag form
  * @tag selection
  * @useWhen Choosing one of two to five mutually exclusive options that all fit on screen at once.
  * @useWhen Picking a view filter where seeing every option beats hiding them inside a toggle or tabs control.
+ * @useWhen Rendering route-backed filters as real links with `variant="navigation"` and `Segment href`.
  * @avoidWhen Toggling a single binary on or off — use toggle or checkbox instead.
  * @avoidWhen Switching between panels of associated content — use tabs instead.
  * @related toggle, checkbox, tabs, button-group

package/dist/components/segmented-control/segmented-control.types.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import type { SvelteSet } from 'svelte/reactivity';
 type ComponentOwnedAttributes = 'id' | 'class' | 'role' | 'tabindex' | 'aria-label' | 'aria-labelledby' | 'aria-disabled' | 'aria-orientation' | 'onchange' | 'onkeydown';
-type CommonProps<T extends string> = Omit<HTMLAttributes<HTMLDivElement>, ComponentOwnedAttributes> & {
+type CommonProps<T extends string> = Omit<HTMLAttributes<HTMLElement>, ComponentOwnedAttributes> & {
     /** Unique identifier for the control. */
     id: string;
     /** Accessible label for the group. */
@@ -38,8 +38,8 @@ type CommonProps<T extends string> = Omit<HTMLAttributes<HTMLDivElement>, Compon
     detached?: boolean | undefined;
     /** Stretch the control to fill available width. */
     fullWidth?: boolean | undefined;
-    /** ARIA interaction pattern. Use `tablist` when options switch visible panels. */
-    variant?: 'radiogroup' | 'tablist' | undefined;
+    /** ARIA interaction pattern. Use `navigation` for route-backed links. */
+    variant?: 'radiogroup' | 'tablist' | 'navigation' | undefined;
     /** Additional class names merged with `.cinder-segmented-control`. */
     class?: string | undefined;
     /** Called when the selected value changes (single mode only). */
@@ -65,7 +65,7 @@ type MultipleProps<T extends string> = CommonProps<T> & {
     value?: SvelteSet<T> | undefined;
     /** Not applicable in multiple mode — present for Svelte destructuring compatibility. */
     disallowEmptySelection?: undefined;
-    /** Tablist semantics are only valid for single selection. */
+    /** Tablist and navigation semantics are only valid for single selection. */
     variant?: 'radiogroup' | undefined;
 };
 export type SegmentedControlProps<T extends string = string> = SingleProps<T> | MultipleProps<T>;

package/dist/components/side-navigation/side-navigation.css

@@ -13,6 +13,7 @@
  * ======================================== */
 
   .cinder-side-navigation {
+    --cinder-side-navigation-list-gap: var(--cinder-space-1);
     display: block;
   }
 
@@ -22,7 +23,7 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--cinder-space-1);
+    gap: var(--cinder-side-navigation-list-gap, var(--cinder-space-1));
   }
 
   /* ----------------------------------------

package/dist/components/side-navigation/side-navigation.schema.js

@@ -59,6 +59,14 @@ var schema = {
     ariaLabel: {
       type: "string",
       description: "Accessible name for the <nav> landmark. Required, non-empty, distinct from other navs on the page."
+    },
+    class: {
+      type: "string",
+      description: "Additional CSS class merged with `.cinder-side-navigation`."
+    },
+    style: {
+      type: "string",
+      description: "Inline style string applied to the `.cinder-side-navigation` root."
     }
   },
   additionalProperties: false,
@@ -70,11 +78,6 @@ var schema = {
         reason: "function-or-snippet",
         required: true,
         description: "Must be <li> elements containing NavigationItem and/or SideNavigationGroup."
-      },
-      {
-        name: "class",
-        reason: "unknown-shape",
-        description: "Additional CSS class merged with `.cinder-side-navigation`."
       }
     ]
   }
@@ -84,4 +87,4 @@ export {
   side_navigation_schema_default as default
 };
 
-//# debugId=F505A75B9F06310E64756E2164756E21
+//# debugId=8436A7F5FC75585064756E2164756E21

package/dist/components/side-navigation/side-navigation.types.d.ts

@@ -9,3 +9,14 @@ export type SideNavigationProps = Omit<HTMLAttributes<HTMLElement>, 'aria-label'
     /** Must be <li> elements containing NavigationItem and/or SideNavigationGroup. */
     children: Snippet;
 };
+/** Schema generator surface for SideNavigation — excludes native attributes except supported styling hooks. */
+export interface SideNavigationSchemaProps {
+    /** Accessible name for the <nav> landmark. Required, non-empty, distinct from other navs on the page. */
+    ariaLabel: string;
+    /** Additional CSS class merged with `.cinder-side-navigation`. */
+    class?: string;
+    /** Inline style string applied to the `.cinder-side-navigation` root. */
+    style?: string;
+    /** Must be <li> elements containing NavigationItem and/or SideNavigationGroup. */
+    children: Snippet;
+}

package/dist/components/side-navigation/side-navigation.variables.js

@@ -52,10 +52,10 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/side-navigation/side-navigation.variables.ts
-var variables = [];
+var variables = ["--cinder-side-navigation-list-gap"];
 var side_navigation_variables_default = variables;
 export {
   side_navigation_variables_default as default
 };
 
-//# debugId=641D501BF9DA807764756E2164756E21
+//# debugId=E3DF58EF8E02E02F64756E2164756E21

package/dist/components/sidebar/index.d.ts

@@ -1,5 +1,6 @@
 import './sidebar.css';
 import Sidebar from './sidebar.svelte';
 export default Sidebar;
+export { SIDEBAR_MOBILE_BREAKPOINT, SIDEBAR_MOBILE_MEDIA_QUERY } from './sidebar.constants.ts';
 export type { SidebarProps } from './sidebar.types.ts';
 export { Sidebar };