@toptal/picasso-switch 100.0.0 → 101.0.0

package/dist-package/src/Switch/Switch.d.ts

@@ -10,6 +10,11 @@ export interface Props extends BaseProps, TextLabelProps, Omit<ButtonHTMLAttribu
     label?: ReactNode;
     /** Callback invoked when `Switch` changed its value */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    /** Testids of the `Switch` internal elements. The top-level `data-testid` stays on the `[role="switch"]` element */
+    testIds?: {
+        /** Testid of the visually hidden native `<input>` (rendered as a sibling of the `[role="switch"]` element) */
+        input?: string;
+    };
 }
 export declare const Switch: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export default Switch;

package/dist-package/src/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEvE,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpE,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;CACV;AAED,eAAO,MAAM,MAAM,iFAmGjB,CAAA;AAIF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEvE,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpE,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;IACT,oHAAoH;IACpH,OAAO,CAAC,EAAE;QACR,8GAA8G;QAC9G,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;CACF;AAED,eAAO,MAAM,MAAM,iFAsGjB,CAAA;AAIF,eAAe,MAAM,CAAA"}

package/dist-package/src/Switch/Switch.js

@@ -11,22 +11,25 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { Switch as BaseUISwitch } from '@base-ui/react/switch';
 import { useBaseUiId } from '@base-ui/react/internals/useBaseUiId';
-import { toReactChangeEvent } from '@toptal/picasso-shared';
+import { toReactChangeEvent, useInputTestId } from '@toptal/picasso-shared';
 import React, { forwardRef } from 'react';
 import { FormControlLabel } from '@toptal/picasso-form-label';
 import { twMerge } from '@toptal/picasso-tailwind-merge';
 export const Switch = forwardRef(function Switch(props, ref) {
     var _a;
     const { onChange, disabled = false, label, id, className, style, checked, titleCase, value, color: _color, // eslint-disable-line @typescript-eslint/no-unused-vars
-    'data-testid': dataTestId } = props, rest = __rest(props, ["onChange", "disabled", "label", "id", "className", "style", "checked", "titleCase", "value", "color", 'data-testid']);
+    testIds } = props, rest = __rest(props, ["onChange", "disabled", "label", "id", "className", "style", "checked", "titleCase", "value", "color", "testIds"]);
     const handleCheckedChange = (nextChecked, { event }) => onChange === null || onChange === void 0 ? void 0 : onChange(toReactChangeEvent(event), nextChecked);
     const rootRest = rest;
     // Name the control via `aria-labelledby` so it is the single label-associated
     // node (see FormControlLabel `labelId`), only when there is a label.
     const generatedLabelId = useBaseUiId();
     const labelId = label ? generatedLabelId : undefined;
+    // Base UI renders the hidden input beside the root and exposes it only
+    // through `inputRef`, so the testid is stamped on it imperatively
+    const inputTestIdRef = useInputTestId(testIds === null || testIds === void 0 ? void 0 : testIds.input);
     const switchElement = (React.createElement("span", { className: 'relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip-margin:6px]' },
-        React.createElement(BaseUISwitch.Root, Object.assign({}, rootRest, { ref: ref, "aria-labelledby": (_a = rootRest['aria-labelledby']) !== null && _a !== void 0 ? _a : labelId, checked: checked, className: twMerge('w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group', 'cursor-pointer outline-none data-[disabled]:cursor-default', className), style: style, disabled: disabled, id: id, value: value === undefined ? undefined : String(value), onCheckedChange: handleCheckedChange, "data-testid": label ? undefined : dataTestId }),
+        React.createElement(BaseUISwitch.Root, Object.assign({}, rootRest, { ref: ref, inputRef: inputTestIdRef, "aria-labelledby": (_a = rootRest['aria-labelledby']) !== null && _a !== void 0 ? _a : labelId, checked: checked, className: twMerge('w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group', 'cursor-pointer outline-none data-[disabled]:cursor-default', className), style: style, disabled: disabled, id: id, value: value === undefined ? undefined : String(value), onCheckedChange: handleCheckedChange }),
             React.createElement("span", { className: twMerge('w-full h-full border border-solid bg-gray-600 border-gray-600 opacity-100 rounded-[12px]', 'transition-colors duration-300 ease-out', 'group-data-[checked]:bg-blue-500 group-data-[checked]:border-blue-500', 'group-data-[disabled]:opacity-40', 'group-[[data-disabled][data-unchecked]]:bg-black') }),
             React.createElement(BaseUISwitch.Thumb, { className: twMerge('w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px]', 'transition-transform duration-150 ease-out', 'group-[:hover:not([data-disabled])]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]', 'group-focus-visible:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]', 'group-data-[checked]:translate-x-[16px]') }))));
     if (!label) {
@@ -35,7 +38,7 @@ export const Switch = forwardRef(function Switch(props, ref) {
     return (React.createElement(FormControlLabel, { classes: {
             root: 'items-start text-lg',
             label: 'ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em-0.5em+1px)]',
-        }, control: switchElement, labelId: labelId, disabled: disabled, label: label, titleCase: titleCase, "data-testid": dataTestId }));
+        }, control: switchElement, labelId: labelId, disabled: disabled, label: label, titleCase: titleCase }));
 });
 Switch.displayName = 'Switch';
 export default Switch;

