@streamscloud/kit 0.76.5 → 0.77.0

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, hint, required = false, validateOn, debounceMs, disableTouchedTracking, reserveErrorSpace = false, on, children } = $props();
+let { handler, name, label, hint, required = false, validateOn, debounceMs, disableTouchedTracking, errorPlacement, on, children } = $props();
 </script>
 
 <FormField label={label} hint={hint} required={required}>
@@ -10,7 +10,7 @@ let { handler, name, label, hint, required = false, validateOn, debounceMs, disa
     validateOn={validateOn}
     debounceMs={debounceMs}
     disableTouchedTracking={disableTouchedTracking}
-    reserveErrorSpace={reserveErrorSpace}
+    errorPlacement={errorPlacement}
     on={on}
     children={children} />
 </FormField>
@@ -41,5 +41,5 @@ Identical visual output to:
 </FormField>
 ```
 
-Both `FormField`'s label/required and `Validatable`'s no-jump error slot apply unchanged — this cmp adds no styling, just collapses the wiring.
+Both `FormField`'s label/required and `Validatable`'s error slot (`errorPlacement`) apply unchanged — this cmp adds no styling, just collapses the wiring.
 -->

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

@@ -1,5 +1,5 @@
 import type { FormValidationHandler } from '../../core/validation';
-import { type FieldBinding, type ValidateOnEvent } from '../validatable';
+import { type ErrorPlacement, type FieldBinding, type ValidateOnEvent } from '../validatable';
 import type { Snippet } from 'svelte';
 declare function $$render<T extends Record<string, unknown>, K extends keyof T & string>(): {
     props: {
@@ -19,8 +19,8 @@ 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>` (whose own default is `true`). @default false */
-        reserveErrorSpace?: boolean;
+        /** Where the error message sits. Forwarded to `<Validatable>`. @default 'overlay' */
+        errorPlacement?: ErrorPlacement;
         /** Extra consumer callbacks. Forwarded to `<Validatable>`. */
         on?: {
             input?: (value: T[K]) => void;
@@ -74,7 +74,7 @@ interface $$IsomorphicComponent {
  * </FormField>
  * ```
  *
- * Both `FormField`'s label/required and `Validatable`'s no-jump error slot apply unchanged — this cmp adds no styling, just collapses the wiring.
+ * Both `FormField`'s label/required and `Validatable`'s error slot (`errorPlacement`) apply unchanged — this cmp adds no styling, just collapses the wiring.
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends Record<string, unknown>, K extends keyof T & string> = InstanceType<typeof Cmp<T, K>>;

package/dist/ui/table/_table-styles.scss

@@ -1,5 +1,6 @@
 @use 'styles/mixins';
 @use 'styles/functions';
+@use 'styles/transitions';
 
 @mixin base {
   .alternative-view {
@@ -16,11 +17,16 @@
   .table-container {
     --_table--row--height: var(--sc-kit--table--row--height, var(--_table--size-row-height));
     --_table--cell--font-size: var(--sc-kit--table--cell--font-size, var(--_table--size-cell-font-size));
-    --_table--cell--horizontal-padding: var(--sc-kit--table--cell--horizontal-padding, var(--_table--size-cell-padding));
+    --_table--cell--padding-inline: var(--sc-kit--table--cell--padding-inline, var(--_table--size-cell-padding));
+    --_table--cell--padding-block: var(--sc-kit--table--cell--padding-block, 0);
+    --_table--cell--vertical-align: var(--sc-kit--table--cell--vertical-align, middle);
     --_table--head--height: var(--sc-kit--table--head--height, var(--_table--size-head-height, var(--_table--row--height)));
 
     --_table--head--background-color: var(--sc-kit--table--head--background-color, var(--sc-kit--color--bg--field-alt));
     --_table--head--color: var(--sc-kit--table--head--color, var(--sc-kit--color--text--secondary));
+    --_table--head--font-weight: var(--sc-kit--table--head--font-weight, var(--sc-kit--font-weight--semibold));
+    --_table--head--letter-spacing: var(--sc-kit--table--head--letter-spacing, normal);
+    --_table--head--text-transform: var(--sc-kit--table--head--text-transform, none);
     --_table--border-color: var(--sc-kit--table--border-color, var(--sc-kit--color--border));
     --_table--row--color: var(--sc-kit--table--row--color, transparent);
     --_table--row--alternative-color: var(--sc-kit--table--row--alternative-color, var(--sc-kit--color--bg--hover));
@@ -69,25 +75,31 @@
     border-collapse: separate;
     border-spacing: 0;
 
+    &--fixed {
+      table-layout: fixed;
+    }
+
     &__head {
       height: var(--_table--head--height);
       max-height: var(--_table--head--height);
       background: var(--_table--head--background-color);
       color: var(--_table--head--color);
       font-size: var(--sc-kit--table--head--font-size, var(--sc-kit--font-size--sm));
-      font-weight: var(--sc-kit--font-weight--semibold);
+      letter-spacing: var(--_table--head--letter-spacing);
+      text-transform: var(--_table--head--text-transform);
     }
 
     &__th {
-      padding: 0 var(--_table--cell--horizontal-padding);
+      padding: 0 var(--_table--cell--padding-inline);
+      // On th, not the head: the UA stylesheet's `th { font-weight: bold }` beats an inherited weight.
+      font-weight: var(--_table--head--font-weight);
       text-align: left;
       vertical-align: middle;
       border-bottom: 1px solid var(--_table--border-color);
       @include mixins.no-select;
 
       &--centered {
-        text-align: center;
-        --_table-header--justify-content: center;
+        --_--table-header--justify-content: center;
       }
     }
 
@@ -103,7 +115,15 @@
       &:hover,
       &--highlighted {
         background: var(--_table--row--alternative-color);
-        --_table--move-row-cell-opacity: 1;
+      }
+
+      &:hover,
+      &:focus-within {
+        --_table--row-reveal--opacity: 1;
+      }
+
+      @media (any-hover: none) {
+        --_table--row-reveal--opacity: 1;
       }
 
       &--selected {
@@ -120,11 +140,11 @@
     }
 
     &__td {
-      padding: 0 var(--_table--cell--horizontal-padding);
+      padding: 0;
       border-bottom: 1px solid var(--_table--border-color);
       font-size: var(--_table--cell--font-size);
       color: var(--sc-kit--color--text--primary);
-      vertical-align: middle;
+      vertical-align: var(--_table--cell--vertical-align);
 
       &--centered {
         text-align: center;
@@ -139,6 +159,15 @@
       }
     }
 
+    &__cell {
+      padding: var(--_table--cell--padding-block) var(--_table--cell--padding-inline);
+
+      &--reveal-on-row-hover {
+        opacity: var(--_table--row-reveal--opacity, 0);
+        @include transitions.transition(opacity);
+      }
+    }
+
     &__placeholder {
       display: flex;
       align-items: center;

package/dist/ui/table/cmp.table-draggable.svelte

@@ -3,7 +3,7 @@ import { EmptyState } from '../empty-state';
 import { Icon } from '../icon';
 import { TableCell, TableHideableCell } from './table-cells';
 import { TableLocalization } from './table-localization';
-import { columnWidthStyle, createTableView } from './table-view.svelte';
+import { columnCellStyle, createTableView } from './table-view.svelte';
 import IconReorderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
 import { flip } from 'svelte/animate';
 import { dndzone } from 'svelte-dnd-action';
@@ -44,10 +44,12 @@ const transformDraggedElement = (draggedRow) => {
     }
     // Clone is reparented to <body>, losing the .table-container --_table--* vars; cells collapse without this.
     const cellStyle = window.getComputedStyle(referenceColumns[0]);
+    // Read off the table, not a cell: the drag-handle cell zeroes its own padding and per-column cellPadding overrides live on their td.
+    const tableStyle = window.getComputedStyle(tableRef);
     draggedRow.style.setProperty('--_table--cell--font-size', cellStyle.fontSize);
-    draggedRow.style.setProperty('--_table--cell--horizontal-padding', cellStyle.paddingInlineStart);
-    // Without a value the var resolves to currentColor (dark) on the reparented clone — drop the row border while dragging.
-    draggedRow.style.setProperty('--_table--border-color', 'transparent');
+    draggedRow.style.setProperty('--_table--cell--padding-inline', tableStyle.getPropertyValue('--_table--cell--padding-inline'));
+    draggedRow.style.setProperty('--_table--cell--padding-block', tableStyle.getPropertyValue('--_table--cell--padding-block'));
+    draggedRow.style.setProperty('--_table--cell--vertical-align', cellStyle.verticalAlign);
 };
 </script>
 
@@ -59,9 +61,7 @@ const transformDraggedElement = (draggedRow) => {
   {/if}
 {/snippet}
 
-<div
-  class="table-container table-container--{model.styles?.size ?? 'md'} table-container--{model.styles?.variant ?? 'plain'}"
-  class:table-container--zebra={model.styles?.zebra === true}>
+<div class="table-container table-container--{model.styles?.size ?? 'md'} table-container--{model.styles?.variant ?? 'plain'}">
   {#if alternativeView && showAlternativeView}
     {#if view.showNoItemsPlaceholder}
       <div class="alternative-view__placeholder">{@render noItemsContent()}</div>
@@ -69,13 +69,17 @@ const transformDraggedElement = (draggedRow) => {
       {@render alternativeView()}
     {/if}
   {:else}
-    <table class="table" class:table--sticky-header={model.styles?.stickyHeader === true} bind:this={tableRef}>
+    <table
+      class="table"
+      class:table--sticky-header={model.styles?.stickyHeader === true}
+      class:table--fixed={model.styles?.layout === 'fixed'}
+      bind:this={tableRef}>
       <thead class="table__head">
         <tr>
           <th class="table__th table__drag-handle">&nbsp;</th>
           {#each model.columns as column (column)}
             <TableHideableCell column={column}>
-              <th class="table__th" class:table__th--centered={column.centered} style={columnWidthStyle(column)} title={column.title}>
+              <th class="table__th" class:table__th--centered={column.centered} style={columnCellStyle(column)} title={column.title}>
                 <DynamicComponent model={column.headerView} />
               </th>
             </TableHideableCell>
@@ -117,7 +121,9 @@ const transformDraggedElement = (draggedRow) => {
                 class:table__td--flush={flushBottom}
                 onmousedown={startDrag}
                 ontouchstart={startDrag}>
-                <Icon src={IconReorderDotsHorizontal} />
+                <div class="table__cell">
+                  <Icon src={IconReorderDotsHorizontal} />
+                </div>
               </td>
               {#each model.columns as column (column)}
                 <TableHideableCell column={column}>
@@ -126,9 +132,11 @@ const transformDraggedElement = (draggedRow) => {
                     class:table__td--centered={column.centered}
                     class:table__td--clickable={!!column.onClick}
                     class:table__td--flush={flushBottom}
-                    style={columnWidthStyle(column)}
+                    style={columnCellStyle(column)}
                     onclick={() => column.onClick && column.onClick(item)}>
-                    <TableCell model={model} item={item} column={column} itemIndex={itemIndex} on={{ itemsReordered: on?.itemsReordered }} />
+                    <div class="table__cell" class:table__cell--reveal-on-row-hover={column.revealOnRowHover}>
+                      <TableCell model={model} item={item} column={column} itemIndex={itemIndex} on={{ itemsReordered: on?.itemsReordered }} />
+                    </div>
                   </td>
                 </TableHideableCell>
               {/each}
@@ -154,15 +162,23 @@ preserve the current selection. For non-reorderable tables use `Table` (it ships
 | `zebra` | `boolean` | Alternates row backgrounds with `--sc-kit--color--bg--field-alt` |
 | `stickyHeader` | `boolean` | Sticks `thead` to the scrolling ancestor |
 | `actionsPopoverTopDirection` | `boolean` | Forces the per-row actions popover above instead of below |
+| `layout` | `'auto' \| 'fixed'` | `'fixed'` honours `cssWidth` exactly; percent columns share what fixed ones leave, `minCssWidth` is ignored (default `'auto'`) |
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--table--row--height` | Row height | per size (32 / 50 px) |
-| `--sc-kit--table--cell--horizontal-padding` | Cell horizontal padding | per size (8 / 12 px) |
+| `--sc-kit--table--row--height` | Row height | per size (36 / 44 px) |
+| `--sc-kit--table--cell--padding-inline` | Cell inline padding | per size (`--space--3` / `--space--4`) |
 | `--sc-kit--table--cell--font-size` | Cell font size | per size (`--font-size--sm` / `--md`) |
+| `--sc-kit--table--cell--padding-block` | Cell block padding | `0` |
+| `--sc-kit--table--cell--vertical-align` | Cell content alignment — `top` keeps inputs aligned when one cell grows | `middle` |
+| `--sc-kit--table--head--height` | Header row height | per size (32 / 40 px) |
 | `--sc-kit--table--head--background-color` | Header background | `--sc-kit--color--bg--field-alt` |
 | `--sc-kit--table--head--color` | Header text color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--table--head--font-size` | Header font size | `--sc-kit--font-size--sm` |
+| `--sc-kit--table--head--font-weight` | Header font weight | `--sc-kit--font-weight--semibold` |
+| `--sc-kit--table--head--letter-spacing` | Header letter spacing | `normal` |
+| `--sc-kit--table--head--text-transform` | Header text transform | `none` |
 | `--sc-kit--table--border-color` | Border color between rows | `--sc-kit--color--border` |
 | `--sc-kit--table--row--color` | Row background | `transparent` |
 | `--sc-kit--table--row--alternative-color` | Hover / highlighted row background | `--sc-kit--color--bg--hover` |
@@ -185,10 +201,15 @@ preserve the current selection. For non-reorderable tables use `Table` (it ships
 .table-container {
   --_table--row--height: var(--sc-kit--table--row--height, var(--_table--size-row-height));
   --_table--cell--font-size: var(--sc-kit--table--cell--font-size, var(--_table--size-cell-font-size));
-  --_table--cell--horizontal-padding: var(--sc-kit--table--cell--horizontal-padding, var(--_table--size-cell-padding));
+  --_table--cell--padding-inline: var(--sc-kit--table--cell--padding-inline, var(--_table--size-cell-padding));
+  --_table--cell--padding-block: var(--sc-kit--table--cell--padding-block, 0);
+  --_table--cell--vertical-align: var(--sc-kit--table--cell--vertical-align, middle);
   --_table--head--height: var(--sc-kit--table--head--height, var(--_table--size-head-height, var(--_table--row--height)));
   --_table--head--background-color: var(--sc-kit--table--head--background-color, var(--sc-kit--color--bg--field-alt));
   --_table--head--color: var(--sc-kit--table--head--color, var(--sc-kit--color--text--secondary));
+  --_table--head--font-weight: var(--sc-kit--table--head--font-weight, var(--sc-kit--font-weight--semibold));
+  --_table--head--letter-spacing: var(--sc-kit--table--head--letter-spacing, normal);
+  --_table--head--text-transform: var(--sc-kit--table--head--text-transform, none);
   --_table--border-color: var(--sc-kit--table--border-color, var(--sc-kit--color--border));
   --_table--row--color: var(--sc-kit--table--row--color, transparent);
   --_table--row--alternative-color: var(--sc-kit--table--row--alternative-color, var(--sc-kit--color--bg--hover));
@@ -249,16 +270,21 @@ preserve the current selection. For non-reorderable tables use `Table` (it ships
   border-collapse: separate;
   border-spacing: 0;
 }
+.table--fixed {
+  table-layout: fixed;
+}
 .table__head {
   height: var(--_table--head--height);
   max-height: var(--_table--head--height);
   background: var(--_table--head--background-color);
   color: var(--_table--head--color);
   font-size: var(--sc-kit--table--head--font-size, var(--sc-kit--font-size--sm));
-  font-weight: var(--sc-kit--font-weight--semibold);
+  letter-spacing: var(--_table--head--letter-spacing);
+  text-transform: var(--_table--head--text-transform);
 }
 .table__th {
-  padding: 0 var(--_table--cell--horizontal-padding);
+  padding: 0 var(--_table--cell--padding-inline);
+  font-weight: var(--_table--head--font-weight);
   text-align: left;
   vertical-align: middle;
   border-bottom: 1px solid var(--_table--border-color);
@@ -269,8 +295,7 @@ preserve the current selection. For non-reorderable tables use `Table` (it ships
   user-select: text;
 }
 .table__th--centered {
-  text-align: center;
-  --_table-header--justify-content: center;
+  --_--table-header--justify-content: center;
 }
 .table__tr {
   height: var(--_table--row--height);
@@ -282,7 +307,14 @@ preserve the current selection. For non-reorderable tables use `Table` (it ships
 }
 .table__tr:hover, .table__tr--highlighted {
   background: var(--_table--row--alternative-color);
-  --_table--move-row-cell-opacity: 1;
+}
+.table__tr:hover, .table__tr:focus-within {
+  --_table--row-reveal--opacity: 1;
+}
+@media (any-hover: none) {
+  .table__tr {
+    --_table--row-reveal--opacity: 1;
+  }
 }
 .table__tr--selected {
   background: var(--_table--selected--color);
@@ -294,11 +326,11 @@ preserve the current selection. For non-reorderable tables use `Table` (it ships
   background: var(--_table--row--color) !important;
 }
 .table__td {
-  padding: 0 var(--_table--cell--horizontal-padding);
+  padding: 0;
   border-bottom: 1px solid var(--_table--border-color);
   font-size: var(--_table--cell--font-size);
   color: var(--sc-kit--color--text--primary);
-  vertical-align: middle;
+  vertical-align: var(--_table--cell--vertical-align);
 }
 .table__td--centered {
   text-align: center;
@@ -309,6 +341,13 @@ preserve the current selection. For non-reorderable tables use `Table` (it ships
 .table__td--flush {
   border-bottom: none;
 }
+.table__cell {
+  padding: var(--_table--cell--padding-block) var(--_table--cell--padding-inline);
+}
+.table__cell--reveal-on-row-hover {
+  opacity: var(--_table--row-reveal--opacity, 0);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
 .table__placeholder {
   display: flex;
   align-items: center;
@@ -323,7 +362,8 @@ preserve the current selection. For non-reorderable tables use `Table` (it ships
 }
 
 .table__drag-handle {
-  width: 2.25rem;
+  --_table--cell--padding-inline: 0;
+  width: 3.25rem;
   cursor: grab;
   text-align: center;
   --sc-kit--icon--size: 1.25rem;

package/dist/ui/table/cmp.table-draggable.svelte.d.ts

@@ -58,15 +58,23 @@ interface $$IsomorphicComponent {
  * | `zebra` | `boolean` | Alternates row backgrounds with `--sc-kit--color--bg--field-alt` |
  * | `stickyHeader` | `boolean` | Sticks `thead` to the scrolling ancestor |
  * | `actionsPopoverTopDirection` | `boolean` | Forces the per-row actions popover above instead of below |
+ * | `layout` | `'auto' \| 'fixed'` | `'fixed'` honours `cssWidth` exactly; percent columns share what fixed ones leave, `minCssWidth` is ignored (default `'auto'`) |
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--table--row--height` | Row height | per size (32 / 50 px) |
- * | `--sc-kit--table--cell--horizontal-padding` | Cell horizontal padding | per size (8 / 12 px) |
+ * | `--sc-kit--table--row--height` | Row height | per size (36 / 44 px) |
+ * | `--sc-kit--table--cell--padding-inline` | Cell inline padding | per size (`--space--3` / `--space--4`) |
  * | `--sc-kit--table--cell--font-size` | Cell font size | per size (`--font-size--sm` / `--md`) |
+ * | `--sc-kit--table--cell--padding-block` | Cell block padding | `0` |
+ * | `--sc-kit--table--cell--vertical-align` | Cell content alignment — `top` keeps inputs aligned when one cell grows | `middle` |
+ * | `--sc-kit--table--head--height` | Header row height | per size (32 / 40 px) |
  * | `--sc-kit--table--head--background-color` | Header background | `--sc-kit--color--bg--field-alt` |
  * | `--sc-kit--table--head--color` | Header text color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--table--head--font-size` | Header font size | `--sc-kit--font-size--sm` |
+ * | `--sc-kit--table--head--font-weight` | Header font weight | `--sc-kit--font-weight--semibold` |
+ * | `--sc-kit--table--head--letter-spacing` | Header letter spacing | `normal` |
+ * | `--sc-kit--table--head--text-transform` | Header text transform | `none` |
  * | `--sc-kit--table--border-color` | Border color between rows | `--sc-kit--color--border` |
  * | `--sc-kit--table--row--color` | Row background | `transparent` |
  * | `--sc-kit--table--row--alternative-color` | Hover / highlighted row background | `--sc-kit--color--bg--hover` |

package/dist/ui/table/cmp.table.svelte

@@ -2,7 +2,7 @@
 import { EmptyState } from '../empty-state';
 import { TableCell, TableHideableCell } from './table-cells';
 import { TableLocalization } from './table-localization';
-import { columnWidthStyle, createTableView } from './table-view.svelte';
+import { columnCellStyle, createTableView } from './table-view.svelte';
 let { model, showAlternativeView = false, noItemsPlaceholderEnabled, noItemsPlaceholderDelay, grouping, on, alternativeView, customNoItemsPlaceholder } = $props();
 const localization = new TableLocalization();
 const view = createTableView(() => model, () => on, () => noItemsPlaceholderEnabled, () => noItemsPlaceholderDelay);
@@ -45,9 +45,7 @@ const visibleColspan = $derived(model.columns.filter((column) => !column.hidden)
   {/if}
 {/snippet}
 
-<div
-  class="table-container table-container--{model.styles?.size ?? 'md'} table-container--{model.styles?.variant ?? 'plain'}"
-  class:table-container--zebra={model.styles?.zebra === true}>
+<div class="table-container table-container--{model.styles?.size ?? 'md'} table-container--{model.styles?.variant ?? 'plain'}">
   {#if alternativeView && showAlternativeView}
     {#if view.showNoItemsPlaceholder}
       <div class="alternative-view__placeholder">{@render noItemsContent()}</div>
@@ -55,12 +53,12 @@ const visibleColspan = $derived(model.columns.filter((column) => !column.hidden)
       {@render alternativeView()}
     {/if}
   {:else}
-    <table class="table" class:table--sticky-header={model.styles?.stickyHeader === true}>
+    <table class="table" class:table--sticky-header={model.styles?.stickyHeader === true} class:table--fixed={model.styles?.layout === 'fixed'}>
       <thead class="table__head">
         <tr>
           {#each model.columns as column (column)}
             <TableHideableCell column={column}>
-              <th class="table__th" class:table__th--centered={column.centered} style={columnWidthStyle(column)} title={column.title}>
+              <th class="table__th" class:table__th--centered={column.centered} style={columnCellStyle(column)} title={column.title}>
                 <DynamicComponent model={column.headerView} />
               </th>
             </TableHideableCell>
@@ -106,9 +104,11 @@ const visibleColspan = $derived(model.columns.filter((column) => !column.hidden)
                       class:table__td--centered={column.centered}
                       class:table__td--clickable={!!column.onClick}
                       class:table__td--flush={flushBottom}
-                      style={columnWidthStyle(column)}
+                      style={columnCellStyle(column)}
                       onclick={() => column.onClick && column.onClick(item)}>
-                      <TableCell model={model} item={item} column={column} itemIndex={itemIndex} on={{ itemsReordered: on?.itemsReordered }} />
+                      <div class="table__cell" class:table__cell--reveal-on-row-hover={column.revealOnRowHover}>
+                        <TableCell model={model} item={item} column={column} itemIndex={itemIndex} on={{ itemsReordered: on?.itemsReordered }} />
+                      </div>
                     </td>
                   </TableHideableCell>
                 {/each}
@@ -135,15 +135,23 @@ variant ships no dnd code).
 | `zebra` | `boolean` | Alternates row backgrounds with `--sc-kit--color--bg--field-alt` |
 | `stickyHeader` | `boolean` | Sticks `thead` to the scrolling ancestor |
 | `actionsPopoverTopDirection` | `boolean` | Forces the per-row actions popover above instead of below |
+| `layout` | `'auto' \| 'fixed'` | `'fixed'` honours `cssWidth` exactly; percent columns share what fixed ones leave, `minCssWidth` is ignored (default `'auto'`) |
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--table--row--height` | Row height | per size (32 / 50 px) |
-| `--sc-kit--table--cell--horizontal-padding` | Cell horizontal padding | per size (8 / 12 px) |
+| `--sc-kit--table--row--height` | Row height | per size (36 / 44 px) |
+| `--sc-kit--table--cell--padding-inline` | Cell inline padding | per size (`--space--3` / `--space--4`) |
 | `--sc-kit--table--cell--font-size` | Cell font size | per size (`--font-size--sm` / `--md`) |
+| `--sc-kit--table--cell--padding-block` | Cell block padding | `0` |
+| `--sc-kit--table--cell--vertical-align` | Cell content alignment — `top` keeps inputs aligned when one cell grows | `middle` |
+| `--sc-kit--table--head--height` | Header row height | per size (32 / 40 px) |
 | `--sc-kit--table--head--background-color` | Header background | `--sc-kit--color--bg--field-alt` |
 | `--sc-kit--table--head--color` | Header text color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--table--head--font-size` | Header font size | `--sc-kit--font-size--sm` |
+| `--sc-kit--table--head--font-weight` | Header font weight | `--sc-kit--font-weight--semibold` |
+| `--sc-kit--table--head--letter-spacing` | Header letter spacing | `normal` |
+| `--sc-kit--table--head--text-transform` | Header text transform | `none` |
 | `--sc-kit--table--border-color` | Border color between rows | `--sc-kit--color--border` |
 | `--sc-kit--table--row--color` | Row background | `transparent` |
 | `--sc-kit--table--row--alternative-color` | Hover / highlighted row background | `--sc-kit--color--bg--hover` |
@@ -166,10 +174,15 @@ variant ships no dnd code).
 .table-container {
   --_table--row--height: var(--sc-kit--table--row--height, var(--_table--size-row-height));
   --_table--cell--font-size: var(--sc-kit--table--cell--font-size, var(--_table--size-cell-font-size));
-  --_table--cell--horizontal-padding: var(--sc-kit--table--cell--horizontal-padding, var(--_table--size-cell-padding));
+  --_table--cell--padding-inline: var(--sc-kit--table--cell--padding-inline, var(--_table--size-cell-padding));
+  --_table--cell--padding-block: var(--sc-kit--table--cell--padding-block, 0);
+  --_table--cell--vertical-align: var(--sc-kit--table--cell--vertical-align, middle);
   --_table--head--height: var(--sc-kit--table--head--height, var(--_table--size-head-height, var(--_table--row--height)));
   --_table--head--background-color: var(--sc-kit--table--head--background-color, var(--sc-kit--color--bg--field-alt));
   --_table--head--color: var(--sc-kit--table--head--color, var(--sc-kit--color--text--secondary));
+  --_table--head--font-weight: var(--sc-kit--table--head--font-weight, var(--sc-kit--font-weight--semibold));
+  --_table--head--letter-spacing: var(--sc-kit--table--head--letter-spacing, normal);
+  --_table--head--text-transform: var(--sc-kit--table--head--text-transform, none);
   --_table--border-color: var(--sc-kit--table--border-color, var(--sc-kit--color--border));
   --_table--row--color: var(--sc-kit--table--row--color, transparent);
   --_table--row--alternative-color: var(--sc-kit--table--row--alternative-color, var(--sc-kit--color--bg--hover));
@@ -230,16 +243,21 @@ variant ships no dnd code).
   border-collapse: separate;
   border-spacing: 0;
 }
+.table--fixed {
+  table-layout: fixed;
+}
 .table__head {
   height: var(--_table--head--height);
   max-height: var(--_table--head--height);
   background: var(--_table--head--background-color);
   color: var(--_table--head--color);
   font-size: var(--sc-kit--table--head--font-size, var(--sc-kit--font-size--sm));
-  font-weight: var(--sc-kit--font-weight--semibold);
+  letter-spacing: var(--_table--head--letter-spacing);
+  text-transform: var(--_table--head--text-transform);
 }
 .table__th {
-  padding: 0 var(--_table--cell--horizontal-padding);
+  padding: 0 var(--_table--cell--padding-inline);
+  font-weight: var(--_table--head--font-weight);
   text-align: left;
   vertical-align: middle;
   border-bottom: 1px solid var(--_table--border-color);
@@ -250,8 +268,7 @@ variant ships no dnd code).
   user-select: text;
 }
 .table__th--centered {
-  text-align: center;
-  --_table-header--justify-content: center;
+  --_--table-header--justify-content: center;
 }
 .table__tr {
   height: var(--_table--row--height);
@@ -263,7 +280,14 @@ variant ships no dnd code).
 }
 .table__tr:hover, .table__tr--highlighted {
   background: var(--_table--row--alternative-color);
-  --_table--move-row-cell-opacity: 1;
+}
+.table__tr:hover, .table__tr:focus-within {
+  --_table--row-reveal--opacity: 1;
+}
+@media (any-hover: none) {
+  .table__tr {
+    --_table--row-reveal--opacity: 1;
+  }
 }
 .table__tr--selected {
   background: var(--_table--selected--color);
@@ -275,11 +299,11 @@ variant ships no dnd code).
   background: var(--_table--row--color) !important;
 }
 .table__td {
-  padding: 0 var(--_table--cell--horizontal-padding);
+  padding: 0;
   border-bottom: 1px solid var(--_table--border-color);
   font-size: var(--_table--cell--font-size);
   color: var(--sc-kit--color--text--primary);
-  vertical-align: middle;
+  vertical-align: var(--_table--cell--vertical-align);
 }
 .table__td--centered {
   text-align: center;
@@ -290,6 +314,13 @@ variant ships no dnd code).
 .table__td--flush {
   border-bottom: none;
 }
+.table__cell {
+  padding: var(--_table--cell--padding-block) var(--_table--cell--padding-inline);
+}
+.table__cell--reveal-on-row-hover {
+  opacity: var(--_table--row-reveal--opacity, 0);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
 .table__placeholder {
   display: flex;
   align-items: center;
@@ -305,7 +336,7 @@ variant ships no dnd code).
 
 .table__group-header {
   padding-block: var(--sc-kit--space--6) var(--sc-kit--space--2);
-  padding-inline: var(--_table--cell--horizontal-padding);
+  padding-inline: var(--_table--cell--padding-inline);
   font-size: var(--sc-kit--font-size--sm);
   font-weight: var(--sc-kit--font-weight--semibold);
   color: var(--sc-kit--color--text--secondary);

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

@@ -70,15 +70,23 @@ interface $$IsomorphicComponent {
  * | `zebra` | `boolean` | Alternates row backgrounds with `--sc-kit--color--bg--field-alt` |
  * | `stickyHeader` | `boolean` | Sticks `thead` to the scrolling ancestor |
  * | `actionsPopoverTopDirection` | `boolean` | Forces the per-row actions popover above instead of below |
+ * | `layout` | `'auto' \| 'fixed'` | `'fixed'` honours `cssWidth` exactly; percent columns share what fixed ones leave, `minCssWidth` is ignored (default `'auto'`) |
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--table--row--height` | Row height | per size (32 / 50 px) |
- * | `--sc-kit--table--cell--horizontal-padding` | Cell horizontal padding | per size (8 / 12 px) |
+ * | `--sc-kit--table--row--height` | Row height | per size (36 / 44 px) |
+ * | `--sc-kit--table--cell--padding-inline` | Cell inline padding | per size (`--space--3` / `--space--4`) |
  * | `--sc-kit--table--cell--font-size` | Cell font size | per size (`--font-size--sm` / `--md`) |
+ * | `--sc-kit--table--cell--padding-block` | Cell block padding | `0` |
+ * | `--sc-kit--table--cell--vertical-align` | Cell content alignment — `top` keeps inputs aligned when one cell grows | `middle` |
+ * | `--sc-kit--table--head--height` | Header row height | per size (32 / 40 px) |
  * | `--sc-kit--table--head--background-color` | Header background | `--sc-kit--color--bg--field-alt` |
  * | `--sc-kit--table--head--color` | Header text color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--table--head--font-size` | Header font size | `--sc-kit--font-size--sm` |
+ * | `--sc-kit--table--head--font-weight` | Header font weight | `--sc-kit--font-weight--semibold` |
+ * | `--sc-kit--table--head--letter-spacing` | Header letter spacing | `normal` |
+ * | `--sc-kit--table--head--text-transform` | Header text transform | `none` |
  * | `--sc-kit--table--border-color` | Border color between rows | `--sc-kit--color--border` |
  * | `--sc-kit--table--row--color` | Row background | `transparent` |
  * | `--sc-kit--table--row--alternative-color` | Hover / highlighted row background | `--sc-kit--color--bg--hover` |

package/dist/ui/table/table-cells/table-checkbox-cell.svelte

@@ -20,5 +20,4 @@ const toggle = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: var(--_table--cell--font-size);
 }</style>

package/dist/ui/table/table-cells/table-move-row-cell.svelte

@@ -21,8 +21,6 @@ const onDown = () => on?.down?.();
   gap: 0.125rem;
   justify-content: space-evenly;
   --sc-kit--icon--size: 1rem;
-  opacity: var(--_table--move-row-cell-opacity, 0);
-  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .move-row-cell button:disabled {
   --sc-kit--icon--color: var(--sc-kit--color--text--muted);

package/dist/ui/table/table-cells/table-text-cell.svelte

@@ -44,7 +44,6 @@ Text cell for table rows. Supports plain text, date, date-time, and HTML formats
   --_table-text-cell--clickable--color: var(--sc-kit--table-text-cell--clickable--color, var(--sc-kit--color--accent));
   display: flex;
   align-content: center;
-  font-size: var(--_table--cell--font-size);
 }
 .table-text-cell__single-line-no-trim {
   white-space: nowrap;

package/dist/ui/table/table-column-models.svelte.d.ts

@@ -24,6 +24,11 @@ export declare class ResolvedColumn<T extends WithId> {
     get id(): keyof T;
     get title(): string;
     get centered(): boolean;
+    get revealOnRowHover(): boolean;
+    get cellPadding(): {
+        inline?: string;
+        block?: string;
+    };
     get cssWidth(): string;
     get minCssWidth(): string;
     get hideable(): boolean;

package/dist/ui/table/table-column-models.svelte.js

@@ -31,6 +31,12 @@ export class ResolvedColumn {
     get centered() {
         return this.def.centered ?? false;
     }
+    get revealOnRowHover() {
+        return this.def.revealOnRowHover ?? this.def.type === 'move-row';
+    }
+    get cellPadding() {
+        return this.def.cellPadding ?? {};
+    }
     get cssWidth() {
         return this.def.cssWidth ?? '';
     }

package/dist/ui/table/table-headers/table-header-sortable.svelte

@@ -18,7 +18,7 @@ const changeSort = (direction) => {
 </script>
 
 <TableHeader column={column}>
-  <div class="th-sortable" class:th-sortable--centered={column.centered}>
+  <div class="th-sortable">
     {@render children?.()}
     <span>&nbsp;</span>
     <Popover position="bottom-start">
@@ -72,9 +72,6 @@ const changeSort = (direction) => {
   align-items: center;
   justify-content: flex-start;
 }
-.th-sortable--centered {
-  justify-content: center;
-}
 .th-sortable__title, .th-sortable__marker {
   color: inherit;
   display: inline-block;

package/dist/ui/table/table-headers/table-header.svelte

@@ -13,6 +13,6 @@ export {};
 <style>.table-header {
   display: flex;
   align-items: center;
-  justify-content: var(--_table-header--justify-content, flex-start);
+  justify-content: var(--_--table-header--justify-content, flex-start);
   white-space: nowrap;
 }</style>

package/dist/ui/table/table-view.svelte.d.ts

@@ -6,8 +6,8 @@ type SelectionCallbacks<T> = {
     itemsSelected?: (e: T[]) => void;
     itemsDeselected?: (e: T[]) => void;
 };
-/** Inline width declarations for a column's `th` / `td`: the preferred width plus, when set, the floor the browser must honour. */
-export declare const columnWidthStyle: <T extends WithId>(column: ResolvedColumn<T>) => string;
+/** Inline declarations for a column's `th` / `td`: the preferred width, the floor the browser must honour, and the per-column padding override. */
+export declare const columnCellStyle: <T extends WithId>(column: ResolvedColumn<T>) => string;
 /** Shared presentation wiring for the table views: selection-event subscriptions + the no-items placeholder decision (on/off gate + anti-flicker delay). */
 export declare const createTableView: <T extends WithId>(model: () => TableModel<T>, on: () => SelectionCallbacks<T> | undefined, noItemsPlaceholderEnabled?: () => boolean | undefined, noItemsPlaceholderDelay?: () => number | undefined) => {
     readonly showNoItemsPlaceholder: boolean;

package/dist/ui/table/table-view.svelte.js

@@ -1,8 +1,15 @@
 import { untrack } from 'svelte';
-/** Inline width declarations for a column's `th` / `td`: the preferred width plus, when set, the floor the browser must honour. */
-export const columnWidthStyle = (column) => {
-    const width = column.cssWidth ? `width: ${column.cssWidth};` : 'width: auto;';
-    return column.minCssWidth ? `${width} min-width: ${column.minCssWidth};` : width;
+/** Inline declarations for a column's `th` / `td`: the preferred width, the floor the browser must honour, and the per-column padding override. */
+export const columnCellStyle = (column) => {
+    const { inline, block } = column.cellPadding;
+    return [
+        column.cssWidth ? `width: ${column.cssWidth};` : 'width: auto;',
+        column.minCssWidth ? `min-width: ${column.minCssWidth};` : '',
+        inline ? `--_table--cell--padding-inline: ${inline};` : '',
+        block ? `--_table--cell--padding-block: ${block};` : ''
+    ]
+        .filter(Boolean)
+        .join(' ');
 };
 /** Shared presentation wiring for the table views: selection-event subscriptions + the no-items placeholder decision (on/off gate + anti-flicker delay). */
 export const createTableView = (model, on, noItemsPlaceholderEnabled = () => undefined, noItemsPlaceholderDelay = () => undefined) => {

package/dist/ui/table/types.d.ts

@@ -19,6 +19,16 @@ interface ITableColumnBase {
     /** Floor the column will not shrink below, taken out of columns whose `cssWidth` is merely a suggestion. Use it on the column that must keep space. */
     minCssWidth?: string;
     centered?: boolean;
+    /** Hide the cell until its row is hovered or holds focus. Always visible on touch-only devices. @default true for `move-row`, false otherwise */
+    revealOnRowHover?: boolean;
+    /**
+     * Overrides the table-wide cell padding for this column. `inline` applies to the header and body cells, `block` to body cells. Under the kit's
+     * border-box sizing `cssWidth` includes this padding.
+     */
+    cellPadding?: {
+        inline?: string;
+        block?: string;
+    };
 }
 export interface ITableColumn<T> extends ITableColumnBase {
     id: keyof T;
@@ -122,6 +132,13 @@ export type TableStyles = {
     zebra?: boolean;
     /** Visual chrome around the table. `'plain'` blends with surrounding layout; `'card'` adds a bordered, rounded panel. @default 'plain' */
     variant?: 'plain' | 'card';
+    /**
+     * Column width algorithm. `'auto'` treats `cssWidth` as a hint and lets content redistribute space. `'fixed'` honours `cssWidth` exactly and wraps or
+     * clips content instead of widening the column. Under `'fixed'`, percent columns summing to 100% share what the fixed columns leave in that ratio;
+     * `minCssWidth` does not apply — floor the whole table with a `min-width` wrapper inside a horizontally scrolling container instead.
+     * @default 'auto'
+     */
+    layout?: 'auto' | 'fixed';
 };
 export type TableOrderByState<TOrder> = {
     orderBy: TOrder;

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

@@ -3,7 +3,7 @@
 
 <script lang="ts" generics="T extends Record<string, unknown>, K extends keyof T & string">import { Utils } from '../../core/utils';
 import { default as FieldFrame } from './field-frame.svelte';
-let { handler, name, validateOn = ['input', 'change', 'blur'], debounceMs = 0, disableTouchedTracking = false, reserveErrorSpace = false, on, children } = $props();
+let { handler, name, validateOn = ['input', 'change', 'blur'], debounceMs = 0, disableTouchedTracking = false, errorPlacement = 'overlay', 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.
@@ -64,7 +64,7 @@ const field = $derived({
 });
 </script>
 
-<FieldFrame error={showErrors ? handler.errors[name] : null} reserveErrorSpace={reserveErrorSpace}>
+<FieldFrame error={showErrors ? handler.errors[name] : null} errorPlacement={errorPlacement}>
   {@render children(field, pendingValidation)}
 </FieldFrame>
 
@@ -72,8 +72,7 @@ const field = $derived({
 @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 `FieldFrame` that reserves space for the error message so toggling doesn't shift
-layout; `reserveErrorSpace={false}` drops the reserve — the message overlays content below.
+internal `FieldFrame` that renders the error message below the field, placed per `errorPlacement`.
 
 ### Usage
 ```svelte

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

@@ -10,6 +10,7 @@ export type FieldBinding<V> = {
     };
 };
 import type { FormValidationHandler } from '../../core/validation';
+import type { ErrorPlacement } from './types';
 import type { Snippet } from 'svelte';
 declare function $$render<T extends Record<string, unknown>, K extends keyof T & string>(): {
     props: {
@@ -31,11 +32,11 @@ declare function $$render<T extends Record<string, unknown>, K extends keyof T &
         /** Show errors even when the field has not been touched. @default false */
         disableTouchedTracking?: boolean;
         /**
-         * 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 false
+         * Where the error message sits: `'overlay'` covers whatever is below the field, `'reserved'` keeps a
+         * permanent strip so toggling never shifts layout, `'inline'` grows the field only while an error is shown.
+         * @default 'overlay'
          */
-        reserveErrorSpace?: boolean;
+        errorPlacement?: ErrorPlacement;
         /**
          * Extra consumer callbacks. Run AFTER the validation wiring; they cannot override it.
          * The `children` snippet always receives fully-wired `field.on.*`.
@@ -73,8 +74,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 `FieldFrame` that reserves space for the error message so toggling doesn't shift
- * layout; `reserveErrorSpace={false}` drops the reserve — the message overlays content below.
+ * internal `FieldFrame` that renders the error message below the field, placed per `errorPlacement`.
  *
  * ### Usage
  * ```svelte

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

@@ -1,9 +1,9 @@
 <script lang="ts" generics="T extends Record<string, unknown>">import { default as FieldFrame } from './field-frame.svelte';
-let { name, validationResult, reserveErrorSpace = false, children } = $props();
+let { name, validationResult, errorPlacement = 'overlay', children } = $props();
 const errorText = $derived(validationResult?.errors[name] ?? null);
 </script>
 
-<FieldFrame error={errorText} reserveErrorSpace={reserveErrorSpace}>
+<FieldFrame error={errorText} errorPlacement={errorPlacement}>
   {@render children()}
 </FieldFrame>
 
@@ -11,6 +11,6 @@ const errorText = $derived(validationResult?.errors[name] ?? null);
 @component
 Wraps a form field and displays validation errors from a `FormValidateResult` object. Stateless
 sibling of `Validatable` for cases where the consumer already has the validation result in hand
-(e.g. server-validated forms) and does not need a `FormValidationHandler`. Pass
-`reserveErrorSpace={false}` to overlay the message instead of reserving layout space.
+(e.g. server-validated forms) and does not need a `FormValidationHandler`. `errorPlacement` picks
+where the message sits — same contract as `Validatable`.
 -->

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

@@ -1,4 +1,5 @@
 import type { FormValidateResult } from '../../core/validation';
+import type { ErrorPlacement } from './types';
 import type { Snippet } from 'svelte';
 declare function $$render<T extends Record<string, unknown>>(): {
     props: {
@@ -7,11 +8,11 @@ declare function $$render<T extends Record<string, unknown>>(): {
         /** Validation result object containing error messages */
         validationResult?: FormValidateResult<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 false
+         * Where the error message sits: `'overlay'` covers whatever is below the field, `'reserved'` keeps a
+         * permanent strip so toggling never shifts layout, `'inline'` grows the field only while an error is shown.
+         * @default 'overlay'
          */
-        reserveErrorSpace?: boolean;
+        errorPlacement?: ErrorPlacement;
         children: Snippet;
     };
     exports: {};
@@ -36,8 +37,8 @@ interface $$IsomorphicComponent {
 /**
  * Wraps a form field and displays validation errors from a `FormValidateResult` object. Stateless
  * sibling of `Validatable` for cases where the consumer already has the validation result in hand
- * (e.g. server-validated forms) and does not need a `FormValidationHandler`. Pass
- * `reserveErrorSpace={false}` to overlay the message instead of reserving layout space.
+ * (e.g. server-validated forms) and does not need a `FormValidationHandler`. `errorPlacement` picks
+ * where the message sits — same contract as `Validatable`.
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends Record<string, unknown>> = InstanceType<typeof Cmp<T>>;

package/dist/ui/validatable/field-frame.svelte

@@ -1,40 +1,50 @@
-<script lang="ts">let { error, reserveErrorSpace = false, children } = $props();
+<script lang="ts">let { error, errorPlacement = 'overlay', children } = $props();
 export {};
 </script>
 
-<div class="field-frame" class:field-frame--errored={!!error} class:field-frame--no-reserve={!reserveErrorSpace}>
+<div class="field-frame" class:field-frame--reserved={errorPlacement === 'reserved'}>
   {@render children()}
   {#if error}
-    <small class="field-frame__message">{error}</small>
+    <small class="field-frame__message field-frame__message--{errorPlacement}">{error}</small>
   {/if}
 </div>
 
 <!--
 @component
-Internal helper — wraps a form field and renders its error message in an absolutely-positioned slot
-below, with reserved space so the layout doesn't shift when the error toggles. With
-`reserveErrorSpace={false}` the reserve is dropped — the message stays absolutely positioned and
-overlays whatever sits below the field. Used internally by `Validatable` / `ValidationError` (and
-any other field-shaped kit consumer that needs the same visual contract).
+Internal helper — wraps a form field and renders its error message below it, placed per `errorPlacement`: overlaying
+the content below, inside a permanently reserved strip, or in normal flow so the field grows only while the error is
+shown. Used internally by `Validatable` / `ValidationError` (and any other field-shaped kit consumer that needs the
+same visual contract).
 
 Not exported from `index.ts` — for kit-internal use only.
 -->
 
 <style>.field-frame {
   position: relative;
-  margin-bottom: 1.1em;
   display: block;
 }
-.field-frame--no-reserve {
-  margin-bottom: 0;
+.field-frame--reserved {
+  padding-block-end: 1.1rem;
 }
 .field-frame__message {
-  position: absolute;
-  top: calc(100% + 0.1em);
-  left: 0;
-  right: 0;
   display: block;
   color: var(--sc-kit--color--danger);
   font-size: 0.6875rem;
+  line-height: 1.5;
   font-weight: 400;
+}
+.field-frame__message--overlay {
+  position: absolute;
+  top: calc(100% + 0.0688rem);
+  left: 0;
+  right: 0;
+}
+.field-frame__message--reserved {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.field-frame__message--inline {
+  margin-top: 0.0688rem;
 }</style>

package/dist/ui/validatable/field-frame.svelte.d.ts

@@ -1,17 +1,17 @@
+import type { ErrorPlacement } from './types';
 import type { Snippet } from 'svelte';
 type Props = {
-    /** Error message to display below the field. Falsy hides the message and the `--errored` flag. */
+    /** Error message to display below the field. Falsy hides the message. */
     error?: string | null | undefined;
-    /** Reserve space below the field for the error message. Off drops the reserve — the message overlays content below. @default false */
-    reserveErrorSpace?: boolean;
+    /** Where the error message sits relative to the field. @default 'overlay' */
+    errorPlacement?: ErrorPlacement;
     children: Snippet;
 };
 /**
- * Internal helper — wraps a form field and renders its error message in an absolutely-positioned slot
- * below, with reserved space so the layout doesn't shift when the error toggles. With
- * `reserveErrorSpace={false}` the reserve is dropped — the message stays absolutely positioned and
- * overlays whatever sits below the field. Used internally by `Validatable` / `ValidationError` (and
- * any other field-shaped kit consumer that needs the same visual contract).
+ * Internal helper — wraps a form field and renders its error message below it, placed per `errorPlacement`: overlaying
+ * the content below, inside a permanently reserved strip, or in normal flow so the field grows only while the error is
+ * shown. Used internally by `Validatable` / `ValidationError` (and any other field-shaped kit consumer that needs the
+ * same visual contract).
  *
  * Not exported from `index.ts` — for kit-internal use only.
  */

package/dist/ui/validatable/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Validatable } from './cmp.validatable.svelte';
 export type { FieldBinding, ValidateOnEvent } from './cmp.validatable.svelte';
 export { default as ValidationError } from './cmp.validation-error.svelte';
+export type { ErrorPlacement } from './types';

package/dist/ui/validatable/types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Where a field's validation message sits.
+ * - `'overlay'` — absolutely positioned below the field; no space reserved, the message covers whatever sits below.
+ * - `'reserved'` — absolutely positioned inside a permanently reserved strip, so toggling the error never shifts layout.
+ * - `'inline'` — in normal flow, only while an error is shown: the field grows on error and shrinks back when it clears.
+ */
+export type ErrorPlacement = 'overlay' | 'reserved' | 'inline';

package/dist/ui/validatable/types.js

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

package/package.json

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