@juspay/svelte-ui-components 4.51.0 → 4.52.1

package/dist/CheckListItem/CheckListItem.svelte

@@ -12,6 +12,16 @@
     classes
   }: CheckListItemProperties = $props();
 
+  /* The box (`role="checkbox"`) is what assistive technology reads, and the label the row shows is a
+     sibling of it, not inside <Checkbox> -- so nothing tied the two together and every item exposed an
+     unnamed control. `aria-labelledby` points the box at the label wrapper below, so the announced name
+     is exactly what is on screen: the plain `text`, or everything a `checkboxLabel` snippet renders
+     ("Required business details Required"), which `text` alone would not carry. The id lives in the
+     component's own tree, so it resolves inside the shadow root `<sui-check-list-item>` renders into. */
+  const uid = $props.id();
+  const labelId = `check-list-item-label-${uid}`;
+  const checkboxAttributes = { 'aria-labelledby': labelId };
+
   function handleClick(value: boolean): void {
     checked = value;
     onclick?.(checked);
@@ -20,19 +30,25 @@
 
 <div class="container {classes ?? ''}" class:disabled data-pw={testId} testID={testId}>
   <div class="checkbox-wrapper">
+    <!-- `ariaLabel` is the fallback name: it applies only if the label wrapper resolves to nothing
+         (an empty snippet), because `aria-labelledby` outranks it whenever it yields text. -->
     <Checkbox
       text=""
+      ariaLabel={text}
+      attributes={checkboxAttributes}
       bind:checked
       {disabled}
       onclick={handleClick}
       {...typeof testId === 'string' ? { testId: `${testId}-checkbox` } : {}}
     />
   </div>
-  {#if typeof checkboxLabel === 'function'}
-    {@render checkboxLabel()}
-  {:else}
-    <span class="text" class:checked>{text}</span>
-  {/if}
+  <span class="check-list-item-label" id={labelId}>
+    {#if typeof checkboxLabel === 'function'}
+      {@render checkboxLabel()}
+    {:else}
+      <span class="text" class:checked>{text}</span>
+    {/if}
+  </span>
 </div>
 
 <style>
@@ -52,6 +68,12 @@
     flex-shrink: 0;
   }
 
+  /* Names the checkbox but adds no box of its own: the text or snippet inside stays a direct flex item
+     of .container, so layout, gap and every --check-list-item-* token behave as before. */
+  .check-list-item-label {
+    display: contents;
+  }
+
   .container.disabled .checkbox-wrapper {
     --checkbox-disabled-opacity: var(--check-list-item-disabled-opacity, 0.4);
   }

package/dist/ColorPicker/ColorPicker.svelte

@@ -21,6 +21,7 @@
   let {
     value = $bindable('#000000'),
     label,
+    ariaLabel,
     disabled = false,
     showValue = false,
     testId,
@@ -50,6 +51,25 @@
   );
   const describedGroup = $derived(field.describedBy !== null || field.ariaInvalid !== null);
 
+  /* What this picker is called: its visible `label`, else the `ariaLabel` a caller
+     gives a swatch-only picker that has no caption. Every control in it is named
+     from this, because a page with three pickers otherwise offers three identical
+     "Pick a color" buttons and three nameless hex fields -- indistinguishable in a
+     screen reader's list of controls. `null` rather than a made-up default: with
+     no name supplied the controls keep the plain purpose names below, which is
+     the most that can honestly be said. */
+  const pickerName = $derived(
+    typeof label === 'string' && label.trim() !== ''
+      ? label.trim()
+      : typeof ariaLabel === 'string' && ariaLabel.trim() !== ''
+        ? ariaLabel.trim()
+        : null
+  );
+  const triggerName = $derived(
+    pickerName === null ? 'Pick a color' : `Pick a color: ${pickerName}`
+  );
+  const dialogName = $derived(pickerName === null ? 'Color picker' : `${pickerName} picker`);
+
   // ── Internal state ──────────────────────────────────────────────
 
   let open = $state(false);
@@ -293,7 +313,7 @@
   class="color-picker-container {classes ?? ''}"
   class:disabled
   role={describedGroup ? 'group' : null}
-  aria-label={describedGroup && typeof label === 'string' ? label : null}
+  aria-label={describedGroup ? pickerName : null}
   aria-describedby={field.describedBy}
   aria-invalid={field.ariaInvalid}
   data-pw={testId}
@@ -312,7 +332,7 @@
       class:standalone={showValue === false}
       bind:this={triggerWrapEl}
     >
-      <Button onclick={togglePicker} {disabled} ariaLabel="Pick a color" ariaExpanded={open}>
+      <Button onclick={togglePicker} {disabled} ariaLabel={triggerName} ariaExpanded={open}>
         <span class="color-picker-checkerboard">
           <span class="color-picker-swatch" style="background-color: {value};"></span>
         </span>
@@ -322,6 +342,7 @@
       <div class="color-picker-input-wrap">
         <Input
           bind:value
+          ariaLabel={`${pickerName ?? 'Color'} hex value`}
           disable={disabled}
           maxLength={7}
           classes="color-picker-text-input"
@@ -333,7 +354,7 @@
 
   <!-- Popover panel -->
   {#if open}
-    <div class="color-picker-popover" role="dialog" aria-label="Color picker" use:dismissalAction>
+    <div class="color-picker-popover" role="dialog" aria-label={dialogName} use:dismissalAction>
       <div
         class="cp-sat-panel"
         style="background-color: {hsvToHex(hue, 1, 1)};"
@@ -361,6 +382,7 @@
           min={0}
           max={360}
           step={1}
+          ariaLabel="Hue"
           {disabled}
           classes="cp-hue-track"
           oninput={handleHueInput}
@@ -375,6 +397,7 @@
           <div class="cp-field-hex">
             <Input
               value={hexInputValue}
+              ariaLabel="Hex value"
               maxLength={7}
               classes="cp-field-input"
               oninput={handleHexFieldInput}
@@ -384,10 +407,11 @@
         {:else if mode === 'RGB'}
           <SplitInput
             values={[String(currentRgb.r), String(currentRgb.g), String(currentRgb.b)]}
+            ariaLabel="RGB channels"
             fields={[
-              { label: 'R', dataType: 'number', min: 0, max: 255 },
-              { label: 'G', dataType: 'number', min: 0, max: 255 },
-              { label: 'B', dataType: 'number', min: 0, max: 255 }
+              { label: 'R', ariaLabel: 'Red', dataType: 'number', min: 0, max: 255 },
+              { label: 'G', ariaLabel: 'Green', dataType: 'number', min: 0, max: 255 },
+              { label: 'B', ariaLabel: 'Blue', dataType: 'number', min: 0, max: 255 }
             ]}
             {disabled}
             classes="cp-split-input"
@@ -396,10 +420,17 @@
         {:else}
           <SplitInput
             values={[String(currentHsl.h), String(currentHsl.s), String(currentHsl.l)]}
+            ariaLabel="HSL channels"
             fields={[
-              { label: 'H', dataType: 'number', min: 0, max: 360 },
-              { label: 'S', dataType: 'number', min: 0, max: 100 },
-              { label: 'L', dataType: 'number', min: 0, max: 100 }
+              { label: 'H', ariaLabel: 'Hue (degrees)', dataType: 'number', min: 0, max: 360 },
+              {
+                label: 'S',
+                ariaLabel: 'Saturation (percent)',
+                dataType: 'number',
+                min: 0,
+                max: 100
+              },
+              { label: 'L', ariaLabel: 'Lightness (percent)', dataType: 'number', min: 0, max: 100 }
             ]}
             {disabled}
             classes="cp-split-input"

package/dist/ColorPicker/properties.d.ts

@@ -4,6 +4,14 @@ export type MandatoryColorPickerProperties = {
 };
 export type OptionalColorPickerProperties = {
     label?: string;
+    /**
+     * Names the picker when it has no visible `label` -- a swatch-only picker, say.
+     * Every control inside is named from `label` if there is one, else this ("Brand
+     * color hex value", "Pick a color: Brand color"), so several pickers on a page
+     * can be told apart. Without either, the controls keep their purpose names
+     * ("Hex value", "Red") and the trigger stays "Pick a color".
+     */
+    ariaLabel?: string;
     disabled?: boolean;
     showValue?: boolean;
     testId?: string;

package/dist/Combobox/Combobox.svelte

@@ -78,6 +78,26 @@
   );
   const describedGroup = $derived(field.describedBy !== null || field.ariaInvalid !== null);
 
+  /* What names the text field. The input is where a screen reader lands, but the
+     name used to stop at the listbox: `ariaLabel` was applied to the popup only,
+     so the combobox itself announced as "combobox, blank" (or as its placeholder,
+     which is not a name and disappears from a multi-select once a pill is picked).
+
+     `inputProperties.ariaLabel` is the most specific and wins, as it always could;
+     then `ariaLabel`; then `inputProperties.label`, which docs/Combobox.md has long
+     said names the field but which Input never renders here (`actionInput`
+     suppresses its <label>), so it is used as the name rather than dropped. The
+     placeholder is the last resort so a consumer who named nothing still has a name
+     that does not vanish when the placeholder does. */
+  const accessibleName = (text?: string | null): string | null =>
+    typeof text === 'string' && text.trim() !== '' ? text : null;
+  const inputName = $derived(
+    accessibleName(inputProperties?.ariaLabel) ??
+      accessibleName(ariaLabel) ??
+      accessibleName(inputProperties?.label) ??
+      accessibleName(placeholder)
+  );
+
   let containerEl: HTMLDivElement | null = $state(null);
   let inputRef: ReturnType<typeof Input> | null = $state(null);
 
@@ -368,6 +388,7 @@
   class:disabled
   bind:this={containerEl}
   role={describedGroup ? 'group' : null}
+  aria-label={describedGroup ? inputName : null}
   aria-describedby={field.describedBy}
   aria-invalid={field.ariaInvalid}
   data-pw={testId}
@@ -383,7 +404,13 @@
         {#if typeof pillSnippet === 'function'}
           {@render pillSnippet(id, () => !disabled && removeValue(id), disabled)}
         {:else}
-          <Pill text={labelOf(id)} dismissible {disabled} ondismiss={() => removeValue(id)} />
+          <Pill
+            text={labelOf(id)}
+            dismissible
+            dismissLabel={`Remove ${labelOf(id)}${inputName ? ` from ${inputName}` : ''}`}
+            {disabled}
+            ondismiss={() => removeValue(id)}
+          />
         {/if}
       {/each}
     {/if}
@@ -393,6 +420,7 @@
         bind:value={inputValue}
         bind:this={inputRef}
         placeholder={multiple && selected.length > 0 ? '' : placeholder}
+        ariaLabel={inputName}
         {name}
         disable={disabled}
         autoComplete="off"
@@ -415,11 +443,15 @@
   </div>
 
   {#if open && !disabled}
+    <!-- tabindex="-1": Firefox gives keyboard focus to a scroll container that holds no
+         tabbable child, and these options are all tabindex="-1". Tab from the open input
+         then landed on the listbox, and the focus was lost when the Tab handler closed it. -->
     <div
       class="combobox-dropdown"
       role="listbox"
       id={listboxId}
-      aria-label={ariaLabel}
+      aria-label={ariaLabel ?? inputName}
+      tabindex="-1"
       use:dismissalAction
     >
       {#if typeof dropdownHeader === 'function'}

package/dist/CommandMenu/CommandMenu.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { CommandMenuProperties, CommandItem } from './properties';
-  import { tick, onMount, onDestroy } from 'svelte';
-  import { lockBodyScroll, unlockBodyScroll } from '../utils';
+  import { tick, onMount, onDestroy, untrack } from 'svelte';
+  import { toStore } from 'svelte/store';
+  import { acquireScrollLock, resolveScrollContainer } from '../utils';
   import { registerDismissible } from '../_interaction/dismissal';
   import { getActiveElement } from '../_interaction/focus';
   import { tokenizedFly } from '../Animations/tokenizedFly';
@@ -16,6 +17,7 @@
   let {
     items,
     open = $bindable(false),
+    scrollContainer,
     query = $bindable(''),
     shortcutEnabled = true,
     placeholder = 'Search commands...',
@@ -289,10 +291,10 @@
     }
   }
 
-  // Lock and unlock strictly in this action so the pairing is 1:1. Svelte destroys
-  // the action when the node goes away, including on component teardown, so the
-  // onDestroy below must NOT unlock as well: with a shared reference count a second
-  // decrement would release a lock another open surface still needs.
+  // The action owns the scroll hold until its node goes away; the logical-open
+  // observer below replaces that hold if an outro is reversed with a new owner.
+  // onDestroy must NOT release it again: a second decrement could release a
+  // hold another open surface still needs.
   //
   // The dismissible layer is registered here too, for the same reason: this
   // action's mount/destroy already brackets exactly the open span (the overlay
@@ -321,12 +323,35 @@
   // input logic below it. Deferred rather than shipped half-verified: a wrong
   // guess here risks a worse regression (stealing focus into the wrong
   // element on every open) than the narrow bug it would fix.
+  let scrollLockNode: HTMLElement | null = null;
+  let releaseScrollLock: (() => void) | null = null;
+  let scrollLockSpanEnded = false;
+
+  onMount(() =>
+    toStore(() => open).subscribe((isOpen) => {
+      if (!isOpen) {
+        scrollLockSpanEnded = true;
+      } else if (scrollLockSpanEnded && scrollLockNode !== null) {
+        // A same-outro reopen keeps the node/action; it still starts a new
+        // scroll-owner span. Changes within an open remain intentionally frozen.
+        scrollLockSpanEnded = false;
+        const releaseNext = untrack(() =>
+          acquireScrollLock(resolveScrollContainer(scrollLockNode, scrollContainer))
+        );
+        releaseScrollLock?.();
+        releaseScrollLock = releaseNext;
+      }
+    })
+  );
+
   function scrollLockAction(node: HTMLElement) {
     const opener = getActiveElement(node);
     if (openerElement === null && opener instanceof HTMLElement) {
       openerElement = opener;
     }
-    lockBodyScroll();
+    scrollLockNode = node;
+    scrollLockSpanEnded = false;
+    releaseScrollLock = acquireScrollLock(resolveScrollContainer(node, scrollContainer));
     const releaseDismissible = registerDismissible({
       element: () => dialogElement,
       onEscape: close
@@ -339,7 +364,9 @@
     return {
       destroy() {
         releaseDismissible();
-        unlockBodyScroll();
+        releaseScrollLock?.();
+        releaseScrollLock = null;
+        scrollLockNode = null;
         // Opt-in only (clearStateOnClose): a controlled parent can set
         // `open = false` without calling close(), and the overlay action still
         // unmounts on every close path either way -- this is the lifecycle

package/dist/CommandMenu/properties.d.ts

@@ -1,3 +1,4 @@
+import type { ScrollContainer } from '../types';
 import type { Snippet } from 'svelte';
 export type CommandItem = {
     label: string;
@@ -12,6 +13,11 @@ export type MandatoryCommandMenuProperties = {
     items: CommandItem[];
 };
 export type OptionalCommandMenuProperties = {
+    /** Scroll owner, resolved once per open span. Omit for the overlay's ownerDocument.body.
+     * Supply the embedded scroll element or a getter; explicit null means no lock.
+     * Changing ownership while open takes effect on the next open, and teardown
+     * always releases the originally acquired container. */
+    scrollContainer?: ScrollContainer;
     open?: boolean;
     /** Bindable search text. Omit to keep the built-in uncontrolled search. */
     query?: string;

package/dist/DateRangePicker/DateRangePicker.svelte

@@ -11,6 +11,7 @@
   import { focusTrapTabTarget, getFocusTrapBoundary } from '../_interaction/focus';
   import { getActiveElement } from '../_interaction/focus';
   import { registerDismissible } from '../_interaction/dismissal';
+  import { findInteractive } from '../_interaction/focusable';
   import { describeField } from '../_field/description';
   import chevronDownSvg from '../assets/chevron-down.svg?raw';
   import checkmarkSvg from '../assets/checkmark.svg?raw';
@@ -339,9 +340,9 @@
   }
 
   function openPicker(): void {
-    // Save whatever had focus (the trigger button) so it can be restored on close.
-    const panelOpener = getActiveElement(triggerRef);
-    panelFocusReturnEl = panelOpener instanceof HTMLElement ? panelOpener : null;
+    // Pointer activation need not focus a button in WebKit. Return to the
+    // invoking control, not an unrelated previously focused field or body.
+    panelFocusReturnEl = triggerRef ? findInteractive(triggerRef) : null;
     // Seed draft from current committed values
     draftStart = rangeStart;
     draftEnd = rangeEnd;
@@ -506,8 +507,7 @@
   }
 
   function openComparePicker(): void {
-    const compareOpener = getActiveElement(compareTriggerRef);
-    compareFocusReturnEl = compareOpener instanceof HTMLElement ? compareOpener : null;
+    compareFocusReturnEl = compareTriggerRef ? findInteractive(compareTriggerRef) : null;
     draftCompareStart = compareStart ?? null;
     draftCompareEnd = compareEnd ?? null;
     openCompare = true;

package/dist/DualAxisBarChart/DualAxisBarChart.svelte

@@ -5,6 +5,7 @@
     DualAxisTooltipContext
   } from './properties';
   import ChartContainer from '../_chart/ChartContainer.svelte';
+  import { defaultChartName, resolveChartName } from '../_chart/a11y';
   import Axis from '../_chart/Axis.svelte';
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
   import Legend from '../_chart/Legend.svelte';
@@ -32,7 +33,8 @@
   import { SvelteSet } from 'svelte/reactivity';
 
   // ── Per-instance uid for SVG <defs> ids ────────────────────────
-  const uid = Math.random().toString(36).slice(2, 9);
+  const uid = $props.id();
+  const emptyDescriptionId = `dual-axis-empty-desc-${uid}`;
 
   // ── Props ──────────────────────────────────────────────────────
 
@@ -55,6 +57,8 @@
     hideLegendBelow = 360,
     tooltipSnippet,
     onbarclick,
+    ariaLabel,
+    ariaDescription,
     testId,
     classes
   }: DualAxisBarChartProperties = $props();
@@ -378,8 +382,20 @@
    */
   type HoverRect = { x: number; width: number; catIdx: number };
 
+  const chartName = $derived(
+    resolveChartName(
+      ariaLabel,
+      defaultChartName('dual-axis', { seriesNames: series.map((s) => s.name) })
+    )
+  );
+  const chartDescription = $derived(
+    typeof ariaDescription === 'string' && ariaDescription.trim() !== '' ? ariaDescription : null
+  );
+  const hasMarks = $derived(
+    bars.length > 0 || lineSeriesData.some((line) => line.points.length > 0)
+  );
   const hoverRects: HoverRect[] = $derived(
-    categories.map((_, catIdx) => ({
+    (hasMarks ? categories : []).map((_, catIdx) => ({
       x: catScale(categories[catIdx]),
       width: catScale.bandwidth,
       catIdx
@@ -390,10 +406,13 @@
     const parts = series
       .map((s, si) => ({ s, si }))
       .filter(({ si }) => !hiddenSeries.has(si))
-      .map(
-        ({ s }) =>
-          `${s.name} ${(s.yAxisIndex === 0 ? leftFormat : rightFormat)(s.data[catIdx] ?? 0)}`
-      );
+      .map(({ s }) => {
+        const value = s.data[catIdx];
+        const text = Number.isFinite(value)
+          ? (s.yAxisIndex === 0 ? leftFormat : rightFormat)(value)
+          : 'not available';
+        return `${s.name} ${text}`;
+      });
     return `${categories[catIdx]}: ${parts.join(', ')}`;
   }
 
@@ -474,6 +493,9 @@
         {aspectRatio}
         {maxHeight}
         {minHeight}
+        ariaLabel={chartName}
+        {ariaDescription}
+        interactive={hasMarks}
       >
         <g transform="translate({dims.margin.left}, {dims.margin.top})">
           <!-- Left Y-axis (index 0) -->
@@ -544,6 +566,7 @@
               fill={bar.color}
               aria-label="{categories[bar.categoryIndex]}: {bar.value}"
               role="img"
+              aria-hidden="true"
             />
           {/each}
 
@@ -570,6 +593,7 @@
                 style="stroke: var(--dual-axis-dot-stroke, light-dark(#fff, #111827)); stroke-width: var(--dual-axis-dot-stroke-width, 1.5);"
                 aria-label="{categories[ptIdx]}: {series[ls.seriesIndex]?.data[ptIdx] ?? 0}"
                 role="img"
+                aria-hidden="true"
               />
             {/each}
           {/each}
@@ -640,7 +664,17 @@
       {/if}
     </div>
   {:else}
-    <div class="chart-empty">No data available.</div>
+    <div
+      class="chart-empty"
+      role="img"
+      aria-label={chartName}
+      aria-describedby={chartDescription === null ? null : emptyDescriptionId}
+    >
+      No data available.
+      {#if chartDescription !== null}
+        <span id={emptyDescriptionId} hidden>{chartDescription}</span>
+      {/if}
+    </div>
   {/if}
 </div>
 

package/dist/DualAxisBarChart/properties.d.ts

@@ -119,6 +119,10 @@ export type OptionalDualAxisBarChartProperties = {
      */
     tooltipSnippet?: Snippet<[DualAxisTooltipContext]>;
     /** Value set on `data-pw` for test targeting. */
+    /** 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;
     /** Extra CSS class string on the root `<div>`. */
     classes?: string;

package/dist/FileDropzoneTrigger/FileDropzoneTrigger.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Button from '../Button/Button.svelte';
   import Img from '../Img/Img.svelte';
+  import { useFileInputOwner } from '../FileInput/context';
   import type { FileDropzoneTriggerProperties } from './properties';
 
   let {
@@ -12,8 +13,31 @@
     testId,
     classes
   }: FileDropzoneTriggerProperties = $props();
+
+  /* An upload action gets one interactive control, never two. Inside a FileInput
+     the region is that control (one Tab stop, Enter/Space/click open the chooser),
+     so a native <button> in here would be a second stop announcing the same
+     action. The button is therefore rendered only when this trigger is the owner:
+     it was handed an `onclick` and nothing around it already owns activation.
+     Otherwise it is the same surface as plain content. */
+  const owner = useFileInputOwner();
+  const ownsActivation = $derived(
+    typeof onclick === 'function' && owner?.regionOwnsActivation !== true
+  );
 </script>
 
+{#snippet body()}
+  <div class="file-dropzone-trigger-icon" aria-hidden="true">
+    <Img inlineSvg src={icon} alt="" fallback="" classes="file-dropzone-trigger-icon-img" />
+  </div>
+  <p class="file-dropzone-trigger-heading-wrap">
+    <span class="file-dropzone-trigger-heading">{heading}</span>
+  </p>
+  {#if caption}
+    <p class="file-dropzone-trigger-caption">{caption}</p>
+  {/if}
+{/snippet}
+
 {#if compact}
   <div class="file-dropzone-trigger-compact {classes ?? ''}">
     <div class="file-dropzone-trigger-icon-sm" aria-hidden="true">
@@ -21,22 +45,22 @@
     </div>
     <span class="file-dropzone-trigger-heading" data-pw={testId} testID={testId}>{heading}</span>
   </div>
-{:else}
+{:else if ownsActivation}
   <Button
     classes={`file-dropzone-trigger-button ${classes ?? ''}`}
     {onclick}
     {...typeof testId === 'string' ? { testId } : {}}
   >
-    <div class="file-dropzone-trigger-icon" aria-hidden="true">
-      <Img inlineSvg src={icon} alt="" fallback="" classes="file-dropzone-trigger-icon-img" />
-    </div>
-    <p class="file-dropzone-trigger-heading-wrap">
-      <span class="file-dropzone-trigger-heading">{heading}</span>
-    </p>
-    {#if caption}
-      <p class="file-dropzone-trigger-caption">{caption}</p>
-    {/if}
+    {@render body()}
   </Button>
+{:else}
+  <div
+    class="file-dropzone-trigger-surface file-dropzone-trigger-button {classes ?? ''}"
+    data-pw={testId}
+    testID={testId}
+  >
+    {@render body()}
+  </div>
 {/if}
 
 <style>
@@ -47,6 +71,76 @@
     gap: var(--file-dropzone-trigger-compact-gap, 8px);
   }
 
+  /* The non-interactive form of the trigger. It reproduces the primary, medium Button
+     this component rendered before, hook for hook -- same `--button-*` tokens, same
+     fallbacks -- so a consumer's `classes` override and the demo's look carry over to
+     the one place the button is no longer rendered: inside a FileInput region, which
+     is already the control. Button cannot do this itself: it always renders a native
+     <button> (or <a>). Keep this in step with Button's `.button-el` rules. */
+  .file-dropzone-trigger-surface {
+    /* The primary variant fill, behind the same internal name Button uses, which is
+       how it is recorded as dark in both themes rather than as a light default. */
+    --_btn-color: #3a4550;
+
+    position: relative;
+    max-height: var(--button-max-height, none);
+    max-width: var(--button-max-width, none);
+    min-width: var(--button-min-width, auto);
+    font-family: var(--button-font-family, inherit);
+    font-weight: var(--button-font-weight, 500);
+    font-size: var(--button-font-size, 14px);
+    background-color: var(--button-color, var(--_btn-color));
+    background-image: var(--button-background, none);
+    color: var(--button-text-color, #ffffff);
+    height: var(--button-height, fit-content);
+    padding: var(--button-padding, 16px);
+    margin: var(--button-margin, 0);
+    border-radius: var(--button-border-radius, var(--radius, 6px));
+    width: var(--button-width, fit-content);
+    cursor: var(--cursor, pointer);
+    opacity: var(--opacity, 1);
+    border: var(--button-border, none);
+    box-sizing: border-box;
+    text-align: center;
+    text-decoration: var(--button-text-decoration, none);
+    line-height: var(--button-line-height, normal);
+    display: flex;
+    justify-content: var(--button-justify-content, center);
+    align-items: center;
+    flex-direction: var(--button-content-flex-direction, row);
+    gap: var(--button-content-gap, 16px);
+    visibility: var(--button-visibility, visible);
+    box-shadow: var(--button-box-shadow, none);
+    transition: var(--button-transition, none);
+    white-space: var(--button-white-space, nowrap);
+  }
+
+  .file-dropzone-trigger-surface:hover {
+    background: var(
+      --button-hover-color,
+      var(--button-background, var(--button-color, var(--_btn-color)))
+    );
+    color: var(--button-hover-text-color, var(--button-text-color, #ffffff));
+    border: var(--button-hover-border, var(--button-border, none));
+    transform: var(--button-hover-transform, none);
+    box-shadow: var(--button-hover-box-shadow, var(--button-box-shadow, none));
+  }
+
+  .file-dropzone-trigger-surface:active {
+    transform: var(--button-active-transform, none);
+    background: var(
+      --button-active-background,
+      var(--button-background, var(--button-color, var(--_btn-color)))
+    );
+    box-shadow: var(--button-active-box-shadow, var(--button-box-shadow, none));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .file-dropzone-trigger-surface {
+      transition: none;
+    }
+  }
+
   .file-dropzone-trigger-icon-sm,
   .file-dropzone-trigger-icon {
     display: flex;