@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/color-field/index.js

@@ -269,6 +269,13 @@ function setFormFieldContext(context) {
 }
 var getFormFieldContext = optionalContext(getFormFieldContextStrict);
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/input/input.svelte
 var calendarIcon = ($$anchor) => {
   var svg = root_1();
@@ -276,13 +283,14 @@ var calendarIcon = ($$anchor) => {
 };
 var root_1 = $.from_svg(`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>`);
 var root_2 = $.from_html(`<input/>`);
-var root_3 = $.from_html(`<label class="cinder-input-field__label"> </label>`);
-var root_5 = $.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
-var root_6 = $.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
-var root_7 = $.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
-var root_4 = $.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
-var root_9 = $.from_html(`<p class="cinder-input-field__description"> </p>`);
-var root_10 = $.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
+var root_4 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_3 = $.from_html(`<label class="cinder-input-field__label"> <!></label>`);
+var root_6 = $.from_html(`<span class="cinder-input-group__leading cinder-_truncate"><!></span>`);
+var root_7 = $.from_html(`<span class="cinder-input-group__trailing cinder-_truncate"><!></span>`);
+var root_8 = $.from_html(`<span class="cinder-input-group__trailing cinder-input-group__date-icon cinder-_truncate" aria-hidden="true"><!></span>`);
+var root_5 = $.from_html(`<div class="cinder-input-group"><!> <!> <!></div>`);
+var root_10 = $.from_html(`<p class="cinder-input-field__description"> </p>`);
+var root_11 = $.from_html(`<p class="cinder-input-field__error" aria-live="polite"> </p>`);
 var root = $.from_html(`<div class="cinder-input-field"><!> <!> <!> <!></div>`);
 function Input($$anchor, $$props) {
   $.push($$props, true);
@@ -291,15 +299,17 @@ function Input($$anchor, $$props) {
     $.attribute_effect(input, ($0) => ({
       id: $$props.id,
       type: type(),
+      ...rest,
       disabled: $.get(resolvedDisabled),
       required: $.get(resolvedRequired),
+      value: value(),
+      oninput: handleInput,
       class: $0,
       "data-cinder-native-date": $.get(rendersNativeDateIcon) ? "" : undefined,
       "aria-invalid": $.get(resolvedAriaInvalid),
-      "aria-describedby": $.get(describedBy),
-      ...rest
+      "aria-describedby": $.get(describedBy)
     }), [() => classNames("cinder-input", $$props.class)], undefined, undefined, undefined, true);
-    $.bind_value(input, value);
+    $.bind_this(input, ($$value) => $.set(inputNode, $$value), () => $.get(inputNode));
     $.append($$anchor2, input);
   };
   let value = $.prop($$props, "value", 15, ""), type = $.prop($$props, "type", 3, "text"), leadingInteractive = $.prop($$props, "leadingInteractive", 3, false), trailingInteractive = $.prop($$props, "trailingInteractive", 3, false), rest = $.rest_props($$props, [
@@ -308,6 +318,7 @@ function Input($$anchor, $$props) {
     "$$legacy",
     "id",
     "value",
+    "onValueChange",
     "label",
     "description",
     "error",
@@ -319,7 +330,9 @@ function Input($$anchor, $$props) {
     "trailing",
     "leadingInteractive",
     "trailingInteractive",
-    "aria-describedby"
+    "aria-describedby",
+    "aria-invalid",
+    "oninput"
   ]);
   const context = getFormFieldContext();
   $.user_effect(() => {
@@ -327,83 +340,134 @@ function Input($$anchor, $$props) {
       devWarn(`[cinder/Input] id mismatch: Input id="${$$props.id}" but wrapping FormField expects controlId="${context.controlId}". Set the same id on both.`);
     }
   });
-  const defaultDescriptionId = $.derived(() => describeId($$props.id, !!$$props.description));
-  const defaultErrorId = $.derived(() => errorId($$props.id, !!$$props.error));
-  const ownDescriptionId = $.derived(() => $$props.description && $.get(defaultDescriptionId) === context?.descriptionId ? `${$$props.id}-input-description` : $.get(defaultDescriptionId));
-  const ownErrorId = $.derived(() => $$props.error && $.get(defaultErrorId) === context?.errorId ? `${$$props.id}-input-error` : $.get(defaultErrorId));
-  const resolvedDescriptionId = $.derived(() => $.get(ownDescriptionId) ?? context?.descriptionId);
-  const resolvedErrorId = $.derived(() => $.get(ownErrorId) ?? context?.errorId);
-  const describedBy = $.derived(() => composeDescribedBy($.get(resolvedDescriptionId), $.get(resolvedErrorId), $$props["aria-describedby"]));
-  const resolvedAriaInvalid = $.derived(() => $$props.error ? ariaInvalid(true) : context?.invalid ?? rest["aria-invalid"] ?? ariaInvalid(false));
-  const resolvedRequired = $.derived(() => $$props.required ?? context?.required ?? false);
-  const resolvedDisabled = $.derived(() => $$props.disabled ?? context?.disabled ?? false);
+  const field = $.derived(() => resolveFieldControl({
+    id: $$props.id,
+    generatedId: $$props.id,
+    context,
+    hasDescription: !!$$props.description,
+    hasError: !!$$props.error,
+    localIdNamespace: "input",
+    consumerDescribedBy: $$props["aria-describedby"],
+    consumerInvalid: $$props["aria-invalid"],
+    required: $$props.required,
+    disabled: $$props.disabled
+  }));
+  const ownDescriptionId = $.derived(() => $.get(field).ownDescriptionId);
+  const ownErrorId = $.derived(() => $.get(field).ownErrorId);
+  const describedBy = $.derived(() => $.get(field).describedBy);
+  const resolvedAriaInvalid = $.derived(() => $.get(field).ariaInvalid);
+  const resolvedRequired = $.derived(() => $.get(field).required);
+  const resolvedDisabled = $.derived(() => $.get(field).disabled);
   const isNativeDateInput = $.derived(() => type() === "date");
   const rendersNativeDateIcon = $.derived(() => $.get(isNativeDateInput) && !$$props.trailing);
   const hasTrailing = $.derived(() => !!$$props.trailing || $.get(isNativeDateInput));
   const hasGroupWrapper = $.derived(() => !!$$props.leading || $.get(hasTrailing));
-  const isInvalid = $.derived(() => $.get(resolvedAriaInvalid) === "true" || $.get(resolvedAriaInvalid) === true);
+  const isInvalid = $.derived(() => $.get(resolvedAriaInvalid) === "true");
+  let inputNode = $.state(undefined);
+  let resetSyncTimeout;
+  function syncValueAfterFormReset() {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if ($.get(inputNode))
+        value($.get(inputNode).value);
+    }, 0);
+  }
+  $.user_effect(() => {
+    const form = $.get(inputNode)?.form;
+    if (!form)
+      return;
+    form.addEventListener("reset", syncValueAfterFormReset);
+    return () => {
+      form.removeEventListener("reset", syncValueAfterFormReset);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+  function handleInput(event) {
+    const target = event.currentTarget;
+    const committed = commitValue(target.value, $$props.onValueChange, (next) => {
+      value(next);
+    });
+    target.value = committed;
+    $$props.oninput?.(event);
+  }
   var div = root();
   var node = $.child(div);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       var label_1 = root_3();
-      var text = $.child(label_1, true);
+      var text = $.child(label_1);
+      var node_1 = $.sibling(text);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_4();
+          $.append($$anchor3, span);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(resolvedRequired))
+            $$render(consequent);
+        });
+      }
       $.reset(label_1);
       $.template_effect(() => {
         $.set_attribute(label_1, "for", $$props.id);
         $.set_attribute(label_1, "data-disabled", $.get(resolvedDisabled) || undefined);
-        $.set_text(text, $$props.label);
+        $.set_text(text, `${$$props.label ?? ""} `);
       });
       $.append($$anchor2, label_1);
     };
     $.if(node, ($$render) => {
       if ($$props.label)
-        $$render(consequent);
+        $$render(consequent_1);
     });
   }
