npm - @streamscloud/kit - Versions diffs - 0.17.0 → 0.19.0 - Mend

@streamscloud/kit 0.17.0 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (91) hide show

package/dist/ui/tree/cmp.tree.svelte CHANGED Viewed

@@ -1,34 +1,21 @@
 <script lang="ts">import NodeView from './cmp.tree-node-view.svelte';
-import { TreeNavigation } from './tree-navigation.svelte';
-let { nodes, showSelectedCheckmark, children } = $props();
+import { createTreeKeyboard } from './tree-keyboard.svelte';
+let { nodes, showSelectedCheckmark, header } = $props();
 const nodesComputed = $derived(nodes ? (Array.isArray(nodes) ? nodes : [nodes]) : []);
 const hideExpandIcon = $derived(nodesComputed.every((f) => !f.children.length));
-const nav = new TreeNavigation(() => nodesComputed);
-const handleKeydown = (e) => {
-    nav.handleKeydown(e);
-    // ArrowLeft collapses a subtree; if focus sat on a treeitem inside it, the unmount would drop focus
-    // to <body> and arrow keys would die. Re-grab the container before the unmount so the single
-    // aria-activedescendant focus owner stays put.
-    e.currentTarget.focus();
-};
+$effect(() => {
+    for (const root of nodesComputed) {
+        root.setForest(() => nodesComputed);
+    }
+});
+const keyboard = createTreeKeyboard(() => nodesComputed);
 </script>
 <div class="tree">
-  {@render children?.()}
-  <div
-    class="tree__nodes"
-    role="tree"
-    tabindex="0"
-    aria-activedescendant={nav.activeId ? `tree-item-${nav.activeId}` : undefined}
-    onfocusin={() => nav.focus()}
-    onfocusout={(e) => {
-      if (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) {
-        nav.blur();
-      }
-    }}
-    onkeydown={handleKeydown}>
+  {@render header?.()}
+  <div class="tree__nodes" role="tree">
     {#each nodesComputed as node (node.id)}
-      <NodeView node={node} nav={nav} hideExpandIcon={hideExpandIcon} showSelectedCheckmark={showSelectedCheckmark} />
+      <NodeView node={node} keyboard={keyboard} hideExpandIcon={hideExpandIcon} showSelectedCheckmark={showSelectedCheckmark} />
     {/each}
   </div>
 </div>
@@ -40,9 +27,9 @@ holds its own expanded / selected state, children, optional icon / count / actio
 drag config (reorder or move-to-folder). Build the model with `new TreeNode({ … })` and pass the
 root(s) as `nodes`.
-Exposes an ARIA `tree` / `treeitem` / `group` structure with `aria-activedescendant` focus. Keyboard:
-↑/↓ move between visible items, →/← expand-or-enter / collapse-or-leave, Home/End jump to first/last,
-Enter/Space select.
+Click selects a node — selection is the single source of truth. Keyboard: the current row is the tab
+stop (native focus + `:focus-visible`), ↑/↓ move between visible rows, →/← expand-or-enter / collapse-or-leave,
+Home/End jump to first/last, Enter/Space select.
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -59,7 +46,4 @@ Enter/Space select.
 }
 .tree :global([contenteditable]) {
   user-select: text;
-}
-.tree__nodes:focus-visible {
-  outline: none;
 }</style>

package/dist/ui/tree/cmp.tree.svelte.d.ts CHANGED Viewed

