@vector-im/compound-web 8.3.4 → 8.3.5

package/dist/components/Button/IconButton/IconButton.module.css.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const destructive = "_destructive_1pz9o_95";
+const destructive = "_destructive_1215g_95";
 const styles = {
-  "icon-button": "_icon-button_1pz9o_8",
-  "no-background": "_no-background_1pz9o_42",
+  "icon-button": "_icon-button_1215g_8",
+  "no-background": "_no-background_1215g_42",
   destructive
 };
 exports.default = styles;

package/dist/components/Button/IconButton/IconButton.module.css.js

@@ -1,7 +1,7 @@
-const destructive = "_destructive_1pz9o_95";
+const destructive = "_destructive_1215g_95";
 const styles = {
-  "icon-button": "_icon-button_1pz9o_8",
-  "no-background": "_no-background_1pz9o_42",
+  "icon-button": "_icon-button_1215g_8",
+  "no-background": "_no-background_1215g_42",
   destructive
 };
 export {

package/dist/components/Menu/CheckboxMenuItem.cjs

@@ -12,11 +12,12 @@ const CheckboxMenuItem = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       MenuItem.MenuItem,
       {
-        as: "div",
+        as: "button",
         role: "menuitemcheckbox",
         "aria-checked": checked,
         className,
         label,
+        hideChevron: true,
         onSelect,
         disabled,
         Icon: /* @__PURE__ */ jsxRuntime.jsx(
@@ -25,6 +26,7 @@ const CheckboxMenuItem = React.forwardRef(
             id: toggleId,
             ref,
             "aria-hidden": true,
+            tabIndex: -1,
             checked,
             disabled,
             onChange

package/dist/components/Menu/CheckboxMenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxMenuItem.cjs","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"names":["forwardRef","CheckboxMenuItem","useId","useCallback","jsx","MenuItem","CheckboxInput"],"mappings":";;;;;;AA8BO,MAAM,mBAAmBA,MAAAA;AAAAA,EAC9B,SAASC,kBACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAA,GACvC,KACA;AACA,UAAM,WAAWC,MAAAA,MAAA;AAGjB,UAAM,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MACED,2BAAAA;AAAAA,UAACE,SAAAA;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AACF;;"}
+{"version":3,"file":"CheckboxMenuItem.cjs","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a <button> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            tabIndex={-1}\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"names":["forwardRef","CheckboxMenuItem","useId","useCallback","jsx","MenuItem","CheckboxInput"],"mappings":";;;;;;AA8BO,MAAM,mBAAmBA,MAAAA;AAAAA,EAC9B,SAASC,kBACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAA,GACvC,KACA;AACA,UAAM,WAAWC,MAAAA,MAAA;AAGjB,UAAM,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,MACED,2BAAAA;AAAAA,UAACE,SAAAA;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AACF;;"}

package/dist/components/Menu/CheckboxMenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAKN,MAAM,OAAO,CAAC;AAcf;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;IAV3B;;OAEG;aACM,OAAO;0CA2CjB,CAAC"}
+{"version":3,"file":"CheckboxMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAKN,MAAM,OAAO,CAAC;AAcf;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;IAV3B;;OAEG;aACM,OAAO;0CA6CjB,CAAC"}

package/dist/components/Menu/CheckboxMenuItem.js

@@ -10,11 +10,12 @@ const CheckboxMenuItem = forwardRef(
     return /* @__PURE__ */ jsx(
       MenuItem,
       {
-        as: "div",
+        as: "button",
         role: "menuitemcheckbox",
         "aria-checked": checked,
         className,
         label,
+        hideChevron: true,
         onSelect,
         disabled,
         Icon: /* @__PURE__ */ jsx(
@@ -23,6 +24,7 @@ const CheckboxMenuItem = forwardRef(
             id: toggleId,
             ref,
             "aria-hidden": true,
+            tabIndex: -1,
             checked,
             disabled,
             onChange

package/dist/components/Menu/CheckboxMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxMenuItem.js","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"names":["CheckboxMenuItem"],"mappings":";;;;AA8BO,MAAM,mBAAmB;AAAA,EAC9B,SAASA,kBACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAA,GACvC,KACA;AACA,UAAM,WAAW,MAAA;AAGjB,UAAM,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"version":3,"file":"CheckboxMenuItem.js","sources":["../../../src/components/Menu/CheckboxMenuItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 New Vector Ltd\n *\n * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\n * Please see LICENSE files in the repository root for full details.\n */\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { CheckboxInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the checkbox is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a checkbox control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(\n  function CheckboxMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The checkbox is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a <button> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <CheckboxInput\n            id={toggleId}\n            ref={ref}\n            // This is purely cosmetic; really the whole MenuItem is the toggle.\n            aria-hidden\n            tabIndex={-1}\n            checked={checked}\n            disabled={disabled}\n            onChange={onChange}\n          />\n        }\n      />\n    );\n  },\n);\n"],"names":["CheckboxMenuItem"],"mappings":";;;;AA8BO,MAAM,mBAAmB;AAAA,EAC9B,SAASA,kBACP,EAAE,WAAW,OAAO,UAAU,SAAS,SAAA,GACvC,KACA;AACA,UAAM,WAAW,MAAA;AAGjB,UAAM,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,MACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/dist/components/Menu/ToggleMenuItem.cjs

@@ -12,12 +12,13 @@ const ToggleMenuItem = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       MenuItem.MenuItem,
       {
-        as: "div",
+        as: "button",
         role: "menuitemcheckbox",
         "aria-checked": checked,
         className,
         Icon,
         label,
+        hideChevron: true,
         onSelect,
         disabled,
         onClick,
@@ -27,6 +28,7 @@ const ToggleMenuItem = React.forwardRef(
             id: toggleId,
             ref,
             "aria-hidden": true,
+            tabIndex: -1,
             checked,
             disabled,
             onChange

package/dist/components/Menu/ToggleMenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleMenuItem.cjs","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["forwardRef","ToggleMenuItem","useId","useCallback","jsx","MenuItem","ToggleInput"],"mappings":";;;;;;AA8BO,MAAM,iBAAiBA,MAAAA;AAAAA,EAC5B,SAASC,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,QAAA,GACvD,KACA;AACA,UAAM,WAAWC,MAAAA,MAAA;AAGjB,UAAM,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAAD,2BAAAA;AAAAA,UAACE,OAAAA;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;;"}
+{"version":3,"file":"ToggleMenuItem.cjs","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          tabIndex={-1}\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["forwardRef","ToggleMenuItem","useId","useCallback","jsx","MenuItem","ToggleInput"],"mappings":";;;;;;AA8BO,MAAM,iBAAiBA,MAAAA;AAAAA,EAC5B,SAASC,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,QAAA,GACvD,KACA;AACA,UAAM,WAAWC,MAAAA,MAAA;AAGjB,UAAM,WAAWC,MAAAA,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACEC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAAD,2BAAAA;AAAAA,UAACE,OAAAA;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;;"}

package/dist/components/Menu/ToggleMenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAKN,MAAM,OAAO,CAAC;AAcf;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;IAVzB;;OAEG;aACM,OAAO;0CA4CjB,CAAC"}
+{"version":3,"file":"ToggleMenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"names":[],"mappings":"AAOA,OAAO,KAKN,MAAM,OAAO,CAAC;AAcf;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;IAVzB;;OAEG;aACM,OAAO;0CA8CjB,CAAC"}

package/dist/components/Menu/ToggleMenuItem.js

@@ -10,12 +10,13 @@ const ToggleMenuItem = forwardRef(
     return /* @__PURE__ */ jsx(
       MenuItem,
       {
-        as: "div",
+        as: "button",
         role: "menuitemcheckbox",
         "aria-checked": checked,
         className,
         Icon,
         label,
+        hideChevron: true,
         onSelect,
         disabled,
         onClick,
@@ -25,6 +26,7 @@ const ToggleMenuItem = forwardRef(
             id: toggleId,
             ref,
             "aria-hidden": true,
+            tabIndex: -1,
             checked,
             disabled,
             onChange

package/dist/components/Menu/ToggleMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleMenuItem.js","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"div\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["ToggleMenuItem"],"mappings":";;;;AA8BO,MAAM,iBAAiB;AAAA,EAC5B,SAASA,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,QAAA,GACvD,KACA;AACA,UAAM,WAAW,MAAA;AAGjB,UAAM,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"ToggleMenuItem.js","sources":["../../../src/components/Menu/ToggleMenuItem.tsx"],"sourcesContent":["/*\nCopyright 2023, 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, {\n  type ComponentProps,\n  forwardRef,\n  useCallback,\n  useId,\n} from \"react\";\nimport { MenuItem } from \"./MenuItem\";\nimport { ToggleInput } from \"../Form/Controls/Toggle\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"Icon\" | \"label\" | \"onSelect\" | \"disabled\" | \"onClick\"\n> & {\n  /**\n   * Whether the toggle is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a toggle control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(\n  function ToggleMenuItem(\n    { className, Icon, label, onSelect, checked, disabled, onClick },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The toggle is controlled and we intend to ignore its events. We do need\n    // to at least set onChange though to make React happy.\n    const onChange = useCallback(() => {}, []);\n\n    // <label> elements are not allowed to have a role like menuitemcheckbox, so\n    // we must instead use a plain <div> for the menu item and use aria-checked\n    // etc. to communicate its state.\n    return (\n      <MenuItem\n        as=\"button\"\n        role=\"menuitemcheckbox\"\n        aria-checked={checked}\n        className={className}\n        Icon={Icon}\n        label={label}\n        hideChevron\n        onSelect={onSelect}\n        disabled={disabled}\n        onClick={onClick}\n      >\n        <ToggleInput\n          id={toggleId}\n          ref={ref}\n          // This is purely cosmetic; really the whole MenuItem is the toggle.\n          aria-hidden\n          tabIndex={-1}\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n        />\n      </MenuItem>\n    );\n  },\n);\n"],"names":["ToggleMenuItem"],"mappings":";;;;AA8BO,MAAM,iBAAiB;AAAA,EAC5B,SAASA,gBACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,QAAA,GACvD,KACA;AACA,UAAM,WAAW,MAAA;AAGjB,UAAM,WAAW,YAAY,MAAM;AAAA,IAAC,GAAG,CAAA,CAAE;AAKzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QAEA,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YAEA,eAAW;AAAA,YACX,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/style.css

@@ -247,7 +247,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._icon-button_1pz9o_8 {
+._icon-button_1215g_8 {
   --cpd-icon-button-indicator-border-size: calc(
     var(--cpd-icon-button-size) * 0.0625
   );
@@ -267,13 +267,13 @@ Please see LICENSE files in the repository root for full details.
   line-height: 0px;
 }
 
-._icon-button_1pz9o_8[data-kind="primary"] {
+._icon-button_1215g_8[data-kind="primary"] {
   * {
-    color: var(--cpd-color-icon-tertiary);
+    color: var(--cpd-color-icon-secondary);
   }
 }
 
-._icon-button_1pz9o_8[data-kind="secondary"] {
+._icon-button_1215g_8[data-kind="secondary"] {
   background: var(--cpd-color-bg-subtle-secondary);
 
   * {
@@ -281,11 +281,11 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._no-background_1pz9o_42[data-kind="secondary"] {
+._no-background_1215g_42[data-kind="secondary"] {
   background: transparent;
 }
 
-._icon-button_1pz9o_8[aria-disabled="true"] {
+._icon-button_1215g_8[aria-disabled="true"] {
   cursor: not-allowed;
 
   * {
@@ -298,7 +298,7 @@ Please see LICENSE files in the repository root for full details.
  */
 
 @media (hover) {
-  ._icon-button_1pz9o_8:not([aria-disabled="true"]):hover {
+  ._icon-button_1215g_8:not([aria-disabled="true"]):hover {
     background: var(--cpd-color-bg-subtle-primary);
 
     * {
@@ -307,7 +307,7 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._icon-button_1pz9o_8:not([aria-disabled="true"]):active {
+._icon-button_1215g_8:not([aria-disabled="true"]):active {
   background: var(--cpd-color-bg-subtle-primary);
 
   * {
@@ -316,7 +316,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._icon-button_1pz9o_8:not([aria-disabled="true"])[data-indicator]:is(:hover)::before {
+  ._icon-button_1215g_8:not([aria-disabled="true"])[data-indicator]:is(:hover)::before {
     /* Same colour as the background */
     border: var(--cpd-icon-button-indicator-border-size) solid
       var(--cpd-color-bg-subtle-primary);
@@ -325,7 +325,7 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._icon-button_1pz9o_8:not([aria-disabled="true"])[data-indicator]:is(:active)::before {
+._icon-button_1215g_8:not([aria-disabled="true"])[data-indicator]:is(:active)::before {
   /* Same colour as the background */
   border: var(--cpd-icon-button-indicator-border-size) solid
     var(--cpd-color-bg-subtle-primary);
@@ -334,13 +334,13 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._icon-button_1pz9o_8:not([aria-disabled="true"])._destructive_1pz9o_95:hover {
+  ._icon-button_1215g_8:not([aria-disabled="true"])._destructive_1215g_95:hover {
     background: var(--cpd-color-bg-critical-subtle-hovered);
     outline: 1px solid var(--cpd-color-border-critical-subtle);
   }
 }
 
-._icon-button_1pz9o_8:not([aria-disabled="true"])._destructive_1pz9o_95 {
+._icon-button_1215g_8:not([aria-disabled="true"])._destructive_1215g_95 {
   * {
     color: var(--cpd-color-icon-critical-primary);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "8.3.4",
+  "version": "8.3.5",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -56,7 +56,7 @@
     "@fontsource/inter": "^5.0.8",
     "@playwright/test": "^1.41.1",
     "@storybook/addon-a11y": "^10.0.0",
-    "@storybook/addon-designs": "11.1.0",
+    "@storybook/addon-designs": "11.1.1",
     "@storybook/addon-docs": "^10.0.0",
     "@storybook/addon-links": "^10.0.0",
     "@storybook/addon-themes": "^10.0.0",
@@ -65,7 +65,7 @@
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.1",
-    "@tsconfig/node20": "^20.1.4",
+    "@tsconfig/node22": "^22.0.0",
     "@tsconfig/vite-react": "^7.0.0",
     "@types/eslint": "^9.0.0",
     "@types/node": "^24.0.0",

package/src/components/Button/IconButton/IconButton.module.css

@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
 
 .icon-button[data-kind="primary"] {
   * {
-    color: var(--cpd-color-icon-tertiary);
+    color: var(--cpd-color-icon-secondary);
   }
 }
 

package/src/components/Menu/CheckboxMenuItem.tsx

@@ -39,15 +39,16 @@ export const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(
     const onChange = useCallback(() => {}, []);
 
     // <label> elements are not allowed to have a role like menuitemcheckbox, so
-    // we must instead use a plain <div> for the menu item and use aria-checked
+    // we must instead use a <button> for the menu item and use aria-checked
     // etc. to communicate its state.
     return (
       <MenuItem
-        as="div"
+        as="button"
         role="menuitemcheckbox"
         aria-checked={checked}
         className={className}
         label={label}
+        hideChevron
         onSelect={onSelect}
         disabled={disabled}
         Icon={
@@ -56,6 +57,7 @@ export const CheckboxMenuItem = forwardRef<HTMLInputElement, Props>(
             ref={ref}
             // This is purely cosmetic; really the whole MenuItem is the toggle.
             aria-hidden
+            tabIndex={-1}
             checked={checked}
             disabled={disabled}
             onChange={onChange}

package/src/components/Menu/ToggleMenuItem.tsx

@@ -43,12 +43,13 @@ export const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(
     // etc. to communicate its state.
     return (
       <MenuItem
-        as="div"
+        as="button"
         role="menuitemcheckbox"
         aria-checked={checked}
         className={className}
         Icon={Icon}
         label={label}
+        hideChevron
         onSelect={onSelect}
         disabled={disabled}
         onClick={onClick}
@@ -58,6 +59,7 @@ export const ToggleMenuItem = forwardRef<HTMLInputElement, Props>(
           ref={ref}
           // This is purely cosmetic; really the whole MenuItem is the toggle.
           aria-hidden
+          tabIndex={-1}
           checked={checked}
           disabled={disabled}
           onChange={onChange}