@lostgradient/cinder 0.3.0 → 0.4.0

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/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/select/index.js

@@ -102,11 +102,12 @@ function devWarn(message, ...args) {
 }
 
 // src/components/select/select.svelte
-var root_1 = $.from_html(`<label> </label>`);
-var root_2 = $.from_html(`<select></select>`);
-var root_4 = $.from_html(`<option> </option>`);
+var root_2 = $.from_html(`<span class="cinder-_required-marker" aria-hidden="true">*</span>`);
+var root_1 = $.from_html(`<label class="cinder-select-field__label"> <!></label>`);
 var root_3 = $.from_html(`<select></select>`);
-var root_5 = $.from_html(`<p class="cinder-select-field__description"> </p>`);
+var root_5 = $.from_html(`<option> </option>`);
+var root_4 = $.from_html(`<select></select>`);
+var root_6 = $.from_html(`<p class="cinder-select-field__description"> </p>`);
 var root = $.from_html(`<div><!> <span class="cinder-select-field__control"><!> <span class="cinder-select-field__chevron" aria-hidden="true"></span></span> <!> <p class="cinder-select-field__error" aria-live="polite"> </p></div>`);
 function Select($$anchor, $$props) {
   $.push($$props, true);
@@ -148,26 +149,38 @@ function Select($$anchor, $$props) {
   var div = root();
   var node = $.child(div);
   {
-    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 = root_2();
+          $.append($$anchor3, span);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(field).required)
+            $$render(consequent);
+        });
+      }
       $.reset(label_1);
       $.template_effect(() => {
         $.set_attribute(label_1, "for", $$props.id);
-        $.set_text(text, $$props.label);
+        $.set_attribute(label_1, "data-disabled", $.get(field).disabled || undefined);
+        $.set_text(text, `${$$props.label ?? ""} `);
       });
       $.append($$anchor2, label_1);
     };
     $.if(node, ($$render) => {
       if ($$props.label)
-        $$render(consequent);
+        $$render(consequent_1);
     });
   }
