@streamscloud/kit 0.2.42 → 0.9.0

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

@@ -0,0 +1,36 @@
+<script lang="ts">import GridCardField from './cmp.grid-card-field.svelte';
+const { label, text, maxLines = 1 } = $props();
+const textAsSnippet = $derived(text && typeof text === 'function' ? text : null);
+const textAsString = $derived(text && typeof text !== 'function' ? text : null);
+</script>
+
+<GridCardField label={label} multiline={maxLines !== 1}>
+  <span class="grid-card-text-field__text" style:--_max-lines={maxLines} title={textAsString}>
+    {#if textAsSnippet}
+      {@render textAsSnippet()}
+    {:else if textAsString}
+      {textAsString}
+    {:else}
+      -
+    {/if}
+  </span>
+</GridCardField>
+
+<!--
+@component
+Text content row with line-clamp. Pass `text` as either a string (gets a `title=` tooltip for
+overflow) or a snippet for custom markup. `-` placeholder when text is null / undefined.
+-->
+
+<style>.grid-card-text-field__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--_max-lines, 1);
+  line-clamp: var(--_max-lines, 1);
+  overflow: hidden;
+  word-break: break-word;
+  color: var(--sc-kit--color--text--primary);
+  line-height: var(--sc-kit--leading--tight);
+  height: calc(var(--_max-lines, 1) * var(--sc-kit--leading--tight) * 1em);
+  font-size: 0.625rem;
+}</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    label: string;
+    text?: string | Snippet | null;
+    /** Maximum lines before truncating with line-clamp. @default 1 */
+    maxLines?: number;
+};
+/**
+ * Text content row with line-clamp. Pass `text` as either a string (gets a `title=` tooltip for
+ * overflow) or a snippet for custom markup. `-` placeholder when text is null / undefined.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/grid-card/fields/index.d.ts

@@ -0,0 +1,8 @@
+export { default as GridCardActionsField, type GridCardAction } from './cmp.grid-card-actions-field.svelte';
+export { default as GridCardBadgeField } from './cmp.grid-card-badge-field.svelte';
+export { default as GridCardButton } from './cmp.grid-card-button.svelte';
+export { default as GridCardField } from './cmp.grid-card-field.svelte';
+export { default as GridCardFields } from './cmp.grid-card-fields.svelte';
+export { default as GridCardIdField } from './cmp.grid-card-id-field.svelte';
+export { default as GridCardProgressField } from './cmp.grid-card-progress-field.svelte';
+export { default as GridCardTextField } from './cmp.grid-card-text-field.svelte';

package/dist/ui/grid-card/fields/index.js

@@ -0,0 +1,8 @@
+export { default as GridCardActionsField } from './cmp.grid-card-actions-field.svelte';
+export { default as GridCardBadgeField } from './cmp.grid-card-badge-field.svelte';
+export { default as GridCardButton } from './cmp.grid-card-button.svelte';
+export { default as GridCardField } from './cmp.grid-card-field.svelte';
+export { default as GridCardFields } from './cmp.grid-card-fields.svelte';
+export { default as GridCardIdField } from './cmp.grid-card-id-field.svelte';
+export { default as GridCardProgressField } from './cmp.grid-card-progress-field.svelte';
+export { default as GridCardTextField } from './cmp.grid-card-text-field.svelte';

package/dist/ui/grid-card/icon-checkbox-checked.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4" y="4" width="12" height="12" rx="2" ry="2" style="fill:#fff" />
+  <path d="M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm3-2a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6Z" />
+  <path d="M13.85 7.85l-5 5a.5.5 0 0 1-.7 0l-2-2a.5.5 0 0 1 .7-.7l1.65 1.64 4.65-4.64a.5.5 0 0 1 .7.7Z" />
+</svg>

package/dist/ui/grid-card/icon-checkbox-unchecked.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4" y="4" width="12" height="12" rx="2" ry="2" style="fill:#fff" />
+  <path d="M3 6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Zm3-2a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H6Z" />
+</svg>

package/dist/ui/grid-card/index.d.ts

@@ -0,0 +1,4 @@
+export type { AspectRatio, ObjectFit } from './types';
+export { default as GridCard } from './cmp.grid-card.svelte';
+export { default as GridCardMedia, type MediaItem as GridCardMediaItem } from './cmp.grid-card-media.svelte';
+export { GridCardActionsField, GridCardBadgeField, GridCardField, GridCardFields, GridCardIdField, GridCardProgressField, GridCardTextField, type GridCardAction } from './fields';

package/dist/ui/grid-card/index.js

@@ -0,0 +1,3 @@
+export { default as GridCard } from './cmp.grid-card.svelte';
+export { default as GridCardMedia } from './cmp.grid-card-media.svelte';
+export { GridCardActionsField, GridCardBadgeField, GridCardField, GridCardFields, GridCardIdField, GridCardProgressField, GridCardTextField } from './fields';

package/dist/ui/grid-card/types.d.ts

@@ -0,0 +1,4 @@
+/** Aspect ratio preset for `GridCardMedia`. */
+export type AspectRatio = 'vertical' | 'square' | 'horizontal';
+/** Object-fit mode for media inside the card's media slot. */
+export type ObjectFit = 'contain' | 'cover';

