@juspay/svelte-ui-components 4.33.3 → 4.34.0

package/dist/Toolbar/Toolbar.svelte

@@ -4,6 +4,11 @@
   let {
     showBackButton = true,
     text,
+    title,
+    headingLevel,
+    subtitle,
+    rootTag,
+    variant = 'chrome',
     backIcon,
     backLabel = 'Back',
     backHref,
@@ -18,6 +23,19 @@
     headingTestId
   }: ToolbarProperties = $props();
 
+  // Same validation `Sheet`'s `headingLevel` already applies: through a web
+  // component, an untyped attribute reaches this as anything, and a getter
+  // can throw, so an unusable level degrades to the plain-tag fallback rather
+  // than emitting an invalid `<h7>`/`<h0>`/`<hNaN>`.
+  const headingTag = $derived(
+    typeof headingLevel === 'number' &&
+      Number.isInteger(headingLevel) &&
+      headingLevel >= 1 &&
+      headingLevel <= 6
+      ? `h${headingLevel}`
+      : null
+  );
+
   // `backIcon={null}` (or '') has always meant "render no back control at all", and consumers
   // rely on it; only the DEFAULT changes, from a CDN image to the inline icon.
   const showBackControl = $derived(showBackButton && backIcon !== null && backIcon !== '');
@@ -42,7 +60,13 @@
   };
 </script>
 
-<div class="toolbar {classes ?? ''}" data-pw={testId} testID={testId}>
+<svelte:element
+  this={rootTag ?? 'div'}
+  class="toolbar {classes ?? ''}"
+  data-variant={variant === 'page-header' ? 'page-header' : null}
+  data-pw={testId}
+  testID={testId}
+>
   <div
     class="content"
     data-pw={typeof testId === 'string' ? `${testId}-content` : null}
@@ -82,6 +106,17 @@
       <div class="center-content">
         {@render centerContent()}
       </div>
