@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/grid-card/fields/cmp.grid-card-button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">import { Button } from '../../button';
+import { IconText } from '../../icon-text';
+const { icon, text, on } = $props();
+const handleClick = (e) => {
+    e.stopPropagation();
+    on.click(e);
+};
+</script>
+
+<span class="grid-card-button">
+  <Button type="button" variant="ghost" size="sm" on={{ click: handleClick }}>
+    <IconText icon={icon} hideText={!text} trimText>
+      {#if text}{text}{/if}
+    </IconText>
+  </Button>
+</span>
+
+<!--
+@component
+Internal compact action button for `GridCard` rows. Kit `Button` `size='sm'` + `variant='ghost'`
+wrapping an `IconText` so individual action icons can be tinted (e.g. `{ src, color: 'danger' }`
+on delete) without coloring the whole button. Click handler stops propagation so it doesn't fire
+the card's `on.activate`.
+-->
+
+<style>.grid-card-button {
+  min-width: 0;
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-button.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { IconProp } from '../../icon';
+type Props = {
+    icon: IconProp;
+    text?: string;
+    on: {
+        click: (e: MouseEvent) => void;
+    };
+};
+/**
+ * Internal compact action button for `GridCard` rows. Kit `Button` `size='sm'` + `variant='ghost'`
+ * wrapping an `IconText` so individual action icons can be tinted (e.g. `{ src, color: 'danger' }`
+ * on delete) without coloring the whole button. Click handler stops propagation so it doesn't fire
+ * the card's `on.activate`.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-field.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">const { label, multiline = false, vertical = false, children } = $props();
+export {};
+</script>
+
+<div class="grid-card-field" class:grid-card-field--multiline={multiline} class:grid-card-field--vertical={vertical}>
+  <span class="grid-card-field__label">{label}</span>
+  <div class="grid-card-field__content">
+    {@render children()}
+  </div>
+</div>
+
+<!--
+@component
+Single label-value row inside a `<GridCardFields>` subgrid. Use directly for custom content,
+or compose via `<GridCardTextField>` / `<GridCardBadgeField>` / `<GridCardProgressField>` /
+`<GridCardActionsField>` for common patterns. Set `multiline` for top-aligned multi-line
+content; set `vertical` to stack the label above the content (escapes the subgrid).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--grid-card-field--background` | Row background | `var(--sc-kit--color--bg--panel)` |
+| `--sc-kit--grid-card-field--padding-block` | Vertical padding | `6px` |
+| `--sc-kit--grid-card-field--padding-inline` | Horizontal padding | `8px` |
+-->
+
+<style>.grid-card-field {
+  --_gcf--background: var(--sc-kit--grid-card-field--background, var(--sc-kit--color--bg--panel));
+  --_gcf--padding-block: var(--sc-kit--grid-card-field--padding-block, 0.375rem);
+  --_gcf--padding-inline: var(--sc-kit--grid-card-field--padding-inline, 0.5rem);
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
+  background: var(--_gcf--background);
+  border-radius: 0.125rem;
+  align-items: center;
+}
+.grid-card-field--multiline {
+  align-items: start;
+}
+.grid-card-field--vertical {
+  grid-template-columns: 1fr;
+  grid-row-gap: 0.25rem;
+  padding: var(--_gcf--padding-block) var(--_gcf--padding-inline);
+}
+.grid-card-field--vertical .grid-card-field__label, .grid-card-field--vertical .grid-card-field__content {
+  padding: 0;
+}
+.grid-card-field__label {
+  font-size: 0.625rem;
+  color: var(--sc-kit--color--text--secondary);
+  padding-block: var(--_gcf--padding-block);
+  padding-inline-start: var(--_gcf--padding-inline);
+  white-space: nowrap;
+  line-height: var(--sc-kit--leading--tight);
+}
+.grid-card-field__content {
+  padding-block: var(--_gcf--padding-block);
+  padding-inline-end: var(--_gcf--padding-inline);
+  min-width: 0;
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-field.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    label: string;
+    multiline?: boolean;
+    vertical?: boolean;
+    children: Snippet;
+};
+/**
+ * Single label-value row inside a `<GridCardFields>` subgrid. Use directly for custom content,
+ * or compose via `<GridCardTextField>` / `<GridCardBadgeField>` / `<GridCardProgressField>` /
+ * `<GridCardActionsField>` for common patterns. Set `multiline` for top-aligned multi-line
+ * content; set `vertical` to stack the label above the content (escapes the subgrid).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--grid-card-field--background` | Row background | `var(--sc-kit--color--bg--panel)` |
+ * | `--sc-kit--grid-card-field--padding-block` | Vertical padding | `6px` |
+ * | `--sc-kit--grid-card-field--padding-inline` | Horizontal padding | `8px` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-fields.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">const { children } = $props();
+export {};
+</script>
+
+<div class="grid-card-fields">
+  {@render children()}
+</div>
+
+<!--
+@component
+Layout container for `<GridCardField>` rows inside a `<GridCard>`. Establishes a 2-column
+subgrid (label / content) so labels align across all rows.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--grid-card-fields--column-gap` | Gap between label and content columns | `14px` |
+| `--sc-kit--grid-card-fields--row-gap` | Gap between rows | `4px` |
+-->
+
+<style>.grid-card-fields {
+  --_gcf--column-gap: var(--sc-kit--grid-card-fields--column-gap, 0.875rem);
+  --_gcf--row-gap: var(--sc-kit--grid-card-fields--row-gap, 0.25rem);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--_gcf--column-gap);
+  row-gap: var(--_gcf--row-gap);
+  width: 100%;
+}
+.grid-card-fields > :global(*) {
+  grid-column: 1/-1;
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-fields.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+/**
+ * Layout container for `<GridCardField>` rows inside a `<GridCard>`. Establishes a 2-column
+ * subgrid (label / content) so labels align across all rows.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--grid-card-fields--column-gap` | Gap between label and content columns | `14px` |
+ * | `--sc-kit--grid-card-fields--row-gap` | Gap between rows | `4px` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-id-field.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">const { label = 'Id:', text } = $props();
+</script>
+
+<div class="grid-card-id-field">
+  <span class="grid-card-id-field__label">{label}</span>
+  <span class="grid-card-id-field__value" title={text}>{text}</span>
+</div>
+
+<!--
+@component
+Compact single-line ID row. Renders as a flat label + monospace-style value with ellipsis
+overflow — useful for displaying an item ID that's typically long and not visually critical.
+Skips the `<GridCardField>` subgrid wrapping for a tighter look.
+-->
+
+<style>.grid-card-id-field {
+  display: flex;
+  align-items: center;
+  gap: 0.8125rem;
+  grid-column: 1/-1;
+  background: var(--sc-kit--grid-card-field--background, var(--sc-kit--color--bg--panel));
+  border-radius: 0.125rem;
+  padding-block: 0.375rem;
+  padding-inline: 0.5rem;
+  font-size: 0.625rem;
+}
+.grid-card-id-field__label, .grid-card-id-field__value {
+  color: var(--sc-kit--color--text--secondary);
+  line-height: var(--sc-kit--leading--normal);
+}
+.grid-card-id-field__label {
+  white-space: nowrap;
+}
+.grid-card-id-field__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-id-field.svelte.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    /** @default 'Id:' */
+    label?: string;
+    text: string;
+};
+/**
+ * Compact single-line ID row. Renders as a flat label + monospace-style value with ellipsis
+ * overflow — useful for displaying an item ID that's typically long and not visually critical.
+ * Skips the `<GridCardField>` subgrid wrapping for a tighter look.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-progress-field.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">import GridCardField from './cmp.grid-card-field.svelte';
+const { label, stage, stages } = $props();
+const currentStage = $derived(stages[Math.max(0, Math.min(stage, stages.length - 1))]);
+const currentLabel = $derived(currentStage?.label ?? '');
+</script>
+
+<GridCardField label={label}>
+  <div class="grid-card-progress-field">
+    <div
+      class="grid-card-progress-field__bar"
+      role="progressbar"
+      aria-valuemin={1}
+      aria-valuemax={stages.length}
+      aria-valuenow={stage + 1}
+      aria-label={currentLabel}>
+      {#each stages as s, i (i)}
+        <span class="grid-card-progress-field__segment" class:grid-card-progress-field__segment--filled={i <= stage} style:--_seg-color={s.color}></span>
+      {/each}
+    </div>
+    {#if currentLabel}
+      <span class="grid-card-progress-field__label">{currentLabel}</span>
+    {/if}
+  </div>
+</GridCardField>
+
+<!--
+@component
+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 with the per-stage color, the rest are muted. Consumer supplies the per-stage color
+(string — any valid CSS color or `var(--sc-kit--color--*)` reference). Useful for content
+lifecycle indicators (Ideas → Draft → Review → Scheduled → Published).
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--grid-card-progress-field--segment--height` | Bar segment height | `4px` |
+| `--sc-kit--grid-card-progress-field--segment--gap` | Gap between segments | `2px` |
+| `--sc-kit--grid-card-progress-field--segment--background--empty` | Empty segment color | `var(--sc-kit--color--bg--active)` |
+-->
+
+<style>.grid-card-progress-field {
+  --_gcp--seg-height: var(--sc-kit--grid-card-progress-field--segment--height, 0.25rem);
+  --_gcp--seg-gap: var(--sc-kit--grid-card-progress-field--segment--gap, 0.125rem);
+  --_gcp--seg-empty: var(--sc-kit--grid-card-progress-field--segment--background--empty, var(--sc-kit--color--bg--active));
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+.grid-card-progress-field__bar {
+  display: flex;
+  gap: var(--_gcp--seg-gap);
+  width: 100%;
+}
+.grid-card-progress-field__segment {
+  flex: 1;
+  height: var(--_gcp--seg-height);
+  background: var(--_gcp--seg-empty);
+  border-radius: 0.0625rem;
+}
+.grid-card-progress-field__segment--filled {
+  background: var(--_seg-color);
+}
+.grid-card-progress-field__label {
+  font-size: 0.625rem;
+  color: var(--sc-kit--color--text--secondary);
+  line-height: var(--sc-kit--leading--tight);
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-progress-field.svelte.d.ts

@@ -0,0 +1,30 @@
+type Props = {
+    label: string;
+    /** Current stage index, 0-based. Stages 0..stage (inclusive) are filled. */
+    stage: number;
+    /**
+     * Stage descriptors — at minimum `{ color }` per stage (consumer provides the CSS color).
+     * Length determines the total segment count. Pass arbitrary number of stages.
+     */
+    stages: {
+        color: string;
+        label?: string;
+    }[];
+};
+/**
+ * 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 with the per-stage color, the rest are muted. Consumer supplies the per-stage color
+ * (string — any valid CSS color or `var(--sc-kit--color--*)` reference). Useful for content
+ * lifecycle indicators (Ideas → Draft → Review → Scheduled → Published).
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--grid-card-progress-field--segment--height` | Bar segment height | `4px` |
+ * | `--sc-kit--grid-card-progress-field--segment--gap` | Gap between segments | `2px` |
+ * | `--sc-kit--grid-card-progress-field--segment--background--empty` | Empty segment color | `var(--sc-kit--color--bg--active)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/cmp.grid-card-text-field.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">import GridCardField from './cmp.grid-card-field.svelte';
+const { label, text, maxLines = 1 } = $props();
+const textAsSnippet = $derived(text && typeof text === 'function' ? text : null);
+const textAsString = $derived(text && typeof text !== 'function' ? text : null);
+</script>
+
+<GridCardField label={label} multiline={maxLines !== 1}>
+  <span class="grid-card-text-field__text" style:--_max-lines={maxLines} title={textAsString}>
+    {#if textAsSnippet}
+      {@render textAsSnippet()}
+    {:else if textAsString}
+      {textAsString}
+    {:else}
+      -
+    {/if}
+  </span>
+</GridCardField>
+
+<!--
+@component
+Text content row with line-clamp. Pass `text` as either a string (gets a `title=` tooltip for
+overflow) or a snippet for custom markup. `-` placeholder when text is null / undefined.
+-->
+
+<style>.grid-card-text-field__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--_max-lines, 1);
+  line-clamp: var(--_max-lines, 1);
+  overflow: hidden;
+  word-break: break-word;
+  color: var(--sc-kit--color--text--primary);
+  line-height: var(--sc-kit--leading--tight);
+  height: calc(var(--_max-lines, 1) * var(--sc-kit--leading--tight) * 1em);
+  font-size: 0.625rem;
+}</style>

package/dist/ui/grid-card/fields/cmp.grid-card-text-field.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    label: string;
+    text?: string | Snippet | null;
+    /** Maximum lines before truncating with line-clamp. @default 1 */
+    maxLines?: number;
+};
+/**
+ * Text content row with line-clamp. Pass `text` as either a string (gets a `title=` tooltip for
+ * overflow) or a snippet for custom markup. `-` placeholder when text is null / undefined.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/index.d.ts

@@ -0,0 +1,8 @@
+export { default as GridCardActionsField, type GridCardAction } from './cmp.grid-card-actions-field.svelte';
+export { default as GridCardBadgeField } from './cmp.grid-card-badge-field.svelte';
+export { default as GridCardButton } from './cmp.grid-card-button.svelte';
+export { default as GridCardField } from './cmp.grid-card-field.svelte';
+export { default as GridCardFields } from './cmp.grid-card-fields.svelte';
+export { default as GridCardIdField } from './cmp.grid-card-id-field.svelte';
+export { default as GridCardProgressField } from './cmp.grid-card-progress-field.svelte';
+export { default as GridCardTextField } from './cmp.grid-card-text-field.svelte';

package/dist/ui/grid-card/fields/index.js

@@ -0,0 +1,8 @@
+export { default as GridCardActionsField } from './cmp.grid-card-actions-field.svelte';
+export { default as GridCardBadgeField } from './cmp.grid-card-badge-field.svelte';
+export { default as GridCardButton } from './cmp.grid-card-button.svelte';
+export { default as GridCardField } from './cmp.grid-card-field.svelte';
+export { default as GridCardFields } from './cmp.grid-card-fields.svelte';
+export { default as GridCardIdField } from './cmp.grid-card-id-field.svelte';
+export { default as GridCardProgressField } from './cmp.grid-card-progress-field.svelte';
+export { default as GridCardTextField } from './cmp.grid-card-text-field.svelte';

package/dist/ui/grid-card/icon-checkbox-checked.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4" y="4" width="12" height="12" rx="2" ry="2" style="fill:#fff" />
+  <path d="M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm3-2a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6Z" />
+  <path d="M13.85 7.85l-5 5a.5.5 0 0 1-.7 0l-2-2a.5.5 0 0 1 .7-.7l1.65 1.64 4.65-4.64a.5.5 0 0 1 .7.7Z" />
+</svg>

package/dist/ui/grid-card/icon-checkbox-unchecked.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4" y="4" width="12" height="12" rx="2" ry="2" style="fill:#fff" />
+  <path d="M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm3-2a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6Z" />
+</svg>

package/dist/ui/grid-card/index.d.ts

@@ -0,0 +1,4 @@
+export type { AspectRatio, ObjectFit } from './types';
+export { default as GridCard } from './cmp.grid-card.svelte';
+export { default as GridCardMedia, type MediaItem as GridCardMediaItem } from './cmp.grid-card-media.svelte';
+export { GridCardActionsField, GridCardBadgeField, GridCardField, GridCardFields, GridCardIdField, GridCardProgressField, GridCardTextField, type GridCardAction } from './fields';

package/dist/ui/grid-card/index.js

@@ -0,0 +1,3 @@
+export { default as GridCard } from './cmp.grid-card.svelte';
+export { default as GridCardMedia } from './cmp.grid-card-media.svelte';
+export { GridCardActionsField, GridCardBadgeField, GridCardField, GridCardFields, GridCardIdField, GridCardProgressField, GridCardTextField } from './fields';

package/dist/ui/grid-card/types.d.ts

@@ -0,0 +1,4 @@
+/** Aspect ratio preset for `GridCardMedia`. */
+export type AspectRatio = 'vertical' | 'square' | 'horizontal';
+/** Object-fit mode for media inside the card's media slot. */
+export type ObjectFit = 'contain' | 'cover';

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

