@streamscloud/kit 0.24.0 → 0.25.1

package/dist/styles/_semantic.scss

@@ -65,16 +65,22 @@
   // 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--muted: light-dark(#{$color-neutral-400}, #{$color-neutral-600});
   --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--muted: light-dark(#{$color-blue-200}, #{$color-blue-700});
   --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--muted: light-dark(#{$color-green-200}, #{$color-green-700});
   --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--muted: light-dark(#{$color-red-200}, #{$color-red-700});
   --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--muted: light-dark(#{$color-orange-200}, #{$color-orange-700});
   --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--muted: light-dark(#3d7068, #5f938a);
   --sc-kit--tone--teal--bg: light-dark(#eef4f3, #16302b);
 
   // ============================================================

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

@@ -1,12 +1,16 @@
-<script lang="ts" generics="S">import ToolbarFilterSelect from './cmp.toolbar-filter-select.svelte';
+<script lang="ts" generics="S">import { Button } from '../button';
+import { IconText } from '../icon-text';
+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 IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconFilter from '@fluentui/svg-icons/icons/filter_20_regular.svg?raw';
-const { options, value, label, size = 'sm', trigger, 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,10 +18,16 @@ const onChange = (next) => {
 };
 </script>
 
-{#snippet defaultTrigger()}
+{#snippet iconTrigger()}
   <ToolbarIconButton presentational icon={IconFilter} size={size} />
 {/snippet}
 
+{#snippet buttonTrigger()}
+  <Button type="presentational" variant="secondary" size={size}>
+    <IconText icon={IconFilter} secondaryIcon={IconChevronDown} size={size} iconScale="large" trimText>{localization.sorting}</IconText>
+  </Button>
+{/snippet}
+
 <ToolbarFilterSelect
   label={orderByLabel}
   single
@@ -26,7 +36,7 @@ const onChange = (next) => {
   options={options}
   value={selection}
   compare={compare}
-  trigger={trigger ?? defaultTrigger}
+  trigger={resolvedTrigger}
   on={{ change: onChange }}>
   {#snippet header()}
     <ToolbarSectionTitle>{orderByLabel}</ToolbarSectionTitle>
@@ -35,7 +45,8 @@ const onChange = (next) => {
 
 <!--
 @component
-A toolbar sort control: a `ToolbarFilterSelect` in single-select mode behind a flat icon trigger
-(`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.
+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

@@ -8,8 +8,8 @@ declare function $$render<S>(): {
         label?: string;
         /** Button size preset — sm = 28px, md = 32px. @default 'sm' */
         size?: "sm" | "md";
-        /** Custom presentational trigger content — replaces the default filter-icon button (the popover owns the click and is named by `label`). */
-        trigger?: Snippet;
+        /** 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?: {
@@ -36,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` 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.
+ * 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/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/progress-bar/cmp.progress-bar.svelte

@@ -1,18 +1,18 @@
 <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 { 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;
+    return PROGRESS_BAR_TONES.includes(value) ? `var(--sc-kit--tone--${value}--muted)` : value;
 };
 </script>
 
-<div class="progress-bar">
+<div class="progress-bar" class:progress-bar--pips={variant === 'pips'}>
   {#if tooltipLabel}
     <Tooltip text={tooltipLabel}>
       {@render track()}
@@ -45,45 +45,65 @@ const segmentColor = (s) => {
 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
+palette (resolved to its muted shade, e.g. `'green'` → `--sc-kit--tone--green--muted`) 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.
+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` | Bar segment height | `4px` |
-| `--sc-kit--progress-bar--segment--gap` | Gap between segments | `2px` |
+| `--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, 0.25rem);
-  --_pb--seg-gap: var(--sc-kit--progress-bar--segment--gap, 0.125rem);
+  --_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: 100%;
+  width: var(--_pb--track-width);
   padding-block: var(--_pb--track-padding-block);
 }
 .progress-bar__segment {
-  flex: 1;
+  --_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: 0.0625rem;
+  border-radius: var(--_pb--seg-radius);
 }
 .progress-bar__segment--filled {
-  background: var(--_--pb--segment-color);
+  background: var(--_pb--seg-color);
 }
 .progress-bar__label {
   font-size: 0.625rem;

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

@@ -7,6 +7,8 @@ type Props = {
      * 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;
 };
@@ -14,16 +16,20 @@ type Props = {
  * 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
+ * palette (resolved to its muted shade, e.g. `'green'` → `--sc-kit--tone--green--muted`) 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.
+ * 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` | Bar segment height | `4px` |
- * | `--sc-kit--progress-bar--segment--gap` | Gap between segments | `2px` |
+ * | `--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` |
  */

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/types.d.ts

@@ -1,15 +1,14 @@
 import type { Repository } from '../../core/repository';
 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;
@@ -70,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;

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

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;