@juspay/svelte-ui-components 4.51.0 → 4.52.0

package/dist/FileDropzoneTrigger/properties.d.ts

@@ -11,14 +11,24 @@ export type OptionalFileDropzoneTriggerProperties = {
     /** Bare icon + heading with no Button wrapper or caption, for inline/compact trigger placements. */
     compact?: boolean;
     /**
-     * Non-compact: forwarded to the inner `Button`. Compact: applied to the heading `<span>`.
-     * Emits both `data-pw` and `testID` on that element.
+     * Non-compact: forwarded to the inner `Button` when this trigger renders one, otherwise applied to the
+     * non-interactive surface. Compact: applied to the heading `<span>`. Emits both `data-pw` and `testID`
+     * on that element.
      */
     testId?: string;
-    /** CSS class applied to the root element — the inner `Button` in non-compact, the icon+heading wrapper in compact. */
+    /** CSS class applied to the root element — the `Button` (or, inside a `FileInput` region, the non-interactive surface that replaces it) in non-compact, the icon+heading wrapper in compact. */
     classes?: string;
 };
 export type FileDropzoneTriggerEventProperties = {
-    /** Wire to `FileInput`'s `openFilePicker`. Non-compact only — compact relies on `FileInput`'s own whole-area click/drop handling. */
+    /**
+     * Makes the non-compact trigger a real `Button` that owns the action. Use it where nothing else does:
+     * standalone, or under `<FileInput activation="trigger">` with `onclick={openFilePicker}`.
+     *
+     * Inside a default `FileInput` the region already owns activation (one Tab stop; Enter, Space and a
+     * click open the chooser), so the trigger renders the same surface as plain content instead of a
+     * second button and does not call this handler: the region opens the picker. An existing
+     * `onclick={openFilePicker}` there therefore still works, without the duplicate control.
+     * Compact never renders a button.
+     */
     onclick?: () => void;
 };

package/dist/FileInput/FileInput.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import { describeField } from '../_field/description';
+  import { provideFileInputOwner } from './context';
   import type { FileInputProperties } from './properties';
 
   let {
     trigger,
+    activation = 'region',
     accept,
     multiple = false,
     maxSizeBytes,
@@ -28,6 +30,18 @@
     describeField(fieldUid, { error: errorMessage, info: infoMessage, invalid })
   );
 
+  /* One upload action, one interactive owner. Left alone, the region is that
+     owner and `trigger` content is plain content inside it. A consumer who wants
+     a real control inside (a Button with its own loading state, say) hands
+     ownership to it instead, and the region stops being a second control: no
+     role, no tab stop, no click or key handling -- only drag and drop. */
+  const regionOwnsActivation = $derived(activation !== 'trigger');
+  provideFileInputOwner({
+    get regionOwnsActivation() {
+      return regionOwnsActivation;
+    }
+  });
+
   let dragOver = $state(false);
   let inputEl: HTMLInputElement | null = $state(null);
   let pickerBusy = false;
@@ -149,21 +163,25 @@
   }
 </script>
 
+<!-- The role is a ternary Svelte cannot resolve, so it reads the element as a plain div. Whenever
+     the tabindex renders, the role is "button" on the very same expression. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
   class="file-input {classes ?? ''}"
   class:file-input-dragover={dragOver}
   class:file-input-disabled={disabled}
+  class:file-input-passive={!regionOwnsActivation}
   data-pw={testId}
   testID={testId}
-  role="button"
-  tabindex={disabled ? -1 : 0}
-  aria-disabled={disabled}
-  aria-describedby={field.describedBy}
+  role={regionOwnsActivation ? 'button' : null}
+  tabindex={regionOwnsActivation ? (disabled ? -1 : 0) : null}
+  aria-disabled={regionOwnsActivation ? disabled : null}
+  aria-describedby={regionOwnsActivation ? field.describedBy : null}
   ondragover={handleDragOver}
   ondragleave={handleDragLeave}
   ondrop={handleDrop}
-  onkeydown={handleKeyDown}
-  onclick={handleClick}
+  onkeydown={regionOwnsActivation ? handleKeyDown : null}
+  onclick={regionOwnsActivation ? handleClick : null}
 >
   <input
     bind:this={inputEl}
@@ -179,7 +197,7 @@
     aria-hidden="true"
   />
 
-  {@render trigger({ openFilePicker, dragOver, disabled })}
+  {@render trigger({ openFilePicker, dragOver, disabled, describedBy: field.describedBy })}
 </div>
 
 {#if field.showsError}
@@ -231,9 +249,20 @@
     cursor: pointer;
   }
 
