@streamscloud/kit 0.10.7-1781513925548 → 0.10.7-1781528892980

package/dist/styles/_semantic.scss

@@ -104,9 +104,11 @@
   --sc-kit--field--padding-inline--md: 0.625rem; // 10px
   --sc-kit--field--padding-inline--lg: 0.75rem; // 12px
 
+  --sc-kit--field--icon--size--xs: 0.8125rem; // 13px
   --sc-kit--field--icon--size--sm: 0.875rem; // 14px
   --sc-kit--field--icon--size--md: 1rem; // 16px
   --sc-kit--field--icon--size--lg: 1.125rem; // 18px
+  --sc-kit--field--icon--size--xl: 1.25rem; // 20px
 
   // ============================================================
   // RADII

package/dist/ui/button/cmp.button.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">import { Spinner } from '../_internal/spinner';
-import { IconSlot } from '../icon';
-const { variant = 'primary', size = 'md', disabled = false, loading = false, fullWidth = false, 'aria-label': ariaLabel, icon, iconPosition = 'leading', children, ...mode } = $props();
+import { CONTROL_ICON_SIZE, IconSlot } from '../icon';
+const { variant = 'primary', size = 'md', iconScale = 'default', disabled = false, loading = false, fullWidth = false, 'aria-label': ariaLabel, icon, iconPosition = 'leading', children, ...mode } = $props();
 const inactive = $derived(disabled || loading);
 const isIconOnly = $derived(!children && (!!icon || loading));