-  var span = $.sibling(node, 2);
-  var node_1 = $.child(span);
+  var span_1 = $.sibling(node, 2);
+  var node_2 = $.child(span_1);
   {
-    var consequent_1 = ($$anchor2) => {
-      var select = root_2();
+    var consequent_2 = ($$anchor2) => {
+      var select = root_3();
       $.attribute_effect(select, () => ({
         id: $$props.id,
         class: "cinder-_input-frame cinder-select",
@@ -181,7 +194,7 @@ function Select($$anchor, $$props) {
       $.append($$anchor2, select);
     };
     var alternate = ($$anchor2) => {
-      var select_1 = root_3();
+      var select_1 = root_4();
       $.attribute_effect(select_1, () => ({
         id: $$props.id,
         class: "cinder-_input-frame cinder-select",
@@ -192,7 +205,7 @@ function Select($$anchor, $$props) {
         "aria-invalid": $.get(field).ariaInvalid
       }));
       $.each(select_1, 21, () => $$props.options, (option) => option.value, ($$anchor3, option) => {
-        var option_1 = root_4();
+        var option_1 = root_5();
         var text_1 = $.child(option_1, true);
         $.reset(option_1);
         var option_1_value = {};
@@ -209,19 +222,19 @@ function Select($$anchor, $$props) {
       $.bind_select_value(select_1, value);
       $.append($$anchor2, select_1);
     };
-    $.if(node_1, ($$render) => {
+    $.if(node_2, ($$render) => {
       if ($$props.options.length === 0)
-        $$render(consequent_1);
+        $$render(consequent_2);
       else
         $$render(alternate, -1);
     });
   }
   $.next(2);
-  $.reset(span);
-  var node_2 = $.sibling(span, 2);
+  $.reset(span_1);
+  var node_3 = $.sibling(span_1, 2);
   {
-    var consequent_2 = ($$anchor2) => {
-      var p = root_5();
+    var consequent_3 = ($$anchor2) => {
+      var p = root_6();
       var text_2 = $.child(p, true);
       $.reset(p);
       $.template_effect(() => {
@@ -230,12 +243,12 @@ function Select($$anchor, $$props) {
       });
       $.append($$anchor2, p);
     };
-    $.if(node_2, ($$render) => {
+    $.if(node_3, ($$render) => {
       if ($$props.description)
-        $$render(consequent_2);
+        $$render(consequent_3);
     });
   }
-  var p_1 = $.sibling(node_2, 2);
+  var p_1 = $.sibling(node_3, 2);
   var text_3 = $.child(p_1, true);
   $.reset(p_1);
   $.reset(div);
@@ -258,4 +271,4 @@ export {
   Select
 };
 
-//# debugId=641B4447E997E2AF64756E2164756E21
+//# debugId=63024634DD5F81A964756E2164756E21

package/dist/components/select/select.css

@@ -14,14 +14,21 @@
  * Label
  * ---------------------------------------- */
 
-  .cinder-select-field > label {
-    display: inline-block;
+  .cinder-select-field__label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
     font-size: var(--cinder-text-xs);
     font-weight: var(--cinder-font-medium);
     line-height: 1;
     color: var(--cinder-text);
   }
 
+  .cinder-select-field__label[data-disabled] {
+    color: var(--cinder-text-disabled);
+    cursor: not-allowed;
+  }
+
   /* ----------------------------------------
  * Select control
  * ---------------------------------------- */

package/dist/components/selection-popover/index.js

@@ -1902,7 +1902,8 @@ function copyInheritedPortalAttributes(element, source, inheritAttributes, fallb
   dir: element.getAttribute("dir"),
   theme: element.getAttribute("data-cinder-theme")
 }) {
-  const inheritedDir = inheritAttributes && source ? source.closest("[dir]")?.getAttribute("dir") : null;
+  const preservesExplicitDirection = element.dataset["cinderExplicitDirection"] === "true";
+  const inheritedDir = inheritAttributes && source && !preservesExplicitDirection ? source.closest("[dir]")?.getAttribute("dir") : null;
   const nextDir = inheritedDir ?? fallbackAttributes.dir;
   if (nextDir) {
     element.setAttribute("dir", nextDir);
@@ -2257,6 +2258,10 @@ function createBodyScrollLock() {
     return release;
   };
 }
+function isInsideEventPath(event, element) {
+  const path = event.composedPath();
+  return path.some((entry) => entry instanceof Node && element.contains(entry));
+}
 function createClickOutside(options) {
   const { handler, enabled = true, eventType = "click", capture = true, ignoreRefs } = options;
   return (node) => {
@@ -2264,17 +2269,19 @@ function createClickOutside(options) {
       const isEnabled = typeof enabled === "function" ? enabled() : enabled;
       if (!isEnabled)
         return;
+      if (event.type === "touchstart" && !event.cancelable)
+        return;
       const target = event.target;
       if (!(target instanceof Node)) {
         handler();
         return;
       }
-      if (node.contains(target))
+      if (isInsideEventPath(event, node))
         return;
       if (ignoreRefs) {
         for (const ref of ignoreRefs) {
           const element = ref();
-          if (element && element.contains(target))
+          if (element && isInsideEventPath(event, element))
             return;
         }
       }
@@ -2546,4 +2553,4 @@ export {
   Selection_popover as SelectionPopover
 };
 
-//# debugId=2FFC5E61EEADC6DF64756E2164756E21
+//# debugId=CA7E65931A221DD364756E2164756E21

package/dist/components/share-card/index.js

@@ -27,7 +27,6 @@ import"@lostgradient/cinder/share-card/styles";
 // src/components/share-card/share-card.svelte
 import"svelte/internal/disclose-version";
 import * as $2 from "svelte/internal/client";
-import { onDestroy } from "svelte";
 
 // src/utilities/class-names.ts
 function classNames(...parts) {
@@ -295,8 +294,8 @@ function Share_card($$anchor, $$props) {
     }
   }
   const valueRegionLabel = $2.derived(() => looksLikeUrl($$props.value) ? "Link to share" : "Text to share");
-  onDestroy(() => {
-    clearTimer();
+  $2.user_effect(() => {
+    return () => clearTimer();
   });
   const defaultActions = $2.derived(() => [
     {
@@ -428,4 +427,4 @@ export {
   Share_card as ShareCard
 };
 
-//# debugId=FCEF2CA386D1DCE064756E2164756E21
+//# debugId=004A5E01957728EF64756E2164756E21