@juspay/svelte-ui-components 3.5.0 → 3.5.1

package/dist/ChatComposer/properties.d.ts

@@ -73,49 +73,37 @@ export type OptionalChatComposerProperties = {
 };
 export type ChatComposerEventProperties = {
     onsubmit?: (value: string, attachments: File[]) => void;
-    onSubmit?: (value: string, attachments: File[]) => void;
     oninput?: (value: string, event: Event) => void;
     onkeydown?: (event: KeyboardEvent) => void;
     onpaste?: (event: ClipboardEvent) => void;
     onstop?: () => void;
-    onStop?: () => void;
     onvoice?: () => void;
-    onVoice?: () => void;
     onattach?: (files: File[]) => void;
-    onAttach?: (files: File[]) => void;
     /**
      * Intercepts the attach button: when provided, clicking it calls this instead of
      * opening the built-in file picker — for apps with their own chooser (camera /
      * gallery / files).
      */
     onattachclick?: () => void;
-    onAttachClick?: () => void;
     /**
      * Removal callbacks for the rich strip's chips. Omit them to render the rich
      * chips read-only (no remove buttons), mirroring AttachmentChipRow.
      */
     onremoverichimage?: (id: string) => void;
-    onRemoveRichImage?: (id: string) => void;
     onremoverichfile?: (id: string) => void;
-    onRemoveRichFile?: (id: string) => void;
     onremoverichvideo?: (id: string) => void;
-    onRemoveRichVideo?: (id: string) => void;
     /**
      * Open/preview callbacks for the rich strip's chips — when provided, a chip's
      * tile becomes a real button and clicking it fires with the attachment (e.g.
      * open a lightbox, play the video).
      */
     onopenrichimage?: (image: AttachmentChipImage) => void;
-    onOpenRichImage?: (image: AttachmentChipImage) => void;
     onopenrichvideo?: (video: AttachmentChipVideo) => void;
-    onOpenRichVideo?: (video: AttachmentChipVideo) => void;
     onopenrichfile?: (file: AttachmentChipFile) => void;
-    onOpenRichFile?: (file: AttachmentChipFile) => void;
     /**
      * The composer's idle action (e.g. voice conversation mode). While the value is
      * empty, nothing is sendable and no reply is streaming, the send button gives way
      * to an action button that fires this.
      */
     onaction?: () => void;
-    onAction?: () => void;
 };

package/dist/ChatHeader/ChatHeader.svelte

@@ -14,16 +14,12 @@
     closeIcon,
     closeLabel = 'Close',
     showClose,
-    onclose: oncloseLegacy,
-    onClose,
+    onclose,
     children,
     testId,
     classes
   }: ChatHeaderProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclose = $derived(onClose ?? oncloseLegacy);
-
   let displayClose = $derived(showClose ?? typeof onclose === 'function');
 </script>
 

package/dist/ChatHeader/properties.d.ts

@@ -16,5 +16,4 @@ export type OptionalChatHeaderProperties = {
 };
 export type ChatHeaderEventProperties = {
     onclose?: () => void;
-    onClose?: () => void;
 };

package/dist/ChatMessage/ChatMessage.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Button from '../Button/Button.svelte';
   import LoadingDots from '../LoadingDots/LoadingDots.svelte';
+  import TypewriterText from '../TypewriterText/TypewriterText.svelte';
   import copySvg from '../assets/copy.svg?raw';
   import checkmarkSvg from '../assets/checkmark.svg?raw';
   import retrySvg from '../assets/retry.svg?raw';
@@ -17,7 +18,10 @@
     markdown,
     body,
     streaming = false,
+    typewriter = false,
+    typewriterSpeed,
     clampLines = 0,
+    marker = false,
     status,
     avatar,
     header,
@@ -30,12 +34,9 @@
     collapseLabel = 'Collapse message',
     feedbackUpLabel = 'Good response',
     feedbackDownLabel = 'Bad response',
-    onretry: onretryLegacy,
-    onRetry,
-    onfeedback: onfeedbackLegacy,
-    onFeedback,
-    oncopy: oncopyLegacy,
-    onCopy,
+    onretry,
+    onfeedback,
+    oncopy,
     testId,
     classes
   }: ChatMessageProperties = $props();
