@lostgradient/cinder 0.3.0 → 0.4.1

package/dist/components/schema-form/schema-form-async.fixture.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/schema-form/schema-form-body.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { SchemaFormProps, SchemaFormSchema } from './schema-form.types.ts';
+declare function $$render<Schema extends SchemaFormSchema = SchemaFormSchema>(): {
+    props: SchemaFormProps<Schema>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Schema extends SchemaFormSchema = SchemaFormSchema> {
+    props(): ReturnType<typeof $$render<Schema>>['props'];
+    events(): ReturnType<typeof $$render<Schema>>['events'];
+    slots(): ReturnType<typeof $$render<Schema>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Schema extends SchemaFormSchema = SchemaFormSchema>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Schema>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Schema>['props']>, ReturnType<__sveltets_Render<Schema>['events']>, ReturnType<__sveltets_Render<Schema>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Schema>['bindings']>;
+    } & ReturnType<__sveltets_Render<Schema>['exports']>;
+    <Schema extends SchemaFormSchema = SchemaFormSchema>(internal: unknown, props: ReturnType<__sveltets_Render<Schema>['props']> & {}): ReturnType<__sveltets_Render<Schema>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SchemaFormBody: $$IsomorphicComponent;
+type SchemaFormBody<Schema extends SchemaFormSchema = SchemaFormSchema> = InstanceType<typeof SchemaFormBody<Schema>>;
+export default SchemaFormBody;

package/dist/components/schema-form/schema-form-model.d.ts

@@ -1,4 +1,3 @@
-import type { StandardSchemaV1 } from '@standard-schema/spec';
 export type JsonPrimitive = string | number | boolean | null;
 export type JsonValue = JsonPrimitive | JsonValue[] | {
     [key: string]: JsonValue;
@@ -28,9 +27,7 @@ export type SchemaFormModel = {
 };
 export declare function isRecord(value: unknown): value is Record<string, unknown>;
 export declare function isJsonSchemaObject(value: unknown): value is JsonSchemaObject;
-export declare function isStandardSchema(value: unknown): value is StandardSchemaV1;
-export declare function jsonSchemaFromStandardSchema(schema: StandardSchemaV1): JsonSchemaObject | null;
-export declare function createSchemaFormModel(schema: JsonSchemaObject | StandardSchemaV1): SchemaFormModel;
+export declare function createSchemaFormModel(schema: JsonSchemaObject): SchemaFormModel;
 export declare function encodeEnumValue(value: JsonPrimitive): string;
 export declare function decodeEnumValue(value: string): JsonPrimitive;
 export declare function defaultValueForField(field: SchemaFormField): unknown;

package/dist/components/schema-form/schema-form-validation.d.ts

@@ -1,4 +1,3 @@
-import type { StandardSchemaV1 } from '@standard-schema/spec';
 import { type JsonSchemaObject } from './schema-form-model.ts';
 export type SchemaFormValidationIssue = {
     path: string[];
@@ -13,7 +12,7 @@ export type SchemaFormValidationResult = {
     value: unknown;
     issues: SchemaFormValidationIssue[];
 };
-export declare function validateSchemaValue(schema: JsonSchemaObject | StandardSchemaV1, value: unknown): Promise<SchemaFormValidationResult>;
+export declare function validateSchemaValue(schema: JsonSchemaObject, value: unknown): Promise<SchemaFormValidationResult>;
 export declare function jsonPointerToPath(pointer: string): string[];
 export declare function issuesByPath(issues: readonly SchemaFormValidationIssue[]): Record<string, string>;
 export declare function parseJsonDraft(path: string[], text: string): {

package/dist/components/schema-form/schema-form.css

@@ -21,28 +21,23 @@
     border-radius: var(--cinder-radius-md);
   }
 
-  .cinder-schema-form__legend,
-  .cinder-schema-form__label,
-  .cinder-schema-form__switch-label {
+  .cinder-schema-form__legend {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+    padding-inline: var(--cinder-space-1);
     color: var(--cinder-text);
     font-size: var(--cinder-text-sm);
     font-weight: var(--cinder-font-medium);
   }
 
-  .cinder-schema-form__legend {
-    padding-inline: var(--cinder-space-1);
-  }
-
   .cinder-schema-form__field {
     display: grid;
     gap: var(--cinder-space-2);
   }
 
-  .cinder-schema-form__required {
-    margin-inline-start: var(--cinder-space-1);
-    color: var(--cinder-danger);
-  }
-
+  /* Group-level (object/array fieldset) description and error. Leaf-field
+     supporting text is owned by the composed cinder controls themselves. */
   .cinder-schema-form__description {
     margin: 0;
     color: var(--cinder-text-muted);
@@ -55,10 +50,8 @@
     font-size: var(--cinder-text-sm);
   }
 
-  .cinder-schema-form__control {
-    inline-size: 100%;
-  }
-
+  /* JSON drafts edit raw text — give the composed Textarea a monospace,
+     vertically-resizable surface via its forwarded class. */
   .cinder-schema-form__json-control {
     min-block-size: 8rem;
     font-family: var(--cinder-font-mono);
@@ -73,61 +66,6 @@
     border-radius: var(--cinder-radius-md);
   }
 
-  .cinder-schema-form__switch {
-    display: inline-grid;
-    grid-template-columns: 2.25rem minmax(0, 1fr);
-    align-items: center;
-    gap: var(--cinder-space-2);
-    justify-self: start;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    text-align: start;
-    cursor: pointer;
-  }
-
-  .cinder-schema-form__switch-thumb {
-    position: relative;
-    inline-size: 2.25rem;
-    block-size: 1.25rem;
-    border: 1px solid var(--cinder-border-muted);
-    border-radius: 999px;
-    background: var(--cinder-surface-inset);
-    transition:
-      background-color var(--cinder-duration-fast) var(--cinder-ease-standard),
-      border-color var(--cinder-duration-fast) var(--cinder-ease-standard);
-  }
-
-  .cinder-schema-form__switch-thumb::after {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: 0.125rem;
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
-    border-radius: 999px;
-    background: var(--cinder-surface);
-    box-shadow: var(--cinder-shadow-sm);
-    content: '';
-    transform: translateY(-50%);
-    transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
-  }
-
-  .cinder-schema-form__switch[data-cinder-checked='true'] .cinder-schema-form__switch-thumb {
-    border-color: var(--cinder-accent);
-    background: var(--cinder-accent);
-  }
-
-  .cinder-schema-form__switch[data-cinder-checked='true'] .cinder-schema-form__switch-thumb::after {
-    transform: translate(1rem, -50%);
-  }
-
-  .cinder-schema-form__control[aria-invalid='true'],
-  .cinder-schema-form__switch[data-cinder-invalid='true'] .cinder-schema-form__switch-thumb {
-    border-color: var(--cinder-danger);
-  }
-
-  .cinder-schema-form__switch:focus-visible .cinder-schema-form__switch-thumb,
   .cinder-schema-form__secondary-button:focus-visible,
   .cinder-schema-form__submit:focus-visible {
     outline: var(--cinder-ring-width) solid transparent;
@@ -165,16 +103,16 @@
   }
 
   @media (forced-colors: active) {
-    .cinder-schema-form__switch-thumb,
     .cinder-schema-form__secondary-button,
     .cinder-schema-form__submit {
       border-color: CanvasText;
     }
 
-    .cinder-schema-form__switch:focus-visible .cinder-schema-form__switch-thumb,
     .cinder-schema-form__secondary-button:focus-visible,
     .cinder-schema-form__submit:focus-visible {
-      outline-color: Highlight;
+      outline: var(--cinder-ring-width) solid Highlight;
+      outline-offset: 3px;
+      box-shadow: none;
     }
   }
 }

package/dist/components/schema-form/schema-form.schema.js

@@ -51,12 +51,19 @@ var schema = {
         name: "schema",
         reason: "generic-type-parameter",
         required: true,
-        description: "JSON Schema object or Standard Schema object used to render and validate the form."
+        description: "JSON Schema object used to render and validate the form."
       },
       {
         name: "value",
         reason: "unknown-shape",
-        description: "Initial form value. Missing fields are seeded from the schema where possible."
+        description: `Initial form value. Missing fields are seeded from the schema where possible.
+
+**Seed-only — value changes do not reset form state.** After mount the
+consumer owns the form state. Changing \`value\` with the same \`schema\` does
+NOT reset the form (formValue, errors, rawDrafts). Only changing \`schema\`
+causes a remount and resets form state. This is intentional: the form is an
+editing surface and resetting it on every external value change would
+silently discard in-progress user edits.`
       }
     ]
   }
@@ -66,4 +73,4 @@ export {
   schema_form_schema_default as default
 };
 
-//# debugId=1B061174823FB8FF64756E2164756E21
+//# debugId=3C4C2DC55A5ED9A964756E2164756E21

package/dist/components/schema-form/schema-form.svelte.d.ts

@@ -2,11 +2,11 @@
  * @cinder
  * @category form
  * @status beta
- * @purpose Schema-driven form that renders accessible controls from JSON Schema or Standard Schema and submits one validated value object.
+ * @purpose Schema-driven form that renders accessible controls from JSON Schema and submits one validated value object.
  * @tag form
  * @tag schema
  * @tag validation
- * @useWhen Capturing a payload whose shape is already described by a workflow, API, or Standard Schema validator.
+ * @useWhen Capturing a payload whose shape is already described by a workflow, API, or JSON Schema document.
  * @useWhen You need callback submission and native FormData submission to expose the same validated object.
  * @avoidWhen Authoring or editing a JSON Schema document — use json-schema-editor instead.
  * @avoidWhen You need bespoke multi-step flows or custom cross-field user interface beyond schema validation.
@@ -15,7 +15,7 @@
  * @keyboardShortcut Enter | Submits the form from text-like controls.
  * @a11yNote Invalid submission moves focus to the first invalid field and associates each field error through aria-describedby.
  */
-export type { SchemaFormOutput, SchemaFormProps, SchemaFormSchema, SchemaFormStandardSchema, SchemaFormSubmitHandler, } from './schema-form.types.ts';
+export type { SchemaFormOutput, SchemaFormProps, SchemaFormSchema, SchemaFormSubmitHandler, } from './schema-form.types.ts';
 import type { SchemaFormProps, SchemaFormSchema } from './schema-form.types.ts';
 declare function $$render<Schema extends SchemaFormSchema = SchemaFormSchema>(): {
     props: SchemaFormProps<Schema>;

package/dist/components/schema-form/schema-form.types.d.ts

@@ -1,15 +1,22 @@
-import type { StandardSchemaV1 } from '@standard-schema/spec';
 import type { HTMLFormAttributes } from 'svelte/elements';
 import type { JsonSchemaObject } from './schema-form-model.ts';
-export type SchemaFormStandardSchema<Output = unknown> = StandardSchemaV1<unknown, Output>;
-export type SchemaFormSchema = JsonSchemaObject | SchemaFormStandardSchema;
-export type SchemaFormOutput<Schema extends SchemaFormSchema> = Schema extends StandardSchemaV1 ? StandardSchemaV1.InferOutput<Schema> : unknown;
-export type SchemaFormSubmitHandler<Schema extends SchemaFormSchema> = (value: SchemaFormOutput<Schema>, event: SubmitEvent) => void | Promise<void>;
+export type SchemaFormSchema = JsonSchemaObject;
+export type SchemaFormOutput = unknown;
+export type SchemaFormSubmitHandler = (value: SchemaFormOutput, event: SubmitEvent) => void | Promise<void>;
 /** Props for the SchemaForm component. */
 export type SchemaFormProps<Schema extends SchemaFormSchema = SchemaFormSchema> = Omit<HTMLFormAttributes, 'class' | 'onsubmit'> & {
-    /** JSON Schema object or Standard Schema object used to render and validate the form. */
+    /** JSON Schema object used to render and validate the form. */
     schema: Schema;
-    /** Initial form value. Missing fields are seeded from the schema where possible. */
+    /**
+     * Initial form value. Missing fields are seeded from the schema where possible.
+     *
+     * **Seed-only — value changes do not reset form state.** After mount the
+     * consumer owns the form state. Changing `value` with the same `schema` does
+     * NOT reset the form (formValue, errors, rawDrafts). Only changing `schema`
+     * causes a remount and resets form state. This is intentional: the form is an
+     * editing surface and resetting it on every external value change would
+     * silently discard in-progress user edits.
+     */
     value?: unknown;
     /** Name of the hidden serialized output field. Defaults to `value`. */
     name?: string;
@@ -18,5 +25,5 @@ export type SchemaFormProps<Schema extends SchemaFormSchema = SchemaFormSchema>
     /** Custom class merged with `.cinder-schema-form`. */
     class?: string;
     /** Called after validation passes with the schema-conformant output value. */
-    onsubmit?: SchemaFormSubmitHandler<Schema>;
+    onsubmit?: SchemaFormSubmitHandler;
 };

package/dist/components/scroll-area/index.js

@@ -44,13 +44,13 @@ function Scroll_area($$anchor, $$props) {
     "direction",
     "maxHeight",
     "maxWidth",
-    "ariaLabel",
+    "label",
     "tabindex",
     "as",
     "class",
     "children"
   ]);
-  const normalizedAriaLabel = $.derived(() => typeof $$props.ariaLabel === "string" && $$props.ariaLabel.trim().length > 0 ? $$props.ariaLabel.trim() : undefined);
+  const normalizedAriaLabel = $.derived(() => typeof $$props.label === "string" && $$props.label.trim().length > 0 ? $$props.label.trim() : undefined);
   const ariaLabelledby = $.derived(() => rest["aria-labelledby"]);
   const hasAccessibleName = $.derived(() => Boolean($.get(normalizedAriaLabel)) || typeof $.get(ariaLabelledby) === "string" && $.get(ariaLabelledby).trim().length > 0);
   const role = $.derived(() => $.get(hasAccessibleName) && explicitRegionElements.has(as()) ? "region" : undefined);
@@ -85,4 +85,4 @@ export {
   Scroll_area as ScrollArea
 };
 
-//# debugId=ED2D745020D21B3E64756E2164756E21
+//# debugId=3C48C318322EB68564756E2164756E21

package/dist/components/scroll-area/scroll-area.schema.js

@@ -38,7 +38,7 @@ var schema = {
       type: "string",
       description: "Maximum inline size of the scroll viewport (any valid CSS length)."
     },
-    ariaLabel: {
+    label: {
       type: "string",
       description: `Accessible name for the scroll region. When provided on neutral
 containers, the container also gets \`role="region"\` so assistive
@@ -79,4 +79,4 @@ export {
   scroll_area_schema_default as default
 };
 
-//# debugId=98E99E4A94D3F29E64756E2164756E21
+//# debugId=D3B77D2AE65BF3AD64756E2164756E21

package/dist/components/scroll-area/scroll-area.types.d.ts

@@ -27,7 +27,7 @@ export type ScrollAreaProps = Omit<HTMLAttributes<HTMLElement>, 'class' | 'child
      * name; pass it through this prop rather than the raw `aria-label` HTML
      * attribute so the landmark role and label stay coupled.
      */
-    ariaLabel?: string;
+    label?: string;
     /**
      * Override the default focus behavior. The component sets `tabindex="0"`
      * by default so keyboard users can reach the viewport for arrow-key

package/dist/components/secret-value-field/index.js

@@ -27,7 +27,7 @@ import"@lostgradient/cinder/secret-value-field/styles";
 // src/components/secret-value-field/secret-value-field.svelte
 import"svelte/internal/disclose-version";
 import * as $2 from "svelte/internal/client";
-import { onDestroy } from "svelte";
+import { onDestroy, untrack } from "svelte";
 
 // src/utilities/clipboard.ts
 async function copyToClipboard(text) {
@@ -145,8 +145,8 @@ function Secret_value_field($$anchor, $$props) {
     "warning",
     "class"
   ]);
-  const initiallyRevealedSeed = initiallyRevealed();
-  let revealed = $2.state($2.proxy(initiallyRevealedSeed));
+  let revealed = $2.state($2.proxy(untrack(() => initiallyRevealed())));
+  let previousValue = $2.state($2.proxy(untrack(() => $$props.value)));
   let copied = $2.state(false);
   let resetTimer;
   const copiedAnnouncement = $2.derived(() => $2.get(copied) ? copiedLabel() : "");
@@ -167,6 +167,12 @@ function Secret_value_field($$anchor, $$props) {
       return;
     $2.set(revealed, !$2.get(revealed));
   }
+  $2.user_effect(() => {
+    if ($$props.value === $2.get(previousValue))
+      return;
+    $2.set(previousValue, $$props.value, true);
+    $2.set(revealed, initiallyRevealed());
+  });
   onDestroy(() => {
     if (resetTimer)
       clearTimeout(resetTimer);
@@ -313,4 +319,4 @@ export {
   Secret_value_field as SecretValueField
 };
 
-//# debugId=41CF0DD27AF1914E64756E2164756E21
+//# debugId=CC9F47F02F663F4064756E2164756E21

package/dist/components/secret-value-field/secret-value-field.svelte.d.ts

@@ -1,7 +1,7 @@
 /**
  * @cinder
  * @category data-display
- * @status beta
+ * @status stable
  * @purpose Displays a masked secret (API key, token, webhook secret) with copy action and optional reveal toggle.
  * @tag clipboard
  * @tag security

package/dist/components/segment/index.js

@@ -36,17 +36,21 @@ import * as $ from "svelte/internal/client";
 import { createContext } from "svelte";
 
 // src/utilities/document-order.ts
+var DOCUMENT_POSITION_PRECEDING = 2;
+var DOCUMENT_POSITION_FOLLOWING = 4;
 function inDocumentOrder(items) {
-  return items.toSorted((a, b) => {
+  const sortedItems = [...items];
+  sortedItems.sort((a, b) => {
     if (a.node === b.node)
       return 0;
     const position = a.node.compareDocumentPosition(b.node);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+    if (position & DOCUMENT_POSITION_FOLLOWING)
       return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+    if (position & DOCUMENT_POSITION_PRECEDING)
       return 1;
     return 0;
   });
+  return sortedItems;
 }
 
 // src/utilities/roving-tabindex.ts
@@ -349,4 +353,4 @@ export {
   Segment
 };
 
-//# debugId=AC47CF7333E45FE164756E2164756E21
+//# debugId=3578425925633EBB64756E2164756E21

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

@@ -27,6 +27,8 @@ import"@lostgradient/cinder/segmented-control/styles";
 // src/components/segmented-control/segmented-control.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) {
@@ -38,17 +40,21 @@ import * as $ from "svelte/internal/client";
 import { createContext } from "svelte";
 
 // src/utilities/document-order.ts
+var DOCUMENT_POSITION_PRECEDING = 2;
+var DOCUMENT_POSITION_FOLLOWING = 4;
 function inDocumentOrder(items) {
-  return items.toSorted((a, b) => {
+  const sortedItems = [...items];
+  sortedItems.sort((a, b) => {
     if (a.node === b.node)
       return 0;
     const position = a.node.compareDocumentPosition(b.node);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+    if (position & DOCUMENT_POSITION_FOLLOWING)
       return -1;
-    if (position & Node.DOCUMENT_POSITION_PRECEDING)
+    if (position & DOCUMENT_POSITION_PRECEDING)
       return 1;
     return 0;
   });
+  return sortedItems;
 }
 
 // src/utilities/roving-tabindex.ts
@@ -251,7 +257,9 @@ class SegmentedControlController {
 }
 
 // src/components/segmented-control/segmented-control.svelte
-var root = $2.from_html(`<div class="cinder-segmented-control-container"><span> </span> <div><!></div></div>`);
+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) {
   $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, [
@@ -261,6 +269,7 @@ function Segmented_control($$anchor, $$props) {
     "id",
     "value",
     "label",
+    "name",
     "hideLabel",
     "disabled",
     "size",
@@ -275,6 +284,10 @@ function Segmented_control($$anchor, $$props) {
     "onchange",
     "children"
   ]);
+  let resetInputElement = $2.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 controller = new SegmentedControlController({
     selectionMode: () => selectionMode(),
     variant: () => variant(),
@@ -305,6 +318,35 @@ function Segmented_control($$anchor, $$props) {
   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()] : []);
+  function resetToInitialValue(event) {
+    if (resetSyncTimeout !== undefined)
+      clearTimeout(resetSyncTimeout);
+    resetSyncTimeout = setTimeout(() => {
+      resetSyncTimeout = undefined;
+      if (event.defaultPrevented)
+        return;
+      if (selectionMode() === "multiple") {
+        value(initialMultipleValues === undefined ? undefined : new SvelteSet(initialMultipleValues));
+        return;
+      }
+      value(initialSingleValue);
+    }, 0);
+  }
+  $2.user_effect(() => {
+    const input = $2.get(resetInputElement);
+    if (input === null)
+      return;
+    const form = input.form;
+    form?.addEventListener("reset", resetToInitialValue);
+    return () => {
+      form?.removeEventListener("reset", resetToInitialValue);
+      if (resetSyncTimeout !== undefined) {
+        clearTimeout(resetSyncTimeout);
+        resetSyncTimeout = undefined;
+      }
+    };
+  });
   var div = root();
   var span = $2.child(div);
   var text = $2.child(span, true);
@@ -331,6 +373,30 @@ function Segmented_control($$anchor, $$props) {
   var node = $2.child(div_1);
   $2.snippet(node, () => $$props.children);
   $2.reset(div_1);
+  var node_1 = $2.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);
+          input_2.disabled = disabled();
+        });
+        $2.append($$anchor3, input_2);
+      });
+      $2.append($$anchor2, fragment);
+    };
+    $2.if(node_1, ($$render) => {
+      if ($$props.name)
+        $$render(consequent);
+    });
+  }
   $2.reset(div);
   $2.template_effect(($0) => {
     $2.set_attribute(span, "id", `${$$props.id}-label`);
@@ -350,4 +416,4 @@ export {
   Segmented_control as SegmentedControl
 };
 
-//# debugId=2414E3599C0A991464756E2164756E21
+//# debugId=5E72E93719C988A864756E2164756E21

package/dist/components/segmented-control/segmented-control.css

@@ -227,7 +227,7 @@
   /* ── Focus ──────────────────────────────────────────────────────────────── */
 
   .cinder-segmented-control-option:focus-visible {
-    outline: 2px solid transparent;
+    outline: var(--cinder-ring-width) solid transparent;
     box-shadow:
       0 0 0 var(--cinder-ring-offset) var(--cinder-ring-offset-color),
       0 0 0 calc(var(--cinder-ring-offset) + var(--cinder-ring-width)) var(--cinder-ring-color);
@@ -278,6 +278,19 @@
     z-index: 1;
   }
 
+  /* Forced-colors: selected/pressed segments also need outline fallback. Selection
+   * semantics apply (the segment represents a chosen option) → Highlight. */
+  @media (forced-colors: active) {
+    .cinder-segmented-control:not([data-cinder-variant='tablist'])
+      .cinder-segmented-control-option[data-cinder-selected]:focus-visible,
+    .cinder-segmented-control:not([data-cinder-variant='tablist'])
+      .cinder-segmented-control-option[data-cinder-pressed]:focus-visible {
+      outline: var(--cinder-ring-width) solid Highlight;
+      outline-offset: 1px;
+      box-shadow: none;
+    }
+  }
+
   /* ── Tablist variant (single mode only) ─────────────────────────────────────
  * See docs/decisions/segmented-control-tablist-variant.md. The tablist variant
  * carries tab semantics for externally owned panels, so it must read as a
@@ -350,6 +363,14 @@
       outline: var(--cinder-ring-width) solid Highlight;
       outline-offset: 1px;
     }
+
+    /* Forced-colors: selected+focused tab in tablist → selection semantics → Highlight. */
+    .cinder-segmented-control[data-cinder-selection-mode='single'][data-cinder-variant='tablist']
+      .cinder-segmented-control-option[data-cinder-selected]:focus-visible {
+      outline: var(--cinder-ring-width) solid Highlight;
+      outline-offset: 1px;
+      box-shadow: none;
+    }
   }
 
   /* Selected hover must not restore the filled pill — keep the selected tab's

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

@@ -34,6 +34,10 @@ var schema = {
       type: "string",
       description: "Accessible label for the group."
     },
+    name: {
+      type: "string",
+      description: "Native form field name. Renders hidden input(s) carrying the selected value(s)."
+    },
     hideLabel: {
       type: "boolean",
       description: "Visually hide the label while keeping it available to assistive technology."
@@ -108,4 +112,4 @@ export {
   segmented_control_schema_default as default
 };
 
-//# debugId=F6459BA6A0562E1264756E2164756E21
+//# debugId=4B69550F505230DB64756E2164756E21

package/dist/components/segmented-control/segmented-control.types.d.ts

@@ -7,6 +7,8 @@ type CommonProps<T extends string> = Omit<HTMLAttributes<HTMLDivElement>, Compon
     id: string;
     /** Accessible label for the group. */
     label: string;
+    /** Native form field name. Renders hidden input(s) carrying the selected value(s). */
+    name?: string | undefined;
     /** Visually hide the label while keeping it available to assistive technology. */
     hideLabel?: boolean | undefined;
     /** Disable the whole control. */