@@ -36,34 +36,26 @@ let { section, showSectionCollapser = true, expandToFill = true, on } = $props()
 
 <!--
 @component
-A collapsible section within a GroupedSidebar. Renders a trigger button with chevron and expandable content area.
+A collapsible section within a GroupedSidebar. Renders a trigger button with chevron and expandable
+content area. `section.component` may be a `DynamicComponentModel` or a `Snippet`.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--grouped-sidebar-section--trigger--background` | Trigger row background | `light-dark(neutral-50, dark-700)` |
-| `--sc-kit--grouped-sidebar-section--trigger--color` | Trigger text color | `light-dark(gray-800, white)` |
-| `--sc-kit--grouped-sidebar-section--error-color` | Invalid section title color | `light-dark(destructive-500, destructive-400)` |
-| `--sc-kit--grouped-sidebar-section--padding-block` | Content vertical padding | `1rem` |
-| `--sc-kit--grouped-sidebar-section--padding-inline` | Content horizontal padding | `1rem` |
+| `--sc-kit--grouped-sidebar-section--trigger--background` | Trigger row background | `--sc-kit--color--bg--field-alt` |
+| `--sc-kit--grouped-sidebar-section--trigger--color` | Trigger text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--grouped-sidebar-section--error-color` | Invalid section title color | `--sc-kit--color--danger` |
+| `--sc-kit--grouped-sidebar-section--padding-block` | Content vertical padding | `--sc-kit--space--4` |
+| `--sc-kit--grouped-sidebar-section--padding-inline` | Content horizontal padding | `--sc-kit--space--4` |
 | `--sc-kit--grouped-sidebar-section--content--display` | Content display mode | `block` |
 -->
 
 <style>.grouped-sidebar-section {
-  --_grouped-sidebar-section--trigger--background: var(
-    --sc-kit--grouped-sidebar-section--trigger--background,
-    light-dark(#f9fafb, #222222)
-  );
-  --_grouped-sidebar-section--trigger--color: var(
-    --sc-kit--grouped-sidebar-section--trigger--color,
-    light-dark(#2e2e2e, #ffffff)
-  );
-  --_grouped-sidebar-section--error-color: var(
-    --sc-kit--grouped-sidebar-section--error-color,
-    light-dark(#e71d36, #f17e8b)
-  );
-  --_grouped-sidebar-section--padding-block: var(--sc-kit--grouped-sidebar-section--padding-block, 1rem);
-  --_grouped-sidebar-section--padding-inline: var(--sc-kit--grouped-sidebar-section--padding-inline, 1rem);
+  --_grouped-sidebar-section--trigger--background: var(--sc-kit--grouped-sidebar-section--trigger--background, var(--sc-kit--color--bg--field-alt));
+  --_grouped-sidebar-section--trigger--color: var(--sc-kit--grouped-sidebar-section--trigger--color, var(--sc-kit--color--text--primary));
+  --_grouped-sidebar-section--error-color: var(--sc-kit--grouped-sidebar-section--error-color, var(--sc-kit--color--danger));
+  --_grouped-sidebar-section--padding-block: var(--sc-kit--grouped-sidebar-section--padding-block, var(--sc-kit--space--4));
+  --_grouped-sidebar-section--padding-inline: var(--sc-kit--grouped-sidebar-section--padding-inline, var(--sc-kit--space--4));
   --_grouped-sidebar-section--content--display: var(--sc-kit--grouped-sidebar-section--content--display, block);
   display: contents;
 }
@@ -71,23 +63,36 @@ A collapsible section within a GroupedSidebar. Renders a trigger button with che
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 0.375rem 1rem;
+  padding: var(--sc-kit--space--2) var(--sc-kit--space--4);
   background-color: var(--_grouped-sidebar-section--trigger--background);
   margin-bottom: 1px;
   color: var(--_grouped-sidebar-section--trigger--color);
+  appearance: none;
+  border: 0;
+  cursor: pointer;
+  text-align: inherit;
+  font: inherit;
 }
 .grouped-sidebar-section__title {
-  font-size: 0.875rem;
+  font-size: var(--sc-kit--font-size--md);
+  line-height: var(--sc-kit--line-height--md);
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .grouped-sidebar-section__title--invalid {
   color: var(--_grouped-sidebar-section--error-color);
 }
 .grouped-sidebar-section__expand-icon {
   margin-left: auto;
+  display: inline-flex;
+  align-items: center;
 }
 .grouped-sidebar-section__content {
   display: var(--_grouped-sidebar-section--content--display);
-  transition: flex 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: flex var(--sc-kit--duration--base) var(--sc-kit--ease--default);
   flex: 0 0 0;
   overflow: hidden;
 }

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

@@ -10,16 +10,17 @@ type Props = {
     };
 };
 /**
- * A collapsible section within a GroupedSidebar. Renders a trigger button with chevron and expandable content area.
+ * A collapsible section within a GroupedSidebar. Renders a trigger button with chevron and expandable
+ * content area. `section.component` may be a `DynamicComponentModel` or a `Snippet`.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--grouped-sidebar-section--trigger--background` | Trigger row background | `light-dark(neutral-50, dark-700)` |
- * | `--sc-kit--grouped-sidebar-section--trigger--color` | Trigger text color | `light-dark(gray-800, white)` |
- * | `--sc-kit--grouped-sidebar-section--error-color` | Invalid section title color | `light-dark(destructive-500, destructive-400)` |
- * | `--sc-kit--grouped-sidebar-section--padding-block` | Content vertical padding | `1rem` |
- * | `--sc-kit--grouped-sidebar-section--padding-inline` | Content horizontal padding | `1rem` |
+ * | `--sc-kit--grouped-sidebar-section--trigger--background` | Trigger row background | `--sc-kit--color--bg--field-alt` |
+ * | `--sc-kit--grouped-sidebar-section--trigger--color` | Trigger text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--grouped-sidebar-section--error-color` | Invalid section title color | `--sc-kit--color--danger` |
+ * | `--sc-kit--grouped-sidebar-section--padding-block` | Content vertical padding | `--sc-kit--space--4` |
+ * | `--sc-kit--grouped-sidebar-section--padding-inline` | Content horizontal padding | `--sc-kit--space--4` |
  * | `--sc-kit--grouped-sidebar-section--content--display` | Content display mode | `block` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;

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

@@ -37,8 +37,10 @@ const selectedGroup = $derived(settings.groups.find((d) => d.id === settings.sel
   {#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 }))}
-        selected={selectedGroup.id}
+        segments={settings.groups.map((g) => ({ value: g.id, label: g.name, invalid: !g.isValid }))}
+        value={selectedGroup.id}
+        variant="outlined"
+        fullWidth
         on={{ change: handleSelectGroup }} />
     </div>
   {/if}
@@ -57,25 +59,38 @@ const selectedGroup = $derived(settings.groups.find((d) => d.id === settings.sel
 
 <!--
 @component
-A sidebar with tabbed groups and collapsible sections. Supports accordion (single expanded) and multi-expand modes, with optional auto-height sections.
+A sidebar with tabbed groups and collapsible sections. Supports accordion (single expanded) and multi-
+expand modes, with optional auto-height sections. Configure via `GroupedSidebarSettings`; pass groups
++ sections via `SidebarGroupModel` / `SidebarGroupSectionModel`.
+
+A section's `component` accepts a `Snippet` or `DynamicComponentModel`. Svelte 5 hoists `{#snippet}`
+declarations, so assign a markup snippet to `component` DIRECTLY in the script-level settings — no
+dummy-placeholder + post-init bind needed:
+
+```svelte
+<script lang="ts">
+  const settings = new GroupedSidebarSettings({
+    groups: [{ id: 'main', name: 'Main', sections: [{ id: 'general', name: 'General', component: general }] }]
+  });
+</script>
+{#snippet general()}<div>…</div>{/snippet}
+<GroupedSidebar {settings} />
+```
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--grouped-sidebar--background` | Sidebar background | `light-dark(white, dark-800)` |
-| `--sc-kit--grouped-sidebar--padding-block` | Header vertical padding | `1rem` |
-| `--sc-kit--grouped-sidebar--padding-inline` | Header horizontal padding | `1rem` |
+| `--sc-kit--grouped-sidebar--background` | Sidebar background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--grouped-sidebar--padding-block` | Header vertical padding | `--sc-kit--space--4` |
+| `--sc-kit--grouped-sidebar--padding-inline` | Header horizontal padding | `--sc-kit--space--4` |
 -->
 
 <style>.grouped-sidebar {
-  --_grouped-sidebar--background: var(--sc-kit--grouped-sidebar--background, light-dark(#ffffff, #1e1e1e));
-  --_grouped-sidebar--padding-block: var(--sc-kit--grouped-sidebar--padding-block, 1rem);
-  --_grouped-sidebar--padding-inline: var(--sc-kit--grouped-sidebar--padding-inline, 1rem);
+  --_grouped-sidebar--background: var(--sc-kit--grouped-sidebar--background, var(--sc-kit--color--bg--panel));
+  --_grouped-sidebar--padding-block: var(--sc-kit--grouped-sidebar--padding-block, var(--sc-kit--space--4));
+  --_grouped-sidebar--padding-inline: var(--sc-kit--grouped-sidebar--padding-inline, var(--sc-kit--space--4));
   --sc-kit--grouped-sidebar-section--padding-block: var(--_grouped-sidebar--padding-block);
   --sc-kit--grouped-sidebar-section--padding-inline: var(--_grouped-sidebar--padding-inline);
-  --sc-kit--segmented-control--background: light-dark(#f2f2f3, #222222);
-  --sc-kit--segmented-control--selected--background: light-dark(#ffffff, #242424);
-  --sc-kit--segmented-control--border-color: light-dark(#f2f2f3, #222222);
   display: flex;
   flex-direction: column;
   height: 100%;