@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/toast/cmp.toaster.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { ToastrPosition } from './types';
+type Props = {
+    /** Container id. Routes toasts addressed via `Toastr.info(msg, { containerId })`. Default container is the empty string. @default '' */
+    id?: string;
+    /** @default 'bottom-right' */
+    position?: ToastrPosition;
+};
+/**
+ * Toaster — renders toasts pushed via the `Toastr` static API. Mount once at
+ * the root of your app for the default container, or with an explicit `id` to
+ * route specific toasts there. Uses the browser Popover API to render in the
+ * top layer above page content.
+ *
+ * ### Props
+ * | Prop | Type | Description |
+ * |---|---|---|
+ * | `id` | `string` | Container id; default `''` |
+ * | `position` | `ToastrPosition` | One of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`. Default `bottom-right` |
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toaster--gap` | Vertical gap between toasts | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--toaster--margin` | Distance from viewport edge | `var(--sc-kit--space--4)` |
+ * | `--sc-kit--toaster--max-width` | Max toast width | `420px` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,3 @@
+export { default as Toaster } from './cmp.toaster.svelte';
+export { Toastr } from './toastr';
+export type { Toast, ToastVariant, ToastrOptions, ToastrPosition } from './types';

package/dist/ui/toast/index.js

@@ -0,0 +1,2 @@
+export { default as Toaster } from './cmp.toaster.svelte';
+export { Toastr } from './toastr';

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

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

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

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

package/dist/ui/toast/toast-store.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Toast } from './types';
+declare class ToastStore {
+    private _buckets;
+    private _mounted;
+    private _mountedSet;
+    private _timers;
+    toasts: (containerId: string) => Toast[];
+    mounted: () => string[];
+    push: (containerId: string, toast: Omit<Toast, "id">) => number;
+    dismiss: (id: number, containerId: string) => void;
+    clear: (containerId: string) => void;
+    registerMount: (containerId: string) => void;
+    unregisterMount: (containerId: string) => void;
+    isMounted: (containerId: string) => boolean;
+}
+export declare const toastStore: ToastStore;
+export {};

package/dist/ui/toast/toast-store.svelte.js

@@ -0,0 +1,65 @@
+let nextId = 1;
+class ToastStore {
+    _buckets = $state.raw({});
+    _mounted = $state.raw([]);
+    _mountedSet = new Set();
+    _timers = new Map();
+    toasts = (containerId) => this._buckets[containerId] ?? [];
+    mounted = () => this._mounted;
+    push = (containerId, toast) => {
+        const id = nextId++;
+        const t = { ...toast, id };
+        const existing = this._buckets[containerId] ?? [];
+        this._buckets = { ...this._buckets, [containerId]: [...existing, t] };
+        if (t.duration > 0) {
+            const timer = setTimeout(() => this.dismiss(id, containerId), t.duration);
+            this._timers.set(id, timer);
+        }
+        return id;
+    };
+    dismiss = (id, containerId) => {
+        const existing = this._buckets[containerId];
+        if (!existing) {
+            return;
+        }
+        const next = existing.filter((t) => t.id !== id);
+        if (next.length === existing.length) {
+            return;
+        }
+        this._buckets = { ...this._buckets, [containerId]: next };
+        const timer = this._timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this._timers.delete(id);
+        }
+    };
+    clear = (containerId) => {
+        const existing = this._buckets[containerId];
+        if (!existing) {
+            return;
+        }
+        for (const t of existing) {
+            const timer = this._timers.get(t.id);
+            if (timer) {
+                clearTimeout(timer);
+                this._timers.delete(t.id);
+            }
+        }
+        this._buckets = { ...this._buckets, [containerId]: [] };
+    };
+    registerMount = (containerId) => {
+        if (this._mountedSet.has(containerId)) {
+            return;
+        }
+        this._mountedSet.add(containerId);
+        this._mounted = [...this._mountedSet];
+    };
+    unregisterMount = (containerId) => {
+        if (!this._mountedSet.delete(containerId)) {
+            return;
+        }
+        this._mounted = [...this._mountedSet];
+    };
+    isMounted = (containerId) => this._mountedSet.has(containerId);
+}
+export const toastStore = new ToastStore();

package/dist/ui/toast/toaster-host.svelte.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Ensures a `<Toaster>` exists for the requested container id. If no consumer
+ * has mounted one, lazily mounts a fresh `<Toaster id={containerId}>` directly
+ * to `document.body`. No-op if one is already mounted for that id.
+ */
+export declare const ensureToaster: (containerId: string) => void;

