@streamscloud/kit 0.23.0 → 0.25.0

package/dist/styles/_semantic.scss

@@ -61,6 +61,22 @@
   --sc-kit--color--info--hover: light-dark(#{$color-blue-700}, #{$color-blue-300});
   --sc-kit--color--info--soft: light-dark(#{$color-blue-50}, #{$color-blue-900});
 
+  // ============================================================
+  // COLOR — TONES (categorical palette; fg + soft bg, component-neutral)
+  // ============================================================
+  --sc-kit--tone--gray--fg: light-dark(#{$color-neutral-500}, #{$color-neutral-400});
+  --sc-kit--tone--gray--bg: light-dark(#{$color-neutral-50}, #{$color-dark-600});
+  --sc-kit--tone--blue--fg: light-dark(#{$color-blue-500}, #{$color-blue-400});
+  --sc-kit--tone--blue--bg: light-dark(#{$color-blue-50}, #{$color-blue-900});
+  --sc-kit--tone--green--fg: light-dark(#{$color-green-500}, #{$color-green-400});
+  --sc-kit--tone--green--bg: light-dark(#{$color-green-50}, #{$color-green-900});
+  --sc-kit--tone--red--fg: light-dark(#{$color-red-500}, #{$color-red-400});
+  --sc-kit--tone--red--bg: light-dark(#{$color-red-50}, #{$color-red-900});
+  --sc-kit--tone--orange--fg: light-dark(#{$color-orange-500}, #{$color-orange-400});
+  --sc-kit--tone--orange--bg: light-dark(#{$color-orange-100}, #{$color-orange-900});
+  --sc-kit--tone--teal--fg: light-dark(#3d7068, #5f938a);
+  --sc-kit--tone--teal--bg: light-dark(#eef4f3, #16302b);
+
   // ============================================================
   // COLOR — OVERLAYS
   // ============================================================

package/dist/ui/badge/cmp.badge.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">import { IconSlot } from '../icon';
-const { variant = 'neutral', size = 'md', style = 'soft', fullWidth = false, icon, children } = $props();
+const { variant = 'neutral', size = 'md', style = 'soft', shape = 'pill', fullWidth = false, icon, children } = $props();
 </script>
 
-<span class="badge badge--{size} badge--{variant}-{style}" class:badge--full={fullWidth}>
+<span class="badge badge--{size} badge--{variant}-{style}" class:badge--square={shape === 'square'} class:badge--full={fullWidth}>
   {#if icon}
     <span class="badge__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
   {/if}
@@ -11,7 +11,7 @@ const { variant = 'neutral', size = 'md', style = 'soft', fullWidth = false, ico
 
 <!--
 @component
-Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content. Optional leading `icon` renders in its own slot; the text content keeps its own ellipsis when it overflows.
+Status indicator, pill-shaped by default (`shape="square"` for a 4px-radius chip). Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content. Optional leading `icon` renders in its own slot; the text content keeps its own ellipsis when it overflows.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -20,7 +20,7 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
 | `--sc-kit--badge--background` | Background color | per variant + style |
 | `--sc-kit--badge--height` | Badge height | per size (20 / 24px) |
 | `--sc-kit--badge--padding-inline` | Horizontal padding | `0.875rem 0.75rem` |
-| `--sc-kit--badge--border-radius` | Corner radius | `var(--sc-kit--radius--pill)` |
+| `--sc-kit--badge--border-radius` | Corner radius | `shape="square"` → `var(--sc-kit--radius--sm)`, else `var(--sc-kit--radius--pill)` |
 | `--sc-kit--badge--font-size` | Content font size | per size |
 | `--sc-kit--badge--icon-size` | Leading icon size | per size (14 / 16px) |
 | `--sc-kit--badge--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
@@ -57,6 +57,9 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.badge--square {
+  --_badge--border-radius: var(--sc-kit--badge--border-radius, var(--sc-kit--radius--sm));
+}
 .badge--full {
   display: flex;
   width: 100%;
@@ -73,42 +76,50 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
   --_badge--icon-size: var(--sc-kit--badge--icon-size, 1rem);
 }
 .badge--neutral-soft {
-  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--secondary));
-  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--bg--active));
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--tone--gray--fg));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--tone--gray--bg));
 }
 .badge--accent-soft {
-  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--accent));
-  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--accent--soft));
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--tone--blue--fg));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--tone--blue--bg));
+}
+.badge--auxiliary-soft {
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--tone--teal--fg));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--tone--teal--bg));
 }
 .badge--success-soft {
-  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--success));
-  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--success--soft));
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--tone--green--fg));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--tone--green--bg));
 }
 .badge--warning-soft {
-  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--warning));
-  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--warning--soft));
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--tone--orange--fg));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--tone--orange--bg));
 }
 .badge--danger-soft {
-  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--danger));
-  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--danger--soft));
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--tone--red--fg));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--tone--red--bg));
 }
 .badge--neutral-solid {
   --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--bg--panel));
-  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--text--secondary));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--tone--gray--fg));
 }
 .badge--accent-solid {
   --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--on-accent));
-  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--accent));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--tone--blue--fg));
+}
+.badge--auxiliary-solid {
+  --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--on-accent));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--tone--teal--fg));
 }
 .badge--success-solid {
   --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--on-accent));
-  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--success));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--tone--green--fg));
 }
 .badge--warning-solid {
   --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--primary));
-  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--warning));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--tone--orange--fg));
 }
 .badge--danger-solid {
   --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--on-accent));
-  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--color--danger));
+  --_badge--background: var(--sc-kit--badge--background, var(--sc-kit--tone--red--fg));
 }</style>

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

@@ -1,5 +1,5 @@
 import { type IconProp } from '../icon';
-import type { BadgeVariant } from './types';
+import type { BadgeShape, BadgeVariant } from './types';
 import type { Snippet } from 'svelte';
 type Props = {
     /** Color variant @default 'neutral' */
@@ -8,6 +8,8 @@ type Props = {
     size?: 'sm' | 'md';
     /** Filled chip vs soft-tinted fill @default 'soft' */
     style?: 'soft' | 'solid';
+    /** Corner style — pill (fully rounded) vs square (4px radius). @default 'pill' */
+    shape?: BadgeShape;
     /** Stretch to fill the parent's inline axis, centering the content. @default false */
     fullWidth?: boolean;
     /** Optional leading icon. */
@@ -15,7 +17,7 @@ type Props = {
     children: Snippet;
 };
 /**
- * Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content. Optional leading `icon` renders in its own slot; the text content keeps its own ellipsis when it overflows.
+ * Status indicator, pill-shaped by default (`shape="square"` for a 4px-radius chip). Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content. Optional leading `icon` renders in its own slot; the text content keeps its own ellipsis when it overflows.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
@@ -24,7 +26,7 @@ type Props = {
  * | `--sc-kit--badge--background` | Background color | per variant + style |
  * | `--sc-kit--badge--height` | Badge height | per size (20 / 24px) |
  * | `--sc-kit--badge--padding-inline` | Horizontal padding | `0.875rem 0.75rem` |
- * | `--sc-kit--badge--border-radius` | Corner radius | `var(--sc-kit--radius--pill)` |
+ * | `--sc-kit--badge--border-radius` | Corner radius | `shape="square"` → `var(--sc-kit--radius--sm)`, else `var(--sc-kit--radius--pill)` |
  * | `--sc-kit--badge--font-size` | Content font size | per size |
  * | `--sc-kit--badge--icon-size` | Leading icon size | per size (14 / 16px) |
  * | `--sc-kit--badge--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |

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

@@ -1,2 +1,2 @@
 export { default as Badge } from './cmp.badge.svelte';
-export type { BadgeVariant } from './types';
+export type { BadgeShape, BadgeVariant } from './types';

package/dist/ui/badge/types.d.ts

@@ -1 +1,2 @@
-export type BadgeVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
+export type BadgeVariant = 'neutral' | 'accent' | 'auxiliary' | 'success' | 'warning' | 'danger';
+export type BadgeShape = 'pill' | 'square';

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

@@ -1,69 +1,14 @@
-<script lang="ts">import GridCardField from './cmp.grid-card-field.svelte';
+<script lang="ts">import { ProgressBar } from '../../progress-bar';
+import GridCardField from './cmp.grid-card-field.svelte';
 const { label, stage, stages } = $props();
-const currentStage = $derived(stages[Math.max(0, Math.min(stage, stages.length - 1))]);
-const currentLabel = $derived(currentStage?.label ?? '');
 </script>
 
 <GridCardField label={label}>
-  <div class="grid-card-progress-field">
-    <div
-      class="grid-card-progress-field__bar"
-      role="progressbar"
-      aria-valuemin={1}
-      aria-valuemax={stages.length}
-      aria-valuenow={stage + 1}
-      aria-label={currentLabel}>
-      {#each stages as s, i (i)}
-        <span class="grid-card-progress-field__segment" class:grid-card-progress-field__segment--filled={i <= stage} style:--_seg-color={s.color}></span>
-      {/each}
-    </div>
-    {#if currentLabel}
-      <span class="grid-card-progress-field__label">{currentLabel}</span>
-    {/if}
-  </div>
+  <ProgressBar stage={stage} stages={stages} />
 </GridCardField>
 
 <!--
 @component
-Multi-stage workflow progress indicator. Pass `stages` as an array of `{ color, label? }`
-descriptors — the bar renders one segment per stage; segments `0..stage` (inclusive) are
-filled with the per-stage color, the rest are muted. Consumer supplies the per-stage color
-(string — any valid CSS color or `var(--sc-kit--color--*)` reference). Useful for content
-lifecycle indicators (Ideas → Draft → Review → Scheduled → Published).
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--grid-card-progress-field--segment--height` | Bar segment height | `4px` |
-| `--sc-kit--grid-card-progress-field--segment--gap` | Gap between segments | `2px` |
-| `--sc-kit--grid-card-progress-field--segment--background--empty` | Empty segment color | `var(--sc-kit--color--bg--active)` |
+Grid-card field pairing a field label with a multi-stage `ProgressBar`. See `ProgressBar`
+(`@streamscloud/kit/ui/progress-bar`) for the bar's own CSS Custom Properties.
 -->
-
-<style>.grid-card-progress-field {
-  --_gcp--seg-height: var(--sc-kit--grid-card-progress-field--segment--height, 0.25rem);
-  --_gcp--seg-gap: var(--sc-kit--grid-card-progress-field--segment--gap, 0.125rem);
-  --_gcp--seg-empty: var(--sc-kit--grid-card-progress-field--segment--background--empty, var(--sc-kit--color--bg--active));
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  min-width: 0;
-}
-.grid-card-progress-field__bar {
-  display: flex;
-  gap: var(--_gcp--seg-gap);
-  width: 100%;
-}
-.grid-card-progress-field__segment {
-  flex: 1;
-  height: var(--_gcp--seg-height);
-  background: var(--_gcp--seg-empty);
-  border-radius: 0.0625rem;
-}
-.grid-card-progress-field__segment--filled {
-  background: var(--_seg-color);
-}
-.grid-card-progress-field__label {
-  font-size: 0.625rem;
-  color: var(--sc-kit--color--text--secondary);
-  line-height: var(--sc-kit--leading--tight);
-}</style>

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

@@ -1,29 +1,17 @@
+import { type ProgressBarStage } from '../../progress-bar';
 type Props = {
     label: string;
     /** Current stage index, 0-based. Stages 0..stage (inclusive) are filled. */
     stage: number;
     /**
      * Stage descriptors — at minimum `{ color }` per stage (consumer provides the CSS color).
-     * Length determines the total segment count. Pass arbitrary number of stages.
+     * Length determines the total segment count.
      */
-    stages: {
-        color: string;
-        label?: string;
-    }[];
+    stages: ProgressBarStage[];
 };
 /**
- * Multi-stage workflow progress indicator. Pass `stages` as an array of `{ color, label? }`
- * descriptors — the bar renders one segment per stage; segments `0..stage` (inclusive) are
- * filled with the per-stage color, the rest are muted. Consumer supplies the per-stage color
- * (string — any valid CSS color or `var(--sc-kit--color--*)` reference). Useful for content
- * lifecycle indicators (Ideas → Draft → Review → Scheduled → Published).
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--grid-card-progress-field--segment--height` | Bar segment height | `4px` |
- * | `--sc-kit--grid-card-progress-field--segment--gap` | Gap between segments | `2px` |
- * | `--sc-kit--grid-card-progress-field--segment--background--empty` | Empty segment color | `var(--sc-kit--color--bg--active)` |
+ * Grid-card field pairing a field label with a multi-stage `ProgressBar`. See `ProgressBar`
+ * (`@streamscloud/kit/ui/progress-bar`) for the bar's own CSS Custom Properties.
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/page-toolbar/cmp.toolbar-icon-button.svelte

@@ -4,7 +4,7 @@ const { icon, 'aria-label': ariaLabel, size = 'sm', active = false, disabled = f
 
 {#if presentational}
   <span class="toolbar-icon-button toolbar-icon-button--{size}" class:toolbar-icon-button--active={active}>
-    <Icon src={icon} size="md" />
+    <Icon src={icon} size={size === 'sm' ? 'control-md' : 'md'} />
   </span>
 {:else}
   <button
@@ -15,28 +15,29 @@ const { icon, 'aria-label': ariaLabel, size = 'sm', active = false, disabled = f
     aria-label={ariaLabel}
     aria-pressed={active}
     onclick={() => on?.click?.()}>
-    <Icon src={icon} size="md" />
+    <Icon src={icon} size={size === 'sm' ? 'control-md' : 'md'} />
   </button>
 {/if}
 
 <!--
 @component
-A flat, square toolbar icon button (28px at `sm`, 32px at `md`, with a 20px glyph). Background appears on
-hover only; `active` tints the glyph with the accent color (no background). Pass `presentational` to render
-a non-interactive `<span>` for use inside a wrapper that owns the click + semantics (e.g. a Popover trigger).
-Shared by `ToolbarViewControls` and the `ToolbarFilterSelect` icon trigger so they stay visually identical.
+A flat, square toolbar icon button (28px at `sm`, 32px at `md`, with a 16px glyph at `sm` / 20px at `md`).
+Background appears on hover only; `active` tints the glyph with the primary text color (no background). Pass
+`presentational` to render a non-interactive `<span>` for use inside a wrapper that owns the click +
+semantics (e.g. a Popover trigger). Shared by `ToolbarViewControls` and the `ToolbarSortSelect` icon trigger
+so they stay visually identical.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--toolbar-icon-button--color` | Idle glyph color | `var(--sc-kit--color--text--muted)` |
-| `--sc-kit--toolbar-icon-button--color--active` | Active glyph color | `var(--sc-kit--color--accent)` |
+| `--sc-kit--toolbar-icon-button--color--active` | Active glyph color | `var(--sc-kit--color--text--primary)` |
 | `--sc-kit--toolbar-icon-button--background--hover` | Hover background | `var(--sc-kit--color--bg--hover)` |
 -->
 
 <style>.toolbar-icon-button {
   --_tib--color: var(--sc-kit--toolbar-icon-button--color, var(--sc-kit--color--text--muted));
-  --_tib--color-active: var(--sc-kit--toolbar-icon-button--color--active, var(--sc-kit--color--accent));
+  --_tib--color-active: var(--sc-kit--toolbar-icon-button--color--active, var(--sc-kit--color--text--primary));
   --_tib--background-hover: var(--sc-kit--toolbar-icon-button--background--hover, var(--sc-kit--color--bg--hover));
   --_tib--size: var(--_tib--size-height);
   --sc-kit--icon--color: var(--_tib--color);

package/dist/ui/page-toolbar/cmp.toolbar-icon-button.svelte.d.ts

@@ -15,16 +15,17 @@ type Props = {
     };
 };
 /**
- * A flat, square toolbar icon button (28px at `sm`, 32px at `md`, with a 20px glyph). Background appears on
- * hover only; `active` tints the glyph with the accent color (no background). Pass `presentational` to render
- * a non-interactive `<span>` for use inside a wrapper that owns the click + semantics (e.g. a Popover trigger).
- * Shared by `ToolbarViewControls` and the `ToolbarFilterSelect` icon trigger so they stay visually identical.
+ * A flat, square toolbar icon button (28px at `sm`, 32px at `md`, with a 16px glyph at `sm` / 20px at `md`).
+ * Background appears on hover only; `active` tints the glyph with the primary text color (no background). Pass
+ * `presentational` to render a non-interactive `<span>` for use inside a wrapper that owns the click +
+ * semantics (e.g. a Popover trigger). Shared by `ToolbarViewControls` and the `ToolbarSortSelect` icon trigger
+ * so they stay visually identical.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--toolbar-icon-button--color` | Idle glyph color | `var(--sc-kit--color--text--muted)` |
- * | `--sc-kit--toolbar-icon-button--color--active` | Active glyph color | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--toolbar-icon-button--color--active` | Active glyph color | `var(--sc-kit--color--text--primary)` |
  * | `--sc-kit--toolbar-icon-button--background--hover` | Hover background | `var(--sc-kit--color--bg--hover)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/ui/page-toolbar/cmp.toolbar-sort-select.svelte

@@ -1,12 +1,14 @@
-<script lang="ts" generics="S">import ToolbarFilterSelect from './cmp.toolbar-filter-select.svelte';
+<script lang="ts" generics="S">import { Button } from '../button';
+import ToolbarFilterSelect from './cmp.toolbar-filter-select.svelte';
 import ToolbarIconButton from './cmp.toolbar-icon-button.svelte';
 import ToolbarSectionTitle from './cmp.toolbar-section-title.svelte';
 import { ToolbarSortSelectLocalization } from './toolbar-sort-select-localization';
 import IconFilter from '@fluentui/svg-icons/icons/filter_20_regular.svg?raw';
-const { options, value, label, size = 'sm', icon, compare, on } = $props();
+const { options, value, label, size = 'sm', trigger = 'icon', compare, on } = $props();
 const localization = new ToolbarSortSelectLocalization();
 const orderByLabel = $derived(label ?? localization.orderBy);
 const selection = $derived([value]);
+const resolvedTrigger = $derived(typeof trigger === 'function' ? trigger : trigger === 'button' ? buttonTrigger : iconTrigger);
 const onChange = (next) => {
     if (next.length > 0) {
         on?.change?.(next[0]);
@@ -14,18 +16,33 @@ const onChange = (next) => {
 };
 </script>
 
-<ToolbarFilterSelect label={orderByLabel} single footer={false} size={size} options={options} value={selection} compare={compare} on={{ change: onChange }}>
+{#snippet iconTrigger()}
+  <ToolbarIconButton presentational icon={IconFilter} size={size} />
+{/snippet}
+
+{#snippet buttonTrigger()}
+  <Button type="presentational" variant="secondary" size={size} icon={IconFilter}>{localization.sorting}</Button>
+{/snippet}
+
+<ToolbarFilterSelect
+  label={orderByLabel}
+  single
+  footer={false}
+  size={size}
+  options={options}
+  value={selection}
+  compare={compare}
+  trigger={resolvedTrigger}
+  on={{ change: onChange }}>
   {#snippet header()}
     <ToolbarSectionTitle>{orderByLabel}</ToolbarSectionTitle>
   {/snippet}
-  {#snippet trigger()}
-    <ToolbarIconButton presentational icon={icon ?? IconFilter} size={size} />
-  {/snippet}
 </ToolbarFilterSelect>
 
 <!--
 @component
-A toolbar sort control: a `ToolbarFilterSelect` in single-select mode behind a flat icon trigger
-(`ToolbarIconButton`), with an `Order by` section title above the options. Stand-alone, or composed into
-`ToolbarViewControls` via its `prepend` snippet.
+A toolbar sort control: a `ToolbarFilterSelect` in single-select mode behind a `trigger` — `'icon'`
+(default, flat icon button), `'button'` (labelled secondary button), or a custom snippet — with an
+`Order by` section title above the options. Stand-alone, or composed into `ToolbarViewControls` via
+its `prepend` snippet.
 -->

package/dist/ui/page-toolbar/cmp.toolbar-sort-select.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { SelectItem } from '../select';
+import type { Snippet } from 'svelte';
 declare function $$render<S>(): {
     props: {
         options: SelectItem<S>[];
@@ -7,8 +8,8 @@ declare function $$render<S>(): {
         label?: string;
         /** Button size preset — sm = 28px, md = 32px. @default 'sm' */
         size?: "sm" | "md";
-        /** Trigger glyph (a string SVG source). @default a filter glyph */
-        icon?: string;
+        /** Presentational trigger — `'icon'` (flat icon button), `'button'` (labelled secondary button), or a custom snippet. The popover owns the click and is named by `label`. @default 'icon' */
+        trigger?: "icon" | "button" | Snippet;
         /** Equality comparator — required when `S` is an object. */
         compare?: (a: S, b: S) => boolean;
         on?: {
@@ -35,9 +36,10 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
- * A toolbar sort control: a `ToolbarFilterSelect` in single-select mode behind a flat icon trigger
- * (`ToolbarIconButton`), with an `Order by` section title above the options. Stand-alone, or composed into
- * `ToolbarViewControls` via its `prepend` snippet.
+ * A toolbar sort control: a `ToolbarFilterSelect` in single-select mode behind a `trigger` — `'icon'`
+ * (default, flat icon button), `'button'` (labelled secondary button), or a custom snippet — with an
+ * `Order by` section title above the options. Stand-alone, or composed into `ToolbarViewControls` via
+ * its `prepend` snippet.
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<S> = InstanceType<typeof Cmp<S>>;

package/dist/ui/page-toolbar/cmp.toolbar-value-stepper.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { CONTROL_ICON_SIZE, Icon, scaleUp } from '../icon';
 import { ToolbarValueStepperLocalization } from './toolbar-value-stepper-localization';
-import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_16_regular.svg?raw';
-import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_16_regular.svg?raw';
+import IconAdd from '@fluentui/svg-icons/icons/add_16_regular.svg?raw';
+import IconSubtract from '@fluentui/svg-icons/icons/subtract_16_regular.svg?raw';
 const { value, min = 0, max = 100, step = 1, valueSuffix = '', size = 'sm', on } = $props();
 const localization = new ToolbarValueStepperLocalization();
 const iconSize = $derived(scaleUp(CONTROL_ICON_SIZE[size]));
@@ -17,25 +17,25 @@ const increase = () => {
 
 <div class="toolbar-value-stepper toolbar-value-stepper--{size}" role="group" aria-label={localization.value}>
   <button type="button" class="toolbar-value-stepper__btn" onclick={decrease} disabled={atMin} aria-label={localization.decreaseValue}>
-    <Icon src={IconChevronLeft} size={iconSize} />
+    <Icon src={IconSubtract} size={iconSize} />
   </button>
   <span class="toolbar-value-stepper__value">{value}{valueSuffix}</span>
   <button type="button" class="toolbar-value-stepper__btn" onclick={increase} disabled={atMax} aria-label={localization.increaseValue}>
-    <Icon src={IconChevronRight} size={iconSize} />
+    <Icon src={IconAdd} size={iconSize} />
   </button>
 </div>
 
 <!--
 @component
-A compact `[<] value [>]` stepper for toolbars — increment / decrement a numeric value between `min`
-and `max` by `step`, with an optional `valueSuffix` (e.g. ` %`). Bound arrows disable at the limits.
+A compact `[−] value [+]` stepper for toolbars — increment / decrement a numeric value between `min`
+and `max` by `step`, with an optional `valueSuffix` (e.g. ` %`). The − / + buttons disable at the limits.
 Shares the field-height preset so it lines up with other toolbar controls.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--toolbar-value-stepper--value--min-inline-size` | Min width of the value readout (keeps arrows from shifting) | `2.25rem` |
-| `--sc-kit--toolbar-value-stepper--icon--color` | Arrow icon color | `var(--sc-kit--color--accent)` |
+| `--sc-kit--toolbar-value-stepper--value--min-inline-size` | Min width of the value readout (keeps the buttons from shifting) | `2.25rem` |
+| `--sc-kit--toolbar-value-stepper--icon--color` | Button icon color | `var(--sc-kit--color--accent)` |
 -->
 
 <style>.toolbar-value-stepper {

package/dist/ui/page-toolbar/cmp.toolbar-value-stepper.svelte.d.ts

@@ -15,15 +15,15 @@ type Props = {
     };
 };
 /**
- * A compact `[<] value [>]` stepper for toolbars — increment / decrement a numeric value between `min`
- * and `max` by `step`, with an optional `valueSuffix` (e.g. ` %`). Bound arrows disable at the limits.
+ * A compact `[−] value [+]` stepper for toolbars — increment / decrement a numeric value between `min`
+ * and `max` by `step`, with an optional `valueSuffix` (e.g. ` %`). The − / + buttons disable at the limits.
  * Shares the field-height preset so it lines up with other toolbar controls.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--toolbar-value-stepper--value--min-inline-size` | Min width of the value readout (keeps arrows from shifting) | `2.25rem` |
- * | `--sc-kit--toolbar-value-stepper--icon--color` | Arrow icon color | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--toolbar-value-stepper--value--min-inline-size` | Min width of the value readout (keeps the buttons from shifting) | `2.25rem` |
+ * | `--sc-kit--toolbar-value-stepper--icon--color` | Button icon color | `var(--sc-kit--color--accent)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/page-toolbar/cmp.toolbar-view-controls.svelte

@@ -3,8 +3,9 @@ import ToolbarIconButton from './cmp.toolbar-icon-button.svelte';
 import { ToolbarViewControlsLocalization } from './toolbar-view-controls-localization';
 import IconAppsList from '@fluentui/svg-icons/icons/apps_list_20_regular.svg?raw';
 import IconGrid from '@fluentui/svg-icons/icons/grid_20_regular.svg?raw';
+import IconCard from '@fluentui/svg-icons/icons/square_20_regular.svg?raw';
 import { untrack } from 'svelte';
-const { view, size = 'sm', viewStorageKey, prepend, on } = $props();
+const { view, size = 'sm', showCard = false, viewStorageKey, prepend, on } = $props();
 const localization = new ToolbarViewControlsLocalization();
 let storage = null;
 $effect(() => untrack(() => {
@@ -13,7 +14,7 @@ $effect(() => untrack(() => {
     }
     storage = LocalStorageItem.of(viewStorageKey);
     const saved = storage.get();
-    if (saved === 'list' || saved === 'grid') {
+    if (saved === 'list' || saved === 'grid' || (saved === 'card' && showCard)) {
         on?.viewChange?.(saved);
     }
 }));
@@ -29,22 +30,26 @@ const setView = (next) => {
   {/if}
   <ToolbarIconButton icon={IconAppsList} size={size} active={view === 'list'} aria-label={localization.listView} on={{ click: () => setView('list') }} />
   <ToolbarIconButton icon={IconGrid} size={size} active={view === 'grid'} aria-label={localization.gridView} on={{ click: () => setView('grid') }} />
+  {#if showCard}
+    <ToolbarIconButton icon={IconCard} size={size} active={view === 'card'} aria-label={localization.cardView} on={{ click: () => setView('card') }} />
+  {/if}
 </div>
 
 <!--
 @component
 A toolbar view switcher: a `list` / `grid` toggle built on the shared `ToolbarIconButton` (flat, 28px at
-`sm` / 32px at `md`, 20px glyph). Pass `viewStorageKey` to persist the view across reloads, and compose a
-leading control — e.g. `ToolbarSortSelect` — through the `prepend` snippet.
+`sm` / 32px at `md`, 20px glyph), with an opt-in `card` button via `showCard`. Pass `viewStorageKey` to
+persist the view across reloads, and compose a leading control — e.g. `ToolbarSortSelect` — through the
+`prepend` snippet.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--toolbar-view-controls--gap` | Gap between the controls | `var(--sc-kit--space--3)` |
+| `--sc-kit--toolbar-view-controls--gap` | Gap between the controls | `var(--sc-kit--space--2)` |
 -->
 
 <style>.toolbar-view-controls {
-  --_tvc--gap: var(--sc-kit--toolbar-view-controls--gap, var(--sc-kit--space--3));
+  --_tvc--gap: var(--sc-kit--toolbar-view-controls--gap, var(--sc-kit--space--2));
   display: inline-flex;
   align-items: center;
   gap: var(--_tvc--gap);

package/dist/ui/page-toolbar/cmp.toolbar-view-controls.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
-type ViewMode = 'list' | 'grid';
+type ViewMode = 'list' | 'grid' | 'card';
 type Props = {
     view: ViewMode;
     /** Button size preset — sm = 28px, md = 32px. @default 'sm' */
     size?: 'sm' | 'md';
+    /** Reveal the `card` view button alongside list / grid. @default false */
+    showCard?: boolean;
     /** Persist the view mode under this localStorage key. */
     viewStorageKey?: string;
     /** Leading content before the view toggle — e.g. a composed `ToolbarSortSelect`. */
@@ -14,13 +16,14 @@ type Props = {
 };
 /**
  * A toolbar view switcher: a `list` / `grid` toggle built on the shared `ToolbarIconButton` (flat, 28px at
- * `sm` / 32px at `md`, 20px glyph). Pass `viewStorageKey` to persist the view across reloads, and compose a
- * leading control — e.g. `ToolbarSortSelect` — through the `prepend` snippet.
+ * `sm` / 32px at `md`, 20px glyph), with an opt-in `card` button via `showCard`. Pass `viewStorageKey` to
+ * persist the view across reloads, and compose a leading control — e.g. `ToolbarSortSelect` — through the
+ * `prepend` snippet.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--toolbar-view-controls--gap` | Gap between the controls | `var(--sc-kit--space--3)` |
+ * | `--sc-kit--toolbar-view-controls--gap` | Gap between the controls | `var(--sc-kit--space--2)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/page-toolbar/toolbar-sort-select-localization.d.ts

@@ -1,3 +1,4 @@
 export declare class ToolbarSortSelectLocalization {
     get orderBy(): string;
+    get sorting(): string;
 }

package/dist/ui/page-toolbar/toolbar-sort-select-localization.js

@@ -1,9 +1,13 @@
 import { AppLocale } from '../../core/locale';
 const loc = {
-    orderBy: { en: 'Order by', no: 'Sorter etter' }
+    orderBy: { en: 'Order by', no: 'Sorter etter' },
+    sorting: { en: 'Sorting', no: 'Sortering' }
 };
 export class ToolbarSortSelectLocalization {
     get orderBy() {
         return loc.orderBy[AppLocale.current];
     }
+    get sorting() {
+        return loc.sorting[AppLocale.current];
+    }
 }

package/dist/ui/page-toolbar/toolbar-view-controls-localization.d.ts

@@ -2,4 +2,5 @@ export declare class ToolbarViewControlsLocalization {
     get label(): string;
     get listView(): string;
     get gridView(): string;
+    get cardView(): string;
 }

package/dist/ui/page-toolbar/toolbar-view-controls-localization.js

@@ -2,7 +2,8 @@ import { AppLocale } from '../../core/locale';
 const loc = {
     label: { en: 'View options', no: 'Visningsalternativer' },
     listView: { en: 'List view', no: 'Listevisning' },
-    gridView: { en: 'Grid view', no: 'Rutenettvisning' }
+    gridView: { en: 'Grid view', no: 'Rutenettvisning' },
+    cardView: { en: 'Card view', no: 'Kortvisning' }
 };
 export class ToolbarViewControlsLocalization {
     get label() {
@@ -14,4 +15,7 @@ export class ToolbarViewControlsLocalization {
     get gridView() {
         return loc.gridView[AppLocale.current];
     }
+    get cardView() {
+        return loc.cardView[AppLocale.current];
+    }
 }

package/dist/ui/progress-bar/cmp.progress-bar.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">import { Tooltip } from '../tooltip';
+import { ProgressBarLocalization } from './progress-bar-localization';
+import { PROGRESS_BAR_TONES } from './types';
+const { stage, stages, variant = 'bar', showLabel = true } = $props();
+const localization = new ProgressBarLocalization();
+const currentStage = $derived(stages[Math.max(0, Math.min(stage, stages.length - 1))]);
+const currentLabel = $derived(currentStage?.label ?? '');
+const tooltipLabel = $derived(!showLabel ? currentLabel : '');
+const segmentColor = (s) => {
+    const value = s.color ?? 'gray';
+    return PROGRESS_BAR_TONES.includes(value) ? `var(--sc-kit--tone--${value}--fg)` : value;
+};
+</script>
+
+<div class="progress-bar" class:progress-bar--pips={variant === 'pips'}>
+  {#if tooltipLabel}
+    <Tooltip text={tooltipLabel}>
+      {@render track()}
+    </Tooltip>
+  {:else}
+    {@render track()}
+  {/if}
+  {#if showLabel && currentLabel}
+    <span class="progress-bar__label">{currentLabel}</span>
+  {/if}
+</div>
+
+{#snippet track()}
+  <div
+    class="progress-bar__track"
+    role="progressbar"
+    aria-valuemin={1}
+    aria-valuemax={stages.length}
+    aria-valuenow={stage + 1}
+    aria-valuetext={currentLabel || undefined}
+    aria-label={localization.label}>
+    {#each stages as s, i (i)}
+      <span class="progress-bar__segment" class:progress-bar__segment--filled={i <= stage} style:--_--pb--segment-color={segmentColor(s)}></span>
+    {/each}
+  </div>
+{/snippet}
+
+<!--
+@component
+Multi-stage workflow progress indicator. Pass `stages` as an array of `{ color, label? }`
+descriptors — the bar renders one segment per stage; segments `0..stage` (inclusive) are filled,
+the rest use the empty-segment color. Each stage's `color` is either a named tone from the shared
+palette (same schemes as `Badge`, e.g. `'green'`) or a raw CSS color / `var(--sc-kit--*)`. Useful
+for content-lifecycle indicators (Ideas → Draft → Review → Scheduled → Published) in cards, table
+cells, or post pages. `variant="pips"` renders compact fixed-size ticks (left-aligned) instead of
+full-width segments — for dense table cells. `showLabel={false}` drops the inline current-stage
+label (e.g. in a compact table cell) and surfaces it in a hover tooltip instead.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--progress-bar--segment--height` | Segment height | `bar` 4px / `pips` 12px |
+| `--sc-kit--progress-bar--segment--width` | Segment width | `bar` auto (stretches) / `pips` 6px |
+| `--sc-kit--progress-bar--segment--gap` | Gap between segments | `bar` 2px / `pips` 4px |
+| `--sc-kit--progress-bar--segment--border-radius` | Segment corner radius | `bar` 1px / `pips` 2px |
+| `--sc-kit--progress-bar--segment--background--empty` | Empty segment color | `var(--sc-kit--color--bg--active)` |
+| `--sc-kit--progress-bar--track--padding-block` | Vertical padding around the bar (enlarges the hover/click target) | `5px` |
+-->
+
+<style>.progress-bar {
+  --_pb--seg-height: var(--sc-kit--progress-bar--segment--height, var(--_pb--seg-height-default, 0.25rem));
+  --_pb--seg-gap: var(--sc-kit--progress-bar--segment--gap, var(--_pb--seg-gap-default, 0.125rem));
+  --_pb--seg-width: var(--sc-kit--progress-bar--segment--width, var(--_pb--seg-width-default, auto));
+  --_pb--seg-radius: var(--sc-kit--progress-bar--segment--border-radius, var(--_pb--seg-radius-default, 0.0625rem));
+  --_pb--seg-empty: var(--sc-kit--progress-bar--segment--background--empty, var(--sc-kit--color--bg--active));
+  --_pb--track-padding-block: var(--sc-kit--progress-bar--track--padding-block, 0.3125rem);
+  --_pb--seg-flex: 1;
+  --_pb--track-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  width: 100%;
+  min-width: 0;
+}
+.progress-bar--pips {
+  --_pb--seg-height-default: 0.75rem;
+  --_pb--seg-gap-default: 0.25rem;
+  --_pb--seg-width-default: 0.375rem;
+  --_pb--seg-radius-default: 0.125rem;
+  --_pb--seg-flex: 0 0 auto;
+  --_pb--track-width: auto;
+  align-items: flex-start;
+}
+.progress-bar__track {
+  display: flex;
+  align-items: center;
+  gap: var(--_pb--seg-gap);
+  width: var(--_pb--track-width);
+  padding-block: var(--_pb--track-padding-block);
+}
+.progress-bar__segment {
+  --_pb--seg-color: var(--_--pb--segment-color);
+  flex: var(--_pb--seg-flex);
+  width: var(--_pb--seg-width);
+  height: var(--_pb--seg-height);
+  background: var(--_pb--seg-empty);
+  border-radius: var(--_pb--seg-radius);
+}
+.progress-bar__segment--filled {
+  background: var(--_pb--seg-color);
+}
+.progress-bar__label {
+  font-size: 0.625rem;
+  color: var(--sc-kit--color--text--secondary);
+  line-height: var(--sc-kit--leading--tight);
+}</style>

package/dist/ui/progress-bar/cmp.progress-bar.svelte.d.ts

@@ -0,0 +1,37 @@
+import { type ProgressBarStage } from './types';
+type Props = {
+    /** Current stage index, 0-based. Stages 0..stage (inclusive) are filled. */
+    stage: number;
+    /**
+     * Stage descriptors — at minimum `{ color }` per stage (consumer provides the CSS color).
+     * Length determines the total segment count.
+     */
+    stages: ProgressBarStage[];
+    /** Segment shape — `bar` = full-width stretched segments, `pips` = compact fixed-size ticks (e.g. a table cell). @default 'bar' */
+    variant?: 'bar' | 'pips';
+    /** Show the current stage's label below the bar. When `false`, the label surfaces in a tooltip on hover instead. @default true */
+    showLabel?: boolean;
+};
+/**
+ * Multi-stage workflow progress indicator. Pass `stages` as an array of `{ color, label? }`
+ * descriptors — the bar renders one segment per stage; segments `0..stage` (inclusive) are filled,
+ * the rest use the empty-segment color. Each stage's `color` is either a named tone from the shared
+ * palette (same schemes as `Badge`, e.g. `'green'`) or a raw CSS color / `var(--sc-kit--*)`. Useful
+ * for content-lifecycle indicators (Ideas → Draft → Review → Scheduled → Published) in cards, table
+ * cells, or post pages. `variant="pips"` renders compact fixed-size ticks (left-aligned) instead of
+ * full-width segments — for dense table cells. `showLabel={false}` drops the inline current-stage
+ * label (e.g. in a compact table cell) and surfaces it in a hover tooltip instead.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--progress-bar--segment--height` | Segment height | `bar` 4px / `pips` 12px |
+ * | `--sc-kit--progress-bar--segment--width` | Segment width | `bar` auto (stretches) / `pips` 6px |
+ * | `--sc-kit--progress-bar--segment--gap` | Gap between segments | `bar` 2px / `pips` 4px |
+ * | `--sc-kit--progress-bar--segment--border-radius` | Segment corner radius | `bar` 1px / `pips` 2px |
+ * | `--sc-kit--progress-bar--segment--background--empty` | Empty segment color | `var(--sc-kit--color--bg--active)` |
+ * | `--sc-kit--progress-bar--track--padding-block` | Vertical padding around the bar (enlarges the hover/click target) | `5px` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProgressBar } from './cmp.progress-bar.svelte';
+export type { ProgressBarStage, ProgressBarTone } from './types';

package/dist/ui/progress-bar/index.js

@@ -0,0 +1 @@
+export { default as ProgressBar } from './cmp.progress-bar.svelte';

package/dist/ui/progress-bar/progress-bar-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class ProgressBarLocalization {
+    get label(): string;
+}

package/dist/ui/progress-bar/progress-bar-localization.js

@@ -0,0 +1,9 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    label: { en: 'Progress', no: 'Fremdrift' }
+};
+export class ProgressBarLocalization {
+    get label() {
+        return loc.label[AppLocale.current];
+    }
+}

package/dist/ui/progress-bar/types.d.ts

@@ -0,0 +1,7 @@
+export declare const PROGRESS_BAR_TONES: readonly ["gray", "blue", "green", "red", "orange", "teal"];
+export type ProgressBarTone = (typeof PROGRESS_BAR_TONES)[number];
+export type ProgressBarStage = {
+    /** A named tone from the shared palette (→ `--sc-kit--tone--<tone>--fg`) or any raw CSS color / `var(--sc-kit--*)`. @default 'gray' */
+    color?: ProgressBarTone | (string & {});
+    label?: string;
+};

package/dist/ui/progress-bar/types.js

@@ -0,0 +1 @@
+export const PROGRESS_BAR_TONES = ['gray', 'blue', 'green', 'red', 'orange', 'teal'];

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

@@ -6,7 +6,7 @@ const variant = $derived(column.variantFactory ? column.variantFactory(item) : '
 
 {#if getValueForColumn(column, item) !== null}
   <div class="table-badge-cell" class:table-badge-cell--centered={centered}>
-    <Badge variant={variant} fullWidth={column.fullWidth}>{getValueForColumn(column, item)}</Badge>
+    <Badge variant={variant} shape={column.shape ?? 'pill'} fullWidth={column.fullWidth}>{getValueForColumn(column, item)}</Badge>
   </div>
 {/if}
 

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

@@ -5,7 +5,6 @@ import { default as TableBadgeCell } from './table-badge-cell.svelte';
 import { default as TableButtonCell } from './table-button-cell.svelte';
 import { default as TableByCell } from './table-by-cell.svelte';
 import { default as TableCheckboxCell } from './table-checkbox-cell.svelte';
-import { default as TableCustomCell } from './table-custom-cell.svelte';
 import { default as TableIconCell } from './table-icon-cell.svelte';
 import { default as TableImageCell } from './table-image-cell.svelte';
 import { default as TableMoveRowCell } from './table-move-row-cell.svelte';
@@ -52,8 +51,6 @@ const changeItemPosition = (target, positionChange) => {
   <TableByCell column={def} item={item} />
 {:else if def.type === 'checkbox'}
   <TableCheckboxCell item={item} selection={model.selection} />
-{:else if def.type === 'custom'}
-  <TableCustomCell column={def} item={item} />
 {:else if def.type === 'icon'}
   <TableIconCell column={def} item={item} centered={column.centered} />
 {:else if def.type === 'image'}

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

@@ -21,6 +21,14 @@ const getValueForColumn = (column, item) => (column.valueFactory ? column.valueF
         </div>
       </ProportionalContainer>
     </div>
+  {:else if column.format === 'vertical-cover'}
+    <div class="table-image-cell__image table-image-cell__image--vertical-cover">
+      <Image src={getValueForColumn(column, item)} />
+    </div>
+  {:else if column.format === 'horizontal-cover'}
+    <div class="table-image-cell__image table-image-cell__image--horizontal-cover">
+      <Image src={getValueForColumn(column, item)} />
+    </div>
   {/if}
 </div>
 
@@ -35,6 +43,7 @@ const getValueForColumn = (column, item) => (column.valueFactory ? column.valueF
   justify-content: center;
 }
 .table-image-cell__image {
+  --_table-image-cell--cover-height: var(--_table-image-cell--image--size, 2.5em);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -51,10 +60,18 @@ const getValueForColumn = (column, item) => (column.valueFactory ? column.valueF
 }
 .table-image-cell__image--contain {
   --sc-kit--image--object-fit: contain;
-  height: 2.5em;
+  height: var(--_table-image-cell--cover-height);
 }
 .table-image-cell__image--cover {
-  height: 2.5em;
+  height: var(--_table-image-cell--cover-height);
+}
+.table-image-cell__image--vertical-cover {
+  height: var(--_table-image-cell--cover-height);
+  width: calc(var(--_table-image-cell--cover-height) * 9 / 16);
+}
+.table-image-cell__image--horizontal-cover {
+  height: var(--_table-image-cell--cover-height);
+  width: calc(var(--_table-image-cell--cover-height) * 16 / 9);
 }
 .table-image-cell__cover-image-placer {
   width: 100%;

package/dist/ui/table/types.d.ts

@@ -1,15 +1,14 @@
 import type { Repository } from '../../core/repository';
-import type { BadgeVariant } from '../badge';
+import type { BadgeShape, BadgeVariant } from '../badge';
 import type { ButtonSize, ButtonVariant } from '../button';
-import { DynamicComponentModel } from '../dynamic-component';
 import type { IconProp } from '../icon';
 import type { Snippet } from 'svelte';
 export type WithId = {
     id: string;
 };
 export type IAnyTableColumn<T> = IOneOfTableColumn<T>;
-export type IOneOfTableColumn<T> = ITableBadgeColumn<T> | ITableButtonColumn<T> | ITableByColumn<T> | ITableCheckboxColumn | ITableCustomColumn<T> | ITableIconColumn<T> | ITableImageColumn<T> | ITableMoveRowColumn | ITableSnippetColumn<T> | ITableTextColumn<T>;
-export type TableColumnType = 'actions' | 'badge' | 'button' | 'by' | 'checkbox' | 'custom' | 'icon' | 'image' | 'move-row' | 'snippet' | 'text';
+export type IOneOfTableColumn<T> = ITableBadgeColumn<T> | ITableButtonColumn<T> | ITableByColumn<T> | ITableCheckboxColumn | ITableIconColumn<T> | ITableImageColumn<T> | ITableMoveRowColumn | ITableSnippetColumn<T> | ITableTextColumn<T>;
+export type TableColumnType = 'actions' | 'badge' | 'button' | 'by' | 'checkbox' | 'icon' | 'image' | 'move-row' | 'snippet' | 'text';
 interface ITableColumnBase {
     type: TableColumnType;
     fixedCssWidth?: string;
@@ -37,6 +36,8 @@ export interface ITableBadgeColumn<T> extends ITableColumn<T> {
     valueFactory?: ((item: T) => string) | null;
     /** Stretch the badge to fill the column width. @default false */
     fullWidth?: boolean;
+    /** Corner style of the rendered badge. @default 'pill' */
+    shape?: BadgeShape;
 }
 export interface ITableByColumn<T> extends ITableColumn<T> {
     type: 'by';
@@ -68,10 +69,6 @@ export interface ITableButtonColumn<T> extends ITableColumn<T> {
 export interface ITableCheckboxColumn extends ITableColumnBase {
     type: 'checkbox';
 }
-export interface ITableCustomColumn<T> extends ITableColumn<T> {
-    type: 'custom';
-    componentFactory: (item: T) => DynamicComponentModel;
-}
 export interface ITableIconColumn<T> extends ITableColumn<T> {
     type: 'icon';
     iconFactory?: ((item: T) => IconProp) | null;
@@ -101,7 +98,7 @@ export interface ITableTextColumn<T> extends ITableColumn<T> {
     valueFactory?: ((item: T) => string) | null;
 }
 export type TableTextColumnFormat = 'text' | 'html' | 'money' | 'date' | 'date-time';
-export type TableImageColumnFormat = 'circle' | 'square-contain' | 'square-cover';
+export type TableImageColumnFormat = 'circle' | 'square-contain' | 'square-cover' | 'vertical-cover' | 'horizontal-cover';
 export type TableItemAction<T> = {
     title: string;
     icon?: IconProp;

package/dist/ui/table/types.js

@@ -1 +1 @@
-import { DynamicComponentModel } from '../dynamic-component';
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -335,6 +335,10 @@
       "types": "./dist/ui/progress/index.d.ts",
       "svelte": "./dist/ui/progress/index.js"
     },
+    "./ui/progress-bar": {
+      "types": "./dist/ui/progress-bar/index.d.ts",
+      "svelte": "./dist/ui/progress-bar/index.js"
+    },
     "./ui/proportional-container": {
       "types": "./dist/ui/proportional-container/index.d.ts",
       "svelte": "./dist/ui/proportional-container/index.js"

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

@@ -1,5 +0,0 @@
-<script lang="ts" generics="T extends {id: string}">import { DynamicComponent } from '../../dynamic-component';
-let { item, column } = $props();
-</script>
-
-<DynamicComponent model={column.componentFactory(item)} />

package/dist/ui/table/table-cells/table-custom-cell.svelte.d.ts

@@ -1,38 +0,0 @@
-import type { ITableCustomColumn } from '../types';
-declare function $$render<T extends {
-    id: string;
-}>(): {
-    props: {
-        item: T;
-        column: ITableCustomColumn<T>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends {
-    id: string;
-}> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends {
-        id: string;
-    }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends {
-        id: string;
-    }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const TableCustomCell: $$IsomorphicComponent;
-type TableCustomCell<T extends {
-    id: string;
-}> = InstanceType<typeof TableCustomCell<T>>;
-export default TableCustomCell;