@lostgradient/cinder 0.3.0 → 0.4.0

package/dist/components/checkbox/index.js

@@ -101,10 +101,18 @@ function devWarn(message, ...args) {
   console.warn(message, ...args);
 }
 
+// src/utilities/value-change.ts
+function commitValue(proposed, onValueChange, setValue) {
+  const committed = onValueChange?.(proposed) ?? proposed;
+  setValue(committed);
+  return committed;
+}
+
 // src/components/checkbox/checkbox.svelte
-var root_1 = $.from_html(`<label class="cinder-checkbox-field__label"> </label>`);
-var root_2 = $.from_html(`<p class="cinder-checkbox-field__description"> </p>`);
-var root_3 = $.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
+var root_2 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_1 = $.from_html(`<label class="cinder-checkbox-field__label"> <!></label>`);
+var root_3 = $.from_html(`<p class="cinder-checkbox-field__description"> </p>`);
+var root_4 = $.from_html(`<p class="cinder-checkbox-field__error" aria-live="polite"> </p>`);
 var root = $.from_html(`<div class="cinder-checkbox-field"><div class="cinder-checkbox-row"><span class="cinder-checkbox-field__control"><input/> <span class="cinder-checkbox-field__indicator" aria-hidden="true"></span></span> <!></div> <!> <!></div>`);
 function Checkbox($$anchor, $$props) {
   const generatedId = $.props_id();
@@ -115,6 +123,7 @@ function Checkbox($$anchor, $$props) {
     "$$legacy",
     "id",
     "checked",
+    "onValueChange",
     "indeterminate",
     "label",
     "description",
@@ -123,7 +132,8 @@ function Checkbox($$anchor, $$props) {
     "required",
     "class",
     "aria-describedby",
-    "aria-invalid"
+    "aria-invalid",
+    "onchange"
   ]);
   const context = getFormFieldContext();
   const field = $.derived(() => resolveFieldControl({
@@ -149,6 +159,40 @@ function Checkbox($$anchor, $$props) {
       $.get(inputElement).indeterminate = indeterminate() && !checked();
     }
   });
+  let resetSyncTimeout;
+  function syncCheckedAfterFormReset() {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (!$.get(inputElement))
+        return;
+      checked($.get(inputElement).checked);
+      $.get(inputElement).indeterminate = indeterminate() && !$.get(inputElement).checked;
+    }, 0);
+  }
+  $.user_effect(() => {
+    const form = $.get(inputElement)?.form;
+    if (!form)
+      return;
+    form.addEventListener("reset", syncCheckedAfterFormReset);
+    return () => {
+      form.removeEventListener("reset", syncCheckedAfterFormReset);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
+  function handleChange(event) {
+    const target = event.currentTarget;
+    const committed = commitValue(target.checked, $$props.onValueChange, (next2) => {
+      checked(next2);
+    });
+    target.checked = committed;
+    target.indeterminate = indeterminate() && !committed;
+    $$props.onchange?.(event);
+  }
   var div = root();
   var div_1 = $.child(div);
   var span = $.child(div_1);
@@ -156,39 +200,52 @@ function Checkbox($$anchor, $$props) {
   $.attribute_effect(input, ($0) => ({
     id: $.get(field).id,
     type: "checkbox",
+    ...rest,
     disabled: $.get(field).disabled,
     required: $.get(field).required,
+    checked: checked(),
+    onchange: handleChange,
     class: $0,
     "aria-invalid": $.get(field).ariaInvalid,
-    "aria-describedby": $.get(field).describedBy,
-    ...rest
+    "aria-describedby": $.get(field).describedBy
   }), [() => classNames("cinder-checkbox", $$props.class)], undefined, undefined, undefined, true);
   $.bind_this(input, ($$value) => $.set(inputElement, $$value), () => $.get(inputElement));
   $.next(2);
   $.reset(span);
   var node = $.sibling(span, 2);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       var label_1 = root_1();
-      var text = $.child(label_1, true);
+      var text = $.child(label_1);
+      var node_1 = $.sibling(text);
+      {
+        var consequent = ($$anchor3) => {
+          var span_1 = root_2();
+          $.append($$anchor3, span_1);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(field).required)
+            $$render(consequent);
+        });
+      }
       $.reset(label_1);
       $.template_effect(() => {
         $.set_attribute(label_1, "for", $.get(field).id);
         $.set_attribute(label_1, "data-disabled", $.get(field).disabled || 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);
     });
   }
   $.reset(div_1);
-  var node_1 = $.sibling(div_1, 2);
+  var node_2 = $.sibling(div_1, 2);
   {
-    var consequent_1 = ($$anchor2) => {
-      var p = root_2();
+    var consequent_2 = ($$anchor2) => {
+      var p = root_3();
       var text_1 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => {
@@ -197,15 +254,15 @@ function Checkbox($$anchor, $$props) {
       });
       $.append($$anchor2, p);
     };
-    $.if(node_1, ($$render) => {
+    $.if(node_2, ($$render) => {
       if ($$props.description)
-        $$render(consequent_1);
+        $$render(consequent_2);
     });
   }
-  var node_2 = $.sibling(node_1, 2);
+  var node_3 = $.sibling(node_2, 2);
   {
-    var consequent_2 = ($$anchor2) => {
-      var p_1 = root_3();
+    var consequent_3 = ($$anchor2) => {
+      var p_1 = root_4();
       var text_2 = $.child(p_1, true);
       $.reset(p_1);
       $.template_effect(() => {
@@ -214,13 +271,12 @@ function Checkbox($$anchor, $$props) {
       });
       $.append($$anchor2, p_1);
     };
-    $.if(node_2, ($$render) => {
+    $.if(node_3, ($$render) => {
       if ($$props.error)
-        $$render(consequent_2);
+        $$render(consequent_3);
     });
   }
   $.reset(div);
-  $.bind_checked(input, checked);
   $.append($$anchor, div);
   $.pop();
 }
@@ -232,4 +288,4 @@ export {
   Checkbox
 };
 
-//# debugId=5443BC2D4614DD7464756E2164756E21
+//# debugId=82DFDFCBBE1014E664756E2164756E21

package/dist/components/checkbox-group/checkbox-group.css

@@ -15,6 +15,9 @@
   }
 
   .cinder-checkbox-group__legend {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
     font-size: var(--cinder-text-xs);
     font-weight: var(--cinder-font-medium);
     color: var(--cinder-text);

package/dist/components/checkbox-group/checkbox-group.schema.js

@@ -26,9 +26,9 @@ var schema = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   type: "object",
   properties: {
-    legend: {
+    label: {
       type: "string",
-      description: "Optional legend rendered as a `<legend>` inside the `<fieldset>`."
+      description: "Visible group caption. Rendered as a `<legend>` inside the `<fieldset>`.\nNamed `label` for consistency with every other form control — the element\nis a `<legend>` because the group is a fieldset."
     },
     description: {
       type: "string",
@@ -44,7 +44,7 @@ var schema = {
     },
     required: {
       type: "boolean",
-      description: "Marks the group as visually required. Sets `data-cinder-required` on the\nfieldset so consumers can target it (e.g. legend asterisk).\n\nThis is a visual/data-attribute hint. It does NOT set `required` on any\nchild `<input>` and does NOT enforce constraint validation. Per-control\n`required` must be set on the individual `<Checkbox>`."
+      description: 'Marks the group required: sets `aria-required="true"` and\n`data-cinder-required` on the fieldset and renders the required asterisk in\nthe legend.\n\nIt does NOT set `required` on any child `<input>` and does NOT enforce\nnative constraint validation. Per-control `required` must be set on the\nindividual `<Checkbox>`.'
     },
     variant: {
       enum: ["default", "card"],
@@ -72,4 +72,4 @@ export {
   checkbox_group_schema_default as default
 };
 
-//# debugId=E9647A85D13C05E164756E2164756E21
+//# debugId=599F21BB18FE5E7464756E2164756E21

package/dist/components/checkbox-group/checkbox-group.types.d.ts

@@ -9,8 +9,12 @@ import type { Snippet } from 'svelte';
  * handles the disabled cascade without any Svelte context.
  */
 export type CheckboxGroupProps = {
-    /** Optional legend rendered as a `<legend>` inside the `<fieldset>`. */
-    legend?: string;
+    /**
+     * Visible group caption. Rendered as a `<legend>` inside the `<fieldset>`.
+     * Named `label` for consistency with every other form control — the element
+     * is a `<legend>` because the group is a fieldset.
+     */
+    label?: string;
     /** Helper text below the group; wired via `aria-describedby` on the fieldset. */
     description?: string;
     /**
@@ -30,12 +34,13 @@ export type CheckboxGroupProps = {
      */
     disabled?: boolean;
     /**
-     * Marks the group as visually required. Sets `data-cinder-required` on the
-     * fieldset so consumers can target it (e.g. legend asterisk).
+     * Marks the group required: sets `aria-required="true"` and
+     * `data-cinder-required` on the fieldset and renders the required asterisk in
+     * the legend.
      *
-     * This is a visual/data-attribute hint. It does NOT set `required` on any
-     * child `<input>` and does NOT enforce constraint validation. Per-control
-     * `required` must be set on the individual `<Checkbox>`.
+     * It does NOT set `required` on any child `<input>` and does NOT enforce
+     * native constraint validation. Per-control `required` must be set on the
+     * individual `<Checkbox>`.
      */
     required?: boolean;
     /**

package/dist/components/checkbox-group/index.js

@@ -71,10 +71,20 @@ function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
 }
 
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
 // src/components/checkbox-group/checkbox-group.svelte
-var root_1 = $.from_html(`<legend class="cinder-checkbox-group__legend"> </legend>`);
-var root_2 = $.from_html(`<p class="cinder-checkbox-group__description"> </p>`);
-var root_3 = $.from_html(`<p class="cinder-checkbox-group__error" aria-live="polite"> </p>`);
+var root_2 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_1 = $.from_html(`<legend class="cinder-checkbox-group__legend"> <!></legend>`);
+var root_3 = $.from_html(`<p class="cinder-checkbox-group__description"> </p>`);
+var root_4 = $.from_html(`<p class="cinder-checkbox-group__error" aria-live="polite"> </p>`);
 var root = $.from_html(`<fieldset><!> <div class="cinder-checkbox-group__items"><!></div> <!> <!></fieldset>`);
 function Checkbox_group($$anchor, $$props) {
   const groupId = $.props_id();
@@ -83,29 +93,47 @@ function Checkbox_group($$anchor, $$props) {
   const descriptionId = $.derived(() => describeId(groupId, !!$$props.description));
   const errId = $.derived(() => errorId(groupId, !!$$props.error));
   const describedBy = $.derived(() => composeDescribedBy($.get(descriptionId), $.get(errId)));
+  let hasWarnedNoLegend = false;
+  $.user_effect(() => {
+    if (!$$props.label && !hasWarnedNoLegend) {
+      hasWarnedNoLegend = true;
+      devWarn("[cinder/CheckboxGroup] A <fieldset> was rendered without a label prop. The fieldset will have no <legend>, which makes it inaccessible. Provide a label prop to describe the group.");
+    }
+  });
   var fieldset = root();
   var node = $.child(fieldset);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       var legend_1 = root_1();
-      var text = $.child(legend_1, true);
+      var text = $.child(legend_1);
+      var node_1 = $.sibling(text);
+      {
+        var consequent = ($$anchor3) => {
+          var span = root_2();
+          $.append($$anchor3, span);
+        };
+        $.if(node_1, ($$render) => {
+          if (required())
+            $$render(consequent);
+        });
+      }
       $.reset(legend_1);
-      $.template_effect(() => $.set_text(text, $$props.legend));
+      $.template_effect(() => $.set_text(text, `${$$props.label ?? ""} `));
       $.append($$anchor2, legend_1);
     };
     $.if(node, ($$render) => {
-      if ($$props.legend)
-        $$render(consequent);
+      if ($$props.label)
+        $$render(consequent_1);
     });
   }
   var div = $.sibling(node, 2);
-  var node_1 = $.child(div);
-  $.snippet(node_1, () => $$props.children);
+  var node_2 = $.child(div);
+  $.snippet(node_2, () => $$props.children);
   $.reset(div);
-  var node_2 = $.sibling(div, 2);
+  var node_3 = $.sibling(div, 2);
   {
-    var consequent_1 = ($$anchor2) => {
-      var p = root_2();
+    var consequent_2 = ($$anchor2) => {
+      var p = root_3();
       var text_1 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => {
@@ -114,15 +142,15 @@ function Checkbox_group($$anchor, $$props) {
       });
       $.append($$anchor2, p);
     };
-    $.if(node_2, ($$render) => {
+    $.if(node_3, ($$render) => {
       if ($$props.description)
-        $$render(consequent_1);
+        $$render(consequent_2);
     });
   }
-  var node_3 = $.sibling(node_2, 2);
+  var node_4 = $.sibling(node_3, 2);
   {
-    var consequent_2 = ($$anchor2) => {
-      var p_1 = root_3();
+    var consequent_3 = ($$anchor2) => {
+      var p_1 = root_4();
       var text_2 = $.child(p_1, true);
       $.reset(p_1);
       $.template_effect(() => {
@@ -131,9 +159,9 @@ function Checkbox_group($$anchor, $$props) {
       });
       $.append($$anchor2, p_1);
     };
-    $.if(node_3, ($$render) => {
+    $.if(node_4, ($$render) => {
       if ($$props.error)
-        $$render(consequent_2);
+        $$render(consequent_3);
     });
   }
   $.reset(fieldset);
@@ -142,6 +170,7 @@ function Checkbox_group($$anchor, $$props) {
     fieldset.disabled = disabled();
     $.set_attribute(fieldset, "aria-invalid", $1);
     $.set_attribute(fieldset, "aria-describedby", $.get(describedBy));
+    $.set_attribute(fieldset, "aria-required", required() || undefined);
     $.set_attribute(fieldset, "data-cinder-disabled", disabled() || undefined);
     $.set_attribute(fieldset, "data-cinder-required", required() || undefined);
     $.set_attribute(fieldset, "data-variant", variant());
@@ -160,4 +189,4 @@ export {
   Checkbox_group as CheckboxGroup
 };
 
-//# debugId=79D2391B4C6D912E64756E2164756E21
+//# debugId=2DA1A83C33CC7BD764756E2164756E21

package/dist/components/choice-grid/index.js

@@ -150,7 +150,7 @@ function Choice_grid_item($$anchor, $$props) {
     $.set_attribute(div, "aria-disabled", $.get(isDisabled) || undefined);
     $.set_attribute(div, "tabindex", $.get(tabIndex));
     $.set_class(div, 1, $0);
-    $.set_attribute(div, "data-cinder-selected", $.get(isSelected) || undefined);
+    $.set_attribute(div, "data-cinder-selected", $.get(isSelected) ? "" : undefined);
     $.set_attribute(div, "data-cinder-disabled", $.get(isDisabled) || undefined);
     $.set_attribute(div, "data-cinder-state", $.get(feedbackState) !== "neutral" ? $.get(feedbackState) : undefined);
   }, [
@@ -433,4 +433,4 @@ export {
   ChoiceGrid
 };
 
-//# debugId=A3F34D126DF961E764756E2164756E21
+//# debugId=F3CA334E73EA777764756E2164756E21

package/dist/components/choice-grid-item/index.js

@@ -150,7 +150,7 @@ function Choice_grid_item($$anchor, $$props) {
     $.set_attribute(div, "aria-disabled", $.get(isDisabled) || undefined);
     $.set_attribute(div, "tabindex", $.get(tabIndex));
     $.set_class(div, 1, $0);
-    $.set_attribute(div, "data-cinder-selected", $.get(isSelected) || undefined);
+    $.set_attribute(div, "data-cinder-selected", $.get(isSelected) ? "" : undefined);
     $.set_attribute(div, "data-cinder-disabled", $.get(isDisabled) || undefined);
     $.set_attribute(div, "data-cinder-state", $.get(feedbackState) !== "neutral" ? $.get(feedbackState) : undefined);
   }, [
@@ -170,4 +170,4 @@ export {
   Choice_grid_item as ChoiceGridItem
 };
 
-//# debugId=3EF61C346BE94BC964756E2164756E21
+//# debugId=9119DD06D818995664756E2164756E21

package/dist/components/click-away-listener/click-away-listener.schema.js

@@ -28,7 +28,7 @@ var schema = {
   properties: {
     enabled: {
       type: "boolean",
-      description: "When false the document listener is detached and `onClickAway` is never\ncalled. Defaults to `true`."
+      description: "When false the document listener is detached and `onclickaway` is never\ncalled. Defaults to `true`."
     },
     class: {
       type: "string",
@@ -45,7 +45,7 @@ var schema = {
         description: "Content rendered inside the root element. Required."
       },
       {
-        name: "onClickAway",
+        name: "onclickaway",
         reason: "function-or-snippet",
         required: true,
         description: `Called with the triggering PointerEvent (or MouseEvent/TouchEvent on
@@ -60,4 +60,4 @@ export {
   click_away_listener_schema_default as default
 };
 
-//# debugId=B83316BA5600D0B164756E2164756E21
+//# debugId=EE85A5E8D252C17564756E2164756E21

package/dist/components/click-away-listener/click-away-listener.types.d.ts

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 /**
  * Props for the ClickAwayListener component.
  *
- * A headless utility that fires `onClickAway` when the user presses a pointer
+ * A headless utility that fires `onclickaway` when the user presses a pointer
  * (mouse or touch) outside the component's root element. Useful for closing
  * inline-edit fields, custom dropdowns, or any overlay that should dismiss on
  * outside interaction without requiring a full Popover or Modal.
@@ -14,9 +14,9 @@ export type ClickAwayListenerProps = Omit<HTMLAttributes<HTMLDivElement>, 'class
      * browsers that do not support the Pointer Events API) when the user presses
      * a pointer device outside the root element.
      */
-    onClickAway: (event: PointerEvent | MouseEvent | TouchEvent) => void;
+    onclickaway: (event: PointerEvent | MouseEvent | TouchEvent) => void;
     /**
-     * When false the document listener is detached and `onClickAway` is never
+     * When false the document listener is detached and `onclickaway` is never
      * called. Defaults to `true`.
      */
     enabled?: boolean;

package/dist/components/click-away-listener/index.js

@@ -38,7 +38,7 @@ function Click_away_listener($$anchor, $$props) {
     "$$slots",
     "$$events",
     "$$legacy",
-    "onClickAway",
+    "onclickaway",
     "enabled",
     "class",
     "children"
@@ -54,7 +54,7 @@ function Click_away_listener($$anchor, $$props) {
       const target = event.target;
       const isInside = target instanceof Node && $.get(rootElement).contains(target);
       if (!isInside) {
-        $$props.onClickAway(event);
+        $$props.onclickaway(event);
       }
     }
     if (supportsPointerEvents) {
@@ -87,4 +87,4 @@ export {
   Click_away_listener as ClickAwayListener
 };
 
-//# debugId=87924E48F766A11F64756E2164756E21
+//# debugId=4F47D72C674F565064756E2164756E21

package/dist/components/code-block/code-block.css

@@ -157,8 +157,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    inline-size: 1.75rem;
-    min-block-size: 1.75rem;
+    inline-size: 2rem;
+    min-block-size: 2rem;
     border: 1px solid transparent;
     border-radius: var(--cinder-radius-sm);
     background: var(--cinder-surface-raised);
@@ -176,7 +176,8 @@
 
   @media (forced-colors: active) {
     .cinder-code-block .cinder-code-block__header .cinder-copy-button:focus-visible {
-      outline-color: CanvasText;
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
       box-shadow: none;
     }
   }

package/dist/components/code-block/index.js

@@ -156,7 +156,6 @@ function devWarn(message, ...args) {
 // src/components/copy-button/copy-button.svelte
 import"svelte/internal/disclose-version";
 import * as $5 from "svelte/internal/client";
-import { onDestroy } from "svelte";
 
 // ../../node_modules/lucide-svelte/dist/icons/check.svelte
 import"svelte/internal/disclose-version";
@@ -406,9 +405,11 @@ function Copy_button($$anchor, $$props) {
       $5.set(copied, false);
     }, confirmDuration());
   }
-  onDestroy(() => {
-    if (resetTimer)
-      clearTimeout(resetTimer);
+  $5.user_effect(() => {
+    return () => {
+      if (resetTimer)
+        clearTimeout(resetTimer);
+    };
   });
   var fragment = root3();
   var button = $5.first_child(fragment);
@@ -614,4 +615,4 @@ export {
   Code_block as CodeBlock
 };
 
-//# debugId=EC20B1E2443B8E2F64756E2164756E21
+//# debugId=B69F7E109E74A48A64756E2164756E21

package/dist/components/collapsible/collapsible.schema.js

@@ -61,7 +61,7 @@ manages.`,
         description: "Panel content shown when open."
       },
       {
-        name: "onToggle",
+        name: "ontoggle",
         reason: "function-or-snippet",
         description: "Fired on every successful toggle with the next open state. Not called while disabled."
       }
@@ -73,4 +73,4 @@ export {
   collapsible_schema_default as default
 };
 
-//# debugId=E022A22E9AA48AF564756E2164756E21
+//# debugId=592A3C9CBB580D5A64756E2164756E21

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

@@ -5,7 +5,7 @@ export type CollapsibleTriggerState = {
     open: boolean;
     disabled: boolean;
 };
-export type CollapsibleProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+export type CollapsibleProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children' | 'ontoggle'> & {
     /** Trigger label: a plain string, or a snippet receiving `{ open, disabled }`. */
     trigger: string | Snippet<[CollapsibleTriggerState]>;
     /** Panel content shown when open. */
@@ -17,7 +17,7 @@ export type CollapsibleProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'c
      */
     open?: boolean;
     /** Fired on every successful toggle with the next open state. Not called while disabled. */
-    onToggle?: (open: boolean) => void;
+    ontoggle?: (open: boolean) => void;
     /**
      * When true, the trigger cannot be toggled.
      * @default false

package/dist/components/collapsible/index.js

@@ -62,7 +62,7 @@ function Collapsible($$anchor, $$props) {
     "trigger",
     "children",
     "open",
-    "onToggle",
+    "ontoggle",
     "disabled",
     "idBase",
     "class"
@@ -78,7 +78,7 @@ function Collapsible($$anchor, $$props) {
       return;
     const next2 = !open();
     open(next2);
-    $$props.onToggle?.(next2);
+    $$props.ontoggle?.(next2);
   }
   var div = root();
   $2.attribute_effect(div, ($0) => ({
@@ -153,4 +153,4 @@ export {
   Collapsible
 };
 
-//# debugId=843A327964A4142A64756E2164756E21
+//# debugId=AE5D143C3D5A947964756E2164756E21

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

@@ -70,11 +70,11 @@ committed hex value to native form submission.`
       type: "string",
       description: "Placeholder text for the inner `<input>`."
     },
-    ariaLabel: {
+    "aria-label": {
       type: "string",
       description: "Accessible label applied directly to the inner `<input>` when no `FormField` wraps it."
     },
-    ariaLabelledby: {
+    "aria-labelledby": {
       type: "string",
       description: "Id of an external element that labels the inner `<input>`."
     },
@@ -108,4 +108,4 @@ export {
   color_field_schema_default as default
 };
 
-//# debugId=9F3B493CD825C54A64756E2164756E21
+//# debugId=19B256B4DCC0FC8064756E2164756E21

package/dist/components/color-field/color-field.types.d.ts

@@ -34,9 +34,9 @@ export type ColorFieldProps = {
     /** Placeholder text for the inner `<input>`. */
     placeholder?: string;
     /** Accessible label applied directly to the inner `<input>` when no `FormField` wraps it. */
-    ariaLabel?: string;
+    'aria-label'?: string;
     /** Id of an external element that labels the inner `<input>`. */
-    ariaLabelledby?: string;
+    'aria-labelledby'?: string;
     /** Additional classes merged onto the **outer wrapper** root (`.cinder-color-field`). */
     class?: string;
     /** Override the default parse-failure error message. */