@streamscloud/kit 0.16.2 → 0.18.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/badge/cmp.badge.svelte

@@ -22,6 +22,7 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
 | `--sc-kit--badge--padding-inline` | Horizontal padding | `0.875rem 0.75rem` |
 | `--sc-kit--badge--border-radius` | Corner radius | `var(--sc-kit--radius--pill)` |
 | `--sc-kit--badge--font-size` | Content font size | per size |
+| `--sc-kit--badge--icon-size` | Leading icon size | per size (14 / 16px) |
 | `--sc-kit--badge--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
 | `--sc-kit--badge--gap` | Gap between children | `6px` |
 -->
@@ -48,6 +49,7 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
+  --sc-kit--icon--size: var(--_badge--icon-size);
 }
 .badge__content {
   min-width: 0;
@@ -63,10 +65,12 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
 .badge--sm {
   --_badge--height: var(--sc-kit--badge--height, 1.25rem);
   --_badge--font-size: var(--sc-kit--badge--font-size, 0.625rem);
+  --_badge--icon-size: var(--sc-kit--badge--icon-size, 0.875rem);
 }
 .badge--md {
   --_badge--height: var(--sc-kit--badge--height, 1.5rem);
   --_badge--font-size: var(--sc-kit--badge--font-size, var(--sc-kit--font-size--xs));
+  --_badge--icon-size: var(--sc-kit--badge--icon-size, 1rem);
 }
 .badge--neutral-soft {
   --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--secondary));

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

@@ -26,6 +26,7 @@ type Props = {
  * | `--sc-kit--badge--padding-inline` | Horizontal padding | `0.875rem 0.75rem` |
  * | `--sc-kit--badge--border-radius` | Corner radius | `var(--sc-kit--radius--pill)` |
  * | `--sc-kit--badge--font-size` | Content font size | per size |
+ * | `--sc-kit--badge--icon-size` | Leading icon size | per size (14 / 16px) |
  * | `--sc-kit--badge--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
  * | `--sc-kit--badge--gap` | Gap between children | `6px` |
  */

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.reorderable-checkbox-list.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">import { Icon } from '../icon';
+import ToolbarDivider from './cmp.toolbar-divider.svelte';
+import ToolbarOption from './cmp.toolbar-option.svelte';
+import ToolbarSectionTitle from './cmp.toolbar-section-title.svelte';
+import { ReorderableCheckboxListLocalization } from './reorderable-checkbox-list-localization';
+import IconReorderDotsVertical from '@fluentui/svg-icons/icons/re_order_dots_vertical_20_regular.svg?raw';
+import { flip } from 'svelte/animate';
+import { dndzone } from 'svelte-dnd-action';
+let { items, title, standard, size = 'md', showClearAll = true, on } = $props();
+const localization = new ReorderableCheckboxListLocalization();
+const reorderableItems = $derived(items.filter((i) => !i.fixed));
+const fixedItems = $derived(items.filter((i) => i.fixed));
+const toReorderable = ({ id, label, enabled }) => ({ id, label, enabled });
+const toFixed = ({ id, label, enabled, fixed }) => ({ id, label, enabled, fixed });
+let dndItems = $state.raw([]);
+$effect(() => {
+    dndItems = reorderableItems.map(toReorderable);
+});
+const flipDurationMs = 200;
+const emitChange = (reordered) => {
+    on.change([...fixedItems.map(toFixed), ...reordered.map(toReorderable)]);
+};
+const handleConsider = (e) => {
+    dndItems = e.detail.items;
+};
+const handleFinalize = (e) => {
+    emitChange(e.detail.items);
+};
+const handleToggle = (id, enabled) => {
+    emitChange(dndItems.map((i) => (i.id === id ? { ...i, enabled } : i)));
+};
+const handleFixedToggle = (id, enabled) => {
+    const updatedFixed = fixedItems.map((item) => toFixed(item.id === id ? { ...item, enabled } : item));
+    on.change([...updatedFixed, ...dndItems.map(toReorderable)]);
+};
+const anyEnabled = $derived(items.some((i) => i.enabled));
+const clearAll = () => {
+    on.change([...fixedItems.map((item) => toFixed({ ...item, enabled: false })), ...dndItems.map((item) => toReorderable({ ...item, enabled: false }))]);
+};
+const allEnabled = $derived(items.length > 0 && items.every((i) => i.enabled));
+const matchesStandard = $derived(!!standard && items.length === standard.length && items.every((item, idx) => item.id === standard[idx].id && item.enabled === standard[idx].enabled));
+const standardCoversAll = $derived(!!standard && standard.length > 0 && standard.every((i) => i.enabled));
+const selectStandard = () => {
+    if (standard) {
+        on.change(standard.map((item) => (item.fixed ? toFixed(item) : toReorderable(item))));
+    }
+};
+const enableAll = () => {
+    on.change([...fixedItems.map((item) => toFixed({ ...item, enabled: true })), ...dndItems.map((item) => toReorderable({ ...item, enabled: true }))]);
+};
+</script>
+
+<div class="reorderable-checkbox-list">
+  {#if standard}
+    <ToolbarOption size={size} selectable={{ selected: matchesStandard, display: 'checkmark' }} on={{ click: selectStandard }}
+      >{localization.standard}</ToolbarOption>
+    {#if !standardCoversAll}
+      <ToolbarOption size={size} selectable={{ selected: allEnabled, display: 'checkmark' }} on={{ click: enableAll }}>{localization.allFields}</ToolbarOption>
+    {/if}
+  {/if}
+  {#if title}
+    <ToolbarSectionTitle>{title}</ToolbarSectionTitle>
+  {/if}
+  {#each fixedItems as item (item.id)}
+    <ToolbarOption size={size} selectable={{ selected: item.enabled, display: 'checkbox' }} on={{ click: () => handleFixedToggle(item.id, !item.enabled) }}>
+      {#snippet prepend()}
+        <span class="reorderable-checkbox-list__handle reorderable-checkbox-list__handle--hidden" aria-hidden="true"
+          ><Icon src={IconReorderDotsVertical} /></span>
+      {/snippet}
+      {item.label}
+    </ToolbarOption>
+  {/each}
+  <div
+    class="reorderable-checkbox-list__dnd"
+    use:dndzone={{ items: dndItems, dropTargetStyle: {}, flipDurationMs, morphDisabled: true }}
+    onconsider={handleConsider}
+    onfinalize={handleFinalize}>
+    {#each dndItems as item (item.id)}
+      <div class="reorderable-checkbox-list__item" animate:flip={{ duration: flipDurationMs }}>
+        <ToolbarOption size={size} selectable={{ selected: item.enabled, display: 'checkbox' }} on={{ click: () => handleToggle(item.id, !item.enabled) }}>
+          {#snippet prepend()}
+            <span class="reorderable-checkbox-list__handle"><Icon src={IconReorderDotsVertical} /></span>
+          {/snippet}
+          {item.label}
+        </ToolbarOption>
+      </div>
+    {/each}
+  </div>
+  {#if showClearAll && anyEnabled}
+    <ToolbarDivider />
+    <ToolbarOption size={size} variant="muted" on={{ click: clearAll }}>{localization.clearAll}</ToolbarOption>
+  {/if}
+</div>
+
+<!--
+@component
+A reorderable checklist: each row is a draggable `ToolbarOption` checkbox preceded by a left drag handle.
+Clicking a row toggles its `enabled`; dragging reorders. Items flagged `fixed` render above the drag zone
+with a hidden handle (non-reorderable, still toggleable). Pass `title` for a section header, and `standard`
+(a canonical order + enabled reference) to render `Standard` / `All fields` preset rows with auto-detected
+active state. A default `Clear all` footer shows while any item is enabled — set `showClearAll={false}` to
+remove it.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--reorderable-checkbox-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--muted)` |
+-->
+
+<style>.reorderable-checkbox-list {
+  --_rcl--handle--color: var(--sc-kit--reorderable-checkbox-list--handle--color, var(--sc-kit--color--text--muted));
+  display: flex;
+  flex-direction: column;
+}
+.reorderable-checkbox-list__dnd {
+  display: flex;
+  flex-direction: column;
+}
+.reorderable-checkbox-list__handle {
+  --sc-kit--icon--size: 1rem;
+  --sc-kit--icon--color: var(--_rcl--handle--color);
+  display: inline-flex;
+  align-items: center;
+  cursor: grab;
+}
+.reorderable-checkbox-list__handle:active {
+  cursor: grabbing;
+}
+.reorderable-checkbox-list__handle--hidden {
+  visibility: hidden;
+}</style>

package/dist/ui/page-toolbar/cmp.reorderable-checkbox-list.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { ReorderableCheckboxItem } from './types';
+type Props = {
+    items: ReorderableCheckboxItem[];
+    /** Optional section title above the list. */
+    title?: string;
+    /** Reference `Standard` config (canonical order + enabled). When set, `Standard` / `All fields` preset rows render on top with auto-detected active state. */
+    standard?: ReorderableCheckboxItem[];
+    /** Row size preset — forwarded to `ToolbarOption`. @default 'md' */
+    size?: 'sm' | 'md';
+    /** Show the default `Clear all` footer (unchecks every item) while something is enabled. @default true */
+    showClearAll?: boolean;
+    on: {
+        change: (items: ReorderableCheckboxItem[]) => void;
+    };
+};
+/**
+ * A reorderable checklist: each row is a draggable `ToolbarOption` checkbox preceded by a left drag handle.
+ * Clicking a row toggles its `enabled`; dragging reorders. Items flagged `fixed` render above the drag zone
+ * with a hidden handle (non-reorderable, still toggleable). Pass `title` for a section header, and `standard`
+ * (a canonical order + enabled reference) to render `Standard` / `All fields` preset rows with auto-detected
+ * active state. A default `Clear all` footer shows while any item is enabled — set `showClearAll={false}` to
+ * remove it.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--reorderable-checkbox-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--muted)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-checkbox.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">import ToolbarOption from './cmp.toolbar-option.svelte';
+const { checked, size = 'md', disabled = false, children, on } = $props();
+</script>
+
+<ToolbarOption size={size} disabled={disabled} selectable={{ selected: checked, display: 'checkbox' }} on={{ click: () => on?.change?.(!checked) }}>
+  {@render children()}
+</ToolbarOption>
+
+<!--
+@component
+A checkbox row for toolbar dropdowns — a thin wrapper over `ToolbarOption` with a leading checkbox
+glyph. The whole row is the click target; clicking toggles `checked` through `on.change`. Styling and
+sizing come from `ToolbarOption`.
+-->

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    checked: boolean;
+    /** Row density — forwarded to `ToolbarOption`. @default 'md' */
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    children: Snippet;
+    on?: {
+        change?: (value: boolean) => void;
+    };
+};
+/**
+ * A checkbox row for toolbar dropdowns — a thin wrapper over `ToolbarOption` with a leading checkbox
+ * glyph. The whole row is the click target; clicking toggles `checked` through `on.change`. Styling and
+ * sizing come from `ToolbarOption`.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-divider.svelte

@@ -0,0 +1,19 @@
+<div class="toolbar-divider"></div>
+
+<!--
+@component
+A thin horizontal separator for toolbar dropdown panels — use between option groups or above a
+footer. Compose it freely inside a `ToolbarFilterSelect` footer snippet.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-divider--color` | Line color | `var(--sc-kit--color--border)` |
+-->
+
+<style>.toolbar-divider {
+  flex-shrink: 0;
+  block-size: 1px;
+  margin: var(--sc-kit--space--1) var(--sc-kit--space--2);
+  background: var(--sc-kit--toolbar-divider--color, var(--sc-kit--color--border));
+}</style>