@streamscloud/kit 0.2.34 → 0.2.36

package/dist/ui/grouped-sidebar/cmp.grouped-sidebar-section.svelte

@@ -100,29 +100,4 @@ A collapsible section within a GroupedSidebar. Renders a trigger button with che
 }
 .grouped-sidebar-section__content--fill {
   flex: 1;
-  overflow-y: auto;
-  --_cross-browser-scrollbar--thumb-color: transparent;
-  --_cross-browser-scrollbar--track-color: transparent;
-}
-.grouped-sidebar-section__content--fill:hover {
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
-  --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
-}
-.grouped-sidebar-section__content--fill::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.grouped-sidebar-section__content--fill::-webkit-scrollbar-track {
-  background: var(--_cross-browser-scrollbar--track-color);
-  border-radius: 100vw;
-}
-.grouped-sidebar-section__content--fill::-webkit-scrollbar-thumb {
-  background: var(--_cross-browser-scrollbar--thumb-color);
-  border-radius: 100vw;
-}
-@supports (scrollbar-color: transparent transparent) {
-  .grouped-sidebar-section__content--fill {
-    scrollbar-color: var(--_cross-browser-scrollbar--thumb-color) var(--_cross-browser-scrollbar--track-color);
-    scrollbar-width: thin;
-  }
 }</style>

package/dist/ui/grouped-sidebar/cmp.grouped-sidebar.svelte

@@ -34,7 +34,7 @@ const selectedGroup = $derived(settings.groups.find((d) => d.id === settings.sel
 </script>
 
 <div class="grouped-sidebar">
-  {#if (settings.groups.length > 1 || settings.alwaysShowAllGroups) && selectedGroup}
+  {#if (settings.groups.length > 1 || !settings.hideGroupsWhenSingle) && selectedGroup}
     <div class="grouped-sidebar__header">
       <SegmentedControl
         segments={settings.groups.map((g) => ({ id: g.id, label: g.name, invalid: !g.isValid }))}
@@ -48,7 +48,7 @@ const selectedGroup = $derived(settings.groups.find((d) => d.id === settings.sel
         <Section
           section={section}
           expandToFill={settings.expandToFill}
-          showSectionCollapser={selectedGroup.sections.length > 1 || settings.alwaysShowAllSections}
+          showSectionCollapser={selectedGroup.sections.length > 1 || !settings.hideSectionsWhenSingle}
           on={{ toggleSection: handleToggleSection }} />
       {/each}
     {/if}

package/dist/ui/grouped-sidebar/types.svelte.d.ts

@@ -5,16 +5,21 @@ export declare class GroupedSidebarSettings {
     selectedGroupId: string;
     allowMultipleExpandedSections: boolean;
     allowCloseAllSections: boolean;
-    alwaysShowAllSections: boolean;
-    alwaysShowAllGroups: boolean;
+    hideGroupsWhenSingle: boolean;
+    hideSectionsWhenSingle: boolean;
     expandToFill: boolean;
     constructor(init: {
         groups: SidebarGroupInit[];
         initiallySelectedGroupId?: string;
+        /** Allow more than one section open at the same time @default false */
         allowMultipleExpandedSections?: boolean;
+        /** Allow collapsing every section (otherwise at least one stays open) @default false */
         allowCloseAllSections?: boolean;
-        alwaysShowAllGroups?: boolean;
-        alwaysShowAllSections?: boolean;
+        /** Hide the group tabs when there is only one group @default false */
+        hideGroupsWhenSingle?: boolean;
+        /** Hide section headers when a group has only one section @default false */
+        hideSectionsWhenSingle?: boolean;
+        /** Expanded sections stretch to fill available height @default true */
         expandToFill?: boolean;
     });
 }
@@ -48,15 +53,18 @@ export interface SidebarGroupInit {
     name: string;
     sections: SidebarSectionInit[];
     onSelected?: () => void;
+    /** Aggregated with section validators to determine group validity */
     validator?: SidebarValidator;
 }
 export interface SidebarSectionInit {
     id?: string;
     name: string;
     expanded?: boolean;
+    /** Remove default content padding @default false */
     withoutPaddings?: boolean;
     component: DynamicComponentModel | Snippet;
     onExpandedChanged?: (val: boolean) => void;
+    /** Shows error styling on section title when invalid */
     validator?: SidebarValidator;
 }
 export type SidebarValidator = {

package/dist/ui/grouped-sidebar/types.svelte.js

@@ -5,16 +5,16 @@ export class GroupedSidebarSettings {
     selectedGroupId = $state('');
     allowMultipleExpandedSections = $state(false);
     allowCloseAllSections = $state(false);
-    alwaysShowAllSections = $state(false);
-    alwaysShowAllGroups = $state(false);
+    hideGroupsWhenSingle = $state(false);
+    hideSectionsWhenSingle = $state(false);
     expandToFill = $state(true);
     constructor(init) {
         this.groups = init.groups.map((g) => new SidebarGroupModel(g));
         this.selectedGroupId = init.initiallySelectedGroupId ?? '';
         this.allowMultipleExpandedSections = init.allowMultipleExpandedSections ?? false;
         this.allowCloseAllSections = init.allowCloseAllSections ?? false;
-        this.alwaysShowAllGroups = init.alwaysShowAllGroups ?? false;
-        this.alwaysShowAllSections = init.alwaysShowAllSections ?? false;
+        this.hideGroupsWhenSingle = init.hideGroupsWhenSingle ?? false;
+        this.hideSectionsWhenSingle = init.hideSectionsWhenSingle ?? false;
         this.expandToFill = init.expandToFill ?? true;
     }
 }

package/package.json

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