@streamscloud/kit 0.9.6 → 0.9.8

package/dist/ui/card/cmp.card.svelte

@@ -37,8 +37,11 @@ whole card becomes a clickable target with hover and focus state, no `interactiv
 | `--sc-kit--card--color` | Body text color | `var(--sc-kit--color--text--primary)` |
 | `--sc-kit--card--header--background` | Header bar background | `transparent` |
 | `--sc-kit--card--header--border-color` | Header bottom divider | `var(--sc-kit--color--border)` |
+| `--sc-kit--card--header--padding` | Header padding (full shorthand) | block `var(--sc-kit--space--3)`, inline follows the `padding` preset |
+| `--sc-kit--card--body--padding` | Body padding (full shorthand) | the `padding` preset value |
 | `--sc-kit--card--footer--background` | Footer bar background | `var(--sc-kit--color--bg--element)` |
 | `--sc-kit--card--footer--border-color` | Footer top divider | `var(--sc-kit--color--border)` |
+| `--sc-kit--card--footer--padding` | Footer padding (full shorthand) | block `var(--sc-kit--space--3)`, inline follows the `padding` preset |
 -->
 
 <style>.card {
@@ -53,6 +56,9 @@ whole card becomes a clickable target with hover and focus state, no `interactiv
   --_card--header-border-color: var(--sc-kit--card--header--border-color, var(--sc-kit--color--border));
   --_card--footer-background: var(--sc-kit--card--footer--background, var(--sc-kit--color--bg--element));
   --_card--footer-border-color: var(--sc-kit--card--footer--border-color, var(--sc-kit--color--border));
+  --_card--header-padding: var(--sc-kit--card--header--padding, var(--sc-kit--space--3) var(--_card--chrome-padding-inline));
+  --_card--body-padding: var(--sc-kit--card--body--padding, var(--_card--body-padding-default));
+  --_card--footer-padding: var(--sc-kit--card--footer--padding, var(--sc-kit--space--3) var(--_card--chrome-padding-inline));
   display: block;
   width: 100%;
   box-sizing: border-box;
@@ -66,25 +72,32 @@ whole card becomes a clickable target with hover and focus state, no `interactiv
 .card--raised {
   box-shadow: var(--_card--shadow);
 }
-.card--pad-none .card__body {
-  padding: 0;
+.card--pad-none {
+  --_card--body-padding-default: 0;
+  --_card--chrome-padding-inline: var(--sc-kit--space--5);
 }
-.card--pad-sm .card__body {
-  padding: var(--sc-kit--space--3);
+.card--pad-sm {
+  --_card--body-padding-default: var(--sc-kit--space--3);
+  --_card--chrome-padding-inline: var(--sc-kit--space--3);
 }
-.card--pad-md .card__body {
-  padding: var(--sc-kit--space--5);
+.card--pad-md {
+  --_card--body-padding-default: var(--sc-kit--space--5);
+  --_card--chrome-padding-inline: var(--sc-kit--space--5);
 }
-.card--pad-lg .card__body {
-  padding: var(--sc-kit--space--6);
+.card--pad-lg {
+  --_card--body-padding-default: var(--sc-kit--space--6);
+  --_card--chrome-padding-inline: var(--sc-kit--space--6);
+}
+.card__body {
+  padding: var(--_card--body-padding);
 }
 .card__header {
-  padding: var(--sc-kit--space--3) var(--sc-kit--space--5);
+  padding: var(--_card--header-padding);
   background: var(--_card--header-background);
   border-bottom: 1px solid var(--_card--header-border-color);
 }
 .card__footer {
-  padding: var(--sc-kit--space--3) var(--sc-kit--space--5);
+  padding: var(--_card--footer-padding);
   background: var(--_card--footer-background);
   border-top: 1px solid var(--_card--footer-border-color);
 }

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

@@ -4,7 +4,7 @@ type CardPadding = 'none' | 'sm' | 'md' | 'lg';
 type Props = {
     /** Visual elevation. @default 'flat' */
     elevation?: CardElevation;
-    /** Inner body padding preset. Header and footer have their own fixed chrome. @default 'md' */
+    /** Inner body padding preset. Header/footer inline padding follows it; their block padding stays fixed. @default 'md' */
     padding?: CardPadding;
     header?: Snippet;
     footer?: Snippet;
@@ -34,8 +34,11 @@ type Props = {
  * | `--sc-kit--card--color` | Body text color | `var(--sc-kit--color--text--primary)` |
  * | `--sc-kit--card--header--background` | Header bar background | `transparent` |
  * | `--sc-kit--card--header--border-color` | Header bottom divider | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--card--header--padding` | Header padding (full shorthand) | block `var(--sc-kit--space--3)`, inline follows the `padding` preset |
