@streamscloud/kit 0.89.0 → 0.90.0

package/dist/ui/select/cmp.input-suggest.svelte

@@ -2,10 +2,14 @@
 </script>
 
 <script lang="ts">import { HtmlHelper } from '../../core/utils';
+import { claimFormFieldLabel } from '../_internal/form-field-label-context';
 import { InputClearButton } from '../_internal/input-clear-button';
 import { IconSlot } from '../icon';
 import { default as SelectListbox } from './select-listbox.svelte';
 const { value, suggestions, size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, clearable = false, trim = true, icon, name, id, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+const fallbackId = $props.id();
+const controlId = $derived(id ?? fallbackId);
+claimFormFieldLabel(() => controlId);
 let inputEl = $state.raw(undefined);
 let rootEl = $state.raw(undefined);
 let isOpen = $state(false);
@@ -241,7 +245,7 @@ const handlePickRow = (row) => {
     aria-describedby={ariaDescribedby}
     aria-required={ariaRequired ? 'true' : undefined}
     aria-invalid={error ? 'true' : undefined}
-    id={id}
+    id={controlId}
     name={name}
     autocomplete={autocomplete}
     placeholder={placeholder}

package/dist/ui/select/cmp.input-suggest.svelte.d.ts

@@ -17,15 +17,12 @@ type Props = {
     size?: 'sm' | 'md' | 'lg';
     placeholder?: string;
     disabled?: boolean;
-    /** Non-editable but selectable; the popover never opens. */
     readonly?: boolean;
-    /** Visual display mode — non-focusable, no hover/focus animations. */
     inert?: boolean;
     /** Visual error state — also sets `aria-invalid="true"`. */
     error?: boolean;
     /** Strip border + background + focus underline. */
     borderless?: boolean;
-    /** Show the × clear button when the value is non-empty. */
     clearable?: boolean;
     /**
      * Strip leading / trailing whitespace when the value is committed — focus leaving the control or

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, searchable = false, groupHeader = 'toggle-all', selectionMode = 'children-only', selectedDisplay = 'checkbox', createOptions, 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', createOptions, icon, chevronIcon, optionSnippet, selectionSnippet, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
 const fuse = $derived(buildFuseIndex(options));
 const loadOptionsShim = (q) => Promise.resolve(runFuseSearch(fuse, q, options));
 // Include flat roots, not only groups — else a childless root can't be picked as a create-parent.
@@ -70,6 +70,7 @@ $effect(() => {
   name={name}
   autocomplete={autocomplete}
   aria-label={ariaLabel}
+  aria-labelledby={ariaLabelledby}
   aria-describedby={ariaDescribedby}
   aria-required={ariaRequired}
   on={{

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

@@ -21,11 +21,8 @@ declare function $$render<T>(): {
         size?: "sm" | "md" | "lg";
         /** Placeholder shown only when nothing is selected and the user is not typing. @default '' */
         placeholder?: string;
-        /** Fully disabled — no focus, no interaction, dimmed styling. @default false */
         disabled?: boolean;
-        /** Read-only — value visible, but selection cannot change. @default false */
         readonly?: boolean;
-        /** Inert subtree — non-interactive but unstyled. @default false */
         inert?: boolean;
         /** Visual error state (accent border + aria-invalid). @default false */
         error?: boolean;
@@ -81,6 +78,7 @@ declare function $$render<T>(): {
         name?: string;
         autocomplete?: HTMLInputAttributes["autocomplete"];
         'aria-label'?: string;
+        'aria-labelledby'?: string;
         'aria-describedby'?: string;
         'aria-required'?: boolean;
         on?: {

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

@@ -1,7 +1,8 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts" generics="T">import { InputClearButton } from '../_internal/input-clear-button';
+<script lang="ts" generics="T">import { getFormFieldLabel, resolveAriaLabelledby } from '../_internal/form-field-label-context';
+import { InputClearButton } from '../_internal/input-clear-button';
 import { Spinner } from '../_internal/spinner';
 import { Icon, IconSlot } from '../icon';
 import { createSelectCore } from './select-core.svelte';
@@ -9,7 +10,8 @@ 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, searchable = true, groupHeader = 'static', compare = defaultCompare, createOptions, 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, createOptions, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, ...mode } = $props();
+const formFieldLabel = getFormFieldLabel();
 const localization = new SingleselectLocalization();
 const selectedOption = $derived(mode.value ?? null);
 const selectionLabel = $derived(selectedOption?.label ?? '');
@@ -101,6 +103,7 @@ const showClear = $derived(mode.clearable && hasValue && isInteractive && !core.
     aria-activedescendant={core.isOpen ? `${listboxId}-row-${core.highlight}` : undefined}
     aria-autocomplete="list"
     aria-label={ariaLabel ?? name}
+    aria-labelledby={resolveAriaLabelledby(formFieldLabel, ariaLabel, ariaLabelledby)}
     aria-describedby={ariaDescribedby}
     aria-required={ariaRequired}
     aria-invalid={error ? 'true' : undefined}

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

@@ -15,7 +15,6 @@ declare function $$render<T>(): {
         /** 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;
         /** Currently selected option (pre-resolved — labels render before the first fetch lands). `null` when nothing is picked. */
         value: SelectOption<T> | null | undefined;
@@ -33,7 +32,6 @@ declare function $$render<T>(): {
         /** 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;
         /** Currently selected option — non-null. */
         value: SelectOption<T>;

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, searchable = true, groupHeader = 'static', createOptions, 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', createOptions, icon, chevronIcon, optionSnippet, selectionSnippet, listbox, id, name, autocomplete = 'off', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, '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(() => {
@@ -64,6 +64,7 @@ $effect(() => {
     name={name}
     autocomplete={autocomplete}
     aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledby}
     aria-describedby={ariaDescribedby}
     aria-required={ariaRequired}
     on={{
@@ -97,6 +98,7 @@ $effect(() => {
     name={name}
     autocomplete={autocomplete}
     aria-label={ariaLabel}
+    aria-labelledby={ariaLabelledby}
     aria-describedby={ariaDescribedby}
     aria-required={ariaRequired}
     on={{

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

@@ -11,7 +11,6 @@ declare function $$render<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;
         /** Current selection by value. `null` when nothing is picked. */
         value: T | null | undefined;
@@ -27,7 +26,6 @@ declare function $$render<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;
         /** Current selection by value — non-null. */
         value: T;

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

@@ -1,7 +1,8 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts" generics="T">import { Spinner } from '../_internal/spinner';
+<script lang="ts" generics="T">import { getFormFieldLabel, resolveAriaLabelledby, stopFormFieldLabelHere } from '../_internal/form-field-label-context';
+import { Spinner } from '../_internal/spinner';
 import { Button } from '../button';
 import { Icon, IconSlot } from '../icon';
 import { default as Singleselect } from './cmp.singleselect.svelte';
@@ -13,7 +14,9 @@ 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, searchable = true, groupHeader = 'static', compare = defaultCompare, selectionMode = 'children-only', selectedDisplay = 'checkmark', createOptions, 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', createOptions, 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-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, on } = $props();
+const formFieldLabel = getFormFieldLabel();
+stopFormFieldLabelHere();
 const localization = new MultiselectLocalization();
 const isPicked = (v) => value.some((existing) => compare(existing.value, v));
 const hasValue = $derived(value.length > 0);
@@ -225,6 +228,7 @@ const handleDndFinalize = (e) => {
       aria-activedescendant={core.isOpen ? `${listboxId}-row-${core.highlight}` : undefined}
       aria-autocomplete="list"
       aria-label={ariaLabel ?? name}
+      aria-labelledby={resolveAriaLabelledby(formFieldLabel, ariaLabel, ariaLabelledby)}
       aria-describedby={ariaDescribedby}
       aria-required={ariaRequired}
       aria-invalid={error ? 'true' : undefined}

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

@@ -286,8 +286,6 @@ export function createSelectCore(config) {
     };
     const handleFocus = () => undefined;
     const handleClick = (e) => {
-        // Cancels FormField's <label> activation — else its synthetic click re-toggles the popover on every pick.
-        e.preventDefault();
         if (!config.getInteractive() || isFiltering) {
             return;
         }

package/dist/ui/select/select-listbox.svelte

@@ -119,11 +119,7 @@ $effect(() => {
     role="listbox"
     id={listboxId}
     tabindex="-1"
-    onclick={(e) => {
-      // preventDefault cancels an ancestor <label>'s activation — stopPropagation alone doesn't. FormField guards its own; a consumer's plain <label> does not.
-      e.preventDefault();
-      e.stopPropagation();
-    }}
+    onclick={(e) => e.stopPropagation()}
     onmousedown={(e) => {
       // Keeps the trigger root's mousedown preventDefault (select-core) off panel presses: without it a nested input in the panel never takes the caret and text selection dies.
       e.stopPropagation();

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

@@ -70,11 +70,8 @@ export type SingleselectCommonProps<T> = {
     size?: 'sm' | 'md' | 'lg';
     /** Placeholder shown only when nothing is selected and the user is not typing. @default '' */
     placeholder?: string;
-    /** Fully disabled — no focus, no interaction, dimmed styling. @default false */
     disabled?: boolean;
-    /** Read-only — focusable, value visible, but selection cannot change. @default false */
     readonly?: boolean;
-    /** Inert subtree — non-interactive but unstyled (use for "view-only" parents). @default false */
     inert?: boolean;
     /** Visual error state (accent border + aria-invalid). @default false */
     error?: boolean;
@@ -119,6 +116,7 @@ export type SingleselectCommonProps<T> = {
     name?: string;
     autocomplete?: HTMLInputAttributes['autocomplete'];
     'aria-label'?: string;
+    'aria-labelledby'?: string;
     'aria-describedby'?: string;
     'aria-required'?: boolean;
 };
@@ -134,11 +132,8 @@ export type MultiselectBaseProps<T> = {
     size?: 'sm' | 'md' | 'lg';
     /** Placeholder shown only when nothing is selected and the user is not typing. @default '' */
     placeholder?: string;
-    /** Fully disabled — no focus, no interaction, dimmed styling. @default false */
     disabled?: boolean;
-    /** Read-only — value visible, but selection cannot change. @default false */
     readonly?: boolean;
-    /** Inert subtree — non-interactive but unstyled. @default false */
     inert?: boolean;
     /** Visual error state (accent border + aria-invalid). @default false */
     error?: boolean;
@@ -216,6 +211,7 @@ export type MultiselectBaseProps<T> = {
     name?: string;
     autocomplete?: HTMLInputAttributes['autocomplete'];
     'aria-label'?: string;
+    'aria-labelledby'?: string;
     'aria-describedby'?: string;
     'aria-required'?: boolean;
     on?: {

package/dist/ui/slider/cmp.slider.svelte

@@ -1,5 +1,8 @@
-<script lang="ts">"use strict";
-let { value, min = 0, max = 100, step = 1, disabled = false, showValue = false, withInput = false, ticks = [], valueSuffix = '', on } = $props();
+<script lang="ts">import { claimFormFieldLabel } from '../_internal/form-field-label-context';
+let { value, min = 0, max = 100, step = 1, disabled = false, showValue = false, withInput = false, ticks = [], valueSuffix = '', id, on } = $props();
+const fallbackId = $props.id();
+const controlId = $derived(id ?? fallbackId);
+claimFormFieldLabel(() => controlId);
 let focused = $state(false);
 const fillPct = $derived(max === min ? 0 : ((value - min) / (max - min)) * 100);
 const handleInput = (e) => {
@@ -25,6 +28,7 @@ const handleNumeric = (e) => {
     <input
       type="range"
       class="slider__input"
+      id={controlId}
       min={min}
       max={max}
       step={step}

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

@@ -15,6 +15,7 @@ type Props = {
     ticks?: string[];
     /** Suffix appended to the displayed value (e.g. ' %'). @default '' */
     valueSuffix?: string;
+    id?: string;
     on?: {
         change?: (value: number) => void;
         input?: (value: number) => void;

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

@@ -3,6 +3,5 @@ export type TabsSize = 'sm' | 'md';
 export type Tab<TValue = unknown> = {
     value: TValue;
     label: string;
-    /** Non-interactive — click does nothing. */
     disabled?: boolean;
 };

package/dist/ui/textarea/cmp.textarea.svelte

@@ -1,9 +1,13 @@
-<script lang="ts">import { HtmlHelper } from '../../core/utils';
+<script lang="ts">import { HtmlHelper, StringHelper } from '../../core/utils';
+import { claimFormFieldLabel } from '../_internal/form-field-label-context';
 import { InputEmojiPicker } from '../_internal/input-emoji-picker';
 const { value, size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, emoji = false, singleLine = false, submitOnEnter = false, trim = true, placeholder = '', name = '', id = null, autofocus = false, maxLength = null, rows = 3, autoresize = true, maxRows = 12, autocomplete, spellcheck, 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, on } = $props();
+const fallbackId = $props.id();
+const controlId = $derived(id ?? fallbackId);
+claimFormFieldLabel(() => controlId);
 let textareaEl = $state.raw(undefined);
-const sanitizeLineBreaks = (text) => text.replace(/[\r\n]+/g, ' ');
-const valueParsed = $derived(singleLine && value ? sanitizeLineBreaks(value) : (value ?? ''));
+const cleanText = $derived(singleLine ? StringHelper.toSingleLineText : StringHelper.toMultilineText);
+const valueParsed = $derived(singleLine && value ? cleanText(value) : (value ?? ''));
 const effectiveRows = $derived(singleLine ? 1 : rows);
 const trimOnCommit = $derived(trim && !disabled && !readonly && !inert);
 /** Imperative API exposed via `bind:this` on `<Textarea>`. */
@@ -38,6 +42,7 @@ const handleInput = () => {
     if (!textareaEl) {
         return;
     }
+    HtmlHelper.cleanElementValue(textareaEl, cleanText);
     resize();
     on?.input?.(textareaEl.value);
 };
@@ -62,21 +67,11 @@ const handleChange = () => {
     on?.change?.(textareaEl.value);
 };
 const handleBeforeInput = (e) => {
-    if (!singleLine || !textareaEl) {
-        return;
-    }
-    if (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph') {
-        e.preventDefault();
-        return;
-    }
-    if (e.data && /[\r\n]/.test(e.data)) {
+    if (singleLine && (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph')) {
         e.preventDefault();
-        const start = textareaEl.selectionStart;
-        const end = textareaEl.selectionEnd;
-        textareaEl.setRangeText(sanitizeLineBreaks(e.data), start, end, 'end');
-        textareaEl.dispatchEvent(new Event('input', { bubbles: true }));
     }
 };
+const handlePaste = (e) => HtmlHelper.pasteCleanedText(e, cleanText);
 const handleKeydown = (e) => {
     if (submitOnEnter && e.key === 'Enter' && !e.isComposing && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
         e.preventDefault();
@@ -116,7 +111,7 @@ const focusTextarea = () => textareaEl?.focus();
     use:initTextarea
     class="textarea__el"
     name={name}
-    id={id}
+    id={controlId}
     placeholder={placeholder}
     disabled={disabled}
     readonly={readonly}
@@ -134,6 +129,7 @@ const focusTextarea = () => textareaEl?.focus();
     oninput={handleInput}
     onchange={handleChange}
     onbeforeinput={handleBeforeInput}
+    onpaste={handlePaste}
     onkeydown={handleKeydown}
     onblur={handleBlur}
     onfocus={() => on?.focus?.()}></textarea>
@@ -157,6 +153,10 @@ point — `change`, blur, and before `on.submit` — so the value the consumer r
 what the field shows. Blank lines inside the text are left alone. Typing is untouched. Pass
 `trim={false}` to opt out.
 
+Entered text is cleaned as it arrives — typed, pasted or dropped: every line break (including Word's
+soft break) becomes `\n`, other control characters except tab are dropped. In `singleLine` mode line breaks and tabs
+become spaces instead.
+
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|

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

@@ -4,9 +4,7 @@ type Props = {
     /** @default 'md' */
     size?: 'sm' | 'md' | 'lg';
     disabled?: boolean;
-    /** Non-editable but selectable. */
     readonly?: boolean;
-    /** Visual display mode — non-focusable, no hover/focus animations. */
     inert?: boolean;
     /** Visual error state — also sets `aria-invalid="true"`. */
     error?: boolean;
@@ -67,6 +65,10 @@ type Props = {
  * what the field shows. Blank lines inside the text are left alone. Typing is untouched. Pass
  * `trim={false}` to opt out.
  *
+ * Entered text is cleaned as it arrives — typed, pasted or dropped: every line break (including Word's
+ * soft break) becomes `\n`, other control characters except tab are dropped. In `singleLine` mode line breaks and tabs
+ * become spaces instead.
+ *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|

package/dist/ui/toggle/cmp.toggle.svelte

@@ -1,6 +1,8 @@
-<script lang="ts">const { checked, size = 'md', disabled = false, presentational = false, layout = 'spread', label, sublabel, title, name, on } = $props();
+<script lang="ts">import { getFormFieldLabel } from '../_internal/form-field-label-context';
+const { checked, size = 'md', disabled = false, presentational = false, layout = 'spread', label, sublabel, title, name, on } = $props();
 const hasLabel = $derived(label !== undefined || sublabel !== undefined);
 const ariaLabel = $derived(typeof label === 'string' ? label : name);
+const formFieldLabel = getFormFieldLabel();
 const handleClick = (event) => {
     event.stopPropagation();
     if (disabled) {
@@ -8,7 +10,6 @@ const handleClick = (event) => {
     }
     on?.change?.(!checked);
 };
-export {};
 </script>
 
 {#snippet switchControl()}
@@ -25,6 +26,7 @@ export {};
       role="switch"
       aria-checked={checked}
       aria-label={ariaLabel}
+      aria-labelledby={hasLabel || ariaLabel ? undefined : formFieldLabel?.labelId}
       title={hasLabel ? undefined : title}
       disabled={disabled}
       onclick={handleClick}>

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

@@ -73,6 +73,5 @@ const field = $derived({
 <!--
 @component
 Binds any kit input to a `FormValidationHandler` through a render-prop snippet that receives the wired field, and renders the error message below
-it per `errorPlacement`. Inputs stay unaware of validation; around a `FormField`, keep `Validatable` on the outside so the error stays out of the
-field's name.
+it per `errorPlacement`. Inputs stay unaware of validation; with a label, `FormFieldValidatable` composes it with `FormField`.
 -->

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

@@ -77,8 +77,7 @@ interface $$IsomorphicComponent {
 }
 /**
  * Binds any kit input to a `FormValidationHandler` through a render-prop snippet that receives the wired field, and renders the error message below
- * it per `errorPlacement`. Inputs stay unaware of validation; around a `FormField`, keep `Validatable` on the outside so the error stays out of the
- * field's name.
+ * it per `errorPlacement`. Inputs stay unaware of validation; with a label, `FormFieldValidatable` composes it with `FormField`.
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends Record<string, unknown>, K extends keyof T & string> = InstanceType<typeof Cmp<T, K>>;

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

@@ -11,7 +11,6 @@ type Props = {
     loop?: boolean;
     /** Scroll ancestor for the IntersectionObserver */
     intersectionContainer?: HTMLElement;
-    /** Make the video non-interactive */
     inert?: boolean;
     /** Begin loading the video source before it scrolls into view */
     allowPreloading?: boolean;

package/dist/ui/visual-select/cmp.visual-select.svelte

@@ -1,5 +1,7 @@
-<script lang="ts" generics="T">import { Icon } from '../icon';
-const { options, cols = 3, disabled = false, compare, ...mode } = $props();
+<script lang="ts" generics="T">import { getFormFieldLabel, resolveAriaLabelledby } from '../_internal/form-field-label-context';
+import { Icon } from '../icon';
+const { options, cols = 3, disabled = false, compare, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...mode } = $props();
+const formFieldLabel = getFormFieldLabel();
 const eq = (a, b) => (compare ? compare(a, b) : a === b);
 const isSelected = (o) => {
     if (mode.multi) {
@@ -23,7 +25,13 @@ const toggle = (o) => {
 };
 </script>
 
-<div class="visual-select" class:visual-select--disabled={disabled} style:--_cols={cols} role={mode.multi ? 'group' : 'radiogroup'}>
+<div
+  class="visual-select"
+  class:visual-select--disabled={disabled}
+  style:--_cols={cols}
+  role={mode.multi ? 'group' : 'radiogroup'}
+  aria-label={ariaLabel}
+  aria-labelledby={resolveAriaLabelledby(formFieldLabel, ariaLabel, ariaLabelledby)}>
   {#each options as o (o.value)}
     {@const selected = isSelected(o)}
     <button

package/dist/ui/visual-select/cmp.visual-select.svelte.d.ts

@@ -14,10 +14,11 @@ declare function $$render<T>(): {
         }[];
         /** Tiles per row in the auto-grid. @default 3 */
         cols?: number;
-        /** Global disabled — every tile is non-interactive. */
         disabled?: boolean;
         /** Optional equality fn — defaults to `===`. Useful when `T` is a non-primitive. */
         compare?: (a: T, b: T) => boolean;
+        'aria-label'?: string;
+        'aria-labelledby'?: string;
     } & ({
         multi: false;
         value: T | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.89.0",
+  "version": "0.90.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -17,7 +17,8 @@
     "pack": "npm run build && npm pack",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json --fail-on-warnings --output machine && tsc -p tsconfig.node.json && eslint . --format codeframe --max-warnings 0 && prettier --check --plugin prettier-plugin-svelte --cache .",
-    "lint:fix": "eslint --fix . && prettier --write --plugin prettier-plugin-svelte ."
+    "check:fix": "npm run lint:fix && npm run check",
+    "lint:fix": "eslint --fix . && prettier --write --plugin prettier-plugin-svelte --cache ."
   },
   "files": [
     "dist"