@streamscloud/kit 0.2.42 → 0.9.0

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

@@ -1,15 +1,12 @@
-declare function $$render<T extends string | number>(): {
+import { type Segment } from '../segmented-control';
+declare function $$render<T>(): {
     props: {
-        segments: {
-            id: T;
-            label: string;
-            invalid?: boolean;
-        }[];
-        selected: T;
+        value: T;
+        segments: Segment<NoInfer<T>>[];
         /** localStorage key for persisting selection */
         localStorageKey?: string;
         on?: {
-            change?: (id: T) => void;
+            change?: (value: T) => void;
         };
     };
     exports: {};
@@ -17,7 +14,7 @@ declare function $$render<T extends string | number>(): {
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends string | number> {
+declare class __sveltets_Render<T> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
@@ -25,16 +22,13 @@ declare class __sveltets_Render<T extends string | number> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends string | number>(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']>> & {
+    new <T>(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 string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-/**
- * A segmented control styled for toolbar use with optional localStorage persistence.
- * Wraps SegmentedControl with toolbar-specific sizing (28px height, 10px font, 4px radius).
- */
+/** A segmented control styled for toolbar use with optional localStorage persistence. Wraps `SegmentedControl` in the `outlined` / `sm` preset combo and adds a `localStorageKey` for persisting the selection across reloads. */
 declare const Cmp: $$IsomorphicComponent;
-type Cmp<T extends string | number> = InstanceType<typeof Cmp<T>>;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
 export default Cmp;

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

@@ -1,5 +1,5 @@
-<script lang="ts" generics="T extends string | number">import { SegmentedControl } from '../segmented-control';
-const { segments, selected, children, on } = $props();
+<script lang="ts" generics="T">import { SegmentedControl } from '../segmented-control';
+const { segments, value, children, on } = $props();
 </script>
 
 <div class="toolbar-switch-item">
@@ -7,7 +7,7 @@ const { segments, selected, children, on } = $props();
     {@render children()}
   </div>
   <div class="toolbar-switch-item__switch">
-    <SegmentedControl segments={segments} selected={selected} on={{ change: (id) => on?.change?.(id) }} />
+    <SegmentedControl segments={segments} value={value} variant="outlined" size="sm" on={{ change: (v: T) => on?.change?.(v) }} />
   </div>
 </div>
 
@@ -18,24 +18,21 @@ A switch item for toolbar panels. Shows a label on the left and a segmented cont
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--toolbar-switch-item--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+| `--sc-kit--toolbar-switch-item--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-color--text-primary, light-dark(#000000, #ffffff))
-  );
+  --_toolbar-switch-item--label--color: var(--sc-kit--toolbar-switch-item--label--color, var(--sc-kit--color--text--primary));
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.25rem 0.5rem;
+  gap: var(--sc-kit--space--2);
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
 }
 .toolbar-switch-item__label {
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25rem;
+  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);
   min-width: 0;
   text-overflow: ellipsis;
@@ -45,7 +42,7 @@ A switch item for toolbar panels. Shows a label on the left and a segmented cont
 }
 .toolbar-switch-item__switch {
   flex-shrink: 0;
-  --sc-kit--segmented-control--border-radius: 0.375rem;
-  --sc-kit--segmented-control--selected--background: var(--sc-color--bg-brand, #144ab0);
-  --sc-kit--segmented-control--selected--color: #ffffff;
+  --sc-kit--segmented-control--border-radius: var(--sc-kit--radius--md);
+  --sc-kit--segmented-control--background--active: var(--sc-kit--color--accent);
+  --sc-kit--segmented-control--color--active: var(--sc-kit--color--text--on-accent);
 }</style>

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

@@ -1,14 +1,12 @@
+import { type Segment } from '../segmented-control';
 import type { Snippet } from 'svelte';
-declare function $$render<T extends string | number>(): {
+declare function $$render<T>(): {
     props: {
-        segments: {
-            id: T;
-            label: string;
-        }[];
-        selected: T;
+        value: T;
+        segments: Segment<NoInfer<T>>[];
         children: Snippet;
         on?: {
-            change?: (id: T) => void;
+            change?: (value: T) => void;
         };
     };
     exports: {};
@@ -16,7 +14,7 @@ declare function $$render<T extends string | number>(): {
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends string | number> {
+declare class __sveltets_Render<T> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
@@ -24,10 +22,10 @@ declare class __sveltets_Render<T extends string | number> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends string | number>(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']>> & {
+    new <T>(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 string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
@@ -36,8 +34,8 @@ interface $$IsomorphicComponent {
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--toolbar-switch-item--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ * | `--sc-kit--toolbar-switch-item--label--color` | Label text color | `var(--sc-kit--color--text--primary)` |
  */
 declare const Cmp: $$IsomorphicComponent;
-type Cmp<T extends string | number> = InstanceType<typeof Cmp<T>>;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
 export default Cmp;

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

@@ -1,45 +1,16 @@
 <script lang="ts">import { Toggle } from '../toggle';
-const { isOn, children, on } = $props();
+const { checked, children, on } = $props();
 </script>
 
 <div class="toolbar-toggle-item">
-  <div class="toolbar-toggle-item__label">
-    {@render children()}
-  </div>
-  <Toggle isOn={isOn} on={{ change: (value) => on?.change?.(value) }} />
+  <Toggle checked={checked} label={children} layout="spread" on={{ change: (value) => on?.change?.(value) }} />
 </div>
 
 <!--
 @component
-A toggle item for toolbar panels. Shows a label on the left and a toggle switch on the right.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--toolbar-toggle-item--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+A toggle item for toolbar panels. Wraps the kit Toggle with toolbar-appropriate padding.
 -->
 
 <style>.toolbar-toggle-item {
-  --_toolbar-toggle-item--label--color: var(
-    --sc-kit--toolbar-toggle-item--label--color,
-    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
-  );
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.25rem 0.5rem;
-  --sc-kit--toggle--switch--height: 1.125rem;
-  --sc-kit--toggle--switch--width: 2.3125rem;
-}
-.toolbar-toggle-item__label {
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25rem;
-  color: var(--_toolbar-toggle-item--label--color);
-  min-width: 0;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
 }</style>

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

@@ -1,19 +1,12 @@
 import type { Snippet } from 'svelte';
 type Props = {
-    isOn: boolean;
+    checked: boolean;
     children: Snippet;
     on?: {
         change?: (value: boolean) => void;
     };
 };
-/**
- * A toggle item for toolbar panels. Shows a label on the left and a toggle switch on the right.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--toolbar-toggle-item--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
- */
+/** A toggle item for toolbar panels. Wraps the kit Toggle with toolbar-appropriate padding. */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;
 export default Cmp;

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

@@ -1,8 +1,8 @@
 export { default as ReorderableToggleList } from './cmp.reorderable-toggle-list.svelte';
-export { default as ToolbarButtonItem } from './cmp.toolbar-button-item.svelte';
 export { default as ToolbarCheckboxItem } from './cmp.toolbar-checkbox-item.svelte';
-export { default as ToolbarDropdown } from './cmp.toolbar-dropdown.svelte';
 export { default as ToolbarPanel } from './cmp.toolbar-panel.svelte';
+export { default as ToolbarPanelButton } from './cmp.toolbar-panel-button.svelte';
+export { default as ToolbarPopover } from './cmp.toolbar-popover.svelte';
 export { default as ToolbarSearchInput } from './cmp.toolbar-search-input.svelte';
 export { default as ToolbarSegmentedControl } from './cmp.toolbar-segmented-control.svelte';
 export { default as ToolbarSwitchItem } from './cmp.toolbar-switch-item.svelte';

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

@@ -1,8 +1,8 @@
 export { default as ReorderableToggleList } from './cmp.reorderable-toggle-list.svelte';
-export { default as ToolbarButtonItem } from './cmp.toolbar-button-item.svelte';
 export { default as ToolbarCheckboxItem } from './cmp.toolbar-checkbox-item.svelte';
-export { default as ToolbarDropdown } from './cmp.toolbar-dropdown.svelte';
 export { default as ToolbarPanel } from './cmp.toolbar-panel.svelte';
+export { default as ToolbarPanelButton } from './cmp.toolbar-panel-button.svelte';
+export { default as ToolbarPopover } from './cmp.toolbar-popover.svelte';
 export { default as ToolbarSearchInput } from './cmp.toolbar-search-input.svelte';
 export { default as ToolbarSegmentedControl } from './cmp.toolbar-segmented-control.svelte';
 export { default as ToolbarSwitchItem } from './cmp.toolbar-switch-item.svelte';

package/dist/ui/pagination/cmp.pagination.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">import { Icon } from '../icon';
+import { Popover, PopoverItem } from '../popover';
+import { PaginationLocalization } from './pagination-localization';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_20_regular.svg?raw';
+import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
+const { state, pageSizes, compact = false, preserveSpace = false, on } = $props();
+const localization = new PaginationLocalization();
+const pageCount = $derived(state.total <= 0 ? 0 : Math.ceil(state.total / state.pageSize));
+const calcNodes = (count, current) => {
+    const nodes = [];
+    if (count < 1) {
+        return nodes;
+    }
+    if (count < 8) {
+        for (let i = 1; i <= count; i++) {
+            nodes.push({ isHole: false, value: i, isCurrent: i === current });
+        }
+        return nodes;
+    }
+    const mandatory = [1, current - 1, current, current + 1, count];
+    const firstHole = { from: 2, to: current - 2 };
+    const lastHole = { from: current + 2, to: count - 1 };
+    for (let i = 1; i <= count; i++) {
+        if (mandatory.includes(i)) {
+            nodes.push({ isHole: false, value: i, isCurrent: i === current });
+            continue;
+        }
+        if (i >= firstHole.from && i <= firstHole.to) {
+            if (i === firstHole.from) {
+                nodes.push({ isHole: true });
+            }
+            continue;
+        }
+        if (i >= lastHole.from && i <= lastHole.to && i === lastHole.from) {
+            nodes.push({ isHole: true });
+        }
+    }
+    return nodes;
+};
+const nodes = $derived(calcNodes(pageCount, state.pageNumber));
+const setPage = (page) => {
+    if (page < 1 || page > pageCount || page === state.pageNumber) {
+        return;
+    }
+    state.setPageNumber(page);
+    on?.pageChange?.(page);
+    on?.change?.();
+};
+const setSize = (size) => {
+    state.setPageSize(size);
+    on?.pageSizeChange?.(size);
+    on?.change?.();
+};
+</script>
+
+{#if state.total > 0 || preserveSpace}
+  <div class="pagination" class:pagination--hidden={!state.total} role="navigation" aria-label={localization.label}>
+    {#if pageSizes && !compact}
+      <Popover position="top-end">
+        {#snippet trigger()}
+          <button type="button" class="pagination__node pagination__node--trigger" aria-label={localization.pageSize}>
+            {state.pageSize}
+            <Icon src={IconChevronDown} />
+          </button>
+        {/snippet}
+        {#each pageSizes as size (size)}
+          <PopoverItem on={{ click: () => setSize(size) }}>{size}</PopoverItem>
+        {/each}
+      </Popover>
+    {/if}
+
+    {#if pageCount > 1}
+      {#if !compact}
+        <button
+          type="button"
+          class="pagination__node pagination__node--icon"
+          onclick={() => setPage(state.pageNumber - 1)}
+          disabled={state.pageNumber <= 1}
+          aria-label={localization.previousPage}>
+          <Icon src={IconChevronLeft} />
+        </button>
+      {/if}
+
+      {#each nodes as node, i (i)}
+        {#if node.isHole}
+          <span class="pagination__node pagination__node--hole" aria-hidden="true">…</span>
+        {:else}
+          <button
+            type="button"
+            class="pagination__node"
+            class:pagination__node--active={node.isCurrent}
+            aria-current={node.isCurrent ? 'page' : undefined}
+            onclick={() => setPage(node.value)}>
+            {node.value}
+          </button>
+        {/if}
+      {/each}
+
+      {#if !compact}
+        <button
+          type="button"
+          class="pagination__node pagination__node--icon"
+          onclick={() => setPage(state.pageNumber + 1)}
+          disabled={state.pageNumber >= pageCount}
+          aria-label={localization.nextPage}>
+          <Icon src={IconChevronRight} />
+        </button>
+      {/if}
+    {/if}
+  </div>
+{/if}
+
+<!--
+@component
+Pagination — page navigation control driven by a shared `PaginationState` instance (create one and
+pass it as `state`; it owns `total` / `pageNumber` / `pageSize` and is read by your data query +
+written by its result). Renders a windowed range of page buttons with ellipsis holes, prev / next
+icon buttons, and an optional page-size selector (only when `pageSizes` is provided).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--pagination--gap` | Gap between nodes | `4px` |
+| `--sc-kit--pagination--node--size` | Node min-width / height | `32px` |
+| `--sc-kit--pagination--node--color` | Idle node text color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--pagination--hover--background` | Node hover background | `--sc-kit--color--bg--hover` |
+| `--sc-kit--pagination--active--background` | Active page background | `--sc-kit--color--accent` |
+| `--sc-kit--pagination--active--color` | Active page text color | `--sc-kit--color--text--on-accent` |
+-->
+<style>.pagination {
+  --_pagination--gap: var(--sc-kit--pagination--gap, 0.25rem);
+  --_pagination--node-size: var(--sc-kit--pagination--node--size, 2rem);
+  --_pagination--node-color: var(--sc-kit--pagination--node--color, var(--sc-kit--color--text--secondary));
+  --_pagination--hover-background: var(--sc-kit--pagination--hover--background, var(--sc-kit--color--bg--hover));
+  --_pagination--active-background: var(--sc-kit--pagination--active--background, var(--sc-kit--color--accent));
+  --_pagination--active-color: var(--sc-kit--pagination--active--color, var(--sc-kit--color--text--on-accent));
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--_pagination--gap);
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.pagination :global([contenteditable]) {
+  user-select: text;
+}
+.pagination--hidden {
+  visibility: hidden;
+}
+.pagination__node {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--_pagination--node-size);
+  height: var(--_pagination--node-size);
+  padding-inline: var(--sc-kit--space--2);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--sc-kit--radius--sm);
+  color: var(--_pagination--node-color);
+  font-size: var(--sc-kit--font-size--md);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--fast) var(--sc-kit--ease--default), color var(--sc-kit--duration--fast) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
+}
+.pagination__node:hover:not(:disabled):not(.pagination__node--active) {
+  background: var(--_pagination--hover-background);
+  color: var(--sc-kit--color--text--primary);
+}
+.pagination__node:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.pagination__node--active {
+  background: var(--_pagination--active-background);
+  border-color: var(--_pagination--active-background);
+  color: var(--_pagination--active-color);
+}
+.pagination__node--icon {
+  --sc-kit--icon--size: 0.875rem;
+  padding-inline: 0;
+  color: var(--sc-kit--color--text--muted);
+}
+.pagination__node--trigger {
+  --sc-kit--icon--size: 0.875rem;
+  gap: var(--sc-kit--space--1);
+  color: var(--sc-kit--color--text--secondary);
+}
+.pagination__node--trigger:hover {
+  background: var(--_pagination--hover-background);
+  color: var(--sc-kit--color--text--primary);
+}
+.pagination__node--hole {
+  min-width: auto;
+  padding-inline: var(--sc-kit--space--1);
+  color: var(--sc-kit--color--text--muted);
+  cursor: default;
+}</style>

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

@@ -0,0 +1,35 @@
+import type { PaginationState } from './pagination-state.svelte';
+type Props = {
+    /** The shared `PaginationState` instance — owns total / pageNumber / pageSize. */
+    state: PaginationState;
+    /** When provided, renders a page-size selector with these options. Omit to hide it. */
+    pageSizes?: number[];
+    /** Compact mode — page numbers only (hides the size selector + prev/next). @default false */
+    compact?: boolean;
+    /** Keep the container's footprint (`visibility: hidden`) when there are no results, instead of unmounting. @default false */
+    preserveSpace?: boolean;
+    on?: {
+        pageChange?: (page: number) => void;
+        pageSizeChange?: (size: number) => void;
+        change?: () => void;
+    };
+};
+/**
+ * Pagination — page navigation control driven by a shared `PaginationState` instance (create one and
+ * pass it as `state`; it owns `total` / `pageNumber` / `pageSize` and is read by your data query +
+ * written by its result). Renders a windowed range of page buttons with ellipsis holes, prev / next
+ * icon buttons, and an optional page-size selector (only when `pageSizes` is provided).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--pagination--gap` | Gap between nodes | `4px` |
+ * | `--sc-kit--pagination--node--size` | Node min-width / height | `32px` |
+ * | `--sc-kit--pagination--node--color` | Idle node text color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--pagination--hover--background` | Node hover background | `--sc-kit--color--bg--hover` |
+ * | `--sc-kit--pagination--active--background` | Active page background | `--sc-kit--color--accent` |
+ * | `--sc-kit--pagination--active--color` | Active page text color | `--sc-kit--color--text--on-accent` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,2 @@
+export { default as Pagination } from './cmp.pagination.svelte';
+export { PaginationState } from './pagination-state.svelte';

package/dist/ui/pagination/index.js

@@ -0,0 +1,2 @@
+export { default as Pagination } from './cmp.pagination.svelte';
+export { PaginationState } from './pagination-state.svelte';

package/dist/ui/pagination/pagination-localization.d.ts

@@ -0,0 +1,6 @@
+export declare class PaginationLocalization {
+    get label(): string;
+    get previousPage(): string;
+    get nextPage(): string;
+    get pageSize(): string;
+}

package/dist/ui/pagination/pagination-localization.js

@@ -0,0 +1,33 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    label: {
+        en: 'Pagination',
+        no: 'Paginering'
+    },
+    previousPage: {
+        en: 'Previous page',
+        no: 'Forrige side'
+    },
+    nextPage: {
+        en: 'Next page',
+        no: 'Neste side'
+    },
+    pageSize: {
+        en: 'Items per page',
+        no: 'Elementer per side'
+    }
+};
+export class PaginationLocalization {
+    get label() {
+        return loc.label[AppLocale.current];
+    }
+    get previousPage() {
+        return loc.previousPage[AppLocale.current];
+    }
+    get nextPage() {
+        return loc.nextPage[AppLocale.current];
+    }
+    get pageSize() {
+        return loc.pageSize[AppLocale.current];
+    }
+}

package/dist/ui/pagination/pagination-state.svelte.d.ts

@@ -0,0 +1,13 @@
+export declare class PaginationState {
+    private _total;
+    private _pageNumber;
+    private _pageSize;
+    constructor(pageSize?: number);
+    get total(): number;
+    get pageNumber(): number;
+    get pageSize(): number;
+    resetPageNumber: () => void;
+    setPageNumber: (pageNumber: number) => void;
+    setPageSize: (pageSize: number) => void;
+    setTotal: (total: number) => void;
+}

package/dist/ui/pagination/pagination-state.svelte.js

@@ -0,0 +1,35 @@
+export class PaginationState {
+    _total = $state(0);
+    _pageNumber = $state(1);
+    _pageSize = $state(20);
+    constructor(pageSize) {
+        if (pageSize) {
+            this._pageSize = pageSize;
+        }
+    }
+    get total() {
+        return this._total;
+    }
+    get pageNumber() {
+        return this._pageNumber;
+    }
+    get pageSize() {
+        return this._pageSize;
+    }
+    resetPageNumber = () => {
+        this.setPageNumber(1);
+        this.setTotal(0);
+    };
+    setPageNumber = (pageNumber) => {
+        this._pageNumber = pageNumber;
+    };
+    setPageSize = (pageSize) => {
+        this.setPageNumber(1);
+        this._pageSize = pageSize;
+    };
+    setTotal = (total) => {
+        if (this._pageNumber === 1 || total > 0) {
+            this._total = total;
+        }
+    };
+}