@streamscloud/kit 0.81.0 → 0.81.1

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

@@ -14,6 +14,8 @@ export declare class HtmlHelper {
     static pasteIntoInput(value: string, element: HTMLInputElement | HTMLTextAreaElement): void;
     /**
      * Sanitizes SVG markup and serializes it as XML, valid both inline in HTML and as a standalone `image/svg+xml` file.
+     * The result never loads anything from outside the document: links and CSS may point only at `#fragment`s or embedded
+     * raster `data:image/…` URLs.
      * Returns null when the markup isn't a well-formed SVG document, or when there is no window.
      */
     static sanitizeSvg(svg: string): string | null;

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

@@ -1,6 +1,57 @@
 import dp from 'dompurify';
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const EMBEDDED_RASTER = /^data:image\/(png|jpeg|gif|webp|avif)[;,]/i;
+const CSS_EXTERNAL_LOADER = /@import|@font-face|image-set\(|image\(|src\(/;
+const CSS_URL_ARGUMENT = /url\([ \t\n\r\f]*['"]?([^'")]*)/g;
+const HTML_INTEGRATION_POINTS = new Set(['title', 'desc']);
 const isSvgRoot = (element) => element?.localName === 'svg' && element.namespaceURI === SVG_NAMESPACE;
+const isInDocumentReference = (url) => url.startsWith('#') || EMBEDDED_RASTER.test(url);
+const decodeCssEscapes = (css) => css.replace(/\\(?:([0-9a-f]{1,6})[ \t\n\r\f]?|\r\n|([\s\S]))/gi, (_escape, hex, char) => {
+    if (hex) {
+        const codePoint = parseInt(hex, 16);
+        return codePoint > 0 && codePoint <= 0x10ffff ? String.fromCodePoint(codePoint) : '�';
+    }
+    return char === '\n' || char === '\r' || char === '\f' || char === undefined ? '' : char;
+});
+const cssLoadsExternalResource = (css) => {
+    const decoded = decodeCssEscapes(css).toLowerCase();
+    return CSS_EXTERNAL_LOADER.test(decoded) || [...decoded.matchAll(CSS_URL_ARGUMENT)].some(([, url]) => !isInDocumentReference(url));
+};
+const convertCdataSectionsToText = (root) => {
+    for (const element of [root, ...root.querySelectorAll('*')]) {
+        for (const child of [...element.childNodes]) {
+            if (child.nodeType === Node.CDATA_SECTION_NODE) {
+                child.replaceWith(child.textContent ?? '');
+            }
+        }
+    }
+};
+const isRemovableElement = (element) => {
+    if (HTML_INTEGRATION_POINTS.has(element.parentElement?.localName.toLowerCase() ?? '')) {
+        return true;
+    }
+    const css = element.textContent ?? '';
+    return element.localName.toLowerCase() === 'style' && (element.firstElementChild !== null || !css.trim() || cssLoadsExternalResource(css));
+};
+const isRemovableAttribute = (element, attribute) => {
+    if (attribute.localName.toLowerCase() !== 'href') {
+        return cssLoadsExternalResource(attribute.value);
+    }
+    return element.localName.toLowerCase() === 'image' ? !EMBEDDED_RASTER.test(attribute.value) : !isInDocumentReference(attribute.value);
+};
+const stripExternalLoadsAndHtmlBreakouts = (root) => {
+    for (const element of [root, ...root.querySelectorAll('*')]) {
+        if (isRemovableElement(element)) {
+            element.remove();
+            continue;
+        }
+        for (const attribute of [...element.attributes]) {
+            if (isRemovableAttribute(element, attribute)) {
+                element.removeAttributeNode(attribute);
+            }
+        }
+    }
+};
 export class HtmlHelper {
     static clearSelection() {
         if (window.getSelection) {
@@ -9,11 +60,9 @@ export class HtmlHelper {
                 return;
             }
             if (selection.empty) {
-                // Chrome
                 selection.empty();
             }
             else if (selection.removeAllRanges) {
-                // Firefox
                 selection.removeAllRanges();
             }
         }
@@ -70,6 +119,8 @@ export class HtmlHelper {
     }
     /**
      * Sanitizes SVG markup and serializes it as XML, valid both inline in HTML and as a standalone `image/svg+xml` file.
+     * The result never loads anything from outside the document: links and CSS may point only at `#fragment`s or embedded
+     * raster `data:image/…` URLs.
      * Returns null when the markup isn't a well-formed SVG document, or when there is no window.
      */
     static sanitizeSvg(svg) {
@@ -80,8 +131,11 @@ export class HtmlHelper {
         if (!isSvgRoot(parsed.documentElement) || parsed.getElementsByTagName('parsererror').length) {
             return null;
         }
+        convertCdataSectionsToText(parsed.documentElement);
         const sanitized = dp.sanitize(parsed.documentElement, {
             USE_PROFILES: { svg: true, svgFilters: true },
+            ADD_TAGS: ['use'],
+            FORBID_TAGS: ['font'],
             ADD_ATTR: ['dominant-baseline'],
             RETURN_DOM_FRAGMENT: true
         });
@@ -89,6 +143,7 @@ export class HtmlHelper {
         if (!isSvgRoot(root)) {
             return null;
         }
+        stripExternalLoadsAndHtmlBreakouts(root);
         return new XMLSerializer().serializeToString(root);
     }
     static sanitizeHtml(html) {
@@ -101,7 +156,6 @@ export class HtmlHelper {
         html = HtmlHelper.sanitizeHtml(html);
         const tmp = document.createElement('div');
         tmp.innerHTML = html;
-        // move element out of visible area
         tmp.style.position = 'fixed';
         tmp.style.left = '200%';
         // element should be appended into the DOM otherwise element.innerText doesn't contain line breaks (\n) (at least at Chrome)
@@ -119,21 +173,21 @@ export class HtmlHelper {
     }
 }
 class HtmlSanitizer {
-    static initialized = false;
+    static _initialized = false;
     static sanitize(html) {
-        HtmlSanitizer.ensureInitialized();
+        HtmlSanitizer._ensureInitialized();
         return dp.sanitize(html, {
             ADD_ATTR: ['target']
         });
     }
-    static ensureInitialized() {
-        if (!HtmlSanitizer.initialized) {
+    static _ensureInitialized() {
+        if (!HtmlSanitizer._initialized) {
             dp.addHook('afterSanitizeAttributes', (node) => {
                 if (node.tagName === 'A' && node.hasAttribute('target')) {
                     node.setAttribute('rel', 'noopener noreferrer');
                 }
             });
-            HtmlSanitizer.initialized = true;
+            HtmlSanitizer._initialized = true;
         }
     }
 }

package/dist/styles/_mixins.scss

@@ -50,6 +50,18 @@
   }
 }
 
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 @mixin absolute-fill {
   position: absolute;
   inset: 0;

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

@@ -8,7 +8,7 @@ import IconColorF from '@fluentui/svg-icons/icons/color_20_regular.svg?raw';
 import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
 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 } = $props();
+let { value, variant = 'fill', label, size = 'md', defaultColor, clearable = false, disabled = false, placeholder, on, children, previewIcon, 'aria-label': ariaLabel } = $props();
 const loc = new ColorPickerLocalization();
 const displayColor = $derived(value || defaultColor || '');
 const textColor = $derived.by(() => {
@@ -45,7 +45,7 @@ const onColorPickerInput = ({ hex }) => {
 </script>
 
 <div class="color-picker">
-  <Popover position="bottom-start" keepOpen panel={false} fixedPosition disabled={disabled}>
+  <Popover position="bottom-start" keepOpen panel={false} fixedPosition disabled={disabled} aria-label={ariaLabel}>
     {#snippet trigger()}
       <div class="color-picker__trigger">
         {#if children}

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

@@ -25,6 +25,8 @@ type Props = {
      * droplet glyph. Same shape as Input's `icon` prop (Rule 9).
      */
     previewIcon?: string | Snippet;
+    /** Accessible name of the trigger — otherwise it is announced by its color value only. */
+    'aria-label'?: string;
 };
 /**
  * A color picker with an Input-shaped swatch trigger that opens a popover hosting a full hex/rgb picker

package/dist/ui/dialog/cmp.dialog-container.svelte

@@ -37,10 +37,18 @@ const handleBackdropClick = (event) => {
         dialog.controller.cancel();
     }
 };
+const opener = document.activeElement;
+const restoreFocus = () => {
+    if (opener instanceof HTMLElement && opener.isConnected && (document.activeElement ?? document.body) === document.body) {
+        opener.focus();
+    }
+};
 $effect(() => {
     if (dialogElement && !dialogElement.open) {
         dialogElement.showModal();
     }
+    // Deferred: closeAll tears the outer dialog down first, while focus is still inside the inner one.
+    return () => queueMicrotask(restoreFocus);
 });
 $effect(() => {
     const handleNavigateBack = () => {
@@ -82,6 +90,7 @@ const isStretchContent = $derived(position === 'full-screen' || position === 'fu
   class:dialog-container--position-full-height={position === 'full-height'}
   class:dialog-container--position-side-left={position === 'side-left'}
   class:dialog-container--position-side-right={position === 'side-right'}
+  aria-labelledby={dialog.controller.titleId}
   oncancel={handleCancel}
   onclick={handleBackdropClick}
   style:--dialog-container--custom-width={customWidth}>

package/dist/ui/dialog/cmp.dialog.svelte

@@ -9,7 +9,7 @@ const showCloseButton = $derived(!hideCloseButton && !controller.settings.nonCan
   {:else if title || showCloseButton}
     <div class="dialog__header">
       {#if title}
-        <div class="dialog__title">
+        <div id={controller.titleId} class="dialog__title">
           {@render title()}
         </div>
       {/if}

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

@@ -12,7 +12,7 @@ declare function $$render<TResult = void, TCancelResult = void>(): {
         body?: Snippet;
         /** Footer content rendered at the bottom (typically action buttons) */
         footer?: Snippet;
-        /** Replaces the entire default header (title + close button) */
+        /** Replaces the entire default header (title + close button). Put `id={controller.titleId}` on your title — the dialog is named by it. */
         headerSection?: Snippet;
         /** Replaces the entire default body wrapper */
         bodySection?: Snippet;

package/dist/ui/dialog/dialog-controller.d.ts

@@ -1,6 +1,8 @@
 import { DialogContainerSettings, DialogSettings, type DialogResult } from './types.svelte';
 export declare class DialogController<TResult = void, TCancelResult = void> {
     readonly dialogId: number | string;
+    /** Id for the element holding the dialog's title — the dialog is labeled by it. */
+    readonly titleId: string;
     settings: DialogSettings;
     containerSettings: DialogContainerSettings;
     private _onClose;

package/dist/ui/dialog/dialog-controller.js

@@ -2,6 +2,8 @@ import { Deferred } from '../../core/deferred';
 import { DialogContainerSettings, DialogSettings } from './types.svelte';
 export class DialogController {
     dialogId;
+    /** Id for the element holding the dialog's title — the dialog is labeled by it. */
+    titleId;
     settings;
     containerSettings;
     _onClose;
@@ -11,6 +13,7 @@ export class DialogController {
     _isClosed = false;
     constructor(init) {
         this.dialogId = init.id;
+        this.titleId = `sc-kit-dialog-title-${String(init.id).replace(/[^\w-]/g, '')}`;
         this._onClose = init.onClose;
         this._explicitSettings = init.settings;
         this._explicitContainerSettings = init.containerSettings;

package/dist/ui/dialog/layout/cmp.frameless-dialog.svelte

@@ -9,7 +9,7 @@ let { controller, title, hideCloseButton = false, children, footer } = $props();
         {#if !hideCloseButton}
           <span class="frameless-dialog__close"><DialogCloseButton controller={controller} /></span>
         {/if}
-        <div class="frameless-dialog__title" class:frameless-dialog__title--no-close={hideCloseButton}>{title}</div>
+        <div id={controller.titleId} class="frameless-dialog__title" class:frameless-dialog__title--no-close={hideCloseButton}>{title}</div>
         {@render children()}
       </div>
     {/snippet}

package/dist/ui/dialog/layout/cmp.stepper-dialog.svelte

@@ -59,7 +59,7 @@ const handleStepClick = (clicked) => {
           <span class="stepper-dialog__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
         {/if}
         <div class="stepper-dialog__title-block">
-          <div class="stepper-dialog__title">{title}</div>
+          <div id={controller.titleId} class="stepper-dialog__title">{title}</div>
           {#if subtitle}
             <div class="stepper-dialog__subtitle">{subtitle}</div>
           {/if}

package/dist/ui/file-uploader/cmp.file-uploader.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">import { deriveAccept, FileValidator } from '../../core/files';
 import { Icon } from '../icon';
+import { FileUploaderLocalization } from './file-uploader-localization';
 import IconArrowUpload from '@fluentui/svg-icons/icons/arrow_upload_24_regular.svg?raw';
 const { multiple = false, validationRules, disabled = false, title = '', description = '', on } = $props();
+const localization = new FileUploaderLocalization();
 const accept = $derived(deriveAccept(validationRules ?? []));
 let inputRef = $state.raw(undefined);
 let dragOver = $state(false);
@@ -90,6 +92,7 @@ const handleDrop = (e) => {
     class:file-uploader__zone--drag={dragOver && !dragInvalid}
     class:file-uploader__zone--drag-invalid={dragOver && dragInvalid}
     disabled={disabled}
+    aria-label={title || description ? undefined : localization.selectFiles}
     onclick={() => inputRef?.click()}
     ondragenter={handleDragEnter}
     ondragleave={handleDragLeave}
@@ -100,8 +103,8 @@ const handleDrop = (e) => {
     </span>
     {#if title}<span class="file-uploader__title">{title}</span>{/if}
     {#if description}<span class="file-uploader__desc">{description}</span>{/if}
-    <input bind:this={inputRef} class="file-uploader__input" type="file" multiple={multiple} accept={accept} disabled={disabled} onchange={handleInput} />
   </button>
+  <input bind:this={inputRef} class="file-uploader__input" type="file" multiple={multiple} accept={accept} disabled={disabled} onchange={handleInput} />
 </div>
 
 <!--

package/dist/ui/file-uploader/file-uploader-localization.d.ts

@@ -1,4 +1,5 @@
 export declare class FileUploaderLocalization {
     get uploadingHint(): string;
+    get selectFiles(): string;
     removeAria(name: string): string;
 }

package/dist/ui/file-uploader/file-uploader-localization.js

@@ -7,12 +7,19 @@ const loc = {
     removeAria: {
         en: 'Remove {name}',
         no: 'Fjern {name}'
+    },
+    selectFiles: {
+        en: 'Select files',
+        no: 'Velg filer'
     }
 };
 export class FileUploaderLocalization {
     get uploadingHint() {
         return loc.uploadingHint[AppLocale.current];
     }
+    get selectFiles() {
+        return loc.selectFiles[AppLocale.current];
+    }
     removeAria(name) {
         return loc.removeAria[AppLocale.current].replace('{name}', name);
     }

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

@@ -1,45 +1,30 @@
 <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, hint, required = false, validateOn, debounceMs, disableTouchedTracking, errorPlacement, on, children } = $props();
+let { handler, name, label, hint, required = false, validateOn, debounceMs, disableTouchedTracking, errorPlacement, on, children: field } = $props();
 </script>
 
-<FormField label={label} hint={hint} required={required}>
-  <Validatable
-    handler={handler}
-    name={name}
-    validateOn={validateOn}
-    debounceMs={debounceMs}
-    disableTouchedTracking={disableTouchedTracking}
-    errorPlacement={errorPlacement}
-    on={on}
-    children={children} />
-</FormField>
+<Validatable
+  handler={handler}
+  name={name}
+  validateOn={validateOn}
+  debounceMs={debounceMs}
+  disableTouchedTracking={disableTouchedTracking}
+  errorPlacement={errorPlacement}
+  on={on}>
+  {#snippet children(binding, validating)}
+    <FormField label={label} hint={hint} required={required}>
+      <span class="form-field-validatable__control">{@render field(binding, validating)}</span>
+    </FormField>
+  {/snippet}
+</Validatable>
 
 <!--
 @component
-FormFieldValidatable — convenience wrapper that composes `<FormField>` and `<Validatable>` in a single component. Reduces the 3-level nesting (FormField → Validatable → Input) to a flat callsite when you need both a label and validation binding.
-
-### Usage
-```svelte
-<FormFieldValidatable {handler} name="email" label="Email" required>
-  {#snippet children(field)}
-    <Input {...field} type="email" placeholder="you@example.com" />
-  {/snippet}
-</FormFieldValidatable>
-```
-
-The snippet takes a second `validating: boolean` argument — true from the value change until the validator has caught up, debounce window included. See `Validatable` for what it drives.
-
-Identical visual output to:
-```svelte
-<FormField label="Email" required>
-  <Validatable {handler} name="email">
-    {#snippet children(field)}
-      <Input {...field} type="email" placeholder="you@example.com" />
-    {/snippet}
-  </Validatable>
-</FormField>
-```
-
-Both `FormField`'s label/required and `Validatable`'s error slot (`errorPlacement`) apply unchanged — this cmp adds no styling, just collapses the wiring.
+FormFieldValidatable — `FormField` and `Validatable` in one component: a label plus a validated field, with the error message outside the `<label>`, so
+screen readers announce it as the field's description rather than as part of the field's name. Composing them by hand keeps that only with `Validatable` on
+the outside and `FormField` inside its snippet.
 -->
+
+<style>.form-field-validatable__control {
+  display: block;
+}</style>

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

@@ -50,31 +50,9 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 /**
- * FormFieldValidatable — convenience wrapper that composes `<FormField>` and `<Validatable>` in a single component. Reduces the 3-level nesting (FormField → Validatable → Input) to a flat callsite when you need both a label and validation binding.
- *
- * ### Usage
- * ```svelte
- * <FormFieldValidatable {handler} name="email" label="Email" required>
- * {#snippet children(field)}
- *   <Input {...field} type="email" placeholder="you@example.com" />
- * {/snippet}
- * </FormFieldValidatable>
- * ```
- *
- * The snippet takes a second `validating: boolean` argument — true from the value change until the validator has caught up, debounce window included. See `Validatable` for what it drives.
- *
- * Identical visual output to:
- * ```svelte
- * <FormField label="Email" required>
- * <Validatable {handler} name="email">
- *   {#snippet children(field)}
- *     <Input {...field} type="email" placeholder="you@example.com" />
- *   {/snippet}
- * </Validatable>
- * </FormField>
- * ```
- *
- * Both `FormField`'s label/required and `Validatable`'s error slot (`errorPlacement`) apply unchanged — this cmp adds no styling, just collapses the wiring.
+ * FormFieldValidatable — `FormField` and `Validatable` in one component: a label plus a validated field, with the error message outside the `<label>`, so
+ * screen readers announce it as the field's description rather than as part of the field's name. Composing them by hand keeps that only with `Validatable` on
+ * the outside and `FormField` inside its snippet.
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends Record<string, unknown>, K extends keyof T & string> = InstanceType<typeof Cmp<T, K>>;

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

@@ -3,8 +3,7 @@
 const INTERACTIVE_CONTENT = 'a[href], audio[controls], button, details, embed, iframe, img[usemap], input:not([type="hidden"]), label, select, textarea, video[controls]';
 </script>
 
-<script lang="ts">import { DomHelper } from '../../core/utils';
-import { Icon } from '../icon';
+<script lang="ts">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();
@@ -15,10 +14,9 @@ const swallowClick = (event) => {
     event.stopPropagation();
     // This click never reaches guardLabelActivation, so the flag would outlive the gesture and swallow a later keyboard-activated click.
     swallowLabelActivation = false;
-    if (DomHelper.isInsideInteractive(event.target)) {
-        return;
+    if (forwardsLabelActivation(event.target)) {
+        event.preventDefault();
     }
-    event.preventDefault();
 };
 const forwardsLabelActivation = (target) => {
     if (!(target instanceof Element)) {
@@ -53,9 +51,15 @@ $effect(() => {
 const guardLabelActivation = (event) => {
     const swallow = swallowLabelActivation;
     swallowLabelActivation = false;
-    if (swallow && forwardsLabelActivation(event.target)) {
+    if (!forwardsLabelActivation(event.target)) {
+        return;
+    }
+    // The label's control is the group's first radio: forwarding the click would select it instead of keeping the current choice.
+    const radio = rootEl?.control?.getAttribute('role') === 'radio' ? rootEl.control : null;
+    if (swallow || radio) {
         event.preventDefault();
     }
+    radio?.closest('[role="radiogroup"]')?.querySelector('[role="radio"][tabindex="0"]')?.focus();
 };
 </script>
 
@@ -76,7 +80,9 @@ const guardLabelActivation = (event) => {
         <span class="form-field__hint" onclick={swallowClick}>
           {#if typeof hint === 'string'}
             <Tooltip text={hint}>
-              <Icon src={IconInfo} size="sm" color="muted" />
+              <span class="form-field__hint-trigger" role="button" tabindex="0" aria-label={hint}>
+                <Icon src={IconInfo} size="sm" color="muted" />
+              </span>
             </Tooltip>
           {:else}
             {@render hint()}
@@ -91,11 +97,8 @@ const guardLabelActivation = (event) => {
 
 <!--
 @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.
-
-Clicking the label opens a popup field inside it (select, date picker, color picker) but never re-opens one that is already expanded — that click dismisses it, exactly like a click on empty space. The same guard keeps a drag that starts inside an expanded panel from closing it, so a color picker's gradient and its hue / alpha bars stay usable when the pointer leaves the panel. A nested `<label>` — a `Checkbox` sitting next to the popup field — keeps its own activation either way. HTML forbids a `<label>` inside a `<label>`, so that pairing is tolerated rather than recommended: give the `Checkbox` its own row outside the `FormField` when you can.
-
-`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.
+FormField — a label above an input slot. The root is a `<label>`, so the first labelable control inside is associated without id wiring; a label click never
+re-opens an already expanded popup field. It renders no errors — put it inside `Validatable` (or use `FormFieldValidatable`) for that.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -136,4 +139,12 @@ Clicking the label opens a popup field inside it (select, date picker, color pic
   margin-inline-start: auto;
   color: var(--_ff--hint-color);
   font-weight: var(--sc-kit--font-weight--regular);
+}
+.form-field__hint-trigger {
+  display: inline-flex;
+  border-radius: var(--sc-kit--radius--sm);
+}
+.form-field__hint-trigger:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
 }</style>

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

@@ -2,19 +2,19 @@ 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. */
+    /** Affordance pinned to the trailing edge of the label row — rendered only alongside a `label`. String renders the standard info icon — keyboard-focusable, named by the text — 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. */
+    /**
+     * Input slot. The wrapping `<label>` implicitly associates with the first labelable control inside (HTML standard), so no id wiring is needed.
+     * A control made of several fields (`SegmentedControl`, `PinInput`) is not named by it — give it its own `aria-label`.
+     */
     children: Snippet;
 };
 /**
- * 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.
- *
- * Clicking the label opens a popup field inside it (select, date picker, color picker) but never re-opens one that is already expanded — that click dismisses it, exactly like a click on empty space. The same guard keeps a drag that starts inside an expanded panel from closing it, so a color picker's gradient and its hue / alpha bars stay usable when the pointer leaves the panel. A nested `<label>` — a `Checkbox` sitting next to the popup field — keeps its own activation either way. HTML forbids a `<label>` inside a `<label>`, so that pairing is tolerated rather than recommended: give the `Checkbox` its own row outside the `FormField` when you can.
- *
- * `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.
+ * FormField — a label above an input slot. The root is a `<label>`, so the first labelable control inside is associated without id wiring; a label click never
+ * re-opens an already expanded popup field. It renders no errors — put it inside `Validatable` (or use `FormFieldValidatable`) for that.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/navigation/cmp.nav-rail-item.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">import { IconSlot } from '../icon';
+import { NavRailItemLocalization } from './nav-rail-item-localization';
 const { label, icon, href, active = false, error = false, disabled = false, target, rel, on } = $props();
+const localization = new NavRailItemLocalization();
 const handleClick = (event) => {
     if (disabled) {
         return;
@@ -11,6 +13,9 @@ const handleClick = (event) => {
 {#snippet tile()}
   <span class="nav-rail-item__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
   <span class="nav-rail-item__label">{label}</span>
+  {#if error}
+    <span class="nav-rail-item__error-text">{localization.hasError}</span>
+  {/if}
 {/snippet}
 
 {#if href && !disabled}
@@ -122,4 +127,16 @@ CSS variables (settable on the parent rail or any ancestor).
   font-size: var(--_nav-rail--item-label-size);
   line-height: var(--sc-kit--leading--tight);
   white-space: nowrap;
+}
+
+.nav-rail-item__error-text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }</style>

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

@@ -7,7 +7,7 @@ type Props = {
     href?: string;
     /** Highlight as the current section. Consumer-controlled. @default false */
     active?: boolean;
-    /** Paint the tile in the danger color to signal an error in its section. @default false */
+    /** Paint the tile in the danger color to signal an error in its section; screen readers hear it as part of the label. @default false */
     error?: boolean;
     disabled?: boolean;
     /** Anchor target — only relevant when `href` is set. */

package/dist/ui/navigation/cmp.nav-rail.svelte

@@ -5,7 +5,7 @@
 import { NavRailLocalization } from './nav-rail-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
-const { brand, children, footerToggles } = $props();
+const { brand, children, footerToggles, 'aria-label': ariaLabel } = $props();
 const localization = new NavRailLocalization();
 const SCROLL_STEP = 120;
 let listNode = $state(null);
@@ -33,7 +33,7 @@ const scrollDown = () => {
 };
 </script>
 
-<div class="nav-rail" role="navigation">
+<div class="nav-rail" role="navigation" aria-label={ariaLabel}>
   {#if brand}
     <div class="nav-rail__brand">
       {@render brand()}
@@ -41,7 +41,7 @@ const scrollDown = () => {
   {/if}
   <div class="nav-rail__scroll-area">
     {#if canScrollUp}
-      <button type="button" class="nav-rail__scroll-btn nav-rail__scroll-btn--up" onclick={scrollUp} aria-label={localization.scrollUp}>
+      <button type="button" class="nav-rail__scroll-btn nav-rail__scroll-btn--up" tabindex="-1" onclick={scrollUp} aria-label={localization.scrollUp}>
         <Icon src={IconChevronUp} size="sm" />
       </button>
     {/if}
@@ -55,7 +55,7 @@ const scrollDown = () => {
       {@render children()}
     </div>
     {#if canScrollDown}
-      <button type="button" class="nav-rail__scroll-btn nav-rail__scroll-btn--down" onclick={scrollDown} aria-label={localization.scrollDown}>
+      <button type="button" class="nav-rail__scroll-btn nav-rail__scroll-btn--down" tabindex="-1" onclick={scrollDown} aria-label={localization.scrollDown}>
         <Icon src={IconChevronDown} size="sm" />
       </button>
     {/if}

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

@@ -13,6 +13,8 @@ type Props = {
     children: Snippet;
     /** Icon-only toggle buttons stacked at the bottom of the rail (e.g. expand panel, account). */
     footerToggles?: NavRailFooterToggle[];
+    /** Accessible name of the navigation landmark — needed when the page has more than one navigation. */
+    'aria-label'?: string;
 };
 /**
  * NavRail — first-level icon-and-label navigation column for app shells. 70px wide by default;