@juspay/svelte-ui-components 4.33.2 → 4.34.0

package/dist/Accordion/Accordion.svelte

@@ -10,7 +10,8 @@
     classes,
     testId,
     disabled = false,
-    panelId
+    panelId,
+    lazy = false
   }: AccordionProperties = $props();
 
   /* The trigger and the panel are siblings, not ancestor/descendant, so nothing in the
@@ -25,6 +26,19 @@
      control's id stays stable for assistive technology and anything else referencing it. */
   const triggerId = `accordion-trigger-${uid}`;
 
+  /* `lazy` mounts the panel's children the first time it opens and then keeps
+     them, so closing still animates real content and whatever state it holds
+     survives a close. The latch is a plain variable, not $state: it only ever
+     goes false -> true, and only while this derived recomputes because `expand`
+     or `lazy` changed, so it adds no dependency of its own. */
+  let hasOpened = false;
+  const mounted = $derived.by(() => {
+    if (!lazy || expand) {
+      hasOpened = true;
+    }
+    return hasOpened;
+  });
+
   function handleTriggerClick(): void {
     if (disabled) {
       return;
@@ -62,11 +76,21 @@
   aria-labelledby={trigger ? triggerId : null}
   class="accordion {classes ?? ''}"
   class:expanded={expand}
+  inert={lazy && !expand}
   data-pw={typeof testId === 'string' ? testId : null}
   testID={typeof testId === 'string' ? testId : null}
 >
+  <!-- `inert` while collapsed, lazy only: a lazy panel's content stays mounted
+       (not torn down) between opens, so without this its links/buttons would
+       stay in the tab order and the accessibility tree while clipped to 0px
+       and invisible. A non-lazy panel never reaches this state: `mounted` is
+       already unconditionally true for it, matching pre-`lazy` behaviour, so
+       marking it inert too would be a new, non-opt-in default-path change.
+       The children are chosen by a conditional snippet, not an {#if}: an {#if} would be a
+       new block around them, so a local transition inside would stop following the outer
+       block that adds or removes the Accordion. This stays the bare render tag it was. -->
   <div class="accordion-content">
-    {@render children?.()}
+    {@render (mounted ? children : null)?.()}
   </div>
 </div>
 

package/dist/Accordion/properties.d.ts

@@ -24,6 +24,13 @@ export type OptionalAccordionProperties = {
      * something else needs to reference the panel by a known id.
      */
     panelId?: string;
+    /**
+     * Mounts `children` only once the panel is first expanded, then keeps them
+     * mounted. For long lists of mostly-closed panels, where rendering every
+     * closed body up front is the cost. Off by default: closed content is
+     * rendered (though `inert`) exactly as before.
+     */
+    lazy?: boolean;
 };
 export type AccordionEventProperties = {
     ontoggle?: (expanded: boolean) => void;

package/dist/ArmedButton/ArmedButton.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import Button from '../Button/Button.svelte';
+  import { onDestroy, type Snippet } from 'svelte';
+  import type { ArmedButtonProperties } from './properties';
+
+  // Arm-then-confirm for a destructive action: first click arms, second
+  // within the window commits, and the arm lapses on its own. No component
+  // here models a two-stage confirmation any other way -- a consumer that
+  // needs one reaches for this instead of hand-rolling a boolean and a timer,
+  // which is exactly how a shared boolean across several rows previously left
+  // one control armed forever after a single mis-click.
+  //
+  // STYLING IS BY CUSTOM PROPERTY, NOT BY CLASS. `classes` lands on this
+  // component's own root, same as every other component here; the button
+  // underneath is a separate scope a consumer's own selector cannot reach
+  // directly, so every one of its properties is bridged through an
+  // --armed-btn-* hook instead.
+  //
+  // The contract that must survive any future change here: disarm happens
+  // BEFORE `onconfirm` is awaited, not after. A version that awaits first is
+  // a different component with different behaviour under a slow confirm --
+  // it would stay visually "armed" for the duration of the call, which reads
+  // as still-awaiting-a-second-click rather than as committed.
+
+  let {
+    onconfirm,
+    label,
+    confirmLabel = 'sure?',
+    armedMs = 3000,
+    disabled = false,
+    title,
+    icon,
+    classes
+  }: ArmedButtonProperties = $props();
+
+  let armed = $state(false);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  function disarm(): void {
+    armed = false;
+    if (timer !== null) {
+      clearTimeout(timer);
+    }
+    timer = null;
+  }
+
+  // Teardown matters here: an armed row that unmounts -- the list refreshes,
+  // the session ends -- must not leave a timer holding a reference to it.
+  onDestroy(() => {
+    if (timer !== null) {
+      clearTimeout(timer);
+    }
+  });
+
+  async function click(): Promise<void> {
+    if (timer !== null) {
+      clearTimeout(timer);
+    }
+    if (!armed) {
+      armed = true;
+      timer = setTimeout(disarm, armedMs);
+      return;
+    }
+    disarm();
+    await onconfirm();
+  }
+
+  // Button's `text`/`icon` are plain optionals, not nullable -- omitting the
+  // key entirely (via spread) is how a Svelte prop stays genuinely unset,
+  // rather than assigning it a value that means "unset".
+  const labelProps = $derived.by((): { text?: string; icon?: Snippet } => {
+    if (armed) {
+      return { text: confirmLabel };
+    }
+    if (typeof icon === 'function') {
+      return { icon };
+    }
+    return { text: label };
+  });
+</script>
+
+<span
+  class="armed-button {classes ?? ''}"
+  data-armed={armed}
+  role="presentation"
+  onfocusout={disarm}
+>
+  <Button
+    {...labelProps}
+    {disabled}
+    title={title ?? (armed ? `click again to ${label.toLowerCase()}` : label)}
+    ariaLabel={armed ? `confirm: ${label}` : label}
+    onclick={click}
+  />
+</span>
+
+<style>
+  /* Every default below is a plain, generic small-button look, independent
+     of any consumer's own tokens -- exactly the two-layer fallback this
+     library uses throughout: override via --armed-btn-* if a consumer sets
+     it, sane default otherwise. */
+  .armed-button {
+    --button-color: var(--armed-btn-bg, #f0f0f0);
+    --button-hover-color: var(--armed-btn-hover-bg, var(--armed-btn-bg, #f0f0f0));
+    --button-text-color: var(--armed-btn-color, #4d4d4d);
+    --button-hover-text-color: var(--armed-btn-hover-color, #1a1a1a);
+    --button-border: var(--armed-btn-border, 1px solid #d0d0d0);
+    --button-border-radius: var(--armed-btn-radius, 7px);
+    --button-height: var(--armed-btn-height, 26px);
+    --button-width: var(--armed-btn-width, auto);
+    --button-padding: var(--armed-btn-padding, 0 8px);
+    --button-content-gap: var(--armed-btn-gap, 4px);
+    --button-font-size: var(--armed-btn-font-size, 12px);
+    --button-font-weight: var(--armed-btn-font-weight, 400);
+    --button-font-family: var(--armed-btn-font-family, inherit);
+    --button-justify-content: center;
+    --button-transition:
+      background var(--armed-btn-duration, 150ms) ease, color var(--armed-btn-duration, 150ms) ease;
+
+    --disabled-opacity: var(--armed-btn-disabled-opacity, 0.5);
+    --disabled-cursor: not-allowed;
+
+    display: var(--armed-btn-display, inline-flex);
+    margin-left: var(--armed-btn-margin-left, 0);
+    flex-shrink: var(--armed-btn-flex-shrink, 1);
+    font-variant-ligatures: var(--armed-btn-font-ligatures, normal);
+  }
+
+  /* Armed has its own geometry as well as its own colour: an icon-only
+     control is a square at rest and has to grow to fit "sure?" once armed. */
+  .armed-button[data-armed='true'] {
+    --button-color: var(--armed-btn-armed-bg, #dc2626);
+    --button-hover-color: var(--armed-btn-armed-bg, #dc2626);
+    --button-text-color: var(--armed-btn-armed-color, #ffffff);
+    --button-hover-text-color: var(--armed-btn-armed-color, #ffffff);
+    --button-border: 1px solid var(--armed-btn-armed-border, #dc2626);
+    --button-width: var(--armed-btn-armed-width, auto);
+    --button-padding: var(--armed-btn-armed-padding, 0 8px);
+    --button-font-weight: var(--armed-btn-armed-weight, 600);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .armed-button {
+      --button-transition: none;
+    }
+  }
+</style>

package/dist/ArmedButton/ArmedButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ArmedButtonProperties } from './properties';
+declare const ArmedButton: import("svelte").Component<ArmedButtonProperties, {}, "">;
+type ArmedButton = ReturnType<typeof ArmedButton>;
+export default ArmedButton;

package/dist/ArmedButton/properties.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+export type ArmedButtonProperties = {
+    /**
+     * Called on the SECOND click, after the button has disarmed. Disarming
+     * happens before this is awaited, not after -- a slow confirm must not
+     * hold the button in its armed, mid-confirmation-looking state.
+     */
+    onconfirm: () => void | Promise<void>;
+    /** Resting label. Replaced by `confirmLabel` while armed. */
+    label: string;
+    /** Shown in place of `label` while armed. Short -- it replaces the label, not beside it. */
+    confirmLabel?: string;
+    /** How long the armed state lasts before disarming itself. */
+    armedMs?: number;
+    disabled?: boolean;
+    /**
+     * Native title attribute. Defaults to `label` at rest and "click again to
+     * <label, lowercased>" while armed.
+     */
+    title?: string;
+    /** Replaces the resting label with an icon; `confirmLabel` still shows as text once armed. */
+    icon?: Snippet;
+    classes?: string;
+};

package/dist/ArmedButton/properties.js

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

package/dist/Banner/Banner.svelte

@@ -10,7 +10,8 @@
   import closeSvg from '../assets/close.svg?raw';
 
   let {
-    text,
+    text = '',
+    children,
     icon,
     linkText,
     dismissible = false,
@@ -73,12 +74,16 @@
           {@render title()}
         </div>
       {/if}
-      <div class="banner-text">
-        {text}
-        {#if typeof linkText === 'string' && linkText.length > 0}
-          <span class="banner-link-text">{linkText}</span>
-        {/if}
-      </div>
+      {#if typeof children === 'function'}
+        {@render children()}
+      {:else}
+        <div class="banner-text">
+          {text}
+          {#if typeof linkText === 'string' && linkText.length > 0}
+            <span class="banner-link-text">{linkText}</span>
+          {/if}
+        </div>
+      {/if}
     </div>
     {#if typeof rightContent === 'function'}
       <div class="banner-right">
@@ -169,7 +174,7 @@
   .banner-right {
     display: flex;
     align-items: center;
-    flex-shrink: 0;
+    flex-shrink: var(--banner-right-flex-shrink, 0);
   }
 
   .banner-dismiss {

package/dist/Banner/properties.d.ts

@@ -1,9 +1,16 @@
 import type { Snippet } from 'svelte';
 export type BannerProperties = MandatoryBannerProperties & OptionalBannerProperties & BannerEventProperties;
 export type MandatoryBannerProperties = {
-    text: string;
+    /** The message as plain text (with optional `linkText`). Defaults to ''. */
+    text?: string;
 };
 export type OptionalBannerProperties = {
+    /**
+     * The message as markup -- a sentence with a link, or a sentence and a
+     * Retry button -- rendered as the banner body in place of `text` and
+     * `linkText`. `title` still renders above it.
+     */
+    children?: Snippet;
     icon?: Snippet;
     title?: Snippet;
     linkText?: string;

package/dist/Button/Button.svelte

@@ -25,9 +25,12 @@
     ariaControls,
     ariaHaspopup,
     ariaSelected,
+    ariaPressed,
     ariaBusy,
     role,
     title,
+    statusText,
+    statusTestId,
     onclick,
     onkeydown = () => {},
     onkeyup = () => {},
@@ -95,6 +98,7 @@
     aria-controls={ariaControls ?? null}
     aria-haspopup={ariaHaspopup ?? null}
     aria-selected={ariaSelected ?? null}
+    aria-pressed={ariaPressed ?? null}
     aria-busy={isBusy || ariaBusy || null}
     title={title ?? null}
     type={href ? null : type}
@@ -123,6 +127,11 @@
       {@render children()}
     {/if}
   </svelte:element>
+  {#if typeof statusText === 'string'}
+    <div class="button-status" role="status" aria-live="polite" data-pw={statusTestId ?? null}>
+      {statusText}
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -131,6 +140,23 @@
     width: var(--button-width, fit-content);
   }
 
+  /* The statusText region: out of flow at 1x1px inside the positioned
+     container, so it never moves the button or its row (the visually-hidden
+     recipe ChatComposer and Label use). Not named .sr-only: `classes` lands on
+     this container, so a consumer's own `sr-only` class would match a rule of
+     that name here and hide the whole button. */
+  .button-status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
   /* ---- Variant defaults (set the internal --_btn-* layer; explicit --button-* always wins) ---- */
   .variant-primary {
     --_btn-color: #3a4550;

package/dist/Button/properties.d.ts

@@ -64,6 +64,12 @@ export type OptionalButtonProperties = {
      */
     ariaHaspopup?: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | boolean;
     ariaSelected?: boolean;
+    /**
+     * Native `aria-pressed`, for a toggle button (a chip that stays on once
+     * picked). `aria-selected` only means something on option/tab/row roles, so a
+     * plain button that toggles wants this instead.
+     */
+    ariaPressed?: boolean;
     /**
      * Native `aria-busy`, for a control that stays usable while related data loads.
      * Deliberately separate from `loading`, which also renders the spinner and
@@ -78,6 +84,17 @@ export type OptionalButtonProperties = {
      * affordance; an icon-only button generally wants both.
      */
     title?: string;
+    /**
+     * Opt-in sr-only status region (`role="status" aria-live="polite"`) rendered
+     * beside the button, never around it -- e.g. "Copied" after a copy button's
+     * click, announced without re-announcing the button itself. Rendered only
+     * when set (an empty string still renders an emptied region, which is how a
+     * caller keeps it mounted before the first announcement, as a live region
+     * must be). The sentence is the caller's; nothing is hardcoded here.
+     */
+    statusText?: string;
+    /** Test id on the status region (see `statusText`). */
+    statusTestId?: string;
     disabled?: boolean;
     classes?: string;
     /**