@streamscloud/kit 0.90.0 → 0.90.1

package/dist/ui/_internal/form-field-label-context/form-field-label-context.svelte.d.ts

@@ -11,5 +11,7 @@ export declare const getFormFieldLabel: () => FormFieldLabelContext | undefined;
 export declare const claimFormFieldLabel: (controlId: () => string) => void;
 /** The `aria-labelledby` of a control that is not a text input: the explicit one, else the FormField label's id — unless an explicit `aria-label` names it. */
 export declare const resolveAriaLabelledby: (formFieldLabel: FormFieldLabelContext | undefined, ariaLabel: string | undefined, ariaLabelledby: string | undefined) => string | undefined;
+/** Whether `target` sits in a `<label>` whose `for` control lies inside `controlRoot` — a press there belongs to that control, not outside it. */
+export declare const isInsideLabelOf: (target: Node, controlRoot: HTMLElement | undefined) => boolean;
 /** Below the calling component no control is named by the surrounding FormField label — for a field that renders other fields in its own panel. */
 export declare const stopFormFieldLabelHere: () => void;

package/dist/ui/_internal/form-field-label-context/form-field-label-context.svelte.js

@@ -14,6 +14,8 @@ export const claimFormFieldLabel = (controlId) => {
 };
 /** The `aria-labelledby` of a control that is not a text input: the explicit one, else the FormField label's id — unless an explicit `aria-label` names it. */
 export const resolveAriaLabelledby = (formFieldLabel, ariaLabel, ariaLabelledby) => ariaLabelledby ?? (ariaLabel ? undefined : formFieldLabel?.labelId);
