@streamscloud/kit 0.9.18 → 0.10.0

package/dist/ui/badge/cmp.badge.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">const { variant = 'neutral', size = 'md', style = 'soft', children } = $props();
+<script lang="ts">const { variant = 'neutral', size = 'md', style = 'soft', fullWidth = false, children } = $props();
 export {};
 </script>
 
-<span class="badge badge--{size} badge--{variant}-{style}">
-  {@render children()}
+<span class="badge badge--{size} badge--{variant}-{style}" class:badge--full={fullWidth}>
+  <span class="badge__content">{@render children()}</span>
 </span>
 
 <!--
@@ -39,10 +39,18 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
   font-size: var(--_badge--font-size);
   font-weight: var(--_badge--font-weight);
   line-height: 1.4;
-  white-space: nowrap;
+  max-width: 100%;
+}
+.badge__content {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100%;
+  white-space: nowrap;
+}
+.badge--full {
+  display: flex;
+  width: 100%;
+  justify-content: center;
 }
 .badge--sm {
   --_badge--padding-block: var(--sc-kit--badge--padding-block, 0.25rem);

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

@@ -7,6 +7,8 @@ type Props = {
     size?: 'sm' | 'md';
     /** Filled chip vs soft-tinted fill @default 'soft' */
     style?: 'soft' | 'solid';
+    /** Stretch to fill the parent's inline axis, centering the content. @default false */
+    fullWidth?: boolean;
     children: Snippet;
 };
 /**

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

@@ -104,7 +104,7 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
 | `--sc-kit--button--font-size` | Label font size | per size |
 | `--sc-kit--button--gap` | Gap between icon and label | per size |
 | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
-| `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
+| `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--regular)` |
 | `--sc-kit--button--width` | Explicit width | `fit-content` |
 | `--sc-kit--button--min-width` | Minimum width | `0` |
 | `--sc-kit--button--max-width` | Maximum width | `100%` |
@@ -126,7 +126,7 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
   --_btn--min-width: var(--sc-kit--button--min-width, 0);
   --_btn--max-width: var(--sc-kit--button--max-width, 100%);
   --_btn--border-radius: var(--sc-kit--button--border-radius, var(--sc-kit--radius--md));
-  --_btn--font-weight: var(--sc-kit--button--font-weight, var(--sc-kit--font-weight--medium));
+  --_btn--font-weight: var(--sc-kit--button--font-weight, var(--sc-kit--font-weight--regular));
   box-sizing: border-box;
   display: flex;
   align-items: center;

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

@@ -62,7 +62,7 @@ type Props = ButtonModeProps | AnchorModeProps;
  * | `--sc-kit--button--font-size` | Label font size | per size |
  * | `--sc-kit--button--gap` | Gap between icon and label | per size |
  * | `--sc-kit--button--border-radius` | Corner rounding | `var(--sc-kit--radius--md)` |
- * | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--medium)` |
+ * | `--sc-kit--button--font-weight` | Font weight | `var(--sc-kit--font-weight--regular)` |
  * | `--sc-kit--button--width` | Explicit width | `fit-content` |
  * | `--sc-kit--button--min-width` | Minimum width | `0` |
  * | `--sc-kit--button--max-width` | Maximum width | `100%` |

package/dist/ui/select/_select-trigger.scss

@@ -130,10 +130,15 @@
       width: 0;
       flex: 0;
     }
+
+    &--no-search {
+      caret-color: transparent;
+      cursor: pointer;
+    }
   }
 
   &__selection {
-    flex: 1;
+    flex: 0 1 auto;
     min-width: 0;
     @include mixins.ellipsis;
   }

package/dist/ui/select/cmp.multiselect-async.svelte.d.ts

@@ -5,7 +5,7 @@ export type MultiselectAsyncInstance = {
 };
 import type { MultiselectBaseProps, SelectOption } from './types';
 declare function $$render<T>(): {
-    props: Omit<MultiselectBaseProps<T>, "on" | "loadOptions" | "groupHeader" | "selectionMode" | "parentSource"> & {
+    props: Omit<MultiselectBaseProps<T>, "on" | "loadOptions" | "searchable" | "groupHeader" | "selectionMode" | "parentSource"> & {
         /** Server-side fetcher. Invoked with an empty query on open (initial page) and again — debounced — on every keystroke. Expected to return a flat list (no groups). */
         loadOptions: (query: string) => Promise<SelectOption<T>[]>;
         on?: {

package/dist/ui/select/cmp.multiselect-tree.svelte

@@ -4,7 +4,7 @@
 <script lang="ts" generics="T">import { default as MultiselectBase } from './multiselect-base.svelte';
 import { buildFuseIndex, defaultCompare, runFuseSearch } from './select-internals';
 import { isSelectGroup } from './types';
-const { options, value, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, groupHeader = 'toggle-all', selectionMode = 'children-only', selectedDisplay = 'checkbox', canCreate, icon, chevronIcon, optionSnippet, selectionSnippet, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+const { options, value, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = false, groupHeader = 'toggle-all', selectionMode = 'children-only', selectedDisplay = 'checkbox', canCreate, icon, chevronIcon, optionSnippet, selectionSnippet, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
 const fuse = $derived(buildFuseIndex(options));
 const loadOptionsShim = (q) => Promise.resolve(runFuseSearch(fuse, q, options));
 // Full unfiltered group list — fed to the create-with-parent section's parent picker so it
@@ -54,6 +54,7 @@ $effect(() => {
   placeholder={placeholder}
   disabled={disabled}
   readonly={readonly}
+  searchable={searchable}
   inert={inert}
   error={error}
   borderless={borderless}

package/dist/ui/select/cmp.multiselect-tree.svelte.d.ts

@@ -31,6 +31,8 @@ declare function $$render<T>(): {
         error?: boolean;
         /** Removes the field border. @default false */
         borderless?: boolean;
+        /** When true, typing filters the tree; when false, it is a click/keyboard-only picker. @default false */
+        searchable?: boolean;
         /**
          * Group-header behavior:
          * - `'static'` — non-interactive label.

package/dist/ui/select/cmp.singleselect-async.svelte

@@ -9,7 +9,7 @@ import { defaultCompare } from './select-internals';
 import { default as SelectListbox } from './select-listbox.svelte';
 import { SingleselectLocalization } from './singleselect-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_16_regular.svg?raw';
-const { loadOptions, debounceMs = 400, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, groupHeader = 'static', compare = defaultCompare, canCreate, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const { loadOptions, debounceMs = 400, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', compare = defaultCompare, canCreate, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
 const localization = new SingleselectLocalization();
 const selectedOption = $derived(mode.value ?? null);
 const selectionLabel = $derived(selectedOption?.label ?? '');
@@ -22,6 +22,7 @@ const core = createSelectCore({
     loadOptions: (q) => loadOptions(q),
     getDebounceMs: () => debounceMs,
     getCompare: () => compare,
+    getSearchable: () => searchable,
     getCanCreate: () => canCreate,
     getGroupHeader: () => groupHeader,
     isPicked: (option) => selectedOption !== null && compare(option.value, selectedOption.value),
@@ -89,6 +90,7 @@ const showClear = $derived(mode.clearable && hasValue && isInteractive && !core.
     bind:this={inputEl}
     class="singleselect__input"
     class:singleselect__input--hidden={selectionSnippet && selectedOption && !core.isOpen}
+    class:singleselect__input--no-search={!searchable}
     type="text"
     role="combobox"
     aria-haspopup="listbox"
@@ -290,8 +292,12 @@ background--hover}`.
   width: 0;
   flex: 0;
 }
+.singleselect__input--no-search {
+  caret-color: transparent;
+  cursor: pointer;
+}
 .singleselect__selection {
-  flex: 1;
+  flex: 0 1 auto;
   min-width: 0;
   text-overflow: ellipsis;
   max-width: 100%;

package/dist/ui/select/cmp.singleselect-async.svelte.d.ts

@@ -12,6 +12,8 @@ declare function $$render<T>(): {
         loadOptions: (query: string) => Promise<SelectItem<T>[]>;
         /** Debounce window for `loadOptions` while typing. @default 400 */
         debounceMs?: number;
+        /** Internal — set by the sync `Singleselect` wrapper. Async typeahead is always searchable. @default true */
+        searchable?: boolean;
     } & {
         /** Discriminator — `true` enables the X clear button and allows `value` to be `null`. */
         clearable: true;
@@ -28,6 +30,8 @@ declare function $$render<T>(): {
         loadOptions: (query: string) => Promise<SelectItem<T>[]>;
         /** Debounce window for `loadOptions` while typing. @default 400 */
         debounceMs?: number;
+        /** Internal — set by the sync `Singleselect` wrapper. Async typeahead is always searchable. @default true */
+        searchable?: boolean;
     } & {
         /** Discriminator — `false` removes the X clear button; `value` must always be a non-null `SelectOption<T>`. */
         clearable: false;

package/dist/ui/select/cmp.singleselect.svelte

@@ -4,7 +4,7 @@
 <script lang="ts" generics="T">import { default as SingleselectAsync } from './cmp.singleselect-async.svelte';
 import { buildFuseIndex, defaultCompare, runFuseSearch } from './select-internals';
 import { isSelectGroup } from './types';
-const { options, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, groupHeader = 'static', canCreate, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const { options, compare = defaultCompare, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', canCreate, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
 const fuse = $derived(buildFuseIndex(options));
 const loadOptionsShim = (q) => Promise.resolve(runFuseSearch(fuse, q, options));
 const resolvedValue = $derived.by(() => {
@@ -52,6 +52,7 @@ $effect(() => {
     inert={inert}
     error={error}
     borderless={borderless}
+    searchable={searchable}
     groupHeader={groupHeader}
     canCreate={canCreate}
     icon={icon}
@@ -84,6 +85,7 @@ $effect(() => {
     inert={inert}
     error={error}
     borderless={borderless}
+    searchable={searchable}
     groupHeader={groupHeader}
     canCreate={canCreate}
     icon={icon}
@@ -105,8 +107,9 @@ $effect(() => {
 
 <!--
 @component
-Singleselect — always-searchable single-value picker for static options. Click or type to
-open; typing filters via Fuse fuzzy match. Internally proxies to `SingleselectAsync` with a
+Singleselect — single-value picker for static options. Searchable by default (click or type
+to open; typing filters via Fuse fuzzy match); pass `searchable={false}` for a click/keyboard-only
+picker with no filter input. Internally proxies to `SingleselectAsync` with a
 synchronous `Promise.resolve` `loadOptions` shim — visual behavior, accessibility, 600ms
 spinner gate and race-prevention are inherited verbatim. `clearable` is a required
 discriminator: `true` allows `null` and shows the X clear button; `false` requires non-null `T`.

package/dist/ui/select/cmp.singleselect.svelte.d.ts

@@ -8,6 +8,8 @@ declare function $$render<T>(): {
     props: (SingleselectCommonProps<T> & {
         /** Static option list (or grouped). Fuse filters in-memory on every keystroke — no debounce. */
         options: SelectItem<T>[];
+        /** When true, typing filters the options; when false, it is a click/keyboard-only picker. @default true */
+        searchable?: boolean;
     } & {
         /** Discriminator — `true` enables the X clear button and allows `value` to be `null`. */
         clearable: true;
@@ -22,6 +24,8 @@ declare function $$render<T>(): {
     }) | (SingleselectCommonProps<T> & {
         /** Static option list (or grouped). Fuse filters in-memory on every keystroke — no debounce. */
         options: SelectItem<T>[];
+        /** When true, typing filters the options; when false, it is a click/keyboard-only picker. @default true */
+        searchable?: boolean;
     } & {
         /** Discriminator — `false` hides the X button; `value` must always be a non-null `T`. */
         clearable: false;
@@ -62,8 +66,9 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
- * Singleselect — always-searchable single-value picker for static options. Click or type to
- * open; typing filters via Fuse fuzzy match. Internally proxies to `SingleselectAsync` with a
+ * Singleselect — single-value picker for static options. Searchable by default (click or type
+ * to open; typing filters via Fuse fuzzy match); pass `searchable={false}` for a click/keyboard-only
+ * picker with no filter input. Internally proxies to `SingleselectAsync` with a
  * synchronous `Promise.resolve` `loadOptions` shim — visual behavior, accessibility, 600ms
  * spinner gate and race-prevention are inherited verbatim. `clearable` is a required
  * discriminator: `true` allows `null` and shows the X clear button; `false` requires non-null `T`.

package/dist/ui/select/multiselect-base.svelte

@@ -13,7 +13,7 @@ import { default as SelectListbox } from './select-listbox.svelte';
 import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_16_regular.svg?raw';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_16_regular.svg?raw';
 import { dndzone } from 'svelte-dnd-action';
-const { loadOptions, debounceMs = 400, value, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, groupHeader = 'static', compare = defaultCompare, selectionMode = 'children-only', selectedDisplay = 'checkmark', canCreate, chipMode = 'inline', reorderable = false, maxVisible = Infinity, showFullItem = false, chipVariant, showChevron = true, hideSelected = false, icon, chevronIcon, optionSnippet, chipSnippet, selectionSnippet, parentSource, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+const { loadOptions, debounceMs = 400, value, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, searchable = true, groupHeader = 'static', compare = defaultCompare, selectionMode = 'children-only', selectedDisplay = 'checkmark', canCreate, chipMode = 'inline', reorderable = false, maxVisible = Infinity, showFullItem = false, chipVariant, showChevron = true, hideSelected = false, icon, chevronIcon, optionSnippet, chipSnippet, selectionSnippet, parentSource, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
 const localization = new MultiselectLocalization();
 const isPicked = (v) => value.some((existing) => compare(existing.value, v));
 const hasValue = $derived(value.length > 0);
@@ -34,6 +34,7 @@ const core = createSelectCore({
     loadOptions: (q) => loadOptions(q),
     getDebounceMs: () => debounceMs,
     getCompare: () => compare,
+    getSearchable: () => searchable,
     getCanCreate: () => canCreate,
     getHideCreateRow: () => showCreateSection,
     getGroupHeader: () => groupHeader,
@@ -215,6 +216,7 @@ const handleDndFinalize = (e) => {
     <input
       bind:this={inputEl}
       class="multiselect-trigger__input"
+      class:multiselect-trigger__input--no-search={!searchable}
       type="text"
       role="combobox"
       aria-haspopup="listbox"
@@ -506,8 +508,12 @@ padding-inline, font-size, gap, max-width, remove-color, remove-color--hover}`.
   width: 0;
   flex: 0;
 }
+.multiselect-trigger__input--no-search {
+  caret-color: transparent;
+  cursor: pointer;
+}
 .multiselect-trigger__selection {
-  flex: 1;
+  flex: 0 1 auto;
   min-width: 0;
   text-overflow: ellipsis;
   max-width: 100%;

package/dist/ui/select/select-core.svelte.d.ts

@@ -11,6 +11,8 @@ export type SelectCoreConfig<T> = {
     getDebounceMs?: () => number;
     /** Equality comparator for `T`. */
     getCompare: () => (a: T, b: T) => boolean;
+    /** When false, typing never enters filtering mode — the popover is a click/keyboard-only picker. @default true */
+    getSearchable?: () => boolean;
     /** Optional `canCreate` validator — presence enables creatable mode. */
     getCanCreate: () => ((q: string) => boolean) | undefined;
     /** When true, no `kind:'create'` row is emitted (the host renders its own create UI) — keyboard navigation must not reach a row the listbox doesn't show. @default false */

package/dist/ui/select/select-core.svelte.js

@@ -281,7 +281,7 @@ export function createSelectCore(config) {
         }
     };
     const handleInput = (e) => {
-        if (!config.getInteractive()) {
+        if (!config.getInteractive() || config.getSearchable?.() === false) {
             return;
         }
         const target = e.target;
@@ -327,11 +327,11 @@ export function createSelectCore(config) {
             closePopover();
             config.getInputEl()?.focus();
         }
-        else if (e.key === 'Backspace' && (!isFiltering || !query)) {
+        else if (e.key === 'Backspace' && (!isFiltering || !query) && config.getSearchable?.() !== false) {
             e.preventDefault();
             config.onClear();
         }
-        else if (!isFiltering && isPrintableKey(e)) {
+        else if (config.getSearchable?.() !== false && !isFiltering && isPrintableKey(e)) {
             e.preventDefault();
             isFiltering = true;
             query = e.key;

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

@@ -127,6 +127,8 @@ export type MultiselectBaseProps<T> = {
     error?: boolean;
     /** Removes the field border. @default false */
     borderless?: boolean;
+    /** When false, typing never enters filtering mode — the input stays the combobox anchor (focus/ARIA/keyboard) but is read-only. A click/keyboard-only picker. @default true */
+    searchable?: boolean;
     /**
      * Group-header behavior:
      * - `'static'` — non-interactive label (default).

package/package.json

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