@streamscloud/kit 0.17.0 → 0.18.0

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

@@ -0,0 +1,189 @@
+<script lang="ts">import { Icon } from '../icon';
+import { Toggle } from '../toggle';
+import IconCheckboxChecked from '@fluentui/svg-icons/icons/checkbox_checked_16_filled.svg?raw';
+import IconCheckboxIndeterminate from '@fluentui/svg-icons/icons/checkbox_indeterminate_16_filled.svg?raw';
+import IconCheckboxUnchecked from '@fluentui/svg-icons/icons/checkbox_unchecked_16_regular.svg?raw';
+import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_16_regular.svg?raw';
+const { selectable, size = 'md', variant = 'normal', indent = false, disabled = false, prepend, children, on } = $props();
+const display = $derived(selectable?.display ?? 'checkbox');
+const checkboxState = $derived(selectable?.selected === 'indeterminate' ? 'indeterminate' : selectable?.selected ? 'checked' : 'unchecked');
+const isChecked = $derived(selectable?.selected === true);
+const tinted = $derived(isChecked && variant === 'normal');
+const strong = $derived(isChecked && display === 'checkmark');
+const ariaChecked = $derived(selectable && display === 'checkbox' ? (checkboxState === 'indeterminate' ? 'mixed' : checkboxState === 'checked') : undefined);
+const ariaPressed = $derived(selectable && display !== 'checkbox' ? isChecked : undefined);
+</script>
+
+<button
+  type="button"
+  class="toolbar-option toolbar-option--{size} toolbar-option--{variant}"
+  class:toolbar-option--selected={tinted}
+  class:toolbar-option--strong={strong}
+  class:toolbar-option--indent={indent}
+  class:toolbar-option--disabled={disabled}
+  class:toolbar-option--muted-sm={variant === 'muted' && size === 'sm'}
+  class:toolbar-option--muted-md={variant === 'muted' && size === 'md'}
+  disabled={disabled}
+  role={selectable && display === 'checkbox' ? 'checkbox' : undefined}
+  aria-checked={ariaChecked}
+  aria-pressed={ariaPressed}
+  onclick={() => on?.click?.()}>
+  {#if prepend}
+    <span class="toolbar-option__prepend">{@render prepend()}</span>
+  {/if}
+  {#if selectable && display === 'checkbox'}
+    <span class="toolbar-option__check toolbar-option__check--{checkboxState}">
+      {#if checkboxState === 'checked'}
+        <Icon src={IconCheckboxChecked} />
+      {:else if checkboxState === 'indeterminate'}
+        <Icon src={IconCheckboxIndeterminate} />
+      {:else}
+        <Icon src={IconCheckboxUnchecked} />
+      {/if}
+    </span>
+  {/if}
+  <span class="toolbar-option__label">{@render children()}</span>
+  {#if selectable && display === 'checkmark'}
+    <span class="toolbar-option__checkmark" class:toolbar-option__checkmark--hidden={!isChecked}><Icon src={IconCheckmark} /></span>
+  {:else if selectable && display === 'switch'}
+    <span class="toolbar-option__switch"><Toggle presentational checked={isChecked} disabled={disabled} /></span>
+  {/if}
+</button>
+
+<!--
+@component
+A single row for toolbar dropdowns, matching the kit select listbox options. Pass `selectable` for a
+multi (`display='checkbox'`, tri-state) or single (`display='checkmark'`) option; omit it for a plain
+button-like row. `variant` covers group headers (`emphasis`) and secondary actions (`muted`). Mix
+these — plus `ToolbarSectionTitle` — inside one panel to build column / field pickers.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-option--height` | Row height | per size (28 / 32px) |
+| `--sc-kit--toolbar-option--padding-inline` | Horizontal padding | per size |
+| `--sc-kit--toolbar-option--font-size` | Label font size | per size |
+| `--sc-kit--toolbar-option--gap` | Gap between glyph and label | `var(--sc-kit--space--2)` |
+| `--sc-kit--toolbar-option--border-radius` | Corner radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--toolbar-option--color` | Label color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--toolbar-option--color--selected` | Selected label + glyph color | `var(--sc-kit--color--accent)` |
+| `--sc-kit--toolbar-option--color--muted` | `muted` variant color | `var(--sc-kit--color--text--secondary)` |
+| `--sc-kit--toolbar-option--background--hover` | Hover background | `var(--sc-kit--color--accent--softer)` |
+| `--sc-kit--toolbar-option--glyph--color` | Unselected checkbox glyph color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--toolbar-option--glyph--size` | Selection glyph (checkbox / checkmark) size | per size (14 / 16px) |
+-->
+
+<style>.toolbar-option {
+  --_opt--height: var(--sc-kit--toolbar-option--height, var(--_opt--size-height));
+  --_opt--padding-inline: var(--sc-kit--toolbar-option--padding-inline, var(--_opt--size-padding-inline));
+  --_opt--font-size: var(--sc-kit--toolbar-option--font-size, var(--_opt--size-font-size));
+  --_opt--gap: var(--sc-kit--toolbar-option--gap, var(--sc-kit--space--2));
+  --_opt--border-radius: var(--sc-kit--toolbar-option--border-radius, var(--sc-kit--radius--sm));
+  --_opt--color: var(--sc-kit--toolbar-option--color, var(--sc-kit--color--text--primary));
+  --_opt--color-selected: var(--sc-kit--toolbar-option--color--selected, var(--sc-kit--color--accent));
+  --_opt--color-muted: var(--sc-kit--toolbar-option--color--muted, var(--sc-kit--color--text--secondary));
+  --_opt--background-hover: var(--sc-kit--toolbar-option--background--hover, var(--sc-kit--color--accent--softer));
+  --_opt--glyph-color: var(--sc-kit--toolbar-option--glyph--color, var(--sc-kit--color--text--muted));
+  --_opt--glyph-size: var(--sc-kit--toolbar-option--glyph--size, var(--_opt--size-glyph-size));
+  appearance: none;
+  border: 0;
+  background: transparent;
+  text-align: inherit;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: var(--_opt--gap);
+  flex-shrink: 0;
+  inline-size: 100%;
+  block-size: var(--_opt--height);
+  padding-block: 0;
+  padding-inline: var(--_opt--padding-inline);
+  border-radius: var(--_opt--border-radius);
+  color: var(--_opt--color);
+  font-size: var(--_opt--font-size);
+  line-height: var(--sc-kit--leading--tight);
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.toolbar-option--sm {
+  --_opt--size-height: var(--sc-kit--field--height--sm);
+  --_opt--size-padding-inline: var(--sc-kit--space--2);
+  --_opt--size-font-size: var(--sc-kit--font-size--sm);
+  --_opt--size-glyph-size: var(--sc-kit--field--icon--size--sm);
+}
+.toolbar-option--md {
+  --_opt--size-height: var(--sc-kit--field--height--md);
+  --_opt--size-padding-inline: var(--sc-kit--space--3);
+  --_opt--size-font-size: var(--sc-kit--font-size--md);
+  --_opt--size-glyph-size: var(--sc-kit--field--icon--size--md);
+}
+.toolbar-option:hover {
+  background: var(--_opt--background-hover);
+}
+.toolbar-option--indent {
+  padding-inline-start: calc(var(--_opt--padding-inline) + var(--_opt--glyph-size) + var(--_opt--gap));
+}
+.toolbar-option--selected {
+  --_opt--color: var(--_opt--color-selected);
+}
+.toolbar-option--strong {
+  font-weight: var(--sc-kit--font-weight--semibold);
+}
+.toolbar-option--emphasis {
+  font-weight: var(--sc-kit--font-weight--semibold);
+}
+.toolbar-option--muted {
+  --_opt--color: var(--_opt--color-muted);
+}
+.toolbar-option--muted-sm {
+  --_opt--size-font-size: var(--sc-kit--font-size--xs);
+}
+.toolbar-option--muted-md {
+  --_opt--size-font-size: var(--sc-kit--font-size--sm);
+}
+.toolbar-option--disabled {
+  --_opt--color: var(--sc-kit--color--text--muted);
+  cursor: default;
+}
+.toolbar-option__prepend {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+}
+.toolbar-option__check {
+  --sc-kit--icon--size: var(--_opt--glyph-size);
+  --sc-kit--icon--color: var(--_opt--glyph-color);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+}
+.toolbar-option__check--checked, .toolbar-option__check--indeterminate {
+  --sc-kit--icon--color: var(--_opt--color-selected);
+}
+.toolbar-option__label {
+  flex: 1;
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.toolbar-option__checkmark {
+  --sc-kit--icon--size: var(--_opt--glyph-size);
+  --sc-kit--icon--color: var(--_opt--color-selected);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+}
+.toolbar-option__checkmark--hidden {
+  visibility: hidden;
+}
+.toolbar-option__switch {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  --sc-kit--toggle--track-height: var(--_opt--glyph-size);
+  --sc-kit--toggle--track-width: calc(var(--_opt--glyph-size) * 1.8);
+  --sc-kit--toggle--thumb-size: calc(var(--_opt--glyph-size) - 0.25rem);
+  --sc-kit--toggle--thumb-travel: calc(var(--_opt--glyph-size) * 0.8);
+}</style>

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

@@ -0,0 +1,47 @@
+import type { Snippet } from 'svelte';
+type Selectable = {
+    selected: boolean | 'indeterminate';
+    /** Glyph for the selection: a left checkbox (multi), a right checkmark (single / preset), or a right switch (toggle). @default 'checkbox' */
+    display?: 'checkbox' | 'checkmark' | 'switch';
+};
+type Props = {
+    /** Selection behavior. Omit entirely for a plain, button-like row (e.g. a `Clear all` action). */
+    selectable?: Selectable;
+    /** Row density. @default 'md' */
+    size?: 'sm' | 'md';
+    /** Label treatment: `emphasis` = semibold, never tinted (group headers); `muted` = dimmed + one step smaller font (secondary actions). @default 'normal' */
+    variant?: 'normal' | 'emphasis' | 'muted';
+    /** Indent under a section title / group header. @default false */
+    indent?: boolean;
+    disabled?: boolean;
+    /** Leading content drawn before the standard glyph + label, inside the option's own padding / gap (e.g. a drag handle). */
+    prepend?: Snippet;
+    children: Snippet;
+    on?: {
+        click?: () => void;
+    };
+};
+/**
+ * A single row for toolbar dropdowns, matching the kit select listbox options. Pass `selectable` for a
+ * multi (`display='checkbox'`, tri-state) or single (`display='checkmark'`) option; omit it for a plain
+ * button-like row. `variant` covers group headers (`emphasis`) and secondary actions (`muted`). Mix
+ * these — plus `ToolbarSectionTitle` — inside one panel to build column / field pickers.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-option--height` | Row height | per size (28 / 32px) |
+ * | `--sc-kit--toolbar-option--padding-inline` | Horizontal padding | per size |
+ * | `--sc-kit--toolbar-option--font-size` | Label font size | per size |
+ * | `--sc-kit--toolbar-option--gap` | Gap between glyph and label | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--toolbar-option--border-radius` | Corner radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--toolbar-option--color` | Label color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--toolbar-option--color--selected` | Selected label + glyph color | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--toolbar-option--color--muted` | `muted` variant color | `var(--sc-kit--color--text--secondary)` |
+ * | `--sc-kit--toolbar-option--background--hover` | Hover background | `var(--sc-kit--color--accent--softer)` |
+ * | `--sc-kit--toolbar-option--glyph--color` | Unselected checkbox glyph color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--toolbar-option--glyph--size` | Selection glyph (checkbox / checkmark) size | per size (14 / 16px) |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -1,31 +1,46 @@
 <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();
+const { triggerLabel, icon, size = 'sm', borderless = false, position = 'bottom-start', columnFlex = true, children } = $props();
 </script>
 
 <div class="toolbar-popover">
   <Popover position={position} keepOpen>
     {#snippet trigger()}
-      <Button type="presentational" variant="secondary" size={size}>
+      <Button type="presentational" variant={borderless ? 'ghost' : 'secondary'} size={size}>
         <IconText icon={icon} secondaryIcon={IconChevronDown} size={size} iconScale="large">{triggerLabel}</IconText>
       </Button>
     {/snippet}
-    <ToolbarPanel title={title} footer={footer}>
+    {#if columnFlex}
+      <div class="toolbar-popover__content">{@render children()}</div>
+    {:else}
       {@render children()}
-    </ToolbarPanel>
+    {/if}
   </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.
+A toolbar popover button — a secondary `Button` trigger (sharing the `sm | md | lg` field size preset)
+opening a `Popover` panel. By default the content is laid out as a flex column (`columnFlex`); pass
+`columnFlex={false}` to render it raw. Compose the panel from `ToolbarOption`, `ToolbarSectionTitle`,
+`ToolbarDivider`, etc.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-popover--gap` | Gap between flex-column children | `0.125rem` (2px) |
 -->
 
 <style>.toolbar-popover {
+  --_toolbar-popover--gap: var(--sc-kit--toolbar-popover--gap, 0.125rem);
   display: contents;
+  --sc-kit--popover--content--padding: var(--sc-kit--space--2);
+}
+.toolbar-popover__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--_toolbar-popover--gap);
+  min-inline-size: 12.5rem;
 }</style>

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

@@ -2,21 +2,29 @@ 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' */
+    /** Render the trigger as a borderless (ghost) button instead of secondary. @default false */
+    borderless?: boolean;
+    /** @default 'bottom-start' */
     position?: Placement;
+    /** Lay the panel content out as a flex column, so callers don't wrap it themselves. @default true */
+    columnFlex?: boolean;
     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.
+ * A toolbar popover button — a secondary `Button` trigger (sharing the `sm | md | lg` field size preset)
+ * opening a `Popover` panel. By default the content is laid out as a flex column (`columnFlex`); pass
+ * `columnFlex={false}` to render it raw. Compose the panel from `ToolbarOption`, `ToolbarSectionTitle`,
+ * `ToolbarDivider`, etc.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-popover--gap` | Gap between flex-column children | `0.125rem` (2px) |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/page-toolbar/cmp.toolbar-section-title.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">const { size = 'xs', spaced = false, children } = $props();
+export {};
+</script>
+
+<div class="toolbar-section-title toolbar-section-title--{size}" class:toolbar-section-title--spaced={spaced}>{@render children()}</div>
+
+<!--
+@component
+A non-interactive section label inside a toolbar dropdown (e.g. `FIELDS` above a column list).
+Matches the kit select listbox group-header style. `spaced` adds extra top padding to set the
+section off from content above it.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-section-title--color` | Text color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--toolbar-section-title--font-family` | Font family | `var(--sc-kit--font--mono)` |
+| `--sc-kit--toolbar-section-title--font-size` | Font size | per size (xs / sm / md) |
+| `--sc-kit--toolbar-section-title--padding-block-start` | Top padding | per `spaced` |
+-->
+
+<style>.toolbar-section-title {
+  --_title--color: var(--sc-kit--toolbar-section-title--color, var(--sc-kit--color--text--muted));
+  --_title--font-family: var(--sc-kit--toolbar-section-title--font-family, var(--sc-kit--font--mono));
+  --_title--font-size: var(--sc-kit--toolbar-section-title--font-size, var(--_title--size-font-size));
+  --_title--padding-block-start: var(--sc-kit--toolbar-section-title--padding-block-start, var(--sc-kit--space--1));
+  padding: var(--_title--padding-block-start) var(--sc-kit--space--2) var(--sc-kit--space--1);
+  color: var(--_title--color);
+  font-family: var(--_title--font-family);
+  font-size: var(--_title--font-size);
+  font-weight: var(--sc-kit--font-weight--medium);
+  text-transform: uppercase;
+  letter-spacing: var(--sc-kit--letter-spacing--wide);
+}
+.toolbar-section-title--xs {
+  --_title--size-font-size: var(--sc-kit--font-size--xs);
+}
+.toolbar-section-title--sm {
+  --_title--size-font-size: var(--sc-kit--font-size--sm);
+}
+.toolbar-section-title--md {
+  --_title--size-font-size: var(--sc-kit--font-size--md);
+}
+.toolbar-section-title--spaced {
+  --_title--padding-block-start: var(--sc-kit--space--3);
+}</style>

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

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Font size. @default 'xs' */
+    size?: 'xs' | 'sm' | 'md';
+    /** Add extra top padding to separate the section from content above it. @default false */
+    spaced?: boolean;
+    children: Snippet;
+};
+/**
+ * A non-interactive section label inside a toolbar dropdown (e.g. `FIELDS` above a column list).
+ * Matches the kit select listbox group-header style. `spaced` adds extra top padding to set the
+ * section off from content above it.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-section-title--color` | Text color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--toolbar-section-title--font-family` | Font family | `var(--sc-kit--font--mono)` |
+ * | `--sc-kit--toolbar-section-title--font-size` | Font size | per size (xs / sm / md) |
+ * | `--sc-kit--toolbar-section-title--padding-block-start` | Top padding | per `spaced` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-sort-select.svelte

@@ -0,0 +1,31 @@
+<script lang="ts" generics="S">import ToolbarFilterSelect from './cmp.toolbar-filter-select.svelte';
+import ToolbarIconButton from './cmp.toolbar-icon-button.svelte';
+import ToolbarSectionTitle from './cmp.toolbar-section-title.svelte';
+import { ToolbarSortSelectLocalization } from './toolbar-sort-select-localization';
+import IconFilter from '@fluentui/svg-icons/icons/filter_20_regular.svg?raw';
+const { options, value, label, size = 'sm', icon, compare, on } = $props();
+const localization = new ToolbarSortSelectLocalization();
+const orderByLabel = $derived(label ?? localization.orderBy);
+const selection = $derived([value]);
+const onChange = (next) => {
+    if (next.length > 0) {
+        on?.change?.(next[0]);
+    }
+};
+</script>
+
+<ToolbarFilterSelect label={orderByLabel} single footer={false} size={size} options={options} value={selection} compare={compare} on={{ change: onChange }}>
+  {#snippet header()}
+    <ToolbarSectionTitle>{orderByLabel}</ToolbarSectionTitle>
+  {/snippet}
+  {#snippet trigger()}
+    <ToolbarIconButton presentational icon={icon ?? IconFilter} size={size} />
+  {/snippet}
+</ToolbarFilterSelect>
+
+<!--
+@component
+A toolbar sort control: a `ToolbarFilterSelect` in single-select mode behind a flat icon trigger
+(`ToolbarIconButton`), with an `Order by` section title above the options. Stand-alone, or composed into
+`ToolbarViewControls` via its `prepend` snippet.
+-->

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

@@ -0,0 +1,44 @@
+import type { SelectItem } from '../select';
+declare function $$render<S>(): {
+    props: {
+        options: SelectItem<S>[];
+        value: S;
+        /** Title shown above the options. @default localized `Order by` */
+        label?: string;
+        /** Button size preset — sm = 28px, md = 32px. @default 'sm' */
+        size?: "sm" | "md";
+        /** Trigger glyph (a string SVG source). @default a filter glyph */
+        icon?: string;
+        /** Equality comparator — required when `S` is an object. */
+        compare?: (a: S, b: S) => boolean;
+        on?: {
+            change?: (value: S) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<S> {
+    props(): ReturnType<typeof $$render<S>>['props'];
+    events(): ReturnType<typeof $$render<S>>['events'];
+    slots(): ReturnType<typeof $$render<S>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <S>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<S>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<S>['props']>, ReturnType<__sveltets_Render<S>['events']>, ReturnType<__sveltets_Render<S>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<S>['bindings']>;
+    } & ReturnType<__sveltets_Render<S>['exports']>;
+    <S>(internal: unknown, props: ReturnType<__sveltets_Render<S>['props']> & {}): ReturnType<__sveltets_Render<S>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A toolbar sort control: a `ToolbarFilterSelect` in single-select mode behind a flat icon trigger
+ * (`ToolbarIconButton`), with an `Order by` section title above the options. Stand-alone, or composed into
+ * `ToolbarViewControls` via its `prepend` snippet.
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<S> = InstanceType<typeof Cmp<S>>;
+export default Cmp;

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

@@ -2,45 +2,45 @@
 const { segments, value, children, on } = $props();
 </script>
 
-<div class="toolbar-switch-item">
-  <div class="toolbar-switch-item__label">
+<div class="toolbar-switch">
+  <div class="toolbar-switch__label">
     {@render children()}
   </div>
-  <div class="toolbar-switch-item__switch">
+  <div class="toolbar-switch__switch">
     <SegmentedControl segments={segments} value={value} variant="outlined" size="sm" on={{ change: (v: T) => on?.change?.(v) }} />
   </div>
 </div>
 
 <!--
 @component
-A switch item for toolbar panels. Shows a label on the left and a segmented control on the right.
+A labeled switch for toolbar dropdowns. 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-kit--color--text--primary)` |
+| `--sc-kit--toolbar-switch--label--color` | Label text color | `var(--sc-kit--color--text--primary)` |
 -->
 
-<style>.toolbar-switch-item {
-  --_toolbar-switch-item--label--color: var(--sc-kit--toolbar-switch-item--label--color, var(--sc-kit--color--text--primary));
+<style>.toolbar-switch {
+  --_toolbar-switch--label--color: var(--sc-kit--toolbar-switch--label--color, var(--sc-kit--color--text--primary));
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--sc-kit--space--2);
   padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
 }
-.toolbar-switch-item__label {
+.toolbar-switch__label {
   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-switch-item--label--color);
+  color: var(--_toolbar-switch--label--color);
   min-width: 0;
   text-overflow: ellipsis;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
 }
-.toolbar-switch-item__switch {
+.toolbar-switch__switch {
   flex-shrink: 0;
   --sc-kit--segmented-control--border-radius: var(--sc-kit--radius--md);
   --sc-kit--segmented-control--background--active: var(--sc-kit--color--accent);

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

@@ -29,12 +29,12 @@ interface $$IsomorphicComponent {
     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.
+ * A labeled switch for toolbar dropdowns. 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-kit--color--text--primary)` |
+ * | `--sc-kit--toolbar-switch--label--color` | Label text color | `var(--sc-kit--color--text--primary)` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T> = InstanceType<typeof Cmp<T>>;

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

@@ -0,0 +1,14 @@
+<script lang="ts">import ToolbarOption from './cmp.toolbar-option.svelte';
+const { checked, size = 'md', disabled = false, children, on } = $props();
+</script>
+
+<ToolbarOption size={size} disabled={disabled} selectable={{ selected: checked, display: 'switch' }} on={{ click: () => on?.change?.(!checked) }}>
+  {@render children()}
+</ToolbarOption>
+
+<!--
+@component
+A toggle row for toolbar dropdowns — a thin wrapper over `ToolbarOption` with a trailing switch. The
+whole row is the click target; clicking flips `checked` through `on.change`. The switch is a
+presentational `Toggle` sized to the option glyph; sizing and styling come from `ToolbarOption`.
+-->

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    checked: boolean;
+    /** Row density — forwarded to `ToolbarOption`. @default 'md' */
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    children: Snippet;
+    on?: {
+        change?: (value: boolean) => void;
+    };
+};
+/**
+ * A toggle row for toolbar dropdowns — a thin wrapper over `ToolbarOption` with a trailing switch. The
+ * whole row is the click target; clicking flips `checked` through `on.change`. The switch is a
+ * presentational `Toggle` sized to the option glyph; sizing and styling come from `ToolbarOption`.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-view-controls.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">import { LocalStorageItem } from '../../core/local-storage';
+import ToolbarIconButton from './cmp.toolbar-icon-button.svelte';
+import { ToolbarViewControlsLocalization } from './toolbar-view-controls-localization';
+import IconAppsList from '@fluentui/svg-icons/icons/apps_list_20_regular.svg?raw';
+import IconGrid from '@fluentui/svg-icons/icons/grid_20_regular.svg?raw';
+import { untrack } from 'svelte';
+const { view, size = 'sm', viewStorageKey, prepend, on } = $props();
+const localization = new ToolbarViewControlsLocalization();
+let storage = null;
+$effect(() => untrack(() => {
+    if (!viewStorageKey) {
+        return;
+    }
+    storage = LocalStorageItem.of(viewStorageKey);
+    const saved = storage.get();
+    if (saved === 'list' || saved === 'grid') {
+        on?.viewChange?.(saved);
+    }
+}));
+const setView = (next) => {
+    storage?.set(next);
+    on?.viewChange?.(next);
+};
+</script>
+
+<div class="toolbar-view-controls" role="group" aria-label={localization.label}>
+  {#if prepend}
+    {@render prepend()}
+  {/if}
+  <ToolbarIconButton icon={IconAppsList} size={size} active={view === 'list'} aria-label={localization.listView} on={{ click: () => setView('list') }} />
+  <ToolbarIconButton icon={IconGrid} size={size} active={view === 'grid'} aria-label={localization.gridView} on={{ click: () => setView('grid') }} />
+</div>
+
+<!--
+@component
+A toolbar view switcher: a `list` / `grid` toggle built on the shared `ToolbarIconButton` (flat, 28px at
+`sm` / 32px at `md`, 20px glyph). Pass `viewStorageKey` to persist the view across reloads, and compose a
+leading control — e.g. `ToolbarSortSelect` — through the `prepend` snippet.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-view-controls--gap` | Gap between the controls | `var(--sc-kit--space--3)` |
+-->
+
+<style>.toolbar-view-controls {
+  --_tvc--gap: var(--sc-kit--toolbar-view-controls--gap, var(--sc-kit--space--3));
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_tvc--gap);
+}</style>