@juspay/svelte-ui-components 2.135.0 → 2.136.0

package/dist/Table/BuiltinCell.svelte

@@ -58,6 +58,32 @@
         : ''
   );
 
+  const defaultTestIdSuffixes = {
+    icon: 'icon',
+    thumbnail: 'thumb',
+    thumbnailPlaceholder: 'thumb-placeholder',
+    tag: 'tag',
+    trendUp: 'trend-up',
+    trendDown: 'trend-down',
+    menu: 'menu',
+    menuTrigger: 'menu-trigger',
+    popup: 'popup',
+    popupTrigger: 'popup-trigger',
+    link: 'link',
+    copy: 'copy',
+    linkCopied: 'link-copied'
+  } as const;
+
+  const generatedTestId = (suffixName: keyof typeof defaultTestIdSuffixes, index?: number) => {
+    if (!column.testId) {
+      return;
+    }
+    const suffix = column.testIdSuffixes?.[suffixName] ?? defaultTestIdSuffixes[suffixName];
+    return typeof index === 'number'
+      ? `${column.testId}-${suffix}-${index}`
+      : `${column.testId}-${suffix}`;
+  };
+
   let copied = $state(false);
   let copyResetTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -143,8 +169,8 @@
     {#each icons as iconSrc, iconIndex (`${iconIndex}-${iconSrc}`)}
       <span
         class="builtin-icon-label-icon"
-        data-pw={column.testId ? `${column.testId}-icon-${iconIndex}` : null}
-        testID={column.testId ? `${column.testId}-icon-${iconIndex}` : null}
+        data-pw={generatedTestId('icon', iconIndex)}
+        testID={generatedTestId('icon', iconIndex)}
       >
         <Img inlineSvg src={String(iconSrc)} alt="" fallback="" />
       </span>
@@ -157,8 +183,8 @@
     {#if typeof data.imageUrl === 'string' && data.imageUrl}
       <span
         class="builtin-thumb"
-        data-pw={column.testId ? `${column.testId}-thumb` : null}
-        testID={column.testId ? `${column.testId}-thumb` : null}
+        data-pw={generatedTestId('thumbnail')}
+        testID={generatedTestId('thumbnail')}
       >
         <Img
           src={data.imageUrl}
@@ -169,8 +195,8 @@
     {:else}
       <span
         class="builtin-thumb builtin-thumb-placeholder"
-        data-pw={column.testId ? `${column.testId}-thumb-placeholder` : null}
-        testID={column.testId ? `${column.testId}-thumb-placeholder` : null}
+        data-pw={generatedTestId('thumbnailPlaceholder')}
+        testID={generatedTestId('thumbnailPlaceholder')}
         >{typeof data.text1 === 'string' && data.text1
           ? data.text1.charAt(0).toUpperCase()
           : ''}</span
@@ -190,7 +216,7 @@
         <Pill
           text={tag.text}
           classes={tag.classes ?? ''}
-          testId={tag.testId ?? (column.testId && `${column.testId}-tag-${tagIndex}`)}
+          testId={tag.testId ?? generatedTestId('tag', tagIndex)}
         />
       {/each}
     </div>
@@ -227,8 +253,8 @@
           {#if compare.trendPercent > 0}
             <span
               class="builtin-trend builtin-trend-up"
-              data-pw={column.testId ? `${column.testId}-trend-up` : null}
-              testID={column.testId ? `${column.testId}-trend-up` : null}
+              data-pw={generatedTestId('trendUp')}
+              testID={generatedTestId('trendUp')}
             >
               <!-- eslint-disable svelte/no-at-html-tags -->
               <span class="builtin-trend-icon">{@html trendUpSvg}</span>
@@ -237,8 +263,8 @@
           {:else if compare.trendPercent < 0}
             <span
               class="builtin-trend builtin-trend-down"
-              data-pw={column.testId ? `${column.testId}-trend-down` : null}
-              testID={column.testId ? `${column.testId}-trend-down` : null}
+              data-pw={generatedTestId('trendDown')}
+              testID={generatedTestId('trendDown')}
             >
               <!-- eslint-disable svelte/no-at-html-tags -->
               <span class="builtin-trend-icon">{@html trendDownSvg}</span>
@@ -419,16 +445,13 @@
             danger: item.danger,
             separator: item.separator
           }))}
-          testId={column.testId && `${column.testId}-menu-${rowIndex}`}
+          testId={generatedTestId('menu', rowIndex)}
           {usePortal}
           onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value, originalIndex)}
         >
           {#snippet trigger()}
             <span class="builtin-icon-button">
-              <Button
-                ariaLabel="More actions"
-                testId={column.testId && `${column.testId}-menu-trigger-${rowIndex}`}
-              >
+              <Button ariaLabel="More actions" testId={generatedTestId('menuTrigger', rowIndex)}>
                 {#snippet icon()}
                   <!-- eslint-disable svelte/no-at-html-tags -->
                   <span class="builtin-menu-dots">{@html dotsSvg}</span>
@@ -458,7 +481,7 @@
           danger: item.danger,
           separator: item.separator
         }))}
-        testId={column.testId && `${column.testId}-popup-${rowIndex}`}
+        testId={generatedTestId('popup', rowIndex)}
         {usePortal}
         onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value, originalIndex)}
       >
@@ -466,7 +489,7 @@
           <span class="builtin-icon-button">
             <Button
               ariaLabel={popupData.ariaLabel ?? 'More actions'}
-              testId={column.testId && `${column.testId}-popup-trigger-${rowIndex}`}
+              testId={generatedTestId('popupTrigger', rowIndex)}
             >
               {#snippet icon()}
                 <!-- eslint-disable svelte/no-at-html-tags -->
@@ -490,8 +513,8 @@
         target="_blank"
         rel="noopener noreferrer"
         class="builtin-link-anchor"
-        data-pw={column.testId ? `${column.testId}-link-${rowIndex}` : null}
-        testID={column.testId ? `${column.testId}-link-${rowIndex}` : null}
+        data-pw={generatedTestId('link', rowIndex)}
+        testID={generatedTestId('link', rowIndex)}
       >
         {link.label ?? link.url}
       </a>
@@ -499,7 +522,7 @@
         <span class="builtin-link-copy">
           <Button
             ariaLabel={copied ? 'Link copied' : 'Copy link'}
-            testId={column.testId && `${column.testId}-copy-${rowIndex}`}
+            testId={generatedTestId('copy', rowIndex)}
             onclick={() => handleCopy(link.url)}
           >
             {#snippet icon()}
@@ -511,8 +534,8 @@
         {#if copied}
           <span
             class="builtin-link-copied"
-            data-pw={column.testId ? `${column.testId}-link-copied` : null}
-            testID={column.testId ? `${column.testId}-link-copied` : null}>Copied</span
+            data-pw={generatedTestId('linkCopied')}
+            testID={generatedTestId('linkCopied')}>Copied</span
           >
         {/if}
       {/if}

package/dist/Table/Table.svelte

@@ -375,6 +375,14 @@
     return total > 0 ? `${from}-${to} of ${total}` : '';
   });
   let pageSizeOptions = $derived(pagination?.pageSizeOptions ?? [10, 25, 50, 100]);
+  // `hideControls` remains a shorthand for hiding both at once — existing
+  // consumers of it are unaffected. `hidePageSizeSelector`/`hideSteppers` let
+  // a consumer suppress either independently, e.g. a working external
+  // paginator that only wants Table's range text plus its own steppers.
+  let hidePageSizeSelector = $derived(
+    (pagination?.hideControls || pagination?.hidePageSizeSelector) ?? false
+  );
+  let hideSteppers = $derived((pagination?.hideControls || pagination?.hideSteppers) ?? false);
 
   const handlePageChange = (page: number): void => {
     pageOverride = page;
@@ -722,6 +730,7 @@
                   data-pw={headerColumn?.testId ?? null}
                   testID={headerColumn?.testId ?? null}
                   style:text-align={headerColumn?.align ?? null}
+                  style:width={headerColumn?.width ?? null}
                   style:max-width={headerColumn?.maxWidth ?? null}
                 >
                   <span
@@ -965,6 +974,7 @@
                         ? getCellTestId(row, cellValue, rowIndex)
                         : null}
                       style:text-align={keyedColumn?.align ?? null}
+                      style:width={keyedColumn?.width ?? null}
                       style:max-width={keyedColumn?.maxWidth ?? null}
                       title={keyedColumn?.maxWidth && isScalarCell ? String(cellValue) : null}
                     >
@@ -1007,10 +1017,15 @@
       <div class="table-footer">
         {@render paginatorSlot()}
       </div>
-    {:else if pagination && (paginationTotalPages > 1 || pagination.hasMore)}
+    {:else if pagination && (paginationTotalPages > 1 || pagination.hasMore || pagination.showFooterOnSinglePage || (hidePageSizeSelector && hideSteppers))}
       <!-- DataGrid parity: pagination chrome only renders when the data spans
            more than one page (or the server reports more chunks); a
-           single-page table shows no footer. -->
+           single-page table shows no footer. `showFooterOnSinglePage` opts
+           a consumer out of that default, e.g. to keep the page-size
+           selector reachable even for a one-page result. Suppressing BOTH
+           controls (via `hideControls`, or `hidePageSizeSelector` +
+           `hideSteppers` together) implies the same — a count-only footer
+           has nothing to hide behind "already on the only page". -->
       <div
         class="table-footer table-paginator"
         data-pw={pagination.testId ?? null}
@@ -1018,47 +1033,55 @@
       >
         <span
           class="table-paginator-range"
-          data-pw={typeof testId === 'string'
-            ? `${testId}-paginator-range`
-            : pagination?.testId
-              ? `${pagination.testId}-range`
-              : null}
-          testID={typeof testId === 'string'
-            ? `${testId}-paginator-range`
-            : pagination?.testId
-              ? `${pagination.testId}-range`
-              : null}>{paginationRangeText}</span
+          data-pw={pagination.rangeTestId ??
+            (typeof testId === 'string'
+              ? `${testId}-paginator-range`
+              : pagination?.testId
+                ? `${pagination.testId}-range`
+                : null)}
+          testID={pagination.rangeTestId ??
+            (typeof testId === 'string'
+              ? `${testId}-paginator-range`
+              : pagination?.testId
+                ? `${pagination.testId}-range`
+                : null)}>{paginationRangeText}</span
         >
-        <span class="table-paginator-controls">
-          {#if pageSizeOptions.length > 0}
-            <span class="table-paginator-size">
-              <Select
-                items={pageSizeOptions.map((sizeOption) => ({
-                  id: String(sizeOption),
-                  label: String(sizeOption)
-                }))}
-                value={[String(effectivePageSize)]}
+        {#if !hidePageSizeSelector || !hideSteppers}
+          <span class="table-paginator-controls">
+            {#if !hidePageSizeSelector && pageSizeOptions.length > 0}
+              <span class="table-paginator-size">
+                <Select
+                  items={pageSizeOptions.map((sizeOption) => ({
+                    id: String(sizeOption),
+                    label: String(sizeOption)
+                  }))}
+                  value={[String(effectivePageSize)]}
+                  disabled={pagination.isLoading ?? false}
+                  usePortal
+                  testId={pagination.testId && `${pagination.testId}-page-size`}
+                  onchange={(selectedSizes) => {
+                    if (selectedSizes.length > 0) {
+                      handlePageSizeChange(Number(selectedSizes[0]));
+                    }
+                  }}
+                />
+              </span>
+            {/if}
+            {#if !hideSteppers}
+              <Pagination
+                totalPages={paginationTotalPages}
+                currentPage={effectivePage}
+                hasMore={pagination.hasMore ?? false}
                 disabled={pagination.isLoading ?? false}
-                usePortal
-                testId={pagination.testId && `${pagination.testId}-page-size`}
-                onchange={(selectedSizes) => {
-                  if (selectedSizes.length > 0) {
-                    handlePageSizeChange(Number(selectedSizes[0]));
-                  }
-                }}
+                testId={pagination.testId && `${pagination.testId}-pages`}
+                prevButtonTestId={pagination.prevButtonTestId}
+                nextButtonTestId={pagination.nextButtonTestId}
+                onchange={handlePageChange}
+                onLoadMore={pagination.onLoadMore}
               />
-            </span>
-          {/if}
-          <Pagination
-            totalPages={paginationTotalPages}
-            currentPage={effectivePage}
-            hasMore={pagination.hasMore ?? false}
-            disabled={pagination.isLoading ?? false}
-            testId={pagination.testId && `${pagination.testId}-pages`}
-            onchange={handlePageChange}
-            onLoadMore={pagination.onLoadMore}
-          />
-        </span>
+            {/if}
+          </span>
+        {/if}
       </div>
     {/if}
   </div>

package/dist/Table/cellData.js

@@ -68,6 +68,9 @@ export const asTagArrayItems = (value) => {
         if (typeof record.classes === 'string') {
             item.classes = record.classes;
         }
+        if (typeof record.testId === 'string') {
+            item.testId = record.testId;
+        }
         items.push(item);
     }
     return items;

package/dist/Table/properties.d.ts

@@ -201,6 +201,27 @@ export type TablePopupMenuCellData = {
  * the options, selection state, and filtering itself belong to the consumer.
  * Selecting the already-selected option clears the filter (emits `null`).
  */
+/**
+ * Customizes the generated `data-pw` suffixes of built-in cells for one
+ * column. Values replace only the named suffix; row and item indices remain
+ * appended where the default includes them. Cell-data `testId` values still
+ * take precedence for renderers that accept one.
+ */
+export type TableBuiltinCellTestIdSuffixes = {
+    icon?: string;
+    thumbnail?: string;
+    thumbnailPlaceholder?: string;
+    tag?: string;
+    trendUp?: string;
+    trendDown?: string;
+    menu?: string;
+    menuTrigger?: string;
+    popup?: string;
+    popupTrigger?: string;
+    link?: string;
+    copy?: string;
+    linkCopied?: string;
+};
 export type TableColumnFilterConfig = {
     options: Array<{
         label: string;
@@ -246,11 +267,18 @@ export type TableColumn = {
      * cells follow the table-wide `--table-text-align` (left by default).
      */
     align?: 'left' | 'center' | 'right';
+    /** Fixed/preferred column width (any CSS length), applied inline to its header and cells. */
+    width?: string;
     /**
      * Caps the column width (any CSS length). Overflowing scalar cell text
      * ellipsizes with the full value available on the native title tooltip.
      */
     maxWidth?: string;
+    /**
+     * Per-built-in generated `data-pw` suffix overrides for this column. Omitted
+     * entries preserve the existing suffixes exactly; row/item indices remain.
+     */
+    testIdSuffixes?: TableBuiltinCellTestIdSuffixes;
     /**
      * Paints this column's header and body cells with the highlight wash —
      * `--table-col-highlight-background` (body) and
@@ -342,12 +370,54 @@ export type TablePaginationConfig = {
     hasMore?: boolean;
     /** Disables the paginator and page-size selector during a fetch. */
     isLoading?: boolean;
+    /**
+     * Keeps the paginator footer (range text, page-size selector, steppers)
+     * visible even when the data fits on a single page. Default `false`
+     * matches DataGrid parity — a single page renders no footer at all.
+     */
+    showFooterOnSinglePage?: boolean;
+    /**
+     * Renders only the range summary text ("{from}-{to} of {total}") and
+     * suppresses the page-size selector and page steppers — for a bare
+     * "Showing X-Y of Z" affordance with no navigation controls. Implies
+     * `showFooterOnSinglePage`: a count-only footer has nothing to hide behind
+     * "already on the only page". Shorthand for `hidePageSizeSelector: true`
+     * plus `hideSteppers: true`; reach for those two directly when you only
+     * want to suppress one of the pair. Default `false`.
+     */
+    hideControls?: boolean;
+    /**
+     * Suppresses just the page-size Select, independently of the steppers —
+     * e.g. a fixed page size with no reason to expose the selector, while
+     * still keeping working page navigation. Default `false`.
+     */
+    hidePageSizeSelector?: boolean;
+    /**
+     * Suppresses just the Pagination steppers, independently of the page-size
+     * Select — for a call site with its own working paginator elsewhere that
+     * only wants Table's range text (and, optionally, its page-size selector).
+     * Default `false`.
+     */
+    hideSteppers?: boolean;
     /** Range text override; default "{from}-{to} of {total}". */
     rangeLabel?: (from: number, to: number, total: number) => string;
+    /**
+     * Explicit `data-pw`/`testID` for the range summary span. Wins over the
+     * derived id — the default derives from the table's own `testId`
+     * (`${testId}-paginator-range`), falling back to `${pagination.testId}-range`
+     * only when the table has none, so a call site whose table `testId` is
+     * already load-bearing (built-in cell ids derive from it) has no way to
+     * give the range span an independent locator without this.
+     */
+    rangeTestId?: string;
     onPageChange?: (page: number) => void;
     onPageSizeChange?: (pageSize: number) => void;
     onLoadMore?: () => void;
     testId?: string;
+    /** Forwarded to Pagination's previous-page button without modification. */
+    prevButtonTestId?: string;
+    /** Forwarded to Pagination's next-page (or load-more) button without modification. */
+    nextButtonTestId?: string;
 };
 /**
  * Configuration for the built-in search bar (C2-3).

package/dist/TypewriterText/TypewriterText.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
   import { onMount, onDestroy, untrack } from 'svelte';
-  import type { TypewriterTextProperties } from './properties';
+  import type { TypewriterTextProperties, TypewriterCharacterDelayRange } from './properties';
 
   let {
     text,
     speed = 15,
     isStreaming = false,
     renderText,
+    variableDelay,
+    resolveDelay,
+    onProgress,
+    renderCharacter,
     testId,
     classes
   }: TypewriterTextProperties = $props();
@@ -18,11 +22,63 @@
   // Where typing left off, so newly streamed-in text continues rather than restarts.
   let previousTextLength = $state(0);
 
+  // Whitespace characters revealed so far — the state `resolveDelay` reads via
+  // `TypewriterDelayContext.wordCount`. Reset alongside the other typing state
+  // whenever `text` is replaced rather than continued (see the mount $effect below).
+  let revealedWordCount = $state(0);
+
+  const WHITESPACE_CHARACTERS = new Set([' ', '\n']);
+  const PUNCTUATION_CHARACTERS = new Set([',', '.', '?', '!']);
+  const DIGIT_PATTERN = /\d/;
+
+  const randomDelayInRange = (range: TypewriterCharacterDelayRange): number => {
+    return range.min + Math.random() * (range.max - range.min);
+  };
+
+  // Falls straight through to the flat `speed` — byte-identical to the pre-`variableDelay`
+  // behaviour — for any consumer that never sets `variableDelay`/`resolveDelay`, or leaves
+  // a class out of `variableDelay`. `resolveDelay`, when set, takes over entirely: it is
+  // the more general mechanism (see its doc comment in properties.ts) and is expected to
+  // own the full pacing decision rather than compose with `variableDelay`/`speed`.
+  const resolveTypingDelay = (character: string, characterIndex: number): number => {
+    if (typeof resolveDelay === 'function') {
+      return resolveDelay({ character, index: characterIndex, wordCount: revealedWordCount });
+    }
+    if (!variableDelay) {
+      return speed;
+    }
+    if (DIGIT_PATTERN.test(character) && variableDelay.digit) {
+      return randomDelayInRange(variableDelay.digit);
+    }
+    if (WHITESPACE_CHARACTERS.has(character) && variableDelay.whitespace) {
+      return randomDelayInRange(variableDelay.whitespace);
+    }
+    if (PUNCTUATION_CHARACTERS.has(character) && variableDelay.punctuation) {
+      return randomDelayInRange(variableDelay.punctuation);
+    }
+    if (variableDelay.default) {
+      return randomDelayInRange(variableDelay.default);
+    }
+    return speed;
+  };
+
   const typeNextCharacter = (): void => {
     if (currentIndex < text.length) {
+      const revealedCharacter = text[currentIndex];
+      const revealedCharacterIndex = currentIndex;
+      // Word count is updated for THIS character before it is used to resolve THIS
+      // character's own delay — the ordering `TypewriterDelayContext.wordCount` documents
+      // and that a cyclical/positional `resolveDelay` depends on.
+      if (WHITESPACE_CHARACTERS.has(revealedCharacter)) {
+        revealedWordCount++;
+      }
       displayedText = text.substring(0, currentIndex + 1);
       currentIndex++;
-      timeoutId = setTimeout(typeNextCharacter, speed);
+      onProgress?.({ index: currentIndex, total: text.length, displayedText });
+      timeoutId = setTimeout(
+        typeNextCharacter,
+        resolveTypingDelay(revealedCharacter, revealedCharacterIndex)
+      );
     }
   };
 
@@ -47,6 +103,7 @@
         displayedText = '';
         currentIndex = 0;
         previousTextLength = 0;
+        revealedWordCount = 0;
       }
       if (nextText.length > 0 && nextText.length > previousTextLength) {
         if (currentIndex >= previousTextLength) {
@@ -66,8 +123,12 @@
       if (timeoutId !== null) {
         clearTimeout(timeoutId);
       }
+      const hadRemainingText = currentIndex < text.length;
       displayedText = text;
       currentIndex = text.length;
+      if (hadRemainingText) {
+        onProgress?.({ index: currentIndex, total: text.length, displayedText });
+      }
     }
   });
 
@@ -94,6 +155,10 @@
   {#if typeof renderText === 'function'}
     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     {@html renderText(displayedText)}
+  {:else if renderCharacter}
+    {#each displayedText.split('') as character, index (index)}
+      {@render renderCharacter({ character, index })}
+    {/each}
   {:else}
     {displayedText}
   {/if}

package/dist/TypewriterText/properties.d.ts

@@ -1,9 +1,72 @@
+import type { Snippet } from 'svelte';
 export type TypewriterTextProperties = OptionalTypewriterTextProperties & MandatoryTypewriterTextProperties;
 export type MandatoryTypewriterTextProperties = {
     text: string;
 };
+/** A random delay in `[min, max]` milliseconds is picked per character in that class. Pass equal `min`/`max` for a fixed delay. */
+export type TypewriterCharacterDelayRange = {
+    min: number;
+    max: number;
+};
+/**
+ * Per-character-class pacing, in place of the flat `speed`. Reach for this when a
+ * conversation needs to slow down for numbers (prices, OTPs, phone numbers) or add a
+ * beat at punctuation, the way a person reading it aloud would. Any class you omit —
+ * including `default` — falls back to `speed` for that character.
+ */
+export type TypewriterVariableDelay = {
+    /** Digits (`0`–`9`). */
+    digit?: TypewriterCharacterDelayRange;
+    /** A space or newline — the natural word-boundary pause. */
+    whitespace?: TypewriterCharacterDelayRange;
+    /** Sentence punctuation: `,` `.` `?` `!`. */
+    punctuation?: TypewriterCharacterDelayRange;
+    /** Every other character (letters and anything not covered above). */
+    default?: TypewriterCharacterDelayRange;
+};
+export type TypewriterProgress = {
+    /** Characters revealed so far. */
+    index: number;
+    /** Length of `text` at the time of this update — compare against `index` for a percentage. */
+    total: number;
+    /** The text revealed so far — the same value driving what's on screen. */
+    displayedText: string;
+};
+export type TypewriterCharacterContext = {
+    /** The character being rendered. */
+    character: string;
+    /** Its position within the full `text` string. */
+    index: number;
+};
+/**
+ * Everything `resolveDelay` gets to decide the next character's pacing from — a
+ * superset of `TypewriterCharacterContext` because pacing can depend on more than the
+ * character alone (see `wordCount`).
+ */
+export type TypewriterDelayContext = TypewriterCharacterContext & {
+    /**
+     * Whitespace characters (space or newline) revealed so far — INCLUDING this one, if
+     * `character` itself is whitespace. The component always updates this count before
+     * calling `resolveDelay`, so a cadence that keys off word position (a cyclical
+     * acceleration window, slowing down only for the first word of a sentence, etc.) can
+     * rely on that ordering instead of inferring it through a side channel like
+     * `onProgress`. Counts only whitespace, matching the `whitespace` class in
+     * `TypewriterVariableDelay` — it is not a word index in any richer sense.
+     */
+    wordCount: number;
+};
+/**
+ * Computes the delay before the NEXT character types, given the one that was just
+ * revealed and enough state (`index`, `wordCount`) to vary that delay with position —
+ * not just character class. Reach for this instead of `variableDelay` when the cadence
+ * needs to depend on where typing currently is, not only on what the character is: e.g.
+ * an accelerating window every N words, or a pause that only applies to the first
+ * occurrence of a character class. `variableDelay` stays the right tool for a pure
+ * per-class rule with no positional state.
+ */
+export type TypewriterDelayResolver = (context: TypewriterDelayContext) => number;
 export type OptionalTypewriterTextProperties = {
-    /** Milliseconds between characters. */
+    /** Milliseconds between characters. Ignored per character class covered by `variableDelay`. */
     speed?: number;
     /**
      * While `true`, text revealed so far stays and new text keeps typing as `text` grows.
@@ -16,6 +79,39 @@ export type OptionalTypewriterTextProperties = {
      * text can contain untrusted input. When omitted, the text renders as plain text.
      */
     renderText?: (text: string) => string;
+    /**
+     * Opt into per-character-class pacing (digits, whitespace, punctuation, everything
+     * else) instead of the flat `speed`. Omit to keep the flat `speed` for every character.
+     */
+    variableDelay?: TypewriterVariableDelay;
+    /**
+     * Opt into a fully custom pacing function, called once per character in place of
+     * `variableDelay`/`speed`. Needed when the cadence isn't a pure function of the
+     * character's own class — e.g. an accelerating window that recurs every N words and,
+     * while active, collapses whitespace/punctuation/default pacing to a single flat
+     * range regardless of class, with only digits kept slow throughout. `variableDelay`
+     * cannot express that fourth, position-driven case because it re-evaluates from
+     * scratch per character with no notion of where typing currently is; `resolveDelay`
+     * closes that gap by handing the resolver `index` and `wordCount` alongside the
+     * character (see `TypewriterDelayContext` for the ordering guarantee on `wordCount`),
+     * so state like a running cycle position can live in the resolver's own closure
+     * instead of a side channel like swapping `variableDelay` from inside `onProgress`.
+     * Takes priority over `variableDelay` when both are set. Omit to keep
+     * `variableDelay`/`speed` resolution exactly as today.
+     */
+    resolveDelay?: TypewriterDelayResolver;
+    /**
+     * Called every time a character is revealed (and once more if `isStreaming` turns
+     * `false` while text remains, since the rest appears at once) — scroll a container to
+     * follow the reveal, or show how far along it is. Not called when omitted.
+     */
+    onProgress?: (progress: TypewriterProgress) => void;
+    /**
+     * Render each revealed character yourself — highlight a token, wrap a number — instead
+     * of the plain text node. Ignored when `renderText` is set, since that renderer already
+     * owns the full markup. Falls back to plain text per character when omitted.
+     */
+    renderCharacter?: Snippet<[TypewriterCharacterContext]>;
     testId?: string;
     classes?: string;
 };

package/dist/index.d.ts

@@ -120,6 +120,7 @@ export type * from './Table/properties';
 export type { NormalizedColumns } from './Table/normalizeColumns';
 export type { SortTableRowsOptions, TableSortType } from './Table/sortEngine';
 export type * from './Stepper/properties';
+export type { Step as StepperStep } from './Stepper/properties';
 export type * from './Toast/properties';
 export type * from './IconStack/properties';
 export type * from './Img/properties';
@@ -197,5 +198,5 @@ export type * from './MediaPlayer/properties';
 export type * from './MediaUpload/properties';
 export type * from './Gallery/properties';
 export { createSoundKit } from './soundKit/soundKit';
-export { validateInput } from './utils';
+export { validateInput, lockBodyScroll, unlockBodyScroll } from './utils';
 export { formatNumberIndian } from './_chart/format';

package/dist/index.js

@@ -101,5 +101,5 @@ export { ChatController } from './Chat/controller.svelte';
 export { partyOf } from './Chat/roles';
 export { SpeechToTextController } from './SpeechToText/controller.svelte';
 export { createSoundKit } from './soundKit/soundKit';
-export { validateInput } from './utils';
+export { validateInput, lockBodyScroll, unlockBodyScroll } from './utils';
 export { formatNumberIndian } from './_chart/format';