package/dist-package/src/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAA;AAElE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAmBxD,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAA2B,SAAS,MAAM,CACxE,KAAK,EACL,GAAG;;IAEH,MAAM,EACJ,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,EAAE,EACF,SAAS,EACT,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EACL,KAAK,EAAE,MAAM,EAAE,wDAAwD;IACvE,aAAa,EAAE,UAAU,KAEvB,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,sHAaL,CAAQ,CAAA;IAET,MAAM,mBAAmB,GAA+C,CACtE,WAAW,EACX,EAAE,KAAK,EAAE,EACT,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,kBAAkB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAA;IAEvD,MAAM,QAAQ,GAAG,IAShB,CAAA;IAED,8EAA8E;IAC9E,qEAAqE;IACrE,MAAM,gBAAgB,GAAG,WAAW,EAAE,CAAA;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAA;IAEpD,MAAM,aAAa,GAAG,CACpB,8BAAM,SAAS,EAAC,qFAAqF;QACnG,oBAAC,YAAY,CAAC,IAAI,oBACZ,QAAQ,IACZ,GAAG,EAAE,GAAG,qBACS,MAAA,QAAQ,CAAC,iBAAiB,CAAC,mCAAI,OAAO,EACvD,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,OAAO,CAChB,6FAA6F,EAC7F,4DAA4D,EAC5D,SAAS,CACV,EACD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACtD,eAAe,EAAE,mBAAmB,iBACvB,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU;YAE3C,8BACE,SAAS,EAAE,OAAO,CAChB,0FAA0F,EAC1F,yCAAyC,EACzC,uEAAuE,EACvE,kCAAkC,EAClC,kDAAkD,CACnD,GACD;YACF,oBAAC,YAAY,CAAC,KAAK,IACjB,SAAS,EAAE,OAAO,CAChB,4GAA4G,EAC5G,4CAA4C,EAC5C,6EAA6E,EAC7E,6DAA6D,EAC7D,yCAAyC,CAC1C,GACD,CACgB,CACf,CACR,CAAA;IAED,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,aAAa,CAAA;IACtB,CAAC;IAED,OAAO,CACL,oBAAC,gBAAgB,IACf,OAAO,EAAE;YACP,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,yDAAyD;SACjE,EACD,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,iBACP,UAAU,GACvB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-switch",
-  "version": "100.0.0",
+  "version": "101.0.0",
   "description": "Toptal UI components library - Switch",
   "publishConfig": {
     "access": "public"
@@ -19,8 +19,8 @@
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
     "@base-ui/react": "^1.6.0",
-    "@toptal/picasso-form-label": "100.0.0",
-    "@toptal/picasso-shared": "100.0.0"
+    "@toptal/picasso-form-label": "100.0.1",
+    "@toptal/picasso-shared": "100.1.0"
   },
   "sideEffects": [
     "**/styles.ts",
@@ -36,9 +36,9 @@
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
+    "@toptal/picasso-tailwind-merge": "100.0.0",
     "@toptal/picasso-provider": "100.0.0",
-    "@toptal/picasso-test-utils": "100.0.0",
-    "@toptal/picasso-tailwind-merge": "100.0.0"
+    "@toptal/picasso-test-utils": "100.0.1"
   },
   "files": [
     "dist-package/**",

package/src/Switch/Switch.tsx

@@ -1,7 +1,7 @@
 import { Switch as BaseUISwitch } from '@base-ui/react/switch'
 import { useBaseUiId } from '@base-ui/react/internals/useBaseUiId'
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
-import { toReactChangeEvent } from '@toptal/picasso-shared'
+import { toReactChangeEvent, useInputTestId } from '@toptal/picasso-shared'
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 import { FormControlLabel } from '@toptal/picasso-form-label'
@@ -22,6 +22,11 @@ export interface Props
     event: React.ChangeEvent<HTMLInputElement>,
     checked: boolean
   ) => void
+  /** Testids of the `Switch` internal elements. The top-level `data-testid` stays on the `[role="switch"]` element */
+  testIds?: {
+    /** Testid of the visually hidden native `<input>` (rendered as a sibling of the `[role="switch"]` element) */
+    input?: string
+  }
 }
 
 export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