@@ -2,11 +2,11 @@ import type { TreeNode } from './tree-node.svelte';
 import type { Snippet } from 'svelte';
 type Props = {
     /** Root node, or array of root nodes. */
-    nodes: TreeNode | TreeNode[];
+    nodes: TreeNode | readonly TreeNode[];
     /** Show a success checkmark on the selected node when it has no actions. */
     showSelectedCheckmark?: boolean;
     /** Optional content rendered above the nodes (e.g. a header). */
-    children?: Snippet;
+    header?: Snippet;
 };
 /**
  * Tree — hierarchical, collapsible node list driven by `TreeNode` model instances. Each `TreeNode`
@@ -14,9 +14,9 @@ type Props = {
  * drag config (reorder or move-to-folder). Build the model with `new TreeNode({ … })` and pass the
  * root(s) as `nodes`.
  *
- * Exposes an ARIA `tree` / `treeitem` / `group` structure with `aria-activedescendant` focus. Keyboard:
- * ↑/↓ move between visible items, →/← expand-or-enter / collapse-or-leave, Home/End jump to first/last,
- * Enter/Space select.
+ * Click selects a node — selection is the single source of truth. Keyboard: the current row is the tab
+ * stop (native focus + `:focus-visible`), ↑/↓ move between visible rows, →/← expand-or-enter / collapse-or-leave,
+ * Home/End jump to first/last, Enter/Space select.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/tree/tree-keyboard.svelte.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { TreeNode } from './tree-node.svelte';
+/** Native-focus roving keyboard navigation for the tree (single tab stop + arrows / Home / End / Enter). */
+export declare const createTreeKeyboard: (getRoots: () => readonly TreeNode[]) => {
+    anchorId: (node: TreeNode) => string;
+    readonly currentId: string | null;
+    setFocused: (id: string) => void;
+    handleKeydown: (node: TreeNode, e: KeyboardEvent) => void;
+};
+export type TreeKeyboard = ReturnType<typeof createTreeKeyboard>;

package/dist/ui/tree/tree-keyboard.svelte.js ADDED Viewed

@@ -0,0 +1,107 @@
+import { randomNanoid } from '../../core/utils';
+import { tick } from 'svelte';
+/** Native-focus roving keyboard navigation for the tree (single tab stop + arrows / Home / End / Enter). */
+export const createTreeKeyboard = (getRoots) => {
+    const treeId = randomNanoid(6);
+    const anchorDomId = (node) => `tree-${treeId}-anchor-${node.id}`;
+    let focusedId = $state(null);
+    const visible = () => {
+        const out = [];
+        const walk = (list) => {
+            for (const node of list) {
+                out.push(node);
+                if (node.expanded && node.children.length) {
+                    walk(node.children);
+                }
+            }
+        };
+        walk(getRoots());
+        return out;
+    };
+    const currentId = $derived.by(() => {
+        const rows = visible();
+        if (focusedId && rows.some((n) => n.id === focusedId)) {
+            return focusedId;
+        }
+        return (rows.find((n) => n.selected) ?? rows[0])?.id ?? null;
+    });
+    const focusNode = (node) => {
+        focusedId = node.id;
+        document.getElementById(anchorDomId(node))?.focus();
+    };
+    const focusAfterTick = async (node) => {
+        await tick();
+        focusNode(node);
+    };
+    const step = (node, delta) => {
+        const rows = visible();
+        const index = rows.findIndex((n) => n.id === node.id);
+        if (index < 0) {
+            return;
+        }
+        const next = rows[Math.min(Math.max(index + delta, 0), rows.length - 1)];
+        if (next.id !== node.id) {
+            focusNode(next);
+        }
+    };
+    return {
+        anchorId: anchorDomId,
+        get currentId() {
+            return currentId;
+        },
+        setFocused: (id) => {
+            focusedId = id;
+        },
+        handleKeydown: (node, e) => {
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    step(node, 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    step(node, -1);
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    if (node.children.length && !node.expanded) {
+                        node.expand();
+                    }
+                    else if (node.children.length) {
+                        void focusAfterTick(node.children[0]);
+                    }
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    if (node.expanded && node.children.length) {
+                        node.collapse();
+                    }
+                    else if (node.parent) {
+                        focusNode(node.parent);
+                    }
+                    break;
+                case 'Home': {
+                    e.preventDefault();
+                    const rows = visible();
+                    if (rows.length) {
+                        focusNode(rows[0]);
+                    }
+                    break;
+                }
+                case 'End': {
+                    e.preventDefault();
+                    const rows = visible();
+                    if (rows.length) {
+                        focusNode(rows[rows.length - 1]);
+                    }
+                    break;
+                }
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    node.select({ explicitly: true });
+                    break;
+            }
+        }
+    };
+};

package/dist/ui/tree/tree-node.svelte.d.ts CHANGED Viewed

