@streamscloud/kit 0.2.11 → 0.2.13

package/dist/core/local-storage/index.d.ts

@@ -0,0 +1 @@
+export { LocalStorageItem } from './local-storage-item';

package/dist/core/local-storage/index.js

@@ -0,0 +1 @@
+export { LocalStorageItem } from './local-storage-item';

package/dist/core/local-storage/local-storage-item.d.ts

@@ -0,0 +1,10 @@
+export declare class LocalStorageItem<T, TFallback = null> {
+    readonly key: string;
+    private readonly _fallback;
+    private constructor();
+    static of: <T_1>(key: string) => LocalStorageItem<T_1>;
+    static withDefault: <T_1>(key: string, fallback: T_1) => LocalStorageItem<T_1, T_1>;
+    get(): T | TFallback;
+    remove(): void;
+    set(value: T): void;
+}

package/dist/core/local-storage/local-storage-item.js

@@ -0,0 +1,27 @@
+export class LocalStorageItem {
+    key;
+    _fallback;
+    constructor(key, fallback) {
+        this.key = key;
+        this._fallback = fallback;
+    }
+    static of = (key) => {
+        return new LocalStorageItem(key, null);
+    };
+    static withDefault = (key, fallback) => {
+        return new LocalStorageItem(key, fallback);
+    };
+    get() {
+        const stringValue = localStorage.getItem(this.key);
+        if (!stringValue) {
+            return this._fallback;
+        }
+        return JSON.parse(stringValue);
+    }
+    remove() {
+        localStorage.removeItem(this.key);
+    }
+    set(value) {
+        localStorage.setItem(this.key, JSON.stringify(value));
+    }
+}

package/dist/styles/_responsive.scss

@@ -68,3 +68,51 @@ $layout-breakpoints: (
     @content;
   }
 }
+
+@mixin layout($breakpoint) {
+  @media screen and (max-width: map.get($layout-breakpoints, $breakpoint)) {
+    @content;
+  }
+}
+
+@mixin layout-mobile() {
+  @include layout(sm) {
+    @content;
+  }
+}
+
+@mixin layout-tablet() {
+  @include layout(md) {
+    @content;
+  }
+}
+
+@mixin layout-laptop() {
+  @include layout(lg) {
+    @content;
+  }
+}
+
+@mixin layout-narrow-desktop() {
+  @include layout(xl) {
+    @content;
+  }
+}
+
+@mixin layout-desktop() {
+  @include layout(xxl) {
+    @content;
+  }
+}
+
+@mixin layout-fhd() {
+  @include layout(fhd) {
+    @content;
+  }
+}
+
+@mixin layout-fhd-p() {
+  @include layout(fhd-p) {
+    @content;
+  }
+}

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