+  /* The region is not the control here, so it must not look like one. */
+  .file-input-passive {
+    cursor: auto;
+  }
+
+  /* The region is the one Tab stop of its upload action, so it is also the only thing that can
+     show where focus is. With no fallback this resolved to `outline: none` -- invisible to a
+     keyboard user, and only masked while a nested button supplied its own ring. `currentColor`
+     is the library's convention for a ring that needs no colour literal (Card, Pill, StatCard):
+     it follows the surrounding text colour, so it clears 3:1 on the light and the dark ground
+     alike and stays visible in forced-colors mode. :focus-visible keeps it off pointer clicks. */
   .file-input:focus-visible {
-    outline: var(--file-input-focus-outline);
-    outline-offset: var(--file-input-focus-outline-offset);
+    outline: var(--file-input-focus-outline, 2px solid currentColor);
+    outline-offset: var(--file-input-focus-outline-offset, 2px);
   }
 
   .file-input-dragover {

package/dist/FileInput/context.d.ts

@@ -0,0 +1,20 @@
+/**
+ * What a `FileInput` tells the content rendered inside its `trigger` snippet.
+ *
+ * A drop region is one control. By default the region itself is that control
+ * (`role="button"`, one Tab stop, Enter/Space/click open the chooser), so
+ * anything interactive placed inside it is a second control for the same
+ * action. `FileDropzoneTrigger` reads this to render as plain content when the
+ * region owns activation, instead of nesting a native `<button>` in it.
+ *
+ * A getter, not a copied boolean, so a consumer flipping `activation` on a live
+ * region is seen by content that is already mounted.
+ */
+export type FileInputOwner = {
+    readonly regionOwnsActivation: boolean;
+};
+/** Exported only so a test can stand in for the region without mounting a full `FileInput`. */
+export declare const FILE_INPUT_OWNER: unique symbol;
+export declare const provideFileInputOwner: (owner: FileInputOwner) => void;
+/** Null outside a `FileInput`, where nothing owns the action but the caller. */
+export declare const useFileInputOwner: () => FileInputOwner | null;

package/dist/FileInput/context.js

@@ -0,0 +1,8 @@
+import { getContext, hasContext, setContext } from 'svelte';
+/** Exported only so a test can stand in for the region without mounting a full `FileInput`. */
+export const FILE_INPUT_OWNER = Symbol('sui-file-input-owner');
+export const provideFileInputOwner = (owner) => {
+    setContext(FILE_INPUT_OWNER, owner);
+};
+/** Null outside a `FileInput`, where nothing owns the action but the caller. */
+export const useFileInputOwner = () => hasContext(FILE_INPUT_OWNER) ? getContext(FILE_INPUT_OWNER) : null;

package/dist/FileInput/properties.d.ts

@@ -3,10 +3,34 @@ export type FileInputSnippetProps = {
     openFilePicker: () => void;
     dragOver: boolean;
     disabled: boolean;
+    /**
+     * The ids of the rendered error/info messages, for `aria-describedby`. The drop region links
+     * them itself while it owns activation; a control supplied under `activation="trigger"` is the
+     * one that must carry them, so it is handed here. Null when nothing is rendered.
+     */
+    describedBy: string | null;
 };
+/**
+ * Which element is the single interactive control for the upload action.
+ *
+ * - `'region'` (default): the drop region is the control. It is the one Tab stop, announces as
+ *   a button named from the `trigger` content, and opens the chooser on Enter, Space or a click
+ *   anywhere inside it. `trigger` content must therefore be non-interactive.
+ * - `'trigger'`: the control inside `trigger` (a `Button`, say) is the one Tab stop and calls
+ *   `openFilePicker`. The region becomes a passive drag-and-drop target with no role, no tab
+ *   stop and no click or key handling of its own.
+ */
+export type FileInputActivation = 'region' | 'trigger';
 export type FileInputProperties = {
-    /** Content slot — receives { openFilePicker, dragOver, disabled } so consumers build any visual they need. */
+    /**
+     * Content slot — receives { openFilePicker, dragOver, disabled, describedBy } so consumers build
+     * any visual they need. Under the default `activation="region"` it must be non-interactive: the
+     * region is already the control, and a button inside it is a second Tab stop and a second
+     * announcement for the same action.
+     */
     trigger: Snippet<[FileInputSnippetProps]>;
+    /** Who owns the single interactive control. Defaults to `'region'`; see {@link FileInputActivation}. */
+    activation?: FileInputActivation;
     accept?: string;
     multiple?: boolean;
     maxSizeBytes?: number;

package/dist/FunnelChart/FunnelChart.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import type { FunnelChartProperties, FunnelStage } from './properties';
   import ChartContainer from '../_chart/ChartContainer.svelte';
+  import { defaultChartName, resolveChartName } from '../_chart/a11y';
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
   import { getColor, getContrastColor } from '../_chart/colors';
   import { formatNumber, formatPercent } from '../_chart/format';
@@ -25,6 +26,8 @@
     minHeight = 0,
     radius = DEFAULT_CHART_CORNER_RADIUS,
     tooltipPortal = false,
+    ariaLabel,
+    ariaDescription,
     testId,
     classes,
     empty,
@@ -92,6 +95,16 @@
   // The documented contract treats an all-zero dataset as empty (it would otherwise
   // render meaningless min-height bars), so fold that into the empty check.
   let isEmpty = $derived(data.length === 0 || data.every((stage) => stage.value === 0));
+  const chartName = $derived(
+    resolveChartName(
+      ariaLabel,
+      defaultChartName('funnel', {
+        seriesNames: data.map((stage) => stage.category)
+      })
+    )
+  );
+  // Zero-valued stages still paint structural bars and retain their callbacks.
+  const hasMarks = $derived(data.length > 0);
 
   /**
    * Computes the total horizontal space consumed by slope connectors.
@@ -330,6 +343,9 @@
         {aspectRatio}
         {maxHeight}
         {minHeight}
+        ariaLabel={chartName}
+        {ariaDescription}
+        interactive={hasMarks}
       >
         <g transform="translate({MARGIN_LEFT}, {MARGIN_TOP})">
           <!-- Stage bars and category labels -->
@@ -344,6 +360,7 @@
             <!-- Category label above the bar -->
             <text
               class="funnel-category-label"
+              aria-hidden="true"
               x={labelX}
               y={labelAreaHeight - 6}
               text-anchor="middle"
@@ -371,8 +388,9 @@
               onblur={handleLeave}
               onkeydown={(e) => handleKeydown(e, index)}
               onclick={() => handleClick(index)}
-              tabindex="0"
+              tabindex={hasMarks ? 0 : null}
               role="button"
+              aria-hidden={hasMarks ? null : 'true'}
             />
 
             <!-- Value label centred inside the bar -->
@@ -381,6 +399,7 @@
               {#if vl !== ''}
                 <text
                   class="funnel-value-label"
+                  aria-hidden="true"
                   x={labelX}
                   y={by + bh / 2}
                   text-anchor="middle"

package/dist/FunnelChart/properties.d.ts

@@ -72,6 +72,10 @@ export type OptionalFunnelChartProperties = {
      */
     tooltipPortal?: boolean;
     /** Value for the `data-pw` attribute on the chart root element. */
+    /** Accessible name of the drawing; omit to derive one from the plotted data. */
+    ariaLabel?: string;
+    /** Longer chart description, resolved inside the drawing's own DOM/shadow root. */
+    ariaDescription?: string;
     testId?: string;
     /** CSS class string applied to the chart root element. Useful for CSS-variable theming. */
     classes?: string;

package/dist/Gallery/Gallery.svelte

@@ -283,27 +283,29 @@
         </div>
       {/if}
       {#if showItemActions}
-        <div class="gallery-item-actions">
-          {#if showEditButton}
-            <div class="gallery-item-action">
-              <Button
-                ariaLabel={`Edit image ${index + 1}: ${image.alt}`}
-                onclick={(event) => handleEditClick(index, event)}
-              >
-                {@render controlIcon(editSvg, editIcon)}
-              </Button>
-            </div>
-          {/if}
-          {#if showDeleteButton}
-            <div class="gallery-item-action">
-              <Button
-                ariaLabel={`Delete image ${index + 1}: ${image.alt}`}
-                onclick={(event) => handleDeleteClick(index, event)}
-              >
-                {@render controlIcon(deleteSvg, deleteIcon)}
-              </Button>
-            </div>
-          {/if}
+        <div class="gallery-item-actions-frame">
+          <div class="gallery-item-actions">
+            {#if showEditButton}
+              <div class="gallery-item-action">
+                <Button
+                  ariaLabel={`Edit image ${index + 1}: ${image.alt}`}
+                  onclick={(event) => handleEditClick(index, event)}
+                >
+                  {@render controlIcon(editSvg, editIcon)}
+                </Button>
+              </div>
+            {/if}
+            {#if showDeleteButton}
+              <div class="gallery-item-action">
+                <Button
+                  ariaLabel={`Delete image ${index + 1}: ${image.alt}`}
+                  onclick={(event) => handleDeleteClick(index, event)}
+                >
+                  {@render controlIcon(deleteSvg, deleteIcon)}
+                </Button>
+              </div>
+            {/if}
+          </div>
         </div>
       {/if}
     </div>
@@ -514,16 +516,43 @@
     font-family: var(--gallery-list-caption-font-family, inherit);
   }
 
+  /* The --_actions-* / --_action-* values are internal fallbacks that only the narrow-tile rule at the
+     end of this block changes. They sit BELOW the public --gallery-item-action* variables, so any value
+     a consumer sets still wins at every tile width. */
   .gallery-item-actions {
     display: flex;
     align-items: center;
-    gap: var(--gallery-item-actions-gap, 4px);
+    gap: var(--gallery-item-actions-gap, var(--_actions-gap, 4px));
+  }
+
+  /* The frame exists so the narrow-tile rule below has a container to ask. It cannot be the tile itself:
+     inline-size containment makes a box report no intrinsic width, and a tile that reports none leaves a
+     grid inside an ancestor that sizes to its content (inline-block, fit-content, an auto-width absolute
+     box) with nothing to measure, so the whole gallery collapsed to its gaps. An out-of-flow box adds
+     nothing to its parent's intrinsic size, so the frame can be contained and the tile sizes as before.
+     It covers the tile exactly and lets pointer events through to the image underneath; in list view it
+     takes no box at all. Named so the rule can only match these frames, never a container in the
+     consumer's own page. */
+  .gallery-item-actions-frame {
+    display: contents;
+  }
+
+  .grid .gallery-item-actions-frame {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    container: gallery-tile / inline-size;
   }
 
   .grid .gallery-item-actions {
     position: absolute;
-    top: var(--gallery-item-actions-top, 8px);
-    right: var(--gallery-item-actions-right, 8px);
+    pointer-events: auto;
+    top: var(--gallery-item-actions-top, var(--_actions-inset, 8px));
+    right: var(--gallery-item-actions-right, var(--_actions-inset, 8px));
   }
 
   .list .gallery-item-actions {
@@ -535,12 +564,28 @@
     border-radius: var(--gallery-item-action-border-radius, 8px);
     --button-color: transparent;
     --button-hover-color: transparent;
-    --button-padding: var(--gallery-item-action-padding, 6px);
+    --button-padding: var(--gallery-item-action-padding, var(--_action-padding, 6px));
     --button-border-radius: var(--gallery-item-action-border-radius, 8px);
     --icon-container-padding: 0px;
     --icon-padding: 0px;
-    --icon-width: var(--gallery-item-action-icon-size, 16px);
-    --icon-height: var(--gallery-item-action-icon-size, 16px);
+    --icon-width: var(--gallery-item-action-icon-size, var(--_action-icon, 16px));
+    --icon-height: var(--gallery-item-action-icon-size, var(--_action-icon, 16px));
+  }
+
+  /* Two default-size actions need 2 x 36px + a 4px gap + both 8px insets = 92px of tile width. A tile
+     narrower than that (a three-column grid on a 320px phone is about 79px) pushed the left button past
+     the tile's overflow:hidden edge. Below 96px the defaults shrink instead: 26px buttons (still above the
+     24px WCAG 2.5.8 target minimum), 2px gap, 4px insets. */
+  @container gallery-tile (max-width: 96px) {
+    .gallery-item-actions {
+      --_actions-gap: 2px;
+      --_actions-inset: 4px;
+    }
+
+    .gallery-item-action {
+      --_action-padding: 3px;
+      --_action-icon: 12px;
+    }
   }
 
   .grid .gallery-item-action {

package/dist/HITL/HITL.svelte

@@ -833,16 +833,25 @@
     --input-container-width: 100%;
   }
 
+  /* Wraps so a narrow card (a phone, a chat column) puts the buttons that do not
+     fit on their own line instead of running past the card. Each wrapper is
+     `flex: 1`, and its automatic minimum is its button's text width, so a row
+     that fits is laid out exactly as before; one that does not breaks between
+     buttons and the ones on a short line grow to fill it. `.hitl` is
+     `contain: layout`, so an overflowing button here would be invisible to the
+     page's own scrollWidth and unreachable by scrolling. The wrapping itself comes from the
+     zero-specificity rule below, so --hitl-buttons-wrap: nowrap still turns it off. */
   .action-buttons {
     display: flex;
     gap: var(--hitl-buttons-gap, 0.75rem);
     width: 100%;
   }
 
-  /* Zero specificity, so a consumer's own flex-wrap rule for the row keeps winning, as it
-     did before this hook existed. */
+  /* Zero specificity, so a consumer's own flex-wrap rule for the row keeps winning. The default
+     wraps, because a row that does not fit otherwise runs past the card; a row that fits is laid
+     out exactly as before. Set --hitl-buttons-wrap: nowrap to keep the single line. */
   :where(.action-buttons) {
-    flex-wrap: var(--hitl-buttons-wrap, nowrap);
+    flex-wrap: var(--hitl-buttons-wrap, wrap);
   }
 
   .cancel-button,