@streamscloud/kit 0.2.11 → 0.2.12

package/dist/styles/_responsive.scss

@@ -68,3 +68,51 @@ $layout-breakpoints: (
     @content;
   }
 }
+
+@mixin layout($breakpoint) {
+  @media screen and (max-width: map.get($layout-breakpoints, $breakpoint)) {
+    @content;
+  }
+}
+
+@mixin layout-mobile() {
+  @include layout(sm) {
+    @content;
+  }
+}
+
+@mixin layout-tablet() {
+  @include layout(md) {
+    @content;
+  }
+}
+
+@mixin layout-laptop() {
+  @include layout(lg) {
+    @content;
+  }
+}
+
+@mixin layout-narrow-desktop() {
+  @include layout(xl) {
+    @content;
+  }
+}
+
+@mixin layout-desktop() {
+  @include layout(xxl) {
+    @content;
+  }
+}
+
+@mixin layout-fhd() {
+  @include layout(fhd) {
+    @content;
+  }
+}
+
+@mixin layout-fhd-p() {
+  @include layout(fhd-p) {
+    @content;
+  }
+}

package/dist/ui/button/cmp.button.svelte

@@ -31,8 +31,8 @@ A themed button component combining `ButtonBase` (structure) and `ButtonTheme` (
 | `--sc-kit--button--border` | Border shorthand | `none` |
 | `--sc-kit--button--border--disabled` | Border when disabled | inherits `--border` |
 | `--sc-kit--button--border-radius` | Corner rounding | `0.25em` |
-| `--sc-kit--button--padding--vertical` | Vertical padding | `0` |
-| `--sc-kit--button--padding--horizontal` | Horizontal padding | `1em` |
+| `--sc-kit--button--padding--block` | Block (vertical) padding | `0` |
+| `--sc-kit--button--padding--inline` | Inline (horizontal) padding | `1em` |
 | `--sc-kit--button--min-width` | Minimum width | `0` |
 | `--sc-kit--button--width` | Explicit width | `auto` |
 | `--sc-kit--button--height` | Button height | `2em` |

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

@@ -35,8 +35,8 @@ type Props = {
  * | `--sc-kit--button--border` | Border shorthand | `none` |
  * | `--sc-kit--button--border--disabled` | Border when disabled | inherits `--border` |
  * | `--sc-kit--button--border-radius` | Corner rounding | `0.25em` |
- * | `--sc-kit--button--padding--vertical` | Vertical padding | `0` |
- * | `--sc-kit--button--padding--horizontal` | Horizontal padding | `1em` |
+ * | `--sc-kit--button--padding--block` | Block (vertical) padding | `0` |
+ * | `--sc-kit--button--padding--inline` | Inline (horizontal) padding | `1em` |
  * | `--sc-kit--button--min-width` | Minimum width | `0` |
  * | `--sc-kit--button--width` | Explicit width | `auto` |
  * | `--sc-kit--button--height` | Button height | `2em` |

package/dist/ui/button/cmp.options-button.svelte

@@ -134,7 +134,7 @@ Inherits all `--sc-kit--button--*` base and variant properties from `Button`.
   --_options-button--border: var(--sc-kit--button--border, none);
   --_options-button--border-radius: var(--sc-kit--button--border-radius, 0.25em);
   --_options-button--box-shadow: var(--sc-kit--button--box-shadow, none);
-  --_options-button--padding--vertical: var(--sc-kit--button--padding--vertical, 0);
+  --_options-button--padding--block: var(--sc-kit--button--padding--block, 0);
   --_options-button--min-width: var(--sc-kit--button--min-width, 0);
   --_options-button--height: var(--sc-kit--button--height, 2em);
   --_options-button--separator--border: 1px solid var(--_options-button--font--color);
@@ -186,7 +186,7 @@ Inherits all `--sc-kit--button--*` base and variant properties from `Button`.
   height: 100%;
   font-size: var(--_options-button--text--font-size);
   border-radius: var(--_options-button--border-radius);
-  padding: var(--_options-button--padding--vertical) 0.5em;
+  padding: var(--_options-button--padding--block) 0.5em;
   color: inherit;
   background: transparent;
   border: none;

package/dist/ui/button/resources/button-base.svelte

@@ -30,15 +30,15 @@ export {};
   --_button--border: var(--sc-kit--button--border, none);
   --_button--border--disabled: var(--sc-kit--button--border--disabled, var(--_button--border));
   --_button--border-radius: var(--sc-kit--button--border-radius, 0.25em);
-  --_button--padding--vertical: var(--sc-kit--button--padding--vertical, 0);
-  --_button--padding--horizontal: var(--sc-kit--button--padding--horizontal, 1em);
+  --_button--padding--block: var(--sc-kit--button--padding--block, 0);
+  --_button--padding--inline: var(--sc-kit--button--padding--inline, 1em);
   --_button--min-width: var(--sc-kit--button--min-width, 0);
   --_button--width: var(--sc-kit--button--width, auto);
   --_button--height: var(--sc-kit--button--height, 2em);
   --_button--box-shadow: var(--sc-kit--button--box-shadow, none);
   font-size: var(--_button--font--size);
   font-weight: var(--_button--font-weight);
-  padding: var(--_button--padding--vertical) var(--_button--padding--horizontal);
+  padding: var(--_button--padding--block) var(--_button--padding--inline);
   color: var(--_button--font--color);
   background: var(--_button--background);
   box-shadow: var(--_button--box-shadow);

package/dist/ui/button/resources/button-theme.svelte

@@ -323,13 +323,13 @@ export {};
   --sc-kit--button--height: 2.5em;
   --sc-kit--button--text--font-size: 1.125em;
   --sc-kit--button--icon--font-size: 1.25em;
-  --sc-kit--button--padding--horizontal: 1.5em;
+  --sc-kit--button--padding--inline: 1.5em;
   --sc-kit--button--border-radius: 0.375em;
   --_button--shadow-y: 3px;
 }
 .button-theme--size-small {
   --sc-kit--button--height: 1.75em;
   --sc-kit--button--text--font-size: 0.75em;
-  --sc-kit--button--padding--horizontal: 0.75em;
+  --sc-kit--button--padding--inline: 0.75em;
   --_button--shadow-y: 1.5px;
 }</style>

package/dist/ui/dropdown/cmp.dropdown.svelte

@@ -6,6 +6,7 @@ import { untrack } from 'svelte';
 let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 4, boundaryMargin = 8, backdrop = false, isOpenRequested, matchTriggerWidth = false, panel = true, on, children, trigger } = $props();
 let opened = $state(false);
 let dropdownEl = $state(null);
