@streamscloud/kit 0.25.0 → 0.25.2

package/dist/styles/_semantic.scss

@@ -65,16 +65,22 @@
   // COLOR — TONES (categorical palette; fg + soft bg, component-neutral)
   // ============================================================
   --sc-kit--tone--gray--fg: light-dark(#{$color-neutral-500}, #{$color-neutral-400});
+  --sc-kit--tone--gray--muted: light-dark(#{$color-neutral-400}, #{$color-neutral-600});
   --sc-kit--tone--gray--bg: light-dark(#{$color-neutral-50}, #{$color-dark-600});
   --sc-kit--tone--blue--fg: light-dark(#{$color-blue-500}, #{$color-blue-400});
+  --sc-kit--tone--blue--muted: light-dark(#{$color-blue-200}, #{$color-blue-700});
   --sc-kit--tone--blue--bg: light-dark(#{$color-blue-50}, #{$color-blue-900});
   --sc-kit--tone--green--fg: light-dark(#{$color-green-500}, #{$color-green-400});
+  --sc-kit--tone--green--muted: light-dark(#{$color-green-200}, #{$color-green-700});
   --sc-kit--tone--green--bg: light-dark(#{$color-green-50}, #{$color-green-900});
   --sc-kit--tone--red--fg: light-dark(#{$color-red-500}, #{$color-red-400});
+  --sc-kit--tone--red--muted: light-dark(#{$color-red-200}, #{$color-red-700});
   --sc-kit--tone--red--bg: light-dark(#{$color-red-50}, #{$color-red-900});
   --sc-kit--tone--orange--fg: light-dark(#{$color-orange-500}, #{$color-orange-400});
+  --sc-kit--tone--orange--muted: light-dark(#{$color-orange-200}, #{$color-orange-700});
   --sc-kit--tone--orange--bg: light-dark(#{$color-orange-100}, #{$color-orange-900});
   --sc-kit--tone--teal--fg: light-dark(#3d7068, #5f938a);
+  --sc-kit--tone--teal--muted: light-dark(#3d7068, #5f938a);
   --sc-kit--tone--teal--bg: light-dark(#eef4f3, #16302b);
 
   // ============================================================

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

@@ -13,18 +13,22 @@ const isSelected = (candidate) => value.some((selected) => eq(selected, candidat
 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 selectedOptions = $derived(options
+    .flatMap((item) => isSelectGroup(item) ? (item.value !== undefined ? [{ label: item.label, value: item.value }, ...item.options] : item.options) : [item])
+    .filter((option) => isSelected(option.value)));
 const summary = $derived.by(() => {
-    if (selectedLeaves.length === 0) {
+    if (selectedOptions.length === 0) {
         return label;
     }
-    if (selectedLeaves.length === 1) {
-        return `${label}: ${selectedLeaves[0].label}`;
+    if (selectedOptions.length === 1) {
+        return `${label}: ${selectedOptions[0].label}`;
     }
-    return `${label}: ${localization.selectedCount(selectedLeaves.length)}`;
+    return `${label}: ${localization.selectedCount(selectedOptions.length)}`;
 });
 const groupSelected = (group) => {
+    if (group.value !== undefined) {
+        return isSelected(group.value);
+    }
     const selectedCount = group.options.filter((option) => isSelected(option.value)).length;
     if (selectedCount === 0) {
         return false;
@@ -41,7 +45,17 @@ const toggleOption = (option) => {
     emit(isSelected(option.value) ? without(value, option.value) : withValue(value, option.value));
 };
 const toggleGroup = (group) => {
+    if (group.value !== undefined) {
+        if (single) {
+            pickSingle(group.value);
+            return;
+        }
+        emit(isSelected(group.value) ? without(value, group.value) : withValue(value, group.value));
+        return;
+    }
     if (single) {
+        const hasSelectedChild = group.options.some((option) => isSelected(option.value));
+        emit(hasSelectedChild ? [] : group.options.slice(0, 1).map((option) => option.value));
         return;
     }
     const allSelected = group.options.every((option) => isSelected(option.value));
@@ -49,22 +63,14 @@ const toggleGroup = (group) => {
     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) => {
+const toggleChild = (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);
+    emit(isSelected(child.value) ? without(value, child.value) : withValue(value, child.value));
 };
 const clearAll = () => emit([]);
 </script>
@@ -75,7 +81,7 @@ const clearAll = () => emit([]);
       {#if header}
         {@render header()}
       {/if}
-      {#each options as item (isSelectGroup(item) ? item.label : item.value)}
+      {#each options as item (isSelectGroup(item) ? (item.value ?? item.options[0]?.value ?? item.label) : item.value)}
         {#if isSelectGroup(item)}
           <ToolbarOption
             size={optionSize}
@@ -87,7 +93,7 @@ const clearAll = () => emit([]);
               size={optionSize}
               indent
               selectable={{ selected: isSelected(child.value), display: optionDisplay }}
-              on={{ click: () => toggleChild(item, child) }}>{child.label}</ToolbarOption>
+              on={{ click: () => toggleChild(child) }}>{child.label}</ToolbarOption>
           {/each}
         {:else}
           <ToolbarOption size={optionSize} selectable={{ selected: isSelected(item.value), display: optionDisplay }} on={{ click: () => toggleOption(item) }}
@@ -119,8 +125,11 @@ const clearAll = () => emit([]);
 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.
+flat `SelectOption[]` or one level of groups (`SelectOptionGroup`). Group behaviour depends on whether
+the group has its own `value`: a label-group (no `value`) is a tri-state select-all header over its
+children; a group WITH a `value` is an independent option — header and children toggle only themselves,
+with no cascade or shared highlight. In `single` mode a value-group header selects its own value (re-click
+deselects), same as any option.
 `header` injects content above the list (preset rows, a `ToolbarSectionTitle`, …).
 
 ### CSS Custom Properties

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

@@ -54,8 +54,11 @@ interface $$IsomorphicComponent {
  * 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.
+ * flat `SelectOption[]` or one level of groups (`SelectOptionGroup`). Group behaviour depends on whether
+ * the group has its own `value`: a label-group (no `value`) is a tri-state select-all header over its
+ * children; a group WITH a `value` is an independent option — header and children toggle only themselves,
+ * with no cascade or shared highlight. In `single` mode a value-group header selects its own value (re-click
+ * deselects), same as any option.
  * `header` injects content above the list (preset rows, a `ToolbarSectionTitle`, …).
  *
  * ### CSS Custom Properties

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

@@ -1,8 +1,10 @@
 <script lang="ts" generics="S">import { Button } from '../button';
+import { IconText } from '../icon-text';
 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 IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconFilter from '@fluentui/svg-icons/icons/filter_20_regular.svg?raw';
 const { options, value, label, size = 'sm', trigger = 'icon', compare, on } = $props();
 const localization = new ToolbarSortSelectLocalization();
@@ -21,7 +23,9 @@ const onChange = (next) => {
 {/snippet}
 
 {#snippet buttonTrigger()}
-  <Button type="presentational" variant="secondary" size={size} icon={IconFilter}>{localization.sorting}</Button>
+  <Button type="presentational" variant="secondary" size={size}>
+    <IconText icon={IconFilter} secondaryIcon={IconChevronDown} size={size} iconScale="large" trimText>{localization.sorting}</IconText>
+  </Button>
 {/snippet}
 
 <ToolbarFilterSelect

package/dist/ui/progress-bar/cmp.progress-bar.svelte

@@ -8,7 +8,7 @@ const currentLabel = $derived(currentStage?.label ?? '');
 const tooltipLabel = $derived(!showLabel ? currentLabel : '');
 const segmentColor = (s) => {
     const value = s.color ?? 'gray';
-    return PROGRESS_BAR_TONES.includes(value) ? `var(--sc-kit--tone--${value}--fg)` : value;
+    return PROGRESS_BAR_TONES.includes(value) ? `var(--sc-kit--tone--${value}--muted)` : value;
 };
 </script>
 
@@ -45,7 +45,8 @@ const segmentColor = (s) => {
 Multi-stage workflow progress indicator. Pass `stages` as an array of `{ color, label? }`
 descriptors — the bar renders one segment per stage; segments `0..stage` (inclusive) are filled,
 the rest use the empty-segment color. Each stage's `color` is either a named tone from the shared
-palette (same schemes as `Badge`, e.g. `'green'`) or a raw CSS color / `var(--sc-kit--*)`. Useful
+palette (resolved to its muted shade, e.g. `'green'` → `--sc-kit--tone--green--muted`) or a raw CSS
+color / `var(--sc-kit--*)`. Useful
 for content-lifecycle indicators (Ideas → Draft → Review → Scheduled → Published) in cards, table
 cells, or post pages. `variant="pips"` renders compact fixed-size ticks (left-aligned) instead of
 full-width segments — for dense table cells. `showLabel={false}` drops the inline current-stage

package/dist/ui/progress-bar/cmp.progress-bar.svelte.d.ts

@@ -16,7 +16,8 @@ type Props = {
  * Multi-stage workflow progress indicator. Pass `stages` as an array of `{ color, label? }`
  * descriptors — the bar renders one segment per stage; segments `0..stage` (inclusive) are filled,
  * the rest use the empty-segment color. Each stage's `color` is either a named tone from the shared
- * palette (same schemes as `Badge`, e.g. `'green'`) or a raw CSS color / `var(--sc-kit--*)`. Useful
+ * palette (resolved to its muted shade, e.g. `'green'` → `--sc-kit--tone--green--muted`) or a raw CSS
+ * color / `var(--sc-kit--*)`. Useful
  * for content-lifecycle indicators (Ideas → Draft → Review → Scheduled → Published) in cards, table
  * cells, or post pages. `variant="pips"` renders compact fixed-size ticks (left-aligned) instead of
  * full-width segments — for dense table cells. `showLabel={false}` drops the inline current-stage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.25.0",
+  "version": "0.25.2",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",