@juspay/svelte-ui-components 4.51.0 → 4.52.0

package/dist/Animations/tokenizedFly.js

@@ -137,8 +137,15 @@ export function tokenizedFly(node, params) {
     // above resolved to. 0.001 rather than a hard 0: still visually instant, but
     // keeps this a real (non-zero-duration) transition for Svelte's own
     // lifecycle/event handling instead of a degenerate edge case.
-    if (reducedMotion.current) {
+    // MediaQueryList change events are asynchronous. A freshly opened transition
+    // must use the actual preference now, including a mounted preference flip.
+    const reduce = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+        ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        : reducedMotion.current;
+    if (reduce) {
         duration = 0.001;
+        x = 0;
+        y = 0;
     }
     const targetOpacity = +styles.opacity;
     const transform = styles.transform === 'none' ? '' : styles.transform;
@@ -147,7 +154,7 @@ export function tokenizedFly(node, params) {
         easing,
         css: (t) => `
       transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
-      opacity: ${targetOpacity * t};
+      opacity: ${reduce ? targetOpacity : targetOpacity * t};
     `
     };
 }

package/dist/AreaChart/AreaChart.svelte

@@ -4,7 +4,6 @@
     AreaChartProperties,
     AreaChartTooltipContext
   } from './properties';
-  import { onMount } from 'svelte';
   import ChartContainer from '../_chart/ChartContainer.svelte';
   import Axis from '../_chart/Axis.svelte';
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
@@ -18,17 +17,12 @@
   import { resolvePointLabels } from '../_chart/labels';
   import { pointerPositionIn, dismissOnOutsidePointerDown } from '../_chart/interactions';
   import { formatSeriesAggregate } from '../_chart/aggregate';
+  import { defaultChartName, resolveChartName } from '../_chart/a11y';
   import type { LegendItem, Point, TooltipAnchor } from '../_chart/types';
   import { DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
 
   // ── Props ──────────────────────────────────────────────────────
 
-  // Per-instance ID for SVG gradient <linearGradient id> references. Initialised
-  // inside onMount so the value is only ever generated on the client — avoids an
-  // SSR hydration mismatch that would occur if Math.random() ran on both server
-  // and client and produced different strings.
-  let uid = $state('');
-
   let {
     series,
     curve = 'monotone',
@@ -58,10 +52,20 @@
     tooltipPortal = false,
     onpointhover,
     onpointclick,
+    ariaLabel,
+    ariaDescription,
     testId,
     classes
   }: AreaChartProperties = $props();
 
+  // Per-instance id for the SVG <linearGradient id> references. `$props.id()` is
+  // unique per component instance and identical on server and client, so two
+  // charts on one page never resolve each other's `url(#gradient)` and hydration
+  // never sees a different id than the server wrote. It replaces a Math.random()
+  // prefix that was only filled in at mount (until then every chart's gradient id
+  // collapsed to the same `area-grad--0`) and was collision-prone by construction.
+  const instanceId = $props.id();
+
   // ── State ──────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement | null = $state(null);
@@ -84,10 +88,6 @@
   let mouseX = $state(0);
   let mouseY = $state(0);
 
-  onMount(() => {
-    uid = Math.random().toString(36).slice(2, 9);
-  });
-
   // ── Layout ─────────────────────────────────────────────────────
 
   let isStacked = $derived(stacked || stackNormalize);
@@ -246,6 +246,27 @@
     }))
   );
 
+  // ── Chart-level accessible name ────────────────────────────────
+
+  // The drawing's own name: the consumer's `ariaLabel`, else one derived from
+  // what the chart plots (see `defaultChartName`).
+  let chartName = $derived(
+    resolveChartName(
+      ariaLabel,
+      defaultChartName('area', { yAxisLabel, seriesNames: series.map((s) => s.name) })
+    )
+  );
+
+  // Every finite point is a focusable role="button" mark (the `.focus-target`
+  // circles below), so a drawing with any is interactive and must not be exposed
+  // as an image. With no finite point there is nothing to operate and it is a
+  // plain named image.
+  let hasMarks = $derived(
+    areas.some((area) =>
+      area.points.some((point) => Number.isFinite(point.x) && Number.isFinite(point.y))
+    )
+  );
+
   // ── Tooltip ────────────────────────────────────────────────────
 
   // Precedence: keyboard focus wins over pointer hover -- see the comment on
