@streamscloud/kit 0.17.0 → 0.18.0

package/dist/ui/badge/cmp.badge.svelte

@@ -22,6 +22,7 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
 | `--sc-kit--badge--padding-inline` | Horizontal padding | `0.875rem 0.75rem` |
 | `--sc-kit--badge--border-radius` | Corner radius | `var(--sc-kit--radius--pill)` |
 | `--sc-kit--badge--font-size` | Content font size | per size |
+| `--sc-kit--badge--icon-size` | Leading icon size | per size (14 / 16px) |
 | `--sc-kit--badge--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
 | `--sc-kit--badge--gap` | Gap between children | `6px` |
 -->
@@ -48,6 +49,7 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
+  --sc-kit--icon--size: var(--_badge--icon-size);
 }
 .badge__content {
   min-width: 0;
@@ -63,10 +65,12 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
 .badge--sm {
   --_badge--height: var(--sc-kit--badge--height, 1.25rem);
   --_badge--font-size: var(--sc-kit--badge--font-size, 0.625rem);
+  --_badge--icon-size: var(--sc-kit--badge--icon-size, 0.875rem);
 }
 .badge--md {
   --_badge--height: var(--sc-kit--badge--height, 1.5rem);
   --_badge--font-size: var(--sc-kit--badge--font-size, var(--sc-kit--font-size--xs));
+  --_badge--icon-size: var(--sc-kit--badge--icon-size, 1rem);
 }
 .badge--neutral-soft {
   --_badge--color: var(--sc-kit--badge--color, var(--sc-kit--color--text--secondary));

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

@@ -26,6 +26,7 @@ type Props = {
  * | `--sc-kit--badge--padding-inline` | Horizontal padding | `0.875rem 0.75rem` |
  * | `--sc-kit--badge--border-radius` | Corner radius | `var(--sc-kit--radius--pill)` |
  * | `--sc-kit--badge--font-size` | Content font size | per size |
+ * | `--sc-kit--badge--icon-size` | Leading icon size | per size (14 / 16px) |
  * | `--sc-kit--badge--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
  * | `--sc-kit--badge--gap` | Gap between children | `6px` |
  */

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

