@streamscloud/kit 0.2.42 → 0.9.0

package/dist/ui/page-layout/panel-state.svelte.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Reactive state for a single panel. Created and managed by a `PanelState` instance.
+ *
+ * - `width` — current width in px, set by drag resizing or externally.
+ * - `collapsed` — whether the panel is collapsed (hidden via the `slideHorizontally` transition).
+ * - `collapseDirection` — which direction the panel collapses to (`'left'` or `'right'`).
+ * - `isValid` — when `false`, collapse buttons targeting this panel render in a danger color.
+ */
+export declare class PanelEntry {
+    width: number | null;
+    collapsed: boolean;
+    collapseDirection: 'left' | 'right' | null;
+    isValid: boolean;
+    setWidth: (value: number) => void;
+    setCollapsed: (value: boolean) => void;
+    toggleCollapsed: () => void;
+}
+type RegisterOptions = {
+    id: string | undefined;
+    initialWidth: number | null;
+    collapseDirection: 'left' | 'right';
+    isValid?: boolean;
+};
+/**
+ * Per-`PageLayout` registry for `PagePanel` state. Enables controlling any panel's width and
+ * collapsed state by ID — including across the layout/page boundary, where a panel is declared in a
+ * `+layout.svelte` and the collapse button lives in a child `+page.svelte`.
+ *
+ * Create one instance and pass it as a prop to every `PagePanel` / `PanelCollapseButton` /
+ * `PagePanelSidebars` that should coordinate. For the layout↔page case, thread the same instance
+ * through `page.data` (the same way the panel-id constants are already shared).
+ *
+ * @example
+ * ```ts
+ * const panelState = new PanelState();
+ * // Collapse a panel from anywhere that has the instance + id:
+ * panelState.get('sidebar')?.toggleCollapsed();
+ * ```
+ */
+export declare class PanelState {
+    private _registry;
+    private _nextId;
+    register: (options: RegisterOptions) => {
+        id: string;
+        entry: PanelEntry;
+    };
+    get: (id: string) => PanelEntry | null;
+    unregister: (id: string, entry: PanelEntry) => void;
+}
+export {};

package/dist/ui/page-layout/panel-state.svelte.js