-  var node_1 = $.sibling(node, 2);
+  var node_2 = $.sibling(node, 2);
   {
-    var consequent_4 = ($$anchor2) => {
-      var div_1 = root_4();
-      var node_2 = $.child(div_1);
-      {
-        var consequent_1 = ($$anchor3) => {
-          var span = root_5();
-          var node_3 = $.child(span);
-          $.snippet(node_3, () => $$props.leading);
-          $.reset(span);
-          $.template_effect(() => $.set_attribute(span, "aria-hidden", leadingInteractive() ? undefined : "true"));
-          $.append($$anchor3, span);
-        };
-        $.if(node_2, ($$render) => {
-          if ($$props.leading)
-            $$render(consequent_1);
-        });
-      }
-      var node_4 = $.sibling(node_2, 2);
-      inputElement(node_4);
-      var node_5 = $.sibling(node_4, 2);
+    var consequent_5 = ($$anchor2) => {
+      var div_1 = root_5();
+      var node_3 = $.child(div_1);
       {
         var consequent_2 = ($$anchor3) => {
           var span_1 = root_6();
-          var node_6 = $.child(span_1);
-          $.snippet(node_6, () => $$props.trailing);
+          var node_4 = $.child(span_1);
+          $.snippet(node_4, () => $$props.leading);
           $.reset(span_1);
-          $.template_effect(() => $.set_attribute(span_1, "aria-hidden", trailingInteractive() ? undefined : "true"));
+          $.template_effect(() => $.set_attribute(span_1, "aria-hidden", leadingInteractive() ? undefined : "true"));
           $.append($$anchor3, span_1);
         };
+        $.if(node_3, ($$render) => {
+          if ($$props.leading)
+            $$render(consequent_2);
+        });
+      }
+      var node_5 = $.sibling(node_3, 2);
+      inputElement(node_5);
+      var node_6 = $.sibling(node_5, 2);
+      {
         var consequent_3 = ($$anchor3) => {
           var span_2 = root_7();
           var node_7 = $.child(span_2);
-          calendarIcon(node_7);
+          $.snippet(node_7, () => $$props.trailing);
           $.reset(span_2);
+          $.template_effect(() => $.set_attribute(span_2, "aria-hidden", trailingInteractive() ? undefined : "true"));
           $.append($$anchor3, span_2);
         };
-        $.if(node_5, ($$render) => {
+        var consequent_4 = ($$anchor3) => {
+          var span_3 = root_8();
+          var node_8 = $.child(span_3);
+          calendarIcon(node_8);
+          $.reset(span_3);
+          $.append($$anchor3, span_3);
+        };
+        $.if(node_6, ($$render) => {
           if ($$props.trailing)
-            $$render(consequent_2);
+            $$render(consequent_3);
           else if ($.get(rendersNativeDateIcon))
-            $$render(consequent_3, 1);
+            $$render(consequent_4, 1);
         });
       }
       $.reset(div_1);
@@ -419,17 +483,17 @@ function Input($$anchor, $$props) {
     var alternate = ($$anchor2) => {
       inputElement($$anchor2);
     };
-    $.if(node_1, ($$render) => {
+    $.if(node_2, ($$render) => {
       if ($.get(hasGroupWrapper))
-        $$render(consequent_4);
+        $$render(consequent_5);
       else
         $$render(alternate, -1);
     });
   }
-  var node_8 = $.sibling(node_1, 2);
+  var node_9 = $.sibling(node_2, 2);
   {
-    var consequent_5 = ($$anchor2) => {
-      var p = root_9();
+    var consequent_6 = ($$anchor2) => {
+      var p = root_10();
       var text_1 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => {
@@ -438,15 +502,15 @@ function Input($$anchor, $$props) {
       });
       $.append($$anchor2, p);
     };
-    $.if(node_8, ($$render) => {
+    $.if(node_9, ($$render) => {
       if ($$props.description)
-        $$render(consequent_5);
+        $$render(consequent_6);
     });
   }
-  var node_9 = $.sibling(node_8, 2);
+  var node_10 = $.sibling(node_9, 2);
   {
-    var consequent_6 = ($$anchor2) => {
-      var p_1 = root_10();
+    var consequent_7 = ($$anchor2) => {
+      var p_1 = root_11();
       var text_2 = $.child(p_1, true);
       $.reset(p_1);
       $.template_effect(() => {
@@ -455,9 +519,9 @@ function Input($$anchor, $$props) {
       });
       $.append($$anchor2, p_1);
     };
-    $.if(node_9, ($$render) => {
+    $.if(node_10, ($$render) => {
       if ($$props.error)
-        $$render(consequent_6);
+        $$render(consequent_7);
     });
   }
   $.reset(div);
@@ -780,10 +844,10 @@ function Color_field($$anchor, $$props) {
         return $2.get($0);
       },
       get "aria-label"() {
-        return $$props.ariaLabel;
+        return $$props["aria-label"];
       },
       get "aria-labelledby"() {
-        return $$props.ariaLabelledby;
+        return $$props["aria-labelledby"];
       },
       get error() {
         return $2.get($1);
@@ -825,4 +889,4 @@ export {
   Color_field as ColorField
 };
 
-//# debugId=C877FDD4B8CC9FC464756E2164756E21
+//# debugId=DFA4F9BA323093FB64756E2164756E21

package/dist/components/color-picker/index.js

@@ -386,38 +386,55 @@ function Color_swatch_picker($$anchor, $$props) {
   let shape = $3.prop($$props, "shape", 3, "circle"), size = $3.prop($$props, "size", 3, "md"), layout = $3.prop($$props, "layout", 3, "grid"), disabled = $3.prop($$props, "disabled", 3, false);
   let internalValue = $3.state($3.proxy(untrack2(() => $$props.defaultValue) ?? ""));
   const selected = $3.derived(() => $$props.value ?? $3.get(internalValue));
+  const renderableColors = $3.derived(() => {
+    const seen = new Set;
+    const result = [];
+    let hasDuplicates = false;
+    for (const swatch of $$props.colors) {
+      if (seen.has(swatch.color)) {
+        hasDuplicates = true;
+      } else {
+        seen.add(swatch.color);
+        result.push(swatch);
+      }
+    }
+    if (hasDuplicates) {
+      devWarn("[ColorSwatchPicker] Duplicate color values detected in palette. " + "Only the first matching swatch will be shown as selected. Duplicates were removed.");
+    }
+    return result;
+  });
   let userFocusIndex = $3.state(null);
   $3.user_effect(() => {
     $$props.colors;
     $3.set(userFocusIndex, null);
   });
   const effectiveFocusIndex = $3.derived(() => {
-    if ($$props.colors.length === 0)
+    if ($3.get(renderableColors).length === 0)
       return -1;
-    if ($3.get(userFocusIndex) !== null && $3.get(userFocusIndex) < $$props.colors.length && !$$props.colors[$3.get(userFocusIndex)]?.disabled) {
+    if ($3.get(userFocusIndex) !== null && $3.get(userFocusIndex) < $3.get(renderableColors).length && !$3.get(renderableColors)[$3.get(userFocusIndex)]?.disabled) {
       return $3.get(userFocusIndex);
     }
-    const selectedIndex2 = $$props.colors.findIndex((s) => s.color === $3.get(selected));
-    if (selectedIndex2 !== -1 && !$$props.colors[selectedIndex2]?.disabled) {
+    const selectedIndex2 = $3.get(renderableColors).findIndex((s) => s.color === $3.get(selected));
+    if (selectedIndex2 !== -1 && !$3.get(renderableColors)[selectedIndex2]?.disabled) {
       return selectedIndex2;
     }
-    const firstEnabled = $$props.colors.findIndex((s) => !s.disabled);
+    const firstEnabled = $3.get(renderableColors).findIndex((s) => !s.disabled);
     if (firstEnabled !== -1)
       return firstEnabled;
     return 0;
   });
   let liRefs = $3.proxy([]);
-  const selectedIndex = $3.derived(() => $$props.colors.findIndex((s) => s.color === $3.get(selected)));
+  const selectedIndex = $3.derived(() => $3.get(renderableColors).findIndex((s) => s.color === $3.get(selected)));
   function isItemDisabledForRoving(index2) {
-    return $$props.colors[index2]?.disabled === true;
+    return $3.get(renderableColors)[index2]?.disabled === true;
   }
   function isInteractive(index2) {
-    return !disabled() && !$$props.colors[index2]?.disabled;
+    return !disabled() && !$3.get(renderableColors)[index2]?.disabled;
   }
   function selectSwatch(index2) {
     if (!isInteractive(index2))
       return;
-    const swatch = $$props.colors[index2];
+    const swatch = $3.get(renderableColors)[index2];
     if (!swatch)
       return;
     $3.set(internalValue, swatch.color, true);
@@ -434,7 +451,7 @@ function Color_swatch_picker($$anchor, $$props) {
       selectSwatch($3.get(effectiveFocusIndex));
       return;
     }
-    const newIndex = handleRovingKeydown(event, $3.get(effectiveFocusIndex), $$props.colors.length, {
+    const newIndex = handleRovingKeydown(event, $3.get(effectiveFocusIndex), $3.get(renderableColors).length, {
       vertical: true,
       horizontal: layout() === "grid",
       isDisabled: isItemDisabledForRoving
@@ -454,14 +471,8 @@ function Color_swatch_picker($$anchor, $$props) {
     $3.set(userFocusIndex, index2, true);
     selectSwatch(index2);
   }
-  $3.user_effect(() => {
-    const colorValues = $$props.colors.map((c) => c.color);
-    if (new Set(colorValues).size !== colorValues.length) {
-      devWarn("[ColorSwatchPicker] Duplicate color values detected in palette. " + "Only the first matching swatch will be shown as selected.");
-    }
-  });
   var ul = root2();
-  $3.each(ul, 23, () => $$props.colors, (swatch, index2) => swatch.color + index2, ($$anchor2, swatch, index2) => {
+  $3.each(ul, 23, () => $3.get(renderableColors), (swatch) => swatch.color, ($$anchor2, swatch, index2) => {
     const isSelected = $3.derived(() => $3.get(index2) === $3.get(selectedIndex));
     const isDisabled = $3.derived(() => $3.get(swatch).disabled === true);
     const contrastColor = $3.derived(() => pickContrastColor($3.get(swatch).color));
@@ -1181,4 +1192,4 @@ export {
   Color_picker as ColorPicker
 };
 
-//# debugId=C4E71F039769D20664756E2164756E21
+//# debugId=1B94FE44EE353B5164756E2164756E21

package/dist/components/color-swatch-picker/index.js

@@ -381,38 +381,55 @@ function Color_swatch_picker($$anchor, $$props) {
   let shape = $3.prop($$props, "shape", 3, "circle"), size = $3.prop($$props, "size", 3, "md"), layout = $3.prop($$props, "layout", 3, "grid"), disabled = $3.prop($$props, "disabled", 3, false);
   let internalValue = $3.state($3.proxy(untrack2(() => $$props.defaultValue) ?? ""));
   const selected = $3.derived(() => $$props.value ?? $3.get(internalValue));
+  const renderableColors = $3.derived(() => {
+    const seen = new Set;
+    const result = [];
+    let hasDuplicates = false;
+    for (const swatch of $$props.colors) {
+      if (seen.has(swatch.color)) {
+        hasDuplicates = true;
+      } else {
+        seen.add(swatch.color);
+        result.push(swatch);
+      }
+    }
+    if (hasDuplicates) {
+      devWarn("[ColorSwatchPicker] Duplicate color values detected in palette. " + "Only the first matching swatch will be shown as selected. Duplicates were removed.");
+    }
+    return result;
+  });
   let userFocusIndex = $3.state(null);
   $3.user_effect(() => {
     $$props.colors;
     $3.set(userFocusIndex, null);
   });
   const effectiveFocusIndex = $3.derived(() => {
-    if ($$props.colors.length === 0)
+    if ($3.get(renderableColors).length === 0)
       return -1;
-    if ($3.get(userFocusIndex) !== null && $3.get(userFocusIndex) < $$props.colors.length && !$$props.colors[$3.get(userFocusIndex)]?.disabled) {
+    if ($3.get(userFocusIndex) !== null && $3.get(userFocusIndex) < $3.get(renderableColors).length && !$3.get(renderableColors)[$3.get(userFocusIndex)]?.disabled) {
       return $3.get(userFocusIndex);
     }
-    const selectedIndex2 = $$props.colors.findIndex((s) => s.color === $3.get(selected));
-    if (selectedIndex2 !== -1 && !$$props.colors[selectedIndex2]?.disabled) {
+    const selectedIndex2 = $3.get(renderableColors).findIndex((s) => s.color === $3.get(selected));
+    if (selectedIndex2 !== -1 && !$3.get(renderableColors)[selectedIndex2]?.disabled) {
       return selectedIndex2;
     }
-    const firstEnabled = $$props.colors.findIndex((s) => !s.disabled);
+    const firstEnabled = $3.get(renderableColors).findIndex((s) => !s.disabled);
     if (firstEnabled !== -1)
       return firstEnabled;
     return 0;
   });
   let liRefs = $3.proxy([]);
-  const selectedIndex = $3.derived(() => $$props.colors.findIndex((s) => s.color === $3.get(selected)));
+  const selectedIndex = $3.derived(() => $3.get(renderableColors).findIndex((s) => s.color === $3.get(selected)));
   function isItemDisabledForRoving(index2) {
-    return $$props.colors[index2]?.disabled === true;
+    return $3.get(renderableColors)[index2]?.disabled === true;
   }
   function isInteractive(index2) {
-    return !disabled() && !$$props.colors[index2]?.disabled;
+    return !disabled() && !$3.get(renderableColors)[index2]?.disabled;
   }
   function selectSwatch(index2) {
     if (!isInteractive(index2))
       return;
-    const swatch = $$props.colors[index2];
+    const swatch = $3.get(renderableColors)[index2];
     if (!swatch)
       return;
     $3.set(internalValue, swatch.color, true);
@@ -429,7 +446,7 @@ function Color_swatch_picker($$anchor, $$props) {
       selectSwatch($3.get(effectiveFocusIndex));
       return;
     }
-    const newIndex = handleRovingKeydown(event, $3.get(effectiveFocusIndex), $$props.colors.length, {
+    const newIndex = handleRovingKeydown(event, $3.get(effectiveFocusIndex), $3.get(renderableColors).length, {
       vertical: true,
       horizontal: layout() === "grid",
       isDisabled: isItemDisabledForRoving
@@ -449,14 +466,8 @@ function Color_swatch_picker($$anchor, $$props) {
     $3.set(userFocusIndex, index2, true);
     selectSwatch(index2);
   }
-  $3.user_effect(() => {
-    const colorValues = $$props.colors.map((c) => c.color);
-    if (new Set(colorValues).size !== colorValues.length) {
-      devWarn("[ColorSwatchPicker] Duplicate color values detected in palette. " + "Only the first matching swatch will be shown as selected.");
-    }
-  });
   var ul = root2();
-  $3.each(ul, 23, () => $$props.colors, (swatch, index2) => swatch.color + index2, ($$anchor2, swatch, index2) => {
+  $3.each(ul, 23, () => $3.get(renderableColors), (swatch) => swatch.color, ($$anchor2, swatch, index2) => {
     const isSelected = $3.derived(() => $3.get(index2) === $3.get(selectedIndex));
     const isDisabled = $3.derived(() => $3.get(swatch).disabled === true);
     const contrastColor = $3.derived(() => pickContrastColor($3.get(swatch).color));
@@ -533,4 +544,4 @@ export {
   Color_swatch_picker as ColorSwatchPicker
 };
 
-//# debugId=6B04986BDD7C77E164756E2164756E21
+//# debugId=277EC4D59941216E64756E2164756E21

package/dist/components/combobox/combobox.schema.js

@@ -52,7 +52,11 @@ var schema = {
     },
     disabled: {
       type: "boolean",
-      description: "Disables the combobox."
+      description: "Disables the combobox. Inherited from a wrapping FormField when unset."
+    },
+    required: {
+      type: "boolean",
+      description: "Marks the field required: renders the required marker on the label and\nsets `aria-required` on the input. Inherited from a wrapping FormField\nwhen unset."
     },
     maxVisibleOptions: {
       type: "number",
@@ -100,4 +104,4 @@ export {
   combobox_schema_default as default
 };
 
-//# debugId=41D77CCD6226A40964756E2164756E21
+//# debugId=869944A85071F13464756E2164756E21

package/dist/components/combobox/combobox.types.d.ts

@@ -55,8 +55,14 @@ export type ComboboxProps<T extends string = string> = {
     description?: string;
     /** Validation error message; sets aria-invalid="true". */
     error?: string;
-    /** Disables the combobox. */
+    /** Disables the combobox. Inherited from a wrapping FormField when unset. */
     disabled?: boolean;
+    /**
+     * Marks the field required: renders the required marker on the label and
+     * sets `aria-required` on the input. Inherited from a wrapping FormField
+     * when unset.
+     */
+    required?: boolean;
     /** Hard cap on visible filtered options. Default 200. */
     maxVisibleOptions?: number;
     /**