@lostgradient/cinder 0.12.0 → 0.13.0

package/dist/components/schedule-builder/index.js

@@ -1411,25 +1411,69 @@ var rest_excludes4 = new Set([
   "$$events",
   "$$legacy",
   "value",
+  "href",
+  "download",
+  "target",
+  "rel",
+  "current",
+  "currentToken",
   "disabled",
   "controls",
   "leading",
   "trailing",
   "children",
-  "class"
+  "class",
+  "onclick"
 ]);
 var root4 = $5.from_html(`<span class="cinder-segmented-control-option-icon" aria-hidden="true"><!></span>`);
 var root_14 = $5.from_html(`<span class="cinder-segmented-control-option-trailing" aria-hidden="true"><!></span>`);
-var root_24 = $5.from_html(`<button><!> <!> <!></button>`);
+var root_24 = $5.from_html(`<!> <!> <!>`, 1);
+var root_34 = $5.from_html(`<a><!></a>`);
+var root_43 = $5.from_html(`<button><!></button>`);
 function Segment($$anchor, $$props) {
   $5.push($$props, true);
-  let disabled = $5.prop($$props, "disabled", 3, false), rest = $5.rest_props($$props, rest_excludes4);
+  const content = ($$anchor2) => {
+    var fragment = root_24();
+    var node_1 = $5.first_child(fragment);
+    {
+      var consequent = ($$anchor3) => {
+        var span = root4();
+        var node_2 = $5.child(span);
+        $5.snippet(node_2, () => $$props.leading);
+        $5.reset(span);
+        $5.append($$anchor3, span);
+      };
+      $5.if(node_1, ($$render) => {
+        if ($$props.leading)
+          $$render(consequent);
+      });
+    }
+    var node_3 = $5.sibling(node_1, 2);
+    $5.snippet(node_3, () => $$props.children ?? $5.noop);
+    var node_4 = $5.sibling(node_3, 2);
+    {
+      var consequent_1 = ($$anchor3) => {
+        var span_1 = root_14();
+        var node_5 = $5.child(span_1);
+        $5.snippet(node_5, () => $$props.trailing);
+        $5.reset(span_1);
+        $5.append($$anchor3, span_1);
+      };
+      $5.if(node_4, ($$render) => {
+        if ($$props.trailing)
+          $$render(consequent_1);
+      });
+    }
+    $5.append($$anchor2, fragment);
+  };
+  let current = $5.prop($$props, "current", 3, false), currentToken = $5.prop($$props, "currentToken", 3, "page"), disabled = $5.prop($$props, "disabled", 3, false), rest = $5.rest_props($$props, rest_excludes4);
   const context = getSegmentedControlContext();
+  const buttonValue = $5.derived(() => $$props.value ?? $$props.href ?? "");
   const registerSegment = (node) => {
     return untrack2(() => context.register({
       node,
       get value() {
-        return $$props.value;
+        return $5.get(buttonValue);
       },
       get disabled() {
         return disabled() || context.controlDisabled;
@@ -1439,64 +1483,83 @@ function Segment($$anchor, $$props) {
       }
     }));
   };
-  const isSelected = $5.derived(() => context.isSelected($$props.value));
-  const isFocusable = $5.derived(() => context.isFocusable($$props.value));
+  const isSelected = $5.derived(() => context.isSelected($5.get(buttonValue)));
+  const isFocusable = $5.derived(() => context.isFocusable($5.get(buttonValue)));
   const effectiveDisabled = $5.derived(() => disabled() || context.controlDisabled);
+  const isNavigationItem = $5.derived(() => context.variant === "navigation");
+  const anchorDisabled = $5.derived(() => $5.get(effectiveDisabled) || $$props.href === undefined);
+  const elementAttributes = $5.derived(() => rest);
+  const anchorTabindex = $5.derived(() => $5.get(anchorDisabled) ? -1 : $5.get(elementAttributes).tabindex);
   const role = $5.derived(() => context.selectionMode === "multiple" ? undefined : context.variant === "tablist" ? "tab" : "radio");
-  var button = root_24();
-  var event_handler = () => context.toggle($$props.value);
-  $5.attribute_effect(button, ($0) => ({
-    ...rest,
-    type: "button",
-    role: $5.get(role),
-    "data-cinder-segment-value": $$props.value,
-    "aria-checked": $5.get(role) === "radio" ? $5.get(isSelected) : undefined,
-    "aria-selected": $5.get(role) === "tab" ? $5.get(isSelected) : undefined,
-    "aria-pressed": context.selectionMode === "multiple" ? $5.get(isSelected) : undefined,
-    "aria-controls": $5.get(role) === "tab" ? $$props.controls : undefined,
-    "aria-disabled": $5.get(effectiveDisabled) ? "true" : undefined,
-    disabled: context.selectionMode === "multiple" ? $5.get(effectiveDisabled) : undefined,
-    tabindex: $5.get(isFocusable) ? 0 : -1,
-    class: $0,
-    "data-cinder-selected": $5.get(isSelected) ? "" : undefined,
-    "data-cinder-pressed": context.selectionMode === "multiple" && $5.get(isSelected) ? "" : undefined,
-    onclick: event_handler
-  }), [
-    () => classNames("cinder-segmented-control-option", $$props.class)
-  ]);
-  var node_1 = $5.child(button);
-  {
-    var consequent = ($$anchor2) => {
-      var span = root4();
-      var node_2 = $5.child(span);
-      $5.snippet(node_2, () => $$props.leading);
-      $5.reset(span);
-      $5.append($$anchor2, span);
-    };
-    $5.if(node_1, ($$render) => {
-      if ($$props.leading)
-        $$render(consequent);
-    });
+  function handleAnchorClick(event) {
+    if ($5.get(anchorDisabled)) {
+      event.preventDefault();
+      return;
+    }
+    $$props.onclick?.(event);
   }
-  var node_3 = $5.sibling(node_1, 2);
-  $5.snippet(node_3, () => $$props.children ?? $5.noop);
-  var node_4 = $5.sibling(node_3, 2);
+  var fragment_1 = $5.comment();
+  var node_6 = $5.first_child(fragment_1);
   {
-    var consequent_1 = ($$anchor2) => {
-      var span_1 = root_14();
-      var node_5 = $5.child(span_1);
-      $5.snippet(node_5, () => $$props.trailing);
-      $5.reset(span_1);
-      $5.append($$anchor2, span_1);
+    var consequent_2 = ($$anchor2) => {
+      var a = root_34();
+      $5.attribute_effect(a, ($0) => ({
+        ...$5.get(elementAttributes),
+        href: $5.get(anchorDisabled) ? undefined : $$props.href,
+        download: $$props.download,
+        target: $$props.target,
+        rel: $$props.rel,
+        "data-cinder-segment-value": $5.get(buttonValue),
+        "aria-current": current() ? currentToken() : undefined,
+        "aria-disabled": $5.get(anchorDisabled) ? "true" : undefined,
+        tabindex: $5.get(anchorTabindex),
+        class: $0,
+        "data-cinder-current": current() ? "" : undefined,
+        onclick: handleAnchorClick
+      }), [
+        () => classNames("cinder-segmented-control-option", $$props.class)
+      ]);
+      var node_7 = $5.child(a);
+      content(node_7);
+      $5.reset(a);
+      $5.append($$anchor2, a);
     };
-    $5.if(node_4, ($$render) => {
-      if ($$props.trailing)
-        $$render(consequent_1);
+    var alternate = ($$anchor2) => {
+      var button = root_43();
+      var event_handler = () => context.toggle($5.get(buttonValue));
+      $5.attribute_effect(button, ($0) => ({
+        ...$5.get(elementAttributes),
+        type: "button",
+        role: $5.get(role),
+        "data-cinder-segment-value": $5.get(buttonValue),
+        "aria-checked": $5.get(role) === "radio" ? $5.get(isSelected) : undefined,
+        "aria-selected": $5.get(role) === "tab" ? $5.get(isSelected) : undefined,
+        "aria-pressed": context.selectionMode === "multiple" ? $5.get(isSelected) : undefined,
+        "aria-controls": $5.get(role) === "tab" ? $$props.controls : undefined,
+        "aria-disabled": $5.get(effectiveDisabled) ? "true" : undefined,
+        disabled: context.selectionMode === "multiple" ? $5.get(effectiveDisabled) : undefined,
+        tabindex: $5.get(isFocusable) ? 0 : -1,
+        class: $0,
+        "data-cinder-selected": $5.get(isSelected) ? "" : undefined,
+        "data-cinder-pressed": context.selectionMode === "multiple" && $5.get(isSelected) ? "" : undefined,
+        onclick: event_handler
+      }), [
+        () => classNames("cinder-segmented-control-option", $$props.class)
+      ]);
+      var node_8 = $5.child(button);
+      content(node_8);
+      $5.reset(button);
+      $5.attach(button, () => registerSegment);
+      $5.append($$anchor2, button);
+    };
+    $5.if(node_6, ($$render) => {
+      if ($5.get(isNavigationItem))
+        $$render(consequent_2);
+      else
+        $$render(alternate, -1);
     });
   }
-  $5.reset(button);
-  $5.attach(button, () => registerSegment);
-  $5.append($$anchor, button);
+  $5.append($$anchor, fragment_1);
   $5.pop();
 }
 
@@ -1527,9 +1590,11 @@ var rest_excludes5 = new Set([
   "onchange",
   "children"
 ]);
-var root5 = $6.from_html(`<input type="hidden"/>`);
-var root_15 = $6.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
-var root_25 = $6.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div> <!></div>`);
+var root5 = $6.from_html(`<nav><!></nav>`);
+var root_15 = $6.from_html(`<div><!></div>`);
+var root_25 = $6.from_html(`<input type="hidden"/>`);
+var root_35 = $6.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
+var root_44 = $6.from_html(`<div class="cinder-segmented-control-container"><span> </span> <!> <!></div>`);
 function Segmented_control($$anchor, $$props) {
   $6.push($$props, true);
   let value = $6.prop($$props, "value", 15), hideLabel = $6.prop($$props, "hideLabel", 3, false), disabled = $6.prop($$props, "disabled", 3, false), size = $6.prop($$props, "size", 3, "md"), orientation = $6.prop($$props, "orientation", 3, "horizontal"), detached = $6.prop($$props, "detached", 3, false), fullWidth = $6.prop($$props, "fullWidth", 3, false), variant = $6.prop($$props, "variant", 3, "radiogroup"), selectionMode = $6.prop($$props, "selectionMode", 3, "single"), disallowEmptySelection = $6.prop($$props, "disallowEmptySelection", 3, true), rest = $6.rest_props($$props, rest_excludes5);
@@ -1537,9 +1602,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 = $6.derived(() => selectionMode() === "multiple" && variant() !== "radiogroup" ? "radiogroup" : variant());
+  const rendersNavigation = $6.derived(() => $6.get(effectiveVariant) === "navigation");
   const controller = new SegmentedControlController({
     selectionMode: () => selectionMode(),
-    variant: () => variant(),
+    variant: () => $6.get(effectiveVariant),
     orientation: () => orientation(),
     controlDisabled: () => disabled(),
     disallowEmptySelection: () => disallowEmptySelection(),
@@ -1554,7 +1621,7 @@ function Segmented_control($$anchor, $$props) {
       return selectionMode();
     },
     get variant() {
-      return variant();
+      return $6.get(effectiveVariant);
     },
     get controlDisabled() {
       return disabled();
@@ -1565,7 +1632,7 @@ function Segmented_control($$anchor, $$props) {
     toggle: (segmentValue) => controller.toggle(segmentValue)
   };
   setSegmentedControlContext(contextValue);
-  const groupRole = $6.derived(() => selectionMode() === "multiple" ? "group" : variant() === "tablist" ? "tablist" : "radiogroup");
+  const groupRole = $6.derived(() => selectionMode() === "multiple" ? "group" : variant() === "navigation" ? undefined : variant() === "tablist" ? "tablist" : "radiogroup");
   const effectiveSize = $6.derived(() => $$props.density === "toolbar" ? "sm" : size());
   const selectedValues = $6.derived(() => selectionMode() === "multiple" ? value() instanceof SvelteSet ? Array.from(value()) : [] : typeof value() === "string" ? [value()] : []);
   function resetToInitialValue(event) {
@@ -1596,41 +1663,74 @@ function Segmented_control($$anchor, $$props) {
       }
     };
   });
-  var div = root_25();
+  var div = root_44();
   var span = $6.child(div);
   var text = $6.child(span, true);
   $6.reset(span);
-  var div_1 = $6.sibling(span, 2);
-  var event_handler = (event) => controller.handleKeydown(event);
-  $6.attribute_effect(div_1, ($0) => ({
-    ...rest,
-    id: $$props.id,
-    role: $6.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": $6.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 = $6.child(div_1);
-  $6.snippet(node, () => $$props.children);
-  $6.reset(div_1);
-  var node_1 = $6.sibling(div_1, 2);
+  var node = $6.sibling(span, 2);
   {
     var consequent = ($$anchor2) => {
-      var fragment = root_15();
+      var nav = root5();
+      $6.attribute_effect(nav, ($0) => ({
+        ...rest,
+        id: $$props.id,
+        role: "navigation",
+        "aria-labelledby": `${$$props.id}-label`,
+        "data-cinder-orientation": orientation(),
+        "data-cinder-size": $6.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": $6.get(effectiveVariant),
+        class: $0
+      }), [() => classNames("cinder-segmented-control", $$props.class)]);
+      var node_1 = $6.child(nav);
+      $6.snippet(node_1, () => $$props.children);
+      $6.reset(nav);
+      $6.append($$anchor2, nav);
+    };
+    var alternate = ($$anchor2) => {
+      var div_1 = root_15();
+      var event_handler = (event) => controller.handleKeydown(event);
+      $6.attribute_effect(div_1, ($0) => ({
+        ...rest,
+        id: $$props.id,
+        role: $6.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": $6.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": $6.get(effectiveVariant),
+        class: $0,
+        onkeydown: event_handler
+      }), [() => classNames("cinder-segmented-control", $$props.class)]);
+      var node_2 = $6.child(div_1);
+      $6.snippet(node_2, () => $$props.children);
+      $6.reset(div_1);
+      $6.append($$anchor2, div_1);
+    };
+    $6.if(node, ($$render) => {
+      if ($6.get(rendersNavigation))
+        $$render(consequent);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  var node_3 = $6.sibling(node, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var fragment = root_35();
       var input_1 = $6.first_child(fragment);
       $6.bind_this(input_1, ($$value) => $6.set(resetInputElement, $$value), () => $6.get(resetInputElement));
-      var node_2 = $6.sibling(input_1, 2);
-      $6.each(node_2, 16, () => $6.get(selectedValues), (selectedValue) => selectedValue, ($$anchor3, selectedValue) => {
-        var input_2 = root5();
+      var node_4 = $6.sibling(input_1, 2);
+      $6.each(node_4, 16, () => $6.get(selectedValues), (selectedValue) => selectedValue, ($$anchor3, selectedValue) => {
+        var input_2 = root_25();
         $6.remove_input_defaults(input_2);
         $6.template_effect(() => {
           $6.set_attribute(input_2, "name", $$props.name);
@@ -1641,9 +1741,9 @@ function Segmented_control($$anchor, $$props) {
       });
       $6.append($$anchor2, fragment);
     };
-    $6.if(node_1, ($$render) => {
-      if ($$props.name)
-        $$render(consequent);
+    $6.if(node_3, ($$render) => {
+      if ($$props.name && !$6.get(rendersNavigation))
+        $$render(consequent_1);
     });
   }
   $6.reset(div);
@@ -1680,8 +1780,8 @@ var rest_excludes6 = new Set([
 var root6 = $7.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
 var root_16 = $7.from_html(`<label class="cinder-select-field__label"> <!></label>`);
 var root_26 = $7.from_html(`<select></select>`);
-var root_34 = $7.from_html(`<option> </option>`);
-var root_43 = $7.from_html(`<p class="cinder-select-field__description"> </p>`);
+var root_36 = $7.from_html(`<option> </option>`);
+var root_45 = $7.from_html(`<p class="cinder-select-field__description"> </p>`);
 var root_53 = $7.from_html(`<div><!> <span class="cinder-select-field__control"><!> <span class="cinder-select-field__chevron" aria-hidden="true"></span></span> <!> <p class="cinder-select-field__error" aria-live="polite"> </p></div>`);
 function Select($$anchor, $$props) {
   $7.push($$props, true);
@@ -1764,7 +1864,7 @@ function Select($$anchor, $$props) {
         "aria-invalid": $7.get(field).ariaInvalid
       }));
       $7.each(select_1, 21, () => $$props.options, (option) => option.value, ($$anchor3, option) => {
-        var option_1 = root_34();
+        var option_1 = root_36();
         var text_1 = $7.child(option_1, true);
         $7.reset(option_1);
         var option_1_value = {};
@@ -1793,7 +1893,7 @@ function Select($$anchor, $$props) {
   var node_3 = $7.sibling(span_1, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var p = root_43();
+      var p = root_45();
       var text_2 = $7.child(p, true);
       $7.reset(p);
       $7.template_effect(() => {
@@ -1884,8 +1984,8 @@ var rest_excludes7 = new Set([
 var root7 = $8.from_html(`<label class="cinder-time-field__label"> </label>`);
 var root_17 = $8.from_html(`<input type="hidden"/>`);
 var root_27 = $8.from_html(`<option> </option>`);
-var root_35 = $8.from_html(`<span class="cinder-sr-only">timezone</span> <select class="cinder-time-field__timezone"></select>`, 1);
-var root_44 = $8.from_html(`<p class="cinder-time-field__description"> </p>`);
+var root_37 = $8.from_html(`<span class="cinder-sr-only">timezone</span> <select class="cinder-time-field__timezone"></select>`, 1);
+var root_46 = $8.from_html(`<p class="cinder-time-field__description"> </p>`);
 var root_54 = $8.from_html(`<p class="cinder-time-field__error" aria-live="polite"> </p>`);
 var root_62 = $8.from_html(`<div><!> <div class="cinder-time-field__controls"><input class="cinder-time-field__input" type="time"/> <!> <!> <!></div> <!> <!></div>`);
 function Time_field($$anchor, $$props) {
@@ -2072,7 +2172,7 @@ function Time_field($$anchor, $$props) {
   var node_2 = $8.sibling(node_1, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var fragment = root_35();
+      var fragment = root_37();
       var span = $8.first_child(fragment);
       var select = $8.sibling(span, 2);
       $8.each(select, 20, () => $$props.timezones, (option) => option, ($$anchor3, option) => {
@@ -2130,7 +2230,7 @@ function Time_field($$anchor, $$props) {
   var node_4 = $8.sibling(div_1, 2);
   {
     var consequent_4 = ($$anchor2) => {
-      var p = root_44();
+      var p = root_46();
       var text_3 = $8.child(p, true);
       $8.reset(p);
       $8.template_effect(() => {
@@ -2404,8 +2504,8 @@ var rest_excludes8 = new Set([
 var root8 = $9.from_html(`<!> <!> <!>`, 1);
 var root_18 = $9.from_html(`<!> <!> <!> <!>`, 1);
 var root_28 = $9.from_html(`<div class="cinder-schedule-builder__field-row"><!> <!></div>`);
-var root_36 = $9.from_html(`<div class="cinder-schedule-builder__weekday-group" role="group" aria-label="Days of week"></div> <!>`, 1);
-var root_45 = $9.from_html(`<div role="tabpanel" class="cinder-schedule-builder__panel" data-sb-panel="presets"><!> <!></div>`);
+var root_38 = $9.from_html(`<div class="cinder-schedule-builder__weekday-group" role="group" aria-label="Days of week"></div> <!>`, 1);
+var root_47 = $9.from_html(`<div role="tabpanel" class="cinder-schedule-builder__panel" data-sb-panel="presets"><!> <!></div>`);
 var root_55 = $9.from_html(`<div role="tabpanel" class="cinder-schedule-builder__panel" data-sb-panel="cron"><div class="cinder-schedule-builder__cron-fields"></div></div>`);
 var root_63 = $9.from_html(`<div role="tabpanel" class="cinder-schedule-builder__panel" data-sb-panel="interval"><div class="cinder-schedule-builder__field-row"><!> <!></div></div>`);
 var root_72 = $9.from_html(`<p class="cinder-schedule-builder__empty">Preview unavailable — fix the cron expression above.</p>`);
@@ -2729,7 +2829,7 @@ function Schedule_builder($$anchor, $$props) {
   var node_4 = $9.sibling(node, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var div_1 = root_45();
+      var div_1 = root_47();
       var node_5 = $9.child(div_1);
       {
         let $0 = $9.derived(() => `${baseId}-preset-kind`);
@@ -2878,7 +2978,7 @@ function Schedule_builder($$anchor, $$props) {
           }
         };
         var consequent_2 = ($$anchor3) => {
-          var fragment_3 = root_36();
+          var fragment_3 = root_38();
           var div_3 = $9.first_child(fragment_3);
           $9.each(div_3, 21, () => WEEKDAYS, (day) => day.value, ($$anchor4, day) => {
             {
@@ -3173,4 +3273,4 @@ export {
   Schedule_builder as ScheduleBuilder
 };
 
-//# debugId=E9DA60597E63E03B64756E2164756E21
+//# debugId=6B4112A81CAFAAE864756E2164756E21