@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/rich-text-input/cmp.rich-text-input.svelte.d.ts

@@ -0,0 +1,69 @@
+import type { RichTextInputOptions } from './types';
+import type { Editor, RawEditorOptions } from 'hugerte';
+type Props = {
+    /** HTML content. */
+    value: string | null | undefined;
+    /** @default 'md' — controls the editor root font size (and downstream rem-based sizing). */
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    /** Non-editable but still visible (mirrors `disabled` in editor mode). */
+    readonly?: boolean;
+    /** Visual display mode — no focus, no hover, hidden affordances. */
+    inert?: boolean;
+    /** Visual error state. */
+    error?: boolean;
+    /** Strip border + background. */
+    borderless?: boolean;
+    /** Show the inline emoji-picker affordance. */
+    emoji?: boolean;
+    autofocus?: boolean;
+    /** Minimum visible rows (0 = natural editor height). @default 0 */
+    rows?: number;
+    placeholder?: string;
+    options?: RichTextInputOptions;
+    /** Escape-hatch for extra HugeRTE init options, merged AFTER kit defaults. */
+    conf?: Partial<RawEditorOptions>;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-required'?: boolean;
+    on?: {
+        change?: (value: string) => void;
+        focus?: () => void;
+        blur?: () => void;
+        mounted?: (data: {
+            editor: Editor;
+            insertEmoji: (emoji: string) => void;
+        }) => void;
+    };
+};
+/**
+ * Rich text editor powered by HugeRTE (MIT fork of TinyMCE 6). Inline mode with a fixed
+ * toolbar container (the `<span class="rich-text-input__toolbar">` slot above the editor
+ * body, or an external host element addressed by `options.fixedToolbarId`). Imperative
+ * `focus()` / `getContent()` / `setContent(val)` exposed via `bind:this`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--rich-text-input--root--font-size` | Root font size (drives em-based sizing) | per size |
+ * | `--sc-kit--rich-text-input--width` | Container width | `100%` |
+ * | `--sc-kit--rich-text-input--min-height` | Minimum body height | `2em` |
+ * | `--sc-kit--rich-text-input--padding-block` | Vertical padding | `0.5em` |
+ * | `--sc-kit--rich-text-input--padding-inline` | Horizontal padding | `0.5em` |
+ * | `--sc-kit--rich-text-input--background` | Background color | `var(--sc-kit--color--bg--field)` |
+ * | `--sc-kit--rich-text-input--background--disabled` | Disabled background | `var(--sc-kit--color--bg--field-alt)` |
+ * | `--sc-kit--rich-text-input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
+ * | `--sc-kit--rich-text-input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--rich-text-input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
+ * | `--sc-kit--rich-text-input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--rich-text-input--underline-color` | Inset bottom-underline (transparent default, accent on focus-within, danger on error) | `transparent` |
+ * | `--sc-kit--rich-text-input--color` | Text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--rich-text-input--placeholder--color` | Placeholder color | `var(--sc-kit--color--text--placeholder)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {
+    /** Imperative API via `bind:this`. */ focus: () => void;
+    getContent: () => string;
+    setContent: (val: string) => void;
+}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/rich-text-input/hugerte.declarations.d.ts

@@ -0,0 +1,10 @@
+declare module 'hugerte/models/dom';
+declare module 'hugerte/themes/silver';
+declare module 'hugerte/icons/default';
+declare module 'hugerte/skins/ui/oxide/skin.js';
+declare module 'hugerte/skins/ui/oxide-dark/skin.js';
+declare module 'hugerte/skins/ui/oxide/content.inline.js';
+declare module 'hugerte/plugins/advlist';
+declare module 'hugerte/plugins/link';
+declare module 'hugerte/plugins/lists';
+declare module 'hugerte/plugins/table';

package/dist/ui/{inputs/rich-text-input → rich-text-input}/rich-text-input-localization.js