@@ -0,0 +1,131 @@
+<script lang="ts">import { Icon } from '../icon';
+import ToolbarDivider from './cmp.toolbar-divider.svelte';
+import ToolbarOption from './cmp.toolbar-option.svelte';
+import ToolbarSectionTitle from './cmp.toolbar-section-title.svelte';
+import { ReorderableCheckboxListLocalization } from './reorderable-checkbox-list-localization';
+import IconReorderDotsVertical from '@fluentui/svg-icons/icons/re_order_dots_vertical_20_regular.svg?raw';
+import { flip } from 'svelte/animate';
+import { dndzone } from 'svelte-dnd-action';
+let { items, title, standard, size = 'md', showClearAll = true, on } = $props();
+const localization = new ReorderableCheckboxListLocalization();
+const reorderableItems = $derived(items.filter((i) => !i.fixed));
+const fixedItems = $derived(items.filter((i) => i.fixed));
+const toReorderable = ({ id, label, enabled }) => ({ id, label, enabled });
+const toFixed = ({ id, label, enabled, fixed }) => ({ id, label, enabled, fixed });
+let dndItems = $state.raw([]);
+$effect(() => {
+    dndItems = reorderableItems.map(toReorderable);
+});
+const flipDurationMs = 200;
+const emitChange = (reordered) => {
+    on.change([...fixedItems.map(toFixed), ...reordered.map(toReorderable)]);
+};
+const handleConsider = (e) => {
+    dndItems = e.detail.items;
+};
+const handleFinalize = (e) => {
+    emitChange(e.detail.items);
+};
+const handleToggle = (id, enabled) => {
+    emitChange(dndItems.map((i) => (i.id === id ? { ...i, enabled } : i)));
+};
+const handleFixedToggle = (id, enabled) => {
+    const updatedFixed = fixedItems.map((item) => toFixed(item.id === id ? { ...item, enabled } : item));
+    on.change([...updatedFixed, ...dndItems.map(toReorderable)]);
+};
+const anyEnabled = $derived(items.some((i) => i.enabled));
+const clearAll = () => {
+    on.change([...fixedItems.map((item) => toFixed({ ...item, enabled: false })), ...dndItems.map((item) => toReorderable({ ...item, enabled: false }))]);
+};
+const allEnabled = $derived(items.length > 0 && items.every((i) => i.enabled));
+const matchesStandard = $derived(!!standard && items.length === standard.length && items.every((item, idx) => item.id === standard[idx].id && item.enabled === standard[idx].enabled));
+const standardCoversAll = $derived(!!standard && standard.length > 0 && standard.every((i) => i.enabled));
+const selectStandard = () => {
+    if (standard) {
+        on.change(standard.map((item) => (item.fixed ? toFixed(item) : toReorderable(item))));
+    }
+};
+const enableAll = () => {
+    on.change([...fixedItems.map((item) => toFixed({ ...item, enabled: true })), ...dndItems.map((item) => toReorderable({ ...item, enabled: true }))]);
+};
+</script>
+
+<div class="reorderable-checkbox-list">
+  {#if standard}
+    <ToolbarOption size={size} selectable={{ selected: matchesStandard, display: 'checkmark' }} on={{ click: selectStandard }}
+      >{localization.standard}</ToolbarOption>
+    {#if !standardCoversAll}
+      <ToolbarOption size={size} selectable={{ selected: allEnabled, display: 'checkmark' }} on={{ click: enableAll }}>{localization.allFields}</ToolbarOption>
+    {/if}
+  {/if}
+  {#if title}
+    <ToolbarSectionTitle>{title}</ToolbarSectionTitle>
+  {/if}
+  {#each fixedItems as item (item.id)}
+    <ToolbarOption size={size} selectable={{ selected: item.enabled, display: 'checkbox' }} on={{ click: () => handleFixedToggle(item.id, !item.enabled) }}>
+      {#snippet prepend()}
+        <span class="reorderable-checkbox-list__handle reorderable-checkbox-list__handle--hidden" aria-hidden="true"
+          ><Icon src={IconReorderDotsVertical} /></span>
+      {/snippet}
+      {item.label}
+    </ToolbarOption>
+  {/each}
+  <div
+    class="reorderable-checkbox-list__dnd"
+    use:dndzone={{ items: dndItems, dropTargetStyle: {}, flipDurationMs, morphDisabled: true }}
+    onconsider={handleConsider}
+    onfinalize={handleFinalize}>
+    {#each dndItems as item (item.id)}
+      <div class="reorderable-checkbox-list__item" animate:flip={{ duration: flipDurationMs }}>
+        <ToolbarOption size={size} selectable={{ selected: item.enabled, display: 'checkbox' }} on={{ click: () => handleToggle(item.id, !item.enabled) }}>
+          {#snippet prepend()}
+            <span class="reorderable-checkbox-list__handle"><Icon src={IconReorderDotsVertical} /></span>
+          {/snippet}
+          {item.label}
+        </ToolbarOption>
+      </div>
+    {/each}
+  </div>
+  {#if showClearAll && anyEnabled}
+    <ToolbarDivider />
+    <ToolbarOption size={size} variant="muted" on={{ click: clearAll }}>{localization.clearAll}</ToolbarOption>
+  {/if}
+</div>
+
+<!--
+@component
+A reorderable checklist: each row is a draggable `ToolbarOption` checkbox preceded by a left drag handle.
+Clicking a row toggles its `enabled`; dragging reorders. Items flagged `fixed` render above the drag zone
+with a hidden handle (non-reorderable, still toggleable). Pass `title` for a section header, and `standard`
+(a canonical order + enabled reference) to render `Standard` / `All fields` preset rows with auto-detected
+active state. A default `Clear all` footer shows while any item is enabled — set `showClearAll={false}` to
+remove it.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--reorderable-checkbox-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--muted)` |
+-->
+
+<style>.reorderable-checkbox-list {
+  --_rcl--handle--color: var(--sc-kit--reorderable-checkbox-list--handle--color, var(--sc-kit--color--text--muted));
+  display: flex;
+  flex-direction: column;
+}
+.reorderable-checkbox-list__dnd {
+  display: flex;
+  flex-direction: column;
+}
+.reorderable-checkbox-list__handle {
+  --sc-kit--icon--size: 1rem;
+  --sc-kit--icon--color: var(--_rcl--handle--color);
+  display: inline-flex;
+  align-items: center;
+  cursor: grab;
+}
+.reorderable-checkbox-list__handle:active {
+  cursor: grabbing;
+}
+.reorderable-checkbox-list__handle--hidden {
+  visibility: hidden;
+}</style>

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

@@ -0,0 +1,31 @@
+import type { ReorderableCheckboxItem } from './types';
+type Props = {
+    items: ReorderableCheckboxItem[];
+    /** Optional section title above the list. */
+    title?: string;
+    /** Reference `Standard` config (canonical order + enabled). When set, `Standard` / `All fields` preset rows render on top with auto-detected active state. */
+    standard?: ReorderableCheckboxItem[];
+    /** Row size preset — forwarded to `ToolbarOption`. @default 'md' */
+    size?: 'sm' | 'md';
+    /** Show the default `Clear all` footer (unchecks every item) while something is enabled. @default true */
+    showClearAll?: boolean;
+    on: {
+        change: (items: ReorderableCheckboxItem[]) => void;
+    };
+};
+/**
+ * A reorderable checklist: each row is a draggable `ToolbarOption` checkbox preceded by a left drag handle.
+ * Clicking a row toggles its `enabled`; dragging reorders. Items flagged `fixed` render above the drag zone
+ * with a hidden handle (non-reorderable, still toggleable). Pass `title` for a section header, and `standard`
+ * (a canonical order + enabled reference) to render `Standard` / `All fields` preset rows with auto-detected
+ * active state. A default `Clear all` footer shows while any item is enabled — set `showClearAll={false}` to
+ * remove it.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--reorderable-checkbox-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--muted)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-checkbox.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: 'checkbox' }} on={{ click: () => on?.change?.(!checked) }}>
+  {@render children()}
+</ToolbarOption>
+
+<!--
+@component
+A checkbox row for toolbar dropdowns — a thin wrapper over `ToolbarOption` with a leading checkbox
+glyph. The whole row is the click target; clicking toggles `checked` through `on.change`. Styling and
+sizing come from `ToolbarOption`.
+-->

package/dist/ui/page-toolbar/cmp.toolbar-checkbox.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 checkbox row for toolbar dropdowns — a thin wrapper over `ToolbarOption` with a leading checkbox
+ * glyph. The whole row is the click target; clicking toggles `checked` through `on.change`. Styling and
+ * sizing 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-divider.svelte

@@ -0,0 +1,19 @@
+<div class="toolbar-divider"></div>
+
+<!--
+@component
+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)` |
+-->
+
+<style>.toolbar-divider {
+  flex-shrink: 0;
+  block-size: 1px;
+  margin: var(--sc-kit--space--1) var(--sc-kit--space--2);
+  background: var(--sc-kit--toolbar-divider--color, var(--sc-kit--color--border));
+}</style>

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;