+/** Whether `target` sits in a `<label>` whose `for` control lies inside `controlRoot` — a press there belongs to that control, not outside it. */
+export const isInsideLabelOf = (target, controlRoot) => target instanceof Element && !!controlRoot?.contains(target.closest('label')?.control ?? null);
 /** Below the calling component no control is named by the surrounding FormField label — for a field that renders other fields in its own panel. */
 export const stopFormFieldLabelHere = () => {
     setContext(KEY, undefined);

package/dist/ui/_internal/form-field-label-context/index.d.ts

@@ -1 +1 @@
-export { claimFormFieldLabel, getFormFieldLabel, provideFormFieldLabel, resolveAriaLabelledby, stopFormFieldLabelHere, type FormFieldLabelContext } from './form-field-label-context.svelte';
+export { claimFormFieldLabel, getFormFieldLabel, isInsideLabelOf, provideFormFieldLabel, resolveAriaLabelledby, stopFormFieldLabelHere, type FormFieldLabelContext } from './form-field-label-context.svelte';

package/dist/ui/_internal/form-field-label-context/index.js

@@ -1 +1 @@
-export { claimFormFieldLabel, getFormFieldLabel, provideFormFieldLabel, resolveAriaLabelledby, stopFormFieldLabelHere } from './form-field-label-context.svelte';
+export { claimFormFieldLabel, getFormFieldLabel, isInsideLabelOf, provideFormFieldLabel, resolveAriaLabelledby, stopFormFieldLabelHere } from './form-field-label-context.svelte';

package/dist/ui/color-picker/cmp.color-picker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { ColorHelper } from '../../core/utils';
-import { getFormFieldLabel, resolveAriaLabelledby, stopFormFieldLabelHere } from '../_internal/form-field-label-context';
+import { claimFormFieldLabel, getFormFieldLabel, resolveAriaLabelledby, stopFormFieldLabelHere } from '../_internal/form-field-label-context';
 import { Icon } from '../icon';
 import { Input } from '../input';
 import { Popover } from '../popover';
@@ -11,6 +11,8 @@ import { colord } from 'colord';
 import AwesomeColorPicker from 'svelte-awesome-color-picker';
 let { value, variant = 'fill', label, size = 'md', defaultColor, clearable = false, disabled = false, placeholder, on, children, previewIcon, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby } = $props();
 const formFieldLabel = getFormFieldLabel();
+const triggerId = $props.id();
+claimFormFieldLabel(() => triggerId);
 stopFormFieldLabelHere();
 const loc = new ColorPickerLocalization();
 const displayColor = $derived(value || defaultColor || '');
@@ -54,6 +56,7 @@ const onColorPickerInput = ({ hex }) => {
     panel={false}
     fixedPosition
     disabled={disabled}
+    id={triggerId}
     aria-label={ariaLabel}
     aria-labelledby={resolveAriaLabelledby(formFieldLabel, ariaLabel, ariaLabelledby)}>
     {#snippet trigger()}

package/dist/ui/date-picker/cmp.date-picker.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { getFormFieldLabel, resolveAriaLabelledby } from '../_internal/form-field-label-context';
+<script lang="ts">import { claimFormFieldLabel, getFormFieldLabel, isInsideLabelOf, resolveAriaLabelledby } from '../_internal/form-field-label-context';
 import { InputClearButton } from '../_internal/input-clear-button';
 import { Icon, IconSlot } from '../icon';
 import DatePickerCalendar from './cmp.date-picker-calendar.svelte';
@@ -7,6 +7,9 @@ import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/d
 import IconCalendar from '@fluentui/svg-icons/icons/calendar_16_regular.svg?raw';
 const { size = 'md', placeholder = '', disabled = false, readonly = false, inert = false, error = false, borderless = false, min, max, locale, name, id = null, autofocus = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-required': ariaRequired, icon, ...mode } = $props();
 const formFieldLabel = getFormFieldLabel();
+const fallbackId = $props.id();
+const controlId = $derived(id ?? fallbackId);
+claimFormFieldLabel(() => controlId);
 const localization = new DatePickerLocalization();
 /** Resolved locale: explicit prop or `'en-US'` default. */
 const resolvedLocale = $derived(locale ?? 'en-US');
@@ -95,7 +98,7 @@ $effect(() => {
         if (!target) {
             return;
         }
-        if (triggerEl?.contains(target) || panelEl?.contains(target)) {
+        if (triggerEl?.contains(target) || panelEl?.contains(target) || isInsideLabelOf(target, triggerEl)) {
             return;
         }
         open = false;
@@ -129,7 +132,7 @@ $effect(() => {
     bind:this={triggerEl}
     type="button"
     class="date-picker__trigger"
-    id={id}
+    id={controlId}
     disabled={disabled}
     inert={inert}
     autofocus={autofocus}

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

@@ -1,10 +1,11 @@
-<script lang="ts">import { Icon } from '../icon';
+<script lang="ts">import { isInsideLabelOf } from '../_internal/form-field-label-context';
+import { Icon } from '../icon';
 import { isIgnored } from './popover-ignore';
 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, tabbable = true, on, children, trigger, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby } = $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, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby } = $props();
 let opened = $state(false);
 let triggerEl = $state.raw(undefined);
 let contentEl = $state.raw(undefined);
@@ -106,7 +107,7 @@ $effect(() => {
         if (!target) {
             return;
         }
-        if (triggerEl?.contains(target) || contentEl?.contains(target)) {
+        if (triggerEl?.contains(target) || contentEl?.contains(target) || isInsideLabelOf(target, triggerEl)) {
             return;
         }
         close();
@@ -179,6 +180,7 @@ const handleBackdropClick = (e) => {
     type="button"
     class="popover__trigger"
     class:popover__trigger--fill={fillContainer}
+    id={id}
     disabled={disabled}
     tabindex={tabbable ? undefined : -1}
     aria-label={ariaLabel}

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

@@ -29,6 +29,7 @@ type Props = {
     children: Snippet;
     /** Content of the trigger `<button>`, so non-interactive only — `Button type="presentational"` for a button look. @default chevron-down icon */
     trigger?: Snippet;
+    id?: string;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 };

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts" generics="T">import { getFormFieldLabel, resolveAriaLabelledby } from '../_internal/form-field-label-context';
+<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';
@@ -12,6 +12,9 @@ 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-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 ?? '');
@@ -107,7 +110,7 @@ const showClear = $derived(mode.clearable && hasValue && isInteractive && !core.
     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/multiselect-base.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts" generics="T">import { getFormFieldLabel, resolveAriaLabelledby, stopFormFieldLabelHere } from '../_internal/form-field-label-context';
+<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';
@@ -16,6 +16,9 @@ import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_16_regular.s
 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-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));
@@ -232,7 +235,7 @@ const handleDndFinalize = (e) => {
       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-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();

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.90.0",
+  "version": "0.90.1",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",