@streamscloud/kit 0.16.2 → 0.18.0

package/dist/ui/segmented-control/cmp.segmented-control.svelte

@@ -44,7 +44,7 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
 | `--sc-kit--segmented-control--height` | Control height | per size (28 / 32 px) |
 | `--sc-kit--segmented-control--font-size` | Label font size | per size |
 | `--sc-kit--segmented-control--padding-inline` | Per-segment horizontal padding | per size (10 / 12 px) |
-| `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | `--sc-kit--radius--md` |
+| `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | per size — `sm` 4px, `md` 6px |
 | `--sc-kit--segmented-control--color` | Default segment text color | `--sc-kit--color--text--secondary` |
 | `--sc-kit--segmented-control--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
 | `--sc-kit--segmented-control--color--active` | Active segment text color | `--sc-kit--color--text--primary` |
@@ -62,7 +62,7 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
   --_sc--height: var(--sc-kit--segmented-control--height, var(--_sc--size-height));
   --_sc--font-size: var(--sc-kit--segmented-control--font-size, var(--_sc--size-font-size));
   --_sc--padding-inline: var(--sc-kit--segmented-control--padding-inline, var(--_sc--size-padding-inline));
-  --_sc--radius: var(--sc-kit--segmented-control--border-radius, var(--sc-kit--radius--md));
+  --_sc--radius: var(--sc-kit--segmented-control--border-radius, var(--_sc--size-radius, var(--sc-kit--field--border-radius--md)));
   --_sc--color: var(--sc-kit--segmented-control--color, var(--sc-kit--color--text--muted));
   --_sc--color-hover: var(--sc-kit--segmented-control--color--hover, var(--sc-kit--color--text--primary));
   --_sc--color-active: var(--sc-kit--segmented-control--color--active, var(--sc-kit--color--text--primary));
@@ -86,11 +86,13 @@ Each segment carries an optional `disabled` flag (non-interactive) and an option
   --_sc--size-height: 1.75rem;
   --_sc--size-font-size: var(--sc-kit--font-size--sm);
   --_sc--size-padding-inline: 0.625rem;
+  --_sc--size-radius: var(--sc-kit--field--border-radius--sm);
 }
 .segmented-control--md {
   --_sc--size-height: 2rem;
   --_sc--size-font-size: var(--sc-kit--font-size--md);
   --_sc--size-padding-inline: 0.75rem;
+  --_sc--size-radius: var(--sc-kit--field--border-radius--md);
 }
 .segmented-control--tray {
   --_sc--background-active-default: var(--sc-kit--color--bg--panel);

package/dist/ui/segmented-control/cmp.segmented-control.svelte.d.ts

@@ -56,7 +56,7 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--segmented-control--height` | Control height | per size (28 / 32 px) |
  * | `--sc-kit--segmented-control--font-size` | Label font size | per size |
  * | `--sc-kit--segmented-control--padding-inline` | Per-segment horizontal padding | per size (10 / 12 px) |
