@streamscloud/kit 0.80.0 → 0.81.1

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;

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

@@ -0,0 +1,3 @@
+export declare class NavRailItemLocalization {
+    get hasError(): string;
+}

package/dist/ui/navigation/nav-rail-item-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    hasError: {
+        en: 'Has errors',
+        no: 'Har feil'
+    }
+};
+export class NavRailItemLocalization {
+    get hasError() {
+        return loc.hasError[AppLocale.current];
+    }
+}

package/dist/ui/pin-input/cmp.pin-input.svelte

@@ -1,5 +1,6 @@
-<script lang="ts">"use strict";
-const { value, length = 6, mask = false, disabled = false, error = false, 'aria-label': ariaLabel, on } = $props();
+<script lang="ts">import { PinInputLocalization } from './pin-input-localization';
+const { value, length = 6, mask = false, disabled = false, error = false, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, on } = $props();
+const localization = new PinInputLocalization();
 let cells = $state([]);
 const cellValue = (i) => value[i] ?? '';
 const emit = (next) => {
@@ -61,6 +62,8 @@ const handleFocus = (e) => {
 <div class="pin-input" class:pin-input--disabled={disabled} class:pin-input--error={error} role="group" aria-label={ariaLabel}>
   {#each Array(length) as _, i (i)}
     <input
+      aria-label={localization.cellLabel(i + 1, length)}
+      aria-describedby={ariaDescribedby}
       bind:this={cells[i]}
       class="pin-input__cell"
       class:pin-input__cell--filled={cellValue(i) !== ''}

package/dist/ui/pin-input/cmp.pin-input.svelte.d.ts

@@ -9,6 +9,7 @@ type Props = {
     error?: boolean;
     /** Accessible label for the cell group. Consumer-provided (no kit default). */
     'aria-label'?: string;
+    'aria-describedby'?: string;
     on?: {
         input?: (value: string) => void;
         change?: (value: string) => void;

package/dist/ui/pin-input/pin-input-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class PinInputLocalization {
+    cellLabel: (position: number, length: number) => string;
+}

package/dist/ui/pin-input/pin-input-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    cellLabel: {
+        en: (position, length) => `Digit ${position} of ${length}`,
+        no: (position, length) => `Siffer ${position} av ${length}`
+    }
+};
+export class PinInputLocalization {
+    cellLabel = (position, length) => {
+        return loc.cellLabel[AppLocale.current](position, length);
+    };
+}

package/dist/ui/segmented-control/cmp.segmented-control.svelte

@@ -2,50 +2,90 @@
 </script>
 
 <script lang="ts" generics="T">"use strict";
-const { value, segments, variant = 'tray', size = 'md', fullWidth = false, compare, on } = $props();
+const { value, segments, variant = 'tray', size = 'md', fullWidth = false, compare, 'aria-label': ariaLabel, on } = $props();
+const segmentIdPrefix = $props.id();
+const segmentEls = [];
 const isActive = (segment) => (compare ? compare(value, segment.value) : value === segment.value);
+const tabStopIndex = $derived.by(() => {
+    const activeIndex = segments.findIndex((segment) => !segment.disabled && isActive(segment));
+    return activeIndex >= 0 ? activeIndex : segments.findIndex((segment) => !segment.disabled);
+});
 const handleClick = (segment) => {
     if (segment.disabled || isActive(segment)) {
         return;
     }
     on?.change?.(segment.value);
 };
+const nextEnabled = (from, step) => {
+    let index = from;
+    do {
+        index = (index + step + segments.length) % segments.length;
+    } while (segments[index].disabled && index !== from);
+    return index;
+};
+const targetIndex = (key, from) => {
+    switch (key) {
+        case 'ArrowRight':
+            return nextEnabled(from, 1);
+        case 'ArrowLeft':
+            return nextEnabled(from, -1);
+        default:
+            return null;
+    }
+};
+const handleKeydown = (event, from) => {
+    if (event.altKey || event.ctrlKey || event.metaKey) {
+        return;
+    }
+    const target = targetIndex(event.key, from);
+    if (target === null) {
+        return;
+    }
+    event.preventDefault();
+    segmentEls[target]?.focus();
+    handleClick(segments[target]);
+};
 </script>
 
-<div class="segmented-control segmented-control--{variant} segmented-control--{size}" class:segmented-control--full={fullWidth} role="radiogroup">
+<div
+  class="segmented-control segmented-control--{variant} segmented-control--{size}"
+  class:segmented-control--full={fullWidth}
+  role="radiogroup"
+  aria-label={ariaLabel}>
   {#each segments as segment, i (i)}
+    {@const segmentLabelId = `${segmentIdPrefix}-${i}`}
     <button
+      bind:this={segmentEls[i]}
       type="button"
+      tabindex={i === tabStopIndex ? 0 : -1}
+      onkeydown={(e) => handleKeydown(e, i)}
       class="segmented-control__segment"
       class:segmented-control__segment--active={isActive(segment)}
       class:segmented-control__segment--disabled={segment.disabled}
       class:segmented-control__segment--error={segment.error}
       role="radio"
       aria-checked={isActive(segment)}
+      aria-labelledby={segmentLabelId}
       disabled={segment.disabled}
       onclick={() => handleClick(segment)}>
-      <span class="segmented-control__label">{segment.label}</span>
+      <span id={segmentLabelId} class="segmented-control__label">{segment.label}</span>
     </button>
   {/each}
 </div>
 
 <!--
 @component
-SegmentedControl — radio-style toggle group rendered as connected pills. Two visual variants:
-
-- **`tray`** (default): inset pill — outer container is a flat tray, active segment lifts as a card with shadow.
-- **`outlined`**: button-row — each segment has its own border, active segment is filled with the menu-active background.
-
-Each segment carries an optional `disabled` flag (non-interactive) and an optional `error` flag (colors the label in the danger tone — useful for marking validation errors across a group picker).
+SegmentedControl — a radio group rendered as connected pills, in a `tray` or `outlined` look. Keyboard follows native radio buttons: one tab stop (the
+selected segment), Left / Right move and select with wrap-around.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--segmented-control--height` | Control height | per size (28 / 32 px) |
+| `--sc-kit--segmented-control--height` | Control height | per size (29 / 32 px) |
 | `--sc-kit--segmented-control--font-size` | Label font size | per size |
 | `--sc-kit--segmented-control--padding-inline` | Per-segment horizontal padding | per size (10 / 12 px) |
-| `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | per size — `sm` 4px, `md` 6px |
-| `--sc-kit--segmented-control--color` | Default segment text color | `--sc-kit--color--text--secondary` |
+| `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | per size — `--sc-kit--field--border-radius--sm` / `--md` |
+| `--sc-kit--segmented-control--color` | Default segment text color | `--sc-kit--color--text--muted` |
 | `--sc-kit--segmented-control--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
 | `--sc-kit--segmented-control--color--active` | Active segment text color | `--sc-kit--color--text--primary` |
 | `--sc-kit--segmented-control--color--disabled` | Disabled segment text color | `--sc-kit--color--text--muted` |

package/dist/ui/segmented-control/cmp.segmented-control.svelte.d.ts

@@ -11,7 +11,11 @@ declare function $$render<T>(): {
         value: T;
         /** `NoInfer<T>` ensures `T` narrows from `value` only; inline segments literals type-check against the value's T without widening — no `as const` needed at callsites. */
         segments: Segment<NoInfer<T>>[];
-        /** @default 'tray' */
+        /**
+         * `'tray'`: flat tray, the active segment lifts as a card with a shadow. `'outlined'`: each segment has its own border, the active one is filled
+         * with the menu-active background.
+         * @default 'tray'
+         */
         variant?: "tray" | "outlined";
         /** @default 'md' */
         size?: "sm" | "md";
@@ -19,6 +23,8 @@ declare function $$render<T>(): {
         fullWidth?: boolean;
         /** Equality for object T values. @default reference equality (`===`) */
         compare?: (a: T, b: T) => boolean;
+        /** Accessible name of the group. */
+        'aria-label'?: string;
         on?: {
             change?: (value: T) => void;
         };
@@ -43,21 +49,17 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
- * SegmentedControl — radio-style toggle group rendered as connected pills. Two visual variants:
- *
- * - **`tray`** (default): inset pill — outer container is a flat tray, active segment lifts as a card with shadow.
- * - **`outlined`**: button-row — each segment has its own border, active segment is filled with the menu-active background.
- *
- * Each segment carries an optional `disabled` flag (non-interactive) and an optional `error` flag (colors the label in the danger tone — useful for marking validation errors across a group picker).
+ * SegmentedControl — a radio group rendered as connected pills, in a `tray` or `outlined` look. Keyboard follows native radio buttons: one tab stop (the
+ * selected segment), Left / Right move and select with wrap-around.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--segmented-control--height` | Control height | per size (28 / 32 px) |
+ * | `--sc-kit--segmented-control--height` | Control height | per size (29 / 32 px) |
  * | `--sc-kit--segmented-control--font-size` | Label font size | per size |
  * | `--sc-kit--segmented-control--padding-inline` | Per-segment horizontal padding | per size (10 / 12 px) |
- * | `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | per size — `sm` 4px, `md` 6px |
- * | `--sc-kit--segmented-control--color` | Default segment text color | `--sc-kit--color--text--secondary` |
+ * | `--sc-kit--segmented-control--border-radius` | Outer radius (tray) / per-segment radius (outlined) | per size — `--sc-kit--field--border-radius--sm` / `--md` |
+ * | `--sc-kit--segmented-control--color` | Default segment text color | `--sc-kit--color--text--muted` |
  * | `--sc-kit--segmented-control--color--hover` | Hover text color | `--sc-kit--color--text--primary` |
  * | `--sc-kit--segmented-control--color--active` | Active segment text color | `--sc-kit--color--text--primary` |
  * | `--sc-kit--segmented-control--color--disabled` | Disabled segment text color | `--sc-kit--color--text--muted` |

package/dist/ui/table/cmp.table-draggable.svelte.d.ts

@@ -25,6 +25,12 @@ declare function $$render<T extends {
          * the row background; an empty list drops the column header, leaving the toolbar and the no-items placeholder.
          */
         toolbar?: Snippet;
+        /** Accessible name of the table. Prefer `aria-labelledby` when a visible title exists. */
+        'aria-label'?: string;
+        /** Id of the element whose text names the table, e.g. a heading in the `toolbar`. */
+        'aria-labelledby'?: string;
+        /** Accessible name of a row's drag handle, e.g. `(row) => \`Move ${row.name}\``. @default localized "Reorder" */
+        gripLabel?: (item: T) => string;
     };
     exports: {};
     bindings: "";

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

@@ -41,6 +41,10 @@ declare function $$render<T extends {
          * the row background; an empty list drops the column header, leaving the toolbar and the no-items placeholder.
          */
         toolbar?: Snippet;
+        /** Accessible name of the table. Prefer `aria-labelledby` when a visible title exists. */
+        'aria-label'?: string;
+        /** Id of the element whose text names the table, e.g. a heading in the `toolbar`. */
+        'aria-labelledby'?: string;
     };
     exports: {};
     bindings: "";

package/dist/ui/table/table-cells/table-actions-cell.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">import { Icon } from '../../icon';
 import { Popover } from '../../popover';
+import { TableLocalization } from '../table-localization';
 import IconMoreHorizontal from '@fluentui/svg-icons/icons/more_horizontal_20_regular.svg?raw';
 let { popoverPosition = 'bottom-end', children } = $props();
+const localization = new TableLocalization();
 </script>
 
 <div class="table-actions-cell__dropdown-wrapper">
-  <Popover position={popoverPosition} fillContainer>
+  <Popover position={popoverPosition} fillContainer aria-label={localization.actionsColumnTitle}>
     {#snippet trigger()}
       <span class="table-actions-cell__trigger">
         <Icon src={IconMoreHorizontal} />

package/dist/ui/table/table-cells/table-by-cell.svelte

@@ -35,7 +35,7 @@ const navigateToUser = (event, by) => {
           {@const href = getHref(by)}
           {#if href}
             <a href={href} onclick={(e) => navigateToUser(e, by)} class="table-by-cell__by-image">
-              <ImageRound src={by.image} />
+              <ImageRound src={by.image} alt={by.name} />
             </a>
           {:else}
             <span class="table-by-cell__by-image">

package/dist/ui/table/table-core.svelte

@@ -37,8 +37,16 @@ import { TableLocalization } from './table-localization';
 import IconReorderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
 import { untrack } from 'svelte';
 import { flip } from 'svelte/animate';
-let { model, rows, showAlternativeView = false, noItemsPlaceholderDelay, reorder, on, alternativeView, noItemsPlaceholder, toolbar, groupHeader } = $props();
+let { model, rows, showAlternativeView = false, noItemsPlaceholderDelay, reorder, gripLabel, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, on, alternativeView, noItemsPlaceholder, toolbar, groupHeader } = $props();
 const localization = new TableLocalization();
+const tableId = $props.id();
+const handleCellClick = (event, column, item) => {
+    if (!column.onClick) {
+        return;
+    }
+    event.stopPropagation();
+    column.onClick(item);
+};
 $effect(() => {
     const selection = model.selection;
     return untrack(() => {
@@ -117,12 +125,17 @@ const rowState = (row) => {
         {@render alternativeView()}
       {/if}
     {:else}
-      <table class="table" class:table--sticky-header={model.styles?.stickyHeader === true || !!toolbar} class:table--fixed={model.styles?.layout === 'fixed'}>
+      <table
+        class="table"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
+        class:table--sticky-header={model.styles?.stickyHeader === true || !!toolbar}
+        class:table--fixed={model.styles?.layout === 'fixed'}>
         {#if showColumnHeader}
           <thead class="table__head">
             <tr>
               {#if reorder}
-                <th class="table__th table__drag-handle">&nbsp;</th>
+                <th class="table__th table__drag-handle"><span class="table__visually-hidden">{localization.reorderColumnTitle}</span></th>
               {/if}
               {#each model.columns as column (column)}
                 <TableHideableCell column={column}>
@@ -162,12 +175,16 @@ const rowState = (row) => {
                 {:else}
                   {#if reorder}
                     <td class="table__td table__drag-handle" class:table__td--flush={state?.flushBottom}>
-                      <div class="table__drag-handle-grip" {@attach reorder.handleAttachment}>
+                      <div
+                        class="table__drag-handle-grip"
+                        aria-label={gripLabel?.(row.item) ?? localization.reorderColumnTitle}
+                        {@attach reorder.handleAttachment}>
                         <Icon src={IconReorderDotsHorizontal} />
                       </div>
                     </td>
                   {/if}
-                  {#each model.columns as column (column)}
+                  {#each model.columns as column, columnIndex (column)}
+                    {@const cellId = `${tableId}-${row.index}-${columnIndex}`}
                     <TableHideableCell column={column}>
                       <td
                         class="table__td"
@@ -175,8 +192,11 @@ const rowState = (row) => {
                         class:table__td--clickable={!!column.onClick}
                         class:table__td--flush={state?.flushBottom}
                         style={columnCellStyle(column)}
-                        onclick={() => column.onClick && column.onClick(row.item)}>
-                        <div class="table__cell" class:table__cell--reveal-on-row-hover={column.revealOnRowHover}>
+                        onclick={(e) => handleCellClick(e, column, row.item)}>
+                        {#if column.onClick && column.type !== 'button'}
+                          <button type="button" class="table__cell-activator" aria-labelledby={cellId}></button>
+                        {/if}
+                        <div id={cellId} class="table__cell" class:table__cell--reveal-on-row-hover={column.revealOnRowHover}>
                           <TableCell model={model} item={row.item} column={column} itemIndex={row.index} on={{ itemsReordered: on?.itemsReordered }} />
                         </div>
                       </td>
@@ -369,11 +389,35 @@ Not exported from `index.ts` — for kit-internal use only.
   text-align: center;
 }
 .table__td--clickable {
+  position: relative;
   cursor: pointer;
 }
 .table__td--flush {
   border-bottom: none;
 }
+.table__cell-activator {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  pointer-events: none;
+}
+.table__cell-activator:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: -2px;
+}
+.table__visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
 .table__cell {
   padding: var(--_table--cell--padding-block) var(--_table--cell--padding-inline);
 }

package/dist/ui/table/table-core.svelte.d.ts

@@ -34,6 +34,10 @@ declare function $$render<T extends {
         showAlternativeView?: boolean;
         noItemsPlaceholderDelay?: number;
         reorder?: TableRowReorder;
+        /** Accessible name of a row's drag handle. */
+        gripLabel?: (item: T) => string;
+        'aria-label'?: string;
+        'aria-labelledby'?: string;
         on?: {
             selectionChanged?: (e: T[]) => void;
             itemsSelected?: (e: T[]) => void;

package/dist/ui/table/table-localization.d.ts

@@ -2,4 +2,5 @@ export declare class TableLocalization {
     get noItemsFoundTitle(): string;
     get noItemsFoundBody(): string;
     get actionsColumnTitle(): string;
+    get reorderColumnTitle(): string;
 }

package/dist/ui/table/table-localization.js

@@ -9,6 +9,9 @@ export class TableLocalization {
     get actionsColumnTitle() {
         return loc.actionsColumnTitle[AppLocale.current];
     }
+    get reorderColumnTitle() {
+        return loc.reorderColumnTitle[AppLocale.current];
+    }
 }
 const loc = {
     noItemsFoundTitle: {
@@ -22,5 +25,9 @@ const loc = {
     actionsColumnTitle: {
         en: 'Actions',
         no: 'Handlinger'
+    },
+    reorderColumnTitle: {
+        en: 'Reorder',
+        no: 'Endre rekkefølge'
     }
 };

package/dist/ui/toast/cmp.toast-item.svelte

@@ -8,6 +8,7 @@ let dragging = $state(false);
 let pointerId = null;
 let startX = 0;
 const SWIPE_THRESHOLD = 80;
+const INTERACTIVE_CONTENT = 'button, a, input, textarea, select';
 const handlePointerDown = (event) => {
     if (!toast.swipeable) {
         return;
@@ -15,6 +16,10 @@ const handlePointerDown = (event) => {
     if (event.button !== 0) {
         return;
     }
+    // Pointer capture retargets the click to the toast, so a button inside would never receive it.
+    if (event.target instanceof Element && event.target.closest(INTERACTIVE_CONTENT)) {
+        return;
+    }
     pointerId = event.pointerId;
     startX = event.clientX;
     dragging = true;
@@ -42,14 +47,18 @@ const handleClose = (event) => {
     event.stopPropagation();
     on.dismiss();
 };
+const contentId = $props.id();
+let activatorEl = $state.raw(undefined);
 const handleBodyClick = (event) => {
     if (!toast.onClick) {
         return;
     }
     const target = event.target;
-    if (target?.closest('button, a, input, textarea, select')) {
+    const interactive = target?.closest(INTERACTIVE_CONTENT);
+    if (interactive && interactive !== activatorEl) {
         return;
     }
+    event.stopPropagation();
     toast.onClick();
 };
 </script>
@@ -60,8 +69,7 @@ const handleBodyClick = (event) => {
   class="toast toast--{toast.variant}"
   class:toast--dragging={dragging}
   class:toast--clickable={!!toast.onClick}
-  role="status"
-  aria-live="polite"
+  role="group"
   style:transform="translateX({dragX}px)"
   style:opacity={dragging && Math.abs(dragX) > 0 ? Math.max(0.3, 1 - Math.abs(dragX) / 200) : 1}
   onclick={handleBodyClick}
@@ -70,7 +78,10 @@ const handleBodyClick = (event) => {
   onpointerup={handlePointerUp}
   onpointercancel={handlePointerUp}>
   <div class="toast__indicator" aria-hidden="true"></div>
-  <div class="toast__body">
+  {#if toast.onClick}
+    <button bind:this={activatorEl} type="button" class="toast__activator" aria-labelledby={contentId}></button>
+  {/if}
+  <div id={contentId} class="toast__body">
     <div class="toast__message">
       {#if typeof toast.message === 'string'}
         {toast.message}
@@ -101,6 +112,7 @@ const handleBodyClick = (event) => {
   --_toast--shadow: var(--sc-kit--toast--shadow, var(--sc-kit--shadow--lg));
   --_toast--indicator-color: var(--sc-kit--toast--indicator-color, var(--sc-kit--color--accent));
   pointer-events: auto;
+  position: relative;
   display: flex;
   align-items: flex-start;
   gap: var(--_toast--gap);
@@ -142,6 +154,19 @@ const handleBodyClick = (event) => {
   background: var(--_toast--indicator-color);
   border-radius: 0.125rem;
 }
+.toast__activator {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.toast__activator:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
 .toast__body {
   flex: 1;
   min-width: 0;

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

@@ -12,7 +12,7 @@ export type ToastrOptions = {
     closable?: boolean;
     /** Swipe-to-dismiss enabled. @default true */
     swipeable?: boolean;
-    /** Fires when the toast body is clicked (excludes close button and other interactive children). Does NOT auto-dismiss — call `Toastr.dismiss(id)` from the callback if needed. */
+    /** Fires when the toast body is clicked or its keyboard-focusable activator is pressed (excludes close button and other interactive children). Does NOT auto-dismiss — call `Toastr.dismiss(id)` from the callback if needed. */
     onClick?: () => void;
 };
 export type Toast = {

package/dist/ui/tooltip/cmp.tooltip.svelte

@@ -10,7 +10,7 @@ let visible = $state(false);
 let resolvedPlacement = $state(placement);
 let showTimer;
 let stopAutoUpdate;
-const id = `tt-${Math.random().toString(36).slice(2, 9)}`;
+const descriptionId = $props.id();
 const position = async () => {
     if (!triggerEl || !bubbleEl) {
         return;
@@ -66,17 +66,17 @@ $effect(() => () => {
   bind:this={triggerEl}
   class="tooltip"
   class:tooltip--fill-height={fillHeight}
-  aria-describedby={visible ? id : undefined}
   onmouseenter={show}
   onmouseleave={hide}
   onfocusin={show}
   onfocusout={hide}
   role="presentation">
-  {@render children()}
+  {@render children({ 'aria-describedby': descriptionId })}
 </span>
+<span id={descriptionId} class="tooltip__description" aria-hidden="true">{text}</span>
 
 {#if visible}
-  <span bind:this={bubbleEl} id={id} class="tooltip__bubble" role="tooltip" data-placement={resolvedPlacement}>
+  <span bind:this={bubbleEl} class="tooltip__bubble" role="tooltip" aria-hidden="true" data-placement={resolvedPlacement}>
     {text}
     <span bind:this={arrowEl} class="tooltip__arrow" aria-hidden="true"></span>
   </span>
@@ -111,6 +111,17 @@ or plain text. Bubble flips and shifts on viewport collision; an arrow points to
 .tooltip--fill-height {
   block-size: 100%;
 }
+.tooltip__description {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
 .tooltip__bubble {
   --_tt--background: var(--sc-kit--tooltip--background, var(--sc-kit--color--bg--tooltip));
   --_tt--color: var(--sc-kit--tooltip--color, var(--sc-kit--color--text--tooltip));

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

@@ -9,8 +9,13 @@ type Props = {
     delay?: number;
     /** Stretch the trigger to the parent's full height (content stays vertically centered). @default false */
     fillHeight?: boolean;
-    /** Wrapped element — anything passed becomes the tooltip trigger (icon, button, link, plain text). */
-    children: Snippet;
+    /**
+     * Wrapped element — anything passed becomes the tooltip trigger (icon, button, link, plain text). Receives
+     * `aria-describedby` pointing at the tooltip text: spread it onto an interactive trigger so screen readers announce the text.
+     */
+    children: Snippet<[{
+        'aria-describedby': string;
+    }]>;
 };
 /**
  * Tooltip — hover/focus help text positioned with Floating UI. Wraps a single child element