@streamscloud/kit 0.17.0 → 0.19.0

package/dist/ui/table/table-column-models.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { DynamicComponentModel } from '../dynamic-component';
 import type { IOneOfTableColumn, ITableActionsColumn, TableColumnSortDirection, TableColumnType, WithId } from './types';
-export type ColumnDef<T extends WithId> = IOneOfTableColumn<T, keyof T> | ITableActionsColumn;
+export type ColumnDef<T extends WithId> = IOneOfTableColumn<T> | ITableActionsColumn;
 export type SortableTableColumn = {
     uniqueId: symbol;
     title: string;
@@ -17,7 +17,6 @@ export declare class ResolvedColumn<T extends WithId> {
     readonly def: ColumnDef<T>;
     readonly uniqueId: symbol;
     headerView: DynamicComponentModel;
-    editorColumn: ResolvedColumn<T> | null;
     hidden: boolean;
     sortDirection: TableColumnSortDirection;
     constructor(def: ColumnDef<T>);

package/dist/ui/table/table-column-models.svelte.js

@@ -2,7 +2,6 @@ export class ResolvedColumn {
     def;
     uniqueId = Symbol();
     headerView = null;
-    editorColumn = null;
     hidden = $state(false);
     sortDirection = $state('none');
     constructor(def) {

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte

@@ -1,10 +1,6 @@
 <script lang="ts" generics="T extends {id: string}">import { LocalStorageItem } from '../../../core/local-storage';
-import { Button } from '../../button';
-import { IconText } from '../../icon-text';
-import { ReorderableToggleList } from '../../page-toolbar';
-import { Popover } from '../../popover';
+import { ReorderableCheckboxList, ToolbarPopover } from '../../page-toolbar';
 import { TableColumnsManagerLocalization } from './table-columns-manager-localization';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconColumnTwo from '@fluentui/svg-icons/icons/text_column_two_20_regular.svg?raw';
 import { untrack } from 'svelte';
 let { model, localStorageKey, on } = $props();
@@ -16,15 +12,20 @@ const items = $derived(hideableColumns.map((col) => ({
     label: col.title,
     enabled: !col.hidden
 })));
-// Load from localStorage once columns are available
 let initialized = false;
+let standardItems = $state.raw([]);
 $effect(() => {
     const columns = hideableColumns;
-    if (!storage || columns.length === 0 || initialized) {
+    if (columns.length === 0 || initialized) {
         return;
     }
     initialized = true;
-    const saved = storage.get();
+    standardItems = columns.map((col) => ({
+        id: String(col.id),
+        label: col.title,
+        enabled: !('hidden' in col.def && col.def.hidden === true)
+    }));
+    const saved = storage?.get();
     if (!saved || !Array.isArray(saved)) {
         return;
     }
@@ -75,46 +76,18 @@ const handleChange = (updatedItems) => {
 };
 </script>
 
-<Popover position="bottom-start" keepOpen>
-  {#snippet trigger()}
-    <Button type="presentational" variant="secondary" size="sm">
-      <IconText icon={{ src: IconColumnTwo, color: 'accent' }} secondaryIcon={IconChevronDown} size="sm" iconScale="large">{localization.columns}</IconText>
-    </Button>
-  {/snippet}
-  <div class="columns-manager">
-    <div class="columns-manager__title">{localization.selectColumns}</div>
-    <div class="columns-manager__body">
-      <ReorderableToggleList items={items} on={{ change: handleChange }} />
-    </div>
-  </div>
-</Popover>
+<ToolbarPopover triggerLabel={localization.view} icon={{ src: IconColumnTwo, color: 'accent' }}>
+  <ReorderableCheckboxList
+    items={items}
+    title={localization.columns}
+    standard={standardItems.length ? standardItems : undefined}
+    showClearAll={false}
+    on={{ change: handleChange }} />
+</ToolbarPopover>
 
 <!--
 @component
-Column visibility and order manager for tables. Shows a popover with a reorderable toggle list for each hideable column.
-Supports optional localStorage persistence of column order and visibility.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-kit--color--text--primary)` |
+Column visibility and order manager for tables. Opens a `ToolbarPopover` with a `ReorderableCheckboxList`
+of the hideable columns — drag to reorder, click to show / hide. Supports optional localStorage persistence
+of column order and visibility.
 -->
-
-<style>.columns-manager {
-  --_columns-manager--title--color: var(--sc-kit--table-columns-manager--title--color, var(--sc-kit--color--text--primary));
-  width: 21.875rem;
-  padding: 1.5rem;
-}
-.columns-manager__title {
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.25rem;
-  color: var(--_columns-manager--title--color);
-  margin-bottom: 0.5rem;
-}
-.columns-manager__body {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding-block: 0.5rem;
-}</style>

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte.d.ts

@@ -41,13 +41,9 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
- * Column visibility and order manager for tables. Shows a popover with a reorderable toggle list for each hideable column.
- * Supports optional localStorage persistence of column order and visibility.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-kit--color--text--primary)` |
+ * Column visibility and order manager for tables. Opens a `ToolbarPopover` with a `ReorderableCheckboxList`
+ * of the hideable columns — drag to reorder, click to show / hide. Supports optional localStorage persistence
+ * of column order and visibility.
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends {

package/dist/ui/table/table-columns-manager/table-columns-manager-localization.d.ts

@@ -1,4 +1,4 @@
 export declare class TableColumnsManagerLocalization {
+    get view(): string;
     get columns(): string;
-    get selectColumns(): string;
 }

package/dist/ui/table/table-columns-manager/table-columns-manager-localization.js

@@ -1,19 +1,19 @@
 import { AppLocale } from '../../../core/locale';
 export class TableColumnsManagerLocalization {
+    get view() {
+        return loc.view[AppLocale.current];
+    }
     get columns() {
         return loc.columns[AppLocale.current];
     }
-    get selectColumns() {
-        return loc.selectColumns[AppLocale.current];
-    }
 }
 const loc = {
+    view: {
+        en: 'View',
+        no: 'Visning'
+    },
     columns: {
         en: 'Columns',
         no: 'Kolonner'
-    },
-    selectColumns: {
-        en: 'Select Columns',
-        no: 'Velg kolonner'
     }
 };

package/dist/ui/table/table-localization.d.ts

@@ -1,6 +1,4 @@
 export declare class TableLocalization {
     get noItemsFoundTitle(): string;
     get noItemsFoundBody(): string;
-    get save(): string;
-    get cancel(): string;
 }

package/dist/ui/table/table-localization.js

@@ -6,12 +6,6 @@ export class TableLocalization {
     get noItemsFoundBody() {
         return loc.noItemsFoundBody[AppLocale.current];
     }
-    get save() {
-        return loc.save[AppLocale.current];
-    }
-    get cancel() {
-        return loc.cancel[AppLocale.current];
-    }
 }
 const loc = {
     noItemsFoundTitle: {
@@ -21,13 +15,5 @@ const loc = {
     noItemsFoundBody: {
         en: 'No data found. Create one to get started',
         no: 'Ingen data funnet. Opprett en for å komme i gang'
-    },
-    save: {
-        en: 'Save',
-        no: 'Lagre'
-    },
-    cancel: {
-        en: 'Cancel',
-        no: 'Avbryt'
     }
 };

package/dist/ui/table/table-model.svelte.d.ts

@@ -20,7 +20,6 @@ export declare class TableModel<T extends WithId> {
     private _selection;
     private _preserveSelection;
     private _dataProvider;
-    private _editingItem;
     private _highlightedItemIds;
     constructor(init: TableModelInit<T>);
     get items(): T[];
@@ -29,13 +28,13 @@ export declare class TableModel<T extends WithId> {
     get itemGroupActions(): TableGroupAction<T>[];
     get styles(): Readonly<TableStyles>;
     get selection(): Repository<T>;
-    get editingItem(): T | null;
     get highlightedItemIds(): string[];
     set items(value: T[]);
     set itemActions(value: TableItemAction<T>[]);
     set columns(value: IAnyTableColumn<T>[]);
-    set editingItem(value: T | null);
     set highlightedItemIds(value: string[]);
+    /** Reassign items as a pure reorder of the same set — preserves the current selection (unlike the `items` setter). */
+    reorderItems: (value: T[]) => void;
     updateStyles: (styles: Partial<TableStyles>) => void;
     setResolvedColumns: (columns: ResolvedColumn<T>[]) => void;
     private reconcileColumns;

package/dist/ui/table/table-model.svelte.js

@@ -1,6 +1,5 @@
 import { Css } from '../../core/css';
 import { createRepository } from '../../core/repository';
-import { Utils } from '../../core/utils';
 import { DynamicComponentModel } from '../dynamic-component';
 import { ResolvedColumn } from './table-column-models.svelte';
 import { TableCheckboxHeader, TableHeader, TableHeaderSortable } from './table-headers';
@@ -15,7 +14,6 @@ export class TableModel {
     _selection;
     _preserveSelection = false;
     _dataProvider;
-    _editingItem = $state(null);
     _highlightedItemIds = $state.raw([]);
     constructor(init) {
         this._init = init;
@@ -64,9 +62,6 @@ export class TableModel {
     get selection() {
         return this._selection;
     }
-    get editingItem() {
-        return this._editingItem;
-    }
     get highlightedItemIds() {
         return this._highlightedItemIds;
     }
@@ -76,9 +71,6 @@ export class TableModel {
         if (!this._preserveSelection) {
             this._selection.clear();
         }
-        if (this._editingItem && !this._items.find((x) => x.id === this._editingItem?.id)) {
-            this._editingItem = null;
-        }
     }
     set itemActions(value) {
         this._itemActions = value;
@@ -86,17 +78,14 @@ export class TableModel {
     set columns(value) {
         this.reconcileColumns(value);
     }
-    set editingItem(value) {
-        if (!this._items.find((x) => x.id === value?.id)) {
-            this._editingItem = null;
-        }
-        else {
-            this._editingItem = structuredClone($state.snapshot(value));
-        }
-    }
     set highlightedItemIds(value) {
         this._highlightedItemIds = value;
     }
+    /** Reassign items as a pure reorder of the same set — preserves the current selection (unlike the `items` setter). */
+    reorderItems = (value) => {
+        this._items = value;
+        this._dataProvider.set(...value);
+    };
     updateStyles = (styles) => {
         Object.assign(this._styles, styles);
     };
@@ -157,22 +146,6 @@ export class TableModel {
                 props: { column: resolved }
             });
         };
-        const resolveEditorColumn = (column) => {
-            switch (column.type) {
-                case 'text-input':
-                case 'select': {
-                    const resolved = new ResolvedColumn(column);
-                    resolved.headerView = new DynamicComponentModel({
-                        component: TableHeader,
-                        props: { column: resolved }
-                    });
-                    return resolved;
-                }
-                default: {
-                    Utils.assertUnreachable(column);
-                }
-            }
-        };
         switch (column.type) {
             case 'checkbox': {
                 const resolved = new ResolvedColumn({
@@ -198,9 +171,6 @@ export class TableModel {
             case 'text': {
                 const resolved = new ResolvedColumn(column);
                 resolved.headerView = resolveSortableHeader(resolved);
-                if (column.editorColumn) {
-                    resolved.editorColumn = resolveEditorColumn(column.editorColumn);
-                }
                 return resolved;
             }
             default: {

package/dist/ui/table/table-view.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ResolvedColumn } from './table-column-models.svelte';
+import type { TableModel } from './table-model.svelte';
+import type { WithId } from './types';
+type SelectionCallbacks<T> = {
+    selectionChanged?: (e: T[]) => void;
+    itemsSelected?: (e: T[]) => void;
+    itemsDeselected?: (e: T[]) => void;
+};
+export declare const cssWidth: <T extends WithId>(column: ResolvedColumn<T>) => string;
+/** Shared presentation wiring for the table views: selection-event subscriptions + the debounced no-items placeholder. */
+export declare const createTableView: <T extends WithId>(model: () => TableModel<T>, on: () => SelectionCallbacks<T> | undefined) => {
+    readonly showNoItemsPlaceholder: boolean;
+};
+export {};

package/dist/ui/table/table-view.svelte.js

@@ -0,0 +1,32 @@
+import { untrack } from 'svelte';
+export const cssWidth = (column) => (column.fixedCssWidth ? `width: ${column.fixedCssWidth};` : 'width: auto;');
+/** Shared presentation wiring for the table views: selection-event subscriptions + the debounced no-items placeholder. */
+export const createTableView = (model, on) => {
+    let showNoItemsPlaceholder = $state(false);
+    let timeout = 0;
+    $effect(() => untrack(() => {
+        const selection = model().selection;
+        const subscriptions = [
+            selection.subscribeOnChange((values) => on()?.selectionChanged?.(values)),
+            selection.subscribeOnAdd((values) => on()?.itemsSelected?.(values)),
+            selection.subscribeOnRemove((values) => on()?.itemsDeselected?.(values))
+        ];
+        return () => subscriptions.forEach((unsubscribe) => unsubscribe());
+    }));
+    $effect(() => {
+        if (model().items.length) {
+            clearTimeout(timeout);
+            showNoItemsPlaceholder = false;
+            return;
+        }
+        timeout = window.setTimeout(() => {
+            showNoItemsPlaceholder = !model().items.length;
+        }, 700);
+        return () => clearTimeout(timeout);
+    });
+    return {
+        get showNoItemsPlaceholder() {
+            return showNoItemsPlaceholder;
+        }
+    };
+};

package/dist/ui/table/types.d.ts

@@ -3,18 +3,13 @@ import type { BadgeVariant } from '../badge';
 import type { ButtonSize, ButtonVariant } from '../button';
 import { DynamicComponentModel } from '../dynamic-component';
 import type { IconProp } from '../icon';
-import type { SelectOption } from '../select';
 import type { Snippet } from 'svelte';
-import type { ISchema } from 'yup';
 export type WithId = {
     id: string;
 };
-export type IAnyTableColumn<T> = {
-    [P in keyof T]: IOneOfTableColumn<T, P>;
-}[keyof T];
-export type IOneOfTableColumn<T, K extends keyof T> = ITableBadgeColumn<T> | ITableButtonColumn<T> | ITableByColumn<T> | ITableCheckboxColumn | ITableCustomColumn<T> | ITableIconColumn<T> | ITableImageColumn<T> | ITableMoveRowColumn | ITableSelectColumn<T, K> | ITableSnippetColumn<T> | ITableTextColumn<T> | ITableTextInputColumn<T>;
-export type IEditorColumn<T> = ITableTextInputColumn<T> | ITableSelectColumn<T, keyof T>;
-export type TableColumnType = 'actions' | 'badge' | 'button' | 'by' | 'checkbox' | 'custom' | 'icon' | 'image' | 'move-row' | 'select' | 'snippet' | 'text' | 'text-input';
+export type IAnyTableColumn<T> = IOneOfTableColumn<T>;
+export type IOneOfTableColumn<T> = ITableBadgeColumn<T> | ITableButtonColumn<T> | ITableByColumn<T> | ITableCheckboxColumn | ITableCustomColumn<T> | ITableIconColumn<T> | ITableImageColumn<T> | ITableMoveRowColumn | ITableSnippetColumn<T> | ITableTextColumn<T>;
+export type TableColumnType = 'actions' | 'badge' | 'button' | 'by' | 'checkbox' | 'custom' | 'icon' | 'image' | 'move-row' | 'snippet' | 'text';
 interface ITableColumnBase {
     type: TableColumnType;
     fixedCssWidth?: string;
@@ -45,7 +40,8 @@ export interface ITableBadgeColumn<T> extends ITableColumn<T> {
 }
 export interface ITableByColumn<T> extends ITableColumn<T> {
     type: 'by';
-    valueFactory?: ((item: T) => Date) | null;
+    /** The "when" — an ISO date string. */
+    valueFactory?: ((item: T) => string) | null;
     byValueFactory?: ((item: T) => {
         id: string;
         name: string;
@@ -92,17 +88,6 @@ export interface ITableMoveRowColumn extends ITableColumnBase {
     type: 'move-row';
     disableFactory?: (() => boolean) | null;
 }
-export interface ITableSelectColumn<T, K extends keyof T> extends ITableColumn<T> {
-    id: K;
-    type: 'select';
-    valueFactory?: ((item: T) => T[K]) | null;
-    optionsFactory: (item: T) => SelectOption<T[K]>[];
-    placeholder?: string | null;
-    disabledFactory?: ((item: T) => boolean) | null;
-    visibilityFactory?: ((item: T) => boolean) | null;
-    clearable?: boolean;
-    onSelected: (item: T, value: T[K] | null) => void;
-}
 export interface ITableSnippetColumn<T> extends ITableColumn<T> {
     type: 'snippet';
     /** Render-prop snippet receiving the row item. Use for rich / custom cell composition without creating a separate cell component. */
@@ -114,14 +99,6 @@ export interface ITableTextColumn<T> extends ITableColumn<T> {
     /** @default 1 */
     maxLines?: number | 'single-line-no-trim' | null;
     valueFactory?: ((item: T) => string) | null;
-    editorColumn?: IEditorColumn<T> | null;
-}
-export interface ITableTextInputColumn<T> extends ITableColumn<T> {
-    type: 'text-input';
-    inputType?: 'text' | 'number' | null;
-    validationSchema?: ISchema<unknown> | null;
-    onValidated?: ((item: T, error: string) => void) | null;
-    onInput?: ((item: T, value: string) => void) | null;
 }
 export type TableTextColumnFormat = 'text' | 'html' | 'money' | 'date' | 'date-time';
 export type TableImageColumnFormat = 'circle' | 'square-contain' | 'square-cover';

package/dist/ui/toggle/cmp.toggle.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">const { checked, size = 'md', disabled = false, layout = 'spread', label, sublabel, title, name, on } = $props();
+<script lang="ts">const { checked, size = 'md', disabled = false, presentational = false, layout = 'spread', label, sublabel, title, name, on } = $props();
 const hasLabel = $derived(label !== undefined || sublabel !== undefined);
 const ariaLabel = $derived(typeof label === 'string' ? label : name);
 const handleClick = (event) => {
@@ -12,19 +12,25 @@ export {};
 </script>
 
 {#snippet switchControl()}
-  <button
-    type="button"
-    class="toggle toggle--{size}"
-    class:toggle--on={checked}
-    class:toggle--disabled={disabled}
-    role="switch"
-    aria-checked={checked}
-    aria-label={ariaLabel}
-    title={hasLabel ? undefined : title}
-    disabled={disabled}
-    onclick={handleClick}>
-    <span class="toggle__thumb" aria-hidden="true"></span>
-  </button>
+  {#if presentational}
+    <span class="toggle toggle--{size}" class:toggle--on={checked} class:toggle--disabled={disabled} aria-hidden="true">
+      <span class="toggle__thumb"></span>
+    </span>
+  {:else}
+    <button
+      type="button"
+      class="toggle toggle--{size}"
+      class:toggle--on={checked}
+      class:toggle--disabled={disabled}
+      role="switch"
+      aria-checked={checked}
+      aria-label={ariaLabel}
+      title={hasLabel ? undefined : title}
+      disabled={disabled}
+      onclick={handleClick}>
+      <span class="toggle__thumb" aria-hidden="true"></span>
+    </button>
+  {/if}
 {/snippet}
 
 {#if hasLabel}
@@ -140,10 +146,10 @@ switch left + label right, intrinsic width).
 }
 
 .toggle {
-  --_toggle--track-width: var(--sc-kit--toggle--track-width, 2rem);
-  --_toggle--track-height: var(--sc-kit--toggle--track-height, 1.125rem);
-  --_toggle--thumb-size: var(--sc-kit--toggle--thumb-size, 0.875rem);
-  --_toggle--thumb-travel: var(--sc-kit--toggle--thumb-travel, 0.875rem);
+  --_toggle--track-width: var(--sc-kit--toggle--track-width, var(--_toggle--size-track-width, 2rem));
+  --_toggle--track-height: var(--sc-kit--toggle--track-height, var(--_toggle--size-track-height, 1.125rem));
+  --_toggle--thumb-size: var(--sc-kit--toggle--thumb-size, var(--_toggle--size-thumb-size, 0.875rem));
+  --_toggle--thumb-travel: var(--sc-kit--toggle--thumb-travel, var(--_toggle--size-thumb-travel, 0.875rem));
   --_toggle--thumb-offset: var(--sc-kit--toggle--thumb-offset, 0.125rem);
   --_toggle--thumb-translate: 0;
   --_toggle--background: var(--sc-kit--toggle--background, var(--sc-kit--color--border--strong));
@@ -166,16 +172,16 @@ switch left + label right, intrinsic width).
   outline-offset: 2px;
 }
 .toggle--sm {
-  --sc-kit--toggle--track-width: 1.625rem;
-  --sc-kit--toggle--track-height: 0.875rem;
-  --sc-kit--toggle--thumb-size: 0.625rem;
-  --sc-kit--toggle--thumb-travel: 0.75rem;
+  --_toggle--size-track-width: 1.625rem;
+  --_toggle--size-track-height: 0.875rem;
+  --_toggle--size-thumb-size: 0.625rem;
+  --_toggle--size-thumb-travel: 0.75rem;
 }
 .toggle--md {
-  --sc-kit--toggle--track-width: 2rem;
-  --sc-kit--toggle--track-height: 1.125rem;
-  --sc-kit--toggle--thumb-size: 0.875rem;
-  --sc-kit--toggle--thumb-travel: 0.875rem;
+  --_toggle--size-track-width: 2rem;
+  --_toggle--size-track-height: 1.125rem;
+  --_toggle--size-thumb-size: 0.875rem;
+  --_toggle--size-thumb-travel: 0.875rem;
 }
 .toggle--on {
   --sc-kit--toggle--background: var(--sc-kit--toggle--background--on, var(--sc-kit--color--accent));

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

@@ -4,6 +4,8 @@ type Props = {
     /** @default 'md' */
     size?: 'sm' | 'md';
     disabled?: boolean;
+    /** Render a non-interactive visual switch (a `<span>`, not a button) for embedding inside another interactive row that owns the click + semantics. @default false */
+    presentational?: boolean;
     /** Label position relative to the switch. `spread` = label left, switch right (settings-row). `inline` = switch left, label right (compact). @default 'spread' */
     layout?: 'spread' | 'inline';
     /** Label: plain text or a snippet for rich content. */

package/dist/ui/tree/cmp.tree-node-view.svelte

@@ -10,7 +10,7 @@ import IconCheckmarkCircle from '@fluentui/svg-icons/icons/checkmark_circle_20_f
 import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
 import IconMoreVertical from '@fluentui/svg-icons/icons/more_vertical_20_regular.svg?raw';
 import { slide } from 'svelte/transition';
-let { node, nav, hideExpandIcon = false, level = 0, showSelectedCheckmark } = $props();
+let { node, keyboard, hideExpandIcon = false, level = 0, showSelectedCheckmark } = $props();
 let actionsOpened = $state(false);
 let dbClickTimeout = undefined;
 let dragExpandTimeout = undefined;
@@ -67,7 +67,6 @@ const handleDrop = (e) => {
 };
 const handleSelectNode = (e) => {
     e.stopPropagation();
-    nav.setActive(node);
     clearTimeout(dbClickTimeout);
     if (node.expandOnDoubleClick) {
         dbClickTimeout = window.setTimeout(() => {
@@ -80,7 +79,6 @@ const handleSelectNode = (e) => {
 };
 const handleExpandNode = (e) => {
     e.stopPropagation();
-    nav.setActive(node);
     if (node.expanded) {
         node.collapse();
     }
@@ -112,9 +110,7 @@ const handleMouseLeave = () => {
 <div
   class="tree-node"
   style={`--_tree-node--level: ${level}`}
-  id={nav.itemId(node)}
   role="treeitem"
-  tabindex="-1"
   aria-level={level + 1}
   aria-selected={node.selected}
   aria-expanded={children.length ? node.expanded : undefined}>
@@ -122,7 +118,6 @@ const handleMouseLeave = () => {
   <div
     class="tree-node__leaf"
     class:tree-node__leaf--active={node.selected}
-    class:tree-node__leaf--focused={nav.hasFocus && nav.activeId === node.id}
     class:tree-node__leaf--draggable={node.dragConfig}
     class:tree-node__leaf--expandable={children.length}
     class:tree-node__leaf--drag-over={isDraggedOver}
@@ -150,8 +145,15 @@ const handleMouseLeave = () => {
       </button>
     {/if}
 
-    <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
-    <div class="tree-node__anchor" onclick={handleSelectNode} ondblclick={handleExpandOnDoubleClick}>
+    <div
+      class="tree-node__anchor"
+      id={keyboard.anchorId(node)}
+      role="button"
+      tabindex={keyboard.currentId === node.id ? 0 : -1}
+      onclick={handleSelectNode}
+      ondblclick={handleExpandOnDoubleClick}
+      onfocusin={() => keyboard.setFocused(node.id)}
+      onkeydown={(e) => keyboard.handleKeydown(node, e)}>
       {#if !node.hideIcon}
         <div class="tree-node__icon" class:tree-node__icon--active={node.selected}>
           {#if node.icon}
@@ -196,7 +198,7 @@ const handleMouseLeave = () => {
   {#if node.expanded && children.length}
     <div transition:slide={{ duration: transitionDuration.base }} class="tree-node__children" role="group">
       {#each children as child (child.id)}
-        <Self node={child} nav={nav} level={level + 1} hideExpandIcon={hideChildExpandIcon} showSelectedCheckmark={showSelectedCheckmark} />
+        <Self node={child} keyboard={keyboard} level={level + 1} hideExpandIcon={hideChildExpandIcon} showSelectedCheckmark={showSelectedCheckmark} />
       {/each}
     </div>
   {/if}
@@ -235,7 +237,10 @@ const handleMouseLeave = () => {
   color: var(--sc-kit--color--text--primary);
   background: var(--sc-kit--color--bg--active);
 }
-.tree-node__leaf--focused {
+.tree-node__leaf:focus-within {
+  --_tree-node--action-opacity: 1;
+}
+.tree-node__leaf:has(.tree-node__anchor:focus-visible) {
   outline: 2px solid var(--sc-kit--color--border--focus);
   outline-offset: -2px;
 }
@@ -280,6 +285,7 @@ const handleMouseLeave = () => {
   gap: var(--sc-kit--space--2);
   min-width: 0;
   padding: var(--_tree-node--padding-block) 0;
+  outline: none;
 }
 .tree-node__icon {
   --sc-kit--icon--size: var(--_tree-node--icon-size);

package/dist/ui/tree/cmp.tree-node-view.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { TreeNavigation } from './tree-navigation.svelte';
+import type { TreeKeyboard } from './tree-keyboard.svelte';
 import { type TreeNode } from './tree-node.svelte';
 type Props = {
     node: TreeNode;
-    nav: TreeNavigation;
+    keyboard: TreeKeyboard;
     hideExpandIcon?: boolean;
     level?: number;
     showSelectedCheckmark?: boolean;