@streamscloud/kit 0.82.2 → 0.82.4

package/dist/ui/button/cmp.button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Spinner } from '../_internal/spinner';
 import { CONTROL_ICON_SIZE, IconSlot } from '../icon';
-const { variant = 'primary', size = 'md', iconScale = 'default', disabled = false, loading = false, fullWidth = false, 'aria-label': ariaLabel, icon, iconPosition = 'leading', children, ...mode } = $props();
-const inactive = $derived(disabled || loading);
+const { variant = 'primary', size = 'md', iconScale = 'default', disabled = false, loading = false, fullWidth = false, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, icon, iconPosition = 'leading', children, ...mode } = $props();
+const inactive = $derived(disabled !== false || loading);
 const isIconOnly = $derived(!children && (!!icon || loading));
 const iconFallbacks = $derived({ size: CONTROL_ICON_SIZE[size], scale: iconScale });
 const btnClass = $derived([
@@ -63,9 +63,10 @@ const handleClick = (e) => {
     download={mode.download}
     role="button"
     aria-label={ariaLabel}
+    aria-describedby={ariaDescribedby}
     aria-disabled={inactive ? 'true' : undefined}
     aria-busy={loading ? 'true' : undefined}
-    tabindex={inactive ? -1 : undefined}
+    tabindex={disabled === true ? -1 : undefined}
     onclick={handleClick}>
     {@render content()}
   </a>
@@ -77,9 +78,10 @@ const handleClick = (e) => {
   <button
     class={btnClass}
     type={mode.type}
-    disabled={disabled}
+    disabled={disabled === true}
     aria-label={ariaLabel}
-    aria-disabled={loading ? 'true' : undefined}
+    aria-describedby={ariaDescribedby}
+    aria-disabled={inactive ? 'true' : undefined}
     aria-busy={loading ? 'true' : undefined}
     form={mode.form}
     name={mode.name}
@@ -91,7 +93,7 @@ const handleClick = (e) => {
 
 <!--
 @component
-A button with configurable variant, size, loading state, and an anchor mode. Width is intrinsic by default — use `fullWidth` for inline-axis stretch, or override `--sc-kit--button--{min,max,}width` from CSS for fine-grained control. Overflowing labels are truncated with an ellipsis.
+A button with configurable variant, size, loading state, and an anchor mode. `disabled: 'focusable'` looks and acts disabled but stays focusable, so a wrapping `Tooltip` can tell keyboard and screen-reader users why. Width is intrinsic by default — use `fullWidth` for inline-axis stretch, or override `--sc-kit--button--{min,max,}width` from CSS for fine-grained control. Overflowing labels are truncated with an ellipsis.
 
 The `icon` slot accepts an SVG source string or a snippet; `iconPosition` ('leading' / 'trailing', default leading) flips which side of the label the icon renders on. Icon-only mode kicks in automatically when `icon` is set without `children` — the button becomes square and requires an `aria-label`.
 

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

@@ -8,7 +8,8 @@ type BaseProps = {
     size?: ButtonSize;
     /** Bump the icon one step up the scale relative to `size`, leaving height/text unchanged. @default 'default' */
     iconScale?: 'default' | 'large';
-    disabled?: boolean;
+    /** `'focusable'` keeps the button in the tab order as `aria-disabled`, so a wrapping `Tooltip` can explain why it is disabled. */
+    disabled?: boolean | 'focusable';
     /** Renders a spinner in place of the icon (when leading) and blocks clicks. */
     loading?: boolean;
     /** Stretch to fill the parent's inline axis. */
@@ -21,6 +22,7 @@ type BaseProps = {
     children?: Snippet;
     /** Required when icon-only (no children). */
     'aria-label'?: string;
+    'aria-describedby'?: string;
 };
 type ButtonModeProps = BaseProps & {
     /** Native button mode. */
@@ -48,7 +50,7 @@ type PresentationalModeProps = BaseProps & {
 };
 type Props = ButtonModeProps | AnchorModeProps | PresentationalModeProps;
 /**
- * A button with configurable variant, size, loading state, and an anchor mode. Width is intrinsic by default — use `fullWidth` for inline-axis stretch, or override `--sc-kit--button--{min,max,}width` from CSS for fine-grained control. Overflowing labels are truncated with an ellipsis.
+ * A button with configurable variant, size, loading state, and an anchor mode. `disabled: 'focusable'` looks and acts disabled but stays focusable, so a wrapping `Tooltip` can tell keyboard and screen-reader users why. Width is intrinsic by default — use `fullWidth` for inline-axis stretch, or override `--sc-kit--button--{min,max,}width` from CSS for fine-grained control. Overflowing labels are truncated with an ellipsis.
  *
  * The `icon` slot accepts an SVG source string or a snippet; `iconPosition` ('leading' / 'trailing', default leading) flips which side of the label the icon renders on. Icon-only mode kicks in automatically when `icon` is set without `children` — the button becomes square and requires an `aria-label`.
  *

package/dist/ui/open-file-button/cmp.open-file-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { deriveAccept, FileValidator, openFile } from '../../core/files';
 import { Button } from '../button';
-const { size = 'md', variant = 'secondary', disabled = false, multiple = false, capture, validationRules, icon, iconPosition = 'leading', children, 'aria-label': ariaLabel, on } = $props();
+const { size = 'md', variant = 'secondary', disabled = false, multiple = false, capture, validationRules, icon, iconPosition = 'leading', children, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, on } = $props();
 const accept = $derived(deriveAccept(validationRules ?? []));
 const handleClick = async () => {
     const files = await openFile({ multiple, accept, capture });
@@ -22,6 +22,7 @@ const handleClick = async () => {
   icon={icon}
   iconPosition={iconPosition}
   aria-label={ariaLabel}
+  aria-describedby={ariaDescribedby}
   on={{ click: handleClick }}>
   {#if children}{@render children()}{/if}
 </Button>

package/dist/ui/open-file-button/cmp.open-file-button.svelte.d.ts

@@ -7,7 +7,8 @@ type Props = {
     size?: ButtonSize;
     /** @default 'secondary' */
     variant?: ButtonVariant;
-    disabled?: boolean;
+    /** `'focusable'` keeps the button in the tab order as `aria-disabled`, so a wrapping `Tooltip` can explain why it is disabled. */
+    disabled?: boolean | 'focusable';
     multiple?: boolean;
     /** Optional file-picker capture hint (mobile camera / mic). */
     capture?: 'user' | 'environment';
@@ -26,6 +27,7 @@ type Props = {
     children?: Snippet;
     /** Required when no `children` (icon-only mode). */
     'aria-label'?: string;
+    'aria-describedby'?: string;
     on?: {
         /**
          * Fires after the user picks files. Every result is delivered — consumer reads

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

@@ -82,13 +82,11 @@ const handleBodyClick = (event) => {
     <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}
-      {:else}
-        {@render toast.message()}
-      {/if}
-    </div>
+    {#if typeof toast.message === 'string'}
+      <div class="toast__message toast__message--text">{toast.message}</div>
+    {:else}
+      <div class="toast__message">{@render toast.message()}</div>
+    {/if}
     {#if toast.description}
       <div class="toast__description">{toast.description}</div>
     {/if}
@@ -178,10 +176,14 @@ const handleBodyClick = (event) => {
   font-size: var(--sc-kit--font-size--md);
   line-height: var(--sc-kit--line-height--md);
   font-weight: var(--sc-kit--font-weight--medium);
-  text-overflow: ellipsis;
-  max-width: 100%;
-  white-space: nowrap;
+}
+.toast__message--text {
+  white-space: pre-line;
+  word-break: break-word;
+  display: -webkit-box;
   overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
 }
 .toast__description {
   font-size: var(--sc-kit--font-size--sm);
@@ -192,7 +194,7 @@ const handleBodyClick = (event) => {
   display: -webkit-box;
   overflow: hidden;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: 4;
 }
 .toast__close {
   --sc-kit--icon--size: 0.75rem;

package/package.json

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