@@ -1,4 +1,4 @@
-import { AppLocale } from '../../../core/locale';
+import { AppLocale } from '../../core/locale';
 const loc = {
     linkButton: { en: 'Insert/Edit Link', no: 'Sett inn/rediger lenke' },
     linkDialogTitle: { en: 'Insert/Edit Link', no: 'Sett inn/rediger lenke' },

package/dist/ui/rich-text-input/types.js

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

package/dist/ui/{inputs/rich-text-input → rich-text-input}/validated-link-button.d.ts

@@ -1,3 +1,3 @@
 import type { RichTextInputLocalization } from './rich-text-input-localization';
-import type { Editor } from 'tinymce';
+import type { Editor } from 'hugerte';
 export declare const addValidatedLinkButton: (editor: Editor, loc: RichTextInputLocalization) => void;

package/dist/ui/{inputs/rich-text-input → rich-text-input}/validated-link-button.js

@@ -1,4 +1,4 @@
-import { validateHref } from '../../../core/utils';
+import { validateHref } from '../../core/utils';
 const DEFAULT_TARGET = '_blank';
 export const addValidatedLinkButton = (editor, loc) => {
     editor.ui.registry.addButton('validatedlink', {

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

@@ -1,4 +1,6 @@
-<script lang="ts">let { value, listenParentClicks = false, on } = $props();
+<script lang="ts">import { SeekBarLocalization } from './seek-bar-localization';
+let { value, listenParentClicks = false, on } = $props();
+const localization = new SeekBarLocalization();
 let seekBarRef = $state(null);
 let scrubberRef = $state(null);
 let progressRef = $state(null);
@@ -101,7 +103,7 @@ $effect(() => {
       aria-valuemin="0"
       aria-valuemax="1"
       aria-valuenow={value}
-      aria-label="Media position slider"
+      aria-label={localization.mediaPositionSlider}
       onkeydown={handleScrubberKeyDown}>
     </div>
   </div>
@@ -109,23 +111,24 @@ $effect(() => {
 
 <!--
 @component
-A draggable media seek bar with a track, filled portion, and scrubber handle. Supports mouse drag, click-to-seek, and keyboard navigation.
+A draggable media seek bar with a track, filled portion, and scrubber handle. Supports mouse drag,
+click-to-seek, and keyboard navigation (← → arrow / Home / End).
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--seek-bar--container-color` | Track background color | `neutral-400` |
-| `--sc-kit--seek-bar--value-color` | Filled portion color | `white` |
-| `--sc-kit--seek-bar--scrubber-color` | Scrubber handle color | `white` |
-| `--sc-kit--seek-bar--scrubber-border-color` | Scrubber handle border color | `neutral-400` |
+| `--sc-kit--seek-bar--container-color` | Track background color | `--sc-kit--color--border` |
+| `--sc-kit--seek-bar--value-color` | Filled portion color | `--sc-kit--color--text--on-accent` |
+| `--sc-kit--seek-bar--scrubber-color` | Scrubber handle color | `--sc-kit--color--text--on-accent` |
+| `--sc-kit--seek-bar--scrubber-border-color` | Scrubber handle border color | `--sc-kit--color--border` |
 -->
 
 <style>.seek-bar {
   --_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--container-color: var(--sc-kit--seek-bar--container-color, var(--sc-kit--color--border));
+  --_seek-bar--value-color: var(--sc-kit--seek-bar--value-color, var(--sc-kit--color--text--on-accent));
+  --_seek-bar--scrubber-color: var(--sc-kit--seek-bar--scrubber-color, var(--sc-kit--color--text--on-accent));
+  --_seek-bar--scrubber-border-color: var(--sc-kit--seek-bar--scrubber-border-color, var(--sc-kit--color--border));
   --_seek-bar--scrubber-opacity: 0;
   cursor: pointer;
   position: relative;
@@ -160,7 +163,7 @@ A draggable media seek bar with a track, filled portion, and scrubber handle. Su
   transform: translate(-50%, -50%);
   z-index: 1;
   opacity: var(--_seek-bar--scrubber-opacity);
-  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: opacity var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
 }
 .seek-bar__scrubber.is-dragging, .seek-bar__scrubber:focus {
   --_seek-bar--scrubber-opacity: 1;

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

@@ -11,15 +11,16 @@ type Props = {
     };
 };
 /**
- * A draggable media seek bar with a track, filled portion, and scrubber handle. Supports mouse drag, click-to-seek, and keyboard navigation.
+ * A draggable media seek bar with a track, filled portion, and scrubber handle. Supports mouse drag,
+ * click-to-seek, and keyboard navigation (← → arrow / Home / End).
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--seek-bar--container-color` | Track background color | `neutral-400` |
- * | `--sc-kit--seek-bar--value-color` | Filled portion color | `white` |
- * | `--sc-kit--seek-bar--scrubber-color` | Scrubber handle color | `white` |
- * | `--sc-kit--seek-bar--scrubber-border-color` | Scrubber handle border color | `neutral-400` |
+ * | `--sc-kit--seek-bar--container-color` | Track background color | `--sc-kit--color--border` |
+ * | `--sc-kit--seek-bar--value-color` | Filled portion color | `--sc-kit--color--text--on-accent` |
+ * | `--sc-kit--seek-bar--scrubber-color` | Scrubber handle color | `--sc-kit--color--text--on-accent` |
+ * | `--sc-kit--seek-bar--scrubber-border-color` | Scrubber handle border color | `--sc-kit--color--border` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/seek-bar/seek-bar-localization.d.ts

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

package/dist/ui/seek-bar/seek-bar-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+export class SeekBarLocalization {
+    get mediaPositionSlider() {
+        return loc.mediaPositionSlider[AppLocale.current];
+    }
+}
+const loc = {
+    mediaPositionSlider: {
+        en: 'Media position slider',
+        no: 'Glidebryter for medieposisjon'
+    }
+};

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

@@ -1,14 +1,28 @@
-<script lang="ts" generics="T extends string | number">const { segments, selected, on } = $props();
+<script lang="ts" module>export {};
 </script>
 
-<div class="segmented-control" class:segmented-control--multi={segments.length > 2}>
-  {#each segments as segment (segment.id)}
+<script lang="ts" generics="T">const { value, segments, variant = 'tray', size = 'md', fullWidth = false, compare, on } = $props();
+const isActive = (segment) => (compare ? compare(value, segment.value) : value === segment.value);
+const handleClick = (segment) => {
+    if (segment.disabled || isActive(segment)) {
+        return;
+    }
+    on?.change?.(segment.value);
+};
+</script>
+
+<div class="segmented-control segmented-control--{variant} segmented-control--{size}" class:segmented-control--full={fullWidth} role="radiogroup">
+  {#each segments as segment, i (i)}
     <button
       type="button"
       class="segmented-control__segment"
-      class:segmented-control__segment--selected={selected === segment.id}
+      class:segmented-control__segment--active={isActive(segment)}
+      class:segmented-control__segment--disabled={segment.disabled}
       class:segmented-control__segment--invalid={segment.invalid}
-      onclick={() => on?.change?.(segment.id)}>
+      role="radio"
+      aria-checked={isActive(segment)}
+      disabled={segment.disabled}
+      onclick={() => handleClick(segment)}>
       <span class="segmented-control__label">{segment.label}</span>
     </button>
   {/each}
@@ -16,105 +30,143 @@
 
 <!--
 @component
-A segmented control for switching between a set of options. Each segment is a button with a label.
+SegmentedControl — radio-style toggle group rendered as connected pills. Two visual variants:
+
+- **`tray`** (default): inset pill — outer container is a flat tray, active segment lifts as a card with shadow.
+- **`outlined`**: button-row — each segment has its own border, active segment is filled with the menu-active background.
+
+Each segment carries an optional `disabled` flag (non-interactive) and an optional `invalid` flag (colors the label in the danger tone — useful for marking validation errors across a group picker).
 
 ### 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))` |
-| `--sc-kit--segmented-control--invalid--color` | Inactive segment text color when invalid | `light-dark(destructive-500, destructive-400)` |
-| `--sc-kit--segmented-control--invalid--selected--color` | Selected segment text color when invalid | `light-dark(destructive-500, destructive-400)` |
+| `--sc-kit--segmented-control--height` | Control height | per size (28 / 32 px) |
+| `--sc-kit--segmented-control--font-size` | Label font size | per size |
+| `--sc-kit--segmented-control--padding-inline` | Per-segment horizontal padding | per size (10 / 12 px) |
+| `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | `--sc-kit--radius--md` |
+| `--sc-kit--segmented-control--color` | Default segment text color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--segmented-control--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--segmented-control--color--active` | Active segment text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--segmented-control--color--disabled` | Disabled segment text color | `--sc-kit--color--text--muted` |
+| `--sc-kit--segmented-control--color--invalid` | Invalid segment text color | `--sc-kit--color--danger` |
+| `--sc-kit--segmented-control--background--active` | Active segment background | tray: `--bg--panel`, outlined: `--bg--menu-active` |
+| `--sc-kit--segmented-control--tray--background` | Outer tray background (tray variant) | `--sc-kit--color--bg--active` |
+| `--sc-kit--segmented-control--tray--padding` | Inner tray padding around segments | `3px` |
+| `--sc-kit--segmented-control--tray--shadow--active` | Lift shadow on the active segment (tray variant) | `--sc-kit--shadow--sm` |
+| `--sc-kit--segmented-control--outlined--background` | Per-segment background (outlined variant) | `--sc-kit--color--bg--field` |
+| `--sc-kit--segmented-control--outlined--border-color` | Per-segment border (outlined variant) | `--sc-kit--color--border--field` |
 -->
 
 <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))
-  );
-  --_segmented-control--invalid--color: var(
-    --sc-kit--segmented-control--invalid--color,
-    light-dark(#e71d36, #f17e8b)
-  );
-  --_segmented-control--invalid--selected--color: var(
-    --sc-kit--segmented-control--invalid--selected--color,
-    light-dark(#e71d36, #f17e8b)
-  );
+  --_sc--height: var(--sc-kit--segmented-control--height, 2rem);
+  --_sc--font-size: var(--sc-kit--segmented-control--font-size, var(--sc-kit--font-size--md));
+  --_sc--padding-inline: var(--sc-kit--segmented-control--padding-inline, 0.75rem);
+  --_sc--radius: var(--sc-kit--segmented-control--border-radius, var(--sc-kit--radius--md));
+  --_sc--color: var(--sc-kit--segmented-control--color, var(--sc-kit--color--text--muted));
+  --_sc--color-hover: var(--sc-kit--segmented-control--color--hover, var(--sc-kit--color--text--primary));
+  --_sc--color-active: var(--sc-kit--segmented-control--color--active, var(--sc-kit--color--text--primary));
+  --_sc--color-disabled: var(--sc-kit--segmented-control--color--disabled, var(--sc-kit--color--text--muted));
+  --_sc--color-invalid: var(--sc-kit--segmented-control--color--invalid, var(--sc-kit--color--danger));
+  --_sc--background-active: var(--sc-kit--segmented-control--background--active, var(--_sc--background-active-default));
+  --_sc--tray-background: var(--sc-kit--segmented-control--tray--background, var(--sc-kit--color--bg--active));
+  --_sc--tray-padding: var(--sc-kit--segmented-control--tray--padding, 3px);
+  --_sc--tray-shadow-active: var(--sc-kit--segmented-control--tray--shadow--active, var(--sc-kit--shadow--sm));
+  --_sc--outlined-background: var(--sc-kit--segmented-control--outlined--background, var(--sc-kit--color--bg--field));
+  --_sc--outlined-border-color: var(--sc-kit--segmented-control--outlined--border-color, var(--sc-kit--color--border--field));
+  display: inline-flex;
+  align-items: stretch;
+  font-family: inherit;
+}
+.segmented-control--full {
   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);
-  overflow: hidden;
 }
-.segmented-control--multi {
-  --_segmented-control--segment--divider-color: var(--_segmented-control--border-color);
+.segmented-control--sm {
+  --sc-kit--segmented-control--height: 1.75rem;
+  --sc-kit--segmented-control--font-size: var(--sc-kit--font-size--sm);
+  --sc-kit--segmented-control--padding-inline: 0.625rem;
+}
+.segmented-control--md {
+  --sc-kit--segmented-control--height: 2rem;
+  --sc-kit--segmented-control--font-size: var(--sc-kit--font-size--md);
+  --sc-kit--segmented-control--padding-inline: 0.75rem;
+}
+.segmented-control--tray {
+  --_sc--background-active-default: var(--sc-kit--color--bg--panel);
+  background: var(--_sc--tray-background);
+  border-radius: var(--_sc--radius);
+  padding: var(--_sc--tray-padding);
+  gap: var(--_sc--tray-padding);
+}
+.segmented-control--tray .segmented-control__segment {
+  border-radius: calc(var(--_sc--radius) - var(--_sc--tray-padding));
+  height: calc(var(--_sc--height) - 2 * var(--_sc--tray-padding));
+}
+.segmented-control--tray .segmented-control__segment--active {
+  background: var(--_sc--background-active);
+  color: var(--_sc--color-active);
+  box-shadow: var(--_sc--tray-shadow-active);
+}
+.segmented-control--outlined {
+  --_sc--background-active-default: var(--sc-kit--color--bg--menu-active);
+}
+.segmented-control--outlined .segmented-control__segment {
+  background: var(--_sc--outlined-background);
+  border: 1px solid var(--_sc--outlined-border-color);
+  height: var(--_sc--height);
+  margin-left: -1px;
+}
+.segmented-control--outlined .segmented-control__segment:first-child {
+  margin-left: 0;
+  border-top-left-radius: var(--_sc--radius);
+  border-bottom-left-radius: var(--_sc--radius);
+}
+.segmented-control--outlined .segmented-control__segment:last-child {
+  border-top-right-radius: var(--_sc--radius);
+  border-bottom-right-radius: var(--_sc--radius);
+}
+.segmented-control--outlined .segmented-control__segment--active {
+  background: var(--_sc--background-active);
+  color: var(--_sc--color-active);
+  position: relative;
+  z-index: 1;
 }
 .segmented-control__segment {
-  color: var(--_segmented-control--label--color);
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+  flex: 0 1 auto;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--_segmented-control--segment--padding-block) var(--_segmented-control--segment--padding-inline);
-  border-right: 1px solid var(--_segmented-control--segment--divider-color, transparent);
-  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), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  padding: 0 var(--_sc--padding-inline);
+  background: transparent;
+  border: none;
+  color: var(--_sc--color);
+  font-family: inherit;
+  font-size: var(--_sc--font-size);
+  font-weight: var(--sc-kit--font-weight--regular);
+  line-height: var(--sc-kit--leading--tight);
+  cursor: pointer;
+  white-space: nowrap;
+  min-width: 0;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
-.segmented-control__segment:last-child {
-  border-right: none;
+.segmented-control__segment:where(:hover):not(.segmented-control__segment--disabled):not(.segmented-control__segment--active) {
+  color: var(--_sc--color-hover);
 }
-.segmented-control__segment--invalid {
-  color: var(--_segmented-control--invalid--color);
+.segmented-control__segment--disabled {
+  color: var(--_sc--color-disabled);
+  cursor: default;
 }
-.segmented-control__segment--selected {
-  box-shadow: var(--_segmented-control--selected--box-shadow);
+.segmented-control__segment--invalid {
+  color: var(--_sc--color-invalid);
 }
-.segmented-control__segment--selected, .segmented-control__segment:hover {
-  background: var(--_segmented-control--selected--background);
-  color: var(--_segmented-control--selected--color);
+.segmented-control__segment:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
 }
-.segmented-control__segment--invalid.segmented-control__segment--selected, .segmented-control__segment--invalid:hover {
-  color: var(--_segmented-control--invalid--selected--color);
+.segmented-control--full .segmented-control__segment {
+  flex: 1;
 }
 .segmented-control__label {
-  font-size: var(--_segmented-control--label--font-size);
+  display: inline-block;
+  max-width: 100%;
 }</style>

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

@@ -1,13 +1,26 @@
-declare function $$render<T extends string | number>(): {
+export type Segment<TValue = unknown> = {
+    value: TValue;
+    label: string;
+    /** Non-interactive — click does nothing. */
+    disabled?: boolean;
+    /** Visual flag — colors the segment in the danger tone (validation hint). */
+    invalid?: boolean;
+};
+declare function $$render<T>(): {
     props: {
-        segments: {
-            id: T;
-            label: string;
-            invalid?: boolean;
-        }[];
-        selected: T;
+        value: T;
+        /** `NoInfer<T>` ensures `T` narrows from `value` only; inline segments literals type-check against the value's T without widening — no `as const` needed at callsites. */
+        segments: Segment<NoInfer<T>>[];
+        /** @default 'tray' */
+        variant?: "tray" | "outlined";
+        /** @default 'md' */
+        size?: "sm" | "md";
+        /** Stretch segments to fill the parent's inline axis. @default false */
+        fullWidth?: boolean;
+        /** Equality for object T values. @default reference equality (`===`) */
+        compare?: (a: T, b: T) => boolean;
         on?: {
-            change?: (id: T) => void;
+            change?: (value: T) => void;
         };
     };
     exports: {};
@@ -15,7 +28,7 @@ declare function $$render<T extends string | number>(): {
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends string | number> {
+declare class __sveltets_Render<T> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
@@ -23,33 +36,39 @@ declare class __sveltets_Render<T extends string | number> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
     } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
- * A segmented control for switching between a set of options. Each segment is a button with a label.
+ * SegmentedControl — radio-style toggle group rendered as connected pills. Two visual variants:
+ *
+ * - **`tray`** (default): inset pill — outer container is a flat tray, active segment lifts as a card with shadow.
+ * - **`outlined`**: button-row — each segment has its own border, active segment is filled with the menu-active background.
+ *
+ * Each segment carries an optional `disabled` flag (non-interactive) and an optional `invalid` flag (colors the label in the danger tone — useful for marking validation errors across a group picker).
  *
  * ### 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))` |
- * | `--sc-kit--segmented-control--invalid--color` | Inactive segment text color when invalid | `light-dark(destructive-500, destructive-400)` |
- * | `--sc-kit--segmented-control--invalid--selected--color` | Selected segment text color when invalid | `light-dark(destructive-500, destructive-400)` |
+ * | `--sc-kit--segmented-control--height` | Control height | per size (28 / 32 px) |
+ * | `--sc-kit--segmented-control--font-size` | Label font size | per size |
+ * | `--sc-kit--segmented-control--padding-inline` | Per-segment horizontal padding | per size (10 / 12 px) |
+ * | `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | `--sc-kit--radius--md` |
+ * | `--sc-kit--segmented-control--color` | Default segment text color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--segmented-control--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--segmented-control--color--active` | Active segment text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--segmented-control--color--disabled` | Disabled segment text color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--segmented-control--color--invalid` | Invalid segment text color | `--sc-kit--color--danger` |
+ * | `--sc-kit--segmented-control--background--active` | Active segment background | tray: `--bg--panel`, outlined: `--bg--menu-active` |
+ * | `--sc-kit--segmented-control--tray--background` | Outer tray background (tray variant) | `--sc-kit--color--bg--active` |
+ * | `--sc-kit--segmented-control--tray--padding` | Inner tray padding around segments | `3px` |
+ * | `--sc-kit--segmented-control--tray--shadow--active` | Lift shadow on the active segment (tray variant) | `--sc-kit--shadow--sm` |
+ * | `--sc-kit--segmented-control--outlined--background` | Per-segment background (outlined variant) | `--sc-kit--color--bg--field` |
+ * | `--sc-kit--segmented-control--outlined--border-color` | Per-segment border (outlined variant) | `--sc-kit--color--border--field` |
  */
 declare const Cmp: $$IsomorphicComponent;
-type Cmp<T extends string | number> = InstanceType<typeof Cmp<T>>;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
 export default Cmp;

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

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