@streamscloud/kit 0.25.1 → 0.25.2

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/package.json

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