@streamscloud/kit 0.35.0 → 0.36.0

package/dist/core/utils/dom-helper.d.ts

@@ -1,4 +1,15 @@
 export declare class DomHelper {
+    private static readonly _interactiveSelector;
+    /**
+     * First interactive descendant of `root`, or `null`. Use to reject interactive content from a
+     * container that must stay non-interactive (a `<button>` trigger, a `<label>`).
+     */
+    static findInteractiveDescendant(root: Element): HTMLElement | null;
+    /**
+     * True when the target is, or sits inside, interactive content — i.e. something that owns its own
+     * click behaviour and whose default action a wrapper must not cancel.
+     */
+    static isInsideInteractive(target: EventTarget | null): boolean;
     /**
      * Checks whether initial object is located inside specified boundaries
      * @param  {HTMLElement} element The initial element

package/dist/core/utils/dom-helper.js

@@ -1,4 +1,19 @@
 export class DomHelper {
+    static _interactiveSelector = 'button, a[href], input:not([type="hidden"]), select, textarea, [role="button"], [role="link"], [role="menuitem"], [tabindex]:not([tabindex="-1"])';
+    /**
+     * First interactive descendant of `root`, or `null`. Use to reject interactive content from a
+     * container that must stay non-interactive (a `<button>` trigger, a `<label>`).
+     */
+    static findInteractiveDescendant(root) {
+        return root.querySelector(DomHelper._interactiveSelector);
+    }
+    /**
+     * True when the target is, or sits inside, interactive content — i.e. something that owns its own
+     * click behaviour and whose default action a wrapper must not cancel.
+     */
+    static isInsideInteractive(target) {
+        return target instanceof Element && target.closest(DomHelper._interactiveSelector) !== null;
+    }
     /**
      * Checks whether initial object is located inside specified boundaries
      * @param  {HTMLElement} element The initial element

package/dist/ui/form-field/cmp.form-field-validatable.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" generics="T extends Record<string, unknown>, K extends keyof T & string">import { Validatable } from '../validatable';
 import { default as FormField } from './cmp.form-field.svelte';
-let { handler, name, label, required = false, validateOn, debounceMs, disableTouchedTracking, reserveErrorSpace = false, on, children } = $props();
+let { handler, name, label, hint, required = false, validateOn, debounceMs, disableTouchedTracking, reserveErrorSpace = false, on, children } = $props();
 </script>
 
-<FormField label={label} required={required}>
+<FormField label={label} hint={hint} required={required}>
   <Validatable
     handler={handler}
     name={name}

package/dist/ui/form-field/cmp.form-field-validatable.svelte.d.ts

@@ -9,6 +9,8 @@ declare function $$render<T extends Record<string, unknown>, K extends keyof T &
         name: K;
         /** Label rendered above the input. String renders as text; Snippet allows extra content (e.g. tooltip icon) next to the text. */
         label?: string | Snippet;
+        /** Affordance pinned to the trailing edge of the label row. Forwarded to `<FormField>`. */
+        hint?: string | Snippet;
         /** Appends a danger-colored `*` to the label. */
         required?: boolean;
         /** Which events trigger validation. Forwarded to `<Validatable>`. @default ['input', 'change', 'blur'] */

package/dist/ui/form-field/cmp.form-field.svelte

@@ -1,17 +1,40 @@
-<script lang="ts">let { label, required = false, children } = $props();
-const isLabelString = $derived(typeof label === 'string');
-export {};
+<script lang="ts">import { DomHelper } from '../../core/utils';
+import { Icon } from '../icon';
+import { Tooltip } from '../tooltip';
+import IconInfo from '@fluentui/svg-icons/icons/info_20_regular.svg?raw';
+let { label, hint, required = false, children } = $props();
+// Unhandled, the click activates the labelled field (a checkbox would toggle); cancelling it on interactive content would kill a link's navigation.
+const swallowClick = (event) => {
+    event.stopPropagation();
+    if (DomHelper.isInsideInteractive(event.target)) {
+        return;
+    }
+    event.preventDefault();
+};
 </script>
 
 <label class="form-field">
   {#if label}
     <span class="form-field__label">
-      {#if isLabelString}
+      {#if typeof label === 'string'}
         {label}
       {:else}
-        {@render (label as Snippet)()}
+        {@render label()}
       {/if}
       {#if required}<span class="form-field__required" aria-hidden="true">*</span>{/if}
+      {#if hint}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <span class="form-field__hint" onclick={swallowClick}>
+          {#if typeof hint === 'string'}
+            <Tooltip text={hint}>
+              <Icon src={IconInfo} size="sm" color="muted" />
+            </Tooltip>
+          {:else}
+            {@render hint()}
+          {/if}
+        </span>
+      {/if}
     </span>
   {/if}
 
@@ -22,10 +45,13 @@ export {};
 @component
 FormField — pure layout shell: optional label (string or snippet) above an input slot. The root is a `<label>` element, so the first labelable form control inside is automatically associated via HTML's implicit-association rule — no id wiring required. Does NOT render errors or helper text; pair with `Validatable` for that.
 
+`hint` pins an affordance to the trailing edge of the label row — a string gives the standard info icon with a tooltip, a snippet takes over completely (button, link, badge). It rides on the label row, so it renders only when `label` is set. Clicks inside the hint are swallowed, so an interactive hint never activates the labelled field.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
 | `--sc-kit--form-field--gap` | Vertical gap between label and the input slot | `0.375rem` (6px) |
+| `--sc-kit--form-field--hint--color` | Hint color (inherited by the default info icon) | `--sc-kit--color--text--muted` |
 | `--sc-kit--form-field--label--color` | Label text color | `--sc-kit--color--text--primary` |
 | `--sc-kit--form-field--label--font-size` | Label font size | `--sc-kit--font-size--sm` |
 | `--sc-kit--form-field--label--font-weight` | Label font weight | `--sc-kit--font-weight--medium` |
@@ -38,6 +64,7 @@ FormField — pure layout shell: optional label (string or snippet) above an inp
   --_ff--label-font-size: var(--sc-kit--form-field--label--font-size, var(--sc-kit--font-size--sm));
   --_ff--label-font-weight: var(--sc-kit--form-field--label--font-weight, var(--sc-kit--font-weight--medium));
   --_ff--required-color: var(--sc-kit--form-field--required--color, var(--sc-kit--color--danger));
+  --_ff--hint-color: var(--sc-kit--form-field--hint--color, var(--sc-kit--color--text--muted));
   display: flex;
   flex-direction: column;
   gap: var(--_ff--gap);
@@ -52,4 +79,11 @@ FormField — pure layout shell: optional label (string or snippet) above an inp
 }
 .form-field__required {
   color: var(--_ff--required-color);
+}
+.form-field__hint {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: auto;
+  color: var(--_ff--hint-color);
+  font-weight: var(--sc-kit--font-weight--regular);
 }</style>

package/dist/ui/form-field/cmp.form-field.svelte.d.ts

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 type Props = {
     /** Label rendered above the input. String renders as text; Snippet allows extra content (e.g. tooltip icon) next to the text. */
     label?: string | Snippet;
+    /** Affordance pinned to the trailing edge of the label row — rendered only alongside a `label`. String renders the standard info icon with that text in a tooltip; Snippet renders anything (button, link, badge). Clicks inside never reach the field. */
+    hint?: string | Snippet;
     /** Appends a danger-colored `*` to the label. Purely visual — does not enforce anything. */
     required?: boolean;
     /** Input slot. The wrapping `<label>` implicitly associates with the first labelable control inside (HTML standard), so no id wiring is needed. */
@@ -10,10 +12,13 @@ type Props = {
 /**
  * FormField — pure layout shell: optional label (string or snippet) above an input slot. The root is a `<label>` element, so the first labelable form control inside is automatically associated via HTML's implicit-association rule — no id wiring required. Does NOT render errors or helper text; pair with `Validatable` for that.
  *
+ * `hint` pins an affordance to the trailing edge of the label row — a string gives the standard info icon with a tooltip, a snippet takes over completely (button, link, badge). It rides on the label row, so it renders only when `label` is set. Clicks inside the hint are swallowed, so an interactive hint never activates the labelled field.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
  * | `--sc-kit--form-field--gap` | Vertical gap between label and the input slot | `0.375rem` (6px) |
+ * | `--sc-kit--form-field--hint--color` | Hint color (inherited by the default info icon) | `--sc-kit--color--text--muted` |
  * | `--sc-kit--form-field--label--color` | Label text color | `--sc-kit--color--text--primary` |
  * | `--sc-kit--form-field--label--font-size` | Label font size | `--sc-kit--font-size--sm` |
  * | `--sc-kit--form-field--label--font-weight` | Label font weight | `--sc-kit--font-weight--medium` |

package/dist/ui/navigation/cmp.nav-menu-item.svelte.d.ts

@@ -7,7 +7,7 @@ type Props = {
     href?: string;
     /** Highlight as the current item. Consumer-controlled. @default false */
     active?: boolean;
-    /** Active row visuals — `'plain'` uses color only and keeps hover, `'filled'` paints the active background (no hover on it). @default 'plain' */
+    /** Active row visuals — `'plain'` uses color plus a heavier label weight and keeps hover, `'filled'` paints the active background (no hover on it). @default 'plain' */
     activeStyle?: 'filled' | 'plain';
     disabled?: boolean;
     /** Notification badge on the icon (top-right corner). Numbers > 99 render as `99+`; strings render as-is. */

package/dist/ui/popover/cmp.popover.svelte

@@ -4,7 +4,7 @@ import { validateTrigger } from './validate-trigger';
 import { autoUpdate, computePosition, flip, offset as offsetMiddleware, shift, size } from '@floating-ui/dom';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import { tick } from 'svelte';
-let { position = 'bottom-start', disabled = false, fixedPosition = false, offset = 4, boundaryMargin = 8, backdrop = false, matchWidth = false, panel = true, keepOpen = false, fillContainer = false, on, children, trigger, 'aria-label': ariaLabel } = $props();
+let { position = 'bottom-start', disabled = false, fixedPosition = false, offset = 4, boundaryMargin = 8, backdrop = false, matchWidth = false, panel = true, keepOpen = false, fillContainer = false, tabbable = true, on, children, trigger, 'aria-label': ariaLabel } = $props();
 let opened = $state(false);
 let triggerEl = $state.raw(undefined);
 let contentEl = $state.raw(undefined);
@@ -170,6 +170,7 @@ const handleBackdropClick = (e) => {
     class="popover__trigger"
     class:popover__trigger--fill={fillContainer}
     disabled={disabled}
+    tabindex={tabbable ? undefined : -1}
     aria-label={ariaLabel}
     aria-haspopup="true"
     aria-expanded={opened}
@@ -208,6 +209,10 @@ text). For a button-looking trigger, pass `Button` with `type="presentational"`
 — never an interactive element, which would nest inside the trigger `<button>`. A dev-only guard
 warns and outlines the trigger in red if interactive content is detected.
 
+`tabbable={false}` drops the trigger out of the tab order, leaving it mouse-only — legitimate only when
+the same state can be reached by keyboard through another control (as in `UrlInput`, where typing a
+protocol into the field does what the picker does). Never reach for it just to shorten a tab sequence.
+
 Imperative control via `bind:this` — the component exports `open()`, `close()`, `toggle()`
 methods. Import `PopoverInstance` type from the barrel for typing the ref.
 

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

@@ -20,6 +20,8 @@ type Props = {
     keepOpen?: boolean;
     /** Make the trigger fill its parent's box: `width:100%; height:100%`, centered, `border-radius: inherit`. Use when Popover sits inside a wrapper that owns the visible click surface (icon squares, list rows, etc.). */
     fillContainer?: boolean;
+    /** Keep the trigger in the tab order. Turn off only when the same state is reachable by keyboard elsewhere — the popover becomes mouse-only. @default true */
+    tabbable?: boolean;
     on?: {
         opened?: () => void;
         closed?: () => void;
@@ -44,6 +46,10 @@ type Props = {
  * — never an interactive element, which would nest inside the trigger `<button>`. A dev-only guard
  * warns and outlines the trigger in red if interactive content is detected.
  *
+ * `tabbable={false}` drops the trigger out of the tab order, leaving it mouse-only — legitimate only when
+ * the same state can be reached by keyboard through another control (as in `UrlInput`, where typing a
+ * protocol into the field does what the picker does). Never reach for it just to shorten a tab sequence.
+ *
  * Imperative control via `bind:this` — the component exports `open()`, `close()`, `toggle()`
  * methods. Import `PopoverInstance` type from the barrel for typing the ref.
  *

package/dist/ui/popover/validate-trigger.js

@@ -1,4 +1,4 @@
-const INTERACTIVE_SELECTOR = 'button, a[href], input:not([type="hidden"]), select, textarea, [role="button"], [role="link"], [role="menuitem"], [tabindex]:not([tabindex="-1"])';
+import { DomHelper } from '../../core/utils';
 /**
  * Dev-only guard for the Popover trigger. The trigger renders inside a `<button>`, so its content
  * must be non-interactive (use `Button` with `type="presentational"` for a button-looking trigger).
@@ -10,7 +10,7 @@ export const validateTrigger = (node) => {
         return;
     }
     const check = () => {
-        const offender = node.querySelector(INTERACTIVE_SELECTOR);
+        const offender = DomHelper.findInteractiveDescendant(node);
         if (offender) {
             node.style.outline = '2px solid red';
             node.style.outlineOffset = '1px';

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

@@ -0,0 +1,148 @@
+<script lang="ts">import { Input } from '../input';
+import { Popover, PopoverItem } from '../popover';
+import { composeUrl, parseUrl } from './scheme';
+import { UrlInputLocalization } from './url-input-localization';
+const DEFAULT_SCHEMES = ['https', 'http'];
+let { value, size = 'md', disabled = false, readonly = false, inert = false, schemes = DEFAULT_SCHEMES, scheme, on, ...rest } = $props();
+const localization = new UrlInputLocalization();
+let pickedScheme = $state.raw(null);
+const parsed = $derived(parseUrl(value ?? '', schemes));
+const displayValue = $derived(parsed.rest);
+// A pick outlives the set it came from when `schemes` narrows, and would keep feeding a no-longer-offered protocol into the value.
+const offeredPick = $derived(pickedScheme && schemes.includes(pickedScheme) ? pickedScheme : null);
+const activeScheme = $derived(parsed.scheme ?? offeredPick ?? scheme ?? schemes[0]);
+const pickable = $derived(schemes.length > 1 && !parsed.foreign && !disabled && !readonly && !inert);
+const toValue = (text) => {
+    const typed = parseUrl(text, schemes);
+    return typed.foreign ? text : composeUrl(typed.rest, typed.scheme ?? activeScheme);
+};
+const handleInput = (v) => on?.input?.(toValue(v));
+const handleChange = (v) => on?.change?.(toValue(v));
+const pickScheme = (next) => {
+    pickedScheme = next;
+    const emitted = composeUrl(displayValue, next);
+    on?.schemeChange?.(next);
+    on?.input?.(emitted);
+    on?.change?.(emitted);
+};
+// The whole Input surface focuses the field on click — without this the picker would open and immediately lose focus.
+const swallowClick = (event) => event.stopPropagation();
+</script>
+
+{#snippet schemeBody()}
+  <span class="url-input__body url-input__body--{size}">{activeScheme}://</span>
+{/snippet}
+
+{#snippet schemeSegment()}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <span
+    class="url-input__scheme"
+    class:url-input__scheme--pickable={pickable}
+    class:url-input__scheme--inactive={parsed.foreign}
+    title={parsed.foreign ? localization.schemeIgnored : undefined}
+    onclick={pickable ? swallowClick : undefined}>
+    {#if pickable}
+      <Popover position="bottom-start" fillContainer={true} fixedPosition={true} tabbable={false} aria-label={localization.chooseScheme}>
+        {#snippet trigger()}
+          {@render schemeBody()}
+        {/snippet}
+        {#each schemes as option (option)}
+          <PopoverItem on={{ click: () => pickScheme(option) }}>{option}://</PopoverItem>
+        {/each}
+      </Popover>
+    {:else}
+      {@render schemeBody()}
+    {/if}
+  </span>
+{/snippet}
+
+<Input
+  {...rest}
+  value={displayValue}
+  size={size}
+  disabled={disabled}
+  readonly={readonly}
+  inert={inert}
+  autocomplete="url"
+  autocapitalize="none"
+  inputmode="url"
+  spellcheck={false}
+  prefix={schemeSegment}
+  on={{
+    input: handleInput,
+    change: handleChange,
+    focus: () => on?.focus?.(),
+    blur: () => on?.blur?.(),
+    keydown: (event) => on?.keydown?.(event),
+    mounted: (data) => on?.mounted?.(data)
+  }} />
+
+<!--
+@component
+A URL input whose protocol lives in a tonally distinct leading segment instead of the text. The bound
+`value` is always the full URL or `''`; the user types only host and path.
+
+The segment reflects the value rather than a wish. A protocol from `schemes` found at the head of the
+text — typed, pasted or arriving as `value` — moves into the segment and is stripped from the field, so
+nothing is silently upgraded: turning `http` into `https` takes picking it. A protocol *outside*
+`schemes` (`mailto:`, `ftp://`) is left in the text and emitted verbatim, and the segment dims and stops
+accepting picks — judging that address belongs to the consumer's validation, not to the field.
+
+With two or more `schemes` the segment is a popover picker — no chevron, the hover shift carries the
+affordance; with one it is static text. The picker floats with `position: fixed`, since `Input` clips
+its own box, and sits outside the tab order: Tab reaches the text field only, where typing or pasting
+`http://…` moves the protocol into the segment anyway. Keyboard users lose no capability, and one
+field costs one tab stop.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--url-input--scheme--background` | Segment background | `--sc-kit--color--bg--field-alt` |
+| `--sc-kit--url-input--scheme--background--hover` | Segment background while pickable and hovered | `--sc-kit--color--bg--hover` |
+| `--sc-kit--url-input--scheme--color` | Segment text color | `--sc-kit--color--text--muted` |
+| `--sc-kit--url-input--scheme--border-color` | Vertical separator color | `--sc-kit--color--border--field` |
+
+Plus every public CSS variable exposed by `<Input>`.
+-->
+
+<style>.url-input__scheme {
+  --_ui--scheme-background: var(--sc-kit--url-input--scheme--background, var(--sc-kit--color--bg--field-alt));
+  --_ui--scheme-background-hover: var(--sc-kit--url-input--scheme--background--hover, var(--sc-kit--color--bg--hover));
+  --_ui--scheme-color: var(--sc-kit--url-input--scheme--color, var(--sc-kit--color--text--muted));
+  --_ui--scheme-border-color: var(--sc-kit--url-input--scheme--border-color, var(--sc-kit--color--border--field));
+  --sc-kit--popover--content--min-width: 7rem;
+  display: inline-flex;
+  align-items: stretch;
+  flex: 1;
+  background: var(--_ui--scheme-background);
+  color: var(--_ui--scheme-color);
+  border-inline-end: 1px solid var(--_ui--scheme-border-color);
+  line-height: var(--sc-kit--leading--tight);
+  user-select: none;
+  white-space: nowrap;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.url-input__scheme--pickable {
+  cursor: pointer;
+}
+.url-input__scheme--pickable:hover {
+  background: var(--_ui--scheme-background-hover);
+}
+.url-input__scheme--inactive {
+  opacity: 0.5;
+}
+.url-input__body {
+  display: inline-flex;
+  align-items: center;
+  block-size: 100%;
+}
+.url-input__body--sm {
+  padding-inline: var(--sc-kit--field--padding-inline--sm);
+}
+.url-input__body--md {
+  padding-inline: var(--sc-kit--field--padding-inline--md);
+}
+.url-input__body--lg {
+  padding-inline: var(--sc-kit--field--padding-inline--lg);
+}</style>

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

@@ -0,0 +1,40 @@
+import type { InputForwardedProps } from '../input';
+type Props = Omit<InputForwardedProps, 'autocomplete' | 'autocapitalize' | 'inputmode' | 'spellcheck' | 'on'> & {
+    /** Protocols offered in the leading segment. A single entry renders it as static text. @default ['https', 'http'] */
+    schemes?: string[];
+    /** Which of `schemes` applies to text that carries none. A value outside `schemes` is emitted as given, unvalidated. @default schemes[0] */
+    scheme?: string;
+    on?: NonNullable<InputForwardedProps['on']> & {
+        /** Fires when a protocol is picked in the leading segment — not when one is detected in the text. */
+        schemeChange?: (scheme: string) => void;
+    };
+};
+/**
+ * A URL input whose protocol lives in a tonally distinct leading segment instead of the text. The bound
+ * `value` is always the full URL or `''`; the user types only host and path.
+ *
+ * The segment reflects the value rather than a wish. A protocol from `schemes` found at the head of the
+ * text — typed, pasted or arriving as `value` — moves into the segment and is stripped from the field, so
+ * nothing is silently upgraded: turning `http` into `https` takes picking it. A protocol *outside*
+ * `schemes` (`mailto:`, `ftp://`) is left in the text and emitted verbatim, and the segment dims and stops
+ * accepting picks — judging that address belongs to the consumer's validation, not to the field.
+ *
+ * With two or more `schemes` the segment is a popover picker — no chevron, the hover shift carries the
+ * affordance; with one it is static text. The picker floats with `position: fixed`, since `Input` clips
+ * its own box, and sits outside the tab order: Tab reaches the text field only, where typing or pasting
+ * `http://…` moves the protocol into the segment anyway. Keyboard users lose no capability, and one
+ * field costs one tab stop.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--url-input--scheme--background` | Segment background | `--sc-kit--color--bg--field-alt` |
+ * | `--sc-kit--url-input--scheme--background--hover` | Segment background while pickable and hovered | `--sc-kit--color--bg--hover` |
+ * | `--sc-kit--url-input--scheme--color` | Segment text color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--url-input--scheme--border-color` | Vertical separator color | `--sc-kit--color--border--field` |
+ *
+ * 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/url-input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UrlInput } from './cmp.url-input.svelte';
+export { composeUrl, parseUrl, type ParsedUrl } from './scheme';

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

@@ -0,0 +1,2 @@
+export { default as UrlInput } from './cmp.url-input.svelte';
+export { composeUrl, parseUrl } from './scheme';

package/dist/ui/url-input/scheme.d.ts

@@ -0,0 +1,10 @@
+export type ParsedUrl = {
+    /** Scheme from the allowed set found at the head of the text, lowercased. */
+    scheme: string | null;
+    /** The text with a recognized `scheme://` removed. */
+    rest: string;
+    /** The text carries a scheme outside the allowed set — nothing may be prepended to it. */
+    foreign: boolean;
+};
+export declare const parseUrl: (raw: string, schemes: string[]) => ParsedUrl;
+export declare const composeUrl: (rest: string, scheme: string) => string;

package/dist/ui/url-input/scheme.js

@@ -0,0 +1,20 @@
+const SCHEME_PATTERN = /^([a-z][a-z0-9+.-]*):(\/\/)?/i;
+export const parseUrl = (raw, schemes) => {
+    const match = SCHEME_PATTERN.exec(raw);
+    if (!match) {
+        return { scheme: null, rest: raw, foreign: false };
+    }
+    const found = match[1].toLowerCase();
+    const tail = raw.slice(match[0].length);
+    if (match[2]) {
+        return schemes.some((scheme) => scheme.toLowerCase() === found)
+            ? { scheme: found, rest: tail, foreign: false }
+            : { scheme: null, rest: raw, foreign: true };
+    }
+    // A numeric tail is a port (`localhost:3000`), not a scheme — treating it as one strips the protocol from the value.
+    if (/^\d/.test(tail)) {
+        return { scheme: null, rest: raw, foreign: false };
+    }
+    return { scheme: null, rest: raw, foreign: true };
+};
+export const composeUrl = (rest, scheme) => (rest.trim() === '' ? '' : `${scheme}://${rest}`);

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

@@ -0,0 +1,4 @@
+export declare class UrlInputLocalization {
+    get chooseScheme(): string;
+    get schemeIgnored(): string;
+}

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

@@ -0,0 +1,19 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    chooseScheme: {
+        en: 'Choose URL protocol',
+        no: 'Velg URL-protokoll'
+    },
+    schemeIgnored: {
+        en: 'The address carries its own protocol, so this one does not apply',
+        no: 'Adressen har sin egen protokoll, så denne gjelder ikke'
+    }
+};
+export class UrlInputLocalization {
+    get chooseScheme() {
+        return loc.chooseScheme[AppLocale.current];
+    }
+    get schemeIgnored() {
+        return loc.schemeIgnored[AppLocale.current];
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -431,6 +431,10 @@
       "types": "./dist/ui/typography/index.d.ts",
       "svelte": "./dist/ui/typography/index.js"
     },
+    "./ui/url-input": {
+      "types": "./dist/ui/url-input/index.d.ts",
+      "svelte": "./dist/ui/url-input/index.js"
+    },
     "./ui/usage": {
       "types": "./dist/ui/usage/index.d.ts",
       "svelte": "./dist/ui/usage/index.js"