feat(blade-svelte): address friction fixes for TextInput, OTPInput and BottomSheet

- CB-039: add readOnly prop to TextInput via BaseInput
- CB-060: add spellCheck prop to TextInput via BaseInput
- CB-043: add autoCompleteSuggestionType 'newOtp' to OTPInput for non-Safari OTP auto-read
- CB-044: add onKeyDown prop to OTPInput for custom keyboard navigation
- CB-046: make BottomSheet isOpen $bindable and write back closed state
- add component tests for the new props

Co-authored-by: rohankokane-dev <rohan.kokane@razorpay.com>

Author: rzp-slash[bot]

packages/blade-svelte/src/components/BottomSheet/BottomSheet.svelte

@@ -42,7 +42,7 @@
   void getBottomSheetTemplateClasses();
 
   let {
-    isOpen = false,
+    isOpen = $bindable(false),
     onDismiss,
     children,
     initialFocusRef = null,
@@ -166,6 +166,7 @@
 
   function close(): void {
     if (isDismissible) {
+      isOpen = false;
       onDismiss?.();
     }
     returnFocus();

packages/blade-svelte/src/components/BottomSheet/__tests__/BottomSheet.test.ts

@@ -1,6 +1,7 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 import { describe, it, expect, vi, afterEach } from 'vitest';
 import BottomSheetFocusTestHarness from './BottomSheetFocusTestHarness.svelte';
+import BottomSheetBindableTestHarness from './BottomSheetBindableTestHarness.svelte';
 
 /* Spy on the prototype so the focus call is captured regardless of when the
  * target element mounts (the sheet portals + defers focus across two rAFs). */
@@ -56,4 +57,16 @@ describe('<BottomSheet /> focus management', () => {
     await waitFor(() => expect(focusSpy.mock.contexts).toContain(trigger));
     expect(focusOptionsFor(focusSpy, trigger)).toEqual({ preventScroll: true });
   });
+
+  it('writes isOpen back into the bound variable on dismiss (bind:isOpen)', async () => {
+    render(BottomSheetBindableTestHarness, { props: { isOpen: false } });
+
+    /* Open the sheet by setting the bound variable to true. */
+    await fireEvent.click(screen.getByTestId('open-sheet'));
+    await waitFor(() => expect(screen.getByTestId('bound-is-open')).toHaveTextContent('true'));
+
+    /* Escape dismisses the dismissible sheet — the bound `isOpen` must flip back. */
+    await fireEvent.keyDown(window, { key: 'Escape' });
+    await waitFor(() => expect(screen.getByTestId('bound-is-open')).toHaveTextContent('false'));
+  });
 });