package/dist/ui/grouped-sidebar/cmp.grouped-sidebar-section.svelte

@@ -36,34 +36,26 @@ let { section, showSectionCollapser = true, expandToFill = true, on } = $props()
 
 <!--
 @component
-A collapsible section within a GroupedSidebar. Renders a trigger button with chevron and expandable content area.
+A collapsible section within a GroupedSidebar. Renders a trigger button with chevron and expandable
+content area. `section.component` may be a `DynamicComponentModel` or a `Snippet`.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--grouped-sidebar-section--trigger--background` | Trigger row background | `light-dark(neutral-50, dark-700)` |
-| `--sc-kit--grouped-sidebar-section--trigger--color` | Trigger text color | `light-dark(gray-800, white)` |
-| `--sc-kit--grouped-sidebar-section--error-color` | Invalid section title color | `light-dark(destructive-500, destructive-400)` |
-| `--sc-kit--grouped-sidebar-section--padding-block` | Content vertical padding | `1rem` |
-| `--sc-kit--grouped-sidebar-section--padding-inline` | Content horizontal padding | `1rem` |
+| `--sc-kit--grouped-sidebar-section--trigger--background` | Trigger row background | `--sc-kit--color--bg--field-alt` |
+| `--sc-kit--grouped-sidebar-section--trigger--color` | Trigger text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--grouped-sidebar-section--error-color` | Invalid section title color | `--sc-kit--color--danger` |
+| `--sc-kit--grouped-sidebar-section--padding-block` | Content vertical padding | `--sc-kit--space--4` |
+| `--sc-kit--grouped-sidebar-section--padding-inline` | Content horizontal padding | `--sc-kit--space--4` |
 | `--sc-kit--grouped-sidebar-section--content--display` | Content display mode | `block` |
 -->
 
 <style>.grouped-sidebar-section {
-  --_grouped-sidebar-section--trigger--background: var(
-    --sc-kit--grouped-sidebar-section--trigger--background,
-    light-dark(#f9fafb, #222222)
-  );
-  --_grouped-sidebar-section--trigger--color: var(
-    --sc-kit--grouped-sidebar-section--trigger--color,
-    light-dark(#2e2e2e, #ffffff)
-  );
-  --_grouped-sidebar-section--error-color: var(
-    --sc-kit--grouped-sidebar-section--error-color,
-    light-dark(#e71d36, #f17e8b)
-  );
-  --_grouped-sidebar-section--padding-block: var(--sc-kit--grouped-sidebar-section--padding-block, 1rem);
-  --_grouped-sidebar-section--padding-inline: var(--sc-kit--grouped-sidebar-section--padding-inline, 1rem);
+  --_grouped-sidebar-section--trigger--background: var(--sc-kit--grouped-sidebar-section--trigger--background, var(--sc-kit--color--bg--field-alt));
+  --_grouped-sidebar-section--trigger--color: var(--sc-kit--grouped-sidebar-section--trigger--color, var(--sc-kit--color--text--primary));
+  --_grouped-sidebar-section--error-color: var(--sc-kit--grouped-sidebar-section--error-color, var(--sc-kit--color--danger));
+  --_grouped-sidebar-section--padding-block: var(--sc-kit--grouped-sidebar-section--padding-block, var(--sc-kit--space--4));
+  --_grouped-sidebar-section--padding-inline: var(--sc-kit--grouped-sidebar-section--padding-inline, var(--sc-kit--space--4));
   --_grouped-sidebar-section--content--display: var(--sc-kit--grouped-sidebar-section--content--display, block);
   display: contents;
 }
@@ -71,23 +63,36 @@ A collapsible section within a GroupedSidebar. Renders a trigger button with che
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 0.375rem 1rem;
+  padding: var(--sc-kit--space--2) var(--sc-kit--space--4);
   background-color: var(--_grouped-sidebar-section--trigger--background);
   margin-bottom: 1px;
   color: var(--_grouped-sidebar-section--trigger--color);
+  appearance: none;
+  border: 0;
+  cursor: pointer;
+  text-align: inherit;
+  font: inherit;
 }
 .grouped-sidebar-section__title {
-  font-size: 0.875rem;
+  font-size: var(--sc-kit--font-size--md);
+  line-height: var(--sc-kit--line-height--md);
+  min-width: 0;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .grouped-sidebar-section__title--invalid {
   color: var(--_grouped-sidebar-section--error-color);
 }
 .grouped-sidebar-section__expand-icon {
   margin-left: auto;
+  display: inline-flex;
+  align-items: center;
 }
 .grouped-sidebar-section__content {
   display: var(--_grouped-sidebar-section--content--display);
-  transition: flex 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: flex var(--sc-kit--duration--base) var(--sc-kit--ease--default);
   flex: 0 0 0;
   overflow: hidden;
 }

package/dist/ui/grouped-sidebar/cmp.grouped-sidebar-section.svelte.d.ts

@@ -10,16 +10,17 @@ type Props = {
     };
 };
 /**
- * A collapsible section within a GroupedSidebar. Renders a trigger button with chevron and expandable content area.
+ * A collapsible section within a GroupedSidebar. Renders a trigger button with chevron and expandable
+ * content area. `section.component` may be a `DynamicComponentModel` or a `Snippet`.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--grouped-sidebar-section--trigger--background` | Trigger row background | `light-dark(neutral-50, dark-700)` |
- * | `--sc-kit--grouped-sidebar-section--trigger--color` | Trigger text color | `light-dark(gray-800, white)` |
- * | `--sc-kit--grouped-sidebar-section--error-color` | Invalid section title color | `light-dark(destructive-500, destructive-400)` |
- * | `--sc-kit--grouped-sidebar-section--padding-block` | Content vertical padding | `1rem` |
- * | `--sc-kit--grouped-sidebar-section--padding-inline` | Content horizontal padding | `1rem` |
+ * | `--sc-kit--grouped-sidebar-section--trigger--background` | Trigger row background | `--sc-kit--color--bg--field-alt` |
+ * | `--sc-kit--grouped-sidebar-section--trigger--color` | Trigger text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--grouped-sidebar-section--error-color` | Invalid section title color | `--sc-kit--color--danger` |
+ * | `--sc-kit--grouped-sidebar-section--padding-block` | Content vertical padding | `--sc-kit--space--4` |
+ * | `--sc-kit--grouped-sidebar-section--padding-inline` | Content horizontal padding | `--sc-kit--space--4` |
  * | `--sc-kit--grouped-sidebar-section--content--display` | Content display mode | `block` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/ui/grouped-sidebar/cmp.grouped-sidebar.svelte

@@ -37,8 +37,10 @@ const selectedGroup = $derived(settings.groups.find((d) => d.id === settings.sel
   {#if (settings.groups.length > 1 || !settings.hideGroupsWhenSingle) && selectedGroup}
     <div class="grouped-sidebar__header">
       <SegmentedControl
-        segments={settings.groups.map((g) => ({ id: g.id, label: g.name, invalid: !g.isValid }))}
-        selected={selectedGroup.id}
+        segments={settings.groups.map((g) => ({ value: g.id, label: g.name, invalid: !g.isValid }))}
+        value={selectedGroup.id}
+        variant="outlined"
+        fullWidth
         on={{ change: handleSelectGroup }} />
     </div>
   {/if}
@@ -57,25 +59,38 @@ const selectedGroup = $derived(settings.groups.find((d) => d.id === settings.sel
 
 <!--
 @component
-A sidebar with tabbed groups and collapsible sections. Supports accordion (single expanded) and multi-expand modes, with optional auto-height sections.
+A sidebar with tabbed groups and collapsible sections. Supports accordion (single expanded) and multi-
+expand modes, with optional auto-height sections. Configure via `GroupedSidebarSettings`; pass groups
++ sections via `SidebarGroupModel` / `SidebarGroupSectionModel`.
+
+A section's `component` accepts a `Snippet` or `DynamicComponentModel`. Svelte 5 hoists `{#snippet}`
+declarations, so assign a markup snippet to `component` DIRECTLY in the script-level settings — no
+dummy-placeholder + post-init bind needed:
+
+```svelte
+<script lang="ts">
+  const settings = new GroupedSidebarSettings({
+    groups: [{ id: 'main', name: 'Main', sections: [{ id: 'general', name: 'General', component: general }] }]
+  });
+</script>
+{#snippet general()}<div>…</div>{/snippet}
+<GroupedSidebar {settings} />
+```
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--grouped-sidebar--background` | Sidebar background | `light-dark(white, dark-800)` |
-| `--sc-kit--grouped-sidebar--padding-block` | Header vertical padding | `1rem` |
-| `--sc-kit--grouped-sidebar--padding-inline` | Header horizontal padding | `1rem` |
+| `--sc-kit--grouped-sidebar--background` | Sidebar background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--grouped-sidebar--padding-block` | Header vertical padding | `--sc-kit--space--4` |
+| `--sc-kit--grouped-sidebar--padding-inline` | Header horizontal padding | `--sc-kit--space--4` |
 -->
 
 <style>.grouped-sidebar {
-  --_grouped-sidebar--background: var(--sc-kit--grouped-sidebar--background, light-dark(#ffffff, #1e1e1e));
-  --_grouped-sidebar--padding-block: var(--sc-kit--grouped-sidebar--padding-block, 1rem);
-  --_grouped-sidebar--padding-inline: var(--sc-kit--grouped-sidebar--padding-inline, 1rem);
+  --_grouped-sidebar--background: var(--sc-kit--grouped-sidebar--background, var(--sc-kit--color--bg--panel));
+  --_grouped-sidebar--padding-block: var(--sc-kit--grouped-sidebar--padding-block, var(--sc-kit--space--4));
+  --_grouped-sidebar--padding-inline: var(--sc-kit--grouped-sidebar--padding-inline, var(--sc-kit--space--4));
   --sc-kit--grouped-sidebar-section--padding-block: var(--_grouped-sidebar--padding-block);
   --sc-kit--grouped-sidebar-section--padding-inline: var(--_grouped-sidebar--padding-inline);
-  --sc-kit--segmented-control--background: light-dark(#f2f2f3, #222222);
-  --sc-kit--segmented-control--selected--background: light-dark(#ffffff, #242424);
-  --sc-kit--segmented-control--border-color: light-dark(#f2f2f3, #222222);
   display: flex;
   flex-direction: column;
   height: 100%;

package/dist/ui/grouped-sidebar/cmp.grouped-sidebar.svelte.d.ts

@@ -3,14 +3,30 @@ type Props = {
     settings: GroupedSidebarSettings;
 };
 /**
- * A sidebar with tabbed groups and collapsible sections. Supports accordion (single expanded) and multi-expand modes, with optional auto-height sections.
+ * A sidebar with tabbed groups and collapsible sections. Supports accordion (single expanded) and multi-
+ * expand modes, with optional auto-height sections. Configure via `GroupedSidebarSettings`; pass groups
+ * + sections via `SidebarGroupModel` / `SidebarGroupSectionModel`.
+ *
+ * A section's `component` accepts a `Snippet` or `DynamicComponentModel`. Svelte 5 hoists `{#snippet}`
+ * declarations, so assign a markup snippet to `component` DIRECTLY in the script-level settings — no
+ * dummy-placeholder + post-init bind needed:
+ *
+ * ```svelte
+ * <script lang="ts">
+ * const settings = new GroupedSidebarSettings({
+ *   groups: [{ id: 'main', name: 'Main', sections: [{ id: 'general', name: 'General', component: general }] }]
+ * });
+ * </script>
+ * {#snippet general()}<div>…</div>{/snippet}
+ * <GroupedSidebar {settings} />
+ * ```
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--grouped-sidebar--background` | Sidebar background | `light-dark(white, dark-800)` |
- * | `--sc-kit--grouped-sidebar--padding-block` | Header vertical padding | `1rem` |
- * | `--sc-kit--grouped-sidebar--padding-inline` | Header horizontal padding | `1rem` |
+ * | `--sc-kit--grouped-sidebar--background` | Sidebar background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--grouped-sidebar--padding-block` | Header vertical padding | `--sc-kit--space--4` |
+ * | `--sc-kit--grouped-sidebar--padding-inline` | Header horizontal padding | `--sc-kit--space--4` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/grouped-sidebar/types.svelte.js

@@ -47,10 +47,10 @@ export class SidebarGroupModel {
 }
 export class SidebarGroupSectionModel {
     id;
-    name;
+    name = $state.raw('');
     expanded = $state(false);
-    component;
-    withoutPaddings;
+    component = $state.raw(null);
+    withoutPaddings = $state.raw(false);
     isValid = $derived.by(() => this.validator?.isValid ?? true);
     _validator = $state.raw(null);
     _onExpandedCallback;

package/dist/ui/handle-input/cmp.handle-input.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">import { Icon } from '../icon';
+import { Input } from '../input';
+import { Spinner } from '../spinner';
+import { HandleInputLocalization } from './handle-input-localization';
+import IconCheckmarkCircle from '@fluentui/svg-icons/icons/checkmark_circle_16_filled.svg?raw';
+import IconDismissCircle from '@fluentui/svg-icons/icons/dismiss_circle_16_filled.svg?raw';
+let { value, size = 'md', status, statusLabel, on, ...rest } = $props();
+const localization = new HandleInputLocalization();
+const defaultLabel = (s) => (s === 'available' ? localization.available : s === 'taken' ? localization.taken : localization.checking);
+const badgeLabel = $derived(status ? (statusLabel ?? defaultLabel(status)) : '');
+</script>
+
+{#snippet prefixSlot()}
+  <span class="handle-input__prefix handle-input__prefix--{size}" aria-label={localization.prefixLabel}>@</span>
+{/snippet}
+
+{#snippet suffixSlot()}
+  {#if status}
+    <span class="handle-input__status handle-input__status--{status}" role="status" aria-live="polite">
+      {#if status === 'checking'}
+        <Spinner size="sm" />
+      {:else if status === 'available'}
+        <Icon src={IconCheckmarkCircle} size="sm" />
+      {:else}
+        <Icon src={IconDismissCircle} size="sm" />
+      {/if}
+      <span class="handle-input__status-label">{badgeLabel}</span>
+    </span>
+  {/if}
+{/snippet}
+
+<Input
+  {...rest}
+  value={value}
+  size={size}
+  type="text"
+  autocapitalize="none"
+  spellcheck={false}
+  prefix={prefixSlot}
+  suffix={status ? suffixSlot : undefined}
+  on={on} />
+
+<!--
+@component
+A single-line handle / username input with a fixed `@` prefix shown in a tonally distinct gray
+segment, plus an optional availability badge on the right (`available` / `taken` / `checking`).
+The bound `value` is the handle WITHOUT the `@`.
+
+Built as a thin wrapper around kit `Input` — the prefix segment is rendered via Input's `prefix`
+snippet slot, the status pill via Input's `suffix` snippet slot. Presentational only — the parent
+owns the async availability lookup.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--handle-input--prefix--background` | Prefix segment background | `--sc-kit--color--bg--field-alt` |
+| `--sc-kit--handle-input--prefix--color` | Prefix text color | `--sc-kit--color--text--muted` |
+| `--sc-kit--handle-input--prefix--border-color` | Vertical separator color | `--sc-kit--color--border--field` |
+| `--sc-kit--handle-input--status--available--background` | Available pill background | `--sc-kit--color--success--soft` |
+| `--sc-kit--handle-input--status--available--color` | Available pill text + icon color | `--sc-kit--color--success` |
+| `--sc-kit--handle-input--status--taken--background` | Taken pill background | `--sc-kit--color--danger--soft` |
+| `--sc-kit--handle-input--status--taken--color` | Taken pill text + icon color | `--sc-kit--color--danger` |
+| `--sc-kit--handle-input--status--checking--background` | Checking pill background | `--sc-kit--color--bg--active` |
+| `--sc-kit--handle-input--status--checking--color` | Checking pill text + spinner color | `--sc-kit--color--text--secondary` |
+
+Plus every public CSS variable exposed by `<Input>`.
+-->
+
+<style>.handle-input__prefix {
+  --_hi--prefix-background: var(--sc-kit--handle-input--prefix--background, var(--sc-kit--color--bg--field-alt));
+  --_hi--prefix-color: var(--sc-kit--handle-input--prefix--color, var(--sc-kit--color--text--muted));
+  --_hi--prefix-border-color: var(--sc-kit--handle-input--prefix--border-color, var(--sc-kit--color--border--field));
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  background: var(--_hi--prefix-background);
+  color: var(--_hi--prefix-color);
+  border-inline-end: 1px solid var(--_hi--prefix-border-color);
+  line-height: var(--sc-kit--leading--tight);
+  user-select: none;
+  white-space: nowrap;
+}
+.handle-input__prefix--sm {
+  padding-inline: var(--sc-kit--field--padding-inline--sm);
+}
+.handle-input__prefix--md {
+  padding-inline: var(--sc-kit--field--padding-inline--md);
+}
+.handle-input__prefix--lg {
+  padding-inline: var(--sc-kit--field--padding-inline--lg);
+}
+.handle-input__status {
+  --_hi--status-background: var(--sc-kit--color--bg--active);
+  --_hi--status-color: var(--sc-kit--color--text--secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-kit--space--1);
+  padding: var(--sc-kit--space--1) var(--sc-kit--space--2);
+  border-radius: var(--sc-kit--radius--pill);
+  background: var(--_hi--status-background);
+  color: var(--_hi--status-color);
+  font-size: var(--sc-kit--font-size--xs);
+  font-weight: var(--sc-kit--font-weight--medium);
+  line-height: var(--sc-kit--leading--tight);
+  white-space: nowrap;
+  user-select: none;
+  --sc-kit--icon--color: var(--_hi--status-color);
+}
+.handle-input__status--available {
+  --_hi--status-background: var(--sc-kit--handle-input--status--available--background, var(--sc-kit--color--success--soft));
+  --_hi--status-color: var(--sc-kit--handle-input--status--available--color, var(--sc-kit--color--success));
+}
+.handle-input__status--taken {
+  --_hi--status-background: var(--sc-kit--handle-input--status--taken--background, var(--sc-kit--color--danger--soft));
+  --_hi--status-color: var(--sc-kit--handle-input--status--taken--color, var(--sc-kit--color--danger));
+}
+.handle-input__status--checking {
+  --_hi--status-background: var(--sc-kit--handle-input--status--checking--background, var(--sc-kit--color--bg--active));
+  --_hi--status-color: var(--sc-kit--handle-input--status--checking--color, var(--sc-kit--color--text--secondary));
+}
+.handle-input__status-label {
+  max-width: 7.5rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}</style>

package/dist/ui/handle-input/cmp.handle-input.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { InputForwardedProps } from '../input';
+type HandleStatus = 'available' | 'taken' | 'checking';
+type Props = Omit<InputForwardedProps, 'autocapitalize' | 'spellcheck'> & {
+    /**
+     * Availability status. Presentational only — the parent owns the async lookup and sets
+     * `status` accordingly. The status pill is rendered as a free-form suffix inside the input.
+     */
+    status?: HandleStatus;
+    /** Override the default localized badge label for the current `status`. */
+    statusLabel?: string;
+};
+/**
+ * A single-line handle / username input with a fixed `@` prefix shown in a tonally distinct gray
+ * segment, plus an optional availability badge on the right (`available` / `taken` / `checking`).
+ * The bound `value` is the handle WITHOUT the `@`.
+ *
+ * Built as a thin wrapper around kit `Input` — the prefix segment is rendered via Input's `prefix`
+ * snippet slot, the status pill via Input's `suffix` snippet slot. Presentational only — the parent
+ * owns the async availability lookup.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--handle-input--prefix--background` | Prefix segment background | `--sc-kit--color--bg--field-alt` |
+ * | `--sc-kit--handle-input--prefix--color` | Prefix text color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--handle-input--prefix--border-color` | Vertical separator color | `--sc-kit--color--border--field` |
+ * | `--sc-kit--handle-input--status--available--background` | Available pill background | `--sc-kit--color--success--soft` |
+ * | `--sc-kit--handle-input--status--available--color` | Available pill text + icon color | `--sc-kit--color--success` |
+ * | `--sc-kit--handle-input--status--taken--background` | Taken pill background | `--sc-kit--color--danger--soft` |
+ * | `--sc-kit--handle-input--status--taken--color` | Taken pill text + icon color | `--sc-kit--color--danger` |
+ * | `--sc-kit--handle-input--status--checking--background` | Checking pill background | `--sc-kit--color--bg--active` |
+ * | `--sc-kit--handle-input--status--checking--color` | Checking pill text + spinner color | `--sc-kit--color--text--secondary` |
+ *
+ * Plus every public CSS variable exposed by `<Input>`.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/handle-input/handle-input-localization.d.ts

@@ -0,0 +1,6 @@
+export declare class HandleInputLocalization {
+    get prefixLabel(): string;
+    get available(): string;
+    get taken(): string;
+    get checking(): string;
+}

package/dist/ui/handle-input/handle-input-localization.js

@@ -0,0 +1,33 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    prefixLabel: {
+        en: 'Handle prefix',
+        no: 'Brukernavn-prefiks'
+    },
+    available: {
+        en: 'Available',
+        no: 'Ledig'
+    },
+    taken: {
+        en: 'Taken',
+        no: 'Opptatt'
+    },
+    checking: {
+        en: 'Checking…',
+        no: 'Sjekker…'
+    }
+};
+export class HandleInputLocalization {
+    get prefixLabel() {
+        return loc.prefixLabel[AppLocale.current];
+    }
+    get available() {
+        return loc.available[AppLocale.current];
+    }
+    get taken() {
+        return loc.taken[AppLocale.current];
+    }
+    get checking() {
+        return loc.checking[AppLocale.current];
+    }
+}

package/dist/ui/handle-input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as HandleInput } from './cmp.handle-input.svelte';
+export { HandleInputLocalization } from './handle-input-localization';

package/dist/ui/handle-input/index.js

@@ -0,0 +1,2 @@
+export { default as HandleInput } from './cmp.handle-input.svelte';
+export { HandleInputLocalization } from './handle-input-localization';