@streamscloud/kit 0.89.1 → 0.90.0

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,6 +1,10 @@
 <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 cleanText = $derived(singleLine ? StringHelper.toSingleLineText : StringHelper.toMultilineText);
 const valueParsed = $derived(singleLine && value ? cleanText(value) : (value ?? ''));
@@ -107,7 +111,7 @@ const focusTextarea = () => textareaEl?.focus();
     use:initTextarea
     class="textarea__el"
     name={name}
-    id={id}
+    id={controlId}
     placeholder={placeholder}
     disabled={disabled}
     readonly={readonly}

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;

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.1",
+  "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"