package/dist/ui/toast/toaster-host.svelte.js

@@ -0,0 +1,18 @@
+import Toaster from './cmp.toaster.svelte';
+import { toastStore } from './toast-store.svelte';
+import { mount } from 'svelte';
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+/**
+ * Ensures a `<Toaster>` exists for the requested container id. If no consumer
+ * has mounted one, lazily mounts a fresh `<Toaster id={containerId}>` directly
+ * to `document.body`. No-op if one is already mounted for that id.
+ */
+export const ensureToaster = (containerId) => {
+    if (!isBrowser || toastStore.isMounted(containerId)) {
+        return;
+    }
+    const host = document.createElement('div');
+    host.dataset.scKitToaster = containerId || 'default';
+    document.body.appendChild(host);
+    mount(Toaster, { target: host, props: { id: containerId } });
+};

package/dist/ui/toast/toastr.d.ts

@@ -0,0 +1,17 @@
+import type { ToastrOptions } from './types';
+import type { Snippet } from 'svelte';
+/**
+ * Static API to push toasts from anywhere. The default container is lazily
+ * auto-mounted to `<body>` on first call. Route to other containers by
+ * mounting `<Toaster id="...">` and passing `containerId: '...'` in options.
+ */
+export declare class Toastr {
+    static info: (message: string | Snippet, options?: ToastrOptions) => number;
+    static success: (message: string | Snippet, options?: ToastrOptions) => number;
+    static warning: (message: string | Snippet, options?: ToastrOptions) => number;
+    static error: (message: string | Snippet, options?: ToastrOptions) => number;
+    static dismiss: (id: number, containerId?: string) => void;
+    static clear: (containerId?: string) => void;
+    /** List of currently-mounted container ids — useful for routing UIs. */
+    static mountedContainers: () => string[];
+}

package/dist/ui/toast/toastr.js

@@ -0,0 +1,30 @@
+import { toastStore } from './toast-store.svelte';
+import { ensureToaster } from './toaster-host.svelte';
+const push = (variant, message, options) => {
+    const containerId = options?.containerId ?? '';
+    ensureToaster(containerId);
+    return toastStore.push(containerId, {
+        variant,
+        message,
+        description: options?.description,
+        duration: options?.duration ?? 4000,
+        closable: options?.closable ?? true,
+        swipeable: options?.swipeable ?? true,
+        onClick: options?.onClick
+    });
+};
+/**
+ * Static API to push toasts from anywhere. The default container is lazily
+ * auto-mounted to `<body>` on first call. Route to other containers by
+ * mounting `<Toaster id="...">` and passing `containerId: '...'` in options.
+ */
+export class Toastr {
+    static info = (message, options) => push('info', message, options);
+    static success = (message, options) => push('success', message, options);
+    static warning = (message, options) => push('warning', message, options);
+    static error = (message, options) => push('error', message, options);
+    static dismiss = (id, containerId = '') => toastStore.dismiss(id, containerId);
+    static clear = (containerId = '') => toastStore.clear(containerId);
+    /** List of currently-mounted container ids — useful for routing UIs. */
+    static mountedContainers = () => toastStore.mounted();
+}

