@lostgradient/cinder 0.5.0 → 0.7.0

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

@@ -54,11 +54,10 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // src/components/segmented-control/index.ts
 import"@lostgradient/cinder/segmented-control/styles";
 
-// src/components/segmented-control/segmented-control.svelte
+// src/components/segment/segment.svelte
 import"svelte/internal/disclose-version";
 import * as $2 from "svelte/internal/client";
 import { untrack } from "svelte";
-import { SvelteSet } from "svelte/reactivity";
 
 // src/utilities/class-names.ts
 function classNames(...parts) {
@@ -67,7 +66,22 @@ function classNames(...parts) {
 
 // src/components/segmented-control/segmented-control-state.svelte.ts
 import * as $ from "svelte/internal/client";
-import { createContext } from "svelte";
+
+// src/_internal/strict-stable-context.ts
+import { getContext, setContext } from "svelte";
+function strictStableContext(key, missingMessage) {
+  const contextKey = Symbol.for(key);
+  return [
+    () => {
+      const context = getContext(contextKey);
+      if (context === undefined) {
+        throw new Error(`missing_context: ${missingMessage}`);
+      }
+      return context;
+    },
+    (context) => setContext(contextKey, context)
+  ];
+}
 
 // src/utilities/document-order.ts
 var DOCUMENT_POSITION_PRECEDING = 2;
@@ -158,8 +172,7 @@ function getFocusableIndex(selectedIndex, length, isDisabled) {
 }
 
 // src/components/segmented-control/segmented-control-state.svelte.ts
-var [getSegmentedControlContext, setSegmentedControlContext] = createContext();
-
+var [getSegmentedControlContext, setSegmentedControlContext] = strictStableContext("@lostgradient/cinder/segmented-control/context", "Segment must be rendered inside a SegmentedControl");
 class SegmentedControlController {
   #registrations = [];
   #version = $.state(0);
@@ -286,38 +299,138 @@ class SegmentedControlController {
   }
 }
 
-// src/components/segmented-control/segmented-control.svelte
-var root_2 = $2.from_html(`<input type="hidden"/>`);
-var root_1 = $2.from_html(`<input type="hidden" disabled=""/> <!>`, 1);
-var root = $2.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div> <!></div>`);
-function Segmented_control($$anchor, $$props) {
+// src/components/segment/segment.svelte
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "value",
+  "disabled",
+  "controls",
+  "leading",
+  "trailing",
+  "children",
+  "class"
+]);
+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>`);
+function Segment($$anchor, $$props) {
   $2.push($$props, true);
-  let value = $2.prop($$props, "value", 15), hideLabel = $2.prop($$props, "hideLabel", 3, false), disabled = $2.prop($$props, "disabled", 3, false), size = $2.prop($$props, "size", 3, "md"), orientation = $2.prop($$props, "orientation", 3, "horizontal"), detached = $2.prop($$props, "detached", 3, false), fullWidth = $2.prop($$props, "fullWidth", 3, false), variant = $2.prop($$props, "variant", 3, "radiogroup"), selectionMode = $2.prop($$props, "selectionMode", 3, "single"), disallowEmptySelection = $2.prop($$props, "disallowEmptySelection", 3, true), rest = $2.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "value",
-    "label",
-    "name",
-    "hideLabel",
-    "disabled",
-    "size",
-    "density",
-    "orientation",
-    "detached",
-    "fullWidth",
-    "variant",
-    "selectionMode",
-    "disallowEmptySelection",
-    "class",
-    "onchange",
-    "children"
+  let disabled = $2.prop($$props, "disabled", 3, false), rest = $2.rest_props($$props, rest_excludes);
+  const context = getSegmentedControlContext();
+  const registerSegment = (node) => {
+    return untrack(() => context.register({
+      node,
+      get value() {
+        return $$props.value;
+      },
+      get disabled() {
+        return disabled() || context.controlDisabled;
+      },
+      get controls() {
+        return $$props.controls;
+      }
+    }));
+  };
+  const isSelected = $2.derived(() => context.isSelected($$props.value));
+  const isFocusable = $2.derived(() => context.isFocusable($$props.value));
+  const effectiveDisabled = $2.derived(() => disabled() || context.controlDisabled);
+  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)
   ]);
