@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/stepper-dialog/types.d.ts

@@ -0,0 +1,34 @@
+import type { Step } from '../stepper';
+import type { Snippet } from 'svelte';
+export type StepperDialogLayout = 'top' | 'side';
+export type StepperDialogData = {
+    icon?: string;
+    title: string;
+    subtitle?: string;
+    steps: Step[];
+    layout: StepperDialogLayout;
+    /** Side-layout sidebar background — any valid CSS `background` shorthand. No-op in `'top'` layout. */
+    sidebarBackground?: string;
+    /** Reactive: close over reactive state to enable/disable Next / Finish per step. @default () => true */
+    canAdvance: (step: number) => boolean;
+    /** Override the localized Cancel label. */
+    cancelLabel?: string;
+    /** Override the localized Back label. */
+    backLabel?: string;
+    /** Override the localized Next label. */
+    nextLabel?: string;
+    /** Override the localized Finish label. */
+    finishLabel?: string;
+    /** Fixed dialog height (any CSS length). When set, body scrolls inside the fixed frame. */
+    height?: string;
+    /** Body content — receives the current step index. */
+    content: Snippet<[number]>;
+    on: {
+        /** Called when the user clicks Finish from the last step. Dialog auto-closes with `controller.ok()` after this resolves; throw to keep it open. */
+        finish: () => void | Promise<void>;
+        /** Pre-advance hook. Return `false` to block Next. */
+        beforeNext?: (step: number) => boolean | void | Promise<boolean | void>;
+        /** Fires whenever the internal step index changes. */
+        stepChange?: (step: number) => void;
+    };
+};

package/dist/ui/stepper-dialog/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Icon } from '../icon';
 import { SwipeIndicatorLocalization } from './swipe-indicator-localization';
 import IconArrowUp from '@fluentui/svg-icons/icons/arrow_up_20_regular.svg?raw';
