@streamscloud/kit 0.89.1 → 0.90.1

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 { claimFormFieldLabel, 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,11 @@ 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 fallbackId = $props.id();
+const controlId = $derived(id ?? fallbackId);
+claimFormFieldLabel(() => controlId);
 const localization = new SingleselectLocalization();
 const selectedOption = $derived(mode.value ?? null);
 const selectionLabel = $derived(selectedOption?.label ?? '');
@@ -101,10 +106,11 @@ 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}
-    id={id}
+    id={controlId}
     name={name}
     autocomplete={autocomplete}
     placeholder={inputPlaceholder}

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 { claimFormFieldLabel, 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,12 @@ 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();
+const fallbackId = $props.id();
+const controlId = $derived(id ?? fallbackId);
+claimFormFieldLabel(() => controlId);
+stopFormFieldLabelHere();
 const localization = new MultiselectLocalization();
 const isPicked = (v) => value.some((existing) => compare(existing.value, v));
 const hasValue = $derived(value.length > 0);
@@ -225,10 +231,11 @@ 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}
-      id={id}
+      id={controlId}
       name={name}
       autocomplete={autocomplete}
       placeholder={!hasValue && !core.isFiltering ? placeholder : ''}

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

@@ -1,4 +1,5 @@
-<script lang="ts" generics="T">import { Icon } from '../icon';
+<script lang="ts" generics="T">import { isInsideLabelOf } from '../_internal/form-field-label-context';
+import { Icon } from '../icon';
 import { SelectListboxLocalization } from './select-listbox-localization';
 import { autoUpdate, computePosition, flip, shift, size as floatingSize } from '@floating-ui/dom';
 import IconAdd from '@fluentui/svg-icons/icons/add_16_regular.svg?raw';
@@ -71,7 +72,7 @@ $effect(() => {
         if (!target) {
             return;
         }
-        if (triggerEl?.contains(target) || panelEl?.contains(target)) {
+        if (triggerEl?.contains(target) || panelEl?.contains(target) || isInsideLabelOf(target, triggerEl)) {
             return;
         }
         on.dismiss();
@@ -119,11 +120,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/tree/cmp.tree-node-view.svelte

@@ -195,6 +195,7 @@ const handleActionsClosed = () => {
     class:tree-node__leaf--draggable={node.drag}
     class:tree-node__leaf--expandable={children.length}
     class:tree-node__leaf--drag-over={dragOver}
+    class:tree-node__leaf--with-actions={actionsShown}
     draggable={!!node.drag && !node.renaming}
     ondragstart={handleDragStart}
     ondragend={handleDragEnd}
@@ -307,7 +308,6 @@ const handleActionsClosed = () => {
   --_tree-node--padding-inline: var(--sc-kit--tree-node--padding-inline, 0.5rem);
   --_tree-node--padding-block: var(--sc-kit--tree-node--padding-block, 0.375rem);
   --_tree-node--indent: var(--sc-kit--tree-node--indent, 1rem);
-  --_tree-node--action-opacity: 0;
   position: relative;
   width: 100%;
   color: var(--sc-kit--color--text--primary);
@@ -325,17 +325,25 @@ const handleActionsClosed = () => {
   transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .tree-node__leaf:hover {
-  --_tree-node--action-opacity: 1;
   color: var(--sc-kit--color--text--primary);
   background: var(--sc-kit--color--bg--hover);
 }
 .tree-node__leaf--active {
-  --_tree-node--action-opacity: 1;
   color: var(--sc-kit--color--text--primary);
   background: var(--sc-kit--color--bg--active);
 }
-.tree-node__leaf:focus-within {
-  --_tree-node--action-opacity: 1;
+@media (any-hover: hover) {
+  .tree-node__leaf--with-actions:not(:hover, :has(:global(:focus-visible)), :has(.node-actions--opened)) .node-actions, .tree-node__leaf--with-actions:is(:hover, :has(:global(:focus-visible)), :has(.node-actions--opened)) .tree-node__count {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 }
 .tree-node__leaf:has(.tree-node__anchor:focus-visible) {
   outline: 2px solid var(--sc-kit--color--border--focus);
@@ -433,11 +441,6 @@ const handleActionsClosed = () => {
   flex-shrink: 0;
   align-items: center;
   margin-left: var(--sc-kit--space--1);
-  opacity: var(--_tree-node--action-opacity);
-  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
-}
-.node-actions--opened {
-  opacity: 1;
 }
 .node-actions__trigger {
   --sc-kit--icon--size: 1rem;
@@ -452,9 +455,4 @@ const handleActionsClosed = () => {
 .node-actions__trigger:hover {
   background: var(--sc-kit--color--bg--active);
   color: var(--sc-kit--color--text--primary);
-}
-@media (any-hover: none) {
-  .node-actions {
-    opacity: 1;
-  }
 }</style>

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