@transferwise/components 0.0.0-experimental-6bea55b → 0.0.0-experimental-d4d4068

package/build/main.css

@@ -2682,6 +2682,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/build/styles/listItem/ListItem.css

@@ -62,6 +62,17 @@
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/build/styles/main.css

@@ -2682,6 +2682,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/build/switch/Switch.js

@@ -32,7 +32,7 @@ const Switch = props => {
       'np-switch--checked': checked,
       disabled
     }, className),
-    tabIndex: 0,
+    tabIndex: disabled ? -1 : 0,
     role: "switch",
     "aria-checked": checked,
     "aria-label": ariaLabel,

package/build/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;;;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAM,GAAA,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGV,KAAK;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE;AACtBL,MAAAA,OAAO,EAAE;AACX;GACD;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEgB,eAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,cAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC;KAChB,CAAA,eAAAkB,cAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA;AAAA,KACnD,CAAA;AAAA,GAAM,CAAC;AAEX;;;;"}
+{"version":3,"file":"Switch.js","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={disabled ? -1 : 0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;;;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAM,GAAA,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGV,KAAK;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE;AACtBL,MAAAA,OAAO,EAAE;AACX;GACD;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEgB,eAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,SAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAET,QAAQ,GAAG,EAAE,GAAG,CAAE;AAC5BU,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,cAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC;KAChB,CAAA,eAAAkB,cAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA;AAAA,KACnD,CAAA;AAAA,GAAM,CAAC;AAEX;;;;"}

package/build/switch/Switch.mjs

@@ -28,7 +28,7 @@ const Switch = props => {
       'np-switch--checked': checked,
       disabled
     }, className),
-    tabIndex: 0,
+    tabIndex: disabled ? -1 : 0,
     role: "switch",
     "aria-checked": checked,
     "aria-label": ariaLabel,