@@ -39,7 +44,7 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
     titleCase,
     value,
     color: _color, // eslint-disable-line @typescript-eslint/no-unused-vars
-    'data-testid': dataTestId,
+    testIds,
     ...rest
   } = props
 
@@ -64,11 +69,16 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
   const generatedLabelId = useBaseUiId()
   const labelId = label ? generatedLabelId : undefined
 
+  // Base UI renders the hidden input beside the root and exposes it only
+  // through `inputRef`, so the testid is stamped on it imperatively
+  const inputTestIdRef = useInputTestId(testIds?.input)
+
   const switchElement = (
     <span className='relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip-margin:6px]'>
       <BaseUISwitch.Root
         {...rootRest}
         ref={ref}
+        inputRef={inputTestIdRef}
         aria-labelledby={rootRest['aria-labelledby'] ?? labelId}
         checked={checked}
         className={twMerge(
@@ -81,7 +91,6 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
         id={id}
         value={value === undefined ? undefined : String(value)}
         onCheckedChange={handleCheckedChange}
-        data-testid={label ? undefined : dataTestId}
       >
         <span
           className={twMerge(
@@ -120,7 +129,6 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
       disabled={disabled}
       label={label}
       titleCase={titleCase}
-      data-testid={dataTestId}
     />
   )
 })

package/src/Switch/__snapshots__/test.tsx.snap

@@ -1,49 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Switch behaves correctly when interacting 1`] = `
-<div
-  class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-pointer items-start text-lg"
+<span
+  aria-checked="true"
+  aria-labelledby="base-ui-:rk:"
+  class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer outline-none data-[disabled]:cursor-default"
+  data-checked=""
   data-testid="switch"
+  id="base-ui-:rl:"
+  role="switch"
+  tabindex="0"
 >
   <span
-    class="relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip"
-  >
-    <span
-      aria-checked="true"
-      aria-labelledby="base-ui-:rk:"
-      class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer outline-none data-[disabled]:cursor-default"
-      data-checked=""
-      id="base-ui-:rl:"
-      role="switch"
-      tabindex="0"
-    >
-      <span
-        class="w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-data-[checked]:bg-blue group-data-[checked]:border-blue group-data-[disabled]:opacity group-[[data-disabled][data-unchecked]]:bg-black"
-      />
-      <span
-        class="w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:hover:not([data-disabled])]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)] group-focus-visible:shadow group-data-[checked]:translate-x"
-        data-checked=""
-      />
-    </span>
-    <input
-      aria-hidden="true"
-      id="base-ui-:rm:"
-      style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
-      tabindex="-1"
-      type="checkbox"
-    />
-  </span>
+    class="w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-data-[checked]:bg-blue group-data-[checked]:border-blue group-data-[disabled]:opacity group-[[data-disabled][data-unchecked]]:bg-black"
+  />
   <span
-    class="inline-block leading-[1em] mb-0 text-graphite ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
-    id="base-ui-:rk:"
-  >
-    <span
-      class="align-top text-[0.8125rem]"
-    >
-      Switch
-    </span>
-  </span>
-</div>
+    class="w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:hover:not([data-disabled])]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)] group-focus-visible:shadow group-data-[checked]:translate-x"
+    data-checked=""
+  />
+</span>
 `;
 
 exports[`Switch renders default Switch without label 1`] = `
@@ -84,52 +59,58 @@ exports[`Switch renders default Switch without label 1`] = `
 `;
 
 exports[`Switch renders disabled state 1`] = `
-<div
-  class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-default items-start text-lg"
-  data-testid="switch"
->
-  <span
-    class="relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip"
-    disabled=""
+<div>
+  <div
+    class="flex-1 box-border [:where(&)_*]:font-sans [&_*]:[box-sizing:inherit] [&_*::before]:[box-sizing:inherit] [&_*::after]:[box-sizing:inherit]"
   >
-    <span
-      aria-checked="false"
-      aria-disabled="true"
-      aria-labelledby="base-ui-:r8:"
-      class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer outline-none data-[disabled]:cursor-default"
-      data-disabled=""
-      data-unchecked=""
-      id="base-ui-:r9:"
-      role="switch"
-      tabindex="-1"
+    <div
+      class="inline-flex max-w align-middle -webkit-tap-highlight-color mx-0 cursor-default items-start text-lg"
     >
       <span
-        class="w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-data-[checked]:bg-blue group-data-[checked]:border-blue group-data-[disabled]:opacity group-[[data-disabled][data-unchecked]]:bg-black"
-      />
+        class="relative inline-flex shrink-0 align-middle overflow-clip [overflow-clip"
+        disabled=""
+      >
+        <span
+          aria-checked="false"
+          aria-disabled="true"
+          aria-labelledby="base-ui-:r8:"
+          class="w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group cursor-pointer outline-none data-[disabled]:cursor-default"
+          data-disabled=""
+          data-testid="switch"
+          data-unchecked=""
+          id="base-ui-:r9:"
+          role="switch"
+          tabindex="-1"
+        >
+          <span
+            class="w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-data-[checked]:bg-blue group-data-[checked]:border-blue group-data-[disabled]:opacity group-[[data-disabled][data-unchecked]]:bg-black"
+          />
+          <span
+            class="w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:hover:not([data-disabled])]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)] group-focus-visible:shadow group-data-[checked]:translate-x"
+            data-disabled=""
+            data-unchecked=""
+          />
+        </span>
+        <input
+          aria-hidden="true"
+          disabled=""
+          id="base-ui-:ra:"
+          style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
+          tabindex="-1"
+          type="checkbox"
+        />
+      </span>
       <span
-        class="w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:hover:not([data-disabled])]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)] group-focus-visible:shadow group-data-[checked]:translate-x"
-        data-disabled=""
-        data-unchecked=""
-      />
-    </span>
-    <input
-      aria-hidden="true"
-      disabled=""
-      id="base-ui-:ra:"
-      style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;"
-      tabindex="-1"
-      type="checkbox"
-    />
-  </span>
-  <span
-    class="inline-block leading-[1em] mb-0 text-graphite pointer-events ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
-    id="base-ui-:r8:"
-  >
-    <span
-      class="align-top text-[0.8125rem]"
-    >
-      Disabled
-    </span>
-  </span>
+        class="inline-block leading-[1em] mb-0 text-graphite pointer-events ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
+        id="base-ui-:r8:"
+      >
+        <span
+          class="align-top text-[0.8125rem]"
+        >
+          Disabled
+        </span>
+      </span>
+    </div>
+  </div>
 </div>
 `;

package/src/Switch/test.tsx

@@ -33,36 +33,36 @@ describe('Switch', () => {
   })
 
   it('renders default Switch with label', () => {
-    const { getByTestId } = renderSwitch({ label: 'A Switch' })
+    const { getByRole } = renderSwitch({ label: 'A Switch' })
 
-    expect(getByTestId('switch')).toHaveTextContent('A Switch')
+    expect(getByRole('switch', { name: 'A Switch' })).toBeVisible()
   })
 
   it('renders disabled state', () => {
-    const { getByTestId } = renderSwitch({
+    const { container } = renderSwitch({
       disabled: true,
       label: 'Disabled',
     })
 
-    expect(getByTestId('switch')).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
 
   it('transforms text to title case when Picasso titleCase property is true', () => {
-    const { getByTestId } = renderSwitch(
+    const { getByText } = renderSwitch(
       { label: 'abc ac4' },
       { titleCase: true }
     )
 
-    expect(getByTestId('switch')).toHaveTextContent('Abc Ac4')
+    expect(getByText('Abc Ac4')).toBeVisible()
   })
 
   it('transforms text to title case when Picasso titleCase property is true but the component property overrides it', () => {
-    const { getByTestId } = renderSwitch(
+    const { getByText } = renderSwitch(
       { label: 'abc dp3', titleCase: false },
       { titleCase: true }
     )
 
-    expect(getByTestId('switch')).toHaveTextContent('abc dp3')
+    expect(getByText('abc dp3')).toBeVisible()
   })
 
   it('behaves correctly when interacting', () => {
@@ -123,4 +123,34 @@ describe('Switch', () => {
       })
     })
   })
+
+  describe('testIds', () => {
+    it('keeps the top-level data-testid on the role element, with and without label', () => {
+      const labelled = render(<Switch data-testid='switch' label='A Switch' />)
+
+      expect(labelled.getByTestId('switch')).toBe(labelled.getByRole('switch'))
+
+      labelled.unmount()
+
+      const bare = render(<Switch data-testid='switch' />)
+
+      expect(bare.getByTestId('switch')).toBe(bare.getByRole('switch'))
+    })
+
+    it('places testIds.input on the visually hidden native input', () => {
+      const { getByTestId, getByRole } = render(
+        <Switch label='A Switch' testIds={{ input: 'switch-input' }} />
+      )
+
+      const input = getByTestId('switch-input')
+
+      expect(input).toBeInstanceOf(HTMLInputElement)
+      // the input is rendered beside the role element, not inside it
+      expect(getByRole('switch')).not.toContainElement(input)
+
+      fireEvent.click(getByRole('switch'))
+
+      expect(input).toBeChecked()
+    })
+  })
 })