+const iconFallbacks = $derived({ size: CONTROL_ICON_SIZE[size], scale: iconScale });
 const disabledVariantClass = $derived(inactive ? `btn--${variant}-disabled` : '');
 const anchorRel = $derived.by(() => {
     if (mode.type !== 'anchor') {
@@ -32,13 +33,13 @@ const handleClick = (e) => {
   {#if loading}
     <span class="btn__spinner"><Spinner /></span>
   {:else if icon && iconPosition === 'leading'}
-    <span class="btn__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+    <span class="btn__icon" aria-hidden="true"><IconSlot icon={icon} fallbacks={iconFallbacks} /></span>
   {/if}
   {#if children}
     <span class="btn__label">{@render children()}</span>
   {/if}
   {#if icon && iconPosition === 'trailing' && children}
-    <span class="btn__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+    <span class="btn__icon" aria-hidden="true"><IconSlot icon={icon} fallbacks={iconFallbacks} /></span>
   {/if}
 {/snippet}
 
@@ -103,7 +104,6 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
 | `--sc-kit--button--padding-inline` | Inline (horizontal) padding | per size |
 | `--sc-kit--button--font-size` | Label font size | per size |
 | `--sc-kit--button--gap` | Gap between icon and label | per size |
-| `--sc-kit--button--icon-size` | Icon / spinner size | per size (14 / 14 / 16 / 20 px for xs/sm/md/lg) |
 | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
 | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--regular)` |
 | `--sc-kit--button--width` | Explicit width | `fit-content` |
@@ -123,7 +123,7 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
   --_btn--padding-inline: var(--sc-kit--button--padding-inline, var(--_btn--size-padding-inline));
   --_btn--font-size: var(--sc-kit--button--font-size, var(--_btn--size-font-size));
   --_btn--gap: var(--sc-kit--button--gap, var(--_btn--size-gap));
-  --_btn--icon-size: var(--sc-kit--button--icon-size, var(--_btn--size-icon-size));
+  --_btn--icon-size: var(--_btn--size-icon-size);
   --_btn--width: var(--sc-kit--button--width, fit-content);
   --_btn--min-width: var(--sc-kit--button--min-width, 0);
   --_btn--max-width: var(--sc-kit--button--max-width, 100%);
@@ -175,13 +175,10 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
   text-overflow: ellipsis;
 }
 .btn__icon {
-  --sc-kit--icon--size: var(--_btn--icon-size);
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--_btn--icon-size);
-  height: var(--_btn--icon-size);
 }
 .btn__spinner {
   --sc-kit--spinner--size: var(--_btn--icon-size);
@@ -202,28 +199,28 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
   --_btn--size-padding-inline: var(--sc-kit--space--2);
   --_btn--size-font-size: var(--sc-kit--font-size--xs);
   --_btn--size-gap: var(--sc-kit--space--1);
-  --_btn--size-icon-size: 0.875rem;
+  --_btn--size-icon-size: var(--sc-kit--field--icon--size--xs);
 }
 .btn--sm {
   --_btn--size-height: 1.75rem;
   --_btn--size-padding-inline: var(--sc-kit--space--3);
   --_btn--size-font-size: var(--sc-kit--font-size--sm);
   --_btn--size-gap: var(--sc-kit--space--1);
-  --_btn--size-icon-size: 0.875rem;
+  --_btn--size-icon-size: var(--sc-kit--field--icon--size--sm);
 }
 .btn--md {
   --_btn--size-height: 2rem;
   --_btn--size-padding-inline: var(--sc-kit--space--4);
   --_btn--size-font-size: var(--sc-kit--font-size--md);
   --_btn--size-gap: var(--sc-kit--space--2);
-  --_btn--size-icon-size: 1rem;
+  --_btn--size-icon-size: var(--sc-kit--field--icon--size--md);
 }
 .btn--lg {
   --_btn--size-height: 2.5rem;
   --_btn--size-padding-inline: var(--sc-kit--space--6);
   --_btn--size-font-size: var(--sc-kit--font-size--lg);
   --_btn--size-gap: var(--sc-kit--space--2);
-  --_btn--size-icon-size: 1.25rem;
+  --_btn--size-icon-size: var(--sc-kit--field--icon--size--lg);
 }
 .btn--icon-only {
   --sc-kit--button--padding-inline: 0;

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

@@ -6,6 +6,8 @@ type BaseProps = {
     variant?: ButtonVariant;
     /** @default 'md' */
     size?: ButtonSize;
+    /** Bump the icon one step up the scale relative to `size`, leaving height/text unchanged. @default 'default' */
+    iconScale?: 'default' | 'large';
     disabled?: boolean;
     /** Renders a spinner in place of the icon (when leading) and blocks clicks. */
     loading?: boolean;
@@ -61,7 +63,6 @@ type Props = ButtonModeProps | AnchorModeProps;
  * | `--sc-kit--button--padding-inline` | Inline (horizontal) padding | per size |
  * | `--sc-kit--button--font-size` | Label font size | per size |
  * | `--sc-kit--button--gap` | Gap between icon and label | per size |
- * | `--sc-kit--button--icon-size` | Icon / spinner size | per size (14 / 14 / 16 / 20 px for xs/sm/md/lg) |
  * | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
  * | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--regular)` |
  * | `--sc-kit--button--width` | Explicit width | `fit-content` |

package/dist/ui/card-actions/cmp.card-action.svelte

@@ -15,7 +15,7 @@ let { action, on } = $props();
     action.callback?.();
     on?.click?.();
   }}>
-  <IconSlot icon={action.icon} color="text" />
+  <IconSlot icon={action.icon} fallbacks={{ color: 'text' }} />
 </button>
 
 <!--

package/dist/ui/feature-intro/cmp.feature-intro.svelte

@@ -18,7 +18,7 @@ const featureItemTag = $derived(`h${Math.min(titleLevel + 2, 6)}`);
       <div class="feature-intro__body">
         {#if eyebrow}
           <Badge variant="accent">
-            {#if eyebrow.icon}<IconSlot icon={eyebrow.icon} size="sm" />{/if}
+            {#if eyebrow.icon}<IconSlot icon={eyebrow.icon} fallbacks={{ size: 'sm' }} />{/if}
             {eyebrow.label}
           </Badge>
         {/if}
@@ -53,7 +53,7 @@ const featureItemTag = $derived(`h${Math.min(titleLevel + 2, 6)}`);
         {#each features as feature, i (i)}
           <li class="feature-intro__feature">
             {#if feature.icon}
-              <div class="feature-intro__feature-icon" aria-hidden="true"><IconSlot icon={feature.icon} size="md" /></div>
+              <div class="feature-intro__feature-icon" aria-hidden="true"><IconSlot icon={feature.icon} fallbacks={{ size: 'md' }} /></div>
             {/if}
             <div class="feature-intro__feature-body">
               <svelte:element this={featureItemTag} class="feature-intro__feature-title">

package/dist/ui/icon/cmp.icon-slot.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">import Icon from './cmp.icon.svelte';
-import { splitIcon } from './icon-utils';
-const { icon, color, size } = $props();
+import { scaleUp, splitIcon } from './icon-utils';
+const { icon, fallbacks } = $props();
 const split = $derived(splitIcon(icon));
+const fallbackSize = $derived(fallbacks?.scale === 'large' ? scaleUp(fallbacks?.size) : fallbacks?.size);
 </script>
 
 {#if split.snippet}
   {@render split.snippet()}
 {:else if split.src}
-  <Icon src={split.src} color={split.color ?? color ?? null} size={split.size ?? size ?? null} />
+  <Icon src={split.src} color={split.color ?? fallbacks?.color ?? null} size={split.size ?? fallbackSize ?? null} />
 {/if}
 
 <!--
 @component
 Renders an `IconProp` — discriminates between snippet, string SVG, and `{ src, color?, size? }` object.
 Use this wherever a component model carries an `icon: IconProp` field, so the discrimination logic
-lives in one place. `color` and `size` props provide fallbacks when the icon itself doesn't specify
-them; they are ignored when the icon is a snippet (snippets render themselves).
+lives in one place. `fallbacks.size` / `fallbacks.color` apply only when the icon object omits its own
+(ignored for snippets); `fallbacks.scale='large'` bumps the fallback size one step. An explicit
+`icon.size` / `icon.color` always wins.
 -->

package/dist/ui/icon/cmp.icon-slot.svelte.d.ts

@@ -2,16 +2,23 @@ import type { IconColor, IconProp, IconSize } from './types';
 type Props = {
     /** Icon to render — string SVG source, `{ src, color?, size? }` object, or custom snippet. */
     icon?: IconProp | null;
-    /** Fallback color when `icon` doesn't carry one (ignored for snippets). */
-    color?: IconColor;
-    /** Fallback size when `icon` doesn't carry one (ignored for snippets). */
-    size?: IconSize;
+    /**
+     * Values applied only when the `icon` object omits its own (ignored for snippets). `size` / `color`
+     * fill the gaps; `scale: 'large'` bumps the fallback `size` one step up. An explicit `icon.size` /
+     * `icon.color` always wins — scale never touches it.
+     */
+    fallbacks?: {
+        size?: IconSize;
+        color?: IconColor;
+        scale?: 'default' | 'large';
+    };
 };
 /**
  * Renders an `IconProp` — discriminates between snippet, string SVG, and `{ src, color?, size? }` object.
  * Use this wherever a component model carries an `icon: IconProp` field, so the discrimination logic
- * lives in one place. `color` and `size` props provide fallbacks when the icon itself doesn't specify
- * them; they are ignored when the icon is a snippet (snippets render themselves).
+ * lives in one place. `fallbacks.size` / `fallbacks.color` apply only when the icon object omits its own
+ * (ignored for snippets); `fallbacks.scale='large'` bumps the fallback size one step. An explicit
+ * `icon.size` / `icon.color` always wins.
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/icon/cmp.icon.svelte

@@ -20,7 +20,12 @@ onMount(() => {
     class:icon--sm={size === 'sm'}
     class:icon--md={size === 'md'}
     class:icon--lg={size === 'lg'}
-    class:icon--xlg={size === 'xlg'}>
+    class:icon--xlg={size === 'xlg'}
+    class:icon--control-xs={size === 'control-xs'}
+    class:icon--control-sm={size === 'control-sm'}
+    class:icon--control-md={size === 'control-md'}
+    class:icon--control-lg={size === 'control-lg'}
+    class:icon--control-xl={size === 'control-xl'}>
     {#if mounted}
       {@html HtmlHelper.sanitizeSvg(src)}
     {/if}
@@ -55,6 +60,11 @@ Renders an inline SVG icon with configurable size, color presets, and optional s
 | `icon--md` | `1.25rem` (20px) |
 | `icon--lg` | `2rem` (32px) |
 | `icon--xlg` | `3rem` (48px) |
+| `icon--control-xs` | `var(--sc-kit--field--icon--size--xs)` (13px) |
+| `icon--control-sm` | `var(--sc-kit--field--icon--size--sm)` (14px) |
+| `icon--control-md` | `var(--sc-kit--field--icon--size--md)` (16px) |
+| `icon--control-lg` | `var(--sc-kit--field--icon--size--lg)` (18px) |
+| `icon--control-xl` | `var(--sc-kit--field--icon--size--xl)` (20px) |
 -->
 
 <style>.icon {
@@ -104,6 +114,21 @@ Renders an inline SVG icon with configurable size, color presets, and optional s
 .icon--xlg {
   --sc-kit--icon--size: 3rem;
 }
+.icon--control-xs {
+  --sc-kit--icon--size: var(--sc-kit--field--icon--size--xs);
+}
+.icon--control-sm {
+  --sc-kit--icon--size: var(--sc-kit--field--icon--size--sm);
+}
+.icon--control-md {
+  --sc-kit--icon--size: var(--sc-kit--field--icon--size--md);
+}
+.icon--control-lg {
+  --sc-kit--icon--size: var(--sc-kit--field--icon--size--lg);
+}
+.icon--control-xl {
+  --sc-kit--icon--size: var(--sc-kit--field--icon--size--xl);
+}
 .icon :global(svg) {
   display: inline-block;
   color: inherit;

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

@@ -4,7 +4,11 @@ interface Props {
     src: string;
     /** Predefined color preset applied to the icon */
     color?: IconColor | null;
-    /** Size preset. Sets `--sc-kit--icon--size` to 14 / 20 / 32 / 48 px respectively. Omit to fall through to the CSS cascade (default 1.25rem = 20px). */
+    /**
+     * Size preset. Standalone visual weight `sm | md | lg | xlg` = 14 / 20 / 32 / 48 px;
+     * control-paired `control-xs | control-sm | control-md | control-lg | control-xl` = 13 / 14 / 16 / 18 / 20 px.
+     * Omit to fall through to the CSS cascade (default 1.25rem = 20px).
+     */
     size?: IconSize | null;
 }
 /**
@@ -32,6 +36,11 @@ interface Props {
  * | `icon--md` | `1.25rem` (20px) |
  * | `icon--lg` | `2rem` (32px) |
  * | `icon--xlg` | `3rem` (48px) |
+ * | `icon--control-xs` | `var(--sc-kit--field--icon--size--xs)` (13px) |
+ * | `icon--control-sm` | `var(--sc-kit--field--icon--size--sm)` (14px) |
+ * | `icon--control-md` | `var(--sc-kit--field--icon--size--md)` (16px) |
+ * | `icon--control-lg` | `var(--sc-kit--field--icon--size--lg)` (18px) |
+ * | `icon--control-xl` | `var(--sc-kit--field--icon--size--xl)` (20px) |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/icon/icon-utils.d.ts

@@ -1,9 +1,19 @@
 import type { IconColor, IconProp, IconSize } from './types';
 import type { Snippet } from 'svelte';
+/** Maps a control's size key to its control-scale `IconSize`. Validated against `IconControlSize` so a prefix/scale rename fails to compile here. */
+export declare const CONTROL_ICON_SIZE: {
+    xs: "control-xs";
+    sm: "control-sm";
+    md: "control-md";
+    lg: "control-lg";
+    xl: "control-xl";
+};
 export type SplitIcon = {
     snippet: Snippet | null;
     src: string | null;
     color: IconColor | null;
     size: IconSize | null;
 };
+/** One step up the icon-size scale (caps at the largest). Backs IconSlot's `scale: 'large'` fallback. */
+export declare const scaleUp: (size: IconSize | null | undefined) => IconSize | undefined;
 export declare const splitIcon: (icon: IconProp | undefined | null) => SplitIcon;

package/dist/ui/icon/icon-utils.js

@@ -1,3 +1,24 @@
+/** Maps a control's size key to its control-scale `IconSize`. Validated against `IconControlSize` so a prefix/scale rename fails to compile here. */
+export const CONTROL_ICON_SIZE = {
+    xs: 'control-xs',
+    sm: 'control-sm',
+    md: 'control-md',
+    lg: 'control-lg',
+    xl: 'control-xl'
+};
+const SIZE_STEP_UP = {
+    sm: 'md',
+    md: 'lg',
+    lg: 'xlg',
+    xlg: 'xlg',
+    'control-xs': 'control-sm',
+    'control-sm': 'control-md',
+    'control-md': 'control-lg',
+    'control-lg': 'control-xl',
+    'control-xl': 'control-xl'
+};
+/** One step up the icon-size scale (caps at the largest). Backs IconSlot's `scale: 'large'` fallback. */
+export const scaleUp = (size) => (!size ? undefined : SIZE_STEP_UP[size]);
 export const splitIcon = (icon) => {
     if (icon === null || icon === undefined) {
         return { snippet: null, src: null, color: null, size: null };

package/dist/ui/icon/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Icon } from './cmp.icon.svelte';
 export { default as IconSlot } from './cmp.icon-slot.svelte';
-export { splitIcon } from './icon-utils';
-export type { IconColor, IconProp, IconSize } from './types';
+export { CONTROL_ICON_SIZE, scaleUp, splitIcon } from './icon-utils';
+export type { IconColor, IconControlSize, IconControlSizeKey, IconProp, IconSize } from './types';

package/dist/ui/icon/index.js

@@ -1,3 +1,3 @@
 export { default as Icon } from './cmp.icon.svelte';
 export { default as IconSlot } from './cmp.icon-slot.svelte';
-export { splitIcon } from './icon-utils';
+export { CONTROL_ICON_SIZE, scaleUp, splitIcon } from './icon-utils';

package/dist/ui/icon/types.d.ts

@@ -1,6 +1,9 @@
 import type { Snippet } from 'svelte';
 export type IconColor = 'accent' | 'muted' | 'success' | 'warning' | 'danger' | 'text' | 'on-accent';
-export type IconSize = 'sm' | 'md' | 'lg' | 'xlg';
+export type IconStandaloneSize = 'sm' | 'md' | 'lg' | 'xlg';
+export type IconControlSizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type IconControlSize = 'control-xs' | 'control-sm' | 'control-md' | 'control-lg' | 'control-xl';
+export type IconSize = IconStandaloneSize | IconControlSize;
 export type IconProp = string | {
     src: string;
     color?: IconColor;

package/dist/ui/icon-text/cmp.icon-text.svelte

@@ -1,5 +1,6 @@
-<script lang="ts">import { IconSlot } from '../icon';
-let { icon, iconPosition = 'leading', secondaryIcon, trimText = false, hideText = false, size, children } = $props();
+<script lang="ts">import { CONTROL_ICON_SIZE, IconSlot } from '../icon';
+let { icon, iconPosition = 'leading', secondaryIcon, trimText = false, hideText = false, size, iconScale = 'default', children } = $props();
+const iconFallbacks = $derived(size ? { size: CONTROL_ICON_SIZE[size], scale: iconScale } : { scale: iconScale });
 </script>
 
 <span
@@ -9,7 +10,7 @@ let { icon, iconPosition = 'leading', secondaryIcon, trimText = false, hideText
   class:icon-text--md={size === 'md'}
   class:icon-text--lg={size === 'lg'}>
   <span class="icon-text__icon">
-    <IconSlot icon={icon} />
+    <IconSlot icon={icon} fallbacks={iconFallbacks} />
   </span>
   {#if children && !hideText}
     <span class="icon-text__text" class:icon-text__text--trim={trimText}>
@@ -18,7 +19,7 @@ let { icon, iconPosition = 'leading', secondaryIcon, trimText = false, hideText
   {/if}
   {#if secondaryIcon}
     <span class="icon-text__secondary">
-      <IconSlot icon={secondaryIcon} />
+      <IconSlot icon={secondaryIcon} fallbacks={iconFallbacks} />
     </span>
   {/if}
 </span>
@@ -70,15 +71,12 @@ status" dropdown-trigger patterns. Each icon prop accepts a string SVG source, a
 }
 .icon-text--sm {
   --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--icon-text--icon--font-size: 0.875rem;
 }
 .icon-text--md {
   --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--icon-text--icon--font-size: 1rem;
 }
 .icon-text--lg {
   --sc-kit--icon-text--text--font-size: var(--sc-kit--font-size--lg);
-  --sc-kit--icon-text--icon--font-size: 1.25rem;
 }
 .icon-text__text {
   font-size: var(--_icon-text--text--font-size);

package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts

@@ -11,8 +11,10 @@ type Props = {
     trimText?: boolean;
     /** Hide text, showing only the icon(s) */
     hideText?: boolean;
-    /** Size preset matching `Button` of the same size — text/icon px: sm 12/14, md 14/16, lg 16/20. Unset: text + icon follow the inherited font size (`1em`). */
+    /** Size preset matching `Button` of the same size — text/icon px: sm 12/14, md 14/16, lg 16/18. Unset: text + icon follow the inherited font size (`1em`). */
     size?: 'sm' | 'md' | 'lg';
+    /** Bump the icon(s) one step up the scale relative to `size`, text unchanged (sm 14→16, md 16→18, lg 18→20). @default 'default' */
+    iconScale?: 'default' | 'large';
     children?: Snippet;
 };
 /**

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

@@ -10,7 +10,7 @@ const { title, triggerLabel, icon, size = 'sm', position = 'bottom-end', childre
   <Popover position={position} keepOpen>
     {#snippet trigger()}
       <Button type="button" variant="secondary" size={size}>
-        <IconText icon={icon} secondaryIcon={IconChevronDown}>{triggerLabel}</IconText>
+        <IconText icon={icon} secondaryIcon={IconChevronDown} size={size} iconScale="large">{triggerLabel}</IconText>
       </Button>
     {/snippet}
     <ToolbarPanel title={title} footer={footer}>

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

@@ -1,9 +1,11 @@
 <script lang="ts">import { Utils } from '../../core/utils';
+import { CONTROL_ICON_SIZE, scaleUp } from '../icon';
 import { Input } from '../input';
 import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
-const { value, collapsedIconColor, placeholder = '', size = 'sm', debounce = 0, on } = $props();
+const { value, collapsedIconColor, collapsedIconSize, placeholder = '', size = 'sm', debounce = 0, on } = $props();
 let focused = $state(false);
 const expanded = $derived(focused || !!value);
+const collapsedSize = $derived(collapsedIconSize ?? scaleUp(CONTROL_ICON_SIZE[size]));
 const onInput = (v) => {
     on?.input?.(v);
 };
@@ -15,7 +17,7 @@ const onInputDebounced = $derived(debounce > 0 ? Utils.debounce(onInput, debounc
     value={value}
     size={size}
     placeholder={placeholder}
-    icon={{ src: IconSearch, color: expanded ? undefined : (collapsedIconColor ?? 'accent') }}
+    icon={{ src: IconSearch, color: expanded ? undefined : (collapsedIconColor ?? 'accent'), size: expanded ? undefined : collapsedSize }}
     clearable
     borderless={!expanded}
     on={{ input: onInputDebounced, change: onInputDebounced, focus: () => (focused = true), blur: () => (focused = false) }} />

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

@@ -1,7 +1,9 @@
-import type { IconColor } from '../icon';
+import { type IconColor, type IconSize } from '../icon';
 type Props = {
     value: string;
     collapsedIconColor?: IconColor;
+    /** Icon size while collapsed (icon-only). Defaults to one step larger than the inline icon for legibility. */
+    collapsedIconSize?: IconSize;
     placeholder?: string;
     /** Size preset (shared with Input / DatePicker / Select). @default 'sm' */
     size?: 'sm' | 'md' | 'lg';

package/dist/ui/page-toolbar/cmp.toolbar-value-stepper.svelte

@@ -1,9 +1,10 @@
-<script lang="ts">import { Icon } from '../icon';
+<script lang="ts">import { CONTROL_ICON_SIZE, Icon, scaleUp } from '../icon';
 import { ToolbarValueStepperLocalization } from './toolbar-value-stepper-localization';
 import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_16_regular.svg?raw';
 import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_16_regular.svg?raw';
 const { value, min = 0, max = 100, step = 1, valueSuffix = '', size = 'sm', on } = $props();
 const localization = new ToolbarValueStepperLocalization();
+const iconSize = $derived(scaleUp(CONTROL_ICON_SIZE[size]));
 const atMin = $derived(value <= min);
 const atMax = $derived(value >= max);
 const decrease = () => {
@@ -16,11 +17,11 @@ const increase = () => {
 
 <div class="toolbar-value-stepper toolbar-value-stepper--{size}" role="group" aria-label={localization.value}>
   <button type="button" class="toolbar-value-stepper__btn" onclick={decrease} disabled={atMin} aria-label={localization.decreaseValue}>
-    <Icon src={IconChevronLeft} />
+    <Icon src={IconChevronLeft} size={iconSize} />
   </button>
   <span class="toolbar-value-stepper__value">{value}{valueSuffix}</span>
   <button type="button" class="toolbar-value-stepper__btn" onclick={increase} disabled={atMax} aria-label={localization.increaseValue}>
-    <Icon src={IconChevronRight} />
+    <Icon src={IconChevronRight} size={iconSize} />
   </button>
 </div>
 

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte

@@ -78,7 +78,7 @@ const handleChange = (updatedItems) => {
 <Popover position="bottom-start" keepOpen>
   {#snippet trigger()}
     <Button type="button" variant="secondary" size="sm">
-      <IconText icon={{ src: IconColumnTwo, color: 'accent' }} secondaryIcon={IconChevronDown}>{localization.columns}</IconText>
+      <IconText icon={{ src: IconColumnTwo, color: 'accent' }} secondaryIcon={IconChevronDown} size="sm" iconScale="large">{localization.columns}</IconText>
     </Button>
   {/snippet}
   <div class="columns-manager">

package/dist/ui/tabs/tab.svelte

@@ -39,7 +39,7 @@ const handleCloseKeydown = (event) => {
   <span class="tab__label">{tab.label}</span>
   {#if closable}
     <span class="tab__close" role="button" tabindex="0" aria-label={localization.close} onclick={handleClose} onkeydown={handleCloseKeydown}>
-      <IconSlot icon={IconDismiss} size="sm" />
+      <IconSlot icon={IconDismiss} fallbacks={{ size: 'sm' }} />
     </span>
   {/if}
 </button>

package/dist/ui/usage/cmp.usage-row.svelte

@@ -8,7 +8,7 @@ const ratio = $derived(max === 0 ? 0 : value / max);
   <div class="usage-row__label">
     <span class="usage-row__title">
       {#if icon}
-        <span class="usage-row__icon"><IconSlot icon={icon} size="sm" /></span>
+        <span class="usage-row__icon"><IconSlot icon={icon} fallbacks={{ size: 'sm' }} /></span>
       {/if}
       {title}
     </span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.10.7-1781513925548",
+  "version": "0.10.7-1781528892980",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",