@streamscloud/kit 0.16.2 → 0.18.0

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

@@ -2,21 +2,29 @@ import type { IconProp } from '../icon';
 import type { Placement } from '@floating-ui/dom';
 import type { Snippet } from 'svelte';
 type Props = {
-    title: string;
     triggerLabel: string;
     /** Leading icon on the trigger button. */
     icon?: IconProp;
     /** Button size preset — shared with the kit Button. @default 'sm' */
     size?: 'sm' | 'md' | 'lg';
-    /** @default 'bottom-end' */
+    /** Render the trigger as a borderless (ghost) button instead of secondary. @default false */
+    borderless?: boolean;
+    /** @default 'bottom-start' */
     position?: Placement;
+    /** Lay the panel content out as a flex column, so callers don't wrap it themselves. @default true */
+    columnFlex?: boolean;
     children: Snippet;
-    footer?: Snippet;
 };
 /**
- * A toolbar popover button. Opens a `ToolbarPanel` with a title, body content, and optional footer.
- * The trigger is a secondary `Button` so size shares the same `sm | md | lg` preset as other field-shaped
- * toolbar controls — keeps everything aligned at the same row height.
+ * A toolbar popover button — a secondary `Button` trigger (sharing the `sm | md | lg` field size preset)
+ * opening a `Popover` panel. By default the content is laid out as a flex column (`columnFlex`); pass
+ * `columnFlex={false}` to render it raw. Compose the panel from `ToolbarOption`, `ToolbarSectionTitle`,
+ * `ToolbarDivider`, etc.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-popover--gap` | Gap between flex-column children | `0.125rem` (2px) |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/page-toolbar/cmp.toolbar-section-title.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">const { size = 'xs', spaced = false, children } = $props();
+export {};
+</script>
+
+<div class="toolbar-section-title toolbar-section-title--{size}" class:toolbar-section-title--spaced={spaced}>{@render children()}</div>
+
+<!--
+@component
+A non-interactive section label inside a toolbar dropdown (e.g. `FIELDS` above a column list).
+Matches the kit select listbox group-header style. `spaced` adds extra top padding to set the
+section off from content above it.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-section-title--color` | Text color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--toolbar-section-title--font-family` | Font family | `var(--sc-kit--font--mono)` |
+| `--sc-kit--toolbar-section-title--font-size` | Font size | per size (xs / sm / md) |
+| `--sc-kit--toolbar-section-title--padding-block-start` | Top padding | per `spaced` |
+-->
+
+<style>.toolbar-section-title {
+  --_title--color: var(--sc-kit--toolbar-section-title--color, var(--sc-kit--color--text--muted));
+  --_title--font-family: var(--sc-kit--toolbar-section-title--font-family, var(--sc-kit--font--mono));
+  --_title--font-size: var(--sc-kit--toolbar-section-title--font-size, var(--_title--size-font-size));
+  --_title--padding-block-start: var(--sc-kit--toolbar-section-title--padding-block-start, var(--sc-kit--space--1));
+  padding: var(--_title--padding-block-start) var(--sc-kit--space--2) var(--sc-kit--space--1);
+  color: var(--_title--color);
+  font-family: var(--_title--font-family);
+  font-size: var(--_title--font-size);
+  font-weight: var(--sc-kit--font-weight--medium);
+  text-transform: uppercase;
+  letter-spacing: var(--sc-kit--letter-spacing--wide);
+}
+.toolbar-section-title--xs {
+  --_title--size-font-size: var(--sc-kit--font-size--xs);
+}
+.toolbar-section-title--sm {
+  --_title--size-font-size: var(--sc-kit--font-size--sm);
+}
+.toolbar-section-title--md {
+  --_title--size-font-size: var(--sc-kit--font-size--md);
+}
+.toolbar-section-title--spaced {
+  --_title--padding-block-start: var(--sc-kit--space--3);
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-section-title.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Font size. @default 'xs' */
+    size?: 'xs' | 'sm' | 'md';
+    /** Add extra top padding to separate the section from content above it. @default false */
+    spaced?: boolean;
+    children: Snippet;
+};
+/**
+ * A non-interactive section label inside a toolbar dropdown (e.g. `FIELDS` above a column list).
+ * Matches the kit select listbox group-header style. `spaced` adds extra top padding to set the
+ * section off from content above it.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-section-title--color` | Text color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--toolbar-section-title--font-family` | Font family | `var(--sc-kit--font--mono)` |
+ * | `--sc-kit--toolbar-section-title--font-size` | Font size | per size (xs / sm / md) |
+ * | `--sc-kit--toolbar-section-title--padding-block-start` | Top padding | per `spaced` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,31 @@
+<script lang="ts" generics="S">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 localization = new ToolbarSortSelectLocalization();
+const orderByLabel = $derived(label ?? localization.orderBy);
+const selection = $derived([value]);
+const onChange = (next) => {
+    if (next.length > 0) {
+        on?.change?.(next[0]);
+    }
+};
+</script>
+
+<ToolbarFilterSelect label={orderByLabel} single footer={false} size={size} options={options} value={selection} compare={compare} 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.
+-->

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

@@ -0,0 +1,44 @@
+import type { SelectItem } from '../select';
+declare function $$render<S>(): {
+    props: {
+        options: SelectItem<S>[];
+        value: S;
+        /** Title shown above the options. @default localized `Order by` */
+        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;
+        /** Equality comparator — required when `S` is an object. */
+        compare?: (a: S, b: S) => boolean;
+        on?: {
+            change?: (value: S) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<S> {
+    props(): ReturnType<typeof $$render<S>>['props'];
+    events(): ReturnType<typeof $$render<S>>['events'];
+    slots(): ReturnType<typeof $$render<S>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <S>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<S>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<S>['props']>, ReturnType<__sveltets_Render<S>['events']>, ReturnType<__sveltets_Render<S>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<S>['bindings']>;
+    } & ReturnType<__sveltets_Render<S>['exports']>;
+    <S>(internal: unknown, props: ReturnType<__sveltets_Render<S>['props']> & {}): ReturnType<__sveltets_Render<S>['exports']>;
+    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.
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<S> = InstanceType<typeof Cmp<S>>;
+export default Cmp;

package/dist/ui/page-toolbar/{cmp.toolbar-switch-item.svelte → cmp.toolbar-switch.svelte}

@@ -2,45 +2,45 @@
 const { segments, value, children, on } = $props();
 </script>
 
-<div class="toolbar-switch-item">
-  <div class="toolbar-switch-item__label">
+<div class="toolbar-switch">
+  <div class="toolbar-switch__label">
     {@render children()}
   </div>
-  <div class="toolbar-switch-item__switch">
+  <div class="toolbar-switch__switch">
     <SegmentedControl segments={segments} value={value} variant="outlined" size="sm" on={{ change: (v: T) => on?.change?.(v) }} />
   </div>
 </div>
 
 <!--
 @component
-A switch item for toolbar panels. Shows a label on the left and a segmented control on the right.
+A labeled switch for toolbar dropdowns. Shows a label on the left and a segmented control on the right.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--toolbar-switch-item--label--color` | Label text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--toolbar-switch--label--color` | Label text color | `var(--sc-kit--color--text--primary)` |
 -->
 
-<style>.toolbar-switch-item {
-  --_toolbar-switch-item--label--color: var(--sc-kit--toolbar-switch-item--label--color, var(--sc-kit--color--text--primary));
+<style>.toolbar-switch {
+  --_toolbar-switch--label--color: var(--sc-kit--toolbar-switch--label--color, var(--sc-kit--color--text--primary));
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--sc-kit--space--2);
   padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
 }
-.toolbar-switch-item__label {
+.toolbar-switch__label {
   font-size: var(--sc-kit--font-size--md);
   font-weight: var(--sc-kit--font-weight--regular);
   line-height: var(--sc-kit--line-height--md);
-  color: var(--_toolbar-switch-item--label--color);
+  color: var(--_toolbar-switch--label--color);
   min-width: 0;
   text-overflow: ellipsis;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
 }
-.toolbar-switch-item__switch {
+.toolbar-switch__switch {
   flex-shrink: 0;
   --sc-kit--segmented-control--border-radius: var(--sc-kit--radius--md);
   --sc-kit--segmented-control--background--active: var(--sc-kit--color--accent);

package/dist/ui/page-toolbar/{cmp.toolbar-switch-item.svelte.d.ts → cmp.toolbar-switch.svelte.d.ts}

@@ -29,12 +29,12 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
- * A switch item for toolbar panels. Shows a label on the left and a segmented control on the right.
+ * A labeled switch for toolbar dropdowns. Shows a label on the left and a segmented control on the right.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--toolbar-switch-item--label--color` | Label text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--toolbar-switch--label--color` | Label text color | `var(--sc-kit--color--text--primary)` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T> = InstanceType<typeof Cmp<T>>;

package/dist/ui/page-toolbar/cmp.toolbar-toggle.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">import ToolbarOption from './cmp.toolbar-option.svelte';
+const { checked, size = 'md', disabled = false, children, on } = $props();
+</script>
+
+<ToolbarOption size={size} disabled={disabled} selectable={{ selected: checked, display: 'switch' }} on={{ click: () => on?.change?.(!checked) }}>
+  {@render children()}
+</ToolbarOption>
+
+<!--
+@component
+A toggle row for toolbar dropdowns — a thin wrapper over `ToolbarOption` with a trailing switch. The
+whole row is the click target; clicking flips `checked` through `on.change`. The switch is a
+presentational `Toggle` sized to the option glyph; sizing and styling come from `ToolbarOption`.
+-->

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    checked: boolean;
+    /** Row density — forwarded to `ToolbarOption`. @default 'md' */
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    children: Snippet;
+    on?: {
+        change?: (value: boolean) => void;
+    };
+};
+/**
+ * A toggle row for toolbar dropdowns — a thin wrapper over `ToolbarOption` with a trailing switch. The
+ * whole row is the click target; clicking flips `checked` through `on.change`. The switch is a
+ * presentational `Toggle` sized to the option glyph; sizing and styling come from `ToolbarOption`.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -48,20 +48,23 @@ Shares the field-height preset so it lines up with other toolbar controls.
   block-size: var(--_toolbar-value-stepper--height);
   padding-inline: var(--sc-kit--space--2);
   border: 1px solid var(--sc-kit--color--border--field);
-  border-radius: var(--sc-kit--radius--md);
+  border-radius: var(--_toolbar-value-stepper--border-radius, var(--sc-kit--field--border-radius--md));
   background: var(--sc-kit--color--bg--field);
 }
 .toolbar-value-stepper--sm {
   --_toolbar-value-stepper--height: var(--sc-kit--field--height--sm);
   --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--sm);
+  --_toolbar-value-stepper--border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .toolbar-value-stepper--md {
   --_toolbar-value-stepper--height: var(--sc-kit--field--height--md);
   --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--md);
+  --_toolbar-value-stepper--border-radius: var(--sc-kit--field--border-radius--md);
 }
 .toolbar-value-stepper--lg {
   --_toolbar-value-stepper--height: var(--sc-kit--field--height--lg);
   --_toolbar-value-stepper--font-size: var(--sc-kit--font-size--lg);
+  --_toolbar-value-stepper--border-radius: var(--sc-kit--field--border-radius--md);
 }
 .toolbar-value-stepper__btn {
   display: inline-flex;

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

@@ -0,0 +1,51 @@
+<script lang="ts">import { LocalStorageItem } from '../../core/local-storage';
+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 { untrack } from 'svelte';
+const { view, size = 'sm', viewStorageKey, prepend, on } = $props();
+const localization = new ToolbarViewControlsLocalization();
+let storage = null;
+$effect(() => untrack(() => {
+    if (!viewStorageKey) {
+        return;
+    }
+    storage = LocalStorageItem.of(viewStorageKey);
+    const saved = storage.get();
+    if (saved === 'list' || saved === 'grid') {
+        on?.viewChange?.(saved);
+    }
+}));
+const setView = (next) => {
+    storage?.set(next);
+    on?.viewChange?.(next);
+};
+</script>
+
+<div class="toolbar-view-controls" role="group" aria-label={localization.label}>
+  {#if prepend}
+    {@render prepend()}
+  {/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') }} />
+</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.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-view-controls--gap` | Gap between the controls | `var(--sc-kit--space--3)` |
+-->
+
+<style>.toolbar-view-controls {
+  --_tvc--gap: var(--sc-kit--toolbar-view-controls--gap, var(--sc-kit--space--3));
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_tvc--gap);
+}</style>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+type ViewMode = 'list' | 'grid';
+type Props = {
+    view: ViewMode;
+    /** Button size preset — sm = 28px, md = 32px. @default 'sm' */
+    size?: 'sm' | 'md';
+    /** Persist the view mode under this localStorage key. */
+    viewStorageKey?: string;
+    /** Leading content before the view toggle — e.g. a composed `ToolbarSortSelect`. */
+    prepend?: Snippet;
+    on?: {
+        viewChange?: (view: ViewMode) => void;
+    };
+};
+/**
+ * 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.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-view-controls--gap` | Gap between the controls | `var(--sc-kit--space--3)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/index.d.ts

@@ -1,11 +1,16 @@
-export { default as ReorderableToggleList } from './cmp.reorderable-toggle-list.svelte';
-export { default as ToolbarCheckboxItem } from './cmp.toolbar-checkbox-item.svelte';
-export { default as ToolbarPanel } from './cmp.toolbar-panel.svelte';
-export { default as ToolbarPanelButton } from './cmp.toolbar-panel-button.svelte';
+export { default as ReorderableCheckboxList } from './cmp.reorderable-checkbox-list.svelte';
+export { default as ToolbarCheckbox } from './cmp.toolbar-checkbox.svelte';
+export { default as ToolbarDivider } from './cmp.toolbar-divider.svelte';
+export { default as ToolbarFilterSelect } from './cmp.toolbar-filter-select.svelte';
+export { default as ToolbarIconButton } from './cmp.toolbar-icon-button.svelte';
+export { default as ToolbarOption } from './cmp.toolbar-option.svelte';
 export { default as ToolbarPopover } from './cmp.toolbar-popover.svelte';
 export { default as ToolbarSearchInput } from './cmp.toolbar-search-input.svelte';
+export { default as ToolbarSectionTitle } from './cmp.toolbar-section-title.svelte';
 export { default as ToolbarSegmentedControl } from './cmp.toolbar-segmented-control.svelte';
-export { default as ToolbarSwitchItem } from './cmp.toolbar-switch-item.svelte';
-export { default as ToolbarToggleItem } from './cmp.toolbar-toggle-item.svelte';
+export { default as ToolbarSortSelect } from './cmp.toolbar-sort-select.svelte';
+export { default as ToolbarSwitch } from './cmp.toolbar-switch.svelte';
+export { default as ToolbarToggle } from './cmp.toolbar-toggle.svelte';
 export { default as ToolbarValueStepper } from './cmp.toolbar-value-stepper.svelte';
-export type { ReorderableToggleItem } from './types';
+export { default as ToolbarViewControls } from './cmp.toolbar-view-controls.svelte';
+export type { ReorderableCheckboxItem } from './types';

package/dist/ui/page-toolbar/index.js

@@ -1,10 +1,15 @@
-export { default as ReorderableToggleList } from './cmp.reorderable-toggle-list.svelte';
-export { default as ToolbarCheckboxItem } from './cmp.toolbar-checkbox-item.svelte';
-export { default as ToolbarPanel } from './cmp.toolbar-panel.svelte';
-export { default as ToolbarPanelButton } from './cmp.toolbar-panel-button.svelte';
+export { default as ReorderableCheckboxList } from './cmp.reorderable-checkbox-list.svelte';
+export { default as ToolbarCheckbox } from './cmp.toolbar-checkbox.svelte';
+export { default as ToolbarDivider } from './cmp.toolbar-divider.svelte';
+export { default as ToolbarFilterSelect } from './cmp.toolbar-filter-select.svelte';
+export { default as ToolbarIconButton } from './cmp.toolbar-icon-button.svelte';
+export { default as ToolbarOption } from './cmp.toolbar-option.svelte';
 export { default as ToolbarPopover } from './cmp.toolbar-popover.svelte';
 export { default as ToolbarSearchInput } from './cmp.toolbar-search-input.svelte';
+export { default as ToolbarSectionTitle } from './cmp.toolbar-section-title.svelte';
 export { default as ToolbarSegmentedControl } from './cmp.toolbar-segmented-control.svelte';
-export { default as ToolbarSwitchItem } from './cmp.toolbar-switch-item.svelte';
-export { default as ToolbarToggleItem } from './cmp.toolbar-toggle-item.svelte';
+export { default as ToolbarSortSelect } from './cmp.toolbar-sort-select.svelte';
+export { default as ToolbarSwitch } from './cmp.toolbar-switch.svelte';
+export { default as ToolbarToggle } from './cmp.toolbar-toggle.svelte';
 export { default as ToolbarValueStepper } from './cmp.toolbar-value-stepper.svelte';
+export { default as ToolbarViewControls } from './cmp.toolbar-view-controls.svelte';

package/dist/ui/page-toolbar/reorderable-checkbox-list-localization.d.ts

@@ -0,0 +1,5 @@
+export declare class ReorderableCheckboxListLocalization {
+    get clearAll(): string;
+    get standard(): string;
+    get allFields(): string;
+}

package/dist/ui/page-toolbar/reorderable-checkbox-list-localization.js

@@ -0,0 +1,17 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    clearAll: { en: 'Clear all', no: 'Tøm alt' },
+    standard: { en: 'Standard', no: 'Standard' },
+    allFields: { en: 'All fields', no: 'Alle felter' }
+};
+export class ReorderableCheckboxListLocalization {
+    get clearAll() {
+        return loc.clearAll[AppLocale.current];
+    }
+    get standard() {
+        return loc.standard[AppLocale.current];
+    }
+    get allFields() {
+        return loc.allFields[AppLocale.current];
+    }
+}

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

@@ -0,0 +1,5 @@
+export declare class ToolbarFilterSelectLocalization {
+    get selectedCount(): (count: number) => string;
+    get clearAll(): string;
+    get clear(): string;
+}

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

@@ -0,0 +1,20 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    selectedCount: {
+        en: (count) => `${count} selected`,
+        no: (count) => `${count} valgt`
+    },
+    clearAll: { en: 'Clear all', no: 'Tøm alt' },
+    clear: { en: 'Clear', no: 'Tøm' }
+};
+export class ToolbarFilterSelectLocalization {
+    get selectedCount() {
+        return loc.selectedCount[AppLocale.current];
+    }
+    get clearAll() {
+        return loc.clearAll[AppLocale.current];
+    }
+    get clear() {
+        return loc.clear[AppLocale.current];
+    }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+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' }
+};
+export class ToolbarViewControlsLocalization {
+    get label() {
+        return loc.label[AppLocale.current];
+    }
+    get listView() {
+        return loc.listView[AppLocale.current];
+    }
+    get gridView() {
+        return loc.gridView[AppLocale.current];
+    }
+}

package/dist/ui/page-toolbar/types.d.ts

@@ -1,4 +1,4 @@
-export type ReorderableToggleItem = {
+export type ReorderableCheckboxItem = {
     id: string;
     label: string;
     enabled: boolean;

package/dist/ui/rich-text-input/cmp.rich-text-input.svelte

@@ -172,14 +172,14 @@ body, or an external host element addressed by `options.fixedToolbarId`). Impera
 | `--sc-kit--rich-text-input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
 | `--sc-kit--rich-text-input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
 | `--sc-kit--rich-text-input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
-| `--sc-kit--rich-text-input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--rich-text-input--border-radius` | Border radius | per size — `sm` 4px, `md`/`lg` 6px |
 | `--sc-kit--rich-text-input--underline-color` | Inset bottom-underline (transparent default, accent on focus-within, danger on error) | `transparent` |
 | `--sc-kit--rich-text-input--color` | Text color | `var(--sc-kit--color--text--primary)` |
 | `--sc-kit--rich-text-input--placeholder--color` | Placeholder color | `var(--sc-kit--color--text--placeholder)` |
 -->
 
 <style>.rich-text-input {
-  --_rti--root-font-size: var(--sc-kit--rich-text-input--root--font-size, 1rem);
+  --_rti--root-font-size: var(--sc-kit--rich-text-input--root--font-size, var(--_rti--size-root-font-size, 1rem));
   --_rti--padding-block: var(--sc-kit--rich-text-input--padding-block, 0.5em);
   --_rti--padding-inline: var(--sc-kit--rich-text-input--padding-inline, 0.75em);
   --_rti--width: var(--sc-kit--rich-text-input--width, 100%);
@@ -189,7 +189,7 @@ body, or an external host element addressed by `options.fixedToolbarId`). Impera
   --_rti--border-color: var(--sc-kit--rich-text-input--border-color, var(--sc-kit--color--border--field));
   --_rti--border-color-hover: var(--sc-kit--rich-text-input--border-color--hover, var(--sc-kit--color--border--strong));
   --_rti--border-color-error: var(--sc-kit--rich-text-input--border-color--error, var(--sc-kit--color--danger));
-  --_rti--border-radius: var(--sc-kit--rich-text-input--border-radius, var(--sc-kit--radius--sm));
+  --_rti--border-radius: var(--sc-kit--rich-text-input--border-radius, var(--_rti--size-border-radius, var(--sc-kit--field--border-radius--md)));
   --_rti--underline-color: var(--sc-kit--rich-text-input--underline-color, transparent);
   --_rti--color: var(--sc-kit--rich-text-input--color, var(--sc-kit--color--text--primary));
   --_rti--placeholder-color: var(--sc-kit--rich-text-input--placeholder--color, var(--sc-kit--color--text--placeholder));
@@ -216,13 +216,16 @@ body, or an external host element addressed by `options.fixedToolbarId`). Impera
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .rich-text-input--sm {
-  --sc-kit--rich-text-input--root--font-size: 0.8125rem;
+  --_rti--size-root-font-size: 0.8125rem;
+  --_rti--size-border-radius: var(--sc-kit--field--border-radius--sm);
 }
 .rich-text-input--md {
-  --sc-kit--rich-text-input--root--font-size: 0.875rem;
+  --_rti--size-root-font-size: 0.875rem;
+  --_rti--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .rich-text-input--lg {
-  --sc-kit--rich-text-input--root--font-size: 1rem;
+  --_rti--size-root-font-size: 1rem;
+  --_rti--size-border-radius: var(--sc-kit--field--border-radius--md);
 }
 .rich-text-input:where(:hover:not(:focus-within)) {
   --sc-kit--rich-text-input--border-color: var(--_rti--border-color-hover);

package/dist/ui/rich-text-input/cmp.rich-text-input.svelte.d.ts

@@ -55,7 +55,7 @@ type Props = {
  * | `--sc-kit--rich-text-input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
  * | `--sc-kit--rich-text-input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
  * | `--sc-kit--rich-text-input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
- * | `--sc-kit--rich-text-input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--rich-text-input--border-radius` | Border radius | per size — `sm` 4px, `md`/`lg` 6px |
  * | `--sc-kit--rich-text-input--underline-color` | Inset bottom-underline (transparent default, accent on focus-within, danger on error) | `transparent` |
  * | `--sc-kit--rich-text-input--color` | Text color | `var(--sc-kit--color--text--primary)` |
  * | `--sc-kit--rich-text-input--placeholder--color` | Placeholder color | `var(--sc-kit--color--text--placeholder)` |