+let triggerEl = $state(null);
 let actualPlacement = $state(untrack(() => position));
 $effect(() => untrack(() => {
     on?.mounted?.({
@@ -68,7 +69,9 @@ const handleClick = (event) => {
         open();
         return;
     }
-    if (canClose(event.target, event.currentTarget)) {
+    const target = event.target;
+    const isTriggerClick = triggerEl?.contains(target) ?? false;
+    if (isTriggerClick || canClose(target, event.currentTarget)) {
         close();
     }
 };
@@ -86,7 +89,9 @@ const canClose = (target, container) => {
     return true;
 };
 const initPopper = (node) => {
-    const triggerEl = node.previousElementSibling;
+    if (!triggerEl) {
+        return;
+    }
     const popper = createPopper(triggerEl, node, {
         placement: position,
         strategy: fixedPosition ? 'fixed' : 'absolute',
@@ -145,7 +150,7 @@ const initPopper = (node) => {
   </div>
 {/if}
 <div class="dropdown" class:dropdown--disabled={disabled} bind:this={dropdownEl} onclick={handleClick} onkeydown={() => ({})} role="none">
-  <button type="button" class="dropdown__trigger">
+  <button type="button" class="dropdown__trigger" bind:this={triggerEl}>
     {#if trigger}
       {@render trigger()}
     {:else}

package/dist/ui/icon-text/cmp.icon-text.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Icon } from '../icon';
-let { icon, iconColor, iconPosition = 'left', secondaryIcon, secondaryIconColor, trimText = false, children } = $props();
+let { icon, iconColor, iconPosition = 'left', secondaryIcon, secondaryIconColor, trimText = false, hideText = false, children } = $props();
 const iconAsSnippet = $derived(icon && typeof icon === 'function' ? icon : null);
 const iconAsString = $derived(icon && typeof icon !== 'function' ? icon : null);
 const secondaryIconAsSnippet = $derived(secondaryIcon && typeof secondaryIcon === 'function' ? secondaryIcon : null);
@@ -14,7 +14,7 @@ const secondaryIconAsString = $derived(secondaryIcon && typeof secondaryIcon !==
       <Icon src={iconAsString} color={iconColor} />
     {/if}
   </span>
-  {#if children}
+  {#if children && !hideText}
     <span class="icon-text__text" class:icon-text__text--trim={trimText}>
       {@render children()}
     </span>

package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts

@@ -13,6 +13,8 @@ type Props = {
     secondaryIconColor?: IconColor | null;
     /** Truncate text with ellipsis on overflow */
     trimText?: boolean;
+    /** Hide text, showing only the icon(s) */
+    hideText?: boolean;
     children?: Snippet;
 };
 /**

package/dist/ui/player/carousel/cmp.carousel.svelte

@@ -284,6 +284,10 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
 | `--sc-kit--carousel--dot-color` | Dot indicator color (fill when active, border when inactive) | `white` |
 | `--sc-kit--carousel--dot-size` | Dot indicator diameter | `0.5rem` |
 | `--sc-kit--carousel--text-color` | Arrow button icon and counter text color | `white` |
+| `--sc-kit--carousel--counts--font-size` | Counter text font size | `0.9375rem` |
+| `--sc-kit--carousel--counts--width` | Counter container width | `5.625rem` |
+| `--sc-kit--carousel--counts--text-shadow` | Counter text shadow | `0 1px 0/3px/6px rgba(0,0,0,...)` |
+| `--sc-kit--carousel--navigation-button--size` | Navigation button width and height | `1.875rem` |
 -->
 
 <style>@charset "UTF-8";
@@ -293,6 +297,15 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
   --_carousel--dot-color: var(--sc-kit--carousel--dot-color, #ffffff);
   --_carousel--dot-size: var(--sc-kit--carousel--dot-size, 0.5rem);
   --_carousel--text-color: var(--sc-kit--carousel--text-color, #ffffff);
+  --_carousel--counts--font-size: var(--sc-kit--carousel--counts--font-size, 0.9375rem);
+  --_carousel--counts--width: var(--sc-kit--carousel--counts--width, 5.625rem);
+  --_carousel--counts--text-shadow: var(
+    --sc-kit--carousel--counts--text-shadow,
+    0 1px 0 rgba(0, 0, 0, 0.1),
+    0 1px 3px rgba(0, 0, 0, 0.1),
+    0 1px 6px rgba(0, 0, 0, 0.05)
+  );
+  --_carousel--navigation-button--size: var(--sc-kit--carousel--navigation-button--size, 1.875rem);
   --_carousel--animation: var(--carousel--animation);
   /* Mode control — overridden by modifiers */
   --_carousel--nav-display: block;
@@ -375,8 +388,8 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
 .carousel__navigation-button {
   display: var(--_carousel--nav-display);
   font-size: 0.75rem;
-  width: 1.875rem;
-  height: 1.875rem;
+  width: var(--_carousel--navigation-button--size);
+  height: var(--_carousel--navigation-button--size);
   background-color: var(--_carousel--button-color);
   border-radius: 50%;
   text-align: center;
@@ -387,9 +400,8 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
   opacity: var(--_carousel--nav-opacity);
   visibility: var(--_carousel--nav-visibility);
   transition: opacity 0.2s, visibility 0.2s;
-  /* Set 'container-type: inline-size;' to reference container*/
 }
-@container (width < 576px) {
+@media screen and (max-width: 768px) {
   .carousel__navigation-button {
     opacity: 1;
     visibility: visible;
@@ -417,12 +429,12 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
   z-index: 1;
 }
 .carousel__counts {
-  font-size: 0.9375rem;
+  font-size: var(--_carousel--counts--font-size);
   font-weight: 300;
-  width: 5.625rem;
+  width: var(--_carousel--counts--width);
   text-align: center;
   color: var(--_carousel--text-color);
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 6px rgba(0, 0, 0, 0.05);
+  text-shadow: var(--_carousel--counts--text-shadow);
 }
 .carousel__counts-navigation-button {
   font-size: 0.75rem;
@@ -440,10 +452,7 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
   opacity: 0.5;
   cursor: default;
 }
-.carousel__counts-navigation-button {
-  /* Set 'container-type: inline-size;' to reference container*/
-}
-@container (width < 576px) {
+@media screen and (max-width: 768px) {
   .carousel__counts-navigation-button {
     opacity: 1;
     visibility: visible;

package/dist/ui/player/carousel/cmp.carousel.svelte.d.ts

@@ -52,6 +52,10 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--carousel--dot-color` | Dot indicator color (fill when active, border when inactive) | `white` |
  * | `--sc-kit--carousel--dot-size` | Dot indicator diameter | `0.5rem` |
  * | `--sc-kit--carousel--text-color` | Arrow button icon and counter text color | `white` |
+ * | `--sc-kit--carousel--counts--font-size` | Counter text font size | `0.9375rem` |
+ * | `--sc-kit--carousel--counts--width` | Counter container width | `5.625rem` |
+ * | `--sc-kit--carousel--counts--text-shadow` | Counter text shadow | `0 1px 0/3px/6px rgba(0,0,0,...)` |
+ * | `--sc-kit--carousel--navigation-button--size` | Navigation button width and height | `1.875rem` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T> = InstanceType<typeof Cmp<T>>;

package/dist/ui/seek-bar/cmp.seek-bar.svelte

@@ -121,14 +121,16 @@ A draggable media seek bar with a track, filled portion, and scrubber handle. Su
 -->
 
 <style>.seek-bar {
-  cursor: pointer;
-  position: relative;
-  padding: 0.3125rem 0;
+  --_seek-bar--padding-block: var(--seek-bar--padding-block, 0.3125rem);
   --_seek-bar--container-color: var(--sc-kit--seek-bar--container-color, #9ca3af);
   --_seek-bar--value-color: var(--sc-kit--seek-bar--value-color, #ffffff);
   --_seek-bar--scrubber-color: var(--sc-kit--seek-bar--scrubber-color, #ffffff);
   --_seek-bar--scrubber-border-color: var(--sc-kit--seek-bar--scrubber-border-color, #9ca3af);
   --_seek-bar--scrubber-opacity: 0;
+  cursor: pointer;
+  position: relative;
+  padding: var(--_seek-bar--padding-block) 0;
+  user-select: none;
 }
 .seek-bar:hover {
   --_seek-bar--scrubber-opacity: 1;

package/dist/ui/table/cmp.table.svelte

@@ -6,11 +6,13 @@ import { IconText } from '../icon-text';
 import { Placeholder } from '../placeholder';
 import { TableActionsCell, TableBadgeCell, TableButtonCell, TableByCell, TableCheckboxCell, TableHideableCell, TableIconCell, TableImageCell, TableMoveRowCell, TableCustomCell, TableSelectCell, TableTextCell, TableTextInputCell } from './table-cells';
 import { ResolvedColumn } from './table-column-models.svelte';
+import { TableLocalization } from './table-localization';
 import IconReorderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
 import { untrack } from 'svelte';
 import { flip } from 'svelte/animate';
 import { dndzone } from 'svelte-dnd-action';
 let { model, rowsDraggable = false, showPlaceholder = false, showAlternativeView = false, on, alternativeView, placeholderRow, customNoItemsPlaceholder } = $props();
+const localization = new TableLocalization();
 let showNoItemsPlaceholder = $state(false);
 let showNoItemsTimeout = 0;
 let showNoItemsPlaceholderFn = null;
@@ -151,7 +153,7 @@ const getEditorColumnOrDefault = (column, editMode) => {
                 {:else if customNoItemsPlaceholder}
                   {@render customNoItemsPlaceholder()}
                 {:else}
-                  <Placeholder imageSrc="/placeholders/default.svg" title="No Items <span>Found</span>" body="No data found. Create one to get started" />
+                  <Placeholder imageSrc="/placeholders/default.svg" title={localization.noItemsFoundTitle} body={localization.noItemsFoundBody} />
                 {/if}
               </div>
             </td>
@@ -164,8 +166,8 @@ const getEditorColumnOrDefault = (column, editMode) => {
               {#if anyVisibleItemActions(item)}
                 {#if editMode}
                   <div class="table__save-cancel">
-                    <Button size="small" variant="transparent-success" on={{ click: () => on?.saveChanges?.(item) }}>Save</Button>
-                    <Button size="small" variant="gray" on={{ click: () => on?.cancelChanges?.() }}>Cancel</Button>
+                    <Button size="small" variant="transparent-success" on={{ click: () => on?.saveChanges?.(item) }}>{localization.save}</Button>
+                    <Button size="small" variant="gray" on={{ click: () => on?.cancelChanges?.() }}>{localization.cancel}</Button>
                   </div>
                 {:else}
                   <TableActionsCell dropdownPosition={model.styles?.actionsDropdownTopDirection ? 'top' : 'bottom'}>

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte

@@ -2,19 +2,21 @@
 import { Dropdown } from '../../dropdown';
 import { IconText } from '../../icon-text';
 import { Toggle } from '../../toggle';
+import { TableColumnsManagerLocalization } from './table-columns-manager-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconColumnTwo from '@fluentui/svg-icons/icons/text_column_two_20_regular.svg?raw';
 let { columns } = $props();
+const localization = new TableColumnsManagerLocalization();
 </script>
 
 <Dropdown position="bottom-end" keepDropdownOpen>
   {#snippet trigger()}
     <Button variant="standard" size="small">
-      <IconText icon={IconColumnTwo} iconColor="blue" secondaryIcon={IconChevronDown}>Columns</IconText>
+      <IconText icon={IconColumnTwo} iconColor="blue" secondaryIcon={IconChevronDown}>{localization.columns}</IconText>
     </Button>
   {/snippet}
   <div class="columns-manager">
-    <div class="columns-manager__title">Select Columns</div>
+    <div class="columns-manager__title">{localization.selectColumns}</div>
     <div class="columns-manager__body">
       {#each columns.filter((c) => c.hideable) as column (column)}
         <div class="columns-manager__item">

package/dist/ui/table/table-columns-manager/table-columns-manager-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class TableColumnsManagerLocalization {
+    get columns(): string;
+    get selectColumns(): string;
+}

package/dist/ui/table/table-columns-manager/table-columns-manager-localization.js

@@ -0,0 +1,19 @@
+import { AppLocale } from '../../../core/locale';
+export class TableColumnsManagerLocalization {
+    get columns() {
+        return loc.columns[AppLocale.current];
+    }
+    get selectColumns() {
+        return loc.selectColumns[AppLocale.current];
+    }
+}
+const loc = {
+    columns: {
+        en: 'Columns',
+        no: 'Kolonner'
+    },
+    selectColumns: {
+        en: 'Select Columns',
+        no: 'Velg kolonner'
+    }
+};

package/dist/ui/table/table-group-actions/cmp.table-group-actions.svelte

@@ -1,8 +1,10 @@
 <script lang="ts" generics="T extends {id: string}">import { Button } from '../../button';
 import { Dropdown, DropdownItem } from '../../dropdown';
 import { IconText } from '../../icon-text';
+import { TableGroupActionsLocalization } from './table-group-actions-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 let { groupActions, selection } = $props();
+const localization = new TableGroupActionsLocalization();
 const isActionVisible = (action, items) => {
     return action.visibilityFactory ? action.visibilityFactory(items) : true;
 };
@@ -16,7 +18,7 @@ const singleGroupAction = $derived(availableGroupActions[0]);
       <Dropdown position="bottom-end">
         {#snippet trigger()}
           <Button variant="standard" size="small">
-            <IconText icon={IconChevronDown} iconPosition="right">Actions</IconText>
+            <IconText icon={IconChevronDown} iconPosition="right">{localization.actions}</IconText>
           </Button>
         {/snippet}
         {#each groupActions as action (action)}

package/dist/ui/table/table-group-actions/table-group-actions-localization.d.ts

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

package/dist/ui/table/table-group-actions/table-group-actions-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../../core/locale';
+export class TableGroupActionsLocalization {
+    get actions() {
+        return loc.actions[AppLocale.current];
+    }
+}
+const loc = {
+    actions: {
+        en: 'Actions',
+        no: 'Handlinger'
+    }
+};

package/dist/ui/table/table-headers/table-header-sortable-localization.d.ts

@@ -0,0 +1,7 @@
+export declare class TableHeaderSortableLocalization {
+    get orderBy(): string;
+    get newestFirst(): string;
+    get oldestFirst(): string;
+    get ascending(): string;
+    get descending(): string;
+}

package/dist/ui/table/table-headers/table-header-sortable-localization.js

@@ -0,0 +1,40 @@
+import { AppLocale } from '../../../core/locale';
+export class TableHeaderSortableLocalization {
+    get orderBy() {
+        return loc.orderBy[AppLocale.current];
+    }
+    get newestFirst() {
+        return loc.newestFirst[AppLocale.current];
+    }
+    get oldestFirst() {
+        return loc.oldestFirst[AppLocale.current];
+    }
+    get ascending() {
+        return loc.ascending[AppLocale.current];
+    }
+    get descending() {
+        return loc.descending[AppLocale.current];
+    }
+}
+const loc = {
+    orderBy: {
+        en: 'Order by:',
+        no: 'Sorter etter:'
+    },
+    newestFirst: {
+        en: 'Newest first',
+        no: 'Nyeste først'
+    },
+    oldestFirst: {
+        en: 'Oldest first',
+        no: 'Eldste først'
+    },
+    ascending: {
+        en: 'A → Z',
+        no: 'A → Å'
+    },
+    descending: {
+        en: 'Z → A',
+        no: 'Å → A'
+    }
+};

package/dist/ui/table/table-headers/table-header-sortable.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">import { Checkbox } from '../../checkbox';
 import { Dropdown } from '../../dropdown';
 import { Icon } from '../../icon';
+import { TableHeaderSortableLocalization } from './table-header-sortable-localization';
 import TableHeader from './table-header.svelte';
 import IconCaretDownFilled from '@fluentui/svg-icons/icons/caret_down_16_filled.svg?raw';
 import {} from 'svelte';
 let { column, on, children } = $props();
+const localization = new TableHeaderSortableLocalization();
 const changeSort = (direction) => {
     if (column.sortDirection === direction) {
         direction = 'none';
@@ -30,23 +32,23 @@ const changeSort = (direction) => {
       {/snippet}
 
       <div class="th-sortable__dropdown">
-        <div class="th-sortable__dropdown-title">Order by:</div>
+        <div class="th-sortable__dropdown-title">{localization.orderBy}</div>
         {#if column.type === 'by'}
           <div class="th-sortable__dropdown-option">
-            Newest first
+            {localization.newestFirst}
             <Checkbox checked={column.sortDirection === 'desc'} on={{ change: () => changeSort('desc') }} />
           </div>
           <div class="th-sortable__dropdown-option">
-            Oldest first
+            {localization.oldestFirst}
             <Checkbox checked={column.sortDirection === 'asc'} on={{ change: () => changeSort('asc') }} />
           </div>
         {:else}
           <div class="th-sortable__dropdown-option">
-            A → Z
+            {localization.ascending}
             <Checkbox checked={column.sortDirection === 'asc'} on={{ change: () => changeSort('asc') }} />
           </div>
           <div class="th-sortable__dropdown-option">
-            Z → A
+            {localization.descending}
             <Checkbox checked={column.sortDirection === 'desc'} on={{ change: () => changeSort('desc') }} />
           </div>
         {/if}

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

@@ -0,0 +1,6 @@
+export declare class TableLocalization {
+    get noItemsFoundTitle(): string;
+    get noItemsFoundBody(): string;
+    get save(): string;
+    get cancel(): string;
+}

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

@@ -0,0 +1,33 @@
+import { AppLocale } from '../../core/locale';
+export class TableLocalization {
+    get noItemsFoundTitle() {
+        return loc.noItemsFoundTitle[AppLocale.current];
+    }
+    get noItemsFoundBody() {
+        return loc.noItemsFoundBody[AppLocale.current];
+    }
+    get save() {
+        return loc.save[AppLocale.current];
+    }
+    get cancel() {
+        return loc.cancel[AppLocale.current];
+    }
+}
+const loc = {
+    noItemsFoundTitle: {
+        en: 'No Items <span>Found</span>',
+        no: 'Ingen elementer <span>funnet</span>'
+    },
+    noItemsFoundBody: {
+        en: 'No data found. Create one to get started',
+        no: 'Ingen data funnet. Opprett en for å komme i gang'
+    },
+    save: {
+        en: 'Save',
+        no: 'Lagre'
+    },
+    cancel: {
+        en: 'Cancel',
+        no: 'Avbryt'
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",