- * | `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | `--sc-kit--radius--md` |
+ * | `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | per size — `sm` 4px, `md` 6px |
  * | `--sc-kit--segmented-control--color` | Default segment text color | `--sc-kit--color--text--secondary` |
  * | `--sc-kit--segmented-control--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
  * | `--sc-kit--segmented-control--color--active` | Active segment text color | `--sc-kit--color--text--primary` |

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

@@ -7,21 +7,21 @@
 // Public CSS API lives under `--sc-kit--select--trigger--*` so consumers can override
 // once and have all select variants pick it up.
 @mixin select-trigger {
-  --_sel--height: var(--sc-kit--select--trigger--height, var(--sc-kit--field--height--md));
-  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_sel--height: var(--sc-kit--select--trigger--height, var(--_sel--size-height, var(--sc-kit--field--height--md)));
+  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--_sel--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
   --_sel--gap: var(--sc-kit--select--trigger--gap, var(--sc-kit--space--2));
   --_sel--background: var(--sc-kit--select--trigger--background, var(--sc-kit--color--bg--field));
   --_sel--background-disabled: var(--sc-kit--select--trigger--background--disabled, var(--sc-kit--color--bg--field-alt));
   --_sel--border-color: var(--sc-kit--select--trigger--border-color, var(--sc-kit--color--border--field));
   --_sel--border-color-hover: var(--sc-kit--select--trigger--border-color--hover, var(--sc-kit--color--border--strong));
   --_sel--border-color-error: var(--sc-kit--select--trigger--border-color--error, var(--sc-kit--color--danger));
-  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--sc-kit--radius--sm));
+  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
-  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--sc-kit--font-size--md));
+  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
   --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
   --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
-  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--sc-kit--field--icon--size--md));
+  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--_sel--size-icon-size, var(--sc-kit--field--icon--size--md)));
 
   @include affordance.host;
 
@@ -45,22 +45,25 @@
   @include transitions.transition(background-color border-color color box-shadow);
 
   &--sm {
-    --sc-kit--select--trigger--height: var(--sc-kit--field--height--sm);
-    --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--sm);
-    --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--sm);
-    --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--sm);
+    --_sel--size-height: var(--sc-kit--field--height--sm);
+    --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
+    --_sel--size-font-size: var(--sc-kit--font-size--sm);
+    --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
+    --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
   }
   &--md {
-    --sc-kit--select--trigger--height: var(--sc-kit--field--height--md);
-    --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--md);
-    --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--md);
-    --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--md);
+    --_sel--size-height: var(--sc-kit--field--height--md);
+    --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
+    --_sel--size-font-size: var(--sc-kit--font-size--md);
+    --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
+    --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
   }
   &--lg {
-    --sc-kit--select--trigger--height: var(--sc-kit--field--height--lg);
-    --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--lg);
-    --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);
+    --_sel--size-height: var(--sc-kit--field--height--lg);
+    --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
+    --_sel--size-font-size: var(--sc-kit--font-size--lg);
+    --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
+    --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
   }
 
   &:where(:hover:not(:focus-within)) {

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

@@ -177,21 +177,21 @@ background--hover}`.
 -->
 
 <style>.singleselect {
-  --_sel--height: var(--sc-kit--select--trigger--height, var(--sc-kit--field--height--md));
-  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_sel--height: var(--sc-kit--select--trigger--height, var(--_sel--size-height, var(--sc-kit--field--height--md)));
+  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--_sel--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
   --_sel--gap: var(--sc-kit--select--trigger--gap, var(--sc-kit--space--2));
   --_sel--background: var(--sc-kit--select--trigger--background, var(--sc-kit--color--bg--field));
   --_sel--background-disabled: var(--sc-kit--select--trigger--background--disabled, var(--sc-kit--color--bg--field-alt));
   --_sel--border-color: var(--sc-kit--select--trigger--border-color, var(--sc-kit--color--border--field));
   --_sel--border-color-hover: var(--sc-kit--select--trigger--border-color--hover, var(--sc-kit--color--border--strong));
   --_sel--border-color-error: var(--sc-kit--select--trigger--border-color--error, var(--sc-kit--color--danger));
-  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--sc-kit--radius--sm));
+  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
-  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--sc-kit--font-size--md));
+  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
   --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
   --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
-  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--sc-kit--field--icon--size--md));
+  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--_sel--size-icon-size, var(--sc-kit--field--icon--size--md)));
   --_--input-affordance--opacity: 0;
   --_--input-affordance--scale: 0;
 }
