@streamscloud/kit 0.16.1 → 0.17.0

package/dist/styles/_semantic.scss

@@ -121,6 +121,9 @@
   --sc-kit--radius--pill: 999px;
   --sc-kit--radius--circle: 50%;
 
+  --sc-kit--field--border-radius--sm: var(--sc-kit--radius--sm); // 4px
+  --sc-kit--field--border-radius--md: var(--sc-kit--radius--md); // 6px
+
   // ============================================================
   // TYPOGRAPHY
   // ============================================================

package/dist/ui/button/cmp.button.svelte

@@ -111,7 +111,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
 | `--sc-kit--button--padding-inline` | Inline (horizontal) padding | per size |
 | `--sc-kit--button--font-size` | Label font size | per size |
 | `--sc-kit--button--gap` | Gap between icon and label | per size |
-| `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
+| `--sc-kit--button--border-radius` | Corner rounding | per size — `xs`/`sm` 4px, `md`/`lg` 6px |
 | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--regular)` |
 | `--sc-kit--button--width` | Explicit width | `fit-content` |
 | `--sc-kit--button--min-width` | Minimum width | `0` |
@@ -134,7 +134,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
   --_btn--width: var(--sc-kit--button--width, fit-content);
   --_btn--min-width: var(--sc-kit--button--min-width, 0);
   --_btn--max-width: var(--sc-kit--button--max-width, 100%);