-  let resetInputElement = $2.state(null);
+  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);
+    });
+  }
+  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 = ($$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);
+    };
+    $2.if(node_4, ($$render) => {
+      if ($$props.trailing)
+        $$render(consequent_1);
+    });
+  }
+  $2.reset(button);
+  $2.attach(button, () => registerSegment);
+  $2.append($$anchor, button);
+  $2.pop();
+}
+
+// src/components/segmented-control/segmented-control.svelte
+import"svelte/internal/disclose-version";
+import * as $3 from "svelte/internal/client";
+import { untrack as untrack2 } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+var rest_excludes2 = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "value",
+  "label",
+  "name",
+  "hideLabel",
+  "disabled",
+  "size",
+  "density",
+  "orientation",
+  "detached",
+  "fullWidth",
+  "variant",
+  "selectionMode",
+  "disallowEmptySelection",
+  "class",
+  "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>`);
+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);
+  let resetInputElement = $3.state(null);
   let resetSyncTimeout;
-  const initialSingleValue = untrack(() => typeof value() === "string" ? value() : undefined);
-  const initialMultipleValues = untrack(() => selectionMode() === "multiple" && value() instanceof SvelteSet ? Array.from(value()) : undefined);
+  const initialSingleValue = untrack2(() => typeof value() === "string" ? value() : undefined);
+  const initialMultipleValues = untrack2(() => selectionMode() === "multiple" && value() instanceof SvelteSet ? Array.from(value()) : undefined);
   const controller = new SegmentedControlController({
     selectionMode: () => selectionMode(),
     variant: () => variant(),
@@ -346,9 +459,9 @@ function Segmented_control($$anchor, $$props) {
     toggle: (segmentValue) => controller.toggle(segmentValue)
   };
   setSegmentedControlContext(contextValue);
-  const groupRole = $2.derived(() => selectionMode() === "multiple" ? "group" : variant() === "tablist" ? "tablist" : "radiogroup");
-  const effectiveSize = $2.derived(() => $$props.density === "toolbar" ? "sm" : size());
-  const selectedValues = $2.derived(() => selectionMode() === "multiple" ? value() instanceof SvelteSet ? Array.from(value()) : [] : typeof value() === "string" ? [value()] : []);
+  const groupRole = $3.derived(() => selectionMode() === "multiple" ? "group" : 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) {
     if (resetSyncTimeout !== undefined)
       clearTimeout(resetSyncTimeout);
@@ -363,8 +476,8 @@ function Segmented_control($$anchor, $$props) {
       value(initialSingleValue);
     }, 0);
   }
-  $2.user_effect(() => {
-    const input = $2.get(resetInputElement);
+  $3.user_effect(() => {
+    const input = $3.get(resetInputElement);
     if (input === null)
       return;
     const form = input.form;
@@ -377,21 +490,21 @@ function Segmented_control($$anchor, $$props) {
       }
     };
   });
-  var div = root();
-  var span = $2.child(div);
-  var text = $2.child(span, true);
-  $2.reset(span);
-  var div_1 = $2.sibling(span, 2);
+  var div = root_22();
+  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);
-  $2.attribute_effect(div_1, ($0) => ({
+  $3.attribute_effect(div_1, ($0) => ({
     ...rest,
     id: $$props.id,
-    role: $2.get(groupRole),
+    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": $2.get(effectiveSize),
+    "data-cinder-size": $3.get(effectiveSize),
     "data-cinder-density": $$props.density === "toolbar" ? "toolbar" : undefined,
     "data-cinder-selection-mode": selectionMode(),
     "data-cinder-detached": detached() ? "" : undefined,
@@ -400,50 +513,51 @@ function Segmented_control($$anchor, $$props) {
     class: $0,
     onkeydown: event_handler
   }), [() => classNames("cinder-segmented-control", $$props.class)]);
-  var node = $2.child(div_1);
-  $2.snippet(node, () => $$props.children);
-  $2.reset(div_1);
-  var node_1 = $2.sibling(div_1, 2);
+  var node = $3.child(div_1);
+  $3.snippet(node, () => $$props.children);
+  $3.reset(div_1);
+  var node_1 = $3.sibling(div_1, 2);
   {
     var consequent = ($$anchor2) => {
-      var fragment = root_1();
-      var input_1 = $2.first_child(fragment);
-      $2.bind_this(input_1, ($$value) => $2.set(resetInputElement, $$value), () => $2.get(resetInputElement));
-      var node_2 = $2.sibling(input_1, 2);
-      $2.each(node_2, 16, () => $2.get(selectedValues), (selectedValue) => selectedValue, ($$anchor3, selectedValue) => {
-        var input_2 = root_2();
-        $2.remove_input_defaults(input_2);
-        $2.template_effect(() => {
-          $2.set_attribute(input_2, "name", $$props.name);
-          $2.set_value(input_2, selectedValue);
+      var fragment = root_12();
+      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();
+        $3.remove_input_defaults(input_2);
+        $3.template_effect(() => {
+          $3.set_attribute(input_2, "name", $$props.name);
+          $3.set_value(input_2, selectedValue);
           input_2.disabled = disabled();
         });
-        $2.append($$anchor3, input_2);
+        $3.append($$anchor3, input_2);
       });
-      $2.append($$anchor2, fragment);
+      $3.append($$anchor2, fragment);
     };
-    $2.if(node_1, ($$render) => {
+    $3.if(node_1, ($$render) => {
       if ($$props.name)
         $$render(consequent);
     });
   }
-  $2.reset(div);
-  $2.template_effect(($0) => {
-    $2.set_attribute(span, "id", `${$$props.id}-label`);
-    $2.set_class(span, 1, $0);
-    $2.set_text(text, $$props.label);
+  $3.reset(div);
+  $3.template_effect(($0) => {
+    $3.set_attribute(span, "id", `${$$props.id}-label`);
+    $3.set_class(span, 1, $0);
+    $3.set_text(text, $$props.label);
   }, [
-    () => $2.clsx(classNames("cinder-segmented-control-label", hideLabel() && "cinder-sr-only"))
+    () => $3.clsx(classNames("cinder-segmented-control-label", hideLabel() && "cinder-sr-only"))
   ]);
-  $2.append($$anchor, div);
-  $2.pop();
+  $3.append($$anchor, div);
+  $3.pop();
 }
 
 // src/components/segmented-control/index.ts
 var segmented_control_default = Segmented_control;
 export {
   segmented_control_default as default,
-  Segmented_control as SegmentedControl
+  Segmented_control as SegmentedControl,
+  Segment
 };
 
-//# debugId=4ECB24679CCBB81A64756E2164756E21
+//# debugId=DB9E960BD27EB37964756E2164756E21

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

@@ -35,7 +35,8 @@ export type SegmentedControlContextValue = {
     /** Toggle a value (called by Segment on click). */
     toggle(value: string): void;
 };
-export declare const getSegmentedControlContext: () => SegmentedControlContextValue, setSegmentedControlContext: (context: SegmentedControlContextValue) => SegmentedControlContextValue;
+declare const getSegmentedControlContext: () => SegmentedControlContextValue, setSegmentedControlContext: (context: SegmentedControlContextValue) => SegmentedControlContextValue;
+export { getSegmentedControlContext, setSegmentedControlContext };
 /**
  * Options for building a SegmentedControlController.
  *

package/dist/components/select/index.js

@@ -132,31 +132,31 @@ function devWarn(message, ...args) {
 }
 
 // src/components/select/select.svelte
-var root_2 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var rest_excludes = new Set([
+  "$$slots",
+  "$$events",
+  "$$legacy",
+  "id",
+  "value",
+  "options",
+  "label",
+  "description",
+  "error",
+  "required",
+  "disabled",
+  "class",
+  "aria-describedby",
+  "aria-invalid"
+]);
+var root = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
 var root_1 = $.from_html(`<label class="cinder-select-field__label"> <!></label>`);
-var root_3 = $.from_html(`<select></select>`);
-var root_5 = $.from_html(`<option> </option>`);
-var root_4 = $.from_html(`<select></select>`);
-var root_6 = $.from_html(`<p class="cinder-select-field__description"> </p>`);
-var root = $.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>`);
+var root_2 = $.from_html(`<select></select>`);
+var root_3 = $.from_html(`<option> </option>`);
+var root_4 = $.from_html(`<p class="cinder-select-field__description"> </p>`);
+var root_5 = $.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) {
   $.push($$props, true);
-  let value = $.prop($$props, "value", 15), rest = $.rest_props($$props, [
-    "$$slots",
-    "$$events",
-    "$$legacy",
-    "id",
-    "value",
-    "options",
-    "label",
-    "description",
-    "error",
-    "required",
-    "disabled",
-    "class",
-    "aria-describedby",
-    "aria-invalid"
-  ]);
+  let value = $.prop($$props, "value", 15), rest = $.rest_props($$props, rest_excludes);
   const context = getFormFieldContext();
   const field = $.derived(() => resolveFieldControl({
     id: $$props.id,
@@ -176,7 +176,7 @@ function Select($$anchor, $$props) {
       devWarn("[cinder/Select] options is empty — pass at least one option, or ignore during async load.");
     }
   });
-  var div = root();
+  var div = root_5();
   var node = $.child(div);
   {
     var consequent_1 = ($$anchor2) => {
@@ -185,7 +185,7 @@ function Select($$anchor, $$props) {
       var node_1 = $.sibling(text);
       {
         var consequent = ($$anchor3) => {
-          var span = root_2();
+          var span = root();
           $.append($$anchor3, span);
         };
         $.if(node_1, ($$render) => {
@@ -210,7 +210,7 @@ function Select($$anchor, $$props) {
   var node_2 = $.child(span_1);
   {
     var consequent_2 = ($$anchor2) => {
-      var select = root_3();
+      var select = root_2();
       $.attribute_effect(select, () => ({
         id: $$props.id,
         class: "cinder-_input-frame cinder-select",
@@ -224,7 +224,7 @@ function Select($$anchor, $$props) {
       $.append($$anchor2, select);
     };
     var alternate = ($$anchor2) => {
-      var select_1 = root_4();
+      var select_1 = root_2();
       $.attribute_effect(select_1, () => ({
         id: $$props.id,
         class: "cinder-_input-frame cinder-select",
@@ -235,7 +235,7 @@ function Select($$anchor, $$props) {
         "aria-invalid": $.get(field).ariaInvalid
       }));
       $.each(select_1, 21, () => $$props.options, (option) => option.value, ($$anchor3, option) => {
-        var option_1 = root_5();
+        var option_1 = root_3();
         var text_1 = $.child(option_1, true);
         $.reset(option_1);
         var option_1_value = {};
@@ -264,7 +264,7 @@ function Select($$anchor, $$props) {
   var node_3 = $.sibling(span_1, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var p = root_6();
+      var p = root_4();
       var text_2 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => {
@@ -301,4 +301,4 @@ export {
   Select
 };
 
-//# debugId=BED1AE1BE6FF25B164756E2164756E21
+//# debugId=292CCF81922236DA64756E2164756E21