@@ -71,10 +72,6 @@
       expanded = !expanded;
     }
   };
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const oncopy = $derived(onCopy ?? oncopyLegacy);
-  const onfeedback = $derived(onFeedback ?? onfeedbackLegacy);
-  const onretry = $derived(onRetry ?? onretryLegacy);
 
   let party = $derived(partyOf(role));
 
@@ -109,8 +106,40 @@
     hasMarkdown && renderMarkdownFn !== null ? renderMarkdownFn(markdown ?? '') : html
   );
   let hasHtml = $derived(typeof effectiveHtml === 'string' && effectiveHtml.length > 0);
+
   let hasBody = $derived(typeof body === 'function');
-  let hasContent = $derived(hasBody || hasHtml || content.length > 0);
+
+  /* The typewriter reveals SOURCE text, not rendered HTML: typing a pre-rendered
+     `html` string character by character would put its tags on screen. So it drives
+     off `markdown` or `content` and leaves an `html`-only message to the normal
+     path. `markdown` is typed through the same pipeline the static branch uses, so
+     rich text reveals as rich text rather than as raw syntax that reformats at the
+     end. */
+  let typewriterSource = $derived(hasMarkdown ? (markdown ?? '') : content);
+  /* Gated on the pipeline for a markdown source. The renderer loads asynchronously, and
+     without this the typewriter starts on the SOURCE: `**bold**` is typed literally and
+     then reformats when the module resolves. Waiting matches what the static branch
+     already does — degrade to the `html`/`content` fallback until the renderer is there —
+     rather than showing syntax the consumer never asked to display. */
+  let typewriterActive = $derived(
+    typewriter &&
+      !hasBody &&
+      typewriterSource.length > 0 &&
+      (!hasMarkdown || renderMarkdownFn !== null)
+  );
+  let typewriterRenderText = $derived(
+    hasMarkdown && renderMarkdownFn !== null ? { renderText: renderMarkdownFn } : {}
+  );
+  // Clamped at the boundary the way LoadingDots clamps `dots`, so the prop's floor is part
+  // of this component's contract rather than something a consumer discovers. The finite
+  // check is not redundant: `typeof NaN === 'number'`, and `Math.max(1, NaN)` is `NaN`, so
+  // without it the documented floor is not actually enforced.
+  let typewriterPacing = $derived(
+    typeof typewriterSpeed === 'number' && Number.isFinite(typewriterSpeed)
+      ? { speed: Math.max(1, typewriterSpeed) }
+      : {}
+  );
+  let hasContent = $derived(hasBody || hasHtml || content.length > 0 || typewriterActive);
   let showTyping = $derived(streaming && !hasContent);
   let showRetry = $derived(typeof onretry === 'function');
   let showFeedback = $derived(typeof onfeedback === 'function');
@@ -177,12 +206,38 @@
       <div
         class="bubble"
         class:clampable
+        class:has-marker={marker}
         style={clampable ? `--chat-message-clamp-lines-prop: ${clampLines};` : null}
         data-clamped={clampActive ? 'true' : null}
         data-expanded={clampable ? String(expanded) : null}
       >
