@streamscloud/kit 0.43.0 → 0.45.0

package/dist/core/media/image-helper.js

@@ -8,11 +8,11 @@ export class ImageHelper {
     };
     static computeRatio = async (src) => {
         const setRatio = (imageElement, resolveFn) => {
-            if (!imageElement || !imageElement.width) {
+            if (!imageElement || !imageElement.naturalWidth) {
                 resolveFn(null);
             }
             else {
-                resolveFn({ width: imageElement.width, height: imageElement.height });
+                resolveFn({ width: imageElement.naturalWidth, height: imageElement.naturalHeight });
             }
         };
         return new Promise((resolve) => {

package/dist/core/validation/validation-schemas/text-validations.js

@@ -1,8 +1,9 @@
 import { ValidationLocalization } from './validation-localization';
 import * as yup from 'yup';
+const isEmptyOrHasContent = (value) => !value || value.trim().length > 0;
 /** Value-level rules of `textValidationSchema`. Judges a real value — `null` / `undefined` are decided by the schema modifiers the caller adds. */
 export const isValidText = (value, rules) => {
-    return value.length >= rules.minLength && value.length <= rules.maxLength;
+    return isEmptyOrHasContent(value) && value.length >= rules.minLength && value.length <= rules.maxLength;
 };
 /** Value-level rules of `formattedTextValidationSchema` — `isValidText` plus the format, which an empty value skips. */
 export const isValidFormattedText = (value, rules) => {
@@ -10,7 +11,7 @@ export const isValidFormattedText = (value, rules) => {
 };
 export const textValidationSchema = (rules) => {
     const msg = new ValidationLocalization();
-    const schema = yup.string().max(rules.maxLength, msg.maxLength(rules.maxLength));
+    const schema = yup.string().test('whitespace-only', msg.whitespaceOnly, isEmptyOrHasContent).max(rules.maxLength, msg.maxLength(rules.maxLength));
     if (rules.minLength === 0) {
         return schema;
     }

package/dist/core/validation/validation-schemas/validation-localization.d.ts

@@ -7,6 +7,7 @@ export declare class ValidationLocalization {
     get max(): (val: number) => string;
     get minItems(): (count: number) => string;
     get maxItems(): (count: number) => string;
+    get whitespaceOnly(): string;
     get badFormat(): string;
     get url(): string;
 }

package/dist/core/validation/validation-schemas/validation-localization.js

@@ -24,6 +24,9 @@ export class ValidationLocalization {
     get maxItems() {
         return loc.maxItems[AppLocale.current];
     }
+    get whitespaceOnly() {
+        return loc.whitespaceOnly[AppLocale.current];
+    }
     get badFormat() {
         return loc.badFormat[AppLocale.current];
     }
@@ -64,6 +67,10 @@ const loc = {
         en: (count) => `Must contain at most ${count} item${count === 1 ? '' : 's'}`,
         no: (count) => `Kan ikke inneholde mer enn ${count} element${count === 1 ? '' : 'er'}`
     },
+    whitespaceOnly: {
+        en: 'This field cannot contain only spaces',
+        no: 'Dette feltet kan ikke bestå av bare mellomrom'
+    },
     badFormat: {
         en: 'Invalid format',
         no: 'Ugyldig format'

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

@@ -36,7 +36,7 @@ const onCardKeydown = (e) => {
 Media-first grid card primitive for catalog / browser views (ads, products, content lists,
 short-videos). Composable: media in the top slot via `<GridCardMedia>`, key-value rows via
 `<GridCardFields>` containing `<GridCardField>` / `<GridCardTextField>` / `<GridCardIdField>` /
-`<GridCardBadgeField>` / `<GridCardProgressField>` / `<GridCardActionsField>`.
+`<GridCardBadgeField>` / `<GridCardSelectField>` / `<GridCardProgressField>` / `<GridCardActionsField>`.
 
 Selection: pass `selected` (and `on.select`) to render a checkbox at top-left. Whole-card
 activation: pass `on.activate` to make the root a keyboard-accessible button (Enter / Space).

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

@@ -18,7 +18,7 @@ type Props = {
  * Media-first grid card primitive for catalog / browser views (ads, products, content lists,
  * short-videos). Composable: media in the top slot via `<GridCardMedia>`, key-value rows via
  * `<GridCardFields>` containing `<GridCardField>` / `<GridCardTextField>` / `<GridCardIdField>` /
- * `<GridCardBadgeField>` / `<GridCardProgressField>` / `<GridCardActionsField>`.
+ * `<GridCardBadgeField>` / `<GridCardSelectField>` / `<GridCardProgressField>` / `<GridCardActionsField>`.
  *
  * Selection: pass `selected` (and `on.select`) to render a checkbox at top-left. Whole-card
  * activation: pass `on.activate` to make the root a keyboard-accessible button (Enter / Space).

package/dist/ui/grid-card/fields/cmp.grid-card-button.svelte

@@ -4,11 +4,14 @@ const handleClick = (e) => {
     e.stopPropagation();
     on.click(e);
 };
+// Only the keys GridCard acts on — the card's handler preventDefaults Enter / Space, which would fire activation alongside this button.
+const cardActivationKeys = new Set([' ', 'Enter']);
 </script>
 
 {#snippet label()}{text}{/snippet}
 
-<span class="grid-card-button">
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span class="grid-card-button" onkeydown={(event) => cardActivationKeys.has(event.key) && event.stopPropagation()}>
   <Button
     type="button"
     variant={variant}

package/dist/ui/grid-card/fields/cmp.grid-card-field.svelte

@@ -12,8 +12,8 @@ export {};
 <!--
 @component
 Single label-value row inside a `<GridCardFields>` subgrid. Use directly for custom content,
-or compose via `<GridCardTextField>` / `<GridCardBadgeField>` / `<GridCardProgressField>` /
-`<GridCardActionsField>` for common patterns. Set `multiline` for top-aligned multi-line
+or compose via `<GridCardTextField>` / `<GridCardBadgeField>` / `<GridCardSelectField>` /
+`<GridCardProgressField>` / `<GridCardActionsField>` for common patterns. Set `multiline` for top-aligned multi-line
 content; set `vertical` to stack the label above the content (escapes the subgrid).
 
 ### CSS Custom Properties
@@ -22,12 +22,18 @@ content; set `vertical` to stack the label above the content (escapes the subgri
 | `--sc-kit--grid-card-field--background` | Row background | `var(--sc-kit--color--bg--panel)` |
 | `--sc-kit--grid-card-field--padding-block` | Vertical padding | `6px` |
 | `--sc-kit--grid-card-field--padding-inline` | Horizontal padding | `8px` |
+| `--sc-kit--grid-card-field--content--font-size` | Font size of the label and of every field row, `<GridCardIdField>` included | `10px` |
+| `--sc-kit--grid-card-field--content--line-height` | Line height of the label and of the text / select rows. Must stay **unitless** — row heights multiply it by the font size | `var(--sc-kit--leading--tight)` |
 -->
 
 <style>.grid-card-field {
   --_gcf--background: var(--sc-kit--grid-card-field--background, var(--sc-kit--color--bg--panel));
   --_gcf--padding-block: var(--sc-kit--grid-card-field--padding-block, 0.375rem);
   --_gcf--padding-inline: var(--sc-kit--grid-card-field--padding-inline, 0.5rem);
+  --_gcf--content-font-size: var(--sc-kit--grid-card-field--content--font-size, 0.625rem);
+  --_gcf--content-line-height: var(--sc-kit--grid-card-field--content--line-height, var(--sc-kit--leading--tight));
+  --_--grid-card-field--content-font-size: var(--_gcf--content-font-size);
+  --_--grid-card-field--content-line-height: var(--_gcf--content-line-height);
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1/-1;
@@ -44,12 +50,12 @@ content; set `vertical` to stack the label above the content (escapes the subgri
   padding: var(--_gcf--padding-block) var(--_gcf--padding-inline);
 }
 .grid-card-field__label {
-  font-size: 0.625rem;
+  font-size: var(--_gcf--content-font-size);
   color: var(--sc-kit--color--text--secondary);
   padding-block: var(--_gcf--padding-block);
   padding-inline-start: var(--_gcf--padding-inline);
   white-space: nowrap;
-  line-height: var(--sc-kit--leading--tight);
+  line-height: var(--_gcf--content-line-height);
 }
 .grid-card-field__label--vertical {
   padding: 0;

package/dist/ui/grid-card/fields/cmp.grid-card-field.svelte.d.ts

@@ -7,8 +7,8 @@ type Props = {
 };
 /**
  * Single label-value row inside a `<GridCardFields>` subgrid. Use directly for custom content,
- * or compose via `<GridCardTextField>` / `<GridCardBadgeField>` / `<GridCardProgressField>` /
- * `<GridCardActionsField>` for common patterns. Set `multiline` for top-aligned multi-line
+ * or compose via `<GridCardTextField>` / `<GridCardBadgeField>` / `<GridCardSelectField>` /
+ * `<GridCardProgressField>` / `<GridCardActionsField>` for common patterns. Set `multiline` for top-aligned multi-line
  * content; set `vertical` to stack the label above the content (escapes the subgrid).
  *
  * ### CSS Custom Properties
@@ -17,6 +17,8 @@ type Props = {
  * | `--sc-kit--grid-card-field--background` | Row background | `var(--sc-kit--color--bg--panel)` |
  * | `--sc-kit--grid-card-field--padding-block` | Vertical padding | `6px` |
  * | `--sc-kit--grid-card-field--padding-inline` | Horizontal padding | `8px` |
+ * | `--sc-kit--grid-card-field--content--font-size` | Font size of the label and of every field row, `<GridCardIdField>` included | `10px` |
+ * | `--sc-kit--grid-card-field--content--line-height` | Line height of the label and of the text / select rows. Must stay **unitless** — row heights multiply it by the font size | `var(--sc-kit--leading--tight)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/grid-card/fields/cmp.grid-card-id-field.svelte

@@ -15,6 +15,7 @@ Skips the `<GridCardField>` subgrid wrapping for a tighter look.
 -->
 
 <style>.grid-card-id-field {
+  --_gcif--font-size: var(--sc-kit--grid-card-field--content--font-size, 0.625rem);
   display: flex;
   align-items: center;
   gap: 0.8125rem;
@@ -23,7 +24,7 @@ Skips the `<GridCardField>` subgrid wrapping for a tighter look.
   border-radius: 0.125rem;
   padding-block: 0.375rem;
   padding-inline: 0.5rem;
-  font-size: 0.625rem;
+  font-size: var(--_gcif--font-size);
 }
 .grid-card-id-field__label, .grid-card-id-field__value {
   color: var(--sc-kit--color--text--secondary);

package/dist/ui/grid-card/fields/cmp.grid-card-select-field.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts" generics="TValue">import { Badge } from '../../badge';
+import { Singleselect } from '../../select';
+import GridCardField from './cmp.grid-card-field.svelte';
+const { label, value, options, badge = false, disabled = false, on } = $props();
+const variantOf = (option) => {
+    return options.find((candidate) => candidate.value === option.value)?.variant ?? 'neutral';
+};
+// Only the keys GridCard itself acts on: stopping the rest would also block the listbox's document-level Escape handler.
+const cardActivationKeys = new Set([' ', 'Enter']);
+</script>
+
+{#snippet badgeSelection({ option }: { option: SelectOption<TValue> })}
+  <Badge variant={variantOf(option)} style="soft" size="sm">{option.label}</Badge>
+{/snippet}
+
+<GridCardField label={label}>
+  <span
+    class="grid-card-select-field"
+    class:grid-card-select-field--badge={badge}
+    role="presentation"
+    onclick={(event) => !disabled && event.stopPropagation()}
+    onkeydown={(event) => !disabled && cardActivationKeys.has(event.key) && event.stopPropagation()}>
+    <Singleselect
+      clearable={false}
+      value={value}
+      options={options}
+      size="sm"
+      borderless
+      searchable={false}
+      disabled={disabled}
+      aria-label={label}
+      selectionSnippet={badge ? badgeSelection : undefined}
+      on={{ change: (next) => on?.change?.(next) }} />
+  </span>
+</GridCardField>
+
+<!--
+@component
+Select row for a value the user picks inside the card — status, visibility, plan. Sizes the
+trigger down to the row's own typography and drops its border, so a plain row lines up with
+`<GridCardTextField>` and a `badge` row renders the same `soft` / `sm` badge as
+`<GridCardBadgeField>`. Per-option badge color comes from `GridCardSelectOption.variant`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--grid-card-select-field--height` | Trigger height | row line box; `20px` with `badge` |
+| `--sc-kit--grid-card-select-field--gap` | Gap between the value and the chevron | `var(--sc-kit--space--1)` |
+| `--sc-kit--grid-card-select-field--chevron--size` | Chevron size | `12px` |
+-->
+
+<style>.grid-card-select-field {
+  --_gcsf--font-size: var(--_--grid-card-field--content-font-size);
+  --_gcsf--line-height: var(--_--grid-card-field--content-line-height);
+  --_gcsf--height: var(--sc-kit--grid-card-select-field--height, calc(var(--_gcsf--line-height) * 1em));
+  --_gcsf--gap: var(--sc-kit--grid-card-select-field--gap, var(--sc-kit--space--1));
+  --_gcsf--chevron-size: var(--sc-kit--grid-card-select-field--chevron--size, 0.75rem);
+  --sc-kit--select--trigger--height: var(--_gcsf--height);
+  --sc-kit--select--trigger--font-size: var(--_gcsf--font-size);
+  --sc-kit--select--trigger--padding-inline: 0;
+  --sc-kit--select--trigger--gap: var(--_gcsf--gap);
+  --sc-kit--select--trigger--icon--size: var(--_gcsf--chevron-size);
+  font-size: var(--_gcsf--font-size);
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+.grid-card-select-field--badge {
+  --_gcsf--height: var(--sc-kit--grid-card-select-field--height, 1.25rem);
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-select-field.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { BadgeVariant } from '../../badge';
+import type { SelectOption } from '../../select';
+export type GridCardSelectOption<TValue> = SelectOption<TValue> & {
+    /** Badge color for this option, used when the field renders `badge`. @default 'neutral' */
+    variant?: BadgeVariant;
+};
+declare function $$render<TValue>(): {
+    props: {
+        label: string;
+        value: TValue;
+        options: GridCardSelectOption<TValue>[];
+        /** Render the selection as a `<Badge>`, matching `<GridCardBadgeField>`. @default false */
+        badge?: boolean;
+        disabled?: boolean;
+        on?: {
+            change?: (value: TValue) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TValue> {
+    props(): ReturnType<typeof $$render<TValue>>['props'];
+    events(): ReturnType<typeof $$render<TValue>>['events'];
+    slots(): ReturnType<typeof $$render<TValue>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TValue>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TValue>['props']>, ReturnType<__sveltets_Render<TValue>['events']>, ReturnType<__sveltets_Render<TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TValue>['exports']>;
+    <TValue>(internal: unknown, props: ReturnType<__sveltets_Render<TValue>['props']> & {}): ReturnType<__sveltets_Render<TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * Select row for a value the user picks inside the card — status, visibility, plan. Sizes the
+ * trigger down to the row's own typography and drops its border, so a plain row lines up with
+ * `<GridCardTextField>` and a `badge` row renders the same `soft` / `sm` badge as
+ * `<GridCardBadgeField>`. Per-option badge color comes from `GridCardSelectOption.variant`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--grid-card-select-field--height` | Trigger height | row line box; `20px` with `badge` |
+ * | `--sc-kit--grid-card-select-field--gap` | Gap between the value and the chevron | `var(--sc-kit--space--1)` |
+ * | `--sc-kit--grid-card-select-field--chevron--size` | Chevron size | `12px` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<TValue> = InstanceType<typeof Cmp<TValue>>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-text-field.svelte

@@ -29,8 +29,10 @@ overflow) or a snippet for custom markup. `-` placeholder when text is null / un
   line-clamp: var(--_max-lines, 1);
   overflow: hidden;
   word-break: break-word;
+  --_gctf--font-size: var(--_--grid-card-field--content-font-size);
+  --_gctf--line-height: var(--_--grid-card-field--content-line-height);
   color: var(--sc-kit--color--text--primary);
-  line-height: var(--sc-kit--leading--tight);
-  height: calc(var(--_max-lines, 1) * var(--sc-kit--leading--tight) * 1em);
-  font-size: 0.625rem;
+  line-height: var(--_gctf--line-height);
+  height: calc(var(--_max-lines, 1) * var(--_gctf--line-height) * 1em);
+  font-size: var(--_gctf--font-size);
 }</style>

package/dist/ui/grid-card/fields/index.d.ts

@@ -5,4 +5,5 @@ export { default as GridCardField } from './cmp.grid-card-field.svelte';
 export { default as GridCardFields } from './cmp.grid-card-fields.svelte';
 export { default as GridCardIdField } from './cmp.grid-card-id-field.svelte';
 export { default as GridCardProgressField } from './cmp.grid-card-progress-field.svelte';
+export { default as GridCardSelectField, type GridCardSelectOption } from './cmp.grid-card-select-field.svelte';
 export { default as GridCardTextField } from './cmp.grid-card-text-field.svelte';

package/dist/ui/grid-card/fields/index.js

@@ -5,4 +5,5 @@ export { default as GridCardField } from './cmp.grid-card-field.svelte';
 export { default as GridCardFields } from './cmp.grid-card-fields.svelte';
 export { default as GridCardIdField } from './cmp.grid-card-id-field.svelte';
 export { default as GridCardProgressField } from './cmp.grid-card-progress-field.svelte';
+export { default as GridCardSelectField } from './cmp.grid-card-select-field.svelte';
 export { default as GridCardTextField } from './cmp.grid-card-text-field.svelte';

package/dist/ui/grid-card/index.d.ts

@@ -1,4 +1,4 @@
 export type { AspectRatio, ObjectFit } from './types';
 export { default as GridCard } from './cmp.grid-card.svelte';
 export { default as GridCardMedia, type MediaItem as GridCardMediaItem } from './cmp.grid-card-media.svelte';
-export { GridCardActionsField, GridCardBadgeField, GridCardField, GridCardFields, GridCardIdField, GridCardProgressField, GridCardTextField, type GridCardAction } from './fields';
+export { GridCardActionsField, GridCardBadgeField, GridCardField, GridCardFields, GridCardIdField, GridCardProgressField, GridCardSelectField, GridCardTextField, type GridCardAction, type GridCardSelectOption } from './fields';

package/dist/ui/grid-card/index.js

@@ -1,3 +1,3 @@
 export { default as GridCard } from './cmp.grid-card.svelte';
 export { default as GridCardMedia } from './cmp.grid-card-media.svelte';
-export { GridCardActionsField, GridCardBadgeField, GridCardField, GridCardFields, GridCardIdField, GridCardProgressField, GridCardTextField } from './fields';
+export { GridCardActionsField, GridCardBadgeField, GridCardField, GridCardFields, GridCardIdField, GridCardProgressField, GridCardSelectField, GridCardTextField } from './fields';

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

@@ -128,10 +128,11 @@
       cursor: text;
     }
 
+    // Keeps flex-grow so the trailing chevron stays pinned right when a selectionSnippet replaces the input.
     &--hidden {
       opacity: 0;
       width: 0;
-      flex: 0;
+      flex: 1 1 0;
     }
 
     &--no-search {

package/dist/ui/select/cmp.input-suggest.svelte

@@ -299,7 +299,7 @@ background, background--disabled, border-color, border-color--hover, border-colo
 border-radius, underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
 
 **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius, box-shadow,
-max-height, padding}`.
+font-size, max-height, padding}`.
 
 **Suggestion rows:** `--sc-kit--select--option--{color, color--selected, background--active,
 padding-inline}`. `--sc-kit--select--option--height` is NOT overridable here — the component pins
@@ -427,7 +427,7 @@ background--hover}`.
 .input-suggest__input--hidden {
   opacity: 0;
   width: 0;
-  flex: 0;
+  flex: 1 1 0;
 }
 .input-suggest__input--no-search {
   caret-color: transparent;

package/dist/ui/select/cmp.input-suggest.svelte.d.ts

@@ -85,7 +85,7 @@ type Props = {
  * border-radius, underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
  *
  * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius, box-shadow,
- * max-height, padding}`.
+ * font-size, max-height, padding}`.
  *
  * **Suggestion rows:** `--sc-kit--select--option--{color, color--selected, background--active,
  * padding-inline}`. `--sc-kit--select--option--height` is NOT overridable here — the component pins

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

@@ -39,7 +39,7 @@ background--disabled, border-color, border-color--hover, border-color--error, bo
 underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
 
 **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
-box-shadow, max-height, padding}`.
+box-shadow, font-size, max-height, padding}`.
 
 **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
 padding-block, padding-inline}`.

package/dist/ui/select/cmp.multiselect-async.svelte.d.ts

@@ -61,7 +61,7 @@ interface $$IsomorphicComponent {
  * underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
  *
  * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
- * box-shadow, max-height, padding}`.
+ * box-shadow, font-size, max-height, padding}`.
  *
  * **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
  * padding-block, padding-inline}`.

package/dist/ui/select/cmp.multiselect-tree.svelte

@@ -102,7 +102,7 @@ background--disabled, border-color, border-color--hover, border-color--error, bo
 underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
 
 **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
-box-shadow, max-height, padding}`.
+box-shadow, font-size, max-height, padding}`.
 
 **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
 padding-block, padding-inline}`.

package/dist/ui/select/cmp.multiselect-tree.svelte.d.ts

@@ -144,7 +144,7 @@ interface $$IsomorphicComponent {
  * underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
  *
  * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
- * box-shadow, max-height, padding}`.
+ * box-shadow, font-size, max-height, padding}`.
  *
  * **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
  * padding-block, padding-inline}`.

package/dist/ui/select/cmp.multiselect.svelte

@@ -54,7 +54,7 @@ background--disabled, border-color, border-color--hover, border-color--error, bo
 underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
 
 **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
-box-shadow, max-height, padding}`.
+box-shadow, font-size, max-height, padding}`.
 
 **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
 padding-block, padding-inline}`.

package/dist/ui/select/cmp.multiselect.svelte.d.ts

@@ -59,7 +59,7 @@ interface $$IsomorphicComponent {
  * underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
  *
  * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
- * box-shadow, max-height, padding}`.
+ * box-shadow, font-size, max-height, padding}`.
  *
  * **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
  * padding-block, padding-inline}`.

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

@@ -54,6 +54,8 @@ const core = createSelectCore({
     },
     onCreate: (payload) => mode.on?.create?.(payload.query)
 });
+// The `||` is deliberate: a non-searchable select has no query to show, so the selection stays visible while open.
+const selectionVisible = $derived(!core.isOpen || !searchable);
 const listboxId = `singleselect-async-${Math.random().toString(36).slice(2, 9)}`;
 export const open = () => core.openPopover();
 export const close = () => core.closePopover();
@@ -82,14 +84,14 @@ const showClear = $derived(mode.clearable && hasValue && isInteractive && !core.
     <span class="singleselect__icon singleselect__icon--leading"><IconSlot icon={icon} /></span>
   {/if}
 
-  {#if selectionSnippet && selectedOption && !core.isOpen}
+  {#if selectionSnippet && selectedOption && selectionVisible}
     <span class="singleselect__selection">{@render selectionSnippet({ option: selectedOption })}</span>
   {/if}
 
   <input
     bind:this={inputEl}
     class="singleselect__input"
-    class:singleselect__input--hidden={selectionSnippet && selectedOption && !core.isOpen}
+    class:singleselect__input--hidden={!!selectionSnippet && !!selectedOption && selectionVisible}
     class:singleselect__input--no-search={!searchable}
     type="text"
     role="combobox"
@@ -161,7 +163,7 @@ background--disabled, border-color, border-color--hover, border-color--error, bo
 underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
 
 **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
-box-shadow, max-height, padding}`.
+box-shadow, font-size, max-height, padding}`.
 
 **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
 padding-block, padding-inline}`.
@@ -294,7 +296,7 @@ background--hover}`.
 .singleselect__input--hidden {
   opacity: 0;
   width: 0;
-  flex: 0;
+  flex: 1 1 0;
 }
 .singleselect__input--no-search {
   caret-color: transparent;

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

@@ -89,7 +89,7 @@ interface $$IsomorphicComponent {
  * underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
  *
  * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
- * box-shadow, max-height, padding}`.
+ * box-shadow, font-size, max-height, padding}`.
  *
  * **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
  * padding-block, padding-inline}`.

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

@@ -121,7 +121,7 @@ background--disabled, border-color, border-color--hover, border-color--error, bo
 underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
 
 **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
-box-shadow, max-height, padding}`.
+box-shadow, font-size, max-height, padding}`.
 
 **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
 padding-block, padding-inline}`.

package/dist/ui/select/cmp.singleselect.svelte.d.ts

@@ -80,7 +80,7 @@ interface $$IsomorphicComponent {
  * underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
  *
  * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
- * box-shadow, max-height, padding}`.
+ * box-shadow, font-size, max-height, padding}`.
  *
  * **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
  * padding-block, padding-inline}`.

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

@@ -319,7 +319,7 @@ background--disabled, border-color, border-color--hover, border-color--error, bo
 underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
 
 **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
-box-shadow, max-height, padding}`.
+box-shadow, font-size, max-height, padding}`.
 
 **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
 padding-block, padding-inline}`.
@@ -510,7 +510,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
 .multiselect-trigger__input--hidden {
   opacity: 0;
   width: 0;
-  flex: 0;
+  flex: 1 1 0;
 }
 .multiselect-trigger__input--no-search {
   caret-color: transparent;

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

@@ -61,7 +61,7 @@ interface $$IsomorphicComponent {
  * underline-color, font-size, color, placeholder--color, icon--color, icon--size}`.
  *
  * **Popover panel:** `--sc-kit--select--panel--{background, border-color, border-radius,
- * box-shadow, max-height, padding}`.
+ * box-shadow, font-size, max-height, padding}`.
  *
  * **Option rows:** `--sc-kit--select--option--{color, color--selected, background--active,
  * padding-block, padding-inline}`.

package/dist/ui/select/select-listbox.svelte

@@ -234,6 +234,7 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
 | `--sc-kit--select--panel--border-color` | Panel border | `var(--sc-kit--color--border)` |
 | `--sc-kit--select--panel--border-radius` | Panel radius | `var(--sc-kit--radius--md)` |
 | `--sc-kit--select--panel--box-shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
+| `--sc-kit--select--panel--font-size` | Option / group / empty-state text size | `var(--sc-kit--font-size--md)` |
 | `--sc-kit--select--panel--max-height` | Panel max height | `18rem` |
 | `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
 | `--sc-kit--select--option--height` | Option row height | `var(--sc-kit--field--height--md)` (32px) |
@@ -253,6 +254,7 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   --_lb--box-shadow: var(--sc-kit--select--panel--box-shadow, var(--sc-kit--shadow--lg));
   --_lb--max-height: var(--sc-kit--select--panel--max-height, 18rem);
   --_lb--padding: var(--sc-kit--select--panel--padding, var(--sc-kit--space--1));
+  --_lb--font-size: var(--sc-kit--select--panel--font-size, var(--sc-kit--font-size--md));
   --_lb--row-height: var(--sc-kit--select--option--height, var(--sc-kit--field--height--md));
   --_lb--row-padding-inline: var(--sc-kit--select--option--padding-inline, var(--sc-kit--space--3));
   --_lb--row-background-active: var(--sc-kit--select--option--background--active, var(--sc-kit--color--accent--softer));
@@ -261,6 +263,7 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   --_lb--group-header-color: var(--sc-kit--select--group-header--color, var(--sc-kit--color--text--muted));
   --_lb--group-header-font-size: var(--sc-kit--select--group-header--font-size, var(--sc-kit--font-size--xs));
   --_lb--empty-color: var(--sc-kit--select--empty--color, var(--sc-kit--color--text--muted));
+  font-size: var(--_lb--font-size);
   display: flex;
   flex-direction: column;
   gap: 0.125rem;

package/dist/ui/select/select-listbox.svelte.d.ts

@@ -79,6 +79,7 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--select--panel--border-color` | Panel border | `var(--sc-kit--color--border)` |
  * | `--sc-kit--select--panel--border-radius` | Panel radius | `var(--sc-kit--radius--md)` |
  * | `--sc-kit--select--panel--box-shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
+ * | `--sc-kit--select--panel--font-size` | Option / group / empty-state text size | `var(--sc-kit--font-size--md)` |
  * | `--sc-kit--select--panel--max-height` | Panel max height | `18rem` |
  * | `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
  * | `--sc-kit--select--option--height` | Option row height | `var(--sc-kit--field--height--md)` (32px) |

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

@@ -100,6 +100,8 @@ const navigateToUser = (event, by) => {
   text-transform: lowercase;
 }
 .table-by-cell__by {
+  display: flex;
+  align-items: center;
   margin-right: 0.625em;
 }
 .table-by-cell__name {
@@ -112,12 +114,11 @@ const navigateToUser = (event, by) => {
   overflow: hidden;
 }
 .table-by-cell__name--link {
-  color: var(--sc-kit--color--accent);
-  text-decoration: underline;
-  transition: color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+  color: inherit;
+  text-decoration: none;
 }
 .table-by-cell__name--link:hover {
-  color: var(--sc-kit--color--accent--hover);
+  text-decoration: underline;
 }
 .table-by-cell__by-image {
   display: flex;

package/package.json

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