npm - @streamscloud/kit - Versions diffs - 0.16.2 → 0.18.0 - Mend

@streamscloud/kit 0.16.2 → 0.18.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 (113) hide show

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

@@ -4,7 +4,15 @@ let { nodes, showSelectedCheckmark, children } = $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 handleFocusIn = (e) => {
+    nav.focus();
+    nav.keyboardActive = e.currentTarget.matches(':focus-visible');
+};
 const handleKeydown = (e) => {
+    // Only the container itself drives tree navigation; a focused descendant (e.g. the actions popover) keeps its own keys.
+    if (e.target !== e.currentTarget) {
+        return;
+    }
     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
@@ -20,7 +28,7 @@ const handleKeydown = (e) => {
     role="tree"
     tabindex="0"
     aria-activedescendant={nav.activeId ? `tree-item-${nav.activeId}` : undefined}
-    onfocusin={() => nav.focus()}
+    onfocusin={handleFocusIn}
     onfocusout={(e) => {
       if (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) {
         nav.blur();

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

@@ -2,7 +2,7 @@ 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). */

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

@@ -2,6 +2,8 @@ import type { TreeNode } from './tree-node.svelte';
 export declare class TreeNavigation {
     activeId: string | null;
     hasFocus: boolean;
+    /** True only while the active node was reached via keyboard — gates the focus ring (mouse selection shows background only). */
+    keyboardActive: boolean;
     private _getRoots;
     constructor(getRoots: () => readonly TreeNode[]);
     itemId(node: TreeNode): string;

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

@@ -1,6 +1,8 @@
 export class TreeNavigation {
     activeId = $state(null);
     hasFocus = $state(false);
+    /** True only while the active node was reached via keyboard — gates the focus ring (mouse selection shows background only). */
+    keyboardActive = $state(false);
     _getRoots;
     constructor(getRoots) {
         this._getRoots = getRoots;
@@ -31,6 +33,7 @@ export class TreeNavigation {
         if (!visible.length) {
             return;
         }
+        this.keyboardActive = true;
         const index = visible.findIndex((n) => n.id === this.activeId);
         const current = index < 0 ? null : visible[index];
         switch (e.key) {

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

@@ -2,8 +2,8 @@
 </script>
 <script lang="ts" generics="T extends Record<string, unknown>, K extends keyof T & string">import { Utils } from '../../core/utils';
-import { default as FieldError } from './cmp.field-error.svelte';
-let { handler, name, validateOn = ['input', 'change', 'blur'], debounceMs = 0, disableTouchedTracking = false, reserveErrorSpace = true, on, children } = $props();
+import { default as FieldFrame } from './field-frame.svelte';
+let { handler, name, validateOn = ['input', 'change', 'blur'], debounceMs = 0, disableTouchedTracking = false, reserveErrorSpace = false, on, children } = $props();
 // True between a value change and the next completed validation. Hides the stale error in the
 // UI without mutating handler.errors — the model keeps the last known result, the view just
 // doesn't trust it until the validator has caught up.
@@ -59,15 +59,15 @@ const field = $derived({
 });
 </script>
-<FieldError error={showErrors ? handler.errors[name] : null} reserveErrorSpace={reserveErrorSpace}>
+<FieldFrame error={showErrors ? handler.errors[name] : null} reserveErrorSpace={reserveErrorSpace}>
   {@render children(field)}
-</FieldError>
+</FieldFrame>
 <!--
 @component
 Binds a form field to any kit input via a render-prop snippet. The base inputs stay unchanged;
 `Validatable` is the only place that knows about `FormValidationHandler`. Wraps children in an
-internal `FieldError` frame that reserves space for the error message so toggling doesn't shift
+internal `FieldFrame` that reserves space for the error message so toggling doesn't shift
 layout; `reserveErrorSpace={false}` drops the reserve — the message overlays content below.
 ### Usage

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

@@ -33,7 +33,7 @@ declare function $$render<T extends Record<string, unknown>, K extends keyof T &
         /**
          * Reserve space below the field for the error message. Turn off when a sibling must align to
          * the field's real bottom edge — the message then overlays whatever sits below the field.
-         * @default true
+         * @default false
          */
         reserveErrorSpace?: boolean;
         /**
@@ -70,7 +70,7 @@ interface $$IsomorphicComponent {
 /**
  * Binds a form field to any kit input via a render-prop snippet. The base inputs stay unchanged;
  * `Validatable` is the only place that knows about `FormValidationHandler`. Wraps children in an
- * internal `FieldError` frame that reserves space for the error message so toggling doesn't shift
+ * internal `FieldFrame` that reserves space for the error message so toggling doesn't shift
  * layout; `reserveErrorSpace={false}` drops the reserve — the message overlays content below.
  *
  * ### Usage

package/dist/ui/validatable/cmp.validation-error.svelte CHANGED Viewed

@@ -1,11 +1,11 @@
-<script lang="ts" generics="T extends Record<string, unknown>">import { default as FieldError } from './cmp.field-error.svelte';
-let { name, validationResult, reserveErrorSpace = true, children } = $props();
+<script lang="ts" generics="T extends Record<string, unknown>">import { default as FieldFrame } from './field-frame.svelte';
+let { name, validationResult, reserveErrorSpace = false, children } = $props();
 const errorText = $derived(validationResult?.errors[name] ?? null);
 </script>
-<FieldError error={errorText} reserveErrorSpace={reserveErrorSpace}>
+<FieldFrame error={errorText} reserveErrorSpace={reserveErrorSpace}>
   {@render children()}
-</FieldError>
+</FieldFrame>
 <!--
 @component

package/dist/ui/validatable/cmp.validation-error.svelte.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ declare function $$render<T extends Record<string, unknown>>(): {
         /**
          * Reserve space below the field for the error message. Turn off when a sibling must align to
          * the field's real bottom edge — the message then overlays whatever sits below the field.
-         * @default true
+         * @default false
          */
         reserveErrorSpace?: boolean;
         children: Snippet;

package/dist/ui/validatable/{cmp.field-error.svelte → field-frame.svelte} RENAMED Viewed

@@ -1,11 +1,11 @@
-<script lang="ts">let { error, reserveErrorSpace = true, children } = $props();
+<script lang="ts">let { error, reserveErrorSpace = false, children } = $props();
 export {};
 </script>
-<div class="field-error" class:field-error--errored={!!error} class:field-error--no-reserve={!reserveErrorSpace}>
+<div class="field-frame" class:field-frame--errored={!!error} class:field-frame--no-reserve={!reserveErrorSpace}>
   {@render children()}
   {#if error}
-    <small class="field-error__message">{error}</small>
+    <small class="field-frame__message">{error}</small>
   {/if}
 </div>
@@ -20,15 +20,15 @@ any other field-shaped kit consumer that needs the same visual contract).
 Not exported from `index.ts` — for kit-internal use only.
 -->
-<style>.field-error {
+<style>.field-frame {
   position: relative;
   margin-bottom: 1.1em;
   display: block;
 }
-.field-error--no-reserve {
+.field-frame--no-reserve {
   margin-bottom: 0;
 }
-.field-error__message {
+.field-frame__message {
   position: absolute;
   top: calc(100% + 0.1em);
   left: 0;

package/dist/ui/validatable/{cmp.field-error.svelte.d.ts → field-frame.svelte.d.ts} RENAMED Viewed

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 type Props = {
     /** Error message to display below the field. Falsy hides the message and the `--errored` flag. */
     error?: string | null | undefined;
-    /** Reserve space below the field for the error message. Off drops the reserve — the message overlays content below. @default true */
+    /** Reserve space below the field for the error message. Off drops the reserve — the message overlays content below. @default false */
     reserveErrorSpace?: boolean;
     children: Snippet;
 };
@@ -15,6 +15,6 @@ type Props = {
  *
  * Not exported from `index.ts` — for kit-internal use only.
  */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;
+declare const FieldFrame: import("svelte").Component<Props, {}, "">;
+type FieldFrame = ReturnType<typeof FieldFrame>;
+export default FieldFrame;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.16.2",
+  "version": "0.18.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;

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

@@ -1,57 +0,0 @@
-<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-kit--color--text--primary)` |
-| `--sc-kit--toolbar-panel--divider--color` | Divider line color | `var(--sc-kit--color--border)` |
--->
-<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-kit--color--text--primary));
-  --_toolbar-panel--divider--color: var(--sc-kit--toolbar-panel--divider--color, var(--sc-kit--color--border));
-  width: var(--_toolbar-panel--width);
-  padding: var(--sc-kit--space--6);
-}
-.toolbar-panel__title {
-  font-size: var(--sc-kit--font-size--md);
-  font-weight: var(--sc-kit--font-weight--semibold);
-  line-height: var(--sc-kit--line-height--md);
-  color: var(--_toolbar-panel--title--color);
-  margin-bottom: var(--sc-kit--space--2);
-  min-width: 0;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-}
-.toolbar-panel__body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sc-kit--space--4);
-  padding-block: var(--sc-kit--space--2);
-}
-.toolbar-panel__divider {
-  height: 1px;
-  background: var(--_toolbar-panel--divider--color);
-  margin: var(--sc-kit--space--1) var(--sc-kit--space--2);
-}</style>

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

@@ -1,19 +0,0 @@
-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-kit--color--text--primary)` |
- * | `--sc-kit--toolbar-panel--divider--color` | Divider line color | `var(--sc-kit--color--border)` |
- */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

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

@@ -1,16 +0,0 @@
-<script lang="ts">import { Toggle } from '../toggle';
-const { checked, children, on } = $props();
-</script>
-<div class="toolbar-toggle-item">
-  <Toggle checked={checked} label={children} layout="spread" on={{ change: (value) => on?.change?.(value) }} />
-</div>
-<!--
-@component
-A toggle item for toolbar panels. Wraps the kit Toggle with toolbar-appropriate padding.
--->
-<style>.toolbar-toggle-item {
-  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
-}</style>

package/dist/ui/page-toolbar/cmp.toolbar-toggle-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 toggle item for toolbar panels. Wraps the kit Toggle with toolbar-appropriate padding. */
-declare const Cmp: import("svelte").Component<Props, {}, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;

package/dist/ui/table/table-cells/table-select-cell.svelte DELETED Viewed

@@ -1,28 +0,0 @@
-<script lang="ts" generics="T extends {id: string}">import { Singleselect } from '../../select';
-let { item, column } = $props();
-const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : item[column.id]);
-const onSelected = (value) => {
-    column.onSelected(item, value);
-    item = item;
-};
-</script>
-{#if !column.visibilityFactory || column.visibilityFactory(item)}
-  {#if column.clearable}
-    <Singleselect
-      clearable
-      placeholder={column.placeholder || ' '}
-      value={getValueForColumn(column, item)}
-      options={column.optionsFactory(item)}
-      disabled={(column.disabledFactory && column.disabledFactory(item)) || false}
-      on={{ change: (v) => onSelected(v) }} />
-  {:else}
-    <Singleselect
-      clearable={false}
-      placeholder={column.placeholder || ' '}
-      value={getValueForColumn(column, item)}
-      options={column.optionsFactory(item)}
-      disabled={(column.disabledFactory && column.disabledFactory(item)) || false}
-      on={{ change: (v) => onSelected(v) }} />
-  {/if}
-{/if}