@@ -45,6 +45,7 @@ export declare class TreeNode {
     private _nonSelectable;
     private _children;
     private _parent?;
+    private _forestRoots?;
     private _dirty;
     constructor(init: TreeNodeInitializer);
     /** Whether this node has unsaved changes; set via `setDirty` and propagated up to ancestors. */
@@ -62,6 +63,8 @@ export declare class TreeNode {
     select(options?: {
         explicitly?: boolean;
     }): void;
+    /** Register the full set of forest roots so single-select clears across sibling roots, not just this node's own root. Set by the `Tree` component. */
+    setForest(getRoots: () => readonly TreeNode[]): void;
     setChildren(value: TreeNode[]): void;
     addChild(child: TreeNode): void;
     insertChildAt(index: number, child: TreeNode): void;
@@ -74,8 +77,9 @@ export declare class TreeNode {
     flatten(): TreeNode[];
     canMoveToParent(targetParent: TreeNode): boolean;
     moveToFolder(targetFolder: TreeNode): boolean;
-    private refreshParentRefs;
+    private _refreshParentRefs;
     private _select;
-    private unselectNodeAndChildren;
-    private buildChainToCurrentNode;
+    private _firstSelectable;
+    private _unselectNodeAndChildren;
+    private _buildChainToCurrentNode;
 }

package/dist/ui/tree/tree-node.svelte.js CHANGED Viewed

@@ -20,6 +20,7 @@ export class TreeNode {
     _nonSelectable;
     _children = $state([]);
     _parent;
+    _forestRoots;
     _dirty = $state(false);
     constructor(init) {
         this.id = init.id || this.id;
@@ -76,9 +77,13 @@ export class TreeNode {
     select(options) {
         this._select(options?.explicitly ?? false);
     }
+    /** Register the full set of forest roots so single-select clears across sibling roots, not just this node's own root. Set by the `Tree` component. */
+    setForest(getRoots) {
+        this._forestRoots = getRoots;
+    }
     setChildren(value) {
         this._children = value;
-        this.refreshParentRefs(value);
+        this._refreshParentRefs(value);
     }
     addChild(child) {
         child._parent = this;
@@ -105,7 +110,7 @@ export class TreeNode {
         }
     }
     notifyHover(mouseOver) {
-        const selectionPath = this.buildChainToCurrentNode(this);
+        const selectionPath = this._buildChainToCurrentNode(this);
         for (const item of selectionPath) {
             if (item._onNodeHover) {
                 if (mouseOver) {
@@ -128,7 +133,7 @@ export class TreeNode {
         this._expanded = true;
     }
     unselect() {
-        this.unselectNodeAndChildren(this);
+        this._unselectNodeAndChildren(this);
     }
     flatten() {
         const result = [];
@@ -168,26 +173,25 @@ export class TreeNode {
         this._dragConfig.onNodeMovedToFolder({ movedNode: this, targetFolder });
         return true;
     }
-    refreshParentRefs(children) {
+    _refreshParentRefs(children) {
         for (const child of children) {
             child._parent = this;
             if (child._children.length) {
-                child.refreshParentRefs(child._children);
+                child._refreshParentRefs(child._children);
             }
         }
     }
     _select(selectedExplicitly) {
         if (this._nonSelectable) {
-            if (!this._children.length) {
-                return;
-            }
-            return this._children[0]._select(selectedExplicitly);
+            this._firstSelectable()?._select(selectedExplicitly);
+            return;
         }
-        // generate selection path (all nodes involved into current path)
-        const selectionPath = this.buildChainToCurrentNode(this);
-        // unselect previously selected values
+        const selectionPath = this._buildChainToCurrentNode(this);
         const root = selectionPath[selectionPath.length - 1];
-        this.unselectNodeAndChildren(root);
+        const roots = root._forestRoots?.() ?? [root];
+        for (const r of roots) {
+            this._unselectNodeAndChildren(r);
+        }
         // process selection path
         this._selected = true;
         if (selectionPath.length > 1) {
@@ -209,7 +213,19 @@ export class TreeNode {
             }
         }
     }
-    unselectNodeAndChildren(node) {
+    _firstSelectable() {
+        if (!this._nonSelectable) {
+            return this;
+        }
+        for (const child of this._children) {
+            const found = child._firstSelectable();
+            if (found) {
+                return found;
+            }
+        }
+        return null;
+    }
+    _unselectNodeAndChildren(node) {
         node._involvedIntoActivePath = false;
         node._selected = false;
         const children = node._children;
@@ -217,10 +233,10 @@ export class TreeNode {
             return;
         }
         children.forEach((f) => {
-            this.unselectNodeAndChildren(f);
+            this._unselectNodeAndChildren(f);
         });
     }
-    buildChainToCurrentNode(node) {
+    _buildChainToCurrentNode(node) {
         const chain = [];
         let current = node;
         while (current) {

package/package.json CHANGED Viewed

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

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

@@ -1,153 +0,0 @@
-<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
-          checked={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
-            checked={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-kit--color--text--primary)` |
-| `--sc-kit--reorderable-toggle-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--secondary)` |
-| `--sc-kit--reorderable-toggle-list--handle--background` | Drag handle background | `var(--sc-kit--color--bg--element)` |
--->
-<style>.reorderable-toggle-list {
-  --_reorderable-toggle-list--label--color: var(--sc-kit--reorderable-toggle-list--label--color, var(--sc-kit--color--text--primary));
-  --_reorderable-toggle-list--handle--color: var(--sc-kit--reorderable-toggle-list--handle--color, var(--sc-kit--color--text--secondary));
-  --_reorderable-toggle-list--handle--background: var(--sc-kit--reorderable-toggle-list--handle--background, var(--sc-kit--color--bg--element));
-  display: flex;
-  flex-direction: column;
-  gap: var(--sc-kit--space--3);
-}
-.reorderable-toggle-list__dnd {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sc-kit--space--3);
-}
-.reorderable-toggle-list__item {
-  display: flex;
-  align-items: center;
-  gap: var(--sc-kit--space--3);
-  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
-}
-.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: var(--sc-kit--radius--sm) 0 0 var(--sc-kit--radius--sm);
-  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: var(--sc-kit--font-size--md);
-  font-weight: var(--sc-kit--font-weight--regular);
-  line-height: var(--sc-kit--line-height--md);
-  color: var(--_reorderable-toggle-list--label--color);
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.reorderable-toggle-list__toggle {
-  flex-shrink: 0;
-  margin-left: auto;
-}</style>

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

@@ -1,20 +0,0 @@
-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-kit--color--text--primary)` |
- * | `--sc-kit--reorderable-toggle-list--handle--color` | Drag handle icon color | `var(--sc-kit--color--text--secondary)` |
- * | `--sc-kit--reorderable-toggle-list--handle--background` | Drag handle background | `var(--sc-kit--color--bg--element)` |
- */
-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 DELETED Viewed

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

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

@@ -1,12 +0,0 @@
-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-panel-button.svelte DELETED Viewed

@@ -1,42 +0,0 @@
-<script lang="ts">const { children, on } = $props();
-export {};
-</script>
-<button type="button" class="toolbar-panel-button" onclick={() => on?.click?.()}>
-  {@render children()}
-</button>
-<!--
-@component
-A text-row button for toolbar panels / popovers (rendered inside `<ToolbarPanel>` / `<ToolbarPopover>`).
-For the toolbar's primary action area use `<ToolbarButton>` instead.
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--toolbar-panel-button--color` | Text color | `var(--sc-kit--color--text--primary)` |
-| `--sc-kit--toolbar-panel-button--color-hover` | Text color on hover | `var(--sc-kit--color--accent)` |
--->
-<style>.toolbar-panel-button {
-  --_toolbar-panel-button--color: var(--sc-kit--toolbar-panel-button--color, var(--sc-kit--color--text--primary));
-  --_toolbar-panel-button--color-hover: var(--sc-kit--toolbar-panel-button--color-hover, var(--sc-kit--color--accent));
-  appearance: none;
-  background: transparent;
-  border: 0;
-  text-align: inherit;
-  cursor: pointer;
-  font-size: var(--sc-kit--font-size--md);
-  font-weight: var(--sc-kit--font-weight--regular);
-  line-height: var(--sc-kit--line-height--md);
-  color: var(--_toolbar-panel-button--color);
-  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
-  max-width: 100%;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.toolbar-panel-button:hover {
-  color: var(--_toolbar-panel-button--color-hover);
-}</style>

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

@@ -1,20 +0,0 @@
-import type { Snippet } from 'svelte';
-type Props = {
-    children: Snippet;
-    on?: {
-        click?: () => void;
-    };
-};
-/**
- * A text-row button for toolbar panels / popovers (rendered inside `<ToolbarPanel>` / `<ToolbarPopover>`).
- * For the toolbar's primary action area use `<ToolbarButton>` instead.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--toolbar-panel-button--color` | Text color | `var(--sc-kit--color--text--primary)` |
- * | `--sc-kit--toolbar-panel-button--color-hover` | Text color on hover | `var(--sc-kit--color--accent)` |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;