@juspay/svelte-ui-components 4.27.6 → 4.28.1

package/dist/TaskList/TaskList.svelte

@@ -143,7 +143,12 @@
     display: flex;
     align-items: baseline;
     gap: var(--task-list-row-inline-gap, 10px);
-    animation: task-list-fade-up 320ms var(--task-list-ease, cubic-bezier(0.23, 1, 0.32, 1)) both;
+    /* --task-list-ease was an easing-only token (DESIGN_PRINCIPLES.md motion
+       convention) — kept working unchanged, now paired with a duration token
+       and both fall back through the library-wide --motion-* tokens. */
+    animation: task-list-fade-up
+      var(--task-list-row-animation-duration, var(--motion-duration, 320ms))
+      var(--task-list-ease, var(--motion-easing, cubic-bezier(0.23, 1, 0.32, 1))) both;
   }
 
   .row-glyph {
@@ -160,7 +165,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    animation: task-list-glyph-fade 150ms ease both;
+    animation: task-list-glyph-fade
+      var(--task-list-glyph-animation-duration, var(--motion-duration, 150ms))
+      var(--task-list-glyph-animation-easing, var(--motion-easing, ease)) both;
   }
 
   .glyph-dot {
@@ -197,7 +204,9 @@
   }
   .glyph-check {
     color: var(--task-list-done-color, #6b6b6b);
-    animation: task-list-check-pop 200ms var(--task-list-ease, cubic-bezier(0.23, 1, 0.32, 1)) both;
+    animation: task-list-check-pop
+      var(--task-list-check-pop-animation-duration, var(--motion-duration, 200ms))
+      var(--task-list-ease, var(--motion-easing, cubic-bezier(0.23, 1, 0.32, 1))) both;
   }
   .glyph-x {
     color: var(--task-list-error-color, #c93f38);
@@ -211,7 +220,7 @@
     gap: var(--task-list-text-gap, 8px);
   }
   .task-row.pending .row-text {
-    opacity: var(--task-list-pending-opacity, 0.55);
+    opacity: var(--task-list-pending-opacity, 0.85);
   }
 
   .row-label {
@@ -225,7 +234,7 @@
 
   .row-secondary {
     font-size: var(--task-list-secondary-font-size, 0.75rem);
-    color: var(--task-list-secondary-color, #9a9a9a);
+    color: var(--task-list-secondary-color, #555b65);
     white-space: nowrap;
   }
   .row-secondary.mono {

package/dist/ThemeSwitcher/ThemeSwitcher.svelte

@@ -143,6 +143,7 @@
         class:selected={currentValue === option.value}
         onclick={() => applyValue(option.value)}
         aria-label={option.label ?? option.value}
+        aria-pressed={currentValue === option.value}
       >
         <span class="icon">
           {#if typeof option.icon === 'function'}
@@ -255,4 +256,26 @@
   .segment-button.selected {
     color: var(--theme-switcher-icon-color-active, #1f2937);
   }
+
+  /* Unlike the two progress-bar loaders elsewhere in this library, every
+     transition here moves between two states that are each fully meaningful
+     on their own (a background tint, an icon's shown/hidden pose, the
+     indicator's resting position, a label's active color) -- there is no
+     in-between frame that could be misread as a different state. Dropping the
+     transition just makes the swap instant instead of animated; nothing is
+     stranded mid-motion the way a freeze mid-fill would be. Four separate
+     rules declare `transition` in this file (toggle background, icon
+     opacity/transform, segment indicator left/width, segment label color) --
+     all four are covered here, not just the two the icon/indicator case calls
+     out, so no motion in this component is left unguarded. Lives in the
+     component's own <style> because that is the only stylesheet that reaches
+     inside the shadow root a custom-element consumer gets. */
+  @media (prefers-reduced-motion: reduce) {
+    .toggle-button,
+    .icon,
+    .segment-indicator,
+    .segment-button {
+      transition: none;
+    }
+  }
 </style>

package/dist/ThinkingIndicator/ThinkingIndicator.svelte

@@ -666,14 +666,18 @@
     padding-top: var(--thinking-indicator-detail-padding-top, 0.5rem);
     font-size: var(--thinking-indicator-detail-font-size, 0.875rem);
     line-height: var(--thinking-indicator-detail-line-height, 1.5);
-    color: var(--thinking-indicator-detail-color, #bebebe);
+    /* Resting text, not the shimmer highlight — needs its own readable default
+       rather than reusing the shimmer's light sweep color. Matches
+       --thinking-indicator-trace-prose-color, the same prose-at-rest ink used
+       for the reasoning trace's paragraph rows. */
+    color: var(--thinking-indicator-detail-color, #6b6b6b);
     text-align: left;
   }
 
   .elapsed {
     flex-shrink: 0;
     font-variant-numeric: tabular-nums;
-    color: var(--thinking-indicator-elapsed-color, #9a9a9a);
+    color: var(--thinking-indicator-elapsed-color, #4b5563);
     font-size: var(--thinking-indicator-elapsed-font-size, 0.75rem);
   }
 
@@ -753,7 +757,9 @@
     margin: -3px -6px;
     border-radius: var(--thinking-indicator-trace-row-radius, 6px);
     cursor: pointer;
-    transition: background 150ms ease;
+    transition: background
+      var(--thinking-indicator-trace-row-transition-duration, var(--motion-duration, 150ms))
+      var(--thinking-indicator-trace-row-transition-easing, var(--motion-easing, ease));
     width: calc(100% + 12px);
   }
 
@@ -777,7 +783,7 @@
   }
 
   .row-secondary {
-    color: var(--thinking-indicator-trace-secondary-color, #9a9a9a);
+    color: var(--thinking-indicator-trace-secondary-color, #4b5563);
     font-size: var(--thinking-indicator-trace-secondary-font-size, 0.75rem);
     white-space: nowrap;
   }
@@ -861,7 +867,9 @@
     font-size: var(--thinking-indicator-trace-more-font-size, 0.75rem);
     color: var(--thinking-indicator-trace-more-color, #9a9a9a);
     padding: 6px 0 0 22px;
-    animation: thinking-indicator-fade-in 300ms ease both;
+    animation: thinking-indicator-fade-in
+      var(--thinking-indicator-trace-more-animation-duration, var(--motion-duration, 300ms))
+      var(--thinking-indicator-trace-more-animation-easing, var(--motion-easing, ease)) both;
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/Toast/Toast.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { untrack } from 'svelte';
   import { fly } from 'svelte/transition';
+  import { prefersReducedMotion } from '../utils';
   import type { ToastDirection, ToastProperties } from './properties';
   import type { FlyAnimationConfig } from '../types';
   import Img from '../Img/Img.svelte';
@@ -72,6 +73,20 @@
         break;
     }
 
+    // Reduced motion zeroes the OFFSETS as well as the durations, and the offsets
+    // are the part that matters. `fly` interpolates from x/y to 0, so a duration of
+    // 0 with x still at 500 paints the toast 500px away on its first frame and then
+    // snaps -- a stranded frame that reads as a glitch rather than as no animation.
+    // Zeroing both makes it simply appear in place, which is what the preference
+    // asks for. A `@media` block cannot reach any of this: these values are consumed
+    // by `in:fly={...}` / `out:fly={...}`, so the guard has to live here.
+    if (prefersReducedMotion()) {
+      return {
+        in: { x: 0, y: 0, duration: 0 },
+        out: { x: 0, y: 0, duration: 0 }
+      };
+    }
+
     return {
       in: {
         x: inX,
@@ -108,12 +123,22 @@
 </script>
 
 {#if showToast}
+  <!-- `showToast` starts `true` (see the `$state(true)` above), so this
+       `{#if}` is already satisfied on the component's own first render -- a
+       *local* transition only plays when its enclosing block flips true as a
+       later reactive update, not when the block is created already-true,
+       which is what happens every time a caller mounts Toast fresh (e.g.
+       `{#if visible}<Toast .../>{/if}` in the caller). `in:fly|global` plays
+       the intro on creation regardless, matching Sheet's panel transition
+       (Sheet.svelte). `out:fly` needs no such modifier: `hideToast()` always
+       flips an already-mounted block from true to false, a genuine local
+       transition that already fires correctly. -->
   <div
     class={rootClass}
     class:no-page-overlap={!overlapPage}
     role="alert"
     aria-live="assertive"
-    in:fly={animationConfig.in}
+    in:fly|global={animationConfig.in}
     out:fly={animationConfig.out}
     onoutroend={handleAnimationEnd}
     data-pw={testId}
@@ -162,7 +187,7 @@
     padding: var(--toast-padding, 10px);
     font-size: var(--toast-font-size, 14px);
     font-family: var(--toast-font-family, inherit);
-    font-weight: var(--toast-font-weight);
+    font-weight: var(--toast-font-weight, inherit);
     height: var(--toast-height, fit-content);
     border-radius: var(--toast-border-radius, var(--radius, 4px));
     border: var(--toast-border, none);

package/dist/Toggle/Toggle.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
+  import { describeField } from '../_field/description';
   import type { ToggleProperties } from './properties';
 
   let {
-    checked = false,
+    checked = $bindable(false),
     text = '',
     disabled = false,
     testId,
@@ -12,11 +13,26 @@
     ariaLabelledby,
     onclick,
     name,
-    value
+    value,
+    required = false,
+    form,
+    errorMessage,
+    infoMessage,
+    invalid = false
   }: ToggleProperties = $props();
 
   // Stable across hydration so the hidden input stays named and text remains clickable.
   const generatedId = $props.id();
+
+  /* The control and the text that explains it were never linked: a screen-reader
+     user reaching this control heard its name and nothing about why it was
+     rejected. `describeField` composes the reference from the messages that are
+     actually rendered, so aria-describedby never points at an id that is not in
+     the DOM -- which passes an attribute assertion and resolves to nothing in a
+     real reader. */
+  const field = $derived(
+    describeField(generatedId, { error: errorMessage, info: infoMessage, invalid })
+  );
   const inputId = $derived(id?.trim() || `toggle-${generatedId}`);
 
   const handleCheckboxClick = (e: MouseEvent): void => {
@@ -40,10 +56,16 @@
       id={inputId}
       class="input-checkbox"
       type="checkbox"
+      aria-describedby={field.describedBy}
+      aria-invalid={field.ariaInvalid}
       {checked}
       {disabled}
-      name={name ?? null}
       value={value ?? null}
+      {required}
+      name={typeof name === 'string' ? name : null}
+      form={typeof form === 'string' ? form : null}
+      data-state={checked ? 'checked' : 'unchecked'}
+      data-disabled={disabled ? '' : null}
       aria-label={ariaLabel?.trim() || null}
       aria-labelledby={ariaLabelledby?.trim() || null}
       onclick={handleCheckboxClick}
@@ -52,6 +74,28 @@
   </label>
 </div>
 
+{#if field.showsError}
+  <div
+    id={field.errorId}
+    role="alert"
+    class="field-error"
+    data-pw={typeof testId === 'string' ? `${testId}-error-message` : null}
+    testID={typeof testId === 'string' ? `${testId}-error-message` : null}
+  >
+    {errorMessage}
+  </div>
+{/if}
+{#if field.showsInfo}
+  <div
+    id={field.infoId}
+    class="field-info"
+    data-pw={typeof testId === 'string' ? `${testId}-info-message` : null}
+    testID={typeof testId === 'string' ? `${testId}-info-message` : null}
+  >
+    {infoMessage}
+  </div>
+{/if}
+
 <style>
   .container {
     display: var(--toggle-container-display, flex);
@@ -94,8 +138,16 @@
     right: var(--toggle-slider-right, 0);
     bottom: var(--toggle-slider-bottom, 0);
     background-color: var(--slider-unchecked-color, #ccc);
-    -webkit-transition: var(--toggle-slider-transition, 0.4s);
-    transition: var(--toggle-slider-transition, 0.4s);
+    -webkit-transition: var(
+      --toggle-slider-transition,
+      all var(--toggle-slider-transition-duration, var(--motion-duration, 0.4s))
+        var(--toggle-slider-transition-easing, var(--motion-easing, ease))
+    );
+    transition: var(
+      --toggle-slider-transition,
+      all var(--toggle-slider-transition-duration, var(--motion-duration, 0.4s))
+        var(--toggle-slider-transition-easing, var(--motion-easing, ease))
+    );
   }
 
   .slider:before {
@@ -107,8 +159,16 @@
     bottom: var(--toggle-slider-before-bottom, 1px);
     top: var(--toggle-slider-before-top, 1px);
     background-color: var(--toggle-slider-before-background-color, white);
-    -webkit-transition: var(--toggle-slider-transition, 0.4s);
-    transition: var(--toggle-slider-transition, 0.4s);
+    -webkit-transition: var(
+      --toggle-slider-transition,
+      all var(--toggle-slider-transition-duration, var(--motion-duration, 0.4s))
+        var(--toggle-slider-transition-easing, var(--motion-easing, ease))
+    );
+    transition: var(
+      --toggle-slider-transition,
+      all var(--toggle-slider-transition-duration, var(--motion-duration, 0.4s))
+        var(--toggle-slider-transition-easing, var(--motion-easing, ease))
+    );
   }
 
   .input-checkbox:checked + .slider {
@@ -132,4 +192,16 @@
   .slider.round:before {
     border-radius: var(--slider-border-radius-before, 50%);
   }
+
+  .field-error {
+    color: var(--field-error-color, #c5120a);
+    font-size: var(--field-error-font-size, 12px);
+    margin: var(--field-error-margin, 4px 0 0 0);
+  }
+
+  .field-info {
+    color: var(--field-info-color, #6b7280);
+    font-size: var(--field-info-font-size, 12px);
+    margin: var(--field-info-margin, 4px 0 0 0);
+  }
 </style>

package/dist/Toggle/Toggle.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ToggleProperties } from './properties';
-declare const Toggle: import("svelte").Component<ToggleProperties, {}, "">;
+declare const Toggle: import("svelte").Component<ToggleProperties, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/Toggle/properties.d.ts

@@ -1,6 +1,23 @@
 export type ToggleProperties = OptionalToggleProperties & ToggleEventProperties;
 export type OptionalToggleProperties = {
+    /**
+     * Text shown, and announced, when the control is in error. Linked to the
+     * control through `aria-describedby`, and sets `aria-invalid` while present.
+     */
+    errorMessage?: string | null;
+    /**
+     * Persistent helper text describing the control. Linked through
+     * `aria-describedby` too, so it is read before the user trips an error rather
+     * than only after.
+     */
+    infoMessage?: string | null;
+    /**
+     * Marks the control invalid without supplying a message, for a consumer
+     * driving validity from a server or its own rules.
+     */
+    invalid?: boolean;
     text?: string;
+    /** Whether the switch is on. Bindable, like `Checkbox.checked` and `Slider.value`. */
     checked?: boolean;
     disabled?: boolean;
     testId?: string;
@@ -19,15 +36,21 @@ export type OptionalToggleProperties = {
      * `text` or `inputAriaLabel` for labels outside the shadow root.
      */
     ariaLabelledby?: string;
-    /** Native `name` on the underlying `<input type="checkbox">`, so the switch
-     *  participates in a surrounding `<form>`'s submission. Omitted by default:
-     *  the input stays nameless and outside `FormData`, exactly as before this
-     *  prop existed. */
+    /** Submits the switch under this name, so it participates in a surrounding
+     *  `<form>`'s submission. Omitted by default: with no `name` the input stays
+     *  nameless and outside `FormData`, exactly as before this prop existed. Omitted
+     *  from submission too when off or disabled, matching the native checkbox the
+     *  switch is built from. */
     name?: string;
-    /** Native `value` submitted when on. Defaults to `"on"` — the native
-     *  checkbox default — when omitted. An off toggle never appears in
-     *  `FormData`, matching native behaviour. */
+    /** Value submitted while on. Left unset, the attribute is omitted and the native
+     *  checkbox's own `"on"` default is what submits, so setting `name` alone is enough and
+     *  an existing consumer's DOM is unchanged. An off switch never appears in `FormData`. */
     value?: string;
+    /** Blocks submission while the switch is off. */
+    required?: boolean;
+    /** `id` of a form elsewhere in the same document. Unavailable through
+     *  `<sui-toggle>`, whose control sits in a shadow root. */
+    form?: string;
 };
 export type ToggleEventProperties = {
     onclick?: (checked: boolean) => void;

package/dist/ToolCallLog/ToolCallLog.svelte

@@ -4,9 +4,10 @@
   import Loader from '../Loader/Loader.svelte';
   import Pill from '../Pill/Pill.svelte';
   import { computeMenuDropdownPosition } from '../Menu/dropdownPosition';
+  import { eventHitsInside } from '../_interaction/dismissal';
   import type { ToolCallChip, ToolCallLogProperties } from './properties';
 
-  let { chips, onchipclick, testId, classes }: ToolCallLogProperties = $props();
+  let { chips, onchipclick, testId, classes, usePortal = true }: ToolCallLogProperties = $props();
 
   // Exactly one popover open at a time, component-local.
   let openIndex = $state<number | null>(null);
@@ -97,16 +98,37 @@
   });
 
   /**
-   * Svelte action for the popover element: relocates it to `document.body`
+   * Where a portalled node is allowed to land. Svelte scopes a custom element's
+   * CSS to its shadow root, so `document.body` is the one place the popover must
+   * never go from inside `<sui-tool-call-log>`: it keeps its `svelte-*` scoping
+   * class and loses every rule behind it, plus the host's custom properties.
+   * Measured in Chromium -- position fell back to `static`, background to
+   * transparent, border and shadow to none, so the detail text landed as a bare
+   * paragraph at the end of the page. Its own root holds that stylesheet and
+   * still sits above every overflow/scroll ancestor between the two.
+   */
+  const portalTarget = (node: Node): Node => {
+    const root = node.getRootNode();
+    return root instanceof ShadowRoot ? root : document.body;
+  };
+
+  /**
+   * Svelte action for the popover element: relocates it out to its root
    * (mirroring Menu's `usePortal`) so an `overflow: hidden` or scrolling
    * ancestor — a chat bubble, a card — can never clip it, and keeps
    * `popoverTick` bumping (rAF-coalesced) while it is mounted so `popoverStyle`
    * re-derives on scroll/resize. The popover only exists in the DOM while open
    * (see the `{#if}` below), so the listeners live exactly as long as it does;
    * `use:` actions never run during SSR.
+   *
+   * The listeners are wired even when `usePortal` is false: the popover is
+   * `position: fixed` in both modes, so its coordinates go stale on scroll
+   * whether or not it was moved.
    */
   const popoverPortal: Action<HTMLElement> = (node) => {
-    document.body.appendChild(node);
+    if (usePortal) {
+      portalTarget(node).appendChild(node);
+    }
     let frame: number | null = null;
     const bump = (): void => {
       if (frame !== null) {
@@ -126,7 +148,11 @@
         if (frame !== null) {
           cancelAnimationFrame(frame);
         }
-        node.remove();
+        // Only a node this action moved is this action's to take back out; an
+        // un-portalled one is still Svelte's, and it removes it on its own.
+        if (usePortal) {
+          node.remove();
+        }
       }
     };
   };
@@ -138,14 +164,21 @@
    * `openIndex`, and closing here too would race it: this listener runs after
    * the chip's own `onclick` on the same bubbling click event, so without the
    * guard it would immediately re-close a popover a click just opened.
+   *
+   * "Inside" is asked of the composed path, not of `contains(event.target)`.
+   * This listener is on the document, which sees the target retargeted to the
+   * shadow host, so `chipEl.contains(target)` was false for a click on the chip
+   * itself and the guard above never held: through `<sui-tool-call-log>` the
+   * popover opened and closed on the same click, every time. Observed under
+   * a MutationObserver — one insert, one removal, `aria-expanded` back to
+   * "false" — while chasing the portal fix this file also carries.
    */
   const handleDocumentClick = (event: MouseEvent): void => {
-    const target = event.target;
-    if (openIndex === null || !(target instanceof Node)) {
+    if (openIndex === null) {
       return;
     }
-    const clickedInsideChip = chipEls.some((chipEl) => chipEl !== null && chipEl.contains(target));
-    const clickedInsidePopover = popoverEl !== null && popoverEl.contains(target);
+    const clickedInsideChip = chipEls.some((chipEl) => eventHitsInside(chipEl, event));
+    const clickedInsidePopover = eventHitsInside(popoverEl, event);
     if (!clickedInsideChip && !clickedInsidePopover) {
       openIndex = null;
     }
@@ -274,11 +307,14 @@
     color: var(--tool-call-log-label-color, #2b2b2b);
     cursor: var(--tool-call-log-chip-cursor, pointer);
     max-width: 100%;
-    animation: tool-call-log-fade-up 320ms var(--tool-call-log-ease, cubic-bezier(0.23, 1, 0.32, 1))
-      both;
+    animation: tool-call-log-fade-up
+      var(--tool-call-log-chip-animation-duration, var(--motion-duration, 320ms))
+      var(--tool-call-log-ease, var(--motion-easing, cubic-bezier(0.23, 1, 0.32, 1))) both;
     transition:
-      background 150ms ease,
-      border-color 150ms ease;
+      background var(--tool-call-log-chip-transition-duration, var(--motion-duration, 150ms))
+        var(--tool-call-log-chip-transition-easing, var(--motion-easing, ease)),
+      border-color var(--tool-call-log-chip-transition-duration, var(--motion-duration, 150ms))
+        var(--tool-call-log-chip-transition-easing, var(--motion-easing, ease));
   }
   .chip:hover {
     background: var(--tool-call-log-chip-hover-background, #f1f1f1);
@@ -288,7 +324,7 @@
   }
 
   .chip.error {
-    color: var(--tool-call-log-error-color, #c93f38);
+    color: var(--tool-call-log-error-color, #9f2d27);
     border-color: var(--tool-call-log-error-border-color, #f2b8b5);
     background: var(--tool-call-log-error-background, #fdf1f0);
   }
@@ -304,7 +340,7 @@
   }
 
   .chip-meta {
-    color: var(--tool-call-log-meta-color, #9a9a9a);
+    color: var(--tool-call-log-meta-color, #666666);
     font-size: var(--tool-call-log-meta-font-size, 0.75rem);
     white-space: nowrap;
     overflow: hidden;
@@ -366,13 +402,14 @@
   }
   .diffstat-removed {
     --pill-background: var(--tool-call-log-removed-background, #fbeceb);
-    --pill-color: var(--tool-call-log-removed-color, #c93f38);
+    --pill-color: var(--tool-call-log-removed-color, #a8302a);
   }
 
-  /* Always portaled to document.body (see `popoverPortal`), so `position:
-     fixed` is the baseline rather than a portal-only override — left/top/
-     z-index come from the inline `popoverStyle`, computed against the live
-     anchor rect. */
+  /* `position: fixed` is the baseline rather than a portal-only override —
+     left/top/z-index come from the inline `popoverStyle`, computed against the
+     live anchor rect, and that is viewport-relative in both portal modes. So
+     `usePortal={false}` (see `popoverPortal`) changes only which ancestors can
+     clip the popover, never how it is placed. */
   .chip-popover {
     position: fixed;
     z-index: var(--tool-call-log-popover-z-index, 1000);
@@ -386,8 +423,9 @@
     border: var(--tool-call-log-popover-border, 1px solid #e4e4e7);
     border-radius: var(--tool-call-log-popover-radius, 10px);
     box-shadow: var(--tool-call-log-popover-shadow, 0 10px 30px rgba(0, 0, 0, 0.12));
-    animation: tool-call-log-fade-up 200ms var(--tool-call-log-ease, cubic-bezier(0.23, 1, 0.32, 1))
-      both;
+    animation: tool-call-log-fade-up
+      var(--tool-call-log-popover-animation-duration, var(--motion-duration, 200ms))
+      var(--tool-call-log-ease, var(--motion-easing, cubic-bezier(0.23, 1, 0.32, 1))) both;
   }
 
   .popover-detail {

package/dist/ToolCallLog/properties.d.ts

@@ -24,4 +24,14 @@ export type OptionalToolCallLogProperties = {
     onchipclick?: (index: number, chip: ToolCallChip) => void;
     testId?: string;
     classes?: string;
+    /**
+     * Move the open detail popover out to the root of the tree it lives in, so an
+     * `overflow: hidden` or scrolling ancestor between the two — a chat bubble, a
+     * card — cannot clip it. Defaults to true, which is what this component did
+     * unconditionally before the prop existed. Placement is identical either way
+     * (the popover is `position: fixed` in both modes), so turning it off costs
+     * only the clipping escape — worth it when the popover must stay inside a
+     * container that is itself being transformed or scrolled as a unit.
+     */
+    usePortal?: boolean;
 };

package/dist/Toolbar/Toolbar.svelte

@@ -211,7 +211,7 @@
     font-weight: var(--toolbar-text-font-weight, normal);
     padding: var(--toolbar-text-padding, 0px);
     margin: var(--toolbar-text-margin, 0px);
-    color: var(--toolbar-text-color);
+    color: var(--toolbar-text-color, inherit);
     flex: var(--toolbar-text-flex, 1);
   }
 </style>

package/dist/Tooltip/Tooltip.svelte

@@ -93,6 +93,24 @@
   /** Reference to the trigger wrapper element, used for `getBoundingClientRect` in portal mode. */
   let containerEl: HTMLDivElement | null = $state(null);
 
+  /**
+   * Where the portalled bubble is allowed to land, asked of the TRIGGER rather
+   * than the bubble: a freshly created, still-detached element is its own root,
+   * so it can answer nothing useful about where the component lives.
+   *
+   * The bubble's own box survives `document.body` -- every rule of it is inline
+   * (see `createPortalBubble`) -- but two things it carries do not. The
+   * `--tooltip-*` custom properties those inline rules read inherit from the
+   * shadow host, not from `<body>`, so a themed `<sui-tooltip>` reverts to the
+   * literal fallbacks; and a `content` snippet is mounted into the bubble with
+   * the consumer's own `svelte-*` scoping classes, whose stylesheet is in the
+   * shadow root the bubble just left. Its own root keeps both.
+   */
+  const portalTarget = (node: Node): Node => {
+    const root = node.getRootNode();
+    return root instanceof ShadowRoot ? root : document.body;
+  };
+
   /**
    * Imperatively managed portal bubble element.
    * Created in `showTooltip` and removed in `hideTooltip` when `usePortal=true`.
@@ -303,7 +321,7 @@
         }
         portalBubbleEl = createPortalBubble(rect, pos);
         if (portalBubbleEl !== null) {
-          document.body.appendChild(portalBubbleEl);
+          portalTarget(containerEl).appendChild(portalBubbleEl);
           const effectivePos = flipPortalBubbleIfNeeded(portalBubbleEl, rect, pos);
           clampPortalBubble(portalBubbleEl, effectivePos);
         }
@@ -405,7 +423,7 @@
     color: var(--tooltip-color, #ffffff);
     font-size: var(--tooltip-font-size, 12px);
     font-weight: var(--tooltip-font-weight, 400);
-    font-family: var(--tooltip-font-family);
+    font-family: var(--tooltip-font-family, inherit);
     padding: var(--tooltip-padding, 6px 10px);
     border-radius: var(--tooltip-border-radius, var(--radius, 4px));
     border: var(--tooltip-border, none);