-let { fadeTimeout = 2000 } = $props();
+let { fadeTimeout = 2000, size = 'md', color } = $props();
 const localization = new SwipeIndicatorLocalization();
 let isFaded = $state(false);
 const indicatorMounted = (_) => {
@@ -18,7 +18,17 @@ const indicatorMounted = (_) => {
 };
 </script>
 
-<div class="swipe-indicator" class:swipe-indicator--faded={isFaded} use:indicatorMounted>
+<div
+  class="swipe-indicator swipe-indicator--{size}"
+  class:swipe-indicator--faded={isFaded}
+  class:swipe-indicator--accent={color === 'accent'}
+  class:swipe-indicator--muted={color === 'muted'}
+  class:swipe-indicator--success={color === 'success'}
+  class:swipe-indicator--warning={color === 'warning'}
+  class:swipe-indicator--danger={color === 'danger'}
+  class:swipe-indicator--text={color === 'text'}
+  class:swipe-indicator--on-accent={color === 'on-accent'}
+  use:indicatorMounted>
   <div class="swipe-indicator__icon">
     <Icon src={IconArrowUp} />
   </div>
@@ -29,20 +39,37 @@ const indicatorMounted = (_) => {
 
 <!--
 @component
-An animated "swipe up" hint overlay with a bouncing arrow icon that fades out after a timeout.
+An animated "swipe up" hint overlay with a bouncing arrow icon that fades out after `fadeTimeout`.
+Designed for media-page swipe affordances on touch devices; absolutely positioned with a dark blur
+backdrop so it reads over any background.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--swipe-indicator--color` | Text and icon color | `white` |
-| `--sc-kit--swipe-indicator--font-size` | Text font size | `1rem` |
+| `--sc-kit--swipe-indicator--color` | Text + icon color | per `color` preset (on-accent by default) |
+| `--sc-kit--swipe-indicator--font-size` | Text font size | per `size` preset (14 / 16 / 20 px) |
 | `--sc-kit--swipe-indicator--icon-size` | Icon size | inherits font-size |
+| `--sc-kit--swipe-indicator--backdrop-color` | Blur backdrop color | `rgba(0, 0, 0, 1)` |
+| `--sc-kit--swipe-indicator--color-accent` | Accent preset color | `--sc-kit--color--accent` |
+| `--sc-kit--swipe-indicator--color-muted` | Muted preset color | `--sc-kit--color--text--muted` |
+| `--sc-kit--swipe-indicator--color-success` | Success preset color | `--sc-kit--color--success` |
+| `--sc-kit--swipe-indicator--color-warning` | Warning preset color | `--sc-kit--color--warning` |
+| `--sc-kit--swipe-indicator--color-danger` | Danger preset color | `--sc-kit--color--danger` |
+| `--sc-kit--swipe-indicator--color-text` | Text preset color | `--sc-kit--color--text--primary` |
+| `--sc-kit--swipe-indicator--color-on-accent` | On-accent preset color | `--sc-kit--color--text--on-accent` |
 -->
 
 <style>.swipe-indicator {
-  --_swipe-indicator--color: var(--sc-kit--swipe-indicator--color, #ffffff);
-  --_swipe-indicator--font-size: var(--sc-kit--swipe-indicator--font-size, 1rem);
+  --_swipe-indicator--color-accent: var(--sc-kit--swipe-indicator--color-accent, var(--sc-kit--color--accent));
+  --_swipe-indicator--color-muted: var(--sc-kit--swipe-indicator--color-muted, var(--sc-kit--color--text--muted));
+  --_swipe-indicator--color-success: var(--sc-kit--swipe-indicator--color-success, var(--sc-kit--color--success));
+  --_swipe-indicator--color-warning: var(--sc-kit--swipe-indicator--color-warning, var(--sc-kit--color--warning));
+  --_swipe-indicator--color-danger: var(--sc-kit--swipe-indicator--color-danger, var(--sc-kit--color--danger));
+  --_swipe-indicator--color-text: var(--sc-kit--swipe-indicator--color-text, var(--sc-kit--color--text--primary));
+  --_swipe-indicator--color-on-accent: var(--sc-kit--swipe-indicator--color-on-accent, var(--sc-kit--color--text--on-accent));
+  --_swipe-indicator--color: var(--sc-kit--swipe-indicator--color, var(--_swipe-indicator--color-on-accent));
   --_swipe-indicator--icon-size: var(--sc-kit--swipe-indicator--icon-size, var(--_swipe-indicator--font-size));
+  --_swipe-indicator--backdrop: var(--sc-kit--swipe-indicator--backdrop-color, rgba(0, 0, 0, 1));
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -54,7 +81,37 @@ An animated "swipe up" hint overlay with a bouncing arrow icon that fades out af
   z-index: 10;
   color: var(--_swipe-indicator--color);
   opacity: 1;
-  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity var(--sc-kit--duration--slow) var(--sc-kit--ease--default);
+}
+.swipe-indicator--sm {
+  --_swipe-indicator--font-size: var(--sc-kit--swipe-indicator--font-size, var(--sc-kit--font-size--md));
+}
+.swipe-indicator--md {
+  --_swipe-indicator--font-size: var(--sc-kit--swipe-indicator--font-size, var(--sc-kit--font-size--lg));
+}
+.swipe-indicator--lg {
+  --_swipe-indicator--font-size: var(--sc-kit--swipe-indicator--font-size, var(--sc-kit--font-size--xl));
+}
+.swipe-indicator--accent {
+  --_swipe-indicator--color: var(--_swipe-indicator--color-accent);
+}
+.swipe-indicator--muted {
+  --_swipe-indicator--color: var(--_swipe-indicator--color-muted);
+}
+.swipe-indicator--success {
+  --_swipe-indicator--color: var(--_swipe-indicator--color-success);
+}
+.swipe-indicator--warning {
+  --_swipe-indicator--color: var(--_swipe-indicator--color-warning);
+}
+.swipe-indicator--danger {
+  --_swipe-indicator--color: var(--_swipe-indicator--color-danger);
+}
+.swipe-indicator--text {
+  --_swipe-indicator--color: var(--_swipe-indicator--color-text);
+}
+.swipe-indicator--on-accent {
+  --_swipe-indicator--color: var(--_swipe-indicator--color-on-accent);
 }
 .swipe-indicator--faded {
   opacity: 0;
@@ -67,18 +124,20 @@ An animated "swipe up" hint overlay with a bouncing arrow icon that fades out af
   z-index: 0;
   pointer-events: none;
   border-radius: 50%;
-  background: #000000;
+  background: var(--_swipe-indicator--backdrop);
   filter: blur(12px);
   transform: scale(3);
 }
 .swipe-indicator__icon {
   font-size: var(--_swipe-indicator--icon-size);
+  line-height: var(--sc-kit--leading--tight);
   animation: bounce 2.7s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
   will-change: transform;
   z-index: 1;
 }
 .swipe-indicator__text {
   font-size: var(--_swipe-indicator--font-size);
+  line-height: var(--sc-kit--leading--tight);
   z-index: 1;
 }
 

package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte.d.ts

@@ -1,16 +1,32 @@
+type SwipeIndicatorColor = 'accent' | 'muted' | 'success' | 'warning' | 'danger' | 'text' | 'on-accent';
+type SwipeIndicatorSize = 'sm' | 'md' | 'lg';
 type Props = {
-    /** Time in ms before the indicator fades out; 0 to keep visible @default 2000 */
+    /** Time in ms before the indicator fades out; 0 keeps it visible indefinitely. @default 2000 */
     fadeTimeout?: number;
+    /** Size preset for text + icon (14 / 16 / 20 px). @default 'md' */
+    size?: SwipeIndicatorSize;
+    /** Color preset. @default 'on-accent' (white — designed to read over media) */
+    color?: SwipeIndicatorColor;
 };
 /**
- * An animated "swipe up" hint overlay with a bouncing arrow icon that fades out after a timeout.
+ * An animated "swipe up" hint overlay with a bouncing arrow icon that fades out after `fadeTimeout`.
+ * Designed for media-page swipe affordances on touch devices; absolutely positioned with a dark blur
+ * backdrop so it reads over any background.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--swipe-indicator--color` | Text and icon color | `white` |
- * | `--sc-kit--swipe-indicator--font-size` | Text font size | `1rem` |
+ * | `--sc-kit--swipe-indicator--color` | Text + icon color | per `color` preset (on-accent by default) |
+ * | `--sc-kit--swipe-indicator--font-size` | Text font size | per `size` preset (14 / 16 / 20 px) |
  * | `--sc-kit--swipe-indicator--icon-size` | Icon size | inherits font-size |
+ * | `--sc-kit--swipe-indicator--backdrop-color` | Blur backdrop color | `rgba(0, 0, 0, 1)` |
+ * | `--sc-kit--swipe-indicator--color-accent` | Accent preset color | `--sc-kit--color--accent` |
+ * | `--sc-kit--swipe-indicator--color-muted` | Muted preset color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--swipe-indicator--color-success` | Success preset color | `--sc-kit--color--success` |
+ * | `--sc-kit--swipe-indicator--color-warning` | Warning preset color | `--sc-kit--color--warning` |
+ * | `--sc-kit--swipe-indicator--color-danger` | Danger preset color | `--sc-kit--color--danger` |
+ * | `--sc-kit--swipe-indicator--color-text` | Text preset color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--swipe-indicator--color-on-accent` | On-accent preset color | `--sc-kit--color--text--on-accent` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/table/cmp.table.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" generics="T extends {id: string}">import { Button } from '../button';
-import { DropdownItem } from '../dropdown';
 import { DynamicComponent } from '../dynamic-component';
+import { EmptyState } from '../empty-state';
 import { Icon } from '../icon';
 import { IconText } from '../icon-text';
-import { Placeholder } from '../placeholder';
+import { PopoverItem } from '../popover';
 import { TableActionsCell, TableBadgeCell, TableButtonCell, TableByCell, TableCheckboxCell, TableHideableCell, TableIconCell, TableImageCell, TableMoveRowCell, TableCustomCell, TableSelectCell, TableTextCell, TableTextInputCell } from './table-cells';
 import { ResolvedColumn } from './table-column-models.svelte';
 import { TableLocalization } from './table-localization';
@@ -111,7 +111,9 @@ const getEditorColumnOrDefault = (column, editMode) => {
 };
 </script>
 
-<div class="table-container">
+<div
+  class="table-container table-container--{model.styles?.size ?? 'md'} table-container--{model.styles?.variant ?? 'plain'}"
+  class:table-container--zebra={model.styles?.zebra === true}>
   {#if alternativeView && showAlternativeView}
     {#if showPlaceholder || showNoItemsPlaceholder}
       <div class="alternative-view__placeholder">
@@ -153,7 +155,7 @@ const getEditorColumnOrDefault = (column, editMode) => {
                 {:else if customNoItemsPlaceholder}
                   {@render customNoItemsPlaceholder()}
                 {:else}
-                  <Placeholder imageSrc="/placeholders/default.svg" title={localization.noItemsFoundTitle} body={localization.noItemsFoundBody} />
+                  <EmptyState graphic="zero-content" title={localization.noItemsFoundTitle} description={localization.noItemsFoundBody} />
                 {/if}
               </div>
             </td>
@@ -166,19 +168,19 @@ const getEditorColumnOrDefault = (column, editMode) => {
               {#if anyVisibleItemActions(item)}
                 {#if editMode}
                   <div class="table__save-cancel">
-                    <Button size="small" variant="transparent-success" on={{ click: () => on?.saveChanges?.(item) }}>{localization.save}</Button>
-                    <Button size="small" variant="gray" on={{ click: () => on?.cancelChanges?.() }}>{localization.cancel}</Button>
+                    <Button type="button" size="sm" variant="success" on={{ click: () => on?.saveChanges?.(item) }}>{localization.save}</Button>
+                    <Button type="button" size="sm" variant="ghost" on={{ click: () => on?.cancelChanges?.() }}>{localization.cancel}</Button>
                   </div>
                 {:else}
-                  <TableActionsCell dropdownPosition={model.styles?.actionsDropdownTopDirection ? 'top' : 'bottom'}>
+                  <TableActionsCell popoverPosition={model.styles?.actionsPopoverTopDirection ? 'top' : 'bottom'}>
                     <div class="table__actions">
                       {#each model.itemActions as action (action)}
                         {#if action.visibilityFactory ? action.visibilityFactory(item) : true}
-                          <DropdownItem on={{ click: () => action.action(item) }}>
-                            <IconText icon={action.icon} iconColor={action.color}>
+                          <PopoverItem on={{ click: () => action.action(item) }}>
+                            <IconText icon={action.icon}>
                               {action.title}
                             </IconText>
-                          </DropdownItem>
+                          </PopoverItem>
                         {/if}
                       {/each}
                     </div>
@@ -209,6 +211,8 @@ const getEditorColumnOrDefault = (column, editMode) => {
               {/if}
             {:else if def.type === 'select'}
               <TableSelectCell column={def} item={item} />
+            {:else if def.type === 'snippet'}
+              {@render def.cell(item)}
             {:else if def.type === 'text'}
               <TableTextCell column={def} item={item} centered={column.centered} />
             {:else if def.type === 'text-input'}
@@ -219,13 +223,23 @@ const getEditorColumnOrDefault = (column, editMode) => {
           {/snippet}
           {#each model.items as item, itemIndex (item)}
             {@const editMode = model.editingItem?.id === item.id}
+            {@const isSelected = !!model.selection.items.find((x) => x.id === item.id)}
+            {@const isHighlighted = model.highlightedItemIds.includes(item.id)}
+            {@const flushBottom = model.styles?.variant === 'card' && itemIndex === model.items.length - 1}
+            {@const zebra = model.styles?.zebra === true && itemIndex % 2 === 1 && !isSelected && !isHighlighted}
             <tr
               animate:flip={{ duration: flipDurationMs }}
               class="table__tr"
               id={item.id}
-              class:table__tr--highlighted={model.highlightedItemIds.includes(item.id)}>
+              class:table__tr--selected={isSelected}
+              class:table__tr--highlighted={isHighlighted}
+              class:table__tr--zebra={zebra}>
               {#if rowsDraggable && !model.editingItem}
-                <td class="table__td table__drag-handle table__drag-handle--dragging" onmousedown={startDrag} ontouchstart={startDrag}>
+                <td
+                  class="table__td table__drag-handle table__drag-handle--dragging"
+                  class:table__td--flush={flushBottom}
+                  onmousedown={startDrag}
+                  ontouchstart={startDrag}>
                   <Icon src={IconReorderDotsHorizontal} />
                 </td>
               {/if}
@@ -236,6 +250,7 @@ const getEditorColumnOrDefault = (column, editMode) => {
                     class="table__td"
                     class:table__td--centered={column.centered}
                     class:table__td--clickable={!!column.onClick && !editMode}
+                    class:table__td--flush={flushBottom}
                     style={cssWidth(column)}
                     onclick={() => !editMode && column.onClick && column.onClick(item)}>
                     {@render cell({
@@ -256,26 +271,35 @@ const getEditorColumnOrDefault = (column, editMode) => {
 
 <!--
 @component
-Data table component with support for sorting, selection, drag-and-drop row reordering,
-inline editing, column visibility management, and group actions.
+Data table component with support for sorting, selection, drag-and-drop row reordering, inline editing, column visibility management, and group actions.
+
+### TableStyles (via `model.styles`)
+| Field | Type | Effect |
+|---|---|---|
+| `size` | `'sm' \| 'md'` | Row height + cell padding + font-size preset (default `'md'`) |
+| `variant` | `'plain' \| 'card'` | `'card'` wraps the table in a bordered rounded panel (default `'plain'`) |
+| `zebra` | `boolean` | Alternates row backgrounds with `--sc-kit--color--bg--field-alt` |
+| `stickyHeader` | `boolean` | Sticks `thead` to the scrolling ancestor |
+| `actionsPopoverTopDirection` | `boolean` | Forces the per-row actions popover above instead of below |
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--table--row--height` | Row height | `3.125em` |
-| `--sc-kit--table--padding-left` | Left padding for first column | `2em` |
-| `--sc-kit--table--padding-right` | Right padding for last column | `3em` |
-| `--sc-kit--table--head--background-color` | Header background | `light-dark(gray-50, dark-800)` |
-| `--sc-kit--table--border-color` | Border color between rows | `light-dark(neutral-100, dark-800)` |
-| `--sc-kit--table--cell--font-size` | Cell font size | `0.875em` |
+| `--sc-kit--table--row--height` | Row height | per size (32 / 50 px) |
+| `--sc-kit--table--cell--horizontal-padding` | Cell horizontal padding | per size (8 / 12 px) |
+| `--sc-kit--table--cell--font-size` | Cell font size | per size (`--font-size--sm` / `--md`) |
+| `--sc-kit--table--head--background-color` | Header background | `--sc-kit--color--bg--field-alt` |
+| `--sc-kit--table--head--color` | Header text color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--table--border-color` | Border color between rows | `--sc-kit--color--border` |
 | `--sc-kit--table--row--color` | Row background | `transparent` |
-| `--sc-kit--table--row--alternative-color` | Hover/highlighted row background | `light-dark(neutral-100, dark-800)` |
-| `--sc-kit--table-actions-cell--trigger--border-color` | Actions trigger border color | `light-dark(primary-50, primary-900)` |
-| `--sc-kit--table-actions-cell--trigger--icon-color` | Actions trigger icon color | `light-dark(primary-300, primary-400)` |
-| `--sc-kit--table-text-cell--clickable--color` | Clickable text cell color | `light-dark(primary-500, primary-400)` |
-| `--sc-kit--table-icon-cell--tooltip--color` | Icon cell tooltip text color | `white` |
-| `--sc-kit--table-icon-cell--tooltip--background` | Icon cell tooltip background | `black` |
-| `--sc-kit--table-icon-cell--tooltip--opacity` | Icon cell tooltip opacity | `70%` |
+| `--sc-kit--table--row--alternative-color` | Hover / highlighted row background | `--sc-kit--color--bg--hover` |
+| `--sc-kit--table--zebra--color` | Zebra-row background (when `zebra` on) | `light-dark(#fcfcfd, #232323)` |
+| `--sc-kit--table--card--background` | Card variant background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--table--card--border-color` | Card variant border | `--sc-kit--color--border` |
+| `--sc-kit--table--card--border-radius` | Card variant radius | `--sc-kit--radius--lg` |
+| `--sc-kit--table-actions-cell--trigger--border-color` | Actions trigger border | `--sc-kit--color--accent--soft` |
+| `--sc-kit--table-actions-cell--trigger--icon-color` | Actions trigger icon | `--sc-kit--color--accent` |
+| `--sc-kit--table-text-cell--clickable--color` | Clickable text cell color | `--sc-kit--color--accent` |
 -->
 
 <style>.alternative-view__placeholder {
@@ -288,16 +312,21 @@ inline editing, column visibility management, and group actions.
 }
 
 .table-container {
-  --_table--row--height: var(--sc-kit--table--row--height, 3.125em);
-  --_table--padding-left: var(--sc-kit--table--padding-left, 2em);
-  --_table--padding-right: var(--sc-kit--table--padding-right, 3em);
-  --_table--head--height: 2.625em;
-  --_table--head--background-color: var(--sc-kit--table--head--background-color, light-dark(#fafafa, #1e1e1e));
-  --_table--border-color: var(--sc-kit--table--border-color, light-dark(#f2f2f3, #1e1e1e));
-  --_table--cell--font-size: var(--sc-kit--table--cell--font-size, 0.875em);
-  --_table--cell--horizontal-padding: 0.75em;
+  --_table--row--height: var(--sc-kit--table--row--height);
+  --_table--cell--font-size: var(--sc-kit--table--cell--font-size);
+  --_table--cell--horizontal-padding: var(--sc-kit--table--cell--horizontal-padding);
+  --_table--head--height: var(--sc-kit--table--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, light-dark(#f2f2f3, #1e1e1e));
+  --_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%;
@@ -322,21 +351,45 @@ inline editing, column visibility management, and group actions.
     scrollbar-width: thin;
   }
 }
+.table-container--md {
+  --sc-kit--table--row--height: 2.75rem;
+  --sc-kit--table--head--height: 2.5rem;
+  --sc-kit--table--cell--font-size: var(--sc-kit--font-size--md);
+  --sc-kit--table--cell--horizontal-padding: var(--sc-kit--space--4);
+}
+.table-container--sm {
+  --sc-kit--table--row--height: 2.25rem;
+  --sc-kit--table--head--height: 2rem;
+  --sc-kit--table--cell--font-size: var(--sc-kit--font-size--sm);
+  --sc-kit--table--cell--horizontal-padding: var(--sc-kit--space--3);
+}
+.table-container--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;
 }
 .table__head {
   height: var(--_table--head--height);
   max-height: var(--_table--head--height);
   background: var(--_table--head--background-color);
-  border-bottom: 1px solid var(--_table--border-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);
 }
 .table__th {
   padding: 0 var(--_table--cell--horizontal-padding);
   text-align: left;
+  vertical-align: middle;
+  border-bottom: 1px solid var(--_table--border-color);
   -webkit-user-drag: none;
   user-select: none;
 }
@@ -345,23 +398,25 @@ inline editing, column visibility management, and group actions.
 }
 .table__th--centered {
   text-align: center;
-}
-.table__th:first-child {
-  padding-left: var(--_table--padding-left);
-}
-.table__th:last-child {
-  padding-right: var(--_table--padding-right);
+  --_table-header--justify-content: center;
 }
 .table__tr {
   height: var(--_table--row--height);
   max-height: var(--_table--row--height);
   background: var(--_table--row--color);
 }
+.table__tr--zebra {
+  background: var(--_table--zebra--color);
+}
 .table__tr:hover, .table__tr--highlighted {
   background: var(--_table--row--alternative-color);
+  --_table--move-row-cell-opacity: 1;
 }
-.table__tr:hover :global(.move-row-cell), .table__tr--highlighted :global(.move-row-cell) {
-  opacity: 1;
+.table__tr--selected {
+  background: var(--_table--selected--color);
+}
+.table__tr--selected:hover {
+  background: var(--_table--selected--color-hover);
 }
 .table__tr--placeholder {
   background: var(--_table--row--color) !important;
@@ -369,6 +424,9 @@ inline editing, column visibility management, and group actions.
 .table__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;
 }
 .table__td--centered {
   text-align: center;
@@ -376,17 +434,14 @@ inline editing, column visibility management, and group actions.
 .table__td--clickable {
   cursor: pointer;
 }
-.table__td:first-child {
-  padding-left: var(--_table--padding-left);
-}
-.table__td:last-child {
-  padding-right: var(--_table--padding-right);
+.table__td--flush {
+  border-bottom: none;
 }
 .table__save-cancel {
   display: flex;
   flex-direction: column;
-  gap: 0.5em;
-  --button--min-width: 4.6875em;
+  gap: var(--sc-kit--space--2);
+  --sc-kit--button--min-width: 4.6875rem;
 }
 .table__placeholder {
   display: flex;
@@ -397,17 +452,18 @@ inline editing, column visibility management, and group actions.
 }
 .table__actions {
   display: contents;
-  --sc-kit--dropdown-item--font-size: 0.875rem;
-  --sc-kit--dropdown-item--min-width: 8.75rem;
-  --sc-kit--dropdown-item--padding: 0.75rem 1.25rem;
-  --sc-kit--icon-text--text--font-size: 0.875rem;
+  --sc-kit--popover-item--font-size: var(--sc-kit--font-size--md);
+  --sc-kit--popover-item--min-width: 8.75rem;
+  --sc-kit--popover-item--padding: var(--sc-kit--space--3) var(--sc-kit--space--5);
+  --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--md);
   --sc-kit--icon-text--icon--font-size: 1.125rem;
 }
 .table__drag-handle {
-  width: 3.125em;
+  width: 2.25rem;
   cursor: grab;
-  --sc-kit--icon--size: 1.5em;
-  --sc-kit--icon--stroke-width: 1.1;
+  text-align: center;
+  --sc-kit--icon--size: 1.25rem;
+  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
 }
 .table__drag-handle--dragging {
   cursor: grabbing;

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

@@ -46,26 +46,35 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
- * Data table component with support for sorting, selection, drag-and-drop row reordering,
- * inline editing, column visibility management, and group actions.
+ * Data table component with support for sorting, selection, drag-and-drop row reordering, inline editing, column visibility management, and group actions.
+ *
+ * ### TableStyles (via `model.styles`)
+ * | Field | Type | Effect |
+ * |---|---|---|
+ * | `size` | `'sm' \| 'md'` | Row height + cell padding + font-size preset (default `'md'`) |
+ * | `variant` | `'plain' \| 'card'` | `'card'` wraps the table in a bordered rounded panel (default `'plain'`) |
+ * | `zebra` | `boolean` | Alternates row backgrounds with `--sc-kit--color--bg--field-alt` |
+ * | `stickyHeader` | `boolean` | Sticks `thead` to the scrolling ancestor |
+ * | `actionsPopoverTopDirection` | `boolean` | Forces the per-row actions popover above instead of below |
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--table--row--height` | Row height | `3.125em` |
- * | `--sc-kit--table--padding-left` | Left padding for first column | `2em` |
- * | `--sc-kit--table--padding-right` | Right padding for last column | `3em` |
- * | `--sc-kit--table--head--background-color` | Header background | `light-dark(gray-50, dark-800)` |
- * | `--sc-kit--table--border-color` | Border color between rows | `light-dark(neutral-100, dark-800)` |
- * | `--sc-kit--table--cell--font-size` | Cell font size | `0.875em` |
+ * | `--sc-kit--table--row--height` | Row height | per size (32 / 50 px) |
+ * | `--sc-kit--table--cell--horizontal-padding` | Cell horizontal padding | per size (8 / 12 px) |
+ * | `--sc-kit--table--cell--font-size` | Cell font size | per size (`--font-size--sm` / `--md`) |
+ * | `--sc-kit--table--head--background-color` | Header background | `--sc-kit--color--bg--field-alt` |
+ * | `--sc-kit--table--head--color` | Header text color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--table--border-color` | Border color between rows | `--sc-kit--color--border` |
  * | `--sc-kit--table--row--color` | Row background | `transparent` |
- * | `--sc-kit--table--row--alternative-color` | Hover/highlighted row background | `light-dark(neutral-100, dark-800)` |
- * | `--sc-kit--table-actions-cell--trigger--border-color` | Actions trigger border color | `light-dark(primary-50, primary-900)` |
- * | `--sc-kit--table-actions-cell--trigger--icon-color` | Actions trigger icon color | `light-dark(primary-300, primary-400)` |
- * | `--sc-kit--table-text-cell--clickable--color` | Clickable text cell color | `light-dark(primary-500, primary-400)` |
- * | `--sc-kit--table-icon-cell--tooltip--color` | Icon cell tooltip text color | `white` |
- * | `--sc-kit--table-icon-cell--tooltip--background` | Icon cell tooltip background | `black` |
- * | `--sc-kit--table-icon-cell--tooltip--opacity` | Icon cell tooltip opacity | `70%` |
+ * | `--sc-kit--table--row--alternative-color` | Hover / highlighted row background | `--sc-kit--color--bg--hover` |
+ * | `--sc-kit--table--zebra--color` | Zebra-row background (when `zebra` on) | `light-dark(#fcfcfd, #232323)` |
+ * | `--sc-kit--table--card--background` | Card variant background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--table--card--border-color` | Card variant border | `--sc-kit--color--border` |
+ * | `--sc-kit--table--card--border-radius` | Card variant radius | `--sc-kit--radius--lg` |
+ * | `--sc-kit--table-actions-cell--trigger--border-color` | Actions trigger border | `--sc-kit--color--accent--soft` |
+ * | `--sc-kit--table-actions-cell--trigger--icon-color` | Actions trigger icon | `--sc-kit--color--accent` |
+ * | `--sc-kit--table-text-cell--clickable--color` | Clickable text cell color | `--sc-kit--color--accent` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends {

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

@@ -1,47 +1,40 @@
-<script lang="ts">import { Dropdown } from '../../dropdown';
-import { Icon } from '../../icon';
+<script lang="ts">import { Icon } from '../../icon';
+import { Popover } from '../../popover';
 import IconMoreHorizontal from '@fluentui/svg-icons/icons/more_horizontal_20_regular.svg?raw';
-let { dropdownPosition = 'bottom-end', children } = $props();
-let toggleOpen = $state(null);
+let { popoverPosition = 'bottom-end', children } = $props();
+let popover = $state.raw(undefined);
 </script>
 
-<button type="button" class="table-actions-cell__dropdown-wrapper" onclick={toggleOpen}>
+<button type="button" class="table-actions-cell__dropdown-wrapper" onclick={() => popover?.toggle()}>
   <span>
-    <Dropdown position={dropdownPosition} on={{ mounted: (e) => (toggleOpen = e.toggleOpen) }}>
+    <Popover bind:this={popover} position={popoverPosition}>
       {#snippet trigger()}
         <button type="button" class="table-actions-cell__trigger">
           <Icon src={IconMoreHorizontal} />
         </button>
       {/snippet}
       {@render children()}
-    </Dropdown>
+    </Popover>
   </span>
 </button>
 
 <!--
 @component
-Actions cell for table rows. Shows a dropdown trigger with a "more" icon.
+Actions cell for table rows. Shows a popover trigger with a "more" icon.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--table-actions-cell--trigger--border-color` | Trigger button border color | `light-dark(primary-50, primary-900)` |
-| `--sc-kit--table-actions-cell--trigger--icon-color` | Trigger icon color | `light-dark(primary-300, primary-400)` |
+| `--sc-kit--table-actions-cell--trigger--border-color` | Trigger button border color | `--sc-kit--color--accent--soft` |
+| `--sc-kit--table-actions-cell--trigger--icon-color` | Trigger icon color | `--sc-kit--color--accent` |
 -->
 
 <style>.table-actions-cell__trigger {
-  --_table-actions-cell--trigger--border-color: var(
-    --sc-kit--table-actions-cell--trigger--border-color,
-    light-dark(#f1f6fd, #0a2557)
-  );
-  --_table-actions-cell--trigger--icon-color: var(
-    --sc-kit--table-actions-cell--trigger--icon-color,
-    light-dark(#91b3f3, #5a8dec)
-  );
+  --_table-actions-cell--trigger--border-color: var(--sc-kit--table-actions-cell--trigger--border-color, var(--sc-kit--color--accent--soft));
+  --_table-actions-cell--trigger--icon-color: var(--sc-kit--table-actions-cell--trigger--icon-color, var(--sc-kit--color--accent));
   border: 1px solid var(--_table-actions-cell--trigger--border-color);
-  padding: 0.125em 0.25em;
-  border-radius: 0.375em;
-  --sc-kit--icon--stroke-width: 0.6;
+  padding: 0.125rem 0.25rem;
+  border-radius: var(--sc-kit--radius--sm);
   --sc-kit--icon--color: var(--_table-actions-cell--trigger--icon-color);
 }
 .table-actions-cell__dropdown-wrapper {