package/dist/ui/toast/types.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+export type ToastVariant = 'info' | 'success' | 'warning' | 'error';
+export type ToastrPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type ToastrOptions = {
+    /** Secondary line under the message. */
+    description?: string;
+    /** Auto-dismiss delay in ms. `0` keeps the toast until manually dismissed. @default 4000 */
+    duration?: number;
+    /** Routes the toast to a specific `<Toaster id="...">`. Empty string targets the default container. @default '' */
+    containerId?: string;
+    /** Show the X close button. @default true */
+    closable?: boolean;
+    /** Swipe-to-dismiss enabled. @default true */
+    swipeable?: boolean;
+    /** Fires when the toast body is clicked (excludes close button and other interactive children). Does NOT auto-dismiss — call `Toastr.dismiss(id)` from the callback if needed. */
+    onClick?: () => void;
+};
+export type Toast = {
+    id: number;
+    variant: ToastVariant;
+    message: string | Snippet;
+    description?: string;
+    duration: number;
+    closable: boolean;
+    swipeable: boolean;
+    onClick?: () => void;
+};

package/dist/ui/toast/types.js

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

package/dist/ui/toggle/cmp.toggle.svelte

@@ -1,107 +1,199 @@
-<script lang="ts">const { isOn, label = '', disabled = false, on } = $props();
-const toggleState = () => {
+<script lang="ts">const { checked, size = 'md', disabled = false, layout = 'spread', label, sublabel, title, name, on } = $props();
+const hasLabel = $derived(label !== undefined || sublabel !== undefined);
+const ariaLabel = $derived(typeof label === 'string' ? label : name);
+const handleClick = (event) => {
+    event.stopPropagation();
     if (disabled) {
         return;
     }
-    on?.change(!isOn);
+    on?.change?.(!checked);
 };
+export {};
 </script>
 
-<div class="toggle" class:toggle--disabled={disabled} onclick={toggleState} onkeydown={() => {}} role="none">
-  <button type="button" aria-label="Toggle" class="toggle-switch">
-    <input type="checkbox" class="toggle-switch__checkbox" checked={isOn} disabled={disabled} />
-    <span class="toggle-switch__slider"></span>
+{#snippet switchControl()}
+  <button
+    type="button"
+    class="toggle toggle--{size}"
+    class:toggle--on={checked}
+    class:toggle--disabled={disabled}
+    role="switch"
+    aria-checked={checked}
+    aria-label={ariaLabel}
+    title={hasLabel ? undefined : title}
+    disabled={disabled}
+    onclick={handleClick}>
+    <span class="toggle__thumb" aria-hidden="true"></span>
   </button>
-  {#if label}
-    <span class="toggle__label">{label}</span>
-  {/if}
-</div>
+{/snippet}
+
+{#if hasLabel}
+  <label class="toggle-row toggle-row--{layout}" class:toggle-row--disabled={disabled} title={title}>
+    <span class="toggle-row__text">
+      {#if typeof label === 'string'}
+        <span class="toggle-row__label">{label}</span>
+      {:else if label}
+        <span class="toggle-row__label">{@render label()}</span>
+      {/if}
+      {#if typeof sublabel === 'string'}
+        <span class="toggle-row__sub">{sublabel}</span>
+      {:else if sublabel}
+        <span class="toggle-row__sub">{@render sublabel()}</span>
+      {/if}
+    </span>
+    {@render switchControl()}
+  </label>
+{:else}
+  {@render switchControl()}
+{/if}
 
 <!--
 @component
-A toggle switch for boolean on/off states with optional label.
+Toggle (switch) — boolean on/off control. Renders a bare `<button role="switch">` by default;
+when `label` or `sublabel` is supplied, wraps in a clickable `<label>` row with two layouts:
+`spread` (settings-row, label left + switch right, fills container) or `inline` (compact,
+switch left + label right, intrinsic width).
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--toggle--color` | Active track color | `primary-500` / `primary-400` |
-| `--sc-kit--toggle--root--font-size` | Root font size | `1rem` |
-| `--sc-kit--toggle--label--font-size` | Label font size | `1em` |
-| `--sc-kit--toggle--switch--font-size` | Switch font size | `1em` |
-| `--sc-kit--toggle--switch--width` | Switch track width | `2.5em` |
-| `--sc-kit--toggle--switch--height` | Switch track height | `1.375em` |
-| `--sc-kit--toggle--switch--border-radius` | Track border radius | `(height)` |
+| `--sc-kit--toggle--track-width` | Track width | per size |
+| `--sc-kit--toggle--track-height` | Track height | per size |
+| `--sc-kit--toggle--thumb-size` | Thumb width/height | per size |
+| `--sc-kit--toggle--thumb-travel` | Distance the thumb slides when toggled | per size |
+| `--sc-kit--toggle--thumb-offset` | Inset of the thumb inside the track | `2px` |
+| `--sc-kit--toggle--background` | Track background (off) | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--toggle--background--on` | Track background (on) | `var(--sc-kit--color--accent)` |
+| `--sc-kit--toggle--thumb-color` | Thumb color | `#fff` |
+| `--sc-kit--toggle--thumb-shadow` | Thumb shadow | `0 1px 2px rgba(0, 0, 0, 0.2)` |
+| `--sc-kit--toggle--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
+| `--sc-kit--toggle-row--gap` | Gap between label and switch | `var(--sc-kit--space--3)` |
+| `--sc-kit--toggle-row--label--font-size` | Label font size | `var(--sc-kit--font-size--md)` |
+| `--sc-kit--toggle-row--label--color` | Label color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--toggle-row--sub--font-size` | Sublabel font size | `var(--sc-kit--font-size--sm)` |
+| `--sc-kit--toggle-row--sub--color` | Sublabel color | `var(--sc-kit--color--text--muted)` |
 -->
 
-<style>.toggle {
-  --_toggle--color: var(--sc-kit--toggle--color, light-dark(#144ab0, #5a8dec));
-  --_toggle--root--font-size: var(--sc-kit--toggle--root--font-size, 1rem);
-  --_toggle--label--font-size: var(--sc-kit--toggle--label--font-size, 1em);
-  --_toggle--switch--font-size: var(--sc-kit--toggle--switch--font-size, 1em);
-  --_toggle--switch--width: var(--sc-kit--toggle--switch--width, 2.5em);
-  --_toggle--switch--height: var(--sc-kit--toggle--switch--height, 1.375em);
-  --_toggle--switch--border-radius: var(--sc-kit--toggle--switch--border-radius, var(--_toggle--switch--height));
-  display: flex;
+<style>.toggle-row {
+  --_row--gap: var(--sc-kit--toggle-row--gap, var(--sc-kit--space--3));
+  --_row--label-font-size: var(--sc-kit--toggle-row--label--font-size, var(--sc-kit--font-size--md));
+  --_row--label-color: var(--sc-kit--toggle-row--label--color, var(--sc-kit--color--text--primary));
+  --_row--sub-font-size: var(--sc-kit--toggle-row--sub--font-size, var(--sc-kit--font-size--sm));
+  --_row--sub-color: var(--sc-kit--toggle-row--sub--color, var(--sc-kit--color--text--muted));
+  display: inline-flex;
   align-items: center;
+  gap: var(--_row--gap);
+  max-width: 100%;
   cursor: pointer;
-  font-size: var(--_toggle--root--font-size);
 }
-.toggle--disabled {
-  opacity: 0.6;
-  pointer-events: none;
+.toggle-row--spread {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }
-.toggle .toggle-switch {
-  font-size: var(--_toggle--switch--font-size);
-  position: relative;
-  display: inline-block;
-  width: var(--_toggle--switch--width);
-  min-width: var(--_toggle--switch--width);
-  height: var(--_toggle--switch--height);
+.toggle-row--inline {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
 }
-.toggle .toggle-switch .toggle-switch__checkbox {
-  opacity: 0;
-  width: 0;
-  height: 0;
+.toggle-row--disabled {
+  cursor: default;
+  opacity: 0.5;
 }
-.toggle .toggle-switch .toggle-switch__checkbox:checked + .toggle-switch__slider {
-  background-color: var(--_toggle--color);
+.toggle-row__text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
 }
-.toggle .toggle-switch .toggle-switch__checkbox:checked + .toggle-switch__slider:before {
-  transform: translateX(calc(var(--_toggle--switch--width) - var(--_toggle--switch--height)));
+.toggle-row__label {
+  font-size: var(--_row--label-font-size);
+  color: var(--_row--label-color);
+  -webkit-user-drag: none;
+  user-select: none;
 }
-.toggle .toggle-switch .toggle-switch__checkbox:focus + .toggle-switch__slider {
-  box-shadow: 0 0 1px var(--_toggle--color);
+.toggle-row__label :global([contenteditable]) {
+  user-select: text;
 }
-.toggle .toggle-switch .toggle-switch__slider {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: light-dark(#d1d5db, #4b5563);
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: var(--_toggle--switch--border-radius);
-  margin: 0;
-}
-.toggle .toggle-switch .toggle-switch__slider:before {
-  position: absolute;
-  content: "";
-  background-color: #ffffff;
-  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  border-radius: 50%;
-  height: calc(var(--_toggle--switch--height) - 2 * 0.125em);
-  width: calc(var(--_toggle--switch--height) - 2 * 0.125em);
-  left: 0.125em;
-  bottom: 0.125em;
-}
-.toggle .toggle__label {
-  margin-left: 0.875em;
-  font-size: var(--_toggle--label--font-size);
-  min-width: 0;
-  cursor: inherit;
-  user-select: none;
+.toggle-row__label {
   text-overflow: ellipsis;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
+}
+.toggle-row__sub {
+  font-size: var(--_row--sub-font-size);
+  color: var(--_row--sub-color);
+  line-height: var(--sc-kit--line-height--sm);
+  -webkit-user-drag: none;
+  user-select: none;
+}
+.toggle-row__sub :global([contenteditable]) {
+  user-select: text;
+}
+.toggle-row__sub {
+  white-space: pre-line;
+  word-break: break-word;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.toggle {
+  --_toggle--track-width: var(--sc-kit--toggle--track-width, 2rem);
+  --_toggle--track-height: var(--sc-kit--toggle--track-height, 1.125rem);
+  --_toggle--thumb-size: var(--sc-kit--toggle--thumb-size, 0.875rem);
+  --_toggle--thumb-travel: var(--sc-kit--toggle--thumb-travel, 0.875rem);
+  --_toggle--thumb-offset: var(--sc-kit--toggle--thumb-offset, 0.125rem);
+  --_toggle--thumb-translate: 0;
+  --_toggle--background: var(--sc-kit--toggle--background, var(--sc-kit--color--border--strong));
+  --_toggle--thumb-color: var(--sc-kit--toggle--thumb-color, #fff);
+  --_toggle--thumb-shadow: var(--sc-kit--toggle--thumb-shadow, 0 1px 2px rgba(0, 0, 0, 0.2));
+  --_toggle--focus-ring-color: var(--sc-kit--toggle--focus-ring-color, var(--sc-kit--color--border--focus));
+  position: relative;
+  flex-shrink: 0;
+  width: var(--_toggle--track-width);
+  height: var(--_toggle--track-height);
+  padding: 0;
+  background: var(--_toggle--background);
+  border: none;
+  border-radius: var(--sc-kit--radius--pill);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.toggle:focus-visible {
+  outline: 2px solid var(--_toggle--focus-ring-color);
+  outline-offset: 2px;
+}
+.toggle--sm {
+  --sc-kit--toggle--track-width: 1.625rem;
+  --sc-kit--toggle--track-height: 0.875rem;
+  --sc-kit--toggle--thumb-size: 0.625rem;
+  --sc-kit--toggle--thumb-travel: 0.75rem;
+}
+.toggle--md {
+  --sc-kit--toggle--track-width: 2rem;
+  --sc-kit--toggle--track-height: 1.125rem;
+  --sc-kit--toggle--thumb-size: 0.875rem;
+  --sc-kit--toggle--thumb-travel: 0.875rem;
+}
+.toggle--on {
+  --sc-kit--toggle--background: var(--sc-kit--toggle--background--on, var(--sc-kit--color--accent));
+  --_toggle--thumb-translate: var(--_toggle--thumb-travel);
+}
+.toggle--disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.toggle__thumb {
+  position: absolute;
+  top: var(--_toggle--thumb-offset);
+  left: var(--_toggle--thumb-offset);
+  width: var(--_toggle--thumb-size);
+  height: var(--_toggle--thumb-size);
+  background: var(--_toggle--thumb-color);
+  border-radius: var(--sc-kit--radius--circle);
+  box-shadow: var(--_toggle--thumb-shadow);
+  transform: translateX(var(--_toggle--thumb-translate));
+  transition: transform var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }</style>

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

@@ -1,24 +1,46 @@
+import type { Snippet } from 'svelte';
 type Props = {
-    isOn: boolean;
-    label?: string;
+    checked: boolean;
+    /** @default 'md' */
+    size?: 'sm' | 'md';
     disabled?: boolean;
+    /** Label position relative to the switch. `spread` = label left, switch right (settings-row). `inline` = switch left, label right (compact). @default 'spread' */
+    layout?: 'spread' | 'inline';
+    /** Label: plain text or a snippet for rich content. */
+    label?: string | Snippet;
+    /** Secondary text under the main label. */
+    sublabel?: string | Snippet;
+    title?: string;
+    /** Accessible name fallback when `label` is a snippet (forwarded to `aria-label`). */
+    name?: string;
     on?: {
-        change: (value: boolean) => void;
+        change?: (value: boolean) => void;
     };
 };
 /**
- * A toggle switch for boolean on/off states with optional label.
+ * Toggle (switch) — boolean on/off control. Renders a bare `<button role="switch">` by default;
+ * when `label` or `sublabel` is supplied, wraps in a clickable `<label>` row with two layouts:
+ * `spread` (settings-row, label left + switch right, fills container) or `inline` (compact,
+ * switch left + label right, intrinsic width).
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--toggle--color` | Active track color | `primary-500` / `primary-400` |
- * | `--sc-kit--toggle--root--font-size` | Root font size | `1rem` |
- * | `--sc-kit--toggle--label--font-size` | Label font size | `1em` |
- * | `--sc-kit--toggle--switch--font-size` | Switch font size | `1em` |
- * | `--sc-kit--toggle--switch--width` | Switch track width | `2.5em` |
- * | `--sc-kit--toggle--switch--height` | Switch track height | `1.375em` |
- * | `--sc-kit--toggle--switch--border-radius` | Track border radius | `(height)` |
+ * | `--sc-kit--toggle--track-width` | Track width | per size |
+ * | `--sc-kit--toggle--track-height` | Track height | per size |
+ * | `--sc-kit--toggle--thumb-size` | Thumb width/height | per size |
+ * | `--sc-kit--toggle--thumb-travel` | Distance the thumb slides when toggled | per size |
+ * | `--sc-kit--toggle--thumb-offset` | Inset of the thumb inside the track | `2px` |
+ * | `--sc-kit--toggle--background` | Track background (off) | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--toggle--background--on` | Track background (on) | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--toggle--thumb-color` | Thumb color | `#fff` |
+ * | `--sc-kit--toggle--thumb-shadow` | Thumb shadow | `0 1px 2px rgba(0, 0, 0, 0.2)` |
+ * | `--sc-kit--toggle--focus-ring-color` | Focus outline color | `var(--sc-kit--color--border--focus)` |
+ * | `--sc-kit--toggle-row--gap` | Gap between label and switch | `var(--sc-kit--space--3)` |
+ * | `--sc-kit--toggle-row--label--font-size` | Label font size | `var(--sc-kit--font-size--md)` |
+ * | `--sc-kit--toggle-row--label--color` | Label color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--toggle-row--sub--font-size` | Sublabel font size | `var(--sc-kit--font-size--sm)` |
+ * | `--sc-kit--toggle-row--sub--color` | Sublabel color | `var(--sc-kit--color--text--muted)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;