@streamscloud/kit 0.9.7 → 0.9.9

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;
@@ -240,7 +240,7 @@ or the clear button (see `HandleInput`'s availability pill).
   --sc-kit--input--font-size: var(--sc-kit--font-size--lg);
   --sc-kit--input--icon--size: var(--sc-kit--field--icon--size--lg);
 }
-.input:where(:hover) {
+.input:where(:hover:not(:focus-within)) {
   --sc-kit--input--border-color: var(--_in--border-color-hover);
 }
 .input:where(:focus-within) {

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 {
@@ -266,7 +266,7 @@ requires a non-null value. CSS API mirrors `Input` for visual-language compatibi
   --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);
 }
-.numeral-input:where(:hover) {
+.numeral-input:where(:hover:not(:focus-within)) {
   --sc-kit--numeral-input--border-color: var(--_ni--border-color-hover);
 }
 .numeral-input:where(:focus-within) {

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 {
@@ -224,7 +224,7 @@ body, or an external host element addressed by `options.fixedToolbarId`). Impera
 .rich-text-input--lg {
   --sc-kit--rich-text-input--root--font-size: 1rem;
 }
-.rich-text-input:where(:hover) {
+.rich-text-input:where(:hover:not(:focus-within)) {
   --sc-kit--rich-text-input--border-color: var(--_rti--border-color-hover);
 }
 .rich-text-input:where(:focus-within) {

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 {
@@ -62,13 +63,18 @@
     --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--lg);
   }
 
-  &:where(:hover) {
+  &:where(:hover:not(:focus-within)) {
     --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);
   }
   &:where(:focus-within),
   &--open {
     --sc-kit--select--trigger--underline-color: var(--sc-kit--color--accent);
   }
+  // Popover portals focus away — :focus-within won't suppress the hover border while open.
+  // --error must stay after this block: it wins border-color by source order even while open.
+  &--open {
+    --sc-kit--select--trigger--border-color: unset;
+  }
 
   &--error {
     --sc-kit--select--trigger--border-color: var(--_sel--border-color-error);

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 {
@@ -234,12 +234,15 @@ background--hover}`.
   --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--lg);
   --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--lg);
 }
-.singleselect:where(:hover) {
+.singleselect:where(:hover:not(:focus-within)) {
   --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);
 }
 .singleselect:where(:focus-within), .singleselect--open {
   --sc-kit--select--trigger--underline-color: var(--sc-kit--color--accent);
 }
+.singleselect--open {
+  --sc-kit--select--trigger--border-color: unset;
+}
 .singleselect--error {
   --sc-kit--select--trigger--border-color: var(--_sel--border-color-error);
   --sc-kit--select--trigger--underline-color: var(--sc-kit--color--danger);

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 {
@@ -449,12 +449,15 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
   --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--lg);
   --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--lg);
 }
-.multiselect-trigger:where(:hover) {
+.multiselect-trigger:where(:hover:not(:focus-within)) {
   --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);
 }
 .multiselect-trigger:where(:focus-within), .multiselect-trigger--open {
   --sc-kit--select--trigger--underline-color: var(--sc-kit--color--accent);
 }
+.multiselect-trigger--open {
+  --sc-kit--select--trigger--border-color: unset;
+}
 .multiselect-trigger--error {
   --sc-kit--select--trigger--border-color: var(--_sel--border-color-error);
   --sc-kit--select--trigger--underline-color: var(--sc-kit--color--danger);

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 {
@@ -204,7 +204,7 @@ exposed via `bind:this`.
   --sc-kit--textarea--padding-inline: var(--sc-kit--field--padding-inline--lg);
   --sc-kit--textarea--font-size: var(--sc-kit--font-size--lg);
 }
-.textarea:where(:hover) {
+.textarea:where(:hover:not(:focus-within)) {
   --sc-kit--textarea--border-color: var(--_ta--border-color-hover);
 }
 .textarea:where(:focus-within) {

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.7",
+  "version": "0.9.9",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",