@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/components/payload-inspector/payload-inspector.css

@@ -1,4 +1,10 @@
 @layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@import '../badge/badge.css';
+@import '../code-block/code-block.css';
+@import '../copy-button/copy-button.css';
+@import '../description-list/description-list.css';
+@import '../json-viewer/json-viewer.css';
+@import '../tabs/tabs.css';
 
 @layer cinder.components {
   .cinder-payload-inspector {

package/dist/components/payload-inspector/payload-inspector.schema.js

@@ -26,6 +26,12 @@ var schema = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   type: "object",
   properties: {
+    value: {
+      description: `The payload value to inspect. Pass any JSON-serializable value — object,
+array, string, number, boolean, or null. Plain strings are rendered as
+string values; strings that look like serialized JSON are parsed. Pass
+\`undefined\` when no payload is available yet.`
+    },
     truncated: {
       type: "boolean",
       description: `When true, the payload has been truncated by the producer (e.g. because it
@@ -36,6 +42,26 @@ summary and a notice above the raw view.`
       type: "number",
       description: `Maximum byte size before the tree view is replaced with an oversize
 placeholder. Defaults to 1,048,576 (1 MB). Does not affect the raw view.`
+    },
+    meta: {
+      type: "object",
+      properties: {
+        contentType: {
+          type: "string",
+          description: 'Content type or serializer label, e.g. "application/json" or "Protobuf".'
+        },
+        source: {
+          type: "string",
+          description: "Optional source label, e.g. a workflow name, activity name, or endpoint path."
+        },
+        timestamp: {
+          type: "string",
+          description: "Optional ISO 8601 timestamp string rendered in the summary."
+        }
+      },
+      additionalProperties: false,
+      description: `Structured metadata shown in the summary panel. Pass contentType, source,
+and/or timestamp to populate the description list rows.`
     },
     activeView: {
       enum: ["summary", "tree", "raw"],
@@ -64,25 +90,11 @@ indentation. Use this to customize key ordering, indentation, or
 alternative serialization formats. Does not affect the Summary or Tree
 views, or the copy buttons. For redaction, transform the value upstream and
 pass the already-redacted value as \`value\`.`
-      },
-      {
-        name: "meta",
-        reason: "unknown-shape",
-        description: `Structured metadata shown in the summary panel. Pass contentType, source,
-and/or timestamp to populate the description list rows.`
       },
       {
         name: "parse",
         reason: "function-or-snippet",
         description: "Custom parser applied when `value` is a string. Receives the raw string\nand must return a parsed value or throw. Defaults to JSON.parse. Use this\nto support alternative serialization formats."
-      },
-      {
-        name: "value",
-        reason: "unknown-shape",
-        description: `The payload value to inspect. Pass any JSON-serializable value — object,
-array, string, number, boolean, or null. Pass a string for already-
-serialized JSON; the component will attempt to parse it. Pass \`undefined\`
-when no payload is available yet.`
       }
     ]
   }
@@ -92,4 +104,4 @@ export {
   payload_inspector_schema_default as default
 };
 
-//# debugId=23737F24C994100F64756E2164756E21
+//# debugId=5A5CB116ACBE6B1B64756E2164756E21

package/dist/components/payload-inspector/payload-inspector.svelte.d.ts

@@ -1,7 +1,7 @@
 /**
  * @cinder
  * @category data-display
- * @status beta
+ * @status stable
  * @purpose Composed inspector for structured payloads with summary, tree, and raw views, copy actions, and size/truncation status.
  * @tag json
  * @tag inspector
@@ -12,7 +12,7 @@
  * @avoidWhen Needing search, filtering, or virtualization over large collections — compose a custom viewer.
  * @related json-viewer, code-block, description-list, copy-button
  */
-export type { PayloadInspectorMeta, PayloadInspectorProps, PayloadInspectorView, } from './payload-inspector.types.ts';
+export type { PayloadInspectorMeta, PayloadInspectorProps, PayloadInspectorSchemaProps, PayloadInspectorSchemaValue, PayloadInspectorView, } from './payload-inspector.types.ts';
 import type { PayloadInspectorProps } from './payload-inspector.types.ts';
 declare const PayloadInspector: import("svelte").Component<PayloadInspectorProps, {}, "activeView">;
 type PayloadInspector = ReturnType<typeof PayloadInspector>;

package/dist/components/payload-inspector/payload-inspector.types.d.ts

@@ -3,6 +3,8 @@ import type { HTMLAttributes } from 'svelte/elements';
 export type PayloadInspectorView = 'summary' | 'tree' | 'raw';
 /**
  * Structured metadata about the payload shown in the summary view.
+ *
+ * @schemaObject
  */
 export type PayloadInspectorMeta = {
     /** Content type or serializer label, e.g. "application/json" or "Protobuf". */
@@ -12,15 +14,17 @@ export type PayloadInspectorMeta = {
     /** Optional ISO 8601 timestamp string rendered in the summary. */
     timestamp?: string;
 };
+/** Schema-facing payload value. Kept permissive to match the runtime `unknown` prop. */
+export type PayloadInspectorSchemaValue = unknown;
 /**
  * Props for the PayloadInspector component.
  */
 export type PayloadInspectorProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'children'> & {
     /**
      * The payload value to inspect. Pass any JSON-serializable value — object,
-     * array, string, number, boolean, or null. Pass a string for already-
-     * serialized JSON; the component will attempt to parse it. Pass `undefined`
-     * when no payload is available yet.
+     * array, string, number, boolean, or null. Plain strings are rendered as
+     * string values; strings that look like serialized JSON are parsed. Pass
+     * `undefined` when no payload is available yet.
      */
     value?: unknown;
     /**
@@ -67,3 +71,48 @@ export type PayloadInspectorProps = Omit<HTMLAttributes<HTMLElement>, 'class' |
     /** Additional CSS classes applied to the root element. */
     class?: string;
 };
+/**
+ * Cinder-specific schema surface for PayloadInspector.
+ *
+ * Parser and formatter callbacks are documented but marked unsupported because
+ * functions cannot be represented as JSON Schema controls.
+ */
+export type PayloadInspectorSchemaProps = {
+    /**
+     * The payload value to inspect. Pass any JSON-serializable value — object,
+     * array, string, number, boolean, or null. Plain strings are rendered as
+     * string values; strings that look like serialized JSON are parsed. Pass
+     * `undefined` when no payload is available yet.
+     *
+     * @schemaPermissive
+     */
+    value?: PayloadInspectorSchemaValue;
+    /**
+     * When true, the payload has been truncated by the producer (e.g. because it
+     * exceeded a wire size limit). The inspector renders a truncation badge in the
+     * summary and a notice above the raw view.
+     */
+    truncated?: boolean;
+    /**
+     * Maximum byte size before the tree view is replaced with an oversize
+     * placeholder. Defaults to 1,048,576 (1 MB). Does not affect the raw view.
+     */
+    maxBytes?: number;
+    /**
+     * Structured metadata shown in the summary panel. Pass contentType, source,
+     * and/or timestamp to populate the description list rows.
+     */
+    meta?: PayloadInspectorMeta;
+    /**
+     * Initially active view tab. Defaults to "summary". Bind to control
+     * the active tab from outside.
+     */
+    activeView?: PayloadInspectorView;
+    /**
+     * Label for the inspector region, used as the accessible name for the
+     * containing section. Defaults to "Payload inspector".
+     */
+    label?: string;
+    /** Additional CSS classes applied to the root element. */
+    class?: string;
+};

package/dist/components/permission-matrix/permission-matrix.css

@@ -119,6 +119,16 @@
     z-index: 1;
   }
 
+  @media (forced-colors: active) {
+    button.cinder-permission-matrix__cell-control:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      /* 2px is correct here: cell-control has border:0 so there is no
+         ButtonBorder to merge with at 2px. */
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+
   @media (hover: hover) {
     button.cinder-permission-matrix__cell-control:hover {
       background: var(--cinder-surface-hover);

package/dist/components/phone-input/index.js

@@ -96,6 +96,14 @@ function setFormFieldContext(context) {
 }
 var getFormFieldContext = optionalContext(getFormFieldContextStrict);
 
+// src/_internal/locale-context.ts
+import { createContext as createContext2 } from "svelte";
+var [getLocaleContextStrict, setLocaleContextRaw] = createContext2();
+function setLocaleContext(context) {
+  setLocaleContextRaw(context);
+}
+var getLocaleContext = optionalContext(getLocaleContextStrict);
+
 // src/utilities/class-names.ts
 function classNames(...parts) {
   return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
@@ -4283,16 +4291,18 @@ function displayNameForCountry(country, locale) {
 }
 
 // src/components/phone-input/phone-input.svelte
-var root_1 = $.from_html(`<span> </span>`);
-var root_2 = $.from_html(`<option> </option>`);
-var root_3 = $.from_html(`<input type="hidden"/>`);
-var root_4 = $.from_html(`<p class="cinder-phone-input-field__description"> </p>`);
-var root_5 = $.from_html(`<p class="cinder-phone-input-field__error" aria-live="polite" aria-atomic="true"> </p>`);
+var root_2 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_1 = $.from_html(`<span> <!></span>`);
+var root_3 = $.from_html(`<option> </option>`);
+var root_4 = $.from_html(`<input type="hidden"/>`);
+var root_5 = $.from_html(`<p class="cinder-phone-input-field__description"> </p>`);
+var root_6 = $.from_html(`<p class="cinder-phone-input-field__error" aria-live="polite" aria-atomic="true"> </p>`);
 var root = $.from_html(`<div><!>  <div class="cinder-phone-input" role="group"><span class="cinder-sr-only">Country code</span> <select class="cinder-phone-input__country"></select> <span class="cinder-sr-only">Phone number</span> <input class="cinder-phone-input__national" type="tel" inputmode="tel" autocomplete="tel-national"/></div> <!> <!> <!></div>`);
 function Phone_input($$anchor, $$props) {
   $.push($$props, true);
   let value = $.prop($$props, "value", 15, ""), country = $.prop($$props, "country", 15, "US"), hideLabel = $.prop($$props, "hideLabel", 3, false);
   const context = getFormFieldContext();
+  const localeContext = getLocaleContext();
   const $$d = $.derived(() => resolveCountryList($$props.countries)), allowedCountries = $.derived(() => $.get($$d).countries), usedFallback = $.derived(() => $.get($$d).usedFallback);
   $.user_effect(() => {
     if ($.get(usedFallback)) {
@@ -4302,6 +4312,8 @@ function Phone_input($$anchor, $$props) {
   const resolvedLocale = $.derived(() => {
     if ($$props.locale)
       return $$props.locale;
+    if (localeContext?.locale)
+      return localeContext.locale;
     if (typeof navigator !== "undefined" && typeof navigator.language === "string") {
       return navigator.language;
     }
@@ -4326,7 +4338,7 @@ function Phone_input($$anchor, $$props) {
   function fallbackCountry() {
     return $.get(allowedCountries)[0] ?? "US";
   }
-  function synchronizeNationalDigitsToCountry(nextCountry, options) {
+  function synchronizeNationalDigitsToCountry(nextCountry, options = undefined) {
     const { recomputeValue = true } = options ?? {};
     const nationalDigits = digitsOnly($.get(nationalDisplay));
     $.set(nationalDisplay, formatNationalAsYouType(nextCountry, nationalDigits), true);
@@ -4535,15 +4547,26 @@ function Phone_input($$anchor, $$props) {
   var div = root();
   var node = $.child(div);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       var span = root_1();
-      var text = $.child(span, true);
+      var text = $.child(span);
+      var node_1 = $.sibling(text);
+      {
+        var consequent = ($$anchor3) => {
+          var span_1 = root_2();
+          $.append($$anchor3, span_1);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(resolvedRequired))
+            $$render(consequent);
+        });
+      }
       $.reset(span);
       $.template_effect(($0) => {
         $.set_attribute(span, "id", $.get(groupLabelId));
         $.set_class(span, 1, $0);
         $.set_attribute(span, "data-disabled", $.get(resolvedDisabled) || undefined);
-        $.set_text(text, $$props.label);
+        $.set_text(text, `${$$props.label ?? ""} `);
       }, [
         () => $.clsx(classNames("cinder-phone-input-field__label", hideLabel() && "cinder-sr-only"))
       ]);
@@ -4551,14 +4574,14 @@ function Phone_input($$anchor, $$props) {
     };
     $.if(node, ($$render) => {
       if ($$props.label)
-        $$render(consequent);
+        $$render(consequent_1);
     });
   }
   var div_1 = $.sibling(node, 2);
-  var span_1 = $.child(div_1);
-  var select = $.sibling(span_1, 2);
+  var span_2 = $.child(div_1);
+  var select = $.sibling(span_2, 2);
   $.each(select, 21, () => $.get(countryOptions), (option) => option.code, ($$anchor2, option) => {
-    var option_1 = root_2();
+    var option_1 = root_3();
     var text_1 = $.child(option_1, true);
     $.reset(option_1);
     var option_1_value = {};
@@ -4573,14 +4596,14 @@ function Phone_input($$anchor, $$props) {
   $.reset(select);
   var select_value;
   $.init_select(select);
-  var span_2 = $.sibling(select, 2);
-  var input = $.sibling(span_2, 2);
+  var span_3 = $.sibling(select, 2);
+  var input = $.sibling(span_3, 2);
   $.remove_input_defaults(input);
   $.reset(div_1);
-  var node_1 = $.sibling(div_1, 2);
+  var node_2 = $.sibling(div_1, 2);
   {
-    var consequent_1 = ($$anchor2) => {
-      var input_1 = root_3();
+    var consequent_2 = ($$anchor2) => {
+      var input_1 = root_4();
       $.remove_input_defaults(input_1);
       $.template_effect(() => {
         $.set_attribute(input_1, "name", $$props.name);
@@ -4590,15 +4613,15 @@ function Phone_input($$anchor, $$props) {
       });
       $.append($$anchor2, input_1);
     };
-    $.if(node_1, ($$render) => {
+    $.if(node_2, ($$render) => {
       if ($$props.name)
-        $$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 = root_4();
+    var consequent_3 = ($$anchor2) => {
+      var p = root_5();
       var text_2 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => {
@@ -4607,15 +4630,15 @@ function Phone_input($$anchor, $$props) {
       });
       $.append($$anchor2, p);
     };
-    $.if(node_2, ($$render) => {
+    $.if(node_3, ($$render) => {
       if ($$props.description)
-        $$render(consequent_2);
+        $$render(consequent_3);
     });
   }
-  var node_3 = $.sibling(node_2, 2);
+  var node_4 = $.sibling(node_3, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var p_1 = root_5();
+    var consequent_4 = ($$anchor2) => {
+      var p_1 = root_6();
       var text_3 = $.child(p_1, true);
       $.reset(p_1);
       $.template_effect(() => {
@@ -4624,9 +4647,9 @@ function Phone_input($$anchor, $$props) {
       });
       $.append($$anchor2, p_1);
     };
-    $.if(node_3, ($$render) => {
+    $.if(node_4, ($$render) => {
       if ($$props.error)
-        $$render(consequent_3);
+        $$render(consequent_4);
     });
   }
   $.reset(div);
@@ -4639,7 +4662,7 @@ function Phone_input($$anchor, $$props) {
     $.set_attribute(div_1, "aria-invalid", $.get(resolvedAriaInvalid));
     $.set_attribute(div_1, "aria-required", $.get(resolvedRequired) || undefined);
     $.set_attribute(div_1, "aria-disabled", $.get(resolvedDisabled) || undefined);
-    $.set_attribute(span_1, "id", $.get(countryLabelId));
+    $.set_attribute(span_2, "id", $.get(countryLabelId));
     $.set_attribute(select, "id", $.get(countrySelectId));
     $.set_attribute(select, "aria-labelledby", $1);
     $.set_attribute(select, "aria-describedby", $.get(describedBy));
@@ -4648,7 +4671,7 @@ function Phone_input($$anchor, $$props) {
     if (select_value !== (select_value = country())) {
       select.value = (select.__value = country()) ?? "", $.select_option(select, country());
     }
-    $.set_attribute(span_2, "id", $.get(nationalLabelId));
+    $.set_attribute(span_3, "id", $.get(nationalLabelId));
     $.set_attribute(input, "id", $.get(nationalInputId));
     $.set_attribute(input, "aria-labelledby", $2);
     $.set_attribute(input, "aria-describedby", $.get(describedBy));
@@ -4676,4 +4699,4 @@ export {
   Phone_input as PhoneInput
 };
 
-//# debugId=05D41557E08BB08C64756E2164756E21
+//# debugId=4730406DC5A4CC9664756E2164756E21

package/dist/components/phone-input/phone-input.schema.js

@@ -539,7 +539,7 @@ var schema = {
     },
     locale: {
       type: "string",
-      description: "BCP-47 locale used to resolve `Intl.DisplayNames`. Defaults to\n`navigator.language` after mount and `'en-US'` during SSR."
+      description: "BCP-47 locale used to resolve `Intl.DisplayNames`. Defaults to the nearest\nLocaleProvider locale, then `navigator.language` after mount and `'en-US'`\nduring SSR."
     },
     label: {
       type: "string",
@@ -599,4 +599,4 @@ export {
   phone_input_schema_default as default
 };
 
-//# debugId=ECC77B5E177E8CB264756E2164756E21
+//# debugId=8214E71C614BC93564756E2164756E21

package/dist/components/phone-input/phone-input.types.d.ts

@@ -52,8 +52,9 @@ export type PhoneInputProps = {
     /** Optional allow-list constraining which countries appear in the dropdown. */
     countries?: readonly PhoneInputCountryCode[];
     /**
-     * BCP-47 locale used to resolve `Intl.DisplayNames`. Defaults to
-     * `navigator.language` after mount and `'en-US'` during SSR.
+     * BCP-47 locale used to resolve `Intl.DisplayNames`. Defaults to the nearest
+     * LocaleProvider locale, then `navigator.language` after mount and `'en-US'`
+     * during SSR.
      */
     locale?: string;
     /** Visible group label rendered above the controls. */

package/dist/components/pin-input/index.js

@@ -102,11 +102,12 @@ function classNames(...parts) {
 }
 
 // src/components/pin-input/pin-input.svelte
-var root_1 = $.from_html(`<span> </span>`);
-var root_2 = $.from_html(`<span class="cinder-sr-only"> </span> <input class="cinder-pin-input__segment" autocapitalize="none" spellcheck="false" maxlength="1"/>`, 1);
-var root_3 = $.from_html(`<input type="hidden"/>`);
-var root_4 = $.from_html(`<p class="cinder-pin-input-field__description"> </p>`);
-var root_5 = $.from_html(`<p class="cinder-pin-input-field__error" aria-live="polite" aria-atomic="true"> </p>`);
+var root_2 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_1 = $.from_html(`<span> <!></span>`);
+var root_3 = $.from_html(`<span class="cinder-sr-only"> </span> <input class="cinder-pin-input__segment" autocapitalize="none" spellcheck="false" maxlength="1"/>`, 1);
+var root_4 = $.from_html(`<input type="hidden"/>`);
+var root_5 = $.from_html(`<p class="cinder-pin-input-field__description"> </p>`);
+var root_6 = $.from_html(`<p class="cinder-pin-input-field__error" aria-live="polite" aria-atomic="true"> </p>`);
 var root = $.from_html(`<div><!>  <div class="cinder-pin-input" role="group"></div> <!> <!> <!></div>`);
 function Pin_input($$anchor, $$props) {
   $.push($$props, true);
@@ -137,15 +138,8 @@ function Pin_input($$anchor, $$props) {
     }
     return out;
   }
-  const segments = $.derived(() => {
-    const filtered = filterValue(value() ?? "");
-    return Array.from({ length: $.get(normalizedLength) }, (_, index) => filtered[index] ?? "");
-  });
-  $.user_effect(() => {
-    const filtered = filterValue(value() ?? "");
-    if (filtered !== value())
-      value(filtered);
-  });
+  const normalizedValue = $.derived(() => filterValue(value() ?? ""));
+  const segments = $.derived(() => Array.from({ length: $.get(normalizedLength) }, (_, index) => $.get(normalizedValue)[index] ?? ""));
   const groupLabelId = $.derived(() => $$props.label ? `${$$props.id}-label` : undefined);
   const defaultDescriptionId = $.derived(() => describeId($$props.id, !!$$props.description));
   const defaultErrorId = $.derived(() => errorId($$props.id, !!$$props.error));
@@ -295,15 +289,26 @@ function Pin_input($$anchor, $$props) {
   var div = root();
   var node = $.child(div);
   {
-    var consequent = ($$anchor2) => {
+    var consequent_1 = ($$anchor2) => {
       var span = root_1();
-      var text_1 = $.child(span, true);
+      var text_1 = $.child(span);
+      var node_1 = $.sibling(text_1);
+      {
+        var consequent = ($$anchor3) => {
+          var span_1 = root_2();
+          $.append($$anchor3, span_1);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(resolvedRequired))
+            $$render(consequent);
+        });
+      }
       $.reset(span);
       $.template_effect(($0) => {
         $.set_attribute(span, "id", $.get(groupLabelId));
         $.set_class(span, 1, $0);
         $.set_attribute(span, "data-disabled", $.get(resolvedDisabled) || undefined);
-        $.set_text(text_1, $$props.label);
+        $.set_text(text_1, `${$$props.label ?? ""} `);
       }, [
         () => $.clsx(classNames("cinder-pin-input-field__label", hideLabel() && "cinder-sr-only"))
       ]);
@@ -311,19 +316,19 @@ function Pin_input($$anchor, $$props) {
     };
     $.if(node, ($$render) => {
       if ($$props.label)
-        $$render(consequent);
+        $$render(consequent_1);
     });
   }
   var div_1 = $.sibling(node, 2);
   $.each(div_1, 20, () => Array.from({ length: $.get(normalizedLength) }, (_, i) => i), (index) => index, ($$anchor2, index) => {
-    var fragment = root_2();
-    var span_1 = $.first_child(fragment);
-    var text_2 = $.child(span_1);
-    $.reset(span_1);
-    var input_1 = $.sibling(span_1, 2);
+    var fragment = root_3();
+    var span_2 = $.first_child(fragment);
+    var text_2 = $.child(span_2);
+    $.reset(span_2);
+    var input_1 = $.sibling(span_2, 2);
     $.remove_input_defaults(input_1);
     $.template_effect(($0, $1, $2, $3) => {
-      $.set_attribute(span_1, "id", $0);
+      $.set_attribute(span_2, "id", $0);
       $.set_text(text_2, `Character ${index + 1} of ${$.get(normalizedLength) ?? ""}`);
       $.set_attribute(input_1, "id", $1);
       $.set_attribute(input_1, "type", $.get(segmentType));
@@ -349,28 +354,28 @@ function Pin_input($$anchor, $$props) {
     $.append($$anchor2, fragment);
   });
   $.reset(div_1);
-  var node_1 = $.sibling(div_1, 2);
+  var node_2 = $.sibling(div_1, 2);
   {
-    var consequent_1 = ($$anchor2) => {
-      var input_2 = root_3();
+    var consequent_2 = ($$anchor2) => {
+      var input_2 = root_4();
       $.remove_input_defaults(input_2);
       $.template_effect(() => {
         $.set_attribute(input_2, "name", $$props.name);
-        $.set_value(input_2, value());
+        $.set_value(input_2, $.get(normalizedValue));
         input_2.required = $.get(resolvedRequired);
         input_2.disabled = $.get(resolvedDisabled);
       });
       $.append($$anchor2, input_2);
     };
-    $.if(node_1, ($$render) => {
+    $.if(node_2, ($$render) => {
       if ($$props.name)
-        $$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 = root_4();
+    var consequent_3 = ($$anchor2) => {
+      var p = root_5();
       var text_3 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => {
@@ -379,15 +384,15 @@ function Pin_input($$anchor, $$props) {
       });
       $.append($$anchor2, p);
     };
-    $.if(node_2, ($$render) => {
+    $.if(node_3, ($$render) => {
       if ($$props.description)
-        $$render(consequent_2);
+        $$render(consequent_3);
     });
   }
-  var node_3 = $.sibling(node_2, 2);
+  var node_4 = $.sibling(node_3, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var p_1 = root_5();
+    var consequent_4 = ($$anchor2) => {
+      var p_1 = root_6();
       var text_4 = $.child(p_1, true);
       $.reset(p_1);
       $.template_effect(() => {
@@ -396,9 +401,9 @@ function Pin_input($$anchor, $$props) {
       });
       $.append($$anchor2, p_1);
     };
-    $.if(node_3, ($$render) => {
+    $.if(node_4, ($$render) => {
       if ($$props.error)
-        $$render(consequent_3);
+        $$render(consequent_4);
     });
   }
   $.reset(div);
@@ -425,4 +430,4 @@ export {
   Pin_input as PinInput
 };
 
-//# debugId=DE1E10C8D7412F8B64756E2164756E21
+//# debugId=AD88781D5312A98464756E2164756E21

package/dist/components/pin-input/pin-input.schema.js

@@ -32,7 +32,14 @@ var schema = {
     },
     value: {
       type: "string",
-      description: "Bindable code value. Defaults to an empty string."
+      description: `Bindable code value. Defaults to an empty string.
+
+**No write-back normalization.** The bound prop reflects exactly what the
+consumer set — it is NOT mutated back to the filtered/length-capped value.
+The displayed and submitted value is normalized via \`$derived\`, but the
+binding itself is left untouched. This is intentional: the consumer owns
+the source of truth, and silent mutation of a bound prop is a surprising
+side-effect.`
     },
     length: {
       type: "number",
@@ -110,4 +117,4 @@ export {
   pin_input_schema_default as default
 };
 
-//# debugId=11876AD769150A7864756E2164756E21
+//# debugId=A65E7AF26EB302F464756E2164756E21

package/dist/components/pin-input/pin-input.types.d.ts

@@ -13,7 +13,16 @@ export type PinInputMode = 'numeric' | 'alphanumeric';
 export type PinInputProps = {
     /** Stable id used as the segment id prefix and as the hidden input id. */
     id: string;
-    /** Bindable code value. Defaults to an empty string. */
+    /**
+     * Bindable code value. Defaults to an empty string.
+     *
+     * **No write-back normalization.** The bound prop reflects exactly what the
+     * consumer set — it is NOT mutated back to the filtered/length-capped value.
+     * The displayed and submitted value is normalized via `$derived`, but the
+     * binding itself is left untouched. This is intentional: the consumer owns
+     * the source of truth, and silent mutation of a bound prop is a surprising
+     * side-effect.
+     */
     value?: string;
     /**
      * Number of segments to render. Normalized to an integer in `[1, 12]`;