@streamscloud/kit 0.10.7-1781507721211 → 0.10.7-1781512309325

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

@@ -1,21 +1,24 @@
-<script lang="ts">const { variant = 'neutral', size = 'md', style = 'soft', fullWidth = false, children } = $props();
-export {};
+<script lang="ts">import { IconSlot } from '../icon';
+const { variant = 'neutral', size = 'md', style = 'soft', fullWidth = false, icon, children } = $props();
 </script>
 
 <span class="badge badge--{size} badge--{variant}-{style}" class:badge--full={fullWidth}>
+  {#if icon}
+    <span class="badge__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+  {/if}
   <span class="badge__content">{@render children()}</span>
 </span>
 
 <!--
 @component
-Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content.
+Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content. Optional leading `icon` renders in its own slot; the text content keeps its own ellipsis when it overflows.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--badge--color` | Text color | per variant + style |
 | `--sc-kit--badge--background` | Background color | per variant + style |
-| `--sc-kit--badge--padding-block` | Vertical padding | per size |
+| `--sc-kit--badge--height` | Badge height | per size (20 / 24px) |
 | `--sc-kit--badge--padding-inline` | Horizontal padding | `0.875rem 0.75rem` |
 | `--sc-kit--badge--border-radius` | Corner radius | `var(--sc-kit--radius--pill)` |
 | `--sc-kit--badge--font-size` | Content font size | per size |
@@ -31,16 +34,21 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
   display: inline-flex;
   align-items: center;
   gap: var(--_badge--gap);
-  padding-block: var(--_badge--padding-block);
+  block-size: var(--_badge--height);
   padding-inline: var(--_badge--padding-inline);
   border-radius: var(--_badge--border-radius);
   color: var(--_badge--color);
   background: var(--_badge--background);
   font-size: var(--_badge--font-size);
   font-weight: var(--_badge--font-weight);
-  line-height: 1.4;
+  line-height: var(--sc-kit--leading--tight);
   max-width: 100%;
 }
+.badge__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
 .badge__content {
   min-width: 0;
   overflow: hidden;
@@ -53,11 +61,11 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
   justify-content: center;
 }
 .badge--sm {
-  --_badge--padding-block: var(--sc-kit--badge--padding-block, 0.25rem);
+  --_badge--height: var(--sc-kit--badge--height, 1.25rem);
   --_badge--font-size: var(--sc-kit--badge--font-size, 0.625rem);
 }
 .badge--md {
-  --_badge--padding-block: var(--sc-kit--badge--padding-block, 0.375rem);
+  --_badge--height: var(--sc-kit--badge--height, 1.5rem);
   --_badge--font-size: var(--sc-kit--badge--font-size, var(--sc-kit--font-size--xs));
 }
 .badge--neutral-soft {

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

@@ -1,3 +1,4 @@
+import { type IconProp } from '../icon';
 import type { BadgeVariant } from './types';
 import type { Snippet } from 'svelte';
 type Props = {
@@ -9,17 +10,19 @@ type Props = {
     style?: 'soft' | 'solid';
     /** Stretch to fill the parent's inline axis, centering the content. @default false */
     fullWidth?: boolean;
+    /** Optional leading icon. */
+    icon?: IconProp;
     children: Snippet;
 };
 /**
- * Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content.
+ * Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content. Optional leading `icon` renders in its own slot; the text content keeps its own ellipsis when it overflows.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--badge--color` | Text color | per variant + style |
  * | `--sc-kit--badge--background` | Background color | per variant + style |
- * | `--sc-kit--badge--padding-block` | Vertical padding | per size |
+ * | `--sc-kit--badge--height` | Badge height | per size (20 / 24px) |
  * | `--sc-kit--badge--padding-inline` | Horizontal padding | `0.875rem 0.75rem` |
  * | `--sc-kit--badge--border-radius` | Corner radius | `var(--sc-kit--radius--pill)` |
  * | `--sc-kit--badge--font-size` | Content font size | per size |

package/dist/ui/grid-card/fields/cmp.grid-card-badge-field.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">import { Badge } from '../../badge';
-import { IconSlot } from '../../icon';
 import GridCardField from './cmp.grid-card-field.svelte';
 const { label, text, variant = 'neutral', style = 'soft', icon } = $props();
 </script>
 
 <GridCardField label={label}>
-  <Badge variant={variant} style={style} size="sm">
-    {#if icon}
-      <span class="grid-card-badge-field__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
-    {/if}
-    {text}
-  </Badge>
+  <span class="grid-card-badge-field">
+    <Badge variant={variant} style={style} size="sm" icon={icon}>
+      {text}
+    </Badge>
+  </span>
 </GridCardField>
 
 <!--
@@ -20,9 +18,7 @@ inside a `<GridCardField>` so it aligns with text rows. Use for content status,
 plan / tier indicators, etc.
 -->
 
-<style>.grid-card-badge-field__icon {
-  display: inline-flex;
-  align-items: center;
+<style>.grid-card-badge-field {
+  display: contents;
   --sc-kit--icon--size: 0.875em;
-  --sc-kit--icon--color: currentColor;
 }</style>

package/dist/ui/grid-card/fields/cmp.grid-card-badge-field.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { BadgeVariant } from '../../badge';
-import { type IconProp } from '../../icon';
+import type { IconProp } from '../../icon';
 type Props = {
     label: string;
     text: string;

package/dist/ui/select/select-internals.d.ts

@@ -25,9 +25,14 @@ export declare const buildFuseIndex: <T>(items: SelectItem<T>[]) => Fuse<FlatOpt
  * shape so the core's group-header logic keeps working. Empty query returns the original
  * items untouched.
  *
+ * Results are ordered by relevance, not by the original list order: matches rank
+ * prefix > substring > scattered-fuzzy (the Fuse score breaks ties within a tier), groups
+ * are ordered by their best hit, and options keep that order inside each group. Scattered
+ * fuzzy hits are a typo fallback only — they are dropped whenever any prefix/substring hit
+ * exists, so a real match is never buried under noise.
+ *
  * Group labels participate in the match: when a group's label fuzzy-matches the query, the
  * entire group (header + every child) is included regardless of whether the children
- * themselves matched. Matched children also bubble their parent group into the result so
- * the tree structure stays readable.
+ * themselves matched.
  */
 export declare const runFuseSearch: <T>(fuse: Fuse<FlatOption<T>>, query: string, items: SelectItem<T>[]) => SelectItem<T>[];

package/dist/ui/select/select-internals.js

@@ -52,56 +52,72 @@ export const moveHighlightIndex = (indices, current, delta) => {
  * locally inside their `loadOptions` shim. Async impls don't need this — the server does
  * the filtering.
  */
-export const buildFuseIndex = (items) => new Fuse(flattenItems(items), { keys: ['option.label'], threshold: 0.4, ignoreLocation: true });
+export const buildFuseIndex = (items) => new Fuse(flattenItems(items), { keys: ['option.label'], threshold: 0.4, ignoreLocation: true, includeScore: true });
 /**
  * Runs a fuzzy search via the Fuse index and reconstructs the grouped `SelectItem<T>[]`
  * shape so the core's group-header logic keeps working. Empty query returns the original
  * items untouched.
  *
+ * Results are ordered by relevance, not by the original list order: matches rank
+ * prefix > substring > scattered-fuzzy (the Fuse score breaks ties within a tier), groups
+ * are ordered by their best hit, and options keep that order inside each group. Scattered
+ * fuzzy hits are a typo fallback only — they are dropped whenever any prefix/substring hit
+ * exists, so a real match is never buried under noise.
+ *
  * Group labels participate in the match: when a group's label fuzzy-matches the query, the
  * entire group (header + every child) is included regardless of whether the children
- * themselves matched. Matched children also bubble their parent group into the result so
- * the tree structure stays readable.
+ * themselves matched.
  */
 export const runFuseSearch = (fuse, query, items) => {
     if (!query) {
         return items;
     }
-    const hits = fuse.search(query).map((r) => r.item);
+    const needle = query.toLowerCase();
+    const rankOf = (label, score) => {
+        const haystack = label.toLowerCase();
+        const tier = haystack.startsWith(needle) ? 0 : haystack.includes(needle) ? 1 : 2;
+        return tier + score;
+    };
+    const ranked = fuse
+        .search(query)
+        .map((r) => ({ flat: r.item, rank: rankOf(r.item.option.label, r.score ?? 1) }))
+        .sort((a, b) => a.rank - b.rank);
+    const hasExact = ranked.some((r) => r.rank < 2);
+    const matches = hasExact ? ranked.filter((r) => r.rank < 2) : ranked;
+    const groups = items.filter(isSelectGroup);
+    const labelMatches = new Set();
+    if (groups.length > 0) {
+        const labelFuse = new Fuse(groups.map((g) => ({ label: g.label })), { keys: ['label'], threshold: 0.4, ignoreLocation: true });
+        for (const hit of labelFuse.search(query)) {
+            labelMatches.add(hit.item.label);
+        }
+    }
     const groupBuckets = new Map();
+    const groupRank = new Map();
     const standalone = [];
-    for (const hit of hits) {
-        if (hit.group) {
-            const bucket = groupBuckets.get(hit.group);
+    matches.forEach(({ flat }, i) => {
+        if (flat.group) {
+            const bucket = groupBuckets.get(flat.group);
             if (bucket) {
-                bucket.push(hit.option);
+                bucket.push(flat.option);
             }
             else {
-                groupBuckets.set(hit.group, [hit.option]);
+                groupBuckets.set(flat.group, [flat.option]);
+                groupRank.set(flat.group, i);
             }
         }
         else {
-            standalone.push(hit.option);
+            standalone.push(flat.option);
         }
-    }
-    // Fuzzy-match group labels: build a tiny per-call Fuse just over group label entries.
-    // Cheap (one item per group) and reuses the same threshold so behavior matches options.
-    const groups = items.filter(isSelectGroup);
-    const labelMatches = new Set();
-    if (groups.length > 0) {
-        const labelFuse = new Fuse(groups.map((g) => ({ label: g.label })), { keys: ['label'], threshold: 0.4, ignoreLocation: true });
-        for (const hit of labelFuse.search(query)) {
-            labelMatches.add(hit.item.label);
-        }
-    }
+    });
     const out = [];
-    for (const item of items) {
-        if (isSelectGroup(item)) {
-            // Group label matched → include every child. Otherwise include only the children that matched.
-            const childrenForRender = labelMatches.has(item.label) ? item.options : groupBuckets.get(item.label);
-            if (childrenForRender && childrenForRender.length > 0) {
-                out.push({ label: item.label, value: item.value, options: childrenForRender });
-            }
+    const matchedGroups = groups
+        .filter((g) => groupBuckets.has(g.label) || labelMatches.has(g.label))
+        .sort((a, b) => (groupRank.get(a.label) ?? Infinity) - (groupRank.get(b.label) ?? Infinity));
+    for (const g of matchedGroups) {
+        const options = labelMatches.has(g.label) ? g.options : (groupBuckets.get(g.label) ?? []);
+        if (options.length > 0) {
+            out.push({ label: g.label, value: g.value, options });
         }
     }
     for (const opt of standalone) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.10.7-1781507721211",
+  "version": "0.10.7-1781512309325",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",