@streamscloud/kit 0.17.0 → 0.18.0

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

@@ -8,4 +8,5 @@ export { default as MultiselectAsync } from './cmp.multiselect-async.svelte';
 export type { MultiselectAsyncInstance } from './cmp.multiselect-async.svelte';
 export { default as MultiselectTree } from './cmp.multiselect-tree.svelte';
 export type { MultiselectTreeInstance } from './cmp.multiselect-tree.svelte';
+export { isSelectGroup } from './types';
 export type { SelectItem, SelectOption, SelectOptionGroup } from './types';

package/dist/ui/select/index.js

@@ -3,3 +3,4 @@ export { default as SingleselectAsync } from './cmp.singleselect-async.svelte';
 export { default as Multiselect } from './cmp.multiselect.svelte';
 export { default as MultiselectAsync } from './cmp.multiselect-async.svelte';
 export { default as MultiselectTree } from './cmp.multiselect-tree.svelte';
+export { isSelectGroup } from './types';

package/dist/ui/select/select-listbox.svelte

@@ -234,7 +234,7 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
 | `--sc-kit--select--panel--box-shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
 | `--sc-kit--select--panel--max-height` | Panel max height | `18rem` |
 | `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
-| `--sc-kit--select--option--padding-block` | Option vertical padding | `var(--sc-kit--space--2)` |
+| `--sc-kit--select--option--height` | Option row height | `var(--sc-kit--field--height--md)` (32px) |
 | `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
 | `--sc-kit--select--option--background--active` | Active / focused row background | `var(--sc-kit--color--accent--softer)` |
 | `--sc-kit--select--option--color` | Row text color | `var(--sc-kit--color--text--primary)` |
@@ -251,7 +251,7 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   --_lb--box-shadow: var(--sc-kit--select--panel--box-shadow, var(--sc-kit--shadow--lg));
   --_lb--max-height: var(--sc-kit--select--panel--max-height, 18rem);
   --_lb--padding: var(--sc-kit--select--panel--padding, var(--sc-kit--space--1));
-  --_lb--row-padding-block: var(--sc-kit--select--option--padding-block, var(--sc-kit--space--2));
+  --_lb--row-height: var(--sc-kit--select--option--height, var(--sc-kit--field--height--md));
   --_lb--row-padding-inline: var(--sc-kit--select--option--padding-inline, var(--sc-kit--space--3));
   --_lb--row-background-active: var(--sc-kit--select--option--background--active, var(--sc-kit--color--accent--softer));
   --_lb--row-color: var(--sc-kit--select--option--color, var(--sc-kit--color--text--primary));
@@ -297,7 +297,9 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   align-items: center;
   gap: var(--sc-kit--space--2);
   width: 100%;
-  padding: var(--_lb--row-padding-block) var(--_lb--row-padding-inline);
+  flex-shrink: 0;
+  block-size: var(--_lb--row-height);
+  padding: 0 var(--_lb--row-padding-inline);
   border-radius: var(--sc-kit--radius--sm);
   cursor: pointer;
   user-select: none;
@@ -378,8 +380,12 @@ dismiss events upward. Floating UI handles placement with autoUpdate on scroll/r
   margin-block-end: var(--sc-kit--space--1);
 }
 .select-listbox__empty {
-  padding: var(--_lb--row-padding-block) var(--_lb--row-padding-inline);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  block-size: var(--_lb--row-height);
+  padding-inline: var(--_lb--row-padding-inline);
   color: var(--_lb--empty-color);
   font-size: var(--sc-kit--font-size--sm);
-  text-align: center;
 }</style>

package/dist/ui/select/select-listbox.svelte.d.ts

@@ -79,7 +79,7 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--select--panel--box-shadow` | Panel shadow | `var(--sc-kit--shadow--lg)` |
  * | `--sc-kit--select--panel--max-height` | Panel max height | `18rem` |
  * | `--sc-kit--select--panel--padding` | Panel inner padding | `var(--sc-kit--space--1)` |