packages/blade-svelte/src/components/BottomSheet/__tests__/BottomSheetBindableTestHarness.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import BottomSheet from '../BottomSheet.svelte';
+
+  let {
+    isOpen = false,
+    isDismissible = true,
+  }: {
+    isOpen?: boolean;
+    isDismissible?: boolean;
+  } = $props();
+</script>
+
+<span data-testid="bound-is-open">{String(isOpen)}</span>
+
+<button type="button" data-testid="open-sheet" onclick={() => (isOpen = true)}>open</button>
+<BottomSheet bind:isOpen {isDismissible}>
+  {#snippet children()}
+    <button type="button" data-testid="inside">inside</button>
+  {/snippet}
+</BottomSheet>

packages/blade-svelte/src/components/Input/BaseInput/BaseInput.svelte

@@ -54,6 +54,8 @@
     onBlur,
     isDisabled = false,
     isRequired = false,
+    readOnly = false,
+    spellCheck,
     leadingIcon,
     prefix,
     trailingInteractionElement,
@@ -357,6 +359,8 @@
               value={currentValue}
               disabled={effectiveDisabled || undefined}
               required={isRequired || undefined}
+              readonly={readOnly || undefined}
+              spellcheck={spellCheck}
               maxlength={maxCharacters}
               tabindex={tabIndex}
               autocomplete={domAutoComplete}
@@ -383,6 +387,8 @@
               value={currentValue}
               disabled={effectiveDisabled || undefined}
               required={isRequired || undefined}
+              readonly={readOnly || undefined}
+              spellcheck={spellCheck}
               maxlength={maxCharacters}
               tabindex={tabIndex}
               autocomplete={domAutoComplete}

packages/blade-svelte/src/components/Input/BaseInput/types.ts

@@ -38,6 +38,7 @@ export type AutoCompleteSuggestionType =
   | 'password'
   | 'newPassword'
   | 'oneTimeCode'
+  | 'newOtp'
   | 'telephone'
   | 'postalCode'
   | 'countryName'
@@ -156,6 +157,10 @@ export type BaseInputCommonProps = FormInputLabelProps &
     isDisabled?: boolean;
     /** Marks the input required (adds `required`). */
     isRequired?: boolean;
+    /** Makes the input read-only (adds `readonly`, keeps it focusable). */
+    readOnly?: boolean;
+    /** Controls the browser spellcheck on the input. */
+    spellCheck?: boolean;
     /** Leading icon component. */
     leadingIcon?: IconComponent;
     /** Prefix text rendered at the start of the input. */

packages/blade-svelte/src/components/Input/BaseInput/utils.ts

@@ -101,6 +101,7 @@ const autoCompleteSuggestionTypeMap: Record<AutoCompleteSuggestionType, string>
   password: 'current-password',
   newPassword: 'new-password',
   oneTimeCode: 'one-time-code',
+  newOtp: 'one-time-code',
   telephone: 'tel',
   postalCode: 'postal-code',
   countryName: 'country',

packages/blade-svelte/src/components/Input/OTPInput/OTPInput.svelte

@@ -31,6 +31,7 @@
     onFocus,
     onBlur,
     onOTPFilled,
+    onKeyDown,
     value,
     isDisabled = false,
     autoFocus = false,
@@ -147,6 +148,7 @@
     { key, code, event }: Parameters<FormInputOnKeyDownEvent>[0],
     currentOtpIndex: number,
   ): void => {
+    onKeyDown?.({ name, key, code, event, inputIndex: currentOtpIndex });
     if (key === 'Backspace' || code === 'Backspace' || code === 'Delete' || key === 'Delete') {
       event.preventDefault?.();
       if (isControlled ? value?.[currentOtpIndex] : otpValue[currentOtpIndex]) {

packages/blade-svelte/src/components/Input/OTPInput/__tests__/OTPInput.test.ts

@@ -0,0 +1,40 @@
+import { render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import OTPInput from '../OTPInput.svelte';
+
+async function findFields(): Promise<HTMLInputElement[]> {
+  return screen.findAllByRole('textbox');
+}
+
+describe('<OTPInput />', () => {
+  it('fires onKeyDown with the field index', async () => {
+    const user = userEvent.setup();
+    const onKeyDown = vi.fn();
+    render(OTPInput, {
+      props: { label: 'OTP', otpLength: 6, onKeyDown },
+    });
+
+    const fields = await findFields();
+    await user.click(fields[2]);
+    await user.keyboard('{ArrowRight}');
+
+    await waitFor(() => {
+      const call = onKeyDown.mock.calls.find(([payload]) => payload.event instanceof KeyboardEvent);
+      expect(call).toBeDefined();
+      expect(call[0].inputIndex).toBe(2);
+      expect(call[0].key).toBe('ArrowRight');
+    });
+  });
+
+  it('maps autoCompleteSuggestionType=newOtp to the one-time-code autocomplete', async () => {
+    render(OTPInput, {
+      props: { accessibilityLabel: 'OTP', otpLength: 6, autoCompleteSuggestionType: 'newOtp' },
+    });
+
+    const fields = await findFields();
+    // The first field (and every field) receives the autocomplete value mapped
+    // from `newOtp` → `one-time-code`.
+    expect(fields[0]).toHaveAttribute('autocomplete', 'one-time-code');
+  });
+});

packages/blade-svelte/src/components/Input/OTPInput/types.ts

@@ -16,6 +16,15 @@ export type OTPInputOnEventWithIndex = (event: {
   inputIndex: number;
 }) => void;
 
+/** Event payload for OTP `onKeyDown`, including the field index. */
+export type OTPInputOnKeyDownEvent = (event: {
+  name?: string;
+  key?: string;
+  code?: string;
+  event: KeyboardEvent;
+  inputIndex: number;
+}) => void;
+
 type OTPInputPropsWithLabel = {
   /** Label shown above/beside the OTP fields. */
   label: string;
@@ -72,7 +81,9 @@ interface OTPInputCommonProps extends StyledPropsBlade, DataAnalyticsAttribute {
   /** Masks the entered characters (renders `password` after entry). */
   isMasked?: boolean;
   /** Autocomplete suggestion type. @default 'oneTimeCode' */
-  autoCompleteSuggestionType?: 'none' | 'oneTimeCode';
+  autoCompleteSuggestionType?: 'none' | 'oneTimeCode' | 'newOtp';
+  /** KeyDown callback for custom keyboard navigation between fields. */
+  onKeyDown?: OTPInputOnKeyDownEvent;
   /** Input size. @default 'medium' */
   size?: BaseInputSize;
   /** Test ID for the outer wrapper. */

packages/blade-svelte/src/components/Input/TextInput/TextInput.svelte

@@ -29,6 +29,8 @@
     onKeyDown,
     isDisabled = false,
     isRequired = false,
+    readOnly = false,
+    spellCheck,
     prefix,
     suffix,
     maxCharacters,
@@ -171,6 +173,8 @@
   {onKeyDown}
   {isDisabled}
   {isRequired}
+  {readOnly}
+  {spellCheck}
   {prefix}
   {suffix}
   {leadingIcon}