package/build/switch/Switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.mjs","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAM,GAAA,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGV,KAAK;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE;AACtBL,MAAAA,OAAO,EAAE;AACX;GACD;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEgB,IAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAE,CAAE;AACZC,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,GAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC;KAChB,CAAA,eAAAkB,GAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA;AAAA,KACnD,CAAA;AAAA,GAAM,CAAC;AAEX;;;;"}
+{"version":3,"file":"Switch.mjs","sources":["../../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport type { KeyboardEventHandler, MouseEvent } from 'react';\n\nimport type { CommonProps } from '../common';\nimport { useInputAttributes } from '../inputs/contexts';\n\nexport type SwitchProps = CommonProps & {\n  /**\n   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)\n   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.\n   */\n  'aria-label'?: string;\n  /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */\n  'aria-labelledby'?: string;\n  /** Whether the switch is checked or not */\n  checked?: boolean;\n  disabled?: boolean;\n  /** ID to apply to the switch container */\n  id?: string;\n  /** Function called when the switch is toggled */\n  onClick: (event?: MouseEvent<HTMLSpanElement>) => void;\n};\n\nconst Switch = (props: SwitchProps) => {\n  const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n  const {\n    checked,\n    className,\n    id = inputAttributes.id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledbyProp,\n    onClick,\n    disabled,\n  } = props;\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      onClick();\n    }\n  };\n\n  const ariaLabelledby =\n    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];\n\n  return (\n    <span\n      className={clsx(\n        'np-switch',\n        {\n          'np-switch--unchecked': !checked,\n          'np-switch--checked': checked,\n          disabled,\n        },\n        className,\n      )}\n      tabIndex={disabled ? -1 : 0}\n      role=\"switch\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      {...inputAttributes}\n      aria-labelledby={ariaLabelledby}\n      id={id}\n      aria-disabled={disabled}\n      onClick={!disabled ? onClick : undefined}\n      onKeyDown={!disabled ? handleKeyDown : undefined}\n    >\n      <span className=\"np-switch--thumb\" />\n      <input type=\"checkbox\" checked={checked} readOnly />\n    </span>\n  );\n};\n\nexport default Switch;\n"],"names":["Switch","props","inputAttributes","useInputAttributes","nonLabelable","checked","className","id","ariaLabel","ariaLabelledbyProp","onClick","disabled","handleKeyDown","event","key","preventDefault","ariaLabelledby","undefined","_jsxs","clsx","tabIndex","role","onKeyDown","children","_jsx","type","readOnly"],"mappings":";;;;AAuBMA,MAAAA,MAAM,GAAIC,KAAkB,IAAI;EACpC,MAAMC,eAAe,GAAGC,kBAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE;AAAM,GAAA,CAAC;EAElE,MAAM;IACJC,OAAO;IACPC,SAAS;IACTC,EAAE,GAAGL,eAAe,CAACK,EAAE;AACvB,IAAA,YAAY,EAAEC,SAAS;AACvB,IAAA,iBAAiB,EAAEC,kBAAkB;IACrCC,OAAO;AACPC,IAAAA;AAAQ,GACT,GAAGV,KAAK;EAET,MAAMW,aAAa,GAA0BC,KAAK,IAAI;AACpD,IAAA,IAAIA,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MACrBD,KAAK,CAACE,cAAc,EAAE;AACtBL,MAAAA,OAAO,EAAE;AACX;GACD;AAED,EAAA,MAAMM,cAAc,GAClB,CAACR,SAAS,GAAGS,SAAS,GAAGR,kBAAkB,KAAKP,eAAe,CAAC,iBAAiB,CAAC;AAEpF,EAAA,oBACEgB,IAAA,CAAA,MAAA,EAAA;AACEZ,IAAAA,SAAS,EAAEa,IAAI,CACb,WAAW,EACX;MACE,sBAAsB,EAAE,CAACd,OAAO;AAChC,MAAA,oBAAoB,EAAEA,OAAO;AAC7BM,MAAAA;KACD,EACDL,SAAS,CACT;AACFc,IAAAA,QAAQ,EAAET,QAAQ,GAAG,EAAE,GAAG,CAAE;AAC5BU,IAAAA,IAAI,EAAC,QAAQ;AACb,IAAA,cAAA,EAAchB,OAAQ;AACtB,IAAA,YAAA,EAAYG,SAAU;AAAA,IAAA,GAClBN,eAAe;AACnB,IAAA,iBAAA,EAAiBc,cAAe;AAChCT,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,eAAA,EAAeI,QAAS;AACxBD,IAAAA,OAAO,EAAE,CAACC,QAAQ,GAAGD,OAAO,GAAGO,SAAU;AACzCK,IAAAA,SAAS,EAAE,CAACX,QAAQ,GAAGC,aAAa,GAAGK,SAAU;AAAAM,IAAAA,QAAA,gBAEjDC,GAAA,CAAA,MAAA,EAAA;AAAMlB,MAAAA,SAAS,EAAC;KAChB,CAAA,eAAAkB,GAAA,CAAA,OAAA,EAAA;AAAOC,MAAAA,IAAI,EAAC,UAAU;AAACpB,MAAAA,OAAO,EAAEA,OAAQ;MAACqB,QAAQ,EAAA;AAAA,KACnD,CAAA;AAAA,GAAM,CAAC;AAEX;;;;"}

package/build/types/listItem/ListItem.d.ts

@@ -3,8 +3,10 @@ import { ListItemIconButtonProps } from './ListItemIconButton';
 import { ListItemCheckboxProps } from './ListItemCheckbox';
 import { ListItemNavigationProps } from './ListItemNavigation';
 import { ListItemButtonProps } from './ListItemButton';
+import { ListItemRadioProps } from './ListItemRadio';
+import { ListItemSwitchProps } from './ListItemSwitch';
 export type ListItemTypes = 'non-interactive' | 'navigation' | 'radio' | 'checkbox' | 'switch' | 'button' | 'icon-button';