@@ -0,0 +1,61 @@
+import { SvelteMap } from 'svelte/reactivity';
+/**
+ * Reactive state for a single panel. Created and managed by a `PanelState` instance.
+ *
+ * - `width` — current width in px, set by drag resizing or externally.
+ * - `collapsed` — whether the panel is collapsed (hidden via the `slideHorizontally` transition).
+ * - `collapseDirection` — which direction the panel collapses to (`'left'` or `'right'`).
+ * - `isValid` — when `false`, collapse buttons targeting this panel render in a danger color.
+ */
+export class PanelEntry {
+    width = $state(null);
+    collapsed = $state(false);
+    collapseDirection = null;
+    isValid = $state(true);
+    setWidth = (value) => {
+        this.width = value;
+    };
+    setCollapsed = (value) => {
+        this.collapsed = value;
+    };
+    toggleCollapsed = () => {
+        this.collapsed = !this.collapsed;
+    };
+}
+/**
+ * Per-`PageLayout` registry for `PagePanel` state. Enables controlling any panel's width and
+ * collapsed state by ID — including across the layout/page boundary, where a panel is declared in a
+ * `+layout.svelte` and the collapse button lives in a child `+page.svelte`.
+ *
+ * Create one instance and pass it as a prop to every `PagePanel` / `PanelCollapseButton` /
+ * `PagePanelSidebars` that should coordinate. For the layout↔page case, thread the same instance
+ * through `page.data` (the same way the panel-id constants are already shared).
+ *
+ * @example
+ * ```ts
+ * const panelState = new PanelState();
+ * // Collapse a panel from anywhere that has the instance + id:
+ * panelState.get('sidebar')?.toggleCollapsed();
+ * ```
+ */
+export class PanelState {
+    _registry = new SvelteMap();
+    _nextId = 0;
+    register = (options) => {
+        const resolvedId = options.id ?? `panel-${this._nextId++}`;
+        const entry = new PanelEntry();
+        entry.width = options.initialWidth ?? null;
+        entry.collapseDirection = options.collapseDirection;
+        entry.isValid = options.isValid ?? true;
+        this._registry.set(resolvedId, entry);
+        return { id: resolvedId, entry };
+    };
+    get = (id) => {
+        return this._registry.get(id) ?? null;
+    };
+    unregister = (id, entry) => {
+        if (this._registry.get(id) === entry) {
+            this._registry.delete(id);
+        }
+    };
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Configuration for panel resizing and collapsing.
+ *
+ * - `collapseDirection` is always required — it determines which side the panel collapses to.
+ * - Size constraints (`initialWidth`, `minWidth`, `maxWidth`) are all optional:
+ *   - If none are set, the panel width is determined by its content.
+ *   - If only `initialWidth` is set, the panel gets a fixed width with no drag resizing.
+ *   - For drag resizing to work, at least 2 of the 3 size values must be provided so the resizer
+ *     has a range to operate in.
+ *   - When `minWidth` is omitted, `initialWidth` acts as the lower bound.
+ *   - When `maxWidth` is omitted, `initialWidth` acts as the upper bound.
+ */
+export type PanelResizingSettings = {
+    collapseDirection: 'left' | 'right';
+    initialWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+};
+export type PanelBorder = 'top' | 'right' | 'bottom' | 'left';

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

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

package/dist/ui/page-toolbar/cmp.reorderable-toggle-list.svelte

@@ -49,7 +49,7 @@ const handleFixedToggle = (id, enabled) => {
       </div>
       <div class="reorderable-toggle-list__toggle">
         <Toggle
-          isOn={item.enabled}
+          checked={item.enabled}
           on={{
             change: (value) => handleFixedToggle(item.id, value)
           }} />
@@ -76,7 +76,7 @@ const handleFixedToggle = (id, enabled) => {
         </div>
         <div class="reorderable-toggle-list__toggle">
           <Toggle
-            isOn={item.enabled}
+            checked={item.enabled}
             on={{
               change: (value) => handleToggle(item.id, value)
             }} />
@@ -93,38 +93,29 @@ A reorderable list of toggle items with drag-and-drop support. Fixed items appea
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--reorderable-toggle-list--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
-| `--sc-kit--reorderable-toggle-list--handle--color` | Drag handle icon color | `var(--sc-color--text-secondary, light-dark(neutral-500, neutral-300))` |
-| `--sc-kit--reorderable-toggle-list--handle--background` | Drag handle background | `var(--sc-color--bg-element, light-dark(neutral-50, dark-800))` |
+| `--sc-kit--reorderable-toggle-list--label--color` | Label text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--reorderable-toggle-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--secondary)` |
+| `--sc-kit--reorderable-toggle-list--handle--background` | Drag handle background | `var(--sc-kit--color--bg--element)` |
 -->
 
 <style>.reorderable-toggle-list {
-  --_reorderable-toggle-list--label--color: var(
-    --sc-kit--reorderable-toggle-list--label--color,
-    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
-  );
-  --_reorderable-toggle-list--handle--color: var(
-    --sc-kit--reorderable-toggle-list--handle--color,
-    var(--sc-color--text-secondary, light-dark(#6b7280, #d1d5db))
-  );
-  --_reorderable-toggle-list--handle--background: var(
-    --sc-kit--reorderable-toggle-list--handle--background,
-    var(--sc-color--bg-element, light-dark(#f9fafb, #1e1e1e))
-  );
+  --_reorderable-toggle-list--label--color: var(--sc-kit--reorderable-toggle-list--label--color, var(--sc-kit--color--text--primary));
+  --_reorderable-toggle-list--handle--color: var(--sc-kit--reorderable-toggle-list--handle--color, var(--sc-kit--color--text--secondary));
+  --_reorderable-toggle-list--handle--background: var(--sc-kit--reorderable-toggle-list--handle--background, var(--sc-kit--color--bg--element));
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--sc-kit--space--3);
 }
 .reorderable-toggle-list__dnd {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--sc-kit--space--3);
 }
 .reorderable-toggle-list__item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.25rem 0.5rem;
+  gap: var(--sc-kit--space--3);
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
 }
 .reorderable-toggle-list__drag-handle {
   --sc-kit--icon--size: 1rem;
@@ -134,7 +125,7 @@ A reorderable list of toggle items with drag-and-drop support. Fixed items appea
   justify-content: center;
   height: 1.375rem;
   padding-inline: 0.1875rem;
-  border-radius: 0.3125rem 0 0 0.3125rem;
+  border-radius: var(--sc-kit--radius--sm) 0 0 var(--sc-kit--radius--sm);
   cursor: grab;
   background: var(--_reorderable-toggle-list--handle--background);
 }
@@ -147,14 +138,16 @@ A reorderable list of toggle items with drag-and-drop support. Fixed items appea
 .reorderable-toggle-list__label {
   flex: 1;
   min-width: 0;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25rem;
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--regular);
+  line-height: var(--sc-kit--line-height--md);
   color: var(--_reorderable-toggle-list--label--color);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .reorderable-toggle-list__toggle {
   flex-shrink: 0;
   margin-left: auto;
-  --sc-kit--toggle--switch--height: 1.125rem;
-  --sc-kit--toggle--switch--width: 2.3125rem;
 }</style>

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

@@ -11,9 +11,9 @@ type Props = {
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--reorderable-toggle-list--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
- * | `--sc-kit--reorderable-toggle-list--handle--color` | Drag handle icon color | `var(--sc-color--text-secondary, light-dark(neutral-500, neutral-300))` |
- * | `--sc-kit--reorderable-toggle-list--handle--background` | Drag handle background | `var(--sc-color--bg-element, light-dark(neutral-50, dark-800))` |
+ * | `--sc-kit--reorderable-toggle-list--label--color` | Label text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--reorderable-toggle-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--secondary)` |
+ * | `--sc-kit--reorderable-toggle-list--handle--background` | Drag handle background | `var(--sc-kit--color--bg--element)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -3,9 +3,7 @@ const { checked, children, on } = $props();
 </script>
 
 <div class="toolbar-checkbox-item">
-  <Checkbox checked={checked} on={{ change: (value) => on?.change?.(value) }}>
-    {@render children()}
-  </Checkbox>
+  <Checkbox checked={checked} label={children} on={{ change: (value) => on?.change?.(value) }} />
 </div>
 
 <!--
@@ -14,8 +12,8 @@ A checkbox item for toolbar panels. Wraps the kit Checkbox with toolbar-appropri
 -->
 
 <style>.toolbar-checkbox-item {
-  padding: 0.25rem 0.5rem;
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
   overflow: hidden;
-  --sc-kit--checkbox--gap: 1.25rem;
+  --sc-kit--checkbox--gap: var(--sc-kit--space--5);
   --sc-kit--checkbox--icon--size: 1.125rem;
 }</style>

package/dist/ui/page-toolbar/cmp.toolbar-panel-button.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">const { children, on } = $props();
+export {};
+</script>
+
+<button type="button" class="toolbar-panel-button" onclick={() => on?.click?.()}>
+  {@render children()}
+</button>
+
+<!--
+@component
+A text-row button for toolbar panels / popovers (rendered inside `<ToolbarPanel>` / `<ToolbarPopover>`).
+For the toolbar's primary action area use `<ToolbarButton>` instead.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-panel-button--color` | Text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--toolbar-panel-button--color-hover` | Text color on hover | `var(--sc-kit--color--accent)` |
+-->
+
+<style>.toolbar-panel-button {
+  --_toolbar-panel-button--color: var(--sc-kit--toolbar-panel-button--color, var(--sc-kit--color--text--primary));
+  --_toolbar-panel-button--color-hover: var(--sc-kit--toolbar-panel-button--color-hover, var(--sc-kit--color--accent));
+  appearance: none;
+  background: transparent;
+  border: 0;
+  text-align: inherit;
+  cursor: pointer;
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--regular);
+  line-height: var(--sc-kit--line-height--md);
+  color: var(--_toolbar-panel-button--color);
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
+  max-width: 100%;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.toolbar-panel-button:hover {
+  color: var(--_toolbar-panel-button--color-hover);
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-panel-button.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+    on?: {
+        click?: () => void;
+    };
+};
+/**
+ * A text-row button for toolbar panels / popovers (rendered inside `<ToolbarPanel>` / `<ToolbarPopover>`).
+ * For the toolbar's primary action area use `<ToolbarButton>` instead.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-panel-button--color` | Text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--toolbar-panel-button--color-hover` | Text color on hover | `var(--sc-kit--color--accent)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-panel.svelte

@@ -21,38 +21,37 @@ A panel container used inside toolbar dropdowns. Provides a title, body area, an
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--toolbar-panel--width` | Panel width | `21.875rem` |
-| `--sc-kit--toolbar-panel--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
-| `--sc-kit--toolbar-panel--divider--color` | Divider line color | `var(--sc-color--border-primary, light-dark(neutral-100, dark-800))` |
+| `--sc-kit--toolbar-panel--title--color` | Title text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--toolbar-panel--divider--color` | Divider line color | `var(--sc-kit--color--border)` |
 -->
 
 <style>.toolbar-panel {
   --_toolbar-panel--width: var(--sc-kit--toolbar-panel--width, 21.875rem);
-  --_toolbar-panel--title--color: var(
-    --sc-kit--toolbar-panel--title--color,
-    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
-  );
-  --_toolbar-panel--divider--color: var(
-    --sc-kit--toolbar-panel--divider--color,
-    var(--sc-color--border-primary, light-dark(#f2f2f3, #1e1e1e))
-  );
+  --_toolbar-panel--title--color: var(--sc-kit--toolbar-panel--title--color, var(--sc-kit--color--text--primary));
+  --_toolbar-panel--divider--color: var(--sc-kit--toolbar-panel--divider--color, var(--sc-kit--color--border));
   width: var(--_toolbar-panel--width);
-  padding: 1.5rem;
+  padding: var(--sc-kit--space--6);
 }
 .toolbar-panel__title {
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.25rem;
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  line-height: var(--sc-kit--line-height--md);
   color: var(--_toolbar-panel--title--color);
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--sc-kit--space--2);
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .toolbar-panel__body {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  padding-block: 0.5rem;
+  gap: var(--sc-kit--space--4);
+  padding-block: var(--sc-kit--space--2);
 }
 .toolbar-panel__divider {
   height: 1px;
   background: var(--_toolbar-panel--divider--color);
-  margin: 0.25rem 0.5rem;
+  margin: var(--sc-kit--space--1) var(--sc-kit--space--2);
 }</style>

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

@@ -11,8 +11,8 @@ type Props = {
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--toolbar-panel--width` | Panel width | `21.875rem` |
- * | `--sc-kit--toolbar-panel--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
- * | `--sc-kit--toolbar-panel--divider--color` | Divider line color | `var(--sc-color--border-primary, light-dark(neutral-100, dark-800))` |
+ * | `--sc-kit--toolbar-panel--title--color` | Title text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--toolbar-panel--divider--color` | Divider line color | `var(--sc-kit--color--border)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/page-toolbar/cmp.toolbar-popover.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { Button } from '../button';
+import { IconText } from '../icon-text';
+import { Popover } from '../popover';
+import ToolbarPanel from './cmp.toolbar-panel.svelte';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+const { title, triggerLabel, icon, size = 'sm', position = 'bottom-end', children, footer } = $props();
+</script>
+
+<div class="toolbar-popover">
+  <Popover position={position} keepOpen>
+    {#snippet trigger()}
+      <Button type="button" variant="secondary" size={size}>
+        <IconText icon={icon} secondaryIcon={IconChevronDown}>{triggerLabel}</IconText>
+      </Button>
+    {/snippet}
+    <ToolbarPanel title={title} footer={footer}>
+      {@render children()}
+    </ToolbarPanel>
+  </Popover>
+</div>
+
+<!--
+@component
+A toolbar popover button. Opens a `ToolbarPanel` with a title, body content, and optional footer.
+The trigger is a secondary `Button` so size shares the same `sm | md | lg` preset as other field-shaped
+toolbar controls — keeps everything aligned at the same row height.
+-->
+
+<style>.toolbar-popover {
+  display: contents;
+}</style>

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

@@ -0,0 +1,23 @@
+import type { IconProp } from '../icon';
+import type { Placement } from '@floating-ui/dom';
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    triggerLabel: string;
+    /** Leading icon on the trigger button. */
+    icon?: IconProp;
+    /** Button size preset — shared with the kit Button. @default 'sm' */
+    size?: 'sm' | 'md' | 'lg';
+    /** @default 'bottom-end' */
+    position?: Placement;
+    children: Snippet;
+    footer?: Snippet;
+};
+/**
+ * A toolbar popover button. Opens a `ToolbarPanel` with a title, body content, and optional footer.
+ * The trigger is a secondary `Button` so size shares the same `sm | md | lg` preset as other field-shaped
+ * toolbar controls — keeps everything aligned at the same row height.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,8 +1,7 @@
 <script lang="ts">import { Utils } from '../../core/utils';
-import { Icon } from '../icon';
-import { Input } from '../inputs';
+import { Input } from '../input';
 import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
-const { value, placeholder = 'Search...', debounce = 0, on } = $props();
+const { value, collapsedIconColor, placeholder = '', size = 'sm', debounce = 0, on } = $props();
 let focused = $state(false);
 const expanded = $derived(focused || !!value);
 const onInput = (v) => {
@@ -11,15 +10,12 @@ const onInput = (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}>
+<div class="toolbar-search-input toolbar-search-input--{size}" class:toolbar-search-input--expanded={expanded}>
   <Input
     value={value}
+    size={size}
     placeholder={placeholder}
-    icon={searchIcon}
+    icon={{ src: IconSearch, color: expanded ? undefined : (collapsedIconColor ?? 'accent') }}
     clearable
     borderless={!expanded}
     on={{ input: onInputDebounced, change: onInputDebounced, focus: () => (focused = true), blur: () => (focused = false) }} />
@@ -27,23 +23,32 @@ const onInputDebounced = $derived(debounce > 0 ? Utils.debounce(onInput, debounc
 
 <!--
 @component
-A collapsible search input for toolbars. Expands when focused or when value is present.
+A collapsible search input for toolbars. Collapsed to an icon-only square at the chosen field height
+when empty + unfocused; expands to the full input width when focused or when a value is present.
+Shares Input's size preset so it lines up with other field-shaped controls.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--toolbar-search-input--width` | Expanded width | `12.5rem` |
+| `--sc-kit--toolbar-search-input--collapsed-icon-color` | Collapsed-state icon color | `--sc-kit--color--accent` |
 -->
 
 <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--collapsed-icon-color: var(--sc-kit--toolbar-search-input--collapsed-icon-color, var(--sc-kit--color--accent));
+  --sc-kit--input--width: var(--_toolbar-search-input--height);
+}
+.toolbar-search-input--sm {
+  --_toolbar-search-input--height: var(--sc-kit--field--height--sm);
+}
+.toolbar-search-input--md {
+  --_toolbar-search-input--height: var(--sc-kit--field--height--md);
+}
+.toolbar-search-input--lg {
+  --_toolbar-search-input--height: var(--sc-kit--field--height--lg);
 }
 .toolbar-search-input--expanded {
   --sc-kit--input--width: var(--_toolbar-search-input--width);
-  --sc-kit--input--icon--color: initial;
+  --sc-kit--icon--color: initial;
 }</style>

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

@@ -1,6 +1,10 @@
+import type { IconColor } from '../icon';
 type Props = {
     value: string;
+    collapsedIconColor?: IconColor;
     placeholder?: string;
+    /** Size preset (shared with Input / DatePicker / Select). @default 'sm' */
+    size?: 'sm' | 'md' | 'lg';
     /** Debounce delay in ms @default 0 */
     debounce?: number;
     on?: {
@@ -8,12 +12,15 @@ type Props = {
     };
 };
 /**
- * A collapsible search input for toolbars. Expands when focused or when value is present.
+ * A collapsible search input for toolbars. Collapsed to an icon-only square at the chosen field height
+ * when empty + unfocused; expands to the full input width when focused or when a value is present.
+ * Shares Input's size preset so it lines up with other field-shaped controls.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--toolbar-search-input--width` | Expanded width | `12.5rem` |
+ * | `--sc-kit--toolbar-search-input--collapsed-icon-color` | Collapsed-state icon color | `--sc-kit--color--accent` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,7 +1,7 @@
-<script lang="ts" generics="T extends string | number">import { LocalStorageItem } from '../../core/local-storage';
+<script lang="ts" generics="T">import { LocalStorageItem } from '../../core/local-storage';
 import { SegmentedControl } from '../segmented-control';
 import { untrack } from 'svelte';
-const { segments, selected, localStorageKey, on } = $props();
+const { segments, value, localStorageKey, on } = $props();
 let storage = null;
 // One-time init: load from localStorage
 $effect(() => untrack(() => {
@@ -10,31 +10,25 @@ $effect(() => untrack(() => {
     }
     storage = LocalStorageItem.of(localStorageKey);
     const saved = storage.get();
-    if (saved !== null && segments.some((s) => s.id === saved)) {
+    if (saved !== null && segments.some((s) => s.value === saved)) {
         on?.change?.(saved);
     }
 }));
-const handleChange = (id) => {
-    storage?.set(id);
-    on?.change?.(id);
+const handleChange = (v) => {
+    storage?.set(v);
+    on?.change?.(v);
 };
 </script>
 
 <div class="toolbar-segmented-control">
-  <SegmentedControl segments={segments} selected={selected} on={{ change: handleChange }} />
+  <SegmentedControl segments={segments} value={value} variant="outlined" size="sm" 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).
+A segmented control styled for toolbar use with optional localStorage persistence. Wraps `SegmentedControl` in the `outlined` / `sm` preset combo and adds a `localStorageKey` for persisting the selection across reloads.
 -->
 
 <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));
+  --sc-kit--segmented-control--background--active: var(--sc-kit--color--bg--menu-active);
 }</style>