@streamscloud/kit 0.44.0 → 0.46.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/ui/cropper/img-cropper/cmp.img-cropper.svelte

@@ -137,13 +137,6 @@ When `showImageShadow` is enabled on the cropper instance, a dark semi-transpare
 the canvas bounds so the surrounding area is dimmed. The parent element should set
 `overflow: hidden` to clip the shadow at its boundaries.
 
-### Props
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `src` | `string` | — | Image source URL |
-| `cropper` | `ImgCropper` | — | Cropper controller instance |
-| `showControls` | `boolean` | `true` | Show built-in Apply/Cancel crop controls |
-
 ### CSS Custom Properties
 None — canvas background, shadow, and sizing are controlled by the `ImgCropper` instance.
 -->
@@ -161,6 +154,8 @@ None — canvas background, shadow, and sizing are controlled by the `ImgCropper
 .img-cropper__canvas {
   width: 100%;
   height: 100%;
+  min-width: 0;
+  min-height: 0;
   background-color: var(--_fill-color);
   visibility: hidden;
 }

package/dist/ui/cropper/img-cropper/cmp.img-cropper.svelte.d.ts

@@ -2,6 +2,7 @@ import type { ImgCropper } from './img-cropper.svelte';
 type Props = {
     src: string;
     cropper: ImgCropper;
+    /** Show the built-in Apply/Cancel crop controls @default true */
     showControls?: boolean;
 };
 /**
@@ -41,13 +42,6 @@ type Props = {
  * the canvas bounds so the surrounding area is dimmed. The parent element should set
  * `overflow: hidden` to clip the shadow at its boundaries.
  *
- * ### Props
- * | Prop | Type | Default | Description |
- * |---|---|---|---|
- * | `src` | `string` | — | Image source URL |
- * | `cropper` | `ImgCropper` | — | Cropper controller instance |
- * | `showControls` | `boolean` | `true` | Show built-in Apply/Cancel crop controls |
- *
  * ### CSS Custom Properties
  * None — canvas background, shadow, and sizing are controlled by the `ImgCropper` instance.
  */

package/dist/ui/cropper/img-cropper/img-cropper-base-worker.svelte.d.ts

@@ -22,7 +22,7 @@ export declare abstract class ImgCropperBaseWorker implements ImgCropperWorker {
     reset: () => Promise<void>;
     crop: (options?: {
         fillColor?: string;
-    }) => Promise<ImgCropperResult>;
+    }) => Promise<ImgCropperResult | null>;
     save: (options?: {
         fillColor?: string;
     }) => Promise<ImgCropperResult>;

package/dist/ui/cropper/img-cropper/img-cropper-base-worker.svelte.js

@@ -24,7 +24,8 @@ export class ImgCropperBaseWorker {
         this._selectHandle = params.selectHandle;
         this.canvasGeometry = { aspectRatio: params.aspectRatio, width: 0, height: 0 };
         const onSelectionChange = (e) => {
-            const { width, height } = e.detail;
+            // CropperSelection emits before committing, so a change the boundary handler cancelled never reaches the selection.
+            const { width, height } = e.defaultPrevented ? this._selection : e.detail;
             this.cropBoxVisible = width > 0 && height > 0;
         };
         let handlingBoundary = false;
@@ -40,8 +41,9 @@ export class ImgCropperBaseWorker {
                 handlingBoundary = false;
             }
         };
-        this._selection.addEventListener('change', onSelectionChange);
+        // Boundary check first — onSelectionChange reads defaultPrevented, which it must not set itself.
         this._selection.addEventListener('change', onBoundaryCheck);
+        this._selection.addEventListener('change', onSelectionChange);
         this.destroy = () => {
             this._selection.removeEventListener('change', onSelectionChange);
             this._selection.removeEventListener('change', onBoundaryCheck);
@@ -75,6 +77,10 @@ export class ImgCropperBaseWorker {
         await this._fitImage();
     };
     crop = async (options) => {
+        // An empty selection exports a 0x0 canvas, and assigning its "data:," data URL leaves the cropper with an unloadable source.
+        if (this._selection.width <= 0 || this._selection.height <= 0) {
+            return null;
+        }
         const fillColor = options?.fillColor;
         const imageScale = computeImageScale(this._image.$getTransform());
         const outputSize = computeNaturalOutputSize({ displayWidth: this._selection.width, displayHeight: this._selection.height, imageScale });
@@ -107,8 +113,10 @@ export class ImgCropperBaseWorker {
         // Compute output dimensions before micro-zoom so the result matches
         // the source pixel density, not the display size.
         const imageScale = computeImageScale(this._image.$getTransform());
-        const displayWidth = this.cropBoxVisible ? this._selection.width : this._canvas.offsetWidth;
-        const displayHeight = this.cropBoxVisible ? this._selection.height : this._canvas.offsetHeight;
+        // A zero-sized selection exports a 0x0 canvas, whose toDataURL is the unusable "data:," string.
+        const hasCropBox = this._selection.width > 0 && this._selection.height > 0;
+        const displayWidth = hasCropBox ? this._selection.width : this._canvas.offsetWidth;
+        const displayHeight = hasCropBox ? this._selection.height : this._canvas.offsetHeight;
         const outputSize = computeNaturalOutputSize({ displayWidth, displayHeight, imageScale });
         const toCanvasOptions = { width: outputSize.width, height: outputSize.height, beforeDraw };
         // CropperJS $toCanvas exports only the visible portion of the canvas.
@@ -116,12 +124,12 @@ export class ImgCropperBaseWorker {
         // tightly fits the canvas. A micro-zoom nudges the image slightly past
         // the boundary so the export captures the full area; the zoom is
         // reversed immediately after.
-        const needsMicroZoom = !this.cropBoxVisible;
+        const needsMicroZoom = !hasCropBox;
         if (needsMicroZoom) {
             // Forward zoom increases coverage — safe without suspending cover check
             this._image.$zoom(0.003);
         }
-        const canvas = this.cropBoxVisible ? await this._selection.$toCanvas(toCanvasOptions) : await this._canvas.$toCanvas(toCanvasOptions);
+        const canvas = hasCropBox ? await this._selection.$toCanvas(toCanvasOptions) : await this._canvas.$toCanvas(toCanvasOptions);
         if (needsMicroZoom) {
             // Reverse zoom shrinks image — must suspend cover check to avoid clamping
             this._wrapTransformOp(() => this._image.$zoom(-0.003));

package/dist/ui/cropper/img-cropper/img-cropper-contain-worker.svelte.js

@@ -1,5 +1,5 @@
 import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
-import { fitInContainer } from './img-cropper-utils';
+import { fitInContainer, resolveCanvasGeometry } from './img-cropper-utils';
 export class ImgCropperContainWorker extends ImgCropperBaseWorker {
     _centerMode = 'contain';
     constructor(params) {
@@ -24,16 +24,28 @@ export class ImgCropperContainWorker extends ImgCropperBaseWorker {
             const fitted = fitInContainer({ ratio: aspectRatio, containerWidth, containerHeight });
             const maxWidth = Math.max(visualWidth, visualHeight * aspectRatio);
             const width = Math.min(fitted.width, maxWidth);
-            this.canvasGeometry = { aspectRatio, width, height: width / aspectRatio };
+            this.canvasGeometry = resolveCanvasGeometry({ aspectRatio, width, height: width / aspectRatio, maxWidth: fitted.width, maxHeight: containerHeight });
         }
         else if (visualWidth <= containerWidth && visualHeight <= containerHeight) {
-            // Free ratio, image fits naturally — no upscale
-            this.canvasGeometry = { aspectRatio, width: visualWidth, height: visualHeight };
+            const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: visualWidth,
+                height: visualHeight,
+                maxWidth: fitted.width,
+                maxHeight: containerHeight
+            });
         }
         else {
             // Free ratio, image too large — scale down to fit
             const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
-            this.canvasGeometry = { aspectRatio, width: fitted.width, height: fitted.height };
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: fitted.width,
+                height: fitted.height,
+                maxWidth: fitted.width,
+                maxHeight: containerHeight
+            });
         }
     };
 }

package/dist/ui/cropper/img-cropper/img-cropper-cover-worker.svelte.js

@@ -1,5 +1,5 @@
 import { ImgCropperBaseWorker } from './img-cropper-base-worker.svelte';
-import { fitInContainer, handleCoverCheck } from './img-cropper-utils';
+import { fitInContainer, handleCoverCheck, resolveCanvasGeometry } from './img-cropper-utils';
 export class ImgCropperCoverWorker extends ImgCropperBaseWorker {
     _centerMode = 'cover';
     constructor(params) {
@@ -53,18 +53,37 @@ export class ImgCropperCoverWorker extends ImgCropperBaseWorker {
             // Cap so the image can cover the canvas without upscaling
             const maxWidth = visualWidth > 0 && visualHeight > 0 ? Math.min(visualWidth, visualHeight * aspectRatio) : fitted.width;
             const width = Math.min(fitted.width, maxWidth);
-            this.canvasGeometry = { aspectRatio, width, height: width / aspectRatio };
+            this.canvasGeometry = resolveCanvasGeometry({ aspectRatio, width, height: width / aspectRatio, maxWidth: fitted.width, maxHeight: containerHeight });
         }
         else if (visualWidth <= 0 || visualHeight <= 0) {
-            this.canvasGeometry = { aspectRatio, width: containerWidth, height: containerHeight };
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: containerWidth,
+                height: containerHeight,
+                maxWidth: containerWidth,
+                maxHeight: containerHeight
+            });
         }
         else if (visualWidth <= containerWidth && visualHeight <= containerHeight) {
-            this.canvasGeometry = { aspectRatio, width: visualWidth, height: visualHeight };
+            const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: visualWidth,
+                height: visualHeight,
+                maxWidth: fitted.width,
+                maxHeight: containerHeight
+            });
         }
         else {
             // Fit at image AR; per-axis capping collapses an oversized image to the container AR.
             const fitted = fitInContainer({ ratio: visualWidth / visualHeight, containerWidth, containerHeight });
-            this.canvasGeometry = { aspectRatio, width: fitted.width, height: fitted.height };
+            this.canvasGeometry = resolveCanvasGeometry({
+                aspectRatio,
+                width: fitted.width,
+                height: fitted.height,
+                maxWidth: fitted.width,
+                maxHeight: containerHeight
+            });
         }
     };
 }

package/dist/ui/cropper/img-cropper/img-cropper-utils.d.ts

@@ -1,3 +1,4 @@
+import type { CanvasGeometry } from './img-cropper-worker.svelte';
 import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
 type Rect = {
     left: number;
@@ -34,6 +35,17 @@ export declare const fitInContainer: (params: {
     width: number;
     height: number;
 };
+/**
+ * Applies the minimum canvas size by scaling the whole rect, bounded by `maxWidth` / `maxHeight`, and rounds to whole pixels.
+ * The minimums are soft: a container smaller than them wins, and the returned canvas is smaller than `MIN_CANVAS_WIDTH` / `MIN_CANVAS_HEIGHT`.
+ */
+export declare const resolveCanvasGeometry: (params: {
+    aspectRatio: number | null;
+    width: number;
+    height: number;
+    maxWidth: number;
+    maxHeight: number;
+}) => CanvasGeometry;
 export declare const handleSelectionBoundary: (params: {
     event: Event;
     selection: CropperSelection;

package/dist/ui/cropper/img-cropper/img-cropper-utils.js

@@ -1,5 +1,7 @@
 import { Base64Helper } from '../../../core/files/base64-helper';
 import { default as mime } from 'mime';
+const COVERAGE_TOLERANCE = 0.5;
+const SHRINK_THRESHOLD = 0.5;
 // Detect MIME type from a URL without fetching the resource.
 // Returns a MIME string for data: URLs, extension-based URLs, or null for blob: / unknown URLs.
 export const detectMimeFromUrl = (url) => {
@@ -84,35 +86,56 @@ export const handleCoverCheck = (params) => {
         right: currentRect.right + (newAABB.right - oldAABB.right),
         bottom: currentRect.bottom + (newAABB.bottom - oldAABB.bottom)
     };
-    // Strict check (tolerance 0) — any gap triggers clamping
-    if (rectCoversRect(proposedRect, canvasRect, 0)) {
+    // Sub-pixel tolerance: a stricter check re-enters on the clamped transform this handler issues itself.
+    if (rectCoversRect(proposedRect, canvasRect, COVERAGE_TOLERANCE)) {
         return;
     }
     event.preventDefault();
-    // If the proposed image is still large enough to cover the canvas, clamp
-    // translation to maintain coverage. Otherwise block the transform entirely.
     const proposedWidth = proposedRect.right - proposedRect.left;
     const proposedHeight = proposedRect.bottom - proposedRect.top;
     const canvasWidth = canvasRect.right - canvasRect.left;
     const canvasHeight = canvasRect.bottom - canvasRect.top;
+    const oldAABBWidth = oldAABB.right - oldAABB.left;
+    const oldAABBHeight = oldAABB.bottom - oldAABB.top;
+    const newAABBWidth = newAABB.right - newAABB.left;
+    const newAABBHeight = newAABB.bottom - newAABB.top;
+    const shrinksImage = newAABBWidth < oldAABBWidth - SHRINK_THRESHOLD || newAABBHeight < oldAABBHeight - SHRINK_THRESHOLD;
+    let [scaleX, skewY, skewX, scaleY] = matrix;
+    let clampedRect = proposedRect;
     if (proposedWidth < canvasWidth - 0.5 || proposedHeight < canvasHeight - 0.5) {
-        return;
+        // Rescaling anything but a shrink would turn a pan, whose proposal is the same size, into an upscale.
+        if (!shrinksImage) {
+            return;
+        }
+        const coverScale = Math.max(canvasWidth / proposedWidth, canvasHeight / proposedHeight);
+        if (!Number.isFinite(coverScale)) {
+            return;
+        }
+        scaleX *= coverScale;
+        skewY *= coverScale;
+        skewX *= coverScale;
+        scaleY *= coverScale;
+        const halfWidth = (proposedWidth * coverScale) / 2;
+        const halfHeight = (proposedHeight * coverScale) / 2;
+        const centerX = (proposedRect.left + proposedRect.right) / 2;
+        const centerY = (proposedRect.top + proposedRect.bottom) / 2;
+        clampedRect = { left: centerX - halfWidth, top: centerY - halfHeight, right: centerX + halfWidth, bottom: centerY + halfHeight };
     }
     let clampedTx = matrix[4];
     let clampedTy = matrix[5];
-    if (proposedRect.left > canvasRect.left) {
-        clampedTx -= proposedRect.left - canvasRect.left;
+    if (clampedRect.left > canvasRect.left) {
+        clampedTx -= clampedRect.left - canvasRect.left;
     }
-    else if (proposedRect.right < canvasRect.right) {
-        clampedTx += canvasRect.right - proposedRect.right;
+    else if (clampedRect.right < canvasRect.right) {
+        clampedTx += canvasRect.right - clampedRect.right;
     }
-    if (proposedRect.top > canvasRect.top) {
-        clampedTy -= proposedRect.top - canvasRect.top;
+    if (clampedRect.top > canvasRect.top) {
+        clampedTy -= clampedRect.top - canvasRect.top;
     }
-    else if (proposedRect.bottom < canvasRect.bottom) {
-        clampedTy += canvasRect.bottom - proposedRect.bottom;
+    else if (clampedRect.bottom < canvasRect.bottom) {
+        clampedTy += canvasRect.bottom - clampedRect.bottom;
     }
-    image.$setTransform(matrix[0], matrix[1], matrix[2], matrix[3], clampedTx, clampedTy);
+    image.$setTransform(scaleX, skewY, skewX, scaleY, clampedTx, clampedTy);
 };
 export const fitInContainer = (params) => {
     const { ratio, containerWidth, containerHeight } = params;
@@ -121,6 +144,24 @@ export const fitInContainer = (params) => {
     }
     return { width: containerHeight * ratio, height: containerHeight };
 };
+// Same limits cropper-canvas declares in its shadow style, where they clamp one axis at a time and break the canvas ratio.
+const MIN_CANVAS_WIDTH = 200;
+const MIN_CANVAS_HEIGHT = 100;
+/**
+ * Applies the minimum canvas size by scaling the whole rect, bounded by `maxWidth` / `maxHeight`, and rounds to whole pixels.
+ * The minimums are soft: a container smaller than them wins, and the returned canvas is smaller than `MIN_CANVAS_WIDTH` / `MIN_CANVAS_HEIGHT`.
+ */
+export const resolveCanvasGeometry = (params) => {
+    const { aspectRatio, width, height, maxWidth, maxHeight } = params;
+    if (width <= 0 || height <= 0) {
+        return { aspectRatio, width: 0, height: 0 };
+    }
+    const ratio = width / height;
+    const floorScale = Math.max(MIN_CANVAS_WIDTH / width, MIN_CANVAS_HEIGHT / height, 1);
+    const boundedWidth = Math.min(width * floorScale, maxWidth, maxHeight * ratio);
+    // A zero side reads as "unset" in the template, which falls the canvas back to its CSS size and desyncs it from this geometry.
+    return { aspectRatio, width: Math.max(1, Math.round(boundedWidth)), height: Math.max(1, Math.round(boundedWidth / ratio)) };
+};
 export const handleSelectionBoundary = (params) => {
     const { event, selection, canvas } = params;
     const { x, y, width, height } = event.detail;

package/dist/ui/cropper/img-cropper/img-cropper-worker.svelte.d.ts

@@ -32,7 +32,7 @@ export interface ImgCropperWorker {
     reset: () => Promise<void>;
     crop: (options?: {
         fillColor?: string;
-    }) => Promise<ImgCropperResult>;
+    }) => Promise<ImgCropperResult | null>;
     save: (options?: {
         fillColor?: string;
     }) => Promise<ImgCropperResult>;

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