-export type ListItemControlProps = ListItemNavigationProps | ListItemCheckboxProps | ListItemButtonProps | ListItemIconButtonProps;
+export type ListItemControlProps = ListItemNavigationProps | ListItemCheckboxProps | ListItemButtonProps | ListItemIconButtonProps | ListItemRadioProps | ListItemSwitchProps;
 export type Props = {
     as?: 'li' | 'div' | 'span';
     inverted?: boolean;
@@ -24,13 +26,11 @@ export type ListItemContextData = {
     setControlType: (type: ListItemTypes) => void;
     setControlProps: (props: ListItemControlProps) => void;
     ids: {
-        title: string;
-        subtitle?: string;
-        valueTitle?: string;
-        valueSubtitle?: string;
-        additionalInfo?: string;
+        label: string;
+        additionalInfo: string;
+        value: string;
         control: string;
-        prompt?: string;
+        prompt: string;
     };
     props: Pick<Props, 'disabled' | 'inverted'>;
 };
@@ -42,10 +42,11 @@ export declare const ListItem: {
     AvatarLayout: ({ className, size, ...props }: import("./ListItemMedia").ListItemAvatarLayoutProps) => import("react").JSX.Element;
     AdditionalInfo: ({ children, action }: import("./ListItemAdditionalInfo").ListItemAdditionalInfoProps) => import("react").JSX.Element;
     Checkbox: (props: ListItemCheckboxProps) => import("react").JSX.Element;
+    Radio: (props: ListItemRadioProps) => import("react").JSX.Element;
     IconButton: (props: ListItemIconButtonProps) => import("react").JSX.Element;
     Navigation: ({ href, ...props }: ListItemNavigationProps) => import("react").JSX.Element;
     Button: ({ priority, partiallyInteractive, ...props }: ListItemButtonProps) => import("react").JSX.Element;
-    Switch: (props: import("..").SwitchProps) => import("react").JSX.Element;
+    Switch: (props: ListItemSwitchProps) => import("react").JSX.Element;
     Prompt: ({ type, children, action }: import("./prompt/Prompt").ListItemPromptProps) => import("react").JSX.Element;
 };
 export default ListItem;

package/build/types/listItem/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAIV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAY,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAc,MAAM,sBAAsB,CAAC;AAE3E,OAAO,EAAU,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAO/D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GAEvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,CAAC;AAE5B,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;CAC7C,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;6JAclB,KAAK;;;;;;;;;;;CAoJP,CAAC;AAqFF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,SAAS,EAIV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAc,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAC3E,OAAO,EAAY,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAc,MAAM,sBAAsB,CAAC;AAE3E,OAAO,EAAU,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAS,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAU,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAM/D,MAAM,MAAM,aAAa,GACrB,iBAAiB,GACjB,YAAY,GACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,oBAAoB,GAC5B,uBAAuB,GAEvB,qBAAqB,GACrB,mBAAmB,GACnB,uBAAuB,GACvB,kBAAkB,GAClB,mBAAmB,CAAC;AAExB,MAAM,MAAM,KAAK,GAAG;IAClB,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,GAAG,EAAE;QACH,KAAK,EAAE,MAAM,CAAC;QACd,cAAc,EAAE,MAAM,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC,CAAC;CAC7C,CAAC;AAIF,eAAO,MAAM,eAAe,8CAA2C,CAAC;AAExE,eAAO,MAAM,QAAQ;6JAclB,KAAK;;;;;;;;;;;;CAgHP,CAAC;AAsFF,eAAe,QAAQ,CAAC"}

package/build/types/listItem/ListItemNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemNavigation.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF,eAAO,MAAM,UAAU,GAAuB,oBAA0B,uBAAuB,gCAe9F,CAAC"}
+{"version":3,"file":"ListItemNavigation.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemNavigation.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC;AAEvF,eAAO,MAAM,UAAU,GAAuB,oBAA0B,uBAAuB,gCAkB9F,CAAC"}

package/build/types/listItem/ListItemRadio.d.ts

@@ -0,0 +1,4 @@
+import { RadioButtonProps } from '../common/RadioButton/RadioButton';
+export type ListItemRadioProps = Omit<RadioButtonProps, 'disabled'>;
+export declare const Radio: (props: ListItemRadioProps) => import("react").JSX.Element;
+//# sourceMappingURL=ListItemRadio.d.ts.map

package/build/types/listItem/ListItemRadio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemRadio.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemRadio.tsx"],"names":[],"mappings":"AAAA,OAAoB,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAGlF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;AAEpE,eAAO,MAAM,KAAK,GAAa,OAAO,kBAAkB,gCAIvD,CAAC"}

package/build/types/listItem/ListItemSwitch.d.ts

@@ -1,3 +1,4 @@
 import { SwitchProps } from '../switch';
-export declare const Switch: (props: SwitchProps) => import("react").JSX.Element;
+export type ListItemSwitchProps = Omit<SwitchProps, 'disabled'>;
+export declare const Switch: (props: ListItemSwitchProps) => import("react").JSX.Element;
 //# sourceMappingURL=ListItemSwitch.d.ts.map

package/build/types/listItem/ListItemSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemSwitch.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,WAAW,EAAE,MAAM,WAAW,CAAC;AAG/D,eAAO,MAAM,MAAM,GAAa,OAAO,WAAW,gCAIjD,CAAC"}
+{"version":3,"file":"ListItemSwitch.d.ts","sourceRoot":"","sources":["../../../src/listItem/ListItemSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,WAAW,EAAE,MAAM,WAAW,CAAC;AAG/D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;AAEhE,eAAO,MAAM,MAAM,GAAa,OAAO,mBAAmB,gCAIzD,CAAC"}

package/build/types/listItem/useItemControl.d.ts

@@ -1,5 +1,5 @@
 import { ListItemControlProps, ListItemTypes } from './ListItem';
-export declare function useItemControl(controlType: ListItemTypes, controlProps?: ListItemControlProps): {
+export declare function useItemControl(controlType: ListItemTypes, controlProps: ListItemControlProps): {
     baseItemProps: Pick<import("./ListItem").Props, "disabled" | "inverted">;
 };
 //# sourceMappingURL=useItemControl.d.ts.map

package/build/types/listItem/useItemControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useItemControl.d.ts","sourceRoot":"","sources":["../../../src/listItem/useItemControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,oBAAoB,EACpB,aAAa,EACd,MAAM,YAAY,CAAC;AAEpB,wBAAgB,cAAc,CAAC,WAAW,EAAE,aAAa,EAAE,YAAY,CAAC,EAAE,oBAAoB;;EAc7F"}
+{"version":3,"file":"useItemControl.d.ts","sourceRoot":"","sources":["../../../src/listItem/useItemControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,oBAAoB,EACpB,aAAa,EACd,MAAM,YAAY,CAAC;AAEpB,wBAAgB,cAAc,CAAC,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,oBAAoB;;EAa5F"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-6bea55b",
+  "version": "0.0.0-experimental-d4d4068",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/listItem/ListItem.css

@@ -62,6 +62,17 @@
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/src/listItem/ListItem.less

@@ -72,6 +72,19 @@
       }
     }
 
+    &.disabled {
+      filter: none;
+      opacity: 1;
+
+      label {
+        cursor: not-allowed;
+      }
+
+      .tw-icon-backslash-circle {
+        color: var(--color-content-tertiary);
+      }
+    }
+
     &-spotlight {
         &-active {
             background-color: var(--color-background-neutral);

package/src/listItem/ListItem.story.tsx

@@ -29,6 +29,7 @@ type Story = StoryObj<ItemProps>;
 export const TempPlayground: Story = {
   render: () => {
     const [checked, setChecked] = useState(false);
+    const [radio, setRadio] = useState('option2');
 
     return (
       <div>
@@ -109,6 +110,31 @@ export const TempPlayground: Story = {
           subtitle={lorem5}
         />
 
+        <ListItem
+          title="Radio 1"
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={
+            <ListItem.Radio
+              name="radios"
+              checked={radio === 'option1'}
+              onChange={() => setRadio('option1')}
+            />
+          }
+        />
+        <ListItem
+          title="Radio 2"
+          subtitle={lorem10}
+          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
+          control={
+            <ListItem.Radio
+              name="radios"
+              checked={radio === 'option2'}
+              onChange={() => setRadio('option2')}
+            />
+          }
+        />
+
         <ListItem
           title="Test title"
           disabled
@@ -194,7 +220,6 @@ export const Navigation: Story = {
             <MultiCurrency />
           </ListItem.AvatarView>
         }
-        inverted
         title="Test title"
         subtitle={lorem5}
         control={
@@ -344,7 +369,6 @@ export const NonInteractive: Story = {
                 <FastFlag />
               </ListItem.AvatarView>
             }
-            inverted
             title="Total paid"
             subtitle="Wise"
             valueTitle={<Money amount={12.15} currency="GBP" />}
@@ -460,4 +484,147 @@ export const ButtonInteractivity: Story = {
   },
 };
 
+export const Disabled: Story = {
+  render: () => (
+    <div>
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Navigation"
+        subtitle={lorem5}
+        control={<ListItem.Navigation onClick={() => {}} />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Button secondary neutral"
+        subtitle={lorem5}
+        control={<ListItem.Button priority="secondary-neutral">Secondary Neutral</ListItem.Button>}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Button primary"
+        subtitle={lorem5}
+        control={<ListItem.Button priority="primary">Primary</ListItem.Button>}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Button tertiary"
+        subtitle={lorem5}
+        control={<ListItem.Button priority="tertiary">Tertiary</ListItem.Button>}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Icon Button"
+        subtitle={lorem5}
+        control={
+          <ListItem.IconButton>
+            <Plus />
+          </ListItem.IconButton>
+        }
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Checkbox"
+        subtitle={lorem5}
+        control={<ListItem.Checkbox />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Checkbox checked"
+        subtitle={lorem5}
+        control={<ListItem.Checkbox checked />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Checkbox indeterminate"
+        subtitle={lorem5}
+        control={<ListItem.Checkbox indeterminate />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Switch on"
+        subtitle={lorem5}
+        control={<ListItem.Switch checked onClick={() => {}} />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Switch off"
+        subtitle={lorem5}
+        control={<ListItem.Switch onClick={() => {}} />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Switch off"
+        subtitle={lorem5}
+        control={<ListItem.Radio name="radio" checked />}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Switch off"
+        subtitle={lorem5}
+        control={<ListItem.Radio name="radios" />}
+      />
+    </div>
+  ),
+};
+
 // add intaces with dark mode

package/src/listItem/ListItem.tsx

@@ -15,7 +15,8 @@ import { Checkbox, ListItemCheckboxProps } from './ListItemCheckbox';
 import { ListItemNavigationProps, Navigation } from './ListItemNavigation';
 import { clsx } from 'clsx';
 import { Button, ListItemButtonProps } from './ListItemButton';
-import { Switch } from './ListItemSwitch';
+import { Radio, ListItemRadioProps } from './ListItemRadio';
+import { Switch, ListItemSwitchProps } from './ListItemSwitch';
 import { AvatarLayout, AvatarView, Image } from './ListItemMedia';
 import Prompt from './prompt/Prompt';
 import { PrimitiveAnchor, PrimitiveButton } from '../primitives';
@@ -35,7 +36,9 @@ export type ListItemControlProps =
   // TODO: add more types for control props here;
   | ListItemCheckboxProps
   | ListItemButtonProps
-  | ListItemIconButtonProps;
+  | ListItemIconButtonProps
+  | ListItemRadioProps
+  | ListItemSwitchProps;
 
 export type Props = {
   as?: 'li' | 'div' | 'span';
@@ -57,13 +60,11 @@ export type ListItemContextData = {
   setControlType: (type: ListItemTypes) => void;
   setControlProps: (props: ListItemControlProps) => void;
   ids: {
-    title: string;
-    subtitle?: string;
-    valueTitle?: string;
-    valueSubtitle?: string;
-    additionalInfo?: string;
+    label: string;
+    additionalInfo: string;
+    value: string;
     control: string;
-    prompt?: string;
+    prompt: string;
   };
   props: Pick<Props, 'disabled' | 'inverted'>;
 };
@@ -113,13 +114,11 @@ export const ListItem = ({
   const [controlProps, setControlProps] = useState<ListItemControlProps>({});
   const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');
   const ids = {
-    title: `${idPrefix}_title`,
-    ...(subtitle && { subtitle: `${idPrefix}_subtitle` }),
-    ...(valueTitle && { valueTitle: `${idPrefix}_value-title` }),
-    ...(valueSubtitle && { valueSubtitle: `${idPrefix}_value-subtitle` }),
+    label: `${idPrefix}_label`,
+    value: `${idPrefix}_value`,
     control: `${idPrefix}_control`,
     prompt: `${idPrefix}_prompt`,
-    ...(additionalInfo && { additionalInfo: `${idPrefix}_additional-info` }),
+    additionalInfo: `${idPrefix}_additional-info`,
   };
 
   // TODO: add partially interactive check from Button and IconButtons
@@ -130,8 +129,6 @@ export const ListItem = ({
     () => ({ setControlType, setControlProps, ids, props: { disabled, inverted } }),
     [],
   );
-  const titleIds = [ids.title, ids.valueTitle].filter(Boolean);
-  const subtitleIds = [ids.subtitle, ids.valueSubtitle].filter(Boolean);
   return (
     <ListItemContext.Provider value={listItemContext}>
       <ListItemElement
@@ -140,6 +137,7 @@ export const ListItem = ({
           {
             'wds-list-item-interactive':
               controlType !== 'non-interactive' &&
+              !disabled &&
               !(controlProps as ListItemButtonProps | ListItemIconButtonProps)
                 ?.partiallyInteractive,
           },
@@ -150,10 +148,8 @@ export const ListItem = ({
           { disabled },
           className,
         )}
-        aria-describedby={[
-          ...(inverted ? [...subtitleIds, ...titleIds] : [...titleIds, ...subtitleIds]),
-          ids.additionalInfo,
-        ].join(' ')}
+        aria-disabled={disabled}
+        aria-describedby={[ids.additionalInfo].join(' ')}
       >
         <View {...{ prompt, controlType, controlProps }}>
           {media && <div className="wds-list-item-media">{media}</div>}
@@ -163,65 +159,34 @@ export const ListItem = ({
             {/* Title + Subtitle + Values - Group */}
             <div className="d-flex justify-content-between">
               <span>
-                {(() => {
-                  const titles = [
-                    // @ts-expect-error div can have role and aria-lavel props
-                    <Body
-                      key={ids.title}
-                      id={ids.title}
-                      type={Typography.BODY_LARGE_BOLD}
-                      className="wds-list-item-title"
-                      // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
-                      // so we enable header semantics via `role` and `aria-level` attrs
-                      role="heading"
-                      aria-level="4"
-                    >
-                      {title}
-                    </Body>,
-                  ];
-                  if (subtitle) {
-                    titles.push(
-                      <Body key={ids.subtitle} id={ids.subtitle} className="wds-list-item-subtitle">
-                        {subtitle}
-                      </Body>,
-                    );
-                  }
-                  return inverted ? [...titles].reverse() : titles;
-                })()}
+                {/* @ts-expect-error div can have role and aria-lavel props */}
+                <Body
+                  type={Typography.BODY_LARGE_BOLD}
+                  className="wds-list-item-title"
+                  // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
+                  // so we enable header semantics via `role` and `aria-level` attrs
+                  role="heading"
+                  aria-level="4"
+                >
+                  {title}
+                </Body>
+                <Body className="wds-list-item-subtitle">{subtitle}</Body>
               </span>
               {(valueTitle || valueSubtitle) && (
                 <span
+                  id={ids.value}
                   className={clsx('wds-list-item-value', 'd-flex align-items-center', {
                     'flex-column': valueTitle !== undefined && valueSubtitle !== undefined,
                   })}
                 >
-                  {(() => {
-                    const values = [];
-                    if (valueTitle) {
-                      values.push(
-                        <Body
-                          key={ids.valueTitle}
-                          id={ids.valueTitle}
-                          type={Typography.BODY_LARGE_BOLD}
-                          className="wds-list-item-title-value"
-                        >
-                          {valueTitle}
-                        </Body>,
-                      );
-                    }
-                    if (valueSubtitle) {
-                      values.push(
-                        <Body
-                          key={ids.valueSubtitle}
-                          id={ids.valueSubtitle}
-                          className="wds-list-item-subtitle-value"
-                        >
-                          {valueSubtitle}
-                        </Body>,
-                      );
-                    }
-                    return inverted ? [...values].reverse() : values;
-                  })()}
+                  {valueTitle && (
+                    <Body type={Typography.BODY_LARGE_BOLD} className="wds-list-item-title-value">
+                      {valueTitle}
+                    </Body>
+                  )}
+                  {valueSubtitle && (
+                    <Body className="wds-list-item-subtitle-value">{valueSubtitle}</Body>
+                  )}
                 </span>
               )}
             </div>
@@ -312,6 +277,7 @@ ListItem.AvatarView = AvatarView;
 ListItem.AvatarLayout = AvatarLayout;
 ListItem.AdditionalInfo = AdditionalInfo;
 ListItem.Checkbox = Checkbox;
+ListItem.Radio = Radio;
 ListItem.IconButton = IconButton;
 ListItem.Navigation = Navigation;
 ListItem.Button = Button;

package/src/listItem/ListItemButton.spec.tsx

@@ -16,9 +16,9 @@ describe('ItemButton', () => {
           setControlType: mockSetControlType,
           setControlProps: mockSetControlProps,
           ids: {
-            title: 'title',
+            label: 'label',
             additionalInfo: 'additional Info',
-            valueTitle: 'value title',
+            value: 'value',
             control: 'control',
             prompt: 'prompt',
           },

package/src/listItem/ListItemCheckbox.tsx

@@ -8,7 +8,7 @@ export type ListItemCheckboxProps = Pick<
 >;
 
 export const Checkbox = function (props: ListItemCheckboxProps) {
-  const { baseItemProps } = useItemControl('checkbox');
+  const { baseItemProps } = useItemControl('checkbox', { ...props });
 
   return <CheckboxButton disabled={baseItemProps.disabled} {...props} />;
 };

package/src/listItem/ListItemNavigation.tsx

@@ -8,7 +8,10 @@ export type ListItemNavigationProps = Pick<ButtonProps, 'onClick' | 'href' | 'ta
 export const Navigation = function Navigation({ href = '#', ...props }: ListItemNavigationProps) {
   const { baseItemProps } = useItemControl('navigation', { href, ...props });
   const isLink = href !== '#';
-  const icon = baseItemProps.disabled ? <BackslashCircle size={24} /> : <ChevronRight size={24} />;
+  const icon = <ChevronRight size={24} />;
+
+  if (baseItemProps.disabled) return <BackslashCircle size={24} />;
+
   return isLink ? (
     <>{icon}</>
   ) : (

package/src/listItem/ListItemRadio.tsx

@@ -0,0 +1,10 @@
+import RadioButton, { RadioButtonProps } from '../common/RadioButton/RadioButton';
+import { useItemControl } from './useItemControl';
+
+export type ListItemRadioProps = Omit<RadioButtonProps, 'disabled'>;
+
+export const Radio = function (props: ListItemRadioProps) {
+  const { baseItemProps } = useItemControl('radio', { ...props });
+
+  return <RadioButton disabled={baseItemProps.disabled} {...props} />;
+};

package/src/listItem/ListItemSwitch.tsx

@@ -1,8 +1,10 @@
 import { default as SwitchComp, SwitchProps } from '../switch';
 import { useItemControl } from './useItemControl';
 
-export const Switch = function (props: SwitchProps) {
-  const { baseItemProps } = useItemControl('switch');
+export type ListItemSwitchProps = Omit<SwitchProps, 'disabled'>;
+
+export const Switch = function (props: ListItemSwitchProps) {
+  const { baseItemProps } = useItemControl('switch', { ...props });
 
   return <SwitchComp disabled={baseItemProps.disabled} {...props} />;
 };

package/src/listItem/useItemControl.tsx

@@ -6,7 +6,7 @@ import {
   ListItemTypes,
 } from './ListItem';
 
-export function useItemControl(controlType: ListItemTypes, controlProps?: ListItemControlProps) {
+export function useItemControl(controlType: ListItemTypes, controlProps: ListItemControlProps) {
   const {
     setControlType,
     setControlProps,
@@ -15,7 +15,6 @@ export function useItemControl(controlType: ListItemTypes, controlProps?: ListIt
 
   useEffect(() => {
     setControlType(controlType);
-    // @ts-expect-error TODO: fix the type error later
     setControlProps(controlProps);
   }, [controlType, controlProps, setControlType, setControlProps]);
 

package/src/main.css

@@ -2682,6 +2682,17 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
+.wds-list-item.disabled {
+  filter: none;
+  opacity: 1;
+}
+.wds-list-item.disabled label {
+  cursor: not-allowed;
+}
+.wds-list-item.disabled .tw-icon-backslash-circle {
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+}
 .wds-list-item-spotlight-active {
   background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);

package/src/switch/Switch.tsx

@@ -55,7 +55,7 @@ const Switch = (props: SwitchProps) => {
         },
         className,
       )}
-      tabIndex={0}
+      tabIndex={disabled ? -1 : 0}
       role="switch"
       aria-checked={checked}
       aria-label={ariaLabel}