@streamscloud/kit 0.2.11 → 0.2.13

package/dist/ui/page-toolbar/cmp.toolbar-search-input.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">import { Utils } from '../../core/utils';
+import { Icon } from '../icon';
+import { Input } from '../inputs';
+import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
+const { value, placeholder = 'Search...', debounce = 0, on } = $props();
+let focused = $state(false);
+const expanded = $derived(focused || !!value);
+const onInput = (v) => {
+    on?.input?.(v);
+};
+const onInputDebounced = $derived(debounce > 0 ? Utils.debounce(onInput, debounce) : onInput);
+</script>
+
+{#snippet searchIcon()}
+  <Icon src={IconSearch} />
+{/snippet}
+
+<div class="toolbar-search-input" class:toolbar-search-input--expanded={expanded}>
+  <Input
+    value={value}
+    placeholder={placeholder}
+    icon={searchIcon}
+    clearable
+    borderless={!expanded}
+    on={{ input: onInputDebounced, change: onInputDebounced, focus: () => (focused = true), blur: () => (focused = false) }} />
+</div>
+
+<!--
+@component
+A collapsible search input for toolbars. Expands when focused or when value is present.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-search-input--width` | Expanded width | `12.5rem` |
+-->
+
+<style>.toolbar-search-input {
+  --_toolbar-search-input--width: var(--sc-kit--toolbar-search-input--width, 12.5rem);
+  --sc-kit--input--root--font-size: 0.875rem;
+  --sc-kit--input--width: 1.75rem;
+  --sc-kit--input--height: 1.75rem;
+  --sc-kit--input--icon--color: var(--sc-color--text-brand, #5a8dec);
+  --sc-kit--input--accent-color: transparent;
+}
+.toolbar-search-input--expanded {
+  --sc-kit--input--width: var(--_toolbar-search-input--width);
+  --sc-kit--input--icon--color: initial;
+}</style>

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

@@ -0,0 +1,20 @@
+type Props = {
+    value: string;
+    placeholder?: string;
+    /** Debounce delay in ms @default 0 */
+    debounce?: number;
+    on?: {
+        input?: (value: string) => void;
+    };
+};
+/**
+ * A collapsible search input for toolbars. Expands when focused or when value is present.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-search-input--width` | Expanded width | `12.5rem` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,40 @@
+<script lang="ts" generics="T extends string | number">import { LocalStorageItem } from '../../core/local-storage';
+import { SegmentedControl } from '../segmented-control';
+import { untrack } from 'svelte';
+const { segments, selected, localStorageKey, on } = $props();
+let storage = null;
+// One-time init: load from localStorage
+$effect(() => untrack(() => {
+    if (!localStorageKey) {
+        return;
+    }
+    storage = LocalStorageItem.of(localStorageKey);
+    const saved = storage.get();
+    if (saved !== null && segments.some((s) => s.id === saved)) {
+        on?.change?.(saved);
+    }
+}));
+const handleChange = (id) => {
+    storage?.set(id);
+    on?.change?.(id);
+};
+</script>
+
+<div class="toolbar-segmented-control">
+  <SegmentedControl segments={segments} selected={selected} on={{ change: handleChange }} />
+</div>
+
+<!--
+@component
+A segmented control styled for toolbar use with optional localStorage persistence.
+Wraps SegmentedControl with toolbar-specific sizing (28px height, 10px font, 4px radius).
+-->
+
+<style>.toolbar-segmented-control {
+  --sc-kit--segmented-control--height: 1.75rem;
+  --sc-kit--segmented-control--label--font-size: 0.625rem;
+  --sc-kit--segmented-control--border-radius: 0.25rem;
+  --sc-kit--segmented-control--selected--background: var(--sc-color--bg-menu-active, light-dark(#f1f6fd, #2c2c2c));
+  --sc-kit--segmented-control--selected--box-shadow: inset 0px 1.5px 0px 0px rgba(255, 255, 255, 0.3);
+  --sc-kit--segmented-control--border-color: var(--sc-color--border-primary, light-dark(#f2f2f3, #1e1e1e));
+}</style>

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

@@ -0,0 +1,39 @@
+declare function $$render<T extends string | number>(): {
+    props: {
+        segments: {
+            id: T;
+            label: string;
+        }[];
+        selected: T;
+        /** localStorage key for persisting selection */
+        localStorageKey?: string;
+        on?: {
+            change?: (id: T) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends 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']>> & {
+        $$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']>;
+    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).
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends string | number> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

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

@@ -0,0 +1,51 @@
+<script lang="ts" generics="T extends string | number">import { SegmentedControl } from '../segmented-control';
+const { segments, selected, children, on } = $props();
+</script>
+
+<div class="toolbar-switch-item">
+  <div class="toolbar-switch-item__label">
+    {@render children()}
+  </div>
+  <div class="toolbar-switch-item__switch">
+    <SegmentedControl segments={segments} selected={selected} on={{ change: (id) => on?.change?.(id) }} />
+  </div>
+</div>
+
+<!--
+@component
+A switch item for toolbar panels. 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-color--text-primary, light-dark(black, white))` |
+-->
+
+<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))
+  );
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+}
+.toolbar-switch-item__label {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: var(--_toolbar-switch-item--label--color);
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.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;
+}</style>

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

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T extends string | number>(): {
+    props: {
+        segments: {
+            id: T;
+            label: string;
+        }[];
+        selected: T;
+        children: Snippet;
+        on?: {
+            change?: (id: T) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends 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']>> & {
+        $$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']>;
+    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.
+ *
+ * ### 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))` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends string | number> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

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

@@ -0,0 +1,45 @@
+<script lang="ts">import { Toggle } from '../toggle';
+const { isOn, 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) }} />
+</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))` |
+-->
+
+<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;
+}</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    isOn: 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))` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,10 @@
+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 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';
+export { default as ToolbarToggleItem } from './cmp.toolbar-toggle-item.svelte';
+export type { ReorderableToggleItem } from './types';

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

@@ -0,0 +1,9 @@
+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 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';
+export { default as ToolbarToggleItem } from './cmp.toolbar-toggle-item.svelte';

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

@@ -0,0 +1,6 @@
+export type ReorderableToggleItem = {
+    id: string;
+    label: string;
+    enabled: boolean;
+    fixed?: boolean;
+};

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

@@ -0,0 +1 @@
+export {};

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/segmented-control/cmp.segmented-control.svelte

@@ -0,0 +1,97 @@
+<script lang="ts" generics="T extends string | number">const { segments, selected, on } = $props();
+</script>
+
+<div class="segmented-control">
+  {#each segments as segment (segment.id)}
+    <button
+      type="button"
+      class="segmented-control__segment"
+      class:segmented-control__segment--selected={selected === segment.id}
+      onclick={() => on?.change?.(segment.id)}>
+      <span class="segmented-control__label">{segment.label}</span>
+    </button>
+  {/each}
+</div>
+
+<!--
+@component
+A segmented control for switching between a set of options. Each segment is a button with a label.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--segmented-control--root--font-size` | Base font size for em-based sizing | `1rem` |
+| `--sc-kit--segmented-control--height` | Height of the control | `1.75em` |
+| `--sc-kit--segmented-control--background` | Background color | `var(--sc-color--bg-button, light-dark(neutral-50, dark-600))` |
+| `--sc-kit--segmented-control--border-color` | Border color | `var(--sc-color--border-primary, light-dark(neutral-100, dark-800))` |
+| `--sc-kit--segmented-control--border-radius` | Border radius | `0.25em` |
+| `--sc-kit--segmented-control--segment--padding-block` | Segment vertical padding | `0.25em` |
+| `--sc-kit--segmented-control--segment--padding-inline` | Segment horizontal padding | `1.125em` |
+| `--sc-kit--segmented-control--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+| `--sc-kit--segmented-control--label--font-size` | Label font size | `0.625em` |
+| `--sc-kit--segmented-control--selected--background` | Selected segment background | `var(--sc-color--bg-menu-active, light-dark(primary-50, dark-400))` |
+| `--sc-kit--segmented-control--selected--box-shadow` | Selected segment box shadow | `0px 1px 3px rgba(0,0,0,0.1)` |
+| `--sc-kit--segmented-control--selected--color` | Selected segment text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+-->
+
+<style>.segmented-control {
+  --_segmented-control--root--font-size: var(--sc-kit--segmented-control--root--font-size, 1rem);
+  --_segmented-control--height: var(--sc-kit--segmented-control--height, 1.75em);
+  --_segmented-control--background: var(
+    --sc-kit--segmented-control--background,
+    var(--sc-color--bg-button, light-dark(#f9fafb, #242424))
+  );
+  --_segmented-control--border-color: var(
+    --sc-kit--segmented-control--border-color,
+    var(--sc-color--border-primary, light-dark(#f2f2f3, #1e1e1e))
+  );
+  --_segmented-control--border-radius: var(--sc-kit--segmented-control--border-radius, 0.25em);
+  --_segmented-control--segment--padding-block: var(--sc-kit--segmented-control--segment--padding-block, 0.25em);
+  --_segmented-control--segment--padding-inline: var(--sc-kit--segmented-control--segment--padding-inline, 1.125em);
+  --_segmented-control--label--color: var(
+    --sc-kit--segmented-control--label--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  --_segmented-control--label--font-size: var(--sc-kit--segmented-control--label--font-size, 0.625em);
+  --_segmented-control--selected--background: var(
+    --sc-kit--segmented-control--selected--background,
+    var(--sc-color--bg-menu-active, light-dark(#f1f6fd, #2c2c2c))
+  );
+  --_segmented-control--selected--box-shadow: var(
+    --sc-kit--segmented-control--selected--box-shadow,
+    0px 1px 3px var(--sc-color--box-shadow, rgba(0, 0, 0, 0.1))
+  );
+  --_segmented-control--selected--color: var(
+    --sc-kit--segmented-control--selected--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  display: flex;
+  width: 100%;
+  font-size: var(--_segmented-control--root--font-size);
+  height: var(--_segmented-control--height);
+  background: var(--_segmented-control--background);
+  border: 1px solid var(--_segmented-control--border-color);
+  border-radius: var(--_segmented-control--border-radius);
+  gap: 0.0313em;
+  overflow: hidden;
+}
+.segmented-control__segment {
+  color: var(--_segmented-control--label--color);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--_segmented-control--segment--padding-block) var(--_segmented-control--segment--padding-inline);
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.segmented-control__segment--selected {
+  box-shadow: var(--_segmented-control--selected--box-shadow);
+}
+.segmented-control__segment--selected, .segmented-control__segment:hover {
+  background: var(--_segmented-control--selected--background);
+  color: var(--_segmented-control--selected--color);
+}
+.segmented-control__label {
+  font-size: var(--_segmented-control--label--font-size);
+}</style>

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

@@ -0,0 +1,52 @@
+declare function $$render<T extends string | number>(): {
+    props: {
+        segments: {
+            id: T;
+            label: string;
+        }[];
+        selected: T;
+        on?: {
+            change?: (id: T) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends 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']>> & {
+        $$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']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A segmented control for switching between a set of options. Each segment is a button with a label.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--segmented-control--root--font-size` | Base font size for em-based sizing | `1rem` |
+ * | `--sc-kit--segmented-control--height` | Height of the control | `1.75em` |
+ * | `--sc-kit--segmented-control--background` | Background color | `var(--sc-color--bg-button, light-dark(neutral-50, dark-600))` |
+ * | `--sc-kit--segmented-control--border-color` | Border color | `var(--sc-color--border-primary, light-dark(neutral-100, dark-800))` |
+ * | `--sc-kit--segmented-control--border-radius` | Border radius | `0.25em` |
+ * | `--sc-kit--segmented-control--segment--padding-block` | Segment vertical padding | `0.25em` |
+ * | `--sc-kit--segmented-control--segment--padding-inline` | Segment horizontal padding | `1.125em` |
+ * | `--sc-kit--segmented-control--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ * | `--sc-kit--segmented-control--label--font-size` | Label font size | `0.625em` |
+ * | `--sc-kit--segmented-control--selected--background` | Selected segment background | `var(--sc-color--bg-menu-active, light-dark(primary-50, dark-400))` |
+ * | `--sc-kit--segmented-control--selected--box-shadow` | Selected segment box shadow | `0px 1px 3px rgba(0,0,0,0.1)` |
+ * | `--sc-kit--segmented-control--selected--color` | Selected segment text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T extends string | number> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

package/dist/ui/segmented-control/index.d.ts

@@ -0,0 +1 @@
+export { default as SegmentedControl } from './cmp.segmented-control.svelte';

package/dist/ui/segmented-control/index.js

@@ -0,0 +1 @@
+export { default as SegmentedControl } from './cmp.segmented-control.svelte';

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'}>