@@ -31,8 +31,8 @@ A themed button component combining `ButtonBase` (structure) and `ButtonTheme` (
 | `--sc-kit--button--border` | Border shorthand | `none` |
 | `--sc-kit--button--border--disabled` | Border when disabled | inherits `--border` |
 | `--sc-kit--button--border-radius` | Corner rounding | `0.25em` |
-| `--sc-kit--button--padding--vertical` | Vertical padding | `0` |
-| `--sc-kit--button--padding--horizontal` | Horizontal padding | `1em` |
+| `--sc-kit--button--padding--block` | Block (vertical) padding | `0` |
+| `--sc-kit--button--padding--inline` | Inline (horizontal) padding | `1em` |
 | `--sc-kit--button--min-width` | Minimum width | `0` |
 | `--sc-kit--button--width` | Explicit width | `auto` |
 | `--sc-kit--button--height` | Button height | `2em` |

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

@@ -35,8 +35,8 @@ type Props = {
  * | `--sc-kit--button--border` | Border shorthand | `none` |
  * | `--sc-kit--button--border--disabled` | Border when disabled | inherits `--border` |
  * | `--sc-kit--button--border-radius` | Corner rounding | `0.25em` |
- * | `--sc-kit--button--padding--vertical` | Vertical padding | `0` |
- * | `--sc-kit--button--padding--horizontal` | Horizontal padding | `1em` |
+ * | `--sc-kit--button--padding--block` | Block (vertical) padding | `0` |
+ * | `--sc-kit--button--padding--inline` | Inline (horizontal) padding | `1em` |
  * | `--sc-kit--button--min-width` | Minimum width | `0` |
  * | `--sc-kit--button--width` | Explicit width | `auto` |
  * | `--sc-kit--button--height` | Button height | `2em` |

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

@@ -134,7 +134,7 @@ Inherits all `--sc-kit--button--*` base and variant properties from `Button`.
   --_options-button--border: var(--sc-kit--button--border, none);
   --_options-button--border-radius: var(--sc-kit--button--border-radius, 0.25em);
   --_options-button--box-shadow: var(--sc-kit--button--box-shadow, none);
-  --_options-button--padding--vertical: var(--sc-kit--button--padding--vertical, 0);
+  --_options-button--padding--block: var(--sc-kit--button--padding--block, 0);
   --_options-button--min-width: var(--sc-kit--button--min-width, 0);
   --_options-button--height: var(--sc-kit--button--height, 2em);
   --_options-button--separator--border: 1px solid var(--_options-button--font--color);
@@ -186,7 +186,7 @@ Inherits all `--sc-kit--button--*` base and variant properties from `Button`.
   height: 100%;
   font-size: var(--_options-button--text--font-size);
   border-radius: var(--_options-button--border-radius);
-  padding: var(--_options-button--padding--vertical) 0.5em;
+  padding: var(--_options-button--padding--block) 0.5em;
   color: inherit;
   background: transparent;
   border: none;

package/dist/ui/button/resources/button-base.svelte

@@ -30,15 +30,15 @@ export {};
   --_button--border: var(--sc-kit--button--border, none);
   --_button--border--disabled: var(--sc-kit--button--border--disabled, var(--_button--border));
   --_button--border-radius: var(--sc-kit--button--border-radius, 0.25em);
-  --_button--padding--vertical: var(--sc-kit--button--padding--vertical, 0);
-  --_button--padding--horizontal: var(--sc-kit--button--padding--horizontal, 1em);
+  --_button--padding--block: var(--sc-kit--button--padding--block, 0);
+  --_button--padding--inline: var(--sc-kit--button--padding--inline, 1em);
   --_button--min-width: var(--sc-kit--button--min-width, 0);
   --_button--width: var(--sc-kit--button--width, auto);
   --_button--height: var(--sc-kit--button--height, 2em);
   --_button--box-shadow: var(--sc-kit--button--box-shadow, none);
   font-size: var(--_button--font--size);
   font-weight: var(--_button--font-weight);
-  padding: var(--_button--padding--vertical) var(--_button--padding--horizontal);
+  padding: var(--_button--padding--block) var(--_button--padding--inline);
   color: var(--_button--font--color);
   background: var(--_button--background);
   box-shadow: var(--_button--box-shadow);

package/dist/ui/button/resources/button-theme.svelte

@@ -323,13 +323,13 @@ export {};
   --sc-kit--button--height: 2.5em;
   --sc-kit--button--text--font-size: 1.125em;
   --sc-kit--button--icon--font-size: 1.25em;
-  --sc-kit--button--padding--horizontal: 1.5em;
+  --sc-kit--button--padding--inline: 1.5em;
   --sc-kit--button--border-radius: 0.375em;
   --_button--shadow-y: 3px;
 }
 .button-theme--size-small {
   --sc-kit--button--height: 1.75em;
   --sc-kit--button--text--font-size: 0.75em;
-  --sc-kit--button--padding--horizontal: 0.75em;
+  --sc-kit--button--padding--inline: 0.75em;
   --_button--shadow-y: 1.5px;
 }</style>

package/dist/ui/dropdown/cmp.dropdown.svelte

@@ -6,6 +6,7 @@ import { untrack } from 'svelte';
 let { position = 'bottom-start', disabled = false, keepDropdownOpen = false, fixedPosition = false, offset = 4, boundaryMargin = 8, backdrop = false, isOpenRequested, matchTriggerWidth = false, panel = true, on, children, trigger } = $props();
 let opened = $state(false);
 let dropdownEl = $state(null);
+let triggerEl = $state(null);
 let actualPlacement = $state(untrack(() => position));
 $effect(() => untrack(() => {
     on?.mounted?.({
@@ -68,7 +69,9 @@ const handleClick = (event) => {
         open();
         return;
     }
-    if (canClose(event.target, event.currentTarget)) {
+    const target = event.target;
+    const isTriggerClick = triggerEl?.contains(target) ?? false;
+    if (isTriggerClick || canClose(target, event.currentTarget)) {
         close();
     }
 };
@@ -86,7 +89,9 @@ const canClose = (target, container) => {
     return true;
 };
 const initPopper = (node) => {
-    const triggerEl = node.previousElementSibling;
+    if (!triggerEl) {
+        return;
+    }
     const popper = createPopper(triggerEl, node, {
         placement: position,
         strategy: fixedPosition ? 'fixed' : 'absolute',
@@ -145,7 +150,7 @@ const initPopper = (node) => {
   </div>
 {/if}
 <div class="dropdown" class:dropdown--disabled={disabled} bind:this={dropdownEl} onclick={handleClick} onkeydown={() => ({})} role="none">
-  <button type="button" class="dropdown__trigger">
+  <button type="button" class="dropdown__trigger" bind:this={triggerEl}>
     {#if trigger}
       {@render trigger()}
     {:else}

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

@@ -1,5 +1,5 @@
 <script lang="ts">import { Icon } from '../icon';
-let { icon, iconColor, iconPosition = 'left', secondaryIcon, secondaryIconColor, trimText = false, children } = $props();
+let { icon, iconColor, iconPosition = 'left', secondaryIcon, secondaryIconColor, trimText = false, hideText = false, children } = $props();
 const iconAsSnippet = $derived(icon && typeof icon === 'function' ? icon : null);
 const iconAsString = $derived(icon && typeof icon !== 'function' ? icon : null);
 const secondaryIconAsSnippet = $derived(secondaryIcon && typeof secondaryIcon === 'function' ? secondaryIcon : null);
@@ -14,7 +14,7 @@ const secondaryIconAsString = $derived(secondaryIcon && typeof secondaryIcon !==
       <Icon src={iconAsString} color={iconColor} />
     {/if}
   </span>
-  {#if children}
+  {#if children && !hideText}
     <span class="icon-text__text" class:icon-text__text--trim={trimText}>
       {@render children()}
     </span>

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

@@ -13,6 +13,8 @@ type Props = {
     secondaryIconColor?: IconColor | null;
     /** Truncate text with ellipsis on overflow */
     trimText?: boolean;
+    /** Hide text, showing only the icon(s) */
+    hideText?: boolean;
     children?: Snippet;
 };
 /**

package/dist/ui/page-toolbar/cmp.reorderable-toggle-list.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">import { Icon } from '../icon';
+import { Toggle } from '../toggle';
+import IconReorderDotsVertical from '@fluentui/svg-icons/icons/re_order_dots_vertical_20_regular.svg?raw';
+import { flip } from 'svelte/animate';
+import { dndzone } from 'svelte-dnd-action';
+let { items, on } = $props();
+const reorderableItems = $derived(items.filter((i) => !i.fixed));
+const fixedItems = $derived(items.filter((i) => i.fixed));
+let dndItems = $state.raw([]);
+$effect(() => {
+    dndItems = reorderableItems.map(({ id, label, enabled }) => ({ id, label, enabled }));
+});
+const flipDurationMs = 200;
+const emitChange = (reordered) => {
+    const merged = [
+        ...fixedItems.map(({ id, label, enabled, fixed }) => ({ id, label, enabled, fixed })),
+        ...reordered.map(({ id, label, enabled }) => ({ id, label, enabled }))
+    ];
+    on.change(merged);
+};
+const handleConsider = (e) => {
+    dndItems = e.detail.items;
+};
+const handleFinalize = (e) => {
+    emitChange(e.detail.items);
+};
+const handleToggle = (id, enabled) => {
+    emitChange(dndItems.map((i) => (i.id === id ? { ...i, enabled } : i)));
+};
+const handleFixedToggle = (id, enabled) => {
+    const updatedFixed = fixedItems.map(({ id: fId, label, enabled: fEnabled, fixed }) => ({
+        id: fId,
+        label,
+        enabled: fId === id ? enabled : fEnabled,
+        fixed
+    }));
+    on.change([...updatedFixed, ...dndItems.map(({ id, label, enabled }) => ({ id, label, enabled }))]);
+};
+</script>
+
+<div class="reorderable-toggle-list">
+  {#each fixedItems as item (item.id)}
+    <div class="reorderable-toggle-list__item">
+      <div class="reorderable-toggle-list__drag-handle reorderable-toggle-list__drag-handle--hidden">
+        <Icon src={IconReorderDotsVertical} />
+      </div>
+      <div class="reorderable-toggle-list__label">
+        {item.label}
+      </div>
+      <div class="reorderable-toggle-list__toggle">
+        <Toggle
+          isOn={item.enabled}
+          on={{
+            change: (value) => handleFixedToggle(item.id, value)
+          }} />
+      </div>
+    </div>
+  {/each}
+  <div
+    class="reorderable-toggle-list__dnd"
+    use:dndzone={{
+      items: dndItems,
+      dropTargetStyle: {},
+      flipDurationMs,
+      morphDisabled: true
+    }}
+    onconsider={handleConsider}
+    onfinalize={handleFinalize}>
+    {#each dndItems as item (item.id)}
+      <div class="reorderable-toggle-list__item" animate:flip={{ duration: flipDurationMs }}>
+        <div class="reorderable-toggle-list__drag-handle">
+          <Icon src={IconReorderDotsVertical} />
+        </div>
+        <div class="reorderable-toggle-list__label">
+          {item.label}
+        </div>
+        <div class="reorderable-toggle-list__toggle">
+          <Toggle
+            isOn={item.enabled}
+            on={{
+              change: (value) => handleToggle(item.id, value)
+            }} />
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<!--
+@component
+A reorderable list of toggle items with drag-and-drop support. Fixed items appear above the reorderable zone.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--reorderable-toggle-list--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+| `--sc-kit--reorderable-toggle-list--handle--color` | Drag handle icon color | `var(--sc-color--text-secondary, light-dark(neutral-500, neutral-300))` |
+| `--sc-kit--reorderable-toggle-list--handle--background` | Drag handle background | `var(--sc-color--bg-element, light-dark(neutral-50, dark-800))` |
+-->
+
+<style>.reorderable-toggle-list {
+  --_reorderable-toggle-list--label--color: var(
+    --sc-kit--reorderable-toggle-list--label--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  --_reorderable-toggle-list--handle--color: var(
+    --sc-kit--reorderable-toggle-list--handle--color,
+    var(--sc-color--text-secondary, light-dark(#6b7280, #d1d5db))
+  );
+  --_reorderable-toggle-list--handle--background: var(
+    --sc-kit--reorderable-toggle-list--handle--background,
+    var(--sc-color--bg-element, light-dark(#f9fafb, #1e1e1e))
+  );
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.reorderable-toggle-list__dnd {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.reorderable-toggle-list__item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.25rem 0.5rem;
+}
+.reorderable-toggle-list__drag-handle {
+  --sc-kit--icon--size: 1rem;
+  --sc-kit--icon--color: var(--_reorderable-toggle-list--handle--color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.375rem;
+  padding-inline: 0.1875rem;
+  border-radius: 0.3125rem 0 0 0.3125rem;
+  cursor: grab;
+  background: var(--_reorderable-toggle-list--handle--background);
+}
+.reorderable-toggle-list__drag-handle:active {
+  cursor: grabbing;
+}
+.reorderable-toggle-list__drag-handle--hidden {
+  visibility: hidden;
+}
+.reorderable-toggle-list__label {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: var(--_reorderable-toggle-list--label--color);
+}
+.reorderable-toggle-list__toggle {
+  flex-shrink: 0;
+  margin-left: auto;
+  --sc-kit--toggle--switch--height: 1.125rem;
+  --sc-kit--toggle--switch--width: 2.3125rem;
+}</style>

package/dist/ui/page-toolbar/cmp.reorderable-toggle-list.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ReorderableToggleItem } from './types';
+type Props = {
+    items: ReorderableToggleItem[];
+    on: {
+        change: (items: ReorderableToggleItem[]) => void;
+    };
+};
+/**
+ * A reorderable list of toggle items with drag-and-drop support. Fixed items appear above the reorderable zone.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--reorderable-toggle-list--label--color` | Label text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ * | `--sc-kit--reorderable-toggle-list--handle--color` | Drag handle icon color | `var(--sc-color--text-secondary, light-dark(neutral-500, neutral-300))` |
+ * | `--sc-kit--reorderable-toggle-list--handle--background` | Drag handle background | `var(--sc-color--bg-element, light-dark(neutral-50, dark-800))` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-button-item.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">const { children, on } = $props();
+export {};
+</script>
+
+<button type="button" class="toolbar-button-item" onclick={() => on?.click?.()}>
+  {@render children()}
+</button>
+
+<!--
+@component
+A simple button item for toolbar panels. Renders children as clickable text.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-button-item--color` | Text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+-->
+
+<style>.toolbar-button-item {
+  --_toolbar-button-item--color: var(
+    --sc-kit--toolbar-button-item--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: var(--_toolbar-button-item--color);
+  padding: 0.25rem 0.5rem;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-button-item.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+    on?: {
+        click?: () => void;
+    };
+};
+/**
+ * A simple button item for toolbar panels. Renders children as clickable text.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-button-item--color` | Text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/page-toolbar/cmp.toolbar-checkbox-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">import { Checkbox } from '../checkbox';
+const { checked, children, on } = $props();
+</script>
+
+<div class="toolbar-checkbox-item">
+  <Checkbox checked={checked} on={{ change: (value) => on?.change?.(value) }}>
+    {@render children()}
+  </Checkbox>
+</div>
+
+<!--
+@component
+A checkbox item for toolbar panels. Wraps the kit Checkbox with toolbar-appropriate sizing.
+-->
+
+<style>.toolbar-checkbox-item {
+  padding: 0.25rem 0.5rem;
+  overflow: hidden;
+  --sc-kit--checkbox--gap: 1.25rem;
+  --sc-kit--checkbox--icon--size: 1.125rem;
+}</style>

package/dist/ui/page-toolbar/cmp.toolbar-checkbox-item.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    checked: boolean;
+    children: Snippet;
+    on?: {
+        change?: (value: boolean) => void;
+    };
+};
+/** A checkbox item for toolbar panels. Wraps the kit Checkbox with toolbar-appropriate sizing. */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,29 @@
+<script lang="ts">import { Button } from '../button';
+import { Dropdown } from '../dropdown';
+import { IconText } from '../icon-text';
+import ToolbarPanel from './cmp.toolbar-panel.svelte';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+const { title, triggerLabel, icon, iconColor, position = 'bottom-end', children, footer } = $props();
+</script>
+
+<div class="toolbar-dropdown">
+  <Dropdown position={position} keepDropdownOpen>
+    {#snippet trigger()}
+      <Button variant="standard" size="small">
+        <IconText icon={icon} iconColor={iconColor} secondaryIcon={IconChevronDown}>{triggerLabel}</IconText>
+      </Button>
+    {/snippet}
+    <ToolbarPanel title={title} footer={footer}>
+      {@render children()}
+    </ToolbarPanel>
+  </Dropdown>
+</div>
+
+<!--
+@component
+A toolbar dropdown button. Opens a panel with a title, body content, and optional footer.
+-->
+
+<style>.toolbar-dropdown {
+  display: contents;
+}</style>

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

@@ -0,0 +1,17 @@
+import type { DropdownPosition } from '../dropdown';
+import type { IconColor } from '../icon';
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    triggerLabel: string;
+    icon?: string;
+    iconColor?: IconColor;
+    /** @default 'bottom-end' */
+    position?: DropdownPosition;
+    children: Snippet;
+    footer?: Snippet;
+};
+/** A toolbar dropdown button. Opens a panel with a title, body content, and optional footer. */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,58 @@
+<script lang="ts">const { title, children, footer } = $props();
+export {};
+</script>
+
+<div class="toolbar-panel">
+  <div class="toolbar-panel__title">{title}</div>
+  <div class="toolbar-panel__body">
+    {@render children()}
+    {#if footer}
+      <div class="toolbar-panel__divider"></div>
+      {@render footer()}
+    {/if}
+  </div>
+</div>
+
+<!--
+@component
+A panel container used inside toolbar dropdowns. Provides a title, body area, and optional footer.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toolbar-panel--width` | Panel width | `21.875rem` |
+| `--sc-kit--toolbar-panel--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+| `--sc-kit--toolbar-panel--divider--color` | Divider line color | `var(--sc-color--border-primary, light-dark(neutral-100, dark-800))` |
+-->
+
+<style>.toolbar-panel {
+  --_toolbar-panel--width: var(--sc-kit--toolbar-panel--width, 21.875rem);
+  --_toolbar-panel--title--color: var(
+    --sc-kit--toolbar-panel--title--color,
+    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
+  );
+  --_toolbar-panel--divider--color: var(
+    --sc-kit--toolbar-panel--divider--color,
+    var(--sc-color--border-primary, light-dark(#f2f2f3, #1e1e1e))
+  );
+  width: var(--_toolbar-panel--width);
+  padding: 1.5rem;
+}
+.toolbar-panel__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  color: var(--_toolbar-panel--title--color);
+  margin-bottom: 0.5rem;
+}
+.toolbar-panel__body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-block: 0.5rem;
+}
+.toolbar-panel__divider {
+  height: 1px;
+  background: var(--_toolbar-panel--divider--color);
+  margin: 0.25rem 0.5rem;
+}</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    children: Snippet;
+    footer?: Snippet;
+};
+/**
+ * A panel container used inside toolbar dropdowns. Provides a title, body area, and optional footer.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toolbar-panel--width` | Panel width | `21.875rem` |
+ * | `--sc-kit--toolbar-panel--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ * | `--sc-kit--toolbar-panel--divider--color` | Divider line color | `var(--sc-color--border-primary, light-dark(neutral-100, dark-800))` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;