@juspay/svelte-ui-components 4.51.0 → 4.52.1

package/dist/ThinkingIndicator/ThinkingIndicator.svelte

@@ -550,6 +550,21 @@
     min-width: 0;
   }
 
+  /* Contrast contract (WCAG 1.4.3, 4.5:1 for this normal-size text): every colour the
+     live label can paint -- the resting ink AND the shimmer's highlight -- clears 4.5:1
+     on the surfaces it is documented for (white, #fafafa, #f4f4f5 and the library's
+     tinted greys in light; #0f0f17..#2f2f45 in the dark layer). The sweep therefore
+     travels from the resting ink toward a STRONGER ink (#6b6b6b -> #2b2b2b in light,
+     #9ca3af -> #e5e7eb in dark) rather than washing out toward the page, which is what
+     the previous #858585 -> #bebebe sweep did (1.8:1 at its peak on #fafafa). The swing
+     between the two stops is as large or larger (2.7:1 light, 2.1:1 dark, against the old
+     2.0:1), so the motion reads the same. Pinned in two places:
+     src/lib/ThinkingIndicator/thinking-indicator-contrast.test.ts (the token defaults)
+     and tests/thinking-indicator-contrast.spec.ts (rendered pixels, every shimmer phase).
+
+     The gradient is built from the same `--thinking-indicator-label-color` token the
+     static label uses, so overriding the colour retunes the shimmer's resting stops too;
+     `--thinking-indicator-shimmer-gradient` still replaces the whole thing. */
   .status-label {
     flex: 0 1 auto;
     min-width: 0;
@@ -559,10 +574,15 @@
     text-align: left;
     font-size: var(--thinking-indicator-font-size, 0.75rem);
     line-height: var(--thinking-indicator-line-height, 1.25rem);
-    color: var(--thinking-indicator-label-color, #858585);
+    color: var(--thinking-indicator-label-color, #6b6b6b);
     background: var(
       --thinking-indicator-shimmer-gradient,
-      linear-gradient(90deg, #858585 0%, #bebebe 50%, #858585 100%)
+      linear-gradient(
+        90deg,
+        var(--thinking-indicator-label-color, #6b6b6b) 0%,
+        var(--thinking-indicator-shimmer-highlight, #2b2b2b) 50%,
+        var(--thinking-indicator-label-color, #6b6b6b) 100%
+      )
     );
     background-size: 200% 100%;
     background-clip: text;
@@ -571,10 +591,14 @@
       infinite;
   }
 
-  /* A settled label (no live busy phase) holds still instead of shimmering. */
+  /* A settled label (no live busy phase) holds still instead of shimmering. It also drops
+     the gradient layer rather than just covering it: under an opaque text fill the layer
+     still shows at antialiased glyph edges, and now that its highlight is a dark ink, light
+     text on a dark recipe (the Chat tool-status example) would grow a dark fringe. */
   .static-label {
     animation: none;
-    -webkit-text-fill-color: var(--thinking-indicator-label-color, #858585);
+    background-image: none;
+    -webkit-text-fill-color: var(--thinking-indicator-label-color, #6b6b6b);
   }
 
   /* ---- chip variant: a self-contained floating pill (no ancestor supplies
@@ -619,9 +643,17 @@
     font-size: var(--thinking-indicator-chip-font-size, 0.85rem);
     font-weight: var(--thinking-indicator-chip-font-weight, 500);
     color: var(--thinking-indicator-chip-color, #52525b);
+    /* Same contract as .status-label: resting ink and highlight both clear 4.5:1 on the
+       chip's own surface (#52525b / #18181b on #ffffff in light; #9ca3af / #f3f4f6 on
+       #1e1e2e in dark), and the resting stop follows the chip colour token. */
     background: var(
       --thinking-indicator-chip-shimmer-gradient,
-      linear-gradient(90deg, #52525b 0%, #a0a0a0 50%, #52525b 100%)
+      linear-gradient(
+        90deg,
+        var(--thinking-indicator-chip-color, #52525b) 0%,
+        var(--thinking-indicator-chip-shimmer-highlight, #18181b) 50%,
+        var(--thinking-indicator-chip-color, #52525b) 100%
+      )
     );
     background-size: 200% 100%;
     background-clip: text;
@@ -637,6 +669,7 @@
      variant's. */
   .chip-label.static-label {
     animation: none;
+    background-image: none;
     -webkit-text-fill-color: var(--thinking-indicator-chip-color, #52525b);
   }
 
@@ -857,17 +890,21 @@
     gap: 5px;
   }
 
+  /* The +N / -N stats also sit on a selectable row's hover (#f4f4f4) and selected (#ececec)
+     backgrounds. #1f7a5f / #c93f38 were 4.4:1 / 4.2:1 on the selected one; these clear
+     4.5:1 on it and on white (thinking-indicator-contrast.test.ts pins both). */
   .row-diffstat .added {
-    color: var(--thinking-indicator-trace-added-color, #1f7a5f);
+    color: var(--thinking-indicator-trace-added-color, #1b7358);
   }
 
   .row-diffstat .removed {
-    color: var(--thinking-indicator-trace-removed-color, #c93f38);
+    color: var(--thinking-indicator-trace-removed-color, #c2382f);
   }
 
   .trace-more {
     font-size: var(--thinking-indicator-trace-more-font-size, 0.75rem);
-    color: var(--thinking-indicator-trace-more-color, #9a9a9a);
+    /* Settled caption text at 0.75rem: #9a9a9a was 2.8:1 on white. */
+    color: var(--thinking-indicator-trace-more-color, #6b6b6b);
     padding: 6px 0 0 22px;
     animation: thinking-indicator-fade-in
       var(--thinking-indicator-trace-more-animation-duration, var(--motion-duration, 300ms))
@@ -890,11 +927,13 @@
 
     .status-label {
       animation: none;
-      -webkit-text-fill-color: var(--thinking-indicator-label-color, #858585);
+      background-image: none;
+      -webkit-text-fill-color: var(--thinking-indicator-label-color, #6b6b6b);
     }
 
     .chip-label {
       animation: none;
+      background-image: none;
       -webkit-text-fill-color: var(--thinking-indicator-chip-color, #52525b);
     }
   }

package/dist/Toast/Toast.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { untrack } from 'svelte';
+  import { tick, untrack } from 'svelte';
   import type { ToastDirection, ToastProperties } from './properties';
   import Img from '../Img/Img.svelte';
 
@@ -26,6 +26,12 @@
   }: ToastProperties = $props();
 
   let showToast = $state(true);
+  let rootEl: HTMLDivElement | null = $state(null);
+  // One `ontoasthide` per hide, however it is reached (the exit's transitionend,
+  // or the no-exit path in hideToast) and however many times hideToast runs
+  // (the close button after the auto-hide timer already fired).
+  let hideNotified = false;
+  let hideGeneration = 0;
 
   const rootClass = $derived(
     ['toast', type ?? '', classes ?? ''].filter((cls) => cls.length > 0).join(' ')
@@ -61,6 +67,13 @@
     return distance == null ? {} : directionalOffset(resolvedDirection, distance);
   });
 
+  // The offsets feed `translate(var(--toast-enter-x, 0px), var(--toast-enter-y, 0px))`
+  // in the stylesheet, where a unitless non-zero number is invalid at
+  // computed-value time: the whole `transform` then computes to `none` and the
+  // toast stops travelling at all. Inline custom properties carry no unit of
+  // their own, so the px has to be written here.
+  const toPx = (value?: number): string | null => (typeof value === 'number' ? `${value}px` : null);
+
   // A `0`/`0s` CSS transition-duration never starts a transition, so it never
   // fires `transitionend`, so `ontoasthide` (below) would never fire -- floor
   // at 50ms so the transition always runs. Same reasoning as the reduced-motion
@@ -76,8 +89,57 @@
   const openDurationStyle = $derived(toDurationStyle(inAnimationDuration));
   const closeDurationStyle = $derived(toDurationStyle(outAnimationDuration));
 
+  function notifyHidden() {
+    if (!hideNotified) {
+      hideNotified = true;
+      ontoasthide?.();
+    }
+  }
+
   function hideToast() {
+    const generation = ++hideGeneration;
     showToast = false;
+    void tick().then(async () => {
+      const element = rootEl;
+      if (generation !== hideGeneration || showToast || !element?.isConnected) {
+        return;
+      }
+      const style = getComputedStyle(element);
+      if (style.display === 'none') {
+        notifyHidden();
+        return;
+      }
+
+      // An exit can be cancelled before transitionrun/transitioncancel is dispatched.
+      // Its animation promise still settles, including rejection on cancellation.
+      // Keep transitionend as the normal path; both paths share the exactly-once guard.
+      const opacityExits =
+        element
+          .getAnimations?.()
+          .filter(
+            (animation) =>
+              'transitionProperty' in animation && animation.transitionProperty === 'opacity'
+          ) ?? [];
+      if (opacityExits.length > 0) {
+        const completions = await Promise.allSettled(
+          opacityExits.map((animation) => animation.finished)
+        );
+        // A fulfilled promise settles before transitionend is dispatched. Preserve that
+        // normal event path so consumers and motion observers receive the complete exit.
+        if (
+          completions.some((completion) => completion.status === 'rejected') &&
+          generation === hideGeneration &&
+          !showToast &&
+          rootEl === element &&
+          element.isConnected
+        ) {
+          notifyHidden();
+        }
+      } else if (style.opacity === '0') {
+        // A coalesced first frame or consumer-disabled motion has no animation to await.
+        notifyHidden();
+      }
+    });
   }
 
   function handleTransitionEnd(event: TransitionEvent) {
@@ -96,7 +158,7 @@
     // correct under any reversal ordering, not just the common single-close
     // case this guard was originally written for.
     if (event.target === event.currentTarget && event.propertyName === 'opacity' && !showToast) {
-      ontoasthide?.();
+      notifyHidden();
     }
   }
 
@@ -110,13 +172,16 @@
     void duration;
 
     untrack(() => {
+      hideGeneration++;
       showToast = true;
+      hideNotified = false;
     });
 
     const id = setTimeout(hideToast, duration);
 
     return () => {
       clearTimeout(id);
+      hideGeneration++;
     };
   });
 </script>
@@ -133,6 +198,7 @@
      aria-live off and back on around the reshow to force a re-announce,
      not a change to the CSS transition mechanics above. -->
 <div
+  bind:this={rootEl}
   class={rootClass}
   class:is-visible={showToast}
   class:no-page-overlap={!overlapPage}
@@ -141,8 +207,8 @@
   aria-live="assertive"
   style:--toast-open-duration={openDurationStyle}
   style:--toast-close-duration={closeDurationStyle}
-  style:--toast-enter-x={enterOffset.x}
-  style:--toast-enter-y={enterOffset.y}
+  style:--toast-enter-x={toPx(enterOffset.x)}
+  style:--toast-enter-y={toPx(enterOffset.y)}
   ontransitionend={handleTransitionEnd}
   data-pw={testId}
   testID={testId}

package/dist/Toggle/Toggle.svelte

@@ -10,6 +10,7 @@
     classes,
     id,
     ariaLabel,
+    inputRole,
     ariaLabelledby,
     onclick,
     name,
@@ -54,6 +55,7 @@
   <label class="switch">
     <input
       id={inputId}
+      role={inputRole === 'switch' ? 'switch' : inputRole === 'checkbox' ? 'checkbox' : null}
       class="input-checkbox"
       type="checkbox"
       aria-describedby={field.describedBy}

package/dist/Toggle/properties.d.ts

@@ -30,6 +30,8 @@ export type OptionalToggleProperties = {
     id?: string;
     /** Names the switch for assistive technology when it has no visible text. */
     ariaLabel?: string;
+    /** Optional semantics on the native checkbox; default keeps its checkbox role. */
+    inputRole?: 'checkbox' | 'switch';
     /**
      * References a label in the same DOM root as the checkbox. `<sui-toggle>` exposes this as
      * `inputAriaLabelledby` (`input-aria-labelledby`); it cannot reach the host document, so use

package/dist/_chart/Axis.svelte

@@ -42,6 +42,13 @@
   }
 
   const TICK_SIZE = 6;
+
+  // Tick labels are `aria-hidden`: they repeat what the chart's marks already
+  // say through their own accessible names ("Jan: 4.2K"), and a drawing that
+  // exposes interactive marks as a `group` (rather than the image it used to
+  // be, whose children were presentational) would otherwise read "0 2K 4K 6K
+  // Jan Feb Mar ..." ahead of the first mark. The axis *title* stays exposed:
+  // it is the one place a unit or dimension is stated.
 </script>
 
 <g
@@ -59,6 +66,7 @@
           {#if rotateTicks && orientation === 'bottom'}
             <text
               class="tick-label"
+              aria-hidden="true"
               transform="translate(0, {TICK_SIZE + 4}) rotate(-45)"
               text-anchor="end"
               dominant-baseline="auto"
@@ -70,6 +78,7 @@
           {:else}
             <text
               class="tick-label"
+              aria-hidden="true"
               y={orientation === 'bottom' ? TICK_SIZE + 4 : -(TICK_SIZE + 4)}
               text-anchor="middle"
               dominant-baseline={orientation === 'bottom' ? 'hanging' : 'auto'}
@@ -107,6 +116,7 @@
         <line class="tick-mark" x2={orientation === 'left' ? -TICK_SIZE : TICK_SIZE} />
         <text
           class="tick-label"
+          aria-hidden="true"
           x={orientation === 'left' ? -(TICK_SIZE + 4) : TICK_SIZE + 4}
           text-anchor={orientation === 'left' ? 'end' : 'start'}
           dominant-baseline="middle"

package/dist/_chart/ChartContainer.svelte

@@ -10,9 +10,25 @@
     maxHeight = Infinity,
     testId,
     classes,
+    ariaLabel,
+    ariaDescription,
+    interactive = false,
     children
   }: ChartContainerProperties = $props();
 
+  // Instance-scoped, hydration-safe id for the <desc> element that
+  // `aria-describedby` points at. Two charts on one page (or in two shadow
+  // roots) must never resolve each other's description.
+  const instanceId = $props.id();
+  const descriptionId = `chart-desc-${instanceId}`;
+
+  // Whitespace-only strings are treated as absent so an empty prop never
+  // produces `aria-label=""`, which is a name of nothing rather than no name.
+  let name = $derived(typeof ariaLabel === 'string' && ariaLabel.trim() !== '' ? ariaLabel : null);
+  let description = $derived(
+    typeof ariaDescription === 'string' && ariaDescription.trim() !== '' ? ariaDescription : null
+  );
+
   let containerEl: HTMLDivElement | null = $state(null);
   let isMounted = false;
 
@@ -35,6 +51,7 @@
     // changes, so the computed height stays current without waiting for a resize.
     void aspectRatio;
     void maxHeight;
+    void minHeight;
     if (isMounted) {
       measure();
     }
@@ -72,13 +89,27 @@
   testID={typeof testId === 'string' ? testId : null}
 >
   {#if width > 0 && height > 0}
+    <!--
+      `role="img"` makes its descendants presentational, so a drawing that holds
+      focusable marks must not use it: the marks are either dropped from the
+      accessibility tree or announced differently per browser, and axe reports
+      the nesting as `nested-interactive`. An interactive drawing is therefore a
+      named `group` whose children stay real controls; a static one stays a
+      named image. Either way the name sits on the <svg> itself -- a named
+      wrapper elsewhere does not name the image inside it.
+    -->
     <svg
       viewBox="0 0 {width} {height}"
       preserveAspectRatio="xMidYMid meet"
-      role="img"
+      role={interactive ? 'group' : 'img'}
+      aria-label={name}
+      aria-describedby={description === null ? null : descriptionId}
       {width}
       {height}
     >
+      {#if description !== null}
+        <desc id={descriptionId}>{description}</desc>
+      {/if}
       {@render children()}
     </svg>
   {/if}

package/dist/_chart/ChartTooltip.svelte

@@ -64,10 +64,24 @@
 
   const pos = $derived.by(() => {
     const tooltip = { width: tooltipWidth, height: tooltipHeight };
+    const rect = originEl?.getBoundingClientRect();
+    // Native rendered bounds include the label's loaded font and transforms.
+    // Only our opaque label plates participate; caller tooltip content stays
+    // intact and ordinary charts retain their existing placement.
+    const avoidRects = Array.from(
+      originEl?.querySelectorAll<SVGRectElement>('.chart-label-backdrop') ?? []
+    ).map((plate) => {
+      const bounds = plate.getBoundingClientRect();
+      return {
+        left: bounds.left - (portal ? 0 : (rect?.left ?? 0)),
+        top: bounds.top - (portal ? 0 : (rect?.top ?? 0)),
+        width: bounds.width,
+        height: bounds.height
+      };
+    });
     if (portal) {
       void portalTick;
       // Convert container coords to viewport coords and clamp to the viewport.
-      const rect = originEl?.getBoundingClientRect();
       const dx = rect?.left ?? 0;
       const dy = rect?.top ?? 0;
       const container =
@@ -79,14 +93,15 @@
         mouseY: mouseY + dy,
         anchor: anchor === null ? null : { ...anchor, x: anchor.x + dx, y: anchor.y + dy },
         tooltip,
-        container
+        container,
+        avoidRects
       });
     }
     const container = {
       width: tooltipEl?.offsetParent?.clientWidth ?? Number.POSITIVE_INFINITY,
       height: tooltipEl?.offsetParent?.clientHeight ?? Number.POSITIVE_INFINITY
     };
-    return computeTooltipPosition({ mouseX, mouseY, anchor, tooltip, container });
+    return computeTooltipPosition({ mouseX, mouseY, anchor, tooltip, container, avoidRects });
   });
 </script>
 

package/dist/_chart/LabelPlate.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import { onMount, type Snippet } from 'svelte';
+
+  let { children }: { children: Snippet } = $props();
+  let group: SVGGElement | null = $state(null);
+  let bounds: { x: number; y: number; width: number; height: number } | null = $state(null);
+  const PADDING = 3;
+
+  onMount(() => {
+    const text = group?.querySelector('text');
+    if (group === null || text === null || typeof text === 'undefined') {
+      return;
+    }
+    let mounted = true;
+    let frame = 0;
+    function measure(): void {
+      if (
+        !mounted ||
+        group === null ||
+        text === null ||
+        typeof text === 'undefined' ||
+        typeof text.getBBox !== 'function'
+      ) {
+        return;
+      }
+      const box = text.getBBox();
+      if (box.width <= 0 || box.height <= 0) {
+        bounds = null;
+        return;
+      }
+      // getBBox is in the text's own SVG coordinates. This also handles
+      // transformed children, rather than assuming page/parent rectangles.
+      const parent = group.getCTM?.();
+      const child = text.getCTM?.();
+      const matrix = parent && child ? parent.inverse().multiply(child) : null;
+      const corners = [
+        [box.x, box.y],
+        [box.x + box.width, box.y],
+        [box.x, box.y + box.height],
+        [box.x + box.width, box.y + box.height]
+      ].map(([x, y]) =>
+        matrix === null
+          ? { x, y }
+          : {
+              x: matrix.a * x + matrix.c * y + matrix.e,
+              y: matrix.b * x + matrix.d * y + matrix.f
+            }
+      );
+      const x = Math.min(...corners.map((point) => point.x)) - PADDING;
+      const y = Math.min(...corners.map((point) => point.y)) - PADDING;
+      bounds = {
+        x,
+        y,
+        width: Math.max(...corners.map((point) => point.x)) - x + PADDING,
+        height: Math.max(...corners.map((point) => point.y)) - y + PADDING
+      };
+    }
+    function schedule(): void {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    }
+    measure();
+    const resize = new ResizeObserver(schedule);
+    resize.observe(text);
+    const mutation = new MutationObserver(schedule);
+    mutation.observe(text, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true
+    });
+    // Font readiness can change glyph bounds without changing the label's
+    // content or CSS family. Measure the actual loaded font, not cached canvas
+    // estimates, and react to subsequent font loads as well.
+    document.fonts?.ready.then(() => {
+      if (mounted) {
+        schedule();
+      }
+    });
+    document.fonts?.addEventListener('loadingdone', schedule);
+    return () => {
+      mounted = false;
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      mutation.disconnect();
+      document.fonts?.removeEventListener('loadingdone', schedule);
+    };
+  });
+</script>
+
+<g class="chart-label-plate" bind:this={group}>
+  {#if bounds !== null}
+    <rect
+      class="chart-label-backdrop"
+      x={bounds.x}
+      y={bounds.y}
+      width={bounds.width}
+      height={bounds.height}
+      rx="2"
+      aria-hidden="true"
+    />
+  {/if}
+  {@render children()}
+</g>
+
+<style>
+  .chart-label-plate {
+    pointer-events: none;
+  }
+  .chart-label-backdrop {
+    /* Keep the default literal: consumer CSS compilers may lower light-dark()
+       into private variables that their inherited theme never initializes. */
+    fill: var(--chart-label-background, #fff);
+    stroke: none;
+  }
+</style>

package/dist/_chart/LabelPlate.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const LabelPlate: import("svelte").Component<$$ComponentProps, {}, "">;
+type LabelPlate = ReturnType<typeof LabelPlate>;
+export default LabelPlate;

package/dist/_chart/a11y.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Chart-level accessible naming shared by the seven chart families.
+ *
+ * A chart drawing needs a name of its own: a name on some wrapper elsewhere does
+ * not name the `<svg>` inside it (axe still reports `svg-img-alt` on the
+ * unnamed image), and a screen-reader user tabbing between data points has no
+ * other way to learn which chart a point belongs to. The consumer's
+ * `ariaLabel` always wins; this supplies the name only when none was given, so
+ * an unlabelled chart is at least identifiable by what it plots.
+ */
+export type ChartKind = 'line' | 'area' | 'bar' | 'pie' | 'sankey' | 'dual-axis' | 'funnel';
+export type ChartNameParts = {
+    yAxisLabel?: string;
+    seriesNames?: readonly string[];
+};
+/**
+ * Name used when the consumer passes no `ariaLabel`.
+ *
+ * `"{yAxisLabel} bar chart"` is the spelling BarChart has always put on its
+ * wrapping region, so a chart that already had a named region keeps the same
+ * words. Without a y-axis title, named series are listed (`"Line chart:
+ * Revenue, Cost"`); with neither, only the kind of chart is known.
+ */
+export declare function defaultChartName(kind: ChartKind, parts: ChartNameParts): string;
+/**
+ * The consumer's non-blank `ariaLabel`, else the derived fallback. `unknown`
+ * because the prop is optional and an element attribute can hand over anything.
+ */
+export declare function resolveChartName(ariaLabel: unknown, fallback: string): string;

package/dist/_chart/a11y.js

@@ -0,0 +1,44 @@
+/**
+ * Chart-level accessible naming shared by the seven chart families.
+ *
+ * A chart drawing needs a name of its own: a name on some wrapper elsewhere does
+ * not name the `<svg>` inside it (axe still reports `svg-img-alt` on the
+ * unnamed image), and a screen-reader user tabbing between data points has no
+ * other way to learn which chart a point belongs to. The consumer's
+ * `ariaLabel` always wins; this supplies the name only when none was given, so
+ * an unlabelled chart is at least identifiable by what it plots.
+ */
+const NOUN = {
+    line: 'line chart',
+    area: 'area chart',
+    bar: 'bar chart',
+    pie: 'pie chart',
+    sankey: 'flow diagram',
+    'dual-axis': 'dual-axis chart',
+    funnel: 'funnel chart'
+};
+/**
+ * Name used when the consumer passes no `ariaLabel`.
+ *
+ * `"{yAxisLabel} bar chart"` is the spelling BarChart has always put on its
+ * wrapping region, so a chart that already had a named region keeps the same
+ * words. Without a y-axis title, named series are listed (`"Line chart:
+ * Revenue, Cost"`); with neither, only the kind of chart is known.
+ */
+export function defaultChartName(kind, parts) {
+    const noun = NOUN[kind];
+    const yAxisLabel = typeof parts.yAxisLabel === 'string' ? parts.yAxisLabel.trim() : '';
+    if (yAxisLabel !== '') {
+        return `${yAxisLabel} ${noun}`;
+    }
+    const names = (parts.seriesNames ?? []).map((name) => name.trim()).filter((name) => name !== '');
+    const title = noun.charAt(0).toUpperCase() + noun.slice(1);
+    return names.length > 0 ? `${title}: ${names.join(', ')}` : title;
+}
+/**
+ * The consumer's non-blank `ariaLabel`, else the derived fallback. `unknown`
+ * because the prop is optional and an element attribute can hand over anything.
+ */
+export function resolveChartName(ariaLabel, fallback) {
+    return typeof ariaLabel === 'string' && ariaLabel.trim() !== '' ? ariaLabel : fallback;
+}

package/dist/_chart/measure.d.ts

@@ -8,5 +8,7 @@ export declare function measureText(text: string, font: FontSpec): {
     width: number;
     height: number;
 };
+/** A loaded font can replace its fallback without changing the font cache key. */
+export declare function invalidateTextMeasurements(): void;
 /** Reads a px-valued CSS custom property off an element, with an SSR-safe fallback. */
 export declare function readCssVarPx(el: Element | null, name: string, fallback: number): number;

package/dist/_chart/measure.js

@@ -36,6 +36,10 @@ export function measureText(text, font) {
     cache.set(key, width);
     return { width, height };
 }
+/** A loaded font can replace its fallback without changing the font cache key. */
+export function invalidateTextMeasurements() {
+    cache.clear();
+}
 /** Reads a px-valued CSS custom property off an element, with an SSR-safe fallback. */
 export function readCssVarPx(el, name, fallback) {
     if (typeof window === 'undefined' || el === null) {

package/dist/_chart/tooltipPosition.d.ts

@@ -3,6 +3,10 @@ type Size = {
     width: number;
     height: number;
 };
+type Rect = Size & {
+    left: number;
+    top: number;
+};
 /**
  * Pure tooltip placement: anchor mode positions relative to a data point with
  * side-flipping; cursor mode follows the pointer with flip-then-clamp on both
@@ -15,6 +19,8 @@ export declare function computeTooltipPosition(opts: {
     tooltip: Size;
     container: Size;
     offset?: number;
+    /** Painted label plates in the same coordinate space as the anchor. */
+    avoidRects?: Rect[];
 }): {
     left: number;
     top: number;