- * | `--sc-kit--select--option--padding-block` | Option vertical padding | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--select--option--height` | Option row height | `var(--sc-kit--field--height--md)` (32px) |
  * | `--sc-kit--select--option--padding-inline` | Option horizontal padding | `var(--sc-kit--space--3)` |
  * | `--sc-kit--select--option--background--active` | Active / focused row background | `var(--sc-kit--color--accent--softer)` |
  * | `--sc-kit--select--option--color` | Row text color | `var(--sc-kit--color--text--primary)` |

package/dist/ui/table/_table-styles.scss

@@ -0,0 +1,156 @@
+@use 'styles/mixins';
+@use 'styles/functions';
+
+@mixin base {
+  .alternative-view {
+    &__placeholder {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 80%;
+      user-select: none;
+    }
+  }
+
+  .table-container {
+    --_table--row--height: var(--sc-kit--table--row--height, var(--_table--size-row-height));
+    --_table--cell--font-size: var(--sc-kit--table--cell--font-size, var(--_table--size-cell-font-size));
+    --_table--cell--horizontal-padding: var(--sc-kit--table--cell--horizontal-padding, var(--_table--size-cell-padding));
+    --_table--head--height: var(--sc-kit--table--head--height, var(--_table--size-head-height, var(--_table--row--height)));
+
+    --_table--head--background-color: var(--sc-kit--table--head--background-color, var(--sc-kit--color--bg--field-alt));
+    --_table--head--color: var(--sc-kit--table--head--color, var(--sc-kit--color--text--secondary));
+    --_table--border-color: var(--sc-kit--table--border-color, var(--sc-kit--color--border));
+    --_table--row--color: var(--sc-kit--table--row--color, transparent);
+    --_table--row--alternative-color: var(--sc-kit--table--row--alternative-color, var(--sc-kit--color--bg--hover));
+    --_table--zebra--color: var(--sc-kit--table--zebra--color, light-dark(#fcfcfd, #232323));
+    --_table--selected--color: var(--sc-kit--table--selected--color, var(--sc-kit--color--accent--softer));
+    --_table--selected--color-hover: var(--sc-kit--table--selected--color--hover, var(--sc-kit--color--accent--soft));
+
+    --_table--card--background: var(--sc-kit--table--card--background, var(--sc-kit--color--bg--panel));
+    --_table--card--border-color: var(--sc-kit--table--card--border-color, var(--sc-kit--color--border));
+    --_table--card--border-radius: var(--sc-kit--table--card--border-radius, var(--sc-kit--radius--lg));
+
+    display: flex;
+    overflow-x: auto;
+    height: 100%;
+
+    @include mixins.scrollbar();
+
+    &--md {
+      --_table--size-row-height: #{functions.to-rem(44)};
+      --_table--size-head-height: #{functions.to-rem(40)};
+      --_table--size-cell-font-size: var(--sc-kit--font-size--md);
+      --_table--size-cell-padding: var(--sc-kit--space--4);
+    }
+
+    &--sm {
+      --_table--size-row-height: #{functions.to-rem(36)};
+      --_table--size-head-height: #{functions.to-rem(32)};
+      --_table--size-cell-font-size: var(--sc-kit--font-size--sm);
+      --_table--size-cell-padding: var(--sc-kit--space--3);
+    }
+
+    &--card {
+      background: var(--_table--card--background);
+      border: 1px solid var(--_table--card--border-color);
+      border-radius: var(--_table--card--border-radius);
+      overflow: hidden;
+    }
+  }
+
+  .table {
+    width: 100%;
+    table-layout: auto;
+    height: fit-content;
+    border-collapse: separate;
+    border-spacing: 0;
+
+    &__head {
+      height: var(--_table--head--height);
+      max-height: var(--_table--head--height);
+      background: var(--_table--head--background-color);
+      color: var(--_table--head--color);
+      font-size: var(--sc-kit--table--head--font-size, var(--sc-kit--font-size--sm));
+      font-weight: var(--sc-kit--font-weight--semibold);
+    }
+
+    &__th {
+      padding: 0 var(--_table--cell--horizontal-padding);
+      text-align: left;
+      vertical-align: middle;
+      border-bottom: 1px solid var(--_table--border-color);
+      @include mixins.no-select;
+
+      &--centered {
+        text-align: center;
+        --_table-header--justify-content: center;
+      }
+    }
+
+    &__tr {
+      height: var(--_table--row--height);
+      max-height: var(--_table--row--height);
+      background: var(--_table--row--color);
+
+      &--zebra {
+        background: var(--_table--zebra--color);
+      }
+
+      &:hover,
+      &--highlighted {
+        background: var(--_table--row--alternative-color);
+        --_table--move-row-cell-opacity: 1;
+      }
+
+      &--selected {
+        background: var(--_table--selected--color);
+      }
+
+      &--selected:hover {
+        background: var(--_table--selected--color-hover);
+      }
+
+      &--placeholder {
+        background: var(--_table--row--color) !important;
+      }
+    }
+
+    &__td {
+      padding: 0 var(--_table--cell--horizontal-padding);
+      border-bottom: 1px solid var(--_table--border-color);
+      font-size: var(--_table--cell--font-size);
+      color: var(--sc-kit--color--text--primary);
+      vertical-align: middle;
+
+      &--centered {
+        text-align: center;
+      }
+
+      &--clickable {
+        cursor: pointer;
+      }
+
+      &--flush {
+        border-bottom: none;
+      }
+    }
+
+    &__placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 80%;
+      user-select: none;
+    }
+
+    &--sticky-header {
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+    }
+  }
+}