-  --_btn--border-radius: var(--sc-kit--button--border-radius, var(--sc-kit--radius--md));
+  --_btn--border-radius: var(--sc-kit--button--border-radius, var(--_btn--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_btn--font-weight: var(--sc-kit--button--font-weight, var(--sc-kit--font-weight--regular));
   box-sizing: border-box;
   display: flex;
@@ -207,6 +207,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
   --_btn--size-font-size: var(--sc-kit--font-size--xs);
   --_btn--size-gap: var(--sc-kit--space--1);
   --_btn--size-icon-size: var(--sc-kit--field--icon--size--xs);
+  --_btn--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .btn--sm {
   --_btn--size-height: 1.75rem;
@@ -214,6 +215,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
   --_btn--size-font-size: var(--sc-kit--font-size--sm);
   --_btn--size-gap: var(--sc-kit--space--1);
   --_btn--size-icon-size: var(--sc-kit--field--icon--size--sm);
+  --_btn--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .btn--md {
   --_btn--size-height: 2rem;
@@ -221,6 +223,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
   --_btn--size-font-size: var(--sc-kit--font-size--md);
   --_btn--size-gap: var(--sc-kit--space--2);
   --_btn--size-icon-size: var(--sc-kit--field--icon--size--md);
+  --_btn--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .btn--lg {
   --_btn--size-height: 2.5rem;
@@ -228,6 +231,7 @@ Pass `type="anchor"` to render as `<a>` with `href`, or `type="presentational"`
   --_btn--size-font-size: var(--sc-kit--font-size--lg);
   --_btn--size-gap: var(--sc-kit--space--2);
   --_btn--size-icon-size: var(--sc-kit--field--icon--size--lg);
+  --_btn--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .btn--icon-only {
   --sc-kit--button--padding-inline: 0;

package/dist/ui/button/cmp.button.svelte.d.ts

@@ -68,7 +68,7 @@ type Props = ButtonModeProps | AnchorModeProps | PresentationalModeProps;
  * | `--sc-kit--button--padding-inline` | Inline (horizontal) padding | per size |
  * | `--sc-kit--button--font-size` | Label font size | per size |
  * | `--sc-kit--button--gap` | Gap between icon and label | per size |
- * | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
+ * | `--sc-kit--button--border-radius` | Corner rounding | per size — `xs`/`sm` 4px, `md`/`lg` 6px |
  * | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--regular)` |
  * | `--sc-kit--button--width` | Explicit width | `fit-content` |
  * | `--sc-kit--button--min-width` | Minimum width | `0` |

package/dist/ui/date-picker/cmp.date-picker.svelte

@@ -187,7 +187,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
 | `--sc-kit--date-picker--background--disabled` | Trigger background when disabled | `var(--sc-kit--color--bg--field-alt)` |
 | `--sc-kit--date-picker--border-color` | Trigger border color | `var(--sc-kit--color--border--field)` |
 | `--sc-kit--date-picker--border-color--error` | Trigger border color in error state | `var(--sc-kit--color--danger)` |
-| `--sc-kit--date-picker--border-radius` | Trigger border radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--date-picker--border-radius` | Trigger border radius | per size — `sm` 4px, `md`/`lg` 6px |
 | `--sc-kit--date-picker--underline-color` | Inset bottom-underline indicator (transparent default, accent when open, danger on error) | `transparent` |
 | `--sc-kit--date-picker--font-size` | Trigger font size | per size |
 | `--sc-kit--date-picker--color` | Trigger text color | `var(--sc-kit--color--text--primary)` |
@@ -199,21 +199,21 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
 <style>@charset "UTF-8";
 .date-picker {
   /* TRIGGER — public CSS API resolved with defaults (this block IS the API documentation) */
-  --_dp--height: var(--sc-kit--date-picker--height, var(--sc-kit--field--height--md));
-  --_dp--padding-inline: var(--sc-kit--date-picker--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_dp--height: var(--sc-kit--date-picker--height, var(--_dp--size-height, var(--sc-kit--field--height--md)));
+  --_dp--padding-inline: var(--sc-kit--date-picker--padding-inline, var(--_dp--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
   --_dp--gap: var(--sc-kit--date-picker--gap, var(--sc-kit--space--2));
   --_dp--width: var(--sc-kit--date-picker--width, 100%);
   --_dp--background: var(--sc-kit--date-picker--background, var(--sc-kit--color--bg--field));
   --_dp--background-disabled: var(--sc-kit--date-picker--background--disabled, var(--sc-kit--color--bg--field-alt));
   --_dp--border-color: var(--sc-kit--date-picker--border-color, var(--sc-kit--color--border--field));
   --_dp--border-color-error: var(--sc-kit--date-picker--border-color--error, var(--sc-kit--color--danger));
-  --_dp--border-radius: var(--sc-kit--date-picker--border-radius, var(--sc-kit--radius--sm));
+  --_dp--border-radius: var(--sc-kit--date-picker--border-radius, var(--_dp--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_dp--underline-color: var(--sc-kit--date-picker--underline-color, transparent);
-  --_dp--font-size: var(--sc-kit--date-picker--font-size, var(--sc-kit--font-size--md));
+  --_dp--font-size: var(--sc-kit--date-picker--font-size, var(--_dp--size-font-size, var(--sc-kit--font-size--md)));
   --_dp--color: var(--sc-kit--date-picker--color, var(--sc-kit--color--text--primary));
   --_dp--placeholder-color: var(--sc-kit--date-picker--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_dp--icon-color: var(--sc-kit--date-picker--icon--color, var(--sc-kit--color--text--muted));
-  --_dp--icon-size: var(--sc-kit--date-picker--icon--size, var(--sc-kit--field--icon--size--md));
+  --_dp--icon-size: var(--sc-kit--date-picker--icon--size, var(--_dp--size-icon-size, var(--sc-kit--field--icon--size--md)));
   --_--input-affordance--opacity: 0;
   --_--input-affordance--scale: 0;
 }
@@ -232,22 +232,25 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
   --_--input-affordance--scale: 1;
 }
 .date-picker--sm {
-  --sc-kit--date-picker--height: var(--sc-kit--field--height--sm);
-  --sc-kit--date-picker--padding-inline: var(--sc-kit--field--padding-inline--sm);
-  --sc-kit--date-picker--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--date-picker--icon--size: var(--sc-kit--field--icon--size--sm);
+  --_dp--size-height: var(--sc-kit--field--height--sm);
+  --_dp--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --_dp--size-font-size: var(--sc-kit--font-size--sm);
+  --_dp--size-icon-size: var(--sc-kit--field--icon--size--sm);
+  --_dp--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .date-picker--md {
-  --sc-kit--date-picker--height: var(--sc-kit--field--height--md);
-  --sc-kit--date-picker--padding-inline: var(--sc-kit--field--padding-inline--md);
-  --sc-kit--date-picker--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--date-picker--icon--size: var(--sc-kit--field--icon--size--md);
+  --_dp--size-height: var(--sc-kit--field--height--md);
+  --_dp--size-padding-inline: var(--sc-kit--field--padding-inline--md);
+  --_dp--size-font-size: var(--sc-kit--font-size--md);
+  --_dp--size-icon-size: var(--sc-kit--field--icon--size--md);
+  --_dp--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .date-picker--lg {
-  --sc-kit--date-picker--height: var(--sc-kit--field--height--lg);
-  --sc-kit--date-picker--padding-inline: var(--sc-kit--field--padding-inline--lg);
-  --sc-kit--date-picker--font-size: var(--sc-kit--font-size--lg);
-  --sc-kit--date-picker--icon--size: var(--sc-kit--field--icon--size--lg);
+  --_dp--size-height: var(--sc-kit--field--height--lg);
+  --_dp--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --_dp--size-font-size: var(--sc-kit--font-size--lg);
+  --_dp--size-icon-size: var(--sc-kit--field--icon--size--lg);
+  --_dp--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .date-picker--open {
   --sc-kit--date-picker--underline-color: var(--sc-kit--color--accent);

package/dist/ui/date-picker/cmp.date-picker.svelte.d.ts

@@ -69,7 +69,7 @@ type Props = ClearableProps | RequiredProps;
  * | `--sc-kit--date-picker--background--disabled` | Trigger background when disabled | `var(--sc-kit--color--bg--field-alt)` |
  * | `--sc-kit--date-picker--border-color` | Trigger border color | `var(--sc-kit--color--border--field)` |
  * | `--sc-kit--date-picker--border-color--error` | Trigger border color in error state | `var(--sc-kit--color--danger)` |
- * | `--sc-kit--date-picker--border-radius` | Trigger border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--date-picker--border-radius` | Trigger border radius | per size — `sm` 4px, `md`/`lg` 6px |
  * | `--sc-kit--date-picker--underline-color` | Inset bottom-underline indicator (transparent default, accent when open, danger on error) | `transparent` |
  * | `--sc-kit--date-picker--font-size` | Trigger font size | per size |
  * | `--sc-kit--date-picker--color` | Trigger text color | `var(--sc-kit--color--text--primary)` |

package/dist/ui/form-field/cmp.form-field-validatable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T extends Record<string, unknown>, K extends keyof T & string">import { Validatable } from '../validatable';
 import { default as FormField } from './cmp.form-field.svelte';
-let { handler, name, label, required = false, validateOn, debounceMs, disableTouchedTracking, reserveErrorSpace, on, children } = $props();
+let { handler, name, label, required = false, validateOn, debounceMs, disableTouchedTracking, reserveErrorSpace = false, on, children } = $props();
 </script>
 
 <FormField label={label} required={required}>

package/dist/ui/form-field/cmp.form-field-validatable.svelte.d.ts

@@ -17,7 +17,7 @@ declare function $$render<T extends Record<string, unknown>, K extends keyof T &
         debounceMs?: number;
         /** Show errors before the field has been touched. Forwarded to `<Validatable>`. @default false */
         disableTouchedTracking?: boolean;
-        /** Reserve space below the field so a toggling error doesn't shift layout. Forwarded to `<Validatable>`. @default true */
+        /** Reserve space below the field so a toggling error doesn't shift layout. Forwarded to `<Validatable>` (whose own default is `true`). @default false */
         reserveErrorSpace?: boolean;
         /** Extra consumer callbacks. Forwarded to `<Validatable>`. */
         on?: {

package/dist/ui/input/cmp.input.svelte

@@ -161,7 +161,7 @@ or the clear button (see `HandleInput`'s availability pill).
 | `--sc-kit--input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
 | `--sc-kit--input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
 | `--sc-kit--input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
-| `--sc-kit--input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--input--border-radius` | Border radius | per size — `sm` 4px, `md`/`lg` 6px |
 | `--sc-kit--input--underline-color` | Inset bottom-underline indicator (transparent default, accent on focus-within, danger on error) | `transparent` |
 | `--sc-kit--input--font-size` | Text font size | per size |
 | `--sc-kit--input--color` | Text color | `var(--sc-kit--color--text--primary)` |
@@ -172,8 +172,8 @@ or the clear button (see `HandleInput`'s availability pill).
 
 <style>.input {
   /* Public CSS API resolved with defaults (this block IS the API documentation) */
-  --_in--height: var(--sc-kit--input--height, var(--sc-kit--field--height--md));
-  --_in--padding-inline: var(--sc-kit--input--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_in--height: var(--sc-kit--input--height, var(--_in--size-height, var(--sc-kit--field--height--md)));
+  --_in--padding-inline: var(--sc-kit--input--padding-inline, var(--_in--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
   --_in--gap: var(--sc-kit--input--gap, var(--sc-kit--space--2));
   --_in--width: var(--sc-kit--input--width, 100%);
   --_in--background: var(--sc-kit--input--background, var(--sc-kit--color--bg--field));
@@ -181,13 +181,13 @@ or the clear button (see `HandleInput`'s availability pill).
   --_in--border-color: var(--sc-kit--input--border-color, var(--sc-kit--color--border--field));
   --_in--border-color-hover: var(--sc-kit--input--border-color--hover, var(--sc-kit--color--border--strong));
   --_in--border-color-error: var(--sc-kit--input--border-color--error, var(--sc-kit--color--danger));
-  --_in--border-radius: var(--sc-kit--input--border-radius, var(--sc-kit--radius--sm));
+  --_in--border-radius: var(--sc-kit--input--border-radius, var(--_in--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_in--underline-color: var(--sc-kit--input--underline-color, transparent);
-  --_in--font-size: var(--sc-kit--input--font-size, var(--sc-kit--font-size--md));
+  --_in--font-size: var(--sc-kit--input--font-size, var(--_in--size-font-size, var(--sc-kit--font-size--md)));
   --_in--color: var(--sc-kit--input--color, var(--sc-kit--color--text--primary));
   --_in--placeholder-color: var(--sc-kit--input--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_in--icon-color: var(--sc-kit--input--icon--color, var(--sc-kit--color--text--muted));
-  --_in--icon-size: var(--sc-kit--input--icon--size, var(--sc-kit--field--icon--size--md));
+  --_in--icon-size: var(--sc-kit--input--icon--size, var(--_in--size-icon-size, var(--sc-kit--field--icon--size--md)));
   --_--input-affordance--opacity: 0;
   --_--input-affordance--scale: 0;
 }
@@ -225,22 +225,25 @@ or the clear button (see `HandleInput`'s availability pill).
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .input--sm {
-  --sc-kit--input--height: var(--sc-kit--field--height--sm);
-  --sc-kit--input--padding-inline: var(--sc-kit--field--padding-inline--sm);
-  --sc-kit--input--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--input--icon--size: var(--sc-kit--field--icon--size--sm);
+  --_in--size-height: var(--sc-kit--field--height--sm);
+  --_in--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --_in--size-font-size: var(--sc-kit--font-size--sm);
+  --_in--size-icon-size: var(--sc-kit--field--icon--size--sm);
+  --_in--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .input--md {
-  --sc-kit--input--height: var(--sc-kit--field--height--md);
-  --sc-kit--input--padding-inline: var(--sc-kit--field--padding-inline--md);
-  --sc-kit--input--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--input--icon--size: var(--sc-kit--field--icon--size--md);
+  --_in--size-height: var(--sc-kit--field--height--md);
+  --_in--size-padding-inline: var(--sc-kit--field--padding-inline--md);
+  --_in--size-font-size: var(--sc-kit--font-size--md);
+  --_in--size-icon-size: var(--sc-kit--field--icon--size--md);
+  --_in--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .input--lg {
-  --sc-kit--input--height: var(--sc-kit--field--height--lg);
-  --sc-kit--input--padding-inline: var(--sc-kit--field--padding-inline--lg);
-  --sc-kit--input--font-size: var(--sc-kit--font-size--lg);
-  --sc-kit--input--icon--size: var(--sc-kit--field--icon--size--lg);
+  --_in--size-height: var(--sc-kit--field--height--lg);
+  --_in--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --_in--size-font-size: var(--sc-kit--font-size--lg);
+  --_in--size-icon-size: var(--sc-kit--field--icon--size--lg);
+  --_in--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .input:where(:hover:not(:focus-within)) {
   --sc-kit--input--border-color: var(--_in--border-color-hover);

package/dist/ui/input/cmp.input.svelte.d.ts

@@ -22,7 +22,7 @@ import type { InputProps } from './types';
  * | `--sc-kit--input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
  * | `--sc-kit--input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
  * | `--sc-kit--input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
- * | `--sc-kit--input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--input--border-radius` | Border radius | per size — `sm` 4px, `md`/`lg` 6px |
  * | `--sc-kit--input--underline-color` | Inset bottom-underline indicator (transparent default, accent on focus-within, danger on error) | `transparent` |
  * | `--sc-kit--input--font-size` | Text font size | per size |
  * | `--sc-kit--input--color` | Text color | `var(--sc-kit--color--text--primary)` |

package/dist/ui/numeral-input/cmp.numeral-input.svelte

@@ -197,7 +197,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
 | `--sc-kit--numeral-input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
 | `--sc-kit--numeral-input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
 | `--sc-kit--numeral-input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
-| `--sc-kit--numeral-input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--numeral-input--border-radius` | Border radius | per size — `sm` 4px, `md`/`lg` 6px |
 | `--sc-kit--numeral-input--underline-color` | Inset bottom-underline indicator | `transparent` |
 | `--sc-kit--numeral-input--font-size` | Text font size | per size |
 | `--sc-kit--numeral-input--color` | Text color | `var(--sc-kit--color--text--primary)` |
@@ -207,8 +207,8 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
 -->
 
 <style>.numeral-input {
-  --_ni--height: var(--sc-kit--numeral-input--height, var(--sc-kit--field--height--md));
-  --_ni--padding-inline: var(--sc-kit--numeral-input--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_ni--height: var(--sc-kit--numeral-input--height, var(--_ni--size-height, var(--sc-kit--field--height--md)));
+  --_ni--padding-inline: var(--sc-kit--numeral-input--padding-inline, var(--_ni--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
   --_ni--gap: var(--sc-kit--numeral-input--gap, var(--sc-kit--space--2));
   --_ni--width: var(--sc-kit--numeral-input--width, 100%);
   --_ni--background: var(--sc-kit--numeral-input--background, var(--sc-kit--color--bg--field));
@@ -216,13 +216,13 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
   --_ni--border-color: var(--sc-kit--numeral-input--border-color, var(--sc-kit--color--border--field));
   --_ni--border-color-hover: var(--sc-kit--numeral-input--border-color--hover, var(--sc-kit--color--border--strong));
   --_ni--border-color-error: var(--sc-kit--numeral-input--border-color--error, var(--sc-kit--color--danger));
-  --_ni--border-radius: var(--sc-kit--numeral-input--border-radius, var(--sc-kit--radius--sm));
+  --_ni--border-radius: var(--sc-kit--numeral-input--border-radius, var(--_ni--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_ni--underline-color: var(--sc-kit--numeral-input--underline-color, transparent);
-  --_ni--font-size: var(--sc-kit--numeral-input--font-size, var(--sc-kit--font-size--md));
+  --_ni--font-size: var(--sc-kit--numeral-input--font-size, var(--_ni--size-font-size, var(--sc-kit--font-size--md)));
   --_ni--color: var(--sc-kit--numeral-input--color, var(--sc-kit--color--text--primary));
   --_ni--placeholder-color: var(--sc-kit--numeral-input--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_ni--icon-color: var(--sc-kit--numeral-input--icon--color, var(--sc-kit--color--text--muted));
-  --_ni--icon-size: var(--sc-kit--numeral-input--icon--size, var(--sc-kit--field--icon--size--md));
+  --_ni--icon-size: var(--sc-kit--numeral-input--icon--size, var(--_ni--size-icon-size, var(--sc-kit--field--icon--size--md)));
   --_--input-affordance--opacity: 0;
   --_--input-affordance--scale: 0;
 }
@@ -249,22 +249,25 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .numeral-input--sm {
-  --sc-kit--numeral-input--height: var(--sc-kit--field--height--sm);
-  --sc-kit--numeral-input--padding-inline: var(--sc-kit--field--padding-inline--sm);
-  --sc-kit--numeral-input--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--numeral-input--icon--size: var(--sc-kit--field--icon--size--sm);
+  --_ni--size-height: var(--sc-kit--field--height--sm);
+  --_ni--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --_ni--size-font-size: var(--sc-kit--font-size--sm);
+  --_ni--size-icon-size: var(--sc-kit--field--icon--size--sm);
+  --_ni--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .numeral-input--md {
-  --sc-kit--numeral-input--height: var(--sc-kit--field--height--md);
-  --sc-kit--numeral-input--padding-inline: var(--sc-kit--field--padding-inline--md);
-  --sc-kit--numeral-input--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--numeral-input--icon--size: var(--sc-kit--field--icon--size--md);
+  --_ni--size-height: var(--sc-kit--field--height--md);
+  --_ni--size-padding-inline: var(--sc-kit--field--padding-inline--md);
+  --_ni--size-font-size: var(--sc-kit--font-size--md);
+  --_ni--size-icon-size: var(--sc-kit--field--icon--size--md);
+  --_ni--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .numeral-input--lg {
-  --sc-kit--numeral-input--height: var(--sc-kit--field--height--lg);
-  --sc-kit--numeral-input--padding-inline: var(--sc-kit--field--padding-inline--lg);
-  --sc-kit--numeral-input--font-size: var(--sc-kit--font-size--lg);
-  --sc-kit--numeral-input--icon--size: var(--sc-kit--field--icon--size--lg);
+  --_ni--size-height: var(--sc-kit--field--height--lg);
+  --_ni--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --_ni--size-font-size: var(--sc-kit--font-size--lg);
+  --_ni--size-icon-size: var(--sc-kit--field--icon--size--lg);
+  --_ni--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .numeral-input:where(:hover:not(:focus-within)) {
   --sc-kit--numeral-input--border-color: var(--_ni--border-color-hover);

package/dist/ui/numeral-input/cmp.numeral-input.svelte.d.ts

@@ -81,7 +81,7 @@ type Props = ClearableProps | RequiredProps;
  * | `--sc-kit--numeral-input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
  * | `--sc-kit--numeral-input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
  * | `--sc-kit--numeral-input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
- * | `--sc-kit--numeral-input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--numeral-input--border-radius` | Border radius | per size — `sm` 4px, `md`/`lg` 6px |
  * | `--sc-kit--numeral-input--underline-color` | Inset bottom-underline indicator | `transparent` |
  * | `--sc-kit--numeral-input--font-size` | Text font size | per size |
  * | `--sc-kit--numeral-input--color` | Text color | `var(--sc-kit--color--text--primary)` |

package/dist/ui/page-toolbar/cmp.toolbar-search-input.svelte

@@ -2,10 +2,10 @@
 import { CONTROL_ICON_SIZE, scaleUp } from '../icon';
 import { Input } from '../input';
 import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
-const { value, collapsedIconColor, collapsedIconSize, placeholder = '', size = 'sm', debounce = 0, shortcut = false, clearOnEscape = false, on } = $props();
+const { value, collapsedIconColor, collapsedIconSize, placeholder = '', size = 'sm', debounce = 0, collapsible = true, shortcut = false, clearOnEscape = false, on } = $props();
 let inputRef = $state.raw(undefined);
 let focused = $state(false);
-const expanded = $derived(focused || !!value);
+const expanded = $derived(!collapsible || focused || !!value);
 const collapsedSize = $derived(collapsedIconSize ?? scaleUp(CONTROL_ICON_SIZE[size]));
 const onInput = (v) => {
     on?.input?.(v);
@@ -47,10 +47,11 @@ const handleKeydown = (event) => {
 
 <!--
 @component
-A collapsible search input for toolbars. Collapsed to an icon-only square at the chosen field height
-when empty + unfocused; expands to the full input width when focused or when a value is present.
-Shares Input's size preset so it lines up with other field-shaped controls. Opt into `shortcut`
-for a document-wide Cmd/Ctrl+K focus-and-select, and `clearOnEscape` to clear on Escape.
+A search input for toolbars. By default collapses to an icon-only square at the chosen field height
+when empty + unfocused, and expands to the full input width when focused or when a value is present;
+set `collapsible={false}` to keep it always expanded. Shares Input's size preset so it lines up with
+other field-shaped controls. Opt into `shortcut` for a document-wide Cmd/Ctrl+K focus-and-select,
+and `clearOnEscape` to clear on Escape.
 
 ### CSS Custom Properties
 | Property | Description | Default |

package/dist/ui/page-toolbar/cmp.toolbar-search-input.svelte.d.ts

@@ -7,6 +7,8 @@ type Props = {
     placeholder?: string;
     /** Size preset (shared with Input / DatePicker / Select). @default 'sm' */
     size?: 'sm' | 'md' | 'lg';
+    /** Collapse to an icon-only square when empty + unfocused. Set false to keep the input always expanded. @default true */
+    collapsible?: boolean;
     /** Debounce delay in ms @default 0 */
     debounce?: number;
     /** Bind Cmd/Ctrl+K document-wide to focus the input and select its text. Enable on a single instance per view. @default false */
@@ -18,10 +20,11 @@ type Props = {
     };
 };
 /**
- * A collapsible search input for toolbars. Collapsed to an icon-only square at the chosen field height
- * when empty + unfocused; expands to the full input width when focused or when a value is present.
- * Shares Input's size preset so it lines up with other field-shaped controls. Opt into `shortcut`
- * for a document-wide Cmd/Ctrl+K focus-and-select, and `clearOnEscape` to clear on Escape.
+ * A search input for toolbars. By default collapses to an icon-only square at the chosen field height
+ * when empty + unfocused, and expands to the full input width when focused or when a value is present;
+ * set `collapsible={false}` to keep it always expanded. Shares Input's size preset so it lines up with
+ * other field-shaped controls. Opt into `shortcut` for a document-wide Cmd/Ctrl+K focus-and-select,
+ * and `clearOnEscape` to clear on Escape.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/page-toolbar/cmp.toolbar-value-stepper.svelte

@@ -48,20 +48,23 @@ Shares the field-height preset so it lines up with other toolbar controls.
   block-size: var(--_toolbar-value-stepper--height);
   padding-inline: var(--sc-kit--space--2);
   border: 1px solid var(--sc-kit--color--border--field);
-  border-radius: var(--sc-kit--radius--md);
+  border-radius: var(--_toolbar-value-stepper--border-radius, var(--sc-kit--field--border-radius--md));
   background: var(--sc-kit--color--bg--field);
 }
 .toolbar-value-stepper--sm {
   --_toolbar-value-stepper--height: var(--sc-kit--field--height--sm);
   --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--sm);
+  --_toolbar-value-stepper--border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .toolbar-value-stepper--md {
   --_toolbar-value-stepper--height: var(--sc-kit--field--height--md);
   --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--md);
+  --_toolbar-value-stepper--border-radius: var(--sc-kit--field--border-radius--md);
 }
 .toolbar-value-stepper--lg {
   --_toolbar-value-stepper--height: var(--sc-kit--field--height--lg);
   --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--lg);
+  --_toolbar-value-stepper--border-radius: var(--sc-kit--field--border-radius--md);
 }
 .toolbar-value-stepper__btn {
   display: inline-flex;

package/dist/ui/rich-text-input/cmp.rich-text-input.svelte

@@ -172,14 +172,14 @@ body, or an external host element addressed by `options.fixedToolbarId`). Impera
 | `--sc-kit--rich-text-input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
 | `--sc-kit--rich-text-input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
 | `--sc-kit--rich-text-input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
-| `--sc-kit--rich-text-input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--rich-text-input--border-radius` | Border radius | per size — `sm` 4px, `md`/`lg` 6px |
 | `--sc-kit--rich-text-input--underline-color` | Inset bottom-underline (transparent default, accent on focus-within, danger on error) | `transparent` |
 | `--sc-kit--rich-text-input--color` | Text color | `var(--sc-kit--color--text--primary)` |
 | `--sc-kit--rich-text-input--placeholder--color` | Placeholder color | `var(--sc-kit--color--text--placeholder)` |
 -->
 
 <style>.rich-text-input {
-  --_rti--root-font-size: var(--sc-kit--rich-text-input--root--font-size, 1rem);
+  --_rti--root-font-size: var(--sc-kit--rich-text-input--root--font-size, var(--_rti--size-root-font-size, 1rem));
   --_rti--padding-block: var(--sc-kit--rich-text-input--padding-block, 0.5em);
   --_rti--padding-inline: var(--sc-kit--rich-text-input--padding-inline, 0.75em);
   --_rti--width: var(--sc-kit--rich-text-input--width, 100%);
@@ -189,7 +189,7 @@ body, or an external host element addressed by `options.fixedToolbarId`). Impera
   --_rti--border-color: var(--sc-kit--rich-text-input--border-color, var(--sc-kit--color--border--field));
   --_rti--border-color-hover: var(--sc-kit--rich-text-input--border-color--hover, var(--sc-kit--color--border--strong));
   --_rti--border-color-error: var(--sc-kit--rich-text-input--border-color--error, var(--sc-kit--color--danger));
-  --_rti--border-radius: var(--sc-kit--rich-text-input--border-radius, var(--sc-kit--radius--sm));
+  --_rti--border-radius: var(--sc-kit--rich-text-input--border-radius, var(--_rti--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_rti--underline-color: var(--sc-kit--rich-text-input--underline-color, transparent);
   --_rti--color: var(--sc-kit--rich-text-input--color, var(--sc-kit--color--text--primary));
   --_rti--placeholder-color: var(--sc-kit--rich-text-input--placeholder--color, var(--sc-kit--color--text--placeholder));
@@ -216,13 +216,16 @@ body, or an external host element addressed by `options.fixedToolbarId`). Impera
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .rich-text-input--sm {
-  --sc-kit--rich-text-input--root--font-size: 0.8125rem;
+  --_rti--size-root-font-size: 0.8125rem;
+  --_rti--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .rich-text-input--md {
-  --sc-kit--rich-text-input--root--font-size: 0.875rem;
+  --_rti--size-root-font-size: 0.875rem;
+  --_rti--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .rich-text-input--lg {
-  --sc-kit--rich-text-input--root--font-size: 1rem;
+  --_rti--size-root-font-size: 1rem;
+  --_rti--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .rich-text-input:where(:hover:not(:focus-within)) {
   --sc-kit--rich-text-input--border-color: var(--_rti--border-color-hover);

package/dist/ui/rich-text-input/cmp.rich-text-input.svelte.d.ts

@@ -55,7 +55,7 @@ type Props = {
  * | `--sc-kit--rich-text-input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
  * | `--sc-kit--rich-text-input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
  * | `--sc-kit--rich-text-input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
- * | `--sc-kit--rich-text-input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--rich-text-input--border-radius` | Border radius | per size — `sm` 4px, `md`/`lg` 6px |
  * | `--sc-kit--rich-text-input--underline-color` | Inset bottom-underline (transparent default, accent on focus-within, danger on error) | `transparent` |
  * | `--sc-kit--rich-text-input--color` | Text color | `var(--sc-kit--color--text--primary)` |
  * | `--sc-kit--rich-text-input--placeholder--color` | Placeholder color | `var(--sc-kit--color--text--placeholder)` |

package/dist/ui/segmented-control/cmp.segmented-control.svelte

@@ -44,7 +44,7 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
 | `--sc-kit--segmented-control--height` | Control height | per size (28 / 32 px) |
 | `--sc-kit--segmented-control--font-size` | Label font size | per size |
 | `--sc-kit--segmented-control--padding-inline` | Per-segment horizontal padding | per size (10 / 12 px) |
-| `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | `--sc-kit--radius--md` |
+| `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | per size — `sm` 4px, `md` 6px |
 | `--sc-kit--segmented-control--color` | Default segment text color | `--sc-kit--color--text--secondary` |
 | `--sc-kit--segmented-control--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
 | `--sc-kit--segmented-control--color--active` | Active segment text color | `--sc-kit--color--text--primary` |
@@ -62,7 +62,7 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
   --_sc--height: var(--sc-kit--segmented-control--height, var(--_sc--size-height));
   --_sc--font-size: var(--sc-kit--segmented-control--font-size, var(--_sc--size-font-size));
   --_sc--padding-inline: var(--sc-kit--segmented-control--padding-inline, var(--_sc--size-padding-inline));
-  --_sc--radius: var(--sc-kit--segmented-control--border-radius, var(--sc-kit--radius--md));
+  --_sc--radius: var(--sc-kit--segmented-control--border-radius, var(--_sc--size-radius, var(--sc-kit--field--border-radius--md)));
   --_sc--color: var(--sc-kit--segmented-control--color, var(--sc-kit--color--text--muted));
   --_sc--color-hover: var(--sc-kit--segmented-control--color--hover, var(--sc-kit--color--text--primary));
   --_sc--color-active: var(--sc-kit--segmented-control--color--active, var(--sc-kit--color--text--primary));
@@ -86,11 +86,13 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
   --_sc--size-height: 1.75rem;
   --_sc--size-font-size: var(--sc-kit--font-size--sm);
   --_sc--size-padding-inline: 0.625rem;
+  --_sc--size-radius: var(--sc-kit--field--border-radius--sm);
 }
 .segmented-control--md {
   --_sc--size-height: 2rem;
   --_sc--size-font-size: var(--sc-kit--font-size--md);
   --_sc--size-padding-inline: 0.75rem;
+  --_sc--size-radius: var(--sc-kit--field--border-radius--md);
 }
 .segmented-control--tray {
   --_sc--background-active-default: var(--sc-kit--color--bg--panel);

package/dist/ui/segmented-control/cmp.segmented-control.svelte.d.ts

@@ -56,7 +56,7 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--segmented-control--height` | Control height | per size (28 / 32 px) |
  * | `--sc-kit--segmented-control--font-size` | Label font size | per size |
  * | `--sc-kit--segmented-control--padding-inline` | Per-segment horizontal padding | per size (10 / 12 px) |
- * | `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | `--sc-kit--radius--md` |
+ * | `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | per size — `sm` 4px, `md` 6px |
  * | `--sc-kit--segmented-control--color` | Default segment text color | `--sc-kit--color--text--secondary` |
  * | `--sc-kit--segmented-control--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
  * | `--sc-kit--segmented-control--color--active` | Active segment text color | `--sc-kit--color--text--primary` |

package/dist/ui/select/_select-trigger.scss

@@ -7,21 +7,21 @@
 // Public CSS API lives under `--sc-kit--select--trigger--*` so consumers can override
 // once and have all select variants pick it up.
 @mixin select-trigger {
-  --_sel--height: var(--sc-kit--select--trigger--height, var(--sc-kit--field--height--md));
-  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_sel--height: var(--sc-kit--select--trigger--height, var(--_sel--size-height, var(--sc-kit--field--height--md)));
+  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--_sel--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
   --_sel--gap: var(--sc-kit--select--trigger--gap, var(--sc-kit--space--2));
   --_sel--background: var(--sc-kit--select--trigger--background, var(--sc-kit--color--bg--field));
   --_sel--background-disabled: var(--sc-kit--select--trigger--background--disabled, var(--sc-kit--color--bg--field-alt));
   --_sel--border-color: var(--sc-kit--select--trigger--border-color, var(--sc-kit--color--border--field));
   --_sel--border-color-hover: var(--sc-kit--select--trigger--border-color--hover, var(--sc-kit--color--border--strong));
   --_sel--border-color-error: var(--sc-kit--select--trigger--border-color--error, var(--sc-kit--color--danger));
-  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--sc-kit--radius--sm));
+  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
-  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--sc-kit--font-size--md));
+  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
   --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
   --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
-  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--sc-kit--field--icon--size--md));
+  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--_sel--size-icon-size, var(--sc-kit--field--icon--size--md)));
 
   @include affordance.host;
 
@@ -45,22 +45,25 @@
   @include transitions.transition(background-color border-color color box-shadow);
 
   &--sm {
-    --sc-kit--select--trigger--height: var(--sc-kit--field--height--sm);
-    --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--sm);
-    --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--sm);
-    --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--sm);
+    --_sel--size-height: var(--sc-kit--field--height--sm);
+    --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
+    --_sel--size-font-size: var(--sc-kit--font-size--sm);
+    --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
+    --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
   }
   &--md {
-    --sc-kit--select--trigger--height: var(--sc-kit--field--height--md);
-    --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--md);
-    --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--md);
-    --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--md);
+    --_sel--size-height: var(--sc-kit--field--height--md);
+    --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
+    --_sel--size-font-size: var(--sc-kit--font-size--md);
+    --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
+    --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
   }
   &--lg {
-    --sc-kit--select--trigger--height: var(--sc-kit--field--height--lg);
-    --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--lg);
-    --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--lg);
-    --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--lg);
+    --_sel--size-height: var(--sc-kit--field--height--lg);
+    --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
+    --_sel--size-font-size: var(--sc-kit--font-size--lg);
+    --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
+    --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
   }
 
   &:where(:hover:not(:focus-within)) {

package/dist/ui/select/cmp.singleselect-async.svelte

@@ -177,21 +177,21 @@ background--hover}`.
 -->
 
 <style>.singleselect {
-  --_sel--height: var(--sc-kit--select--trigger--height, var(--sc-kit--field--height--md));
-  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_sel--height: var(--sc-kit--select--trigger--height, var(--_sel--size-height, var(--sc-kit--field--height--md)));
+  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--_sel--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
   --_sel--gap: var(--sc-kit--select--trigger--gap, var(--sc-kit--space--2));
   --_sel--background: var(--sc-kit--select--trigger--background, var(--sc-kit--color--bg--field));
   --_sel--background-disabled: var(--sc-kit--select--trigger--background--disabled, var(--sc-kit--color--bg--field-alt));
   --_sel--border-color: var(--sc-kit--select--trigger--border-color, var(--sc-kit--color--border--field));
   --_sel--border-color-hover: var(--sc-kit--select--trigger--border-color--hover, var(--sc-kit--color--border--strong));
   --_sel--border-color-error: var(--sc-kit--select--trigger--border-color--error, var(--sc-kit--color--danger));
-  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--sc-kit--radius--sm));
+  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
-  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--sc-kit--font-size--md));
+  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
   --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
   --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
-  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--sc-kit--field--icon--size--md));
+  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--_sel--size-icon-size, var(--sc-kit--field--icon--size--md)));
   --_--input-affordance--opacity: 0;
   --_--input-affordance--scale: 0;
 }
@@ -219,22 +219,25 @@ background--hover}`.
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .singleselect--sm {
-  --sc-kit--select--trigger--height: var(--sc-kit--field--height--sm);
-  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--sm);
-  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--sm);
+  --_sel--size-height: var(--sc-kit--field--height--sm);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --_sel--size-font-size: var(--sc-kit--font-size--sm);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .singleselect--md {
-  --sc-kit--select--trigger--height: var(--sc-kit--field--height--md);
-  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--md);
-  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--md);
+  --_sel--size-height: var(--sc-kit--field--height--md);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
+  --_sel--size-font-size: var(--sc-kit--font-size--md);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .singleselect--lg {
-  --sc-kit--select--trigger--height: var(--sc-kit--field--height--lg);
-  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--lg);
-  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--lg);
-  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--lg);
+  --_sel--size-height: var(--sc-kit--field--height--lg);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --_sel--size-font-size: var(--sc-kit--font-size--lg);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .singleselect:where(:hover:not(:focus-within)) {
   --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);

package/dist/ui/select/multiselect-base.svelte

@@ -393,21 +393,21 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
 }
 
 .multiselect-trigger {
-  --_sel--height: var(--sc-kit--select--trigger--height, var(--sc-kit--field--height--md));
-  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_sel--height: var(--sc-kit--select--trigger--height, var(--_sel--size-height, var(--sc-kit--field--height--md)));
+  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--_sel--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
   --_sel--gap: var(--sc-kit--select--trigger--gap, var(--sc-kit--space--2));
   --_sel--background: var(--sc-kit--select--trigger--background, var(--sc-kit--color--bg--field));
   --_sel--background-disabled: var(--sc-kit--select--trigger--background--disabled, var(--sc-kit--color--bg--field-alt));
   --_sel--border-color: var(--sc-kit--select--trigger--border-color, var(--sc-kit--color--border--field));
   --_sel--border-color-hover: var(--sc-kit--select--trigger--border-color--hover, var(--sc-kit--color--border--strong));
   --_sel--border-color-error: var(--sc-kit--select--trigger--border-color--error, var(--sc-kit--color--danger));
-  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--sc-kit--radius--sm));
+  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
-  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--sc-kit--font-size--md));
+  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
   --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
   --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
-  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--sc-kit--field--icon--size--md));
+  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--_sel--size-icon-size, var(--sc-kit--field--icon--size--md)));
   --_--input-affordance--opacity: 0;
   --_--input-affordance--scale: 0;
 }
@@ -435,22 +435,25 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .multiselect-trigger--sm {
-  --sc-kit--select--trigger--height: var(--sc-kit--field--height--sm);
-  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--sm);
-  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--sm);
+  --_sel--size-height: var(--sc-kit--field--height--sm);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --_sel--size-font-size: var(--sc-kit--font-size--sm);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .multiselect-trigger--md {
-  --sc-kit--select--trigger--height: var(--sc-kit--field--height--md);
-  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--md);
-  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--md);
+  --_sel--size-height: var(--sc-kit--field--height--md);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
+  --_sel--size-font-size: var(--sc-kit--font-size--md);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .multiselect-trigger--lg {
-  --sc-kit--select--trigger--height: var(--sc-kit--field--height--lg);
-  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--lg);
-  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--lg);
-  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--lg);
+  --_sel--size-height: var(--sc-kit--field--height--lg);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --_sel--size-font-size: var(--sc-kit--font-size--lg);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .multiselect-trigger:where(:hover:not(:focus-within)) {
   --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);
@@ -570,7 +573,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
 .multiselect-trigger--multi .multiselect-trigger__spinner {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-end: var(--sc-kit--select--trigger--padding-inline, var(--sc-kit--field--padding-inline--md));
+  inset-inline-end: var(--_sel--padding-inline);
   transform: translateY(-50%);
   margin: 0;
 }</style>

package/dist/ui/textarea/cmp.textarea.svelte

@@ -142,7 +142,7 @@ exposed via `bind:this`.
 | `--sc-kit--textarea--border-color` | Border color | `var(--sc-kit--color--border--field)` |
 | `--sc-kit--textarea--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
 | `--sc-kit--textarea--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
-| `--sc-kit--textarea--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--textarea--border-radius` | Border radius | per size — `sm` 4px, `md`/`lg` 6px |
 | `--sc-kit--textarea--underline-color` | Inset bottom-underline (transparent default, accent on focus-within, danger on error) | `transparent` |
 | `--sc-kit--textarea--font-size` | Text font size | per size |
 | `--sc-kit--textarea--color` | Text color | `var(--sc-kit--color--text--primary)` |
@@ -150,17 +150,17 @@ exposed via `bind:this`.
 -->
 
 <style>.textarea {
-  --_ta--padding-block: var(--sc-kit--textarea--padding-block, 0.5rem);
-  --_ta--padding-inline: var(--sc-kit--textarea--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_ta--padding-block: var(--sc-kit--textarea--padding-block, var(--_ta--size-padding-block, 0.5rem));
+  --_ta--padding-inline: var(--sc-kit--textarea--padding-inline, var(--_ta--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
   --_ta--width: var(--sc-kit--textarea--width, 100%);
   --_ta--background: var(--sc-kit--textarea--background, var(--sc-kit--color--bg--field));
   --_ta--background-disabled: var(--sc-kit--textarea--background--disabled, var(--sc-kit--color--bg--field-alt));
   --_ta--border-color: var(--sc-kit--textarea--border-color, var(--sc-kit--color--border--field));
   --_ta--border-color-hover: var(--sc-kit--textarea--border-color--hover, var(--sc-kit--color--border--strong));
   --_ta--border-color-error: var(--sc-kit--textarea--border-color--error, var(--sc-kit--color--danger));
-  --_ta--border-radius: var(--sc-kit--textarea--border-radius, var(--sc-kit--radius--sm));
+  --_ta--border-radius: var(--sc-kit--textarea--border-radius, var(--_ta--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_ta--underline-color: var(--sc-kit--textarea--underline-color, transparent);
-  --_ta--font-size: var(--sc-kit--textarea--font-size, var(--sc-kit--font-size--md));
+  --_ta--font-size: var(--sc-kit--textarea--font-size, var(--_ta--size-font-size, var(--sc-kit--font-size--md)));
   --_ta--color: var(--sc-kit--textarea--color, var(--sc-kit--color--text--primary));
   --_ta--placeholder-color: var(--sc-kit--textarea--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_--input-affordance--opacity: 0;
@@ -190,19 +190,22 @@ exposed via `bind:this`.
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .textarea--sm {
-  --sc-kit--textarea--padding-block: 0.375rem;
-  --sc-kit--textarea--padding-inline: var(--sc-kit--field--padding-inline--sm);
-  --sc-kit--textarea--font-size: var(--sc-kit--font-size--sm);
+  --_ta--size-padding-block: 0.375rem;
+  --_ta--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --_ta--size-font-size: var(--sc-kit--font-size--sm);
+  --_ta--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .textarea--md {
-  --sc-kit--textarea--padding-block: 0.5rem;
-  --sc-kit--textarea--padding-inline: var(--sc-kit--field--padding-inline--md);
-  --sc-kit--textarea--font-size: var(--sc-kit--font-size--md);
+  --_ta--size-padding-block: 0.5rem;
+  --_ta--size-padding-inline: var(--sc-kit--field--padding-inline--md);
+  --_ta--size-font-size: var(--sc-kit--font-size--md);
+  --_ta--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .textarea--lg {
-  --sc-kit--textarea--padding-block: 0.625rem;
-  --sc-kit--textarea--padding-inline: var(--sc-kit--field--padding-inline--lg);
-  --sc-kit--textarea--font-size: var(--sc-kit--font-size--lg);
+  --_ta--size-padding-block: 0.625rem;
+  --_ta--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --_ta--size-font-size: var(--sc-kit--font-size--lg);
+  --_ta--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .textarea:where(:hover:not(:focus-within)) {
   --sc-kit--textarea--border-color: var(--_ta--border-color-hover);

package/dist/ui/textarea/cmp.textarea.svelte.d.ts

@@ -66,7 +66,7 @@ type Props = {
  * | `--sc-kit--textarea--border-color` | Border color | `var(--sc-kit--color--border--field)` |
  * | `--sc-kit--textarea--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
  * | `--sc-kit--textarea--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
- * | `--sc-kit--textarea--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--textarea--border-radius` | Border radius | per size — `sm` 4px, `md`/`lg` 6px |
  * | `--sc-kit--textarea--underline-color` | Inset bottom-underline (transparent default, accent on focus-within, danger on error) | `transparent` |
  * | `--sc-kit--textarea--font-size` | Text font size | per size |
  * | `--sc-kit--textarea--color` | Text color | `var(--sc-kit--color--text--primary)` |

package/dist/ui/validatable/cmp.validatable.svelte

@@ -2,8 +2,8 @@
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, K extends keyof T & string">import { Utils } from '../../core/utils';
-import { default as FieldError } from './cmp.field-error.svelte';
-let { handler, name, validateOn = ['input', 'change', 'blur'], debounceMs = 0, disableTouchedTracking = false, reserveErrorSpace = true, on, children } = $props();
+import { default as FieldFrame } from './field-frame.svelte';
+let { handler, name, validateOn = ['input', 'change', 'blur'], debounceMs = 0, disableTouchedTracking = false, reserveErrorSpace = false, on, children } = $props();
 // True between a value change and the next completed validation. Hides the stale error in the
 // UI without mutating handler.errors — the model keeps the last known result, the view just
 // doesn't trust it until the validator has caught up.
@@ -59,15 +59,15 @@ const field = $derived({
 });
 </script>
 
-<FieldError error={showErrors ? handler.errors[name] : null} reserveErrorSpace={reserveErrorSpace}>
+<FieldFrame error={showErrors ? handler.errors[name] : null} reserveErrorSpace={reserveErrorSpace}>
   {@render children(field)}
-</FieldError>
+</FieldFrame>
 
 <!--
 @component
 Binds a form field to any kit input via a render-prop snippet. The base inputs stay unchanged;
 `Validatable` is the only place that knows about `FormValidationHandler`. Wraps children in an
-internal `FieldError` frame that reserves space for the error message so toggling doesn't shift
+internal `FieldFrame` that reserves space for the error message so toggling doesn't shift
 layout; `reserveErrorSpace={false}` drops the reserve — the message overlays content below.
 
 ### Usage

package/dist/ui/validatable/cmp.validatable.svelte.d.ts

@@ -33,7 +33,7 @@ declare function $$render<T extends Record<string, unknown>, K extends keyof T &
         /**
          * Reserve space below the field for the error message. Turn off when a sibling must align to
          * the field's real bottom edge — the message then overlays whatever sits below the field.
-         * @default true
+         * @default false
          */
         reserveErrorSpace?: boolean;
         /**
@@ -70,7 +70,7 @@ interface $$IsomorphicComponent {
 /**
  * Binds a form field to any kit input via a render-prop snippet. The base inputs stay unchanged;
  * `Validatable` is the only place that knows about `FormValidationHandler`. Wraps children in an
- * internal `FieldError` frame that reserves space for the error message so toggling doesn't shift
+ * internal `FieldFrame` that reserves space for the error message so toggling doesn't shift
  * layout; `reserveErrorSpace={false}` drops the reserve — the message overlays content below.
  *
  * ### Usage

package/dist/ui/validatable/cmp.validation-error.svelte

@@ -1,11 +1,11 @@
-<script lang="ts" generics="T extends Record<string, unknown>">import { default as FieldError } from './cmp.field-error.svelte';
-let { name, validationResult, reserveErrorSpace = true, children } = $props();
+<script lang="ts" generics="T extends Record<string, unknown>">import { default as FieldFrame } from './field-frame.svelte';
+let { name, validationResult, reserveErrorSpace = false, children } = $props();
 const errorText = $derived(validationResult?.errors[name] ?? null);
 </script>
 
-<FieldError error={errorText} reserveErrorSpace={reserveErrorSpace}>
+<FieldFrame error={errorText} reserveErrorSpace={reserveErrorSpace}>
   {@render children()}
-</FieldError>
+</FieldFrame>
 
 <!--
 @component

package/dist/ui/validatable/cmp.validation-error.svelte.d.ts

@@ -9,7 +9,7 @@ declare function $$render<T extends Record<string, unknown>>(): {
         /**
          * Reserve space below the field for the error message. Turn off when a sibling must align to
          * the field's real bottom edge — the message then overlays whatever sits below the field.
-         * @default true
+         * @default false
          */
         reserveErrorSpace?: boolean;
         children: Snippet;

package/dist/ui/validatable/{cmp.field-error.svelte → field-frame.svelte}

@@ -1,11 +1,11 @@
-<script lang="ts">let { error, reserveErrorSpace = true, children } = $props();
+<script lang="ts">let { error, reserveErrorSpace = false, children } = $props();
 export {};
 </script>
 
-<div class="field-error" class:field-error--errored={!!error} class:field-error--no-reserve={!reserveErrorSpace}>
+<div class="field-frame" class:field-frame--errored={!!error} class:field-frame--no-reserve={!reserveErrorSpace}>
   {@render children()}
   {#if error}
-    <small class="field-error__message">{error}</small>
+    <small class="field-frame__message">{error}</small>
   {/if}
 </div>
 
@@ -20,15 +20,15 @@ any other field-shaped kit consumer that needs the same visual contract).
 Not exported from `index.ts` — for kit-internal use only.
 -->
 
-<style>.field-error {
+<style>.field-frame {
   position: relative;
   margin-bottom: 1.1em;
   display: block;
 }
-.field-error--no-reserve {
+.field-frame--no-reserve {
   margin-bottom: 0;
 }
-.field-error__message {
+.field-frame__message {
   position: absolute;
   top: calc(100% + 0.1em);
   left: 0;

package/dist/ui/validatable/{cmp.field-error.svelte.d.ts → field-frame.svelte.d.ts}

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 type Props = {
     /** Error message to display below the field. Falsy hides the message and the `--errored` flag. */
     error?: string | null | undefined;
-    /** Reserve space below the field for the error message. Off drops the reserve — the message overlays content below. @default true */
+    /** Reserve space below the field for the error message. Off drops the reserve — the message overlays content below. @default false */
     reserveErrorSpace?: boolean;
     children: Snippet;
 };
@@ -15,6 +15,6 @@ type Props = {
  *
  * Not exported from `index.ts` — for kit-internal use only.
  */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;
+declare const FieldFrame: import("svelte").Component<Props, {}, "">;
+type FieldFrame = ReturnType<typeof FieldFrame>;
+export default FieldFrame;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",