@streamscloud/kit 0.16.2 → 0.18.0

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

@@ -0,0 +1,35 @@
+export default Cmp;
+type Cmp = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+/**
+ * A thin horizontal separator for toolbar dropdown panels — use between option groups or above a
+ * footer. Compose it freely inside a `ToolbarFilterSelect` footer snippet.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-divider--color` | Line color | `var(--sc-kit--color--border)` |
+ */
+declare const Cmp: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -0,0 +1,143 @@
+<script lang="ts" generics="T">import { Button } from '../button';
+import { IconText } from '../icon-text';
+import { Popover } from '../popover';
+import { isSelectGroup } from '../select';
+import ToolbarDivider from './cmp.toolbar-divider.svelte';
+import ToolbarOption from './cmp.toolbar-option.svelte';
+import { ToolbarFilterSelectLocalization } from './toolbar-filter-select-localization';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+const { label, options, value, icon, header, footer, size = 'sm', trigger, borderless = false, optionSize = 'md', single = false, position = 'bottom-start', compare, on } = $props();
+const localization = new ToolbarFilterSelectLocalization();
+const eq = (a, b) => (compare ? compare(a, b) : a === b);
+const isSelected = (candidate) => value.some((selected) => eq(selected, candidate));
+const withValue = (list, candidate) => (list.some((item) => eq(item, candidate)) ? list : [...list, candidate]);
+const without = (list, candidate) => list.filter((item) => !eq(item, candidate));
+const optionDisplay = $derived(single ? 'checkmark' : 'checkbox');
+const leaves = $derived(options.flatMap((item) => (isSelectGroup(item) ? item.options : [item])));
+const selectedLeaves = $derived(leaves.filter((leaf) => isSelected(leaf.value)));
+const summary = $derived.by(() => {
+    if (selectedLeaves.length === 0) {
+        return label;
+    }
+    if (selectedLeaves.length === 1) {
+        return `${label}: ${selectedLeaves[0].label}`;
+    }
+    return `${label}: ${localization.selectedCount(selectedLeaves.length)}`;
+});
+const groupSelected = (group) => {
+    const selectedCount = group.options.filter((option) => isSelected(option.value)).length;
+    if (selectedCount === 0) {
+        return false;
+    }
+    return selectedCount === group.options.length ? true : 'indeterminate';
+};
+const emit = (next) => on?.change?.(next);
+const pickSingle = (candidate) => emit(isSelected(candidate) ? [] : [candidate]);
+const toggleOption = (option) => {
+    if (single) {
+        pickSingle(option.value);
+        return;
+    }
+    emit(isSelected(option.value) ? without(value, option.value) : withValue(value, option.value));
+};
+const toggleGroup = (group) => {
+    if (single) {
+        return;
+    }
+    const allSelected = group.options.every((option) => isSelected(option.value));
+    let next = value;
+    for (const option of group.options) {
+        next = allSelected ? without(next, option.value) : withValue(next, option.value);
+    }
+    if (group.value !== undefined) {
+        next = allSelected ? without(next, group.value) : withValue(next, group.value);
+    }
+    emit(next);
+};
+const toggleChild = (group, child) => {
+    if (single) {
+        pickSingle(child.value);
+        return;
+    }
+    let next = isSelected(child.value) ? without(value, child.value) : withValue(value, child.value);
+    if (group.value !== undefined) {
+        const anyChildSelected = group.options.some((option) => next.some((selected) => eq(selected, option.value)));
+        next = anyChildSelected ? withValue(next, group.value) : without(next, group.value);
+    }
+    emit(next);
+};
+const clearAll = () => emit([]);
+</script>
+
+<div class="toolbar-filter-select">
+  <Popover position={position} keepOpen aria-label={trigger ? label : undefined} trigger={triggerContent}>
+    <div class="filter">
+      {#if header}
+        {@render header()}
+      {/if}
+      {#each options as item (isSelectGroup(item) ? item.label : item.value)}
+        {#if isSelectGroup(item)}
+          <ToolbarOption
+            size={optionSize}
+            variant="emphasis"
+            selectable={{ selected: groupSelected(item), display: optionDisplay }}
+            on={{ click: () => toggleGroup(item) }}>{item.label}</ToolbarOption>
+          {#each item.options as child (child.value)}
+            <ToolbarOption
+              size={optionSize}
+              indent
+              selectable={{ selected: isSelected(child.value), display: optionDisplay }}
+              on={{ click: () => toggleChild(item, child) }}>{child.label}</ToolbarOption>
+          {/each}
+        {:else}
+          <ToolbarOption size={optionSize} selectable={{ selected: isSelected(item.value), display: optionDisplay }} on={{ click: () => toggleOption(item) }}
+            >{item.label}</ToolbarOption>
+        {/if}
+      {/each}
+      {#if footer}
+        {@render footer()}
+      {:else if footer !== false && value.length > 0}
+        <ToolbarDivider />
+        <ToolbarOption size={optionSize} variant="muted" on={{ click: clearAll }}>{single ? localization.clear : localization.clearAll}</ToolbarOption>
+      {/if}
+    </div>
+  </Popover>
+</div>
+
+{#snippet triggerContent()}
+  {#if trigger}
+    {@render trigger()}
+  {:else}
+    <Button type="presentational" variant={borderless ? 'ghost' : 'secondary'} size={size}>
+      <IconText icon={icon} secondaryIcon={IconChevronDown} size={size} iconScale="large" trimText>{summary}</IconText>
+    </Button>
+  {/if}
+{/snippet}
+
+<!--
+@component
+A compact toolbar filter dropdown: a secondary-button trigger whose label summarises the selection
+(`Status` → `Status: Draft` → `Status: 2 selected`), and a `ToolbarOption` checklist panel with a
+`Clear all` footer. Multi-select by default; `single` restricts to one (checkmark glyph). `options` is a
+flat `SelectOption[]` or one level of groups (`SelectOptionGroup`) for a tree with a tri-state parent
+row and `children-include-parent` cascade.
+`header` injects content above the list (preset rows, a `ToolbarSectionTitle`, …).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-filter-select--trigger--max-width` | Trigger max width before the label truncates | `13.75rem` (220px) |
+-->
+
+<style>.toolbar-filter-select {
+  display: contents;
+  --sc-kit--popover--content--padding: var(--sc-kit--space--2);
+  --sc-kit--button--max-width: var(--sc-kit--toolbar-filter-select--trigger--max-width, 13.75rem);
+}
+
+.filter {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-inline-size: 12.5rem;
+}</style>

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

@@ -0,0 +1,68 @@
+import type { IconProp } from '../icon';
+import { type SelectItem } from '../select';
+import type { Placement } from '@floating-ui/dom';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        label: string;
+        options: SelectItem<T>[];
+        value: T[];
+        /** Leading icon on the trigger button. */
+        icon?: IconProp;
+        /** Content rendered above the options list (e.g. preset rows + a `ToolbarSectionTitle`). */
+        header?: Snippet;
+        /** Trigger button density. @default 'sm' */
+        size?: "sm" | "md";
+        /** Custom presentational trigger content — replaces the default summary button. The popover is named by `label` (so an icon-only trigger stays accessible). */
+        trigger?: Snippet;
+        /** Render the default summary trigger as a borderless (ghost) button instead of secondary. @default false */
+        borderless?: boolean;
+        /** Option row density. @default 'md' */
+        optionSize?: "sm" | "md";
+        /** Restrict the selection to a single item — picking one replaces the previous (single-select). @default false */
+        single?: boolean;
+        /** Footer below the options: a snippet replaces the default `Clear all`; `false` removes it entirely. The default `Clear all` shows only while something is selected. A divider is drawn only when a footer renders. */
+        footer?: Snippet | false;
+        /** @default 'bottom-start' */
+        position?: Placement;
+        /** Equality comparator for `T`. Required when `T` is an object. @default (a, b) => a === b */
+        compare?: (a: T, b: T) => boolean;
+        on?: {
+            change?: (value: T[]) => void;
+        };
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A compact toolbar filter dropdown: a secondary-button trigger whose label summarises the selection
+ * (`Status` → `Status: Draft` → `Status: 2 selected`), and a `ToolbarOption` checklist panel with a
+ * `Clear all` footer. Multi-select by default; `single` restricts to one (checkmark glyph). `options` is a
+ * flat `SelectOption[]` or one level of groups (`SelectOptionGroup`) for a tree with a tri-state parent
+ * row and `children-include-parent` cascade.
+ * `header` injects content above the list (preset rows, a `ToolbarSectionTitle`, …).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-filter-select--trigger--max-width` | Trigger max width before the label truncates | `13.75rem` (220px) |
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<T> = InstanceType<typeof Cmp<T>>;
+export default Cmp;

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

@@ -0,0 +1,71 @@
+<script lang="ts">import { Icon } from '../icon';
+const { icon, 'aria-label': ariaLabel, size = 'sm', active = false, disabled = false, presentational = false, on } = $props();
+</script>
+
+{#if presentational}
+  <span class="toolbar-icon-button toolbar-icon-button--{size}" class:toolbar-icon-button--active={active}>
+    <Icon src={icon} size="md" />
+  </span>
+{:else}
+  <button
+    type="button"
+    class="toolbar-icon-button toolbar-icon-button--{size}"
+    class:toolbar-icon-button--active={active}
+    disabled={disabled}
+    aria-label={ariaLabel}
+    aria-pressed={active}
+    onclick={() => on?.click?.()}>
+    <Icon src={icon} size="md" />
+  </button>
+{/if}
+
+<!--
+@component
+A flat, square toolbar icon button (28px at `sm`, 32px at `md`, with a 20px glyph). Background appears on
+hover only; `active` tints the glyph with the accent color (no background). Pass `presentational` to render
+a non-interactive `<span>` for use inside a wrapper that owns the click + semantics (e.g. a Popover trigger).
+Shared by `ToolbarViewControls` and the `ToolbarFilterSelect` icon trigger so they stay visually identical.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-icon-button--color` | Idle glyph color | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--toolbar-icon-button--color--active` | Active glyph color | `var(--sc-kit--color--accent)` |
+| `--sc-kit--toolbar-icon-button--background--hover` | Hover background | `var(--sc-kit--color--bg--hover)` |
+-->
+
+<style>.toolbar-icon-button {
+  --_tib--color: var(--sc-kit--toolbar-icon-button--color, var(--sc-kit--color--text--muted));
+  --_tib--color-active: var(--sc-kit--toolbar-icon-button--color--active, var(--sc-kit--color--accent));
+  --_tib--background-hover: var(--sc-kit--toolbar-icon-button--background--hover, var(--sc-kit--color--bg--hover));
+  --_tib--size: var(--_tib--size-height);
+  --sc-kit--icon--color: var(--_tib--color);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--_tib--size);
+  block-size: var(--_tib--size);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: var(--sc-kit--field--border-radius--sm);
+  cursor: pointer;
+  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-icon-button--sm {
+  --_tib--size-height: var(--sc-kit--field--height--sm);
+}
+.toolbar-icon-button--md {
+  --_tib--size-height: var(--sc-kit--field--height--md);
+}
+.toolbar-icon-button:hover {
+  background: var(--_tib--background-hover);
+}
+.toolbar-icon-button--active {
+  --sc-kit--icon--color: var(--_tib--color-active);
+}
+.toolbar-icon-button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}</style>

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

@@ -0,0 +1,32 @@
+type Props = {
+    /** Glyph — a string SVG source. */
+    icon: string;
+    /** Accessible name. Required for the interactive button; omit for `presentational` (the wrapper owns the name). */
+    'aria-label'?: string;
+    /** Button size — sm = 28px, md = 32px. @default 'sm' */
+    size?: 'sm' | 'md';
+    /** Selected state — tints the glyph with the accent color (no background). */
+    active?: boolean;
+    disabled?: boolean;
+    /** Render a non-interactive `<span>` for embedding inside another interactive wrapper (e.g. a Popover trigger). @default false */
+    presentational?: boolean;
+    on?: {
+        click?: () => void;
+    };
+};
+/**
+ * A flat, square toolbar icon button (28px at `sm`, 32px at `md`, with a 20px glyph). Background appears on
+ * hover only; `active` tints the glyph with the accent color (no background). Pass `presentational` to render
+ * a non-interactive `<span>` for use inside a wrapper that owns the click + semantics (e.g. a Popover trigger).
+ * Shared by `ToolbarViewControls` and the `ToolbarFilterSelect` icon trigger so they stay visually identical.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-icon-button--color` | Idle glyph color | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--toolbar-icon-button--color--active` | Active glyph color | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--toolbar-icon-button--background--hover` | Hover background | `var(--sc-kit--color--bg--hover)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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>