@@ -594,6 +615,9 @@
         {aspectRatio}
         {minHeight}
         {maxHeight}
+        ariaLabel={chartName}
+        {ariaDescription}
+        interactive={hasMarks}
       >
         {#if gradientFill}
           <!-- <defs> must be a direct child of <svg> (SVG root), not inside a transformed <g>.
@@ -602,7 +626,7 @@
           <defs>
             {#each areas as area, si (si)}
               <linearGradient
-                id="area-grad-{uid}-{si}"
+                id="area-grad-{instanceId}-{si}"
                 x1="0"
                 y1="0"
                 x2="0"
@@ -658,7 +682,7 @@
               class="area-fill"
               class:dimmed={pointerOrFocused !== null && pointerOrFocused.si !== si}
               d={area.areaD}
-              fill={gradientFill ? `url(#area-grad-${uid}-${si})` : area.color}
+              fill={gradientFill ? `url(#area-grad-${instanceId}-${si})` : area.color}
               fill-opacity={gradientFill
                 ? 1
                 : pointerOrFocused?.si === si
@@ -708,8 +732,12 @@
               {#each area.points as _point, pi (pi)}
                 {@const pl = pointLabelPlacements[si][pi]}
                 {#if pl?.visible && Number.isFinite(pl.x) && Number.isFinite(pl.y)}
+                  <!-- Repeats the point's own accessible name, which is what
+                       assistive technology reads; exposing it again would announce
+                       every value twice. -->
                   <text
                     class="point-value"
+                    aria-hidden="true"
                     x={pl.x}
                     y={pl.y}
                     text-anchor="middle"

package/dist/AreaChart/properties.d.ts

@@ -67,6 +67,18 @@ export type OptionalAreaChartProperties = {
     empty?: Snippet;
     /** Render the tooltip into document.body so scroll/overflow ancestors never clip it. */
     tooltipPortal?: boolean;
+    /**
+     * Accessible name of the chart (`aria-label` on its `<svg>`). Say what the chart
+     * shows, e.g. `"Monthly revenue, January to June"`. When omitted a name is
+     * derived from the chart's own data (`"{yAxisLabel} area chart"`, else the series names, else `"Area chart"`), so an unlabelled chart is still
+     * identifiable -- but a name written for the page is almost always better.
+     */
+    ariaLabel?: string;
+    /**
+     * Optional longer description (trend, range, the takeaway) announced after the
+     * name. Rendered as an SVG `<desc>` referenced by `aria-describedby`.
+     */
+    ariaDescription?: string;
     testId?: string;
     classes?: string;
 };

package/dist/AttachmentChipRow/AttachmentChipRow.svelte

@@ -33,13 +33,14 @@
 {#if images.length > 0 || videos.length > 0 || files.length > 0}
   <Scroller
     direction="horizontal"
+    ariaLabel="Pending attachments"
     showArrows={false}
     hideScrollbar={false}
     showGradient={false}
     classes={`attachment-chip-row ${classes ?? ''}`}
     {testId}
   >
-    {#each images as image (image.id)}
+    {#each images as image, index (image.id)}
       <div
         class="chip"
         data-pw={typeof testId === 'string' ? `${testId}-image-${image.id}` : null}
@@ -67,7 +68,7 @@
             <Button
               variant="secondary"
               iconOnly={true}
-              ariaLabel="Remove image"
+              ariaLabel={`Remove ${image.filename?.trim() || `image ${index + 1} of ${images.length}`}`}
               testId={testId && `${testId}-remove-image-${image.id}`}
               onclick={() => onremoveimage(image.id)}
             >
@@ -90,7 +91,7 @@
         {/if}
       </div>
     {/each}
-    {#each videos as video (video.id)}
+    {#each videos as video, index (video.id)}
       <div
         class="chip"
         data-pw={typeof testId === 'string' ? `${testId}-video-${video.id}` : null}
@@ -125,7 +126,7 @@
             <Button
               variant="secondary"
               iconOnly={true}
-              ariaLabel="Remove video"
+              ariaLabel={`Remove ${video.filename?.trim() || `video ${index + 1} of ${videos.length}`}`}
               testId={testId && `${testId}-remove-video-${video.id}`}
               onclick={() => onremovevideo(video.id)}
             >
@@ -148,7 +149,7 @@
         {/if}
       </div>
     {/each}
-    {#each files as file (file.id)}
+    {#each files as file, index (file.id)}
       <div
         class="chip"
         data-pw={typeof testId === 'string' ? `${testId}-file-${file.id}` : null}
@@ -190,7 +191,7 @@
             <Button
               variant="secondary"
               iconOnly={true}
-              ariaLabel="Remove file"
+              ariaLabel={`Remove ${file.filename.trim() || `file ${index + 1} of ${files.length}`}`}
               testId={testId && `${testId}-remove-file-${file.id}`}
               onclick={() => onremovefile(file.id)}
             >

package/dist/BarChart/BarChart.svelte

@@ -30,6 +30,7 @@
     dropOverlapping
   } from '../_chart/labels';
   import { formatSeriesAggregate } from '../_chart/aggregate';
+  import { defaultChartName, resolveChartName } from '../_chart/a11y';
   import type { LegendItem, BarRect } from '../_chart/types';
   import { DEFAULT_CHART_CORNER_RADIUS, DEFAULT_CHART_MAX_HEIGHT } from '../_chart/types';
   import type { TooltipAnchor } from '../_chart/types';
@@ -37,10 +38,12 @@
   import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 
   // ── Per-instance uid prefix for <defs> ids (A1-3) ─────────────
-  // Derived at module scope per the library uid pattern (e.g. AreaChart
-  // feat/linechart-gradient line 17) to prevent id collision across multiple
-  // BarChart instances on the same page.
-  const uid = Math.random().toString(36).slice(2, 9);
+  // `$props.id()` is unique per component instance and identical on server and
+  // client, so two BarCharts on one page can never resolve each other's
+  // `url(#pattern)` / `url(#gradient)` references, and hydration never sees a
+  // different id than the one the server wrote. (A `Math.random()` prefix was
+  // collision-prone by construction and differed between SSR and the client.)
+  const uid = $props.id();
 
   /** Returns the plain CSS fallback color for any BarFill (used for legend, aria-label). */
   function fallbackColor(fill: BarFill, index: number): string {
@@ -94,6 +97,8 @@
     tooltipPortal = false,
     onbarclick,
     onbarhover,
+    ariaLabel,
+    ariaDescription,
     testId,
     classes
   }: BarChartProperties = $props();
@@ -635,6 +640,33 @@
 
   let isEmpty = $derived(resolvedSeries.every((s) => s.data.length === 0) || labels.length === 0);
 
+  // ── Chart-level accessible name ────────────────────────────────
+
+  /**
+   * The drawing's accessible name: the consumer's `ariaLabel`, else one derived
+   * from what the chart plots (see `defaultChartName`). It lives on the <svg>
+   * itself. It used to sit only on a wrapping `role="region"` that was present
+   * in every chart, leaving the image inside unnamed -- and giving every chart
+   * on a page the same landmark name.
+   */
+  let chartName = $derived(
+    resolveChartName(
+      ariaLabel,
+      defaultChartName('bar', {
+        yAxisLabel,
+        seriesNames: isMulti ? rawSeries.map((s) => s.name) : []
+      })
+    )
+  );
+
+  /**
+   * Bars are focusable `role="button"` marks, so a chart that draws them is
+   * interactive and must not be exposed as an image. With `hideBarGraphics` (a
+   * legend/label-only mode) or no bars there is nothing to operate, and the
+   * drawing is a plain named image.
+   */
+  let hasMarks = $derived(!hideBarGraphics && bars.length > 0);
+
   // ── Scroll geometry ────────────────────────────────────────────
 
   let minScrollWidth = $derived(
@@ -929,11 +961,20 @@
     {/if}
 
     <div class="chart-plot" bind:this={plotEl}>
+      <!--
+        A region landmark only when this wrapper really is a focusable scroll
+        container (axe: scrollable-region-focusable needs a focusable, named
+        container). It used to be a region in every chart, which put N identically
+        named landmarks on a page (axe: landmark-unique) and named the wrapper
+        while the chart image inside stayed unnamed. Its label deliberately
+        differs from the chart's own name so tabbing from the scroller into the
+        chart does not announce the same words twice.
+      -->
       <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <div
         class="chart-scroll-area"
-        role="region"
-        aria-label={yAxisLabel ? `${yAxisLabel} bar chart` : 'Bar chart'}
+        role={scrollable ? 'region' : null}
+        aria-label={scrollable ? `${chartName}, scrollable` : null}
         tabindex={scrollable ? 0 : null}
         style={scrollable
           ? `overflow-x: auto; -webkit-overflow-scrolling: touch; height: var(--barchart-scroll-area-height, auto);`
@@ -946,6 +987,9 @@
             {aspectRatio}
             {maxHeight}
             {minHeight}
+            ariaLabel={chartName}
+            {ariaDescription}
+            interactive={hasMarks}
           >
             <!-- A1-2 / A1-3: SVG <defs> for pattern and gradient fills -->
             {#if defsEntries.length > 0}
@@ -1112,8 +1156,12 @@
                 {/each}
                 {#each barLabels as bl, i (i)}
                   {#if bl.visible}
+                    <!-- Repeats the bar's own accessible name ("Jan: 4.2K"), which is
+                         what assistive technology reads; exposing it again would
+                         announce every value twice. -->
                     <text
                       class="bar-value"
+                      aria-hidden="true"
                       class:bar-value-inside={bl.p.placement === 'inside'}
                       data-inside={bl.p.placement === 'inside' ? 'true' : 'false'}
                       x={bl.p.x}

package/dist/BarChart/properties.d.ts

@@ -239,6 +239,18 @@ export type OptionalBarChartProperties = {
     hideLegendBelow?: number;
     /** Render the tooltip into document.body (position:fixed) so scroll/overflow ancestors never clip it. */
     tooltipPortal?: boolean;
+    /**
+     * Accessible name of the chart (`aria-label` on its `<svg>`). Say what the chart
+     * shows, e.g. `"Monthly revenue, January to June"`. When omitted a name is
+     * derived from the chart's own data (`"{yAxisLabel} bar chart"`, else the series names, else `"Bar chart"`), so an unlabelled chart is still
+     * identifiable -- but a name written for the page is almost always better.
+     */
+    ariaLabel?: string;
+    /**
+     * Optional longer description (trend, range, the takeaway) announced after the
+     * name. Rendered as an SVG `<desc>` referenced by `aria-describedby`.
+     */
+    ariaDescription?: string;
     testId?: string;
     classes?: string;
 };

package/dist/Calendar/Calendar.svelte

@@ -26,6 +26,25 @@
     initialMonth = null
   }: CalendarProperties = $props();
 
+  type DayInfo = {
+    date: Date;
+    day: number;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isDisabled: boolean;
+    isSelected: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+    isInRange: boolean;
+  };
+
+  // The grid is named by the visible month heading (aria-labelledby), and the heading
+  // announces month changes. Per-instance, because two calendars on one page (the
+  // DateRangePicker mounts two) would otherwise resolve to whichever matching id
+  // comes first in the root.
+  const uid = $props.id();
+  const headerId = `calendar-heading-${uid}`;
+
   const now = new SvelteDate();
   // Intentionally read initialMonth once (untracked) — it seeds the display month at mount
   // and subsequent prop changes should not navigate the calendar (user navigates via the buttons).
@@ -48,15 +67,28 @@
   }
 
   const dayNameFormatter = $derived(new Intl.DateTimeFormat(locale, { weekday: 'short' }));
+  const fullDayNameFormatter = $derived(new Intl.DateTimeFormat(locale, { weekday: 'long' }));
+
+  // `toLocaleDateString()` alone gives "6/15/2024" -- ambiguous between day-first and
+  // month-first locales and with no weekday or month name for a screen reader to
+  // anchor on. The long form names the weekday, month, day and year.
+  const dateLabelFormatter = $derived(
+    new Intl.DateTimeFormat(locale, {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    })
+  );
 
   const monthYearFormatter = $derived(
     new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' })
   );
 
-  let dayNames: string[] = $derived(
+  let dayNames: { short: string; full: string }[] = $derived(
     Array.from({ length: 7 }, (_, i) => {
       const d = new SvelteDate(2024, 0, 7 + weekStartsOn + i);
-      return dayNameFormatter.format(d);
+      return { short: dayNameFormatter.format(d), full: fullDayNameFormatter.format(d) };
     })
   );
 
@@ -80,18 +112,6 @@
     const normStart = rangeStart !== null ? normalizeDate(rangeStart) : null;
     const normEnd = rangeEnd !== null ? normalizeDate(rangeEnd) : null;
 
-    type DayInfo = {
-      date: Date;
-      day: number;
-      isCurrentMonth: boolean;
-      isToday: boolean;
-      isDisabled: boolean;
-      isSelected: boolean;
-      isRangeStart: boolean;
-      isRangeEnd: boolean;
-      isInRange: boolean;
-    };
-
     function fillerDay(year: number, month: number, day: number): DayInfo {
       const date = new SvelteDate(year, month, day);
       date.setHours(0, 0, 0, 0);
@@ -148,6 +168,15 @@
     return days;
   });
 
+  // ARIA requires gridcells to sit in rows. Chunking the flat day list keeps the
+  // arithmetic above untouched; the leading and trailing filler days already pad the
+  // list to a multiple of seven, so every row is full.
+  const weeks: DayInfo[][] = $derived(
+    Array.from({ length: calendarDays.length / 7 }, (_, row) =>
+      calendarDays.slice(row * 7, row * 7 + 7)
+    )
+  );
+
   // A calendar grid is one tab stop, the same roving-tabindex pattern Tabs uses: the
   // day being actively navigated while inside the grid, else the selected day, else
   // today if it's in view and enabled, else the first enabled day -- so a month with
@@ -362,7 +391,7 @@
         {/if}
       </Button>
     </div>
-    <span class="header-label">{headerLabel}</span>
+    <span class="header-label" id={headerId} aria-live="polite">{headerLabel}</span>
     <div class="nav-button nav-next">
       <Button
         onclick={() => navigateMonth(1)}
@@ -379,41 +408,75 @@
     </div>
   </div>
 
-  <div class="day-names">
-    {#each dayNames as name (name)}
-      <div class="day-name">{name}</div>
-    {/each}
-  </div>
-
+  <!--
+    A valid ARIA grid is grid > row > (columnheader | gridcell). The weekday names live
+    inside the grid as the first row, and every date sits in a gridcell inside a week row.
+    The rows are real boxes (display: grid), never display: contents, which browsers have
+    dropped from the accessibility tree before. Each gridcell wraps the date button
+    rather than replacing it: a native <button> keeps its disabled and click behaviour,
+    and aria-selected / aria-disabled belong on the cell because a button supports
+    neither aria-selected nor a cell-level disabled state.
+  -->
   <div
     class="grid"
     bind:this={gridRef}
     tabindex={tabStopDay === null ? 0 : -1}
     role="grid"
+    aria-labelledby={headerId}
+    aria-multiselectable={mode === 'range' ? 'true' : null}
     onkeydown={handleKeyDown}
   >
-    {#each calendarDays as dayInfo (dayInfo.date.getTime())}
-      {#if dayInfo.isCurrentMonth}
-        <button
-          type="button"
-          class="cell"
-          class:today={dayInfo.isToday}
-          class:selected={dayInfo.isSelected}
-          class:range-start={dayInfo.isRangeStart}
-          class:range-end={dayInfo.isRangeEnd}
-          class:in-range={dayInfo.isInRange}
-          class:disabled={dayInfo.isDisabled}
-          data-day={dayInfo.day}
-          disabled={dayInfo.isDisabled}
-          tabindex={tabStopDay === dayInfo.day ? 0 : -1}
-          aria-label={dayInfo.date.toLocaleDateString(locale)}
-          onclick={() => selectDate(dayInfo.date)}
-        >
-          {dayInfo.day}
-        </button>
-      {:else}
-        <span class="cell outside-month">{dayInfo.day}</span>
-      {/if}
+    <div class="row day-names" role="row">
+      {#each dayNames as name, i (i)}
+        <div class="day-name" role="columnheader" aria-label={name.full}>{name.short}</div>
+      {/each}
+    </div>
+    {#each weeks as week (week[0].date.getTime())}
+      <div class="row week" role="row">
+        {#each week as dayInfo (dayInfo.date.getTime())}
+          {#if dayInfo.isCurrentMonth}
+            <div
+              class="cell-slot"
+              role="gridcell"
+              aria-selected={dayInfo.isSelected ||
+              dayInfo.isRangeStart ||
+              dayInfo.isRangeEnd ||
+              dayInfo.isInRange
+                ? 'true'
+                : 'false'}
+              aria-disabled={dayInfo.isDisabled ? 'true' : null}
+            >
+              <button
+                type="button"
+                class="cell"
+                class:today={dayInfo.isToday}
+                class:selected={dayInfo.isSelected}
+                class:range-start={dayInfo.isRangeStart}
+                class:range-end={dayInfo.isRangeEnd}
+                class:in-range={dayInfo.isInRange}
+                class:disabled={dayInfo.isDisabled}
+                data-day={dayInfo.day}
+                disabled={dayInfo.isDisabled}
+                tabindex={tabStopDay === dayInfo.day ? 0 : -1}
+                aria-label={dateLabelFormatter.format(dayInfo.date)}
+                aria-current={dayInfo.isToday ? 'date' : null}
+                onclick={() => selectDate(dayInfo.date)}
+              >
+                {dayInfo.day}
+              </button>
+            </div>
+          {:else}
+            <div
+              class="cell-slot"
+              role="gridcell"
+              aria-disabled="true"
+              aria-label={dateLabelFormatter.format(dayInfo.date)}
+            >
+              <span class="cell outside-month">{dayInfo.day}</span>
+            </div>
+          {/if}
+        {/each}
+      </div>
     {/each}
   </div>
 </div>
@@ -463,17 +526,27 @@
   /* Size the columns to the cell, not 1fr, and centre the whole grid. With 1fr
      columns the fixed-width cells sat centred inside wider tracks, leaving
      horizontal gaps between days — which broke the range highlight into
-     disconnected boxes instead of one continuous pill. The day-name header must
-     use the same track sizing so it stays aligned with the day grid below.
+     disconnected boxes instead of one continuous pill. The weekday-name row uses
+     the same track sizing as the week rows so it stays aligned with the days below.
+     Each row is its own grid (a real box, so the role="row" semantics survive); the
+     .grid wrapper just stacks them.
 
      A host that wants the grid to fill a container sets both
      --calendar-grid-columns and --calendar-cell-width: fluid columns with the
      default fixed-width cells bring those gaps back, so the cells must be told
      to fill their tracks too. */
-  .day-names {
+  .grid {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .row {
     display: grid;
     grid-template-columns: var(--calendar-grid-columns, repeat(7, var(--calendar-cell-size, 36px)));
     justify-content: center;
+  }
+
+  .day-names {
     text-align: center;
   }
 
@@ -484,11 +557,11 @@
     padding: var(--calendar-day-name-padding, 4px 0);
   }
 
-  .grid {
-    display: grid;
-    grid-template-columns: var(--calendar-grid-columns, repeat(7, var(--calendar-cell-size, 36px)));
-    justify-content: center;
-    row-gap: 2px;
+  /* The gap between week rows. It was `row-gap: 2px` on the single day grid; with one
+     element per row it is a margin between consecutive weeks, which leaves the
+     weekday-name row flush against the first week exactly as before. */
+  .week + .week {
+    margin-top: 2px;
   }
 
   .cell {

package/dist/Card/Card.svelte

@@ -38,6 +38,11 @@
    * once per mounted instance is what a consumer needs to act on, and it costs
    * nothing on subsequent updates.
    */
+  // Reading `attrs` once is the point of this block: it is a dev notice about what the consumer
+  // passed at mount, not state. Rendering reads `attrs` live in the spread on the root element
+  // below, so an `attrs` that changes afterwards is still applied; only the notice is not
+  // repeated. The ignore is on this one block, whose only reference is that read.
+  // svelte-ignore state_referenced_locally
   if (import.meta.env?.DEV === true) {
     for (const message of discardedAttrWarnings('Card', CARD_MANAGED_ATTRS, attrs)) {
       console.warn(message);

package/dist/ChatSuggestions/ChatSuggestions.svelte

@@ -83,6 +83,7 @@
     {#if layout === 'scroll'}
       <Scroller
         {direction}
+        ariaLabel="Chat suggestions"
         showArrows={false}
         showGradient={false}
         hideScrollbar={true}