+ * | `--sc-kit--card--body--padding` | Body padding (full shorthand) | the `padding` preset value |
  * | `--sc-kit--card--footer--background` | Footer bar background | `var(--sc-kit--color--bg--element)` |
  * | `--sc-kit--card--footer--border-color` | Footer top divider | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--card--footer--padding` | Footer padding (full shorthand) | block `var(--sc-kit--space--3)`, inline follows the `padding` preset |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -288,7 +288,7 @@ DatePicker — single-day calendar picker built on Floating UI for positioning.
   font-family: inherit;
   font-size: var(--_dp--font-size);
   line-height: var(--sc-kit--leading--tight);
-  box-shadow: inset 0 -0.13em var(--_dp--underline-color);
+  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_dp--underline-color);
   cursor: pointer;
   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);
 }

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, on, children } = $props();
+let { handler, name, label, required = false, validateOn, debounceMs, disableTouchedTracking, reserveErrorSpace, on, children } = $props();
 </script>
 
 <FormField label={label} required={required}>
@@ -10,6 +10,7 @@ let { handler, name, label, required = false, validateOn, debounceMs, disableTou
     validateOn={validateOn}
     debounceMs={debounceMs}
     disableTouchedTracking={disableTouchedTracking}
+    reserveErrorSpace={reserveErrorSpace}
     on={on}
     children={children} />
 </FormField>

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

@@ -17,6 +17,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>`. @default true */
+        reserveErrorSpace?: boolean;
         /** Extra consumer callbacks. Forwarded to `<Validatable>`. */
         on?: {
             input?: (value: T[K]) => void;

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

@@ -216,7 +216,7 @@ or the clear button (see `HandleInput`'s availability pill).
   content: "";
   position: absolute;
   inset: auto 0 0 0;
-  height: 0.13em;
+  height: max(2px, 0.125em);
   background: var(--_in--underline-color);
   pointer-events: none;
   z-index: 1;

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

@@ -245,7 +245,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
   font-size: var(--_ni--font-size);
   line-height: var(--sc-kit--leading--tight);
   cursor: text;
-  box-shadow: inset 0 -0.13em var(--_ni--underline-color);
+  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_ni--underline-color);
   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 {

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

@@ -212,7 +212,7 @@ body, or an external host element addressed by `options.fixedToolbarId`). Impera
   border-radius: var(--_rti--border-radius);
   color: var(--_rti--color);
   cursor: text;
-  box-shadow: inset 0 -0.13em var(--_rti--underline-color);
+  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_rti--underline-color);
   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 {

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

@@ -40,7 +40,8 @@
   font-size: var(--_sel--font-size);
   line-height: var(--sc-kit--leading--tight);
   cursor: pointer;
-  box-shadow: inset 0 -0.13em var(--_sel--underline-color);
+  // prevents hairline anti-aliasing
+  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
   @include transitions.transition(background-color border-color color box-shadow);
 
   &--sm {

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

@@ -213,7 +213,7 @@ background--hover}`.
   font-size: var(--_sel--font-size);
   line-height: var(--sc-kit--leading--tight);
   cursor: pointer;
-  box-shadow: inset 0 -0.13em var(--_sel--underline-color);
+  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
   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 {

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

@@ -428,7 +428,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
   font-size: var(--_sel--font-size);
   line-height: var(--sc-kit--leading--tight);
   cursor: pointer;
-  box-shadow: inset 0 -0.13em var(--_sel--underline-color);
+  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_sel--underline-color);
   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 {

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

@@ -186,7 +186,7 @@ exposed via `bind:this`.
   font-size: var(--_ta--font-size);
   line-height: var(--sc-kit--leading--normal);
   cursor: text;
-  box-shadow: inset 0 -0.13em var(--_ta--underline-color);
+  box-shadow: inset 0 calc(-1 * max(2px, 0.125em)) var(--_ta--underline-color);
   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 {

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

@@ -1,8 +1,8 @@
-<script lang="ts">let { error, children } = $props();
+<script lang="ts">let { error, reserveErrorSpace = true, children } = $props();
 export {};
 </script>
 
-<div class="field-error" class:field-error--errored={!!error}>
+<div class="field-error" class:field-error--errored={!!error} class:field-error--no-reserve={!reserveErrorSpace}>
   {@render children()}
   {#if error}
     <small class="field-error__message">{error}</small>
@@ -12,9 +12,10 @@ export {};
 <!--
 @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. Used internally by
-`Validatable` / `ValidationError` (and any other field-shaped kit consumer that needs the same
-visual contract).
+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).
 
 Not exported from `index.ts` — for kit-internal use only.
 -->
@@ -24,6 +25,9 @@ Not exported from `index.ts` — for kit-internal use only.
   margin-bottom: 1.1em;
   display: block;
 }
+.field-error--no-reserve {
+  margin-bottom: 0;
+}
 .field-error__message {
   position: absolute;
   top: calc(100% + 0.1em);

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

@@ -2,13 +2,16 @@ 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 */
+    reserveErrorSpace?: boolean;
     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. Used internally by
- * `Validatable` / `ValidationError` (and any other field-shaped kit consumer that needs the same
- * visual contract).
+ * 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).
  *
  * Not exported from `index.ts` — for kit-internal use only.
  */

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 FieldError } from './cmp.field-error.svelte';
-let { handler, name, validateOn = ['input', 'change', 'blur'], debounceMs = 0, disableTouchedTracking = false, on, children } = $props();
+let { handler, name, validateOn = ['input', 'change', 'blur'], debounceMs = 0, disableTouchedTracking = false, reserveErrorSpace = true, 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,7 +59,7 @@ const field = $derived({
 });
 </script>
 
-<FieldError error={showErrors ? handler.errors[name] : null}>
+<FieldError error={showErrors ? handler.errors[name] : null} reserveErrorSpace={reserveErrorSpace}>
   {@render children(field)}
 </FieldError>
 
@@ -68,7 +68,7 @@ const field = $derived({
 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
-layout.
+layout; `reserveErrorSpace={false}` drops the reserve — the message overlays content below.
 
 ### Usage
 ```svelte

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

@@ -30,6 +30,12 @@ declare function $$render<T extends Record<string, unknown>, K extends keyof T &
         debounceMs?: number;
         /** 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 true
+         */
+        reserveErrorSpace?: boolean;
         /**
          * Extra consumer callbacks. Run AFTER the validation wiring; they cannot override it.
          * The `children` snippet always receives fully-wired `field.on.*`.
@@ -65,7 +71,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
- * layout.
+ * layout; `reserveErrorSpace={false}` drops the reserve — the message overlays content below.
  *
  * ### 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 FieldError } from './cmp.field-error.svelte';
-let { name, validationResult, children } = $props();
+let { name, validationResult, reserveErrorSpace = true, children } = $props();
 const errorText = $derived(validationResult?.errors[name] ?? null);
 </script>
 
-<FieldError error={errorText}>
+<FieldError error={errorText} reserveErrorSpace={reserveErrorSpace}>
   {@render children()}
 </FieldError>
 
@@ -11,5 +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`.
+(e.g. server-validated forms) and does not need a `FormValidationHandler`. Pass
+`reserveErrorSpace={false}` to overlay the message instead of reserving layout space.
 -->

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

@@ -6,6 +6,12 @@ declare function $$render<T extends Record<string, unknown>>(): {
         name: keyof T & string;
         /** 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 true
+         */
+        reserveErrorSpace?: boolean;
         children: Snippet;
     };
     exports: {};
@@ -30,7 +36,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`.
+ * (e.g. server-validated forms) and does not need a `FormValidationHandler`. Pass
+ * `reserveErrorSpace={false}` to overlay the message instead of reserving layout space.
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends Record<string, unknown>> = InstanceType<typeof Cmp<T>>;

package/package.json

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