@juspay/svelte-ui-components 4.22.0 → 4.24.0

package/dist/Checkbox/Checkbox.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+  import { flushSync } from 'svelte';
   import type { CheckboxProperties } from './properties';
   import checkmarkSvg from '../assets/checkmark.svg?raw';
   import minusSvg from '../assets/minus.svg?raw';
 
   let {
-    text,
+    text = '',
     checked = $bindable(false),
     disabled = false,
     indeterminate = $bindable(false),
@@ -16,9 +17,13 @@
     ariaControls,
     ariaLabel,
     controlled = false,
-    attributes
+    attributes,
+    name,
+    value
   }: CheckboxProperties = $props();
 
+  let nativeInputEl: HTMLInputElement | null = $state(null);
+
   // Visible text wins over `ariaLabel`, which is what `properties.ts` has always
   // promised and what WCAG 2.5.3 requires: a control showing "Accept terms" must
   // carry that text in its accessible name, so letting an explicit label replace
@@ -44,15 +49,45 @@
     // for. Nothing is flipped locally, so a parent that declines the change
     // (a controlled table selection that rejects a row) keeps the box, the
     // native input and aria-checked all agreeing with the value it passed.
+    // No `input`/`change` dispatch here either: the input's checked state
+    // genuinely has not changed, so firing one would tell listeners (a
+    // parent `<form>`, a consumer's own `onchange`) about a flip that did
+    // not happen.
     if (controlled) {
       onclick?.(!checked);
       return;
     }
-    checked = !checked;
-    if (indeterminate) {
-      indeterminate = false;
-    }
+    // `flushSync` (rather than `await tick()`) applies the reactive
+    // `input.checked` write before the dispatch below runs, without handing
+    // control back to the event loop first. A keyboard repeat or a rapid
+    // double click stays a single synchronous call stack from gesture to
+    // dispatch: nothing can interleave a second `handleClick` in the middle
+    // (the race an `await` gap would allow), a screen reader sees the
+    // `input`/`change` pair land in the same tick as the key press it
+    // expects them tied to, and there is no unmount gap for `nativeInputEl`
+    // to go stale in.
+    flushSync(() => {
+      checked = !checked;
+      if (indeterminate) {
+        indeterminate = false;
+      }
+    });
     onclick?.(checked);
+    // The box (role="checkbox") is the only element the user can actually
+    // reach — the native input is aria-hidden, tabindex="-1" and
+    // pointer-events: none, purely a form-submission mirror. Because it
+    // never receives a real user click, the browser never fires a native
+    // `change` on it either, so a parent `<form>` listener (or a consumer's
+    // own `input.addEventListener('change', ...)`) never learns the value
+    // moved. `input`/`change` are dispatched manually to restore that signal.
+    // `composed: true` matters as much as `bubbles: true` here: native `input`/
+    // `change` are composed, and this component ships inside a shadow root
+    // (Checkbox.wc.svelte's `shadow: 'open'`) for every <sui-checkbox> consumer.
+    // `bubbles` alone stops at the shadow boundary; without `composed` the event
+    // never reaches a light-DOM `<form>`, silently defeating the whole point of
+    // wiring `name`/`value` onto this input for every web-component consumer.
+    nativeInputEl?.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    nativeInputEl?.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
   }
 
   function handleKeyDown(e: KeyboardEvent): void {
@@ -84,9 +119,12 @@
     class="native-checkbox"
     {checked}
     {disabled}
+    name={name ?? null}
+    value={value ?? null}
     tabindex={-1}
     aria-hidden="true"
     onclick={(e: MouseEvent) => e.stopPropagation()}
+    bind:this={nativeInputEl}
     data-pw={typeof testId === 'string' ? `${testId}-native-input` : null}
     testID={typeof testId === 'string' ? `${testId}-native-input` : null}
   />

package/dist/Checkbox/properties.d.ts

@@ -1,9 +1,15 @@
 import type { Snippet } from 'svelte';
-export type CheckboxProperties = MandatoryCheckboxProperties & OptionalCheckboxProperties & CheckboxEventProperties;
+export type CheckboxProperties = OptionalCheckboxProperties & CheckboxEventProperties;
 export type MandatoryCheckboxProperties = {
-    text: string;
+    text?: string;
 };
 export type OptionalCheckboxProperties = {
+    /** Visible label. Optional, defaulting to `''` (unlabelled) -- matching Toggle's
+     *  own `text` contract (Toggle/properties.ts) -- so a form-only checkbox
+     *  (`<Checkbox name="agree" />`) does not need an empty string just to compile.
+     *  A checkbox with no visible text needs `ariaLabel` for an accessible name;
+     *  see `ariaLabel` below. */
+    text?: string;
     checked?: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
@@ -27,6 +33,16 @@ export type OptionalCheckboxProperties = {
      *  `aria-controls` to point at, or a consumer's own test attribute. Spread
      *  last, so a value here wins over the component's own `data-pw`. */
     attributes?: Record<string, string>;
+    /** Native `name` on the underlying `<input type="checkbox">`, so the control
+     *  participates in a surrounding `<form>`'s submission. Omitted by default:
+     *  the input stays nameless and outside `FormData`, exactly as before this
+     *  prop existed. */
+    name?: string;
+    /** Native `value` submitted when checked. Defaults to `"on"` — the native
+     *  checkbox default — when omitted, so setting `name` alone is enough to
+     *  form-associate a plain "checked or not" checkbox. An unchecked checkbox
+     *  never appears in `FormData`, matching native behaviour. */
+    value?: string;
 };
 export type CheckboxEventProperties = {
     onclick?: (checked: boolean) => void;

package/dist/MarkdownText/MarkdownText.svelte

@@ -9,11 +9,12 @@
     classes,
     tableLabel,
     tableWrapperClass,
-    sanitize
+    sanitize,
+    unwrapFence = false
   }: MarkdownTextProperties = $props();
 
   let html = $derived(
-    renderMarkdown(markdown, { breaks, tableLabel, tableWrapperClass, sanitize })
+    renderMarkdown(markdown, { breaks, tableLabel, tableWrapperClass, sanitize, unwrapFence })
   );
 </script>
 

package/dist/MarkdownText/markdown.d.ts

@@ -1,6 +1,11 @@
 import type { RenderMarkdownOptions } from './properties';
 /**
- * Markdown → HTML with the sanitizing pipeline above. Pure string transform —
- * no DOM involved — so it renders identically on server and client.
+ * Removes a fence that wraps the entire body and is labelled `markdown` or
+ * `md`, which is how models overwhelmingly emit a markdown answer. Returns the
+ * source untouched in every other case.
+ *
+ * An unlabelled fence is deliberately not unwrapped: it may be code the author
+ * meant to show, and there is nothing in the source to tell the two apart.
  */
+export declare function unwrapMarkdownFence(source: string): string;
 export declare function renderMarkdown(markdown: string, options?: RenderMarkdownOptions): string;

package/dist/MarkdownText/markdown.js

@@ -302,9 +302,69 @@ function instanceFor(options) {
  * Markdown → HTML with the sanitizing pipeline above. Pure string transform —
  * no DOM involved — so it renders identically on server and client.
  */
+/**
+ * Matches a body that is ENTIRELY one fence labelled as markdown.
+ *
+ * Anchored at both ends on purpose. A peer's live implementation used an
+ * unanchored, global regex, so a message that *explained* markdown by quoting a
+ * fenced sample had the sample unwrapped and rendered as live markup. Anchoring
+ * means a fence with anything before or after it is left alone.
+ *
+ * The trailing whitespace is `\s*`, not `[ \t]*\s*` -- `[ \t]` is already a
+ * subset of `\s`, so pairing them let the engine try every split between the
+ * two quantifiers over the same characters. On uncontrolled input (this runs
+ * on chat/model text) that is a polynomial-time blow-up: a closing delimiter
+ * followed by many tabs and then one stray character made a single `.exec`
+ * call take seconds instead of a fraction of a millisecond.
+ *
+ * Groups: 1 = the opening run, 2 = the info string, 3 = the body, 4 = the closing run.
+ */
+/*
+ * Hoisted rather than built per call. Both carry only `m` -- no `g` or `y` --
+ * so they hold no `lastIndex` between calls and are safe to share.
+ */
+const INNER_BACKTICK_FENCE = /^[ \t]*`{3,}/m;
+const INNER_TILDE_FENCE = /^[ \t]*~{3,}/m;
+const WHOLE_BODY_MARKDOWN_FENCE = /^\s*(`{3,}|~{3,})[ \t]*(markdown|md)[ \t]*\r?\n([\s\S]*?)\r?\n?(`{3,}|~{3,})\s*$/i;
+/**
+ * Removes a fence that wraps the entire body and is labelled `markdown` or
+ * `md`, which is how models overwhelmingly emit a markdown answer. Returns the
+ * source untouched in every other case.
+ *
+ * An unlabelled fence is deliberately not unwrapped: it may be code the author
+ * meant to show, and there is nothing in the source to tell the two apart.
+ */
+export function unwrapMarkdownFence(source) {
+    const match = WHOLE_BODY_MARKDOWN_FENCE.exec(source);
+    if (match === null) {
+        return source;
+    }
+    const opening = match[1];
+    const body = match[3];
+    const closing = match[4];
+    // CommonMark lets a closing fence be LONGER than its opening, so the closing
+    // run is its own group and is checked here rather than by a `\1`
+    // backreference. The backreference did not refuse a longer close -- it
+    // matched the last three ticks and swept the extra one into the body, so
+    // `# Heading` came back as "# Heading\n`". Content corruption, not a refusal.
+    // Same character, and at least as long, is the actual rule.
+    if (closing[0] !== opening[0] || closing.length < opening.length) {
+        return source;
+    }
+    // A body still containing a fence run means the outer delimiters may not be a
+    // wrapper at all -- the regex is lazy to the LAST delimiter, so this shape is
+    // ambiguous. Refusing keeps a message quoting fenced code from being
+    // reinterpreted as markup, which is the failure this feature exists to avoid.
+    const innerFence = opening[0] === '~' ? INNER_TILDE_FENCE : INNER_BACKTICK_FENCE;
+    if (innerFence.test(body)) {
+        return source;
+    }
+    return body;
+}
 export function renderMarkdown(markdown, options = {}) {
+    const source = options.unwrapFence === true ? unwrapMarkdownFence(markdown) : markdown;
     const instance = instanceFor(options);
-    const output = options.inline === true ? instance.parseInline(markdown) : instance.parse(markdown);
+    const output = options.inline === true ? instance.parseInline(source) : instance.parse(source);
     if (typeof output !== 'string') {
         return '';
     }

package/dist/MarkdownText/properties.d.ts

@@ -29,6 +29,21 @@ export type OptionalMarkdownTextProperties = {
      * whitespace-only string, keeps only `markdown-table-wrapper`.
      */
     tableWrapperClass?: string;
+    /**
+     * Remove a fence that wraps the ENTIRE value and is labelled `markdown` or
+     * `md`, then render what was inside it as markdown.
+     *
+     * Models very often return a whole answer wrapped that way, which renders as
+     * a code block showing source rather than as a document. Off by default,
+     * because unwrapping is not always right: a message quoting a fenced sample
+     * would be reinterpreted as live markup, which is exactly what an
+     * unanchored implementation elsewhere did.
+     *
+     * Only the whole-body case is unwrapped. A fence with anything before or
+     * after it, an unlabelled fence, a fence labelled as another language, and a
+     * body that still contains a fence delimiter are all left alone.
+     */
+    unwrapFence?: boolean;
     /**
      * Narrow which URL protocols survive on rendered links/images. See
      * `MarkdownSanitizeOptions`.
@@ -115,6 +130,8 @@ export type RenderMarkdownOptions = {
     tableLabel?: string;
     /** Class name for the scroll region wrapping each table. See `MarkdownTextProperties.tableWrapperClass`. */
     tableWrapperClass?: string;
+    /** Unwrap a whole-body ```markdown fence. See `MarkdownTextProperties.unwrapFence`. */
+    unwrapFence?: boolean;
     /** Narrow the protocol allow-list. See `MarkdownSanitizeOptions`. */
     sanitize?: MarkdownSanitizeOptions;
 };

package/dist/Select/Select.svelte

@@ -36,7 +36,8 @@
     hierarchy = 'default',
     leftIcon,
     leftIconTestId,
-    usePortal = false
+    usePortal = false,
+    name
   }: SelectProperties = $props();
 
   function normalizeItems(source: SelectItem[] | string[]): SelectItem[] {
@@ -518,6 +519,16 @@
   bind:this={containerEl}
   {...typeof testId === 'string' ? { 'data-pw': testId, testID: testId } : {}}
 >
+  {#if typeof name === 'string' && name.length > 0}
+    <!-- No native <select> exists to carry `name`/`value` -- this is a custom
+         combobox/listbox. One hidden input per selected id mirrors a native
+         `<select multiple>`, which likewise submits one FormData entry per
+         selected <option> under the same name; `disabled` matches native
+         behaviour by excluding all of them from the submission. -->
+    {#each value as id (id)}
+      <input type="hidden" {name} value={id} {disabled} />
+    {/each}
+  {/if}
   <div class="select-control" class:has-clear={showClearButton}>
     <div
       class="select-trigger"

package/dist/Select/properties.d.ts

@@ -134,6 +134,17 @@ export type OptionalSelectProperties = {
      * `--select-dropdown-z-index` if it must sit above an even higher overlay.
      */
     usePortal?: boolean;
+    /**
+     * Native `name` for form submission. Select has no underlying `<select>` —
+     * it is a custom combobox/listbox — so setting this renders one
+     * `<input type="hidden">` per entry in `value`, each carrying the
+     * selected item's `id` as its value. Omitted by default: no hidden inputs
+     * are rendered and nothing changes for an existing consumer. Mirrors a
+     * native `<select multiple>`, which likewise submits one entry per
+     * selected `<option>` under the same name; an empty `value` array
+     * submits nothing, matching a native select with no selection.
+     */
+    name?: string;
 };
 export type SelectEventProperties = {
     onchange?: (value: string[]) => void;

package/dist/Table/Table.svelte

@@ -1188,11 +1188,18 @@
   }
 
   /* ── Container ──────────────────────────────────────────────────────────── */
+  /* `hidden` is the default because it is what clips the table's corners to
+     this element's border-radius; without it the first and last cells square
+     off over the rounded border. A consumer who needs the container itself to
+     scroll sideways sets this to `auto` and accepts that trade. Note the
+     scrollable variant below sets `overflow-y`, and per the CSS overflow spec
+     a `visible` on one axis computes to `auto` when the other is not visible,
+     so `visible` here does not survive on a scrollable table. */
   .table-container {
     border: var(--table-border, 1px solid #e5e7eb);
     border-radius: var(--table-border-radius, var(--radius, 4px));
     width: var(--table-container-width, 100%);
-    overflow: hidden;
+    overflow: var(--table-container-overflow, hidden);
   }
 
   .scrollable-table {

package/dist/Toggle/Toggle.svelte

@@ -10,7 +10,9 @@
     id,
     ariaLabel,
     ariaLabelledby,
-    onclick
+    onclick,
+    name,
+    value
   }: ToggleProperties = $props();
 
   // Stable across hydration so the hidden input stays named and text remains clickable.
@@ -40,6 +42,8 @@
       type="checkbox"
       {checked}
       {disabled}
+      name={name ?? null}
+      value={value ?? null}
       aria-label={ariaLabel?.trim() || null}
       aria-labelledby={ariaLabelledby?.trim() || null}
       onclick={handleCheckboxClick}
@@ -112,7 +116,7 @@
   }
 
   .input-checkbox:focus + .slider {
-    box-shadow: 0 0 1px #171717;
+    box-shadow: var(--toggle-focus-ring, 0 0 0 3px rgba(33, 150, 243, 0.3));
   }
 
   .input-checkbox:checked + .slider:before {

package/dist/Toggle/properties.d.ts

@@ -19,6 +19,15 @@ export type OptionalToggleProperties = {
      * `text` or `inputAriaLabel` for labels outside the shadow root.
      */
     ariaLabelledby?: string;
+    /** Native `name` on the underlying `<input type="checkbox">`, so the switch
+     *  participates in a surrounding `<form>`'s submission. Omitted by default:
+     *  the input stays nameless and outside `FormData`, exactly as before this
+     *  prop existed. */
+    name?: string;
+    /** Native `value` submitted when on. Defaults to `"on"` — the native
+     *  checkbox default — when omitted. An off toggle never appears in
+     *  `FormData`, matching native behaviour. */
+    value?: string;
 };
 export type ToggleEventProperties = {
     onclick?: (checked: boolean) => void;