@@ -219,22 +219,25 @@ background--hover}`.
   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 {
-  --sc-kit--select--trigger--height: var(--sc-kit--field--height--sm);
-  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--sm);
-  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--sm);
+  --_sel--size-height: var(--sc-kit--field--height--sm);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --_sel--size-font-size: var(--sc-kit--font-size--sm);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .singleselect--md {
-  --sc-kit--select--trigger--height: var(--sc-kit--field--height--md);
-  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--md);
-  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--md);
+  --_sel--size-height: var(--sc-kit--field--height--md);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
+  --_sel--size-font-size: var(--sc-kit--font-size--md);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .singleselect--lg {
-  --sc-kit--select--trigger--height: var(--sc-kit--field--height--lg);
-  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--lg);
-  --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);
+  --_sel--size-height: var(--sc-kit--field--height--lg);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --_sel--size-font-size: var(--sc-kit--font-size--lg);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .singleselect:where(:hover:not(:focus-within)) {
   --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);

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

@@ -8,4 +8,5 @@ export { default as MultiselectAsync } from './cmp.multiselect-async.svelte';
 export type { MultiselectAsyncInstance } from './cmp.multiselect-async.svelte';
 export { default as MultiselectTree } from './cmp.multiselect-tree.svelte';
 export type { MultiselectTreeInstance } from './cmp.multiselect-tree.svelte';
+export { isSelectGroup } from './types';
 export type { SelectItem, SelectOption, SelectOptionGroup } from './types';

package/dist/ui/select/index.js

@@ -3,3 +3,4 @@ export { default as SingleselectAsync } from './cmp.singleselect-async.svelte';
 export { default as Multiselect } from './cmp.multiselect.svelte';
 export { default as MultiselectAsync } from './cmp.multiselect-async.svelte';
 export { default as MultiselectTree } from './cmp.multiselect-tree.svelte';
+export { isSelectGroup } from './types';

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

@@ -393,21 +393,21 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
 }
 
 .multiselect-trigger {
-  --_sel--height: var(--sc-kit--select--trigger--height, var(--sc-kit--field--height--md));
-  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_sel--height: var(--sc-kit--select--trigger--height, var(--_sel--size-height, var(--sc-kit--field--height--md)));
+  --_sel--padding-inline: var(--sc-kit--select--trigger--padding-inline, var(--_sel--size-padding-inline, var(--sc-kit--field--padding-inline--md)));
   --_sel--gap: var(--sc-kit--select--trigger--gap, var(--sc-kit--space--2));
   --_sel--background: var(--sc-kit--select--trigger--background, var(--sc-kit--color--bg--field));
   --_sel--background-disabled: var(--sc-kit--select--trigger--background--disabled, var(--sc-kit--color--bg--field-alt));
   --_sel--border-color: var(--sc-kit--select--trigger--border-color, var(--sc-kit--color--border--field));
   --_sel--border-color-hover: var(--sc-kit--select--trigger--border-color--hover, var(--sc-kit--color--border--strong));
   --_sel--border-color-error: var(--sc-kit--select--trigger--border-color--error, var(--sc-kit--color--danger));
-  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--sc-kit--radius--sm));
+  --_sel--border-radius: var(--sc-kit--select--trigger--border-radius, var(--_sel--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_sel--underline-color: var(--sc-kit--select--trigger--underline-color, transparent);
-  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--sc-kit--font-size--md));
+  --_sel--font-size: var(--sc-kit--select--trigger--font-size, var(--_sel--size-font-size, var(--sc-kit--font-size--md)));
   --_sel--color: var(--sc-kit--select--trigger--color, var(--sc-kit--color--text--primary));
   --_sel--placeholder-color: var(--sc-kit--select--trigger--placeholder--color, var(--sc-kit--color--text--placeholder));
   --_sel--icon-color: var(--sc-kit--select--trigger--icon--color, var(--sc-kit--color--text--muted));
-  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--sc-kit--field--icon--size--md));
+  --_sel--icon-size: var(--sc-kit--select--trigger--icon--size, var(--_sel--size-icon-size, var(--sc-kit--field--icon--size--md)));
   --_--input-affordance--opacity: 0;
   --_--input-affordance--scale: 0;
 }
@@ -435,22 +435,25 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
   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 {
-  --sc-kit--select--trigger--height: var(--sc-kit--field--height--sm);
-  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--sm);
-  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--sm);
+  --_sel--size-height: var(--sc-kit--field--height--sm);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --_sel--size-font-size: var(--sc-kit--font-size--sm);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--sm);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .multiselect-trigger--md {
-  --sc-kit--select--trigger--height: var(--sc-kit--field--height--md);
-  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--md);
-  --sc-kit--select--trigger--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--select--trigger--icon--size: var(--sc-kit--field--icon--size--md);
+  --_sel--size-height: var(--sc-kit--field--height--md);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--md);
+  --_sel--size-font-size: var(--sc-kit--font-size--md);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--md);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .multiselect-trigger--lg {
-  --sc-kit--select--trigger--height: var(--sc-kit--field--height--lg);
-  --sc-kit--select--trigger--padding-inline: var(--sc-kit--field--padding-inline--lg);
-  --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);
+  --_sel--size-height: var(--sc-kit--field--height--lg);
+  --_sel--size-padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --_sel--size-font-size: var(--sc-kit--font-size--lg);
+  --_sel--size-icon-size: var(--sc-kit--field--icon--size--lg);
+  --_sel--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .multiselect-trigger:where(:hover:not(:focus-within)) {
   --sc-kit--select--trigger--border-color: var(--_sel--border-color-hover);
@@ -570,7 +573,7 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
 .multiselect-trigger--multi .multiselect-trigger__spinner {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-end: var(--sc-kit--select--trigger--padding-inline, var(--sc-kit--field--padding-inline--md));
+  inset-inline-end: var(--_sel--padding-inline);
   transform: translateY(-50%);
   margin: 0;
 }</style>

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

@@ -234,7 +234,7 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
 | `--sc-kit--select--panel--box-shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
 | `--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--padding-block` | Option vertical padding | `var(--sc-kit--space--2)` |
+| `--sc-kit--select--option--height` | Option row height | `var(--sc-kit--field--height--md)` (32px) |
 | `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
 | `--sc-kit--select--option--background--active` | Active / focused row background | `var(--sc-kit--color--accent--softer)` |
 | `--sc-kit--select--option--color` | Row text color | `var(--sc-kit--color--text--primary)` |
@@ -251,7 +251,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--row-padding-block: var(--sc-kit--select--option--padding-block, var(--sc-kit--space--2));
+  --_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));
   --_lb--row-color: var(--sc-kit--select--option--color, var(--sc-kit--color--text--primary));
@@ -297,7 +297,9 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   align-items: center;
   gap: var(--sc-kit--space--2);
   width: 100%;
-  padding: var(--_lb--row-padding-block) var(--_lb--row-padding-inline);
+  flex-shrink: 0;
+  block-size: var(--_lb--row-height);
+  padding: 0 var(--_lb--row-padding-inline);
   border-radius: var(--sc-kit--radius--sm);
   cursor: pointer;
   user-select: none;
@@ -378,8 +380,12 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   margin-block-end: var(--sc-kit--space--1);
 }
 .select-listbox__empty {
-  padding: var(--_lb--row-padding-block) var(--_lb--row-padding-inline);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  block-size: var(--_lb--row-height);
+  padding-inline: var(--_lb--row-padding-inline);
   color: var(--_lb--empty-color);
   font-size: var(--sc-kit--font-size--sm);
-  text-align: center;
 }</style>

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

@@ -79,7 +79,7 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--select--panel--box-shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
  * | `--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--padding-block` | Option vertical padding | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--select--option--height` | Option row height | `var(--sc-kit--field--height--md)` (32px) |
  * | `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
  * | `--sc-kit--select--option--background--active` | Active / focused row background | `var(--sc-kit--color--accent--softer)` |
  * | `--sc-kit--select--option--color` | Row text color | `var(--sc-kit--color--text--primary)` |

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

@@ -0,0 +1,156 @@
+@use 'styles/mixins';
+@use 'styles/functions';
+
+@mixin base {
+  .alternative-view {
+    &__placeholder {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 80%;
+      user-select: none;
+    }
+  }
+
+  .table-container {
+    --_table--row--height: var(--sc-kit--table--row--height, var(--_table--size-row-height));
+    --_table--cell--font-size: var(--sc-kit--table--cell--font-size, var(--_table--size-cell-font-size));
+    --_table--cell--horizontal-padding: var(--sc-kit--table--cell--horizontal-padding, var(--_table--size-cell-padding));
+    --_table--head--height: var(--sc-kit--table--head--height, var(--_table--size-head-height, var(--_table--row--height)));
+
+    --_table--head--background-color: var(--sc-kit--table--head--background-color, var(--sc-kit--color--bg--field-alt));
+    --_table--head--color: var(--sc-kit--table--head--color, var(--sc-kit--color--text--secondary));
+    --_table--border-color: var(--sc-kit--table--border-color, var(--sc-kit--color--border));
+    --_table--row--color: var(--sc-kit--table--row--color, transparent);
+    --_table--row--alternative-color: var(--sc-kit--table--row--alternative-color, var(--sc-kit--color--bg--hover));
+    --_table--zebra--color: var(--sc-kit--table--zebra--color, light-dark(#fcfcfd, #232323));
+    --_table--selected--color: var(--sc-kit--table--selected--color, var(--sc-kit--color--accent--softer));
+    --_table--selected--color-hover: var(--sc-kit--table--selected--color--hover, var(--sc-kit--color--accent--soft));
+
+    --_table--card--background: var(--sc-kit--table--card--background, var(--sc-kit--color--bg--panel));
+    --_table--card--border-color: var(--sc-kit--table--card--border-color, var(--sc-kit--color--border));
+    --_table--card--border-radius: var(--sc-kit--table--card--border-radius, var(--sc-kit--radius--lg));
+
+    display: flex;
+    overflow-x: auto;
+    height: 100%;
+
+    @include mixins.scrollbar();
+
+    &--md {
+      --_table--size-row-height: #{functions.to-rem(44)};
+      --_table--size-head-height: #{functions.to-rem(40)};
+      --_table--size-cell-font-size: var(--sc-kit--font-size--md);
+      --_table--size-cell-padding: var(--sc-kit--space--4);
+    }
+
+    &--sm {
+      --_table--size-row-height: #{functions.to-rem(36)};
+      --_table--size-head-height: #{functions.to-rem(32)};
+      --_table--size-cell-font-size: var(--sc-kit--font-size--sm);
+      --_table--size-cell-padding: var(--sc-kit--space--3);
+    }
+
+    &--card {
+      background: var(--_table--card--background);
+      border: 1px solid var(--_table--card--border-color);
+      border-radius: var(--_table--card--border-radius);
+      overflow: hidden;
+    }
+  }
+
+  .table {
+    width: 100%;
+    table-layout: auto;
+    height: fit-content;
+    border-collapse: separate;
+    border-spacing: 0;
+
+    &__head {
+      height: var(--_table--head--height);
+      max-height: var(--_table--head--height);
+      background: var(--_table--head--background-color);
+      color: var(--_table--head--color);
+      font-size: var(--sc-kit--table--head--font-size, var(--sc-kit--font-size--sm));
+      font-weight: var(--sc-kit--font-weight--semibold);
+    }
+
+    &__th {
+      padding: 0 var(--_table--cell--horizontal-padding);
+      text-align: left;
+      vertical-align: middle;
+      border-bottom: 1px solid var(--_table--border-color);
+      @include mixins.no-select;
+
+      &--centered {
+        text-align: center;
+        --_table-header--justify-content: center;
+      }
+    }
+
+    &__tr {
+      height: var(--_table--row--height);
+      max-height: var(--_table--row--height);
+      background: var(--_table--row--color);
+
+      &--zebra {
+        background: var(--_table--zebra--color);
+      }
+
+      &:hover,
+      &--highlighted {
+        background: var(--_table--row--alternative-color);
+        --_table--move-row-cell-opacity: 1;
+      }
+
+      &--selected {
+        background: var(--_table--selected--color);
+      }
+
+      &--selected:hover {
+        background: var(--_table--selected--color-hover);
+      }
+
+      &--placeholder {
+        background: var(--_table--row--color) !important;
+      }
+    }
+
+    &__td {
+      padding: 0 var(--_table--cell--horizontal-padding);
+      border-bottom: 1px solid var(--_table--border-color);
+      font-size: var(--_table--cell--font-size);
+      color: var(--sc-kit--color--text--primary);
+      vertical-align: middle;
+
+      &--centered {
+        text-align: center;
+      }
+
+      &--clickable {
+        cursor: pointer;
+      }
+
+      &--flush {
+        border-bottom: none;
+      }
+    }
+
+    &__placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 80%;
+      user-select: none;
+    }
+
+    &--sticky-header {
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+    }
+  }
+}