+        {#if marker}
+          <span class="marker" aria-hidden="true"></span>
+        {/if}
+
         {#if hasBody}
           <div class="body" id={bodyId}>{@render body?.()}</div>
+        {:else if typewriterActive}
+          <!-- ChatMessageList is a role="log" aria-live="polite" region, so a body whose text
+               grows one character at a time would be announced as it grows. Silence it only
+               WHILE it is growing: leaving it off once streaming ends would suppress the
+               settled message too, which is the announcement the live region exists for.
+               `aria-live="off"` is the spec answer (the innermost live setting wins), and
+               `aria-busy` is the purpose-built one — "being modified, wait before exposing" —
+               so the two together do not depend on a single behaviour being implemented. -->
+          <div
+            class="body"
+            id={bodyId}
+            aria-live={streaming ? 'off' : null}
+            aria-busy={streaming ? 'true' : null}
+          >
+            <TypewriterText
+              text={typewriterSource}
+              isStreaming={streaming}
+              {...typewriterRenderText}
+              {...typewriterPacing}
+            />
+          </div>
         {:else if hasHtml}
           <!-- eslint-disable-next-line svelte/no-at-html-tags -->
           <div class="body" id={bodyId}>{@html effectiveHtml}</div>
@@ -322,6 +377,27 @@
     overflow-wrap: anywhere;
   }
 
+  /* Only the marker variant becomes a containing block: making every bubble relative
+     would silently re-base any absolutely-positioned content a consumer renders in a
+     body snippet. */
+  .bubble.has-marker {
+    position: relative;
+  }
+
+  .marker {
+    /* Decorative and absolutely positioned, so it sits over the bubble's leading
+       padding — where a link at the start of a responder message also sits. Without
+       this it silently eats those clicks. */
+    pointer-events: none;
+    position: absolute;
+    inset-block: var(--chat-message-marker-inset-block, 0);
+    /* Logical, so the bar follows `role` alignment into RTL instead of pinning left. */
+    inset-inline-start: var(--chat-message-marker-offset, 0px);
+    width: var(--chat-message-marker-width, 2px);
+    border-radius: var(--chat-message-marker-border-radius, 0);
+    background: var(--chat-message-marker-color, #6d28d9);
+  }
+
   .chat-message.party-sender .bubble {
     color: var(--chat-message-sender-color, #ffffff);
     background: var(--chat-message-sender-background, #18181b);

package/dist/ChatMessage/properties.d.ts

@@ -37,7 +37,25 @@ export type OptionalChatMessageProperties = {
      * the line count for every message without touching each call site.
      */
     clampLines?: number;
+    /**
+     * Draw an accent bar along the bubble's leading edge — the quote-bar shape a chat
+     * surface uses to mark one party's turns without giving them a filled bubble.
+     * Decorative: it carries no text and is hidden from assistive technology, so the
+     * distinction it makes must also be carried by `role`, which it is.
+     */
+    marker?: boolean;
     streaming?: boolean;
+    /**
+     * Reveal the message progressively instead of all at once, using `TypewriterText`.
+     * Drives off `markdown` or `content` — never `html`, since typing a pre-rendered
+     * string would put its tags on screen — and types `markdown` through the same
+     * pipeline the static branch uses, so rich text reveals as rich text. `streaming`
+     * decides the mode: while it is true, text keeps typing as it grows; the moment it
+     * turns false the remainder is shown at once. Ignored when a `body` snippet is set.
+     */
+    typewriter?: boolean;
+    /** Milliseconds between characters while typing, clamped to a minimum of 1. A non-finite value is ignored. Defaults to `TypewriterText`'s own. */
+    typewriterSpeed?: number;
     status?: ChatMessageStatus;
     avatar?: Snippet;
     header?: Snippet;
@@ -59,9 +77,6 @@ export type OptionalChatMessageProperties = {
 };
 export type ChatMessageEventProperties = {
     onretry?: (() => void) | null;
-    onRetry?: (() => void) | null;
     onfeedback?: ((value: ChatMessageFeedback) => void) | null;
-    onFeedback?: ((value: ChatMessageFeedback) => void) | null;
     oncopy?: (text: string) => void;
-    onCopy?: (text: string) => void;
 };

package/dist/ChatMessageList/ChatMessageList.svelte

@@ -23,21 +23,13 @@
     jumpLabel = 'Jump to latest',
     jumpIcon,
     allowCopy = false,
-    onscrollstate: onscrollstateLegacy,
-    onScrollState,
-    onretry: onretryLegacy,
-    onRetry,
-    onfeedback: onfeedbackLegacy,
-    onFeedback,
+    onscrollstate,
+    onretry,
+    onfeedback,
     testId,
     classes
   }: ChatMessageListProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onfeedback = $derived(onFeedback ?? onfeedbackLegacy);
-  const onretry = $derived(onRetry ?? onretryLegacy);
-  const onscrollstate = $derived(onScrollState ?? onscrollstateLegacy);
-
   let listEl: HTMLElement | null = $state(null);
   let innerEl: HTMLElement | null = $state(null);
   let atBottom = $state(true);
@@ -311,6 +303,8 @@
           markdown={msg.markdown}
           body={typeof messageBody === 'function' ? bodyFor : null}
           streaming={msg.streaming}
+          typewriter={msg.typewriter}
+          typewriterSpeed={msg.typewriterSpeed}
           status={msg.status}
           allowCopy={allowCopy && partyOf(msg.role) === 'responder'}
           attachments={typeof messageAttachments === 'function' ? attachmentsFor : null}

package/dist/ChatMessageList/properties.d.ts

@@ -49,12 +49,6 @@ export type ChatMessageListEventProperties = {
         atBottom: boolean;
         scrollable: boolean;
     }) => void;
-    onScrollState?: (state: {
-        atBottom: boolean;
-        scrollable: boolean;
-    }) => void;
     onretry?: () => void;
-    onRetry?: () => void;
     onfeedback?: (value: ChatMessageFeedback, message: ChatMessageData) => void;
-    onFeedback?: (value: ChatMessageFeedback, message: ChatMessageData) => void;
 };

package/dist/ChatSuggestions/ChatSuggestions.svelte

@@ -13,15 +13,11 @@
     loading = false,
     icon,
     chipClasses,
-    onselect: onselectLegacy,
-    onSelect,
+    onselect,
     testId,
     classes
   }: ChatSuggestionsProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onselect = $derived(onSelect ?? onselectLegacy);
-
   const labelOf = (item: ChatSuggestion): string => (typeof item === 'string' ? item : item.label);
 
   const valueOf = (item: ChatSuggestion): string => {

package/dist/ChatSuggestions/properties.d.ts

@@ -55,5 +55,4 @@ export type OptionalChatSuggestionsProperties = {
 };
 export type ChatSuggestionsEventProperties = {
     onselect?: (value: string, index: number) => void;
-    onSelect?: (value: string, index: number) => void;
 };

package/dist/CheckListItem/CheckListItem.svelte

@@ -8,14 +8,10 @@
     disabled = false,
     checkboxLabel,
     testId,
-    onclick: onclickLegacy,
-    onClick,
+    onclick,
     classes
   }: CheckListItemProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclick = $derived(onClick ?? onclickLegacy);
-
   function handleClick(value: boolean): void {
     checked = value;
     onclick?.(checked);

package/dist/CheckListItem/properties.d.ts

@@ -12,5 +12,4 @@ export type OptionalCheckListItemProperties = {
 };
 export type CheckListItemEventProperties = {
     onclick?: (checked: boolean) => void;
-    onClick?: (checked: boolean) => void;
 };

package/dist/Checkbox/Checkbox.svelte

@@ -11,16 +11,12 @@
     testId,
     checkedIcon,
     indeterminateIcon,
-    onclick: onclickLegacy,
-    onClick,
+    onclick,
     classes,
     ariaControls,
     ariaLabel
   }: CheckboxProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclick = $derived(onClick ?? onclickLegacy);
-
   function handleClick(): void {
     if (disabled) {
       return;

package/dist/Checkbox/properties.d.ts

@@ -20,5 +20,4 @@ export type OptionalCheckboxProperties = {
 };
 export type CheckboxEventProperties = {
     onclick?: (checked: boolean) => void;
-    onClick?: (checked: boolean) => void;
 };

package/dist/ChipInput/ChipInput.svelte

@@ -11,22 +11,12 @@
     editable = false,
     testId,
     classes,
-    onadd: onaddLegacy,
-    onAdd,
-    ondismiss: ondismissLegacy,
-    onDismiss,
-    onedit: oneditLegacy,
-    onEdit,
-    onchange: onchangeLegacy,
-    onChange
+    onadd,
+    ondismiss,
+    onedit,
+    onchange
   }: ChipInputProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onadd = $derived(onAdd ?? onaddLegacy);
-  const onchange = $derived(onChange ?? onchangeLegacy);
-  const ondismiss = $derived(onDismiss ?? ondismissLegacy);
-  const onedit = $derived(onEdit ?? oneditLegacy);
-
   let draft = $state('');
 
   // The chip currently swapped for an inline edit field, held by VALUE rather than by slot
@@ -153,11 +143,11 @@
           actionInput={false}
           classes="chip-input-edit"
           bind:this={editInputRef}
-          onInput={(nextValue) => {
+          oninput={(nextValue) => {
             editDraft = nextValue;
           }}
-          onKeyDown={(event) => handleEditKeyDown(event, chip)}
-          onBlur={() => handleEditBlur(chip)}
+          onkeydown={(event) => handleEditKeyDown(event, chip)}
+          onblur={() => handleEditBlur(chip)}
           {...typeof testId === 'string' ? { testId: `${testId}-item-${index}-edit` } : {}}
         />
       </div>
@@ -186,11 +176,11 @@
       actionInput={false}
       disable={disabled}
       classes="chip-input-draft"
-      onInput={(nextValue) => {
+      oninput={(nextValue) => {
         draft = nextValue;
       }}
-      onKeyDown={handleKeyDown}
-      onBlur={addChip}
+      onkeydown={handleKeyDown}
+      onblur={addChip}
       {...typeof testId === 'string' ? { testId: `${testId}-add` } : {}}
     />
   </div>

package/dist/ChipInput/properties.d.ts

@@ -34,16 +34,12 @@ export type OptionalChipInputProperties = {
 };
 export type ChipInputEventProperties = {
     onadd?: (value: string) => void;
-    onAdd?: (value: string) => void;
     ondismiss?: (value: string) => void;
-    onDismiss?: (value: string) => void;
     /**
      * Fires after an in-place edit (see `editable`) commits a value that actually changed. Not
      * fired when the edit is cancelled (Escape) or committed with the text unchanged.
      */
     onedit?: (value: string, previousValue: string) => void;
-    onEdit?: (value: string, previousValue: string) => void;
     /** Fires alongside `onadd`/`ondismiss`/`onedit`, after any of them has already updated `values`. */
     onchange?: (values: string[]) => void;
-    onChange?: (values: string[]) => void;
 };

package/dist/Choicebox/Choicebox.svelte

@@ -9,14 +9,10 @@
     disabled = false,
     showIndicator = true,
     testId,
-    onclick: onclickLegacy,
-    onClick,
+    onclick,
     classes
   }: ChoiceboxProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclick = $derived(onClick ?? onclickLegacy);
-
   function handleClick(): void {
     if (disabled) {
       return;

package/dist/Choicebox/properties.d.ts

@@ -12,5 +12,4 @@ export type OptionalChoiceboxProperties = {
 };
 export type ChoiceboxEventProperties = {
     onclick?: (selected: boolean) => void;
-    onClick?: (selected: boolean) => void;
 };

package/dist/ColorPicker/ColorPicker.svelte

@@ -22,17 +22,11 @@
     disabled = false,
     showValue = false,
     testId,
-    onchange: onchangeLegacy,
-    onChange,
-    oninput: oninputLegacy,
-    onInput,
+    onchange,
+    oninput,
     classes
   }: ColorPickerProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onchange = $derived(onChange ?? onchangeLegacy);
-  const oninput = $derived(onInput ?? oninputLegacy);
-
   // ── Internal state ──────────────────────────────────────────────
 
   let open = $state(false);
@@ -217,7 +211,7 @@
           disable={disabled}
           maxLength={7}
           classes="color-picker-text-input"
-          onInput={handleTextInput}
+          oninput={handleTextInput}
         />
       </div>
     {/if}
@@ -268,7 +262,7 @@
               value={hexInputValue}
               maxLength={7}
               classes="cp-field-input"
-              onInput={handleHexFieldInput}
+              oninput={handleHexFieldInput}
             />
             <span class="cp-field-label">HEX</span>
           </div>

package/dist/ColorPicker/properties.d.ts

@@ -11,7 +11,5 @@ export type OptionalColorPickerProperties = {
 };
 export type ColorPickerEventProperties = {
     onchange?: (value: string) => void;
-    onChange?: (value: string) => void;
     oninput?: (value: string) => void;
-    onInput?: (value: string) => void;
 };

package/dist/Combobox/Combobox.svelte

@@ -40,37 +40,19 @@
     createLabel = (query: string) => `Create "${query}"`,
     action,
     actionIcon,
-    onselect: onselectLegacy,
-    onSelect,
-    oninput: oninputLegacy,
-    onInput,
-    onopen: onopenLegacy,
-    onOpen,
-    onclose: oncloseLegacy,
-    onClose,
+    onselect,
+    oninput,
+    onopen,
+    onclose,
     onkeydown,
     onfocus,
     onblur,
-    onchange: onchangeLegacy,
-    onChange,
-    onadd: onaddLegacy,
-    onAdd,
-    onremove: onremoveLegacy,
-    onRemove,
-    oncreate: oncreateLegacy,
-    onCreate
+    onchange,
+    onadd,
+    onremove,
+    oncreate
   }: ComboboxProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onadd = $derived(onAdd ?? onaddLegacy);
-  const onchange = $derived(onChange ?? onchangeLegacy);
-  const onclose = $derived(onClose ?? oncloseLegacy);
-  const oncreate = $derived(onCreate ?? oncreateLegacy);
-  const oninput = $derived(onInput ?? oninputLegacy);
-  const onopen = $derived(onOpen ?? onopenLegacy);
-  const onremove = $derived(onRemove ?? onremoveLegacy);
-  const onselect = $derived(onSelect ?? onselectLegacy);
-
   let containerEl: HTMLDivElement | null = $state(null);
   let inputRef: ReturnType<typeof Input> | null = $state(null);
 
@@ -266,7 +248,7 @@
   function handleInput(val: string, event: Event) {
     inputValue = val;
     oninput?.(val);
-    inputEventProperties?.onInput?.(val, event);
+    inputEventProperties?.oninput?.(val, event);
     if (!open) {
       openDropdown();
     }
@@ -330,12 +312,12 @@
   function handleFocus(event: FocusEvent) {
     openDropdown();
     onfocus?.(event);
-    inputEventProperties?.onFocus?.(event);
+    inputEventProperties?.onfocus?.(event);
   }
 
   function handleBlur(event: FocusEvent) {
     onblur?.(event);
-    inputEventProperties?.onBlur?.(event);
+    inputEventProperties?.onblur?.(event);
   }
 
   function handleControlClick() {
@@ -400,10 +382,10 @@
         ariaAutocomplete="list"
         ariaControls={open ? listboxId : null}
         ariaActivedescendant={highlightedOptionId ?? null}
-        onInput={handleInput}
-        onKeyDown={handleKeydown}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
+        oninput={handleInput}
+        onkeydown={handleKeydown}
+        onfocus={handleFocus}
+        onblur={handleBlur}
       />
     </div>
     {#if typeof inputSuffix === 'function'}

package/dist/Combobox/properties.d.ts

@@ -61,26 +61,18 @@ export type OptionalComboboxProperties = {
 };
 export type ComboboxEventProperties = {
     onselect?: (item: ComboboxItem) => void;
-    onSelect?: (item: ComboboxItem) => void;
     oninput?: (value: string) => void;
-    onInput?: (value: string) => void;
     onopen?: () => void;
-    onOpen?: () => void;
     onclose?: () => void;
-    onClose?: () => void;
     onkeydown?: (event: KeyboardEvent) => void;
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
     /** Multi-select: fires whenever the selection changes (add, remove, or create). */
     onchange?: (selected: string[]) => void;
-    onChange?: (selected: string[]) => void;
     /** Multi-select: fires when a value is added. */
     onadd?: (value: string) => void;
-    onAdd?: (value: string) => void;
     /** Multi-select: fires when a value is removed. */
     onremove?: (value: string) => void;
-    onRemove?: (value: string) => void;
     /** Fires when the create row is chosen, with the trimmed query. */
     oncreate?: (value: string) => void;
-    onCreate?: (value: string) => void;
 };

package/dist/CommandMenu/CommandMenu.svelte

@@ -14,17 +14,11 @@
     testId,
     itemIcon,
     searchIcon,
-    onselect: onselectLegacy,
-    onSelect,
-    onclose: oncloseLegacy,
-    onClose,
+    onselect,
+    onclose,
     classes
   }: CommandMenuProperties = $props();
 
-  // Event-casing phase 1: both spellings accepted, the correct one wins.
-  const onclose = $derived(onClose ?? oncloseLegacy);
-  const onselect = $derived(onSelect ?? onselectLegacy);
-
   let query = $state('');
   let activeIndex = $state(0);
   let inputElement: HTMLInputElement | null = $state(null);