@streamscloud/kit 0.22.0 → 0.24.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/fit-box/cmp.fit-box.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">import { containFit } from './contain-fit';
+const { basis = 'box', allowUpscale = false, alignInline = 'center', alignBlock = 'center', children } = $props();
+</script>
+
+<div class="fit-box">
+  <div class="fit-box__scaler" class:fit-box__scaler--natural={basis === 'content'} use:containFit={{ allowUpscale, alignInline, alignBlock }}>
+    {@render children()}
+  </div>
+</div>
+
+<!--
+@component
+Scales its content as one unit to fit the box like `object-fit: contain` — proportions preserved, bounded by both the box's width and
+height, no crop, no scroll. A generic fit primitive for **cards and media content** (a card, an image/video, a fixed-size widget), not a
+page-layout tool.
+
+How it works: the box is `FitBox`'s **parent**, which must have a **definite size** (fixed / `%` / grid-track / aspect-ratio+width — a
+content-driven `height: auto` parent collapses and nothing shows). The content is measured, then transform-scaled by
+`min(boxW / contentW, boxH / contentH)` and positioned; a `ResizeObserver` re-fits on any box or content change.
+
+Pick the mode with `basis`:
+- `basis="box"` (default) — fluid, width-driven content (cards, text, single-aspect media). Fills the box width, scales down to fit the
+  height. Never enlarges.
+- `basis="content"` — intrinsic content (`<img>` / `<video>`, fixed-size widgets). Keeps the content's natural size and fits both axes;
+  set `allowUpscale` to also enlarge it to fill.
+
+`alignInline` / `alignBlock` place the content along an axis when fitting leaves free space there. Requires client-side JS (scales via
+`transform`, so `position: fixed` descendants are relative to the box); content with a hard fixed width wider than the box is clipped
+rather than contained.
+-->
+
+<style>.fit-box {
+  position: relative;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+}
+.fit-box__scaler {
+  position: absolute;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  visibility: hidden;
+}
+.fit-box__scaler--natural {
+  inline-size: auto;
+}</style>

package/dist/ui/fit-box/cmp.fit-box.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { FitAlign, FitBasis } from './types';
+import type { Snippet } from 'svelte';
+type Props = {
+    /**
+     * What the content's width is based on before it is scaled to fit:
+     * - `'box'` — content is laid out at the **box width** first (use for fluid, width-driven content: a card, a text block, single-aspect
+     *   media). Height follows from that width; the content is then scaled **down** only if too tall. Never enlarges.
+     * - `'content'` — content keeps its **own natural size** (use for intrinsic content: `<img>` / `<video>`, a fixed-size widget). It is
+     *   scaled to fit **both** axes and may be enlarged when `allowUpscale` is set.
+     * @default 'box'
+     */
+    basis?: FitBasis;
+    /** Allow scaling content up past its natural size to fill the box. Takes effect only with `basis="content"` (`'box'` never enlarges). @default false */
+    allowUpscale?: boolean;
+    /** Inline-axis (horizontal) placement of the fitted content, visible only when free width remains after fitting. @default 'center' */
+    alignInline?: FitAlign;
+    /** Block-axis (vertical) placement of the fitted content, visible only when free height remains after fitting. @default 'center' */
+    alignBlock?: FitAlign;
+    children: Snippet;
+};
+/**
+ * Scales its content as one unit to fit the box like `object-fit: contain` — proportions preserved, bounded by both the box's width and
+ * height, no crop, no scroll. A generic fit primitive for **cards and media content** (a card, an image/video, a fixed-size widget), not a
+ * page-layout tool.
+ *
+ * How it works: the box is `FitBox`'s **parent**, which must have a **definite size** (fixed / `%` / grid-track / aspect-ratio+width — a
+ * content-driven `height: auto` parent collapses and nothing shows). The content is measured, then transform-scaled by
+ * `min(boxW / contentW, boxH / contentH)` and positioned; a `ResizeObserver` re-fits on any box or content change.
+ *
+ * Pick the mode with `basis`:
+ * - `basis="box"` (default) — fluid, width-driven content (cards, text, single-aspect media). Fills the box width, scales down to fit the
+ * height. Never enlarges.
+ * - `basis="content"` — intrinsic content (`<img>` / `<video>`, fixed-size widgets). Keeps the content's natural size and fits both axes;
+ * set `allowUpscale` to also enlarge it to fill.
+ *
+ * `alignInline` / `alignBlock` place the content along an axis when fitting leaves free space there. Requires client-side JS (scales via
+ * `transform`, so `position: fixed` descendants are relative to the box); content with a hard fixed width wider than the box is clipped
+ * rather than contained.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/fit-box/contain-fit.d.ts

@@ -0,0 +1,8 @@
+import type { FitAlign } from './types';
+import type { Action } from 'svelte/action';
+export type ContainFitParams = {
+    allowUpscale?: boolean;
+    alignInline?: FitAlign;
+    alignBlock?: FitAlign;
+};
+export declare const containFit: Action<HTMLElement, ContainFitParams | undefined>;

package/dist/ui/fit-box/contain-fit.js

@@ -0,0 +1,47 @@
+const offset = (align, free) => (align === 'start' ? 0 : align === 'end' ? free : free / 2);
+export const containFit = (node, params = {}) => {
+    const container = node.parentElement;
+    let allowUpscale = params.allowUpscale ?? false;
+    let alignInline = params.alignInline ?? 'center';
+    let alignBlock = params.alignBlock ?? 'center';
+    const apply = () => {
+        if (!container) {
+            return;
+        }
+        const boxWidth = container.clientWidth;
+        const boxHeight = container.clientHeight;
+        const naturalWidth = node.offsetWidth;
+        const naturalHeight = node.offsetHeight;
+        if (!boxWidth || !boxHeight || !naturalWidth || !naturalHeight) {
+            return;
+        }
+        let scale = Math.min(boxWidth / naturalWidth, boxHeight / naturalHeight);
+        if (!allowUpscale) {
+            scale = Math.min(scale, 1);
+        }
+        const left = offset(alignInline, boxWidth - naturalWidth * scale);
+        const top = offset(alignBlock, boxHeight - naturalHeight * scale);
+        node.style.transformOrigin = '0 0';
+        node.style.transform = `scale(${scale})`;
+        node.style.left = `${left}px`;
+        node.style.top = `${top}px`;
+        node.style.visibility = 'visible';
+    };
+    const observer = new ResizeObserver(apply);
+    if (container) {
+        observer.observe(container);
+    }
+    observer.observe(node);
+    apply();
+    return {
+        update(next = {}) {
+            allowUpscale = next.allowUpscale ?? false;
+            alignInline = next.alignInline ?? 'center';
+            alignBlock = next.alignBlock ?? 'center';
+            apply();
+        },
+        destroy() {
+            observer.disconnect();
+        }
+    };
+};

package/dist/ui/fit-box/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FitBox } from './cmp.fit-box.svelte';
+export type { FitAlign, FitBasis } from './types';

package/dist/ui/fit-box/index.js

@@ -0,0 +1 @@
+export { default as FitBox } from './cmp.fit-box.svelte';

package/dist/ui/fit-box/types.d.ts

@@ -0,0 +1,2 @@
+export type FitAlign = 'start' | 'center' | 'end';
+export type FitBasis = 'box' | 'content';

package/dist/ui/fit-box/types.js

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

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

@@ -3,7 +3,7 @@ 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, compare, on } = $props();
 const localization = new ToolbarSortSelectLocalization();
 const orderByLabel = $derived(label ?? localization.orderBy);
 const selection = $derived([value]);
@@ -14,18 +14,28 @@ const onChange = (next) => {
 };
 </script>
 
-<ToolbarFilterSelect label={orderByLabel} single footer={false} size={size} options={options} value={selection} compare={compare} on={{ change: onChange }}>
+{#snippet defaultTrigger()}
+  <ToolbarIconButton presentational icon={IconFilter} size={size} />
+{/snippet}
+
+<ToolbarFilterSelect
+  label={orderByLabel}
+  single
+  footer={false}
+  size={size}
+  options={options}
+  value={selection}
+  compare={compare}
+  trigger={trigger ?? defaultTrigger}
+  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.
+(`ToolbarIconButton` by default, or a custom `trigger` 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;
+        /** Custom presentational trigger content — replaces the default filter-icon button (the popover owns the click and is named by `label`). */
+        trigger?: Snippet;
         /** Equality comparator — required when `S` is an object. */
         compare?: (a: S, b: S) => boolean;
         on?: {
@@ -36,8 +37,8 @@ interface $$IsomorphicComponent {
 }
 /**
  * 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.
+ * (`ToolbarIconButton` by default, or a custom `trigger` 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-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,92 @@
+<script lang="ts">import { Tooltip } from '../tooltip';
+import { ProgressBarLocalization } from './progress-bar-localization';
+import { PROGRESS_BAR_TONES } from './types';
+const { stage, stages, 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">
+  {#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. `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` | Bar segment height | `4px` |
+| `--sc-kit--progress-bar--segment--gap` | Gap between segments | `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, 0.25rem);
+  --_pb--seg-gap: var(--sc-kit--progress-bar--segment--gap, 0.125rem);
+  --_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);
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+.progress-bar__track {
+  display: flex;
+  align-items: center;
+  gap: var(--_pb--seg-gap);
+  width: 100%;
+  padding-block: var(--_pb--track-padding-block);
+}
+.progress-bar__segment {
+  flex: 1;
+  height: var(--_pb--seg-height);
+  background: var(--_pb--seg-empty);
+  border-radius: 0.0625rem;
+}
+.progress-bar__segment--filled {
+  background: var(--_--pb--segment-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,32 @@
+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[];
+    /** 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. `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` | Bar segment height | `4px` |
+ * | `--sc-kit--progress-bar--segment--gap` | Gap between segments | `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-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,5 +1,5 @@
 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';
@@ -37,6 +37,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';
@@ -101,7 +103,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -195,6 +195,10 @@
       "types": "./dist/ui/file-uploader/index.d.ts",
       "svelte": "./dist/ui/file-uploader/index.js"
     },
+    "./ui/fit-box": {
+      "types": "./dist/ui/fit-box/index.d.ts",
+      "svelte": "./dist/ui/fit-box/index.js"
+    },
     "./ui/form-field": {
       "types": "./dist/ui/form-field/index.d.ts",
       "svelte": "./dist/ui/form-field/index.js"
@@ -331,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"