+    {:else if typeof title === 'string' && title.length > 0}
+      <div class="titles" data-pw={headingTestId} testID={headingTestId}>
+        {#if headingTag !== null}
+          <svelte:element this={headingTag}>{title}</svelte:element>
+        {:else}
+          <span>{title}</span>
+        {/if}
+        {#if typeof subtitle === 'string' && subtitle.length > 0}
+          <p class="subtitle">{subtitle}</p>
+        {/if}
+      </div>
     {:else if typeof text === 'string' && text.length > 0}
       <div class="text" data-pw={headingTestId} testID={headingTestId}>
         {text}
@@ -98,7 +133,7 @@
       {@render additionalContent()}
     {/if}
   </div>
-</div>
+</svelte:element>
 
 <style>
   .toolbar {
@@ -117,6 +152,25 @@
     border-radius: var(--toolbar-border-radius, 0px);
   }
 
+  /* In the page's flow rather than pinned over it: only the fallbacks change,
+     so a consumer's own --toolbar-* values still win. */
+  /* Literal values, not the chrome's variables with other fallbacks: an app
+     that themes its bars at :root (--toolbar-background: white,
+     --toolbar-position: fixed) would otherwise paint and pin every page
+     header too. These six properties ARE the variant; everything else still
+     reads the shared variables. */
+  .toolbar[data-variant='page-header'] {
+    position: static;
+    width: 100%;
+    background: transparent;
+    box-shadow: none;
+    z-index: auto;
+  }
+
+  .toolbar[data-variant='page-header'] > .content {
+    flex-wrap: wrap;
+  }
+
   .content {
     display: flex;
     flex-direction: row;
@@ -160,7 +214,7 @@
     /* A native button so Enter/Space and the accessible name come for free; the reset keeps
        the box identical to the div it replaces. */
     appearance: none;
-    background: none;
+    background: var(--toolbar-back-button-background, none);
     border: 0;
     margin: 0;
     box-sizing: content-box;
@@ -214,4 +268,28 @@
     color: var(--toolbar-text-color, inherit);
     flex: var(--toolbar-text-flex, 1);
   }
+
+  /* `title`/`subtitle`'s heading tag is deliberately unstyled here: a consumer's
+     own global heading rules (size, weight, tracking) already reach it the
+     same way they reach any other heading on the page, and a component-level
+     font-size/font-weight here — even with an `inherit` fallback — would
+     outrank a bare `h1`/`h2` element selector by specificity and silently
+     break that inheritance for every consumer that has one. Only layout and
+     the subtitle's own (independent) presentation get hooks. Both rules are written down the
+     structure they live in (.content > .titles > .subtitle), so a `titles` or `subtitle`
+     class a consumer passes through `classes`, which lands on the root, cannot match them,
+     and the variant is a data attribute rather than a class for the same reason: a class
+     directive would strip a consumer's own `page-header` class (the one the docs recipe
+     uses) from `classes`. */
+  .content > .titles {
+    display: grid;
+    gap: var(--toolbar-titles-gap, 2px);
+    min-width: var(--toolbar-titles-min-width, 0);
+    flex: var(--toolbar-titles-flex, 1);
+  }
+
+  .titles > .subtitle {
+    color: var(--toolbar-subtitle-color, inherit);
+    text-wrap: var(--toolbar-subtitle-text-wrap, pretty);
+  }
 </style>

package/dist/Toolbar/properties.d.ts

@@ -2,6 +2,42 @@ import type { Snippet } from 'svelte';
 export type ToolbarProperties = ToolbarEventProperties & {
     showBackButton?: boolean;
     text?: string | null;
+    /**
+     * A real heading, separate from `text` — which has always rendered a plain,
+     * non-heading div and keeps doing so for existing consumers. Renders as a
+     * heading only once `headingLevel` also resolves to a real level 1-6;
+     * otherwise renders in a plain, non-heading tag instead, same as `text`.
+     */
+    title?: string;
+    /**
+     * The tag `title` renders as (`<svelte:element this={`h${headingLevel}`}>`).
+     * Only 1-6 resolve to a real heading; anything else (including omitting it)
+     * renders `title` in a plain, non-heading tag instead — the same reasoning
+     * `Sheet`'s `headingLevel` already uses, so a stray "7"/"0"/`NaN` reaching
+     * through a web component's untyped attribute degrades the same way there
+     * too, rather than emitting an invalid `<h7>`/`<h0>`/`<hNaN>`.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Rendered as `<p class="subtitle">` under `title`. Ignored without `title`. */
+    subtitle?: string;
+    /**
+     * The root element's tag, via `<svelte:element>`. Defaults to `div`, i.e.
+     * unconditionally unchanged from every version before this. Set it to give
+     * the toolbar its own landmark (`header`, `nav`, `aside`, `footer`) instead
+     * of a consumer wrapping it in one purely to supply that semantics.
+     */
+    rootTag?: 'div' | 'header' | 'nav' | 'aside' | 'footer';
+    /**
+     * `'chrome'` (the default) is the fixed, full-viewport-width app bar every
+     * version before this rendered. `'page-header'` is the same bar in the page's
+     * flow: position static, width 100%, transparent background, no shadow,
+     * z-index auto, and a content row that wraps (actions drop under the title
+     * when they don't fit). Those six are set directly, not through the chrome's
+     * `--toolbar-position`/`-width`/`-background`/`-box-shadow`/`-z-index`/
+     * `--toolbar-content-flex-wrap`, so a bar themed at :root never leaks into a
+     * page header. Every other `--toolbar-*` variable applies to both.
+     */
+    variant?: ToolbarVariant;
     backIcon?: string | null;
     backLabel?: string;
     /**
@@ -27,3 +63,4 @@ export type ToolbarEventProperties = {
     onbackclick?: () => void;
     onkeydown?: (event: KeyboardEvent) => void;
 };
+export type ToolbarVariant = 'chrome' | 'page-header';

package/dist/WindowedList/WindowedList.svelte

@@ -0,0 +1,129 @@
+<script lang="ts" generics="T">
+  import { tick } from 'svelte';
+  import Button from '../Button/Button.svelte';
+  import type { WindowedListProperties } from './properties';
+
+  let {
+    items,
+    getKey,
+    row,
+    initialCount = 200,
+    step = 200,
+    earlier,
+    earlierLabel = (next: number, hidden: number) => `Show ${next} earlier (${hidden} hidden)`,
+    classes,
+    testId
+  }: WindowedListProperties<T> = $props();
+
+  /* The window is anchored by KEY, not index. An index would slide with every
+     append (the newest N), pushing rows out from under a reader who scrolled up;
+     WebKit has no scroll anchoring to hide that jump. A key stays put while the
+     list grows at the end. If the anchor's key disappears (the list was replaced
+     or truncated), the window re-anchors to the newest `initialCount` -- whichever
+     anchor it was, so a reveal that has since been truncated away cannot fall back
+     to an older, stale one, and the new anchor then holds through later appends.
+
+     `anchorKey` and `appliedReveal` are plain latches, not $state: they are
+     written only inside the derived below, while it recomputes because `items` or
+     `reveal` changed, and nothing else reads them. `reveal` is state: only the
+     "show earlier" handler writes it, as a fresh object per click so a repeated
+     key still reads as a new request. */
+  let anchorKey: string | null = null;
+  let appliedReveal: { key: string | null } | null = null;
+  let reveal = $state.raw<{ key: string | null } | null>(null);
+
+  function indexOfKey(key: string | null): number {
+    return key === null ? -1 : items.findIndex((item) => getKey(item) === key);
+  }
+
+  function keyAt(index: number): string | null {
+    return items.slice(index, index + 1).map(getKey)[0] ?? null;
+  }
+
+  const start = $derived.by(() => {
+    if (reveal !== appliedReveal) {
+      appliedReveal = reveal;
+      anchorKey = reveal?.key ?? null;
+    }
+    const anchored = indexOfKey(anchorKey);
+    if (anchored >= 0) {
+      return anchored;
+    }
+    const fresh = Math.max(0, items.length - initialCount);
+    anchorKey = keyAt(fresh);
+    return fresh;
+  });
+  const shown = $derived(items.slice(start));
+  const next = $derived(Math.min(step, start));
+
+  let controlEl: HTMLElement | null = $state(null);
+
+  function scrollParent(node: HTMLElement): HTMLElement | null {
+    for (let el = node.parentElement; el !== null; el = el.parentElement) {
+      if (/(auto|scroll|overlay)/.test(getComputedStyle(el).overflowY)) {
+        return el;
+      }
+    }
+    return document.scrollingElement instanceof HTMLElement ? document.scrollingElement : null;
+  }
+
+  /* Reveals `next` more above the window. The first row that was already
+     rendered is measured before and after, and the scroller moves by the
+     difference, so what the reader was looking at stays where it was. Browser
+     scroll anchoring may already have done this (the difference is then ~0);
+     WebKit has none, and there it is the whole fix. */
+  async function showEarlier(): Promise<void> {
+    if (start === 0) {
+      return;
+    }
+    const firstRow = controlEl?.nextElementSibling ?? null;
+    const before = firstRow instanceof HTMLElement ? firstRow.getBoundingClientRect().top : null;
+    reveal = { key: keyAt(Math.max(0, start - step)) };
+    await tick();
+    if (firstRow instanceof HTMLElement && before !== null && firstRow.isConnected) {
+      const scroller = scrollParent(firstRow);
+      const delta = firstRow.getBoundingClientRect().top - before;
+      if (scroller !== null && delta !== 0) {
+        scroller.scrollTop += delta;
+      }
+    }
+  }
+</script>
+
+<div
+  class="windowed-list {classes ?? ''}"
+  data-pw={typeof testId === 'string' ? testId : null}
+  testID={typeof testId === 'string' ? testId : null}
+>
+  {#if start > 0}
+    <div class="windowed-list-earlier" bind:this={controlEl}>
+      {#if typeof earlier === 'function'}
+        {@render earlier({ hidden: start, next, showEarlier })}
+      {:else}
+        <Button text={earlierLabel(next, start)} onclick={() => void showEarlier()} />
+      {/if}
+    </div>
+  {/if}
+  {#each shown as item, i (getKey(item))}
+    {@render row({ item, index: start + i, isFirst: i === 0 })}
+  {/each}
+</div>
+
+<style>
+  /* `contents` by default: the rows stay children of the consumer's own layout
+     (a flex column's gap, a grid's tracks), exactly as if they were rendered
+     without this wrapper. Set `--windowed-list-display` to give the list a box
+     of its own. */
+  .windowed-list {
+    display: var(--windowed-list-display, contents);
+  }
+
+  .windowed-list-earlier {
+    display: flex;
+    justify-content: var(--windowed-list-earlier-justify, center);
+    padding: var(--windowed-list-earlier-padding, 8px 0);
+    /* The control must never be what the browser anchors on: it is about to
+       have rows inserted directly under it. */
+    overflow-anchor: none;
+  }
+</style>

package/dist/WindowedList/WindowedList.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { WindowedListProperties } from './properties';
+declare function $$render<T>(): {
+    props: WindowedListProperties<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const WindowedList: $$IsomorphicComponent;
+type WindowedList<T> = InstanceType<typeof WindowedList<T>>;
+export default WindowedList;

package/dist/WindowedList/properties.d.ts

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+/** What the `row` snippet receives for each rendered item. */
+export type WindowedListRow<T> = {
+    item: T;
+    /** Position in the FULL `items` list, not in the rendered window. */
+    index: number;
+    /** True for the first rendered item — the one directly under the "show earlier" control. */
+    isFirst: boolean;
+};
+/** What the `earlier` snippet receives when it replaces the default control. */
+export type WindowedListEarlier = {
+    /** Items above the window that are not rendered. */
+    hidden: number;
+    /** How many the next reveal adds: `step`, or fewer when fewer are left. */
+    next: number;
+    /** Renders `next` more above the window, keeping the reader's place. */
+    showEarlier: () => void;
+};
+export type WindowedListProperties<T> = {
+    items: T[];
+    /** A stable, unique key per item: it drives the keyed render and anchors the window. */
+    getKey: (item: T) => string;
+    row: Snippet<[WindowedListRow<T>]>;
+    /**
+     * How many of the newest items render at first. Items appended later join the
+     * window at the bottom without pushing earlier ones out, so the window does not
+     * slide under a reader.
+     */
+    initialCount?: number;
+    /** How many more each "show earlier" reveals. */
+    step?: number;
+    /** Replaces the default "show earlier" button. */
+    earlier?: Snippet<[WindowedListEarlier]>;
+    /** Text of the default button. */
+    earlierLabel?: (next: number, hidden: number) => string;
+    classes?: string;
+    testId?: string;
+};

package/dist/WindowedList/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { default as ArmedButton } from './ArmedButton/ArmedButton.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
 export { default as BrandLoader } from './BrandLoader/BrandLoader.svelte';
 export { default as Button } from './Button/Button.svelte';
@@ -17,6 +18,8 @@ export { default as Badge } from './Badge/Badge.svelte';
 export { default as Banner } from './Banner/Banner.svelte';
 export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Accordion } from './Accordion/Accordion.svelte';
+export { default as DiffViewer } from './DiffViewer/DiffViewer.svelte';
+export { default as WindowedList } from './WindowedList/WindowedList.svelte';
 export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { normalizeColumns } from './Table/normalizeColumns';
@@ -119,6 +122,7 @@ export type * from './ListItem/properties';
 export type * from './KeyValue/properties';
 export type * from './types';
 export type * from './Icon/properties';
+export type * from './ArmedButton/properties';
 export type * from './BrandLoader/properties';
 export type * from './Status/properties';
 export type * from './Select/properties';
@@ -127,6 +131,8 @@ export type * from './Carousel/properties';
 export type * from './Badge/properties';
 export type * from './Banner/properties';
 export type * from './Accordion/properties';
+export type * from './DiffViewer/properties';
+export type * from './WindowedList/properties';
 export type * from './Table/properties';
 export type { NormalizedColumns } from './Table/normalizeColumns';
 export type { SortTableRowsOptions, TableSortType } from './Table/sortEngine';

package/dist/index.js

@@ -1,3 +1,4 @@
+export { default as ArmedButton } from './ArmedButton/ArmedButton.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
 export { default as BrandLoader } from './BrandLoader/BrandLoader.svelte';
 export { default as Button } from './Button/Button.svelte';
@@ -17,6 +18,8 @@ export { default as Badge } from './Badge/Badge.svelte';
 export { default as Banner } from './Banner/Banner.svelte';
 export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Accordion } from './Accordion/Accordion.svelte';
+export { default as DiffViewer } from './DiffViewer/DiffViewer.svelte';
+export { default as WindowedList } from './WindowedList/WindowedList.svelte';
 export { default as CheckListItem } from './CheckListItem/CheckListItem.svelte';
 export { default as Table } from './Table/Table.svelte';
 export { normalizeColumns } from './Table/normalizeColumns';

package/dist/styles/theme-dark.css

@@ -131,6 +131,17 @@
   /* ChatComposer */
   --chat-composer-background: #1e1e2e;
   --chat-composer-border: 1px solid #2a2a3c;
+  --chat-composer-slash-menu-background: #1e1e2e;
+  --chat-composer-slash-menu-border: 1px solid #2a2a3c;
+  --chat-composer-slash-menu-box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
+  --chat-composer-slash-foot-border: 1px solid #2a2a3c;
+  --chat-composer-slash-foot-color: #9ca3af;
+  --chat-composer-slash-name-color: #93c5fd;
+  --chat-composer-slash-hint-color: #9ca3af;
+  --chat-composer-slash-desc-color: #d1d5db;
+  --chat-composer-slash-badge-background: #1e3a5f;
+  --chat-composer-slash-badge-color: #93c5fd;
+  --chat-composer-slash-item-selected-background: #2a2a3c;
   --chat-composer-color: #e5e7eb;
   --chat-composer-placeholder-color: #9ca3af;
   --chat-composer-action-color: #9ca3af;
@@ -573,6 +584,20 @@
   --delta-indicator-neutral-color: #9ca3af;
   --delta-indicator-positive-color: #4ade80;
 
+  /* DiffViewer */
+  --diff-background: #1a1a26;
+  --diff-border: 1px solid #2a2a3c;
+  --diff-header-background: #1e1e2e;
+  --diff-color: #d1d5db;
+  --diff-filename-color: #f3f4f6;
+  --diff-gutter-color: #9ca3af;
+  --diff-add-background: #123222;
+  --diff-add-color: #86efac;
+  --diff-remove-background: #3a1f22;
+  --diff-remove-color: #fca5a5;
+  --diff-created-background: #14532d;
+  --diff-created-color: #bbf7d0;
+
   /* FileInput */
   --file-input-error-color: #f87171;
   --file-input-info-color: #9ca3af;
@@ -800,3 +825,20 @@
   --doc-text: #d1d5db;
   --doc-text-secondary: #9ca3af;
 }
+
+/* ----------------------------------------------------------------------------
+   Fifth pass — ArmedButton.
+   ---------------------------------------------------------------------------- */
+[data-theme='dark'] {
+  /* ArmedButton */
+  --armed-btn-bg: #2a2a3c;
+  --armed-btn-color: #9ca3af;
+  --armed-btn-hover-color: #e5e7eb;
+  --armed-btn-border: 1px solid #3f3f52;
+  /* The armed (confirm) state is a fixed danger red regardless of theme --
+     restated explicitly rather than left to fall through, so it reads as a
+     deliberate choice and not an omission the next sweep has to re-discover. */
+  --armed-btn-armed-bg: #dc2626;
+  --armed-btn-armed-color: #ffffff;
+  --armed-btn-armed-border: #dc2626;
+}