@vector-im/compound-web 8.1.1 → 8.2.0

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.cjs

@@ -8,14 +8,16 @@ const InlineField = require("../../InlineField.cjs");
 const reactForm = require("@radix-ui/react-form");
 const Toggle = require("../Toggle/Toggle.cjs");
 const SettingsToggleInput = React.forwardRef(function Toggle$1({ className, label, helpMessage, disabledMessage, name, ...props }, ref) {
+  const generatedId = React.useId();
+  const id = props.id ?? generatedId;
   const content = /* @__PURE__ */ jsxRuntime.jsxs(
     InlineField.InlineField,
     {
       className,
       name,
-      control: /* @__PURE__ */ jsxRuntime.jsx(Toggle.ToggleInput, { ref, ...props }),
+      control: /* @__PURE__ */ jsxRuntime.jsx(Toggle.ToggleInput, { id, ref, ...props }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { htmlFor: id, children: label }),
         helpMessage && /* @__PURE__ */ jsxRuntime.jsx(Message.HelpMessage, { children: helpMessage }),
         disabledMessage && props.disabled && /* @__PURE__ */ jsxRuntime.jsx(Message.HelpMessage, { children: disabledMessage })
       ]

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsToggle.cjs","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"sourcesContent":["/*\nCopyright 2025 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 {\n  ComponentProps,\n  ComponentRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\nimport { ToggleInput } from \"../Toggle\";\nimport { Label } from \"../../Label\";\nimport { HelpMessage } from \"../../Message\";\nimport { InlineField } from \"../../InlineField\";\nimport React from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype SettingsToggleProps = {\n  /**\n   * The CSS class name for the containing field.\n   */\n  className?: string;\n  /**\n   * The field name.\n   */\n  name: string;\n  label: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  helpMessage?: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  disabledMessage?: string;\n} & Omit<ComponentProps<typeof ToggleInput>, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const SettingsToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<SettingsToggleProps>\n>(function Toggle(\n  { className, label, helpMessage, disabledMessage, name, ...props },\n  ref,\n) {\n  const content = (\n    <InlineField\n      className={className}\n      name={name}\n      control={<ToggleInput ref={ref} {...props} />}\n    >\n      <Label>{label}</Label>\n      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}\n      {disabledMessage && props.disabled && (\n        <HelpMessage>{disabledMessage}</HelpMessage>\n      )}\n    </InlineField>\n  );\n  return content;\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const SettingsToggleControl = forwardRef<\n  ComponentRef<typeof SettingsToggleInput>,\n  ComponentProps<typeof SettingsToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <SettingsToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","Toggle","jsxs","InlineField","jsx","ToggleInput","Label","HelpMessage","Control"],"mappings":";;;;;;;;;AA2CO,MAAM,sBAAsBA,MAAA,WAGjC,SAASC,SACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,MAAA,GAC3D,KACA;AACA,QAAM,UACJC,2BAAA;AAAA,IAACC,YAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAASC,2BAAA,IAACC,OAAY,aAAA,EAAA,KAAW,GAAG,MAAO,CAAA;AAAA,MAE3C,UAAA;AAAA,QAAAD,2BAAAA,IAACE,eAAO,UAAM,MAAA,CAAA;AAAA,QACb,eAAgBF,2BAAAA,IAAAG,QAAAA,aAAA,EAAa,UAAY,YAAA,CAAA;AAAA,QACzC,mBAAmB,MAAM,YACxBH,2BAAAA,IAACG,QAAAA,eAAa,UAAgB,gBAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAElC;AAEK,SAAA;AACT,CAAC;AAKM,MAAM,wBAAwBP,MAAAA,WAGnC,SAAS,cAAc,OAAO,KAAK;AAEjC,SAAAI,2BAAA,IAACI,qBAAQ,SAAO,MACd,yCAAC,qBAAoB,EAAA,KAAW,GAAG,MAAA,CAAO,EAC5C,CAAA;AAEJ,CAAC;;;"}
+{"version":3,"file":"SettingsToggle.cjs","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"sourcesContent":["/*\nCopyright 2025 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 {\n  ComponentProps,\n  ComponentRef,\n  forwardRef,\n  PropsWithChildren,\n  useId,\n} from \"react\";\nimport { ToggleInput } from \"../Toggle\";\nimport { Label } from \"../../Label\";\nimport { HelpMessage } from \"../../Message\";\nimport { InlineField } from \"../../InlineField\";\nimport React from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype SettingsToggleProps = {\n  /**\n   * The CSS class name for the containing field.\n   */\n  className?: string;\n  /**\n   * The field name.\n   */\n  name: string;\n  label: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  helpMessage?: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  disabledMessage?: string;\n} & Omit<ComponentProps<typeof ToggleInput>, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const SettingsToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<SettingsToggleProps>\n>(function Toggle(\n  { className, label, helpMessage, disabledMessage, name, ...props },\n  ref,\n) {\n  const generatedId = useId();\n  const id = props.id ?? generatedId;\n  const content = (\n    <InlineField\n      className={className}\n      name={name}\n      control={<ToggleInput id={id} ref={ref} {...props} />}\n    >\n      <Label htmlFor={id}>{label}</Label>\n      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}\n      {disabledMessage && props.disabled && (\n        <HelpMessage>{disabledMessage}</HelpMessage>\n      )}\n    </InlineField>\n  );\n  return content;\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const SettingsToggleControl = forwardRef<\n  ComponentRef<typeof SettingsToggleInput>,\n  ComponentProps<typeof SettingsToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <SettingsToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","Toggle","useId","jsxs","InlineField","jsx","ToggleInput","Label","HelpMessage","Control"],"mappings":";;;;;;;;;AA4CO,MAAM,sBAAsBA,MAAA,WAGjC,SAASC,SACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,MAAA,GAC3D,KACA;AACA,QAAM,cAAcC,MAAAA,MAAM;AACpB,QAAA,KAAK,MAAM,MAAM;AACvB,QAAM,UACJC,2BAAA;AAAA,IAACC,YAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAUC,2BAAA,IAAAC,oBAAA,EAAY,IAAQ,KAAW,GAAG,OAAO;AAAA,MAEnD,UAAA;AAAA,QAACD,2BAAA,IAAAE,MAAA,OAAA,EAAM,SAAS,IAAK,UAAM,OAAA;AAAA,QAC1B,eAAgBF,2BAAAA,IAAAG,QAAAA,aAAA,EAAa,UAAY,YAAA,CAAA;AAAA,QACzC,mBAAmB,MAAM,YACxBH,2BAAAA,IAACG,QAAAA,eAAa,UAAgB,gBAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAElC;AAEK,SAAA;AACT,CAAC;AAKM,MAAM,wBAAwBR,MAAAA,WAGnC,SAAS,cAAc,OAAO,KAAK;AAEjC,SAAAK,2BAAA,IAACI,qBAAQ,SAAO,MACd,yCAAC,qBAAoB,EAAA,KAAW,GAAG,MAAA,CAAO,EAC5C,CAAA;AAEJ,CAAC;;;"}

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,cAAc,EAGd,iBAAiB,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,mBAAmB,8HAqB9B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,qBAAqB,mLAShC,CAAC"}
+{"version":3,"file":"SettingsToggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"names":[],"mappings":"AAOA,OAAO,EACL,cAAc,EAGd,iBAAiB,EAElB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,mBAAmB,GAAG;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,mBAAmB,8HAuB9B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,qBAAqB,mLAShC,CAAC"}

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.js

@@ -1,19 +1,21 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useId } from "react";
 import { Label } from "../../Label.js";
 import { HelpMessage } from "../../Message.js";
 import { InlineField } from "../../InlineField.js";
 import { Control } from "@radix-ui/react-form";
 import { ToggleInput } from "../Toggle/Toggle.js";
 const SettingsToggleInput = forwardRef(function Toggle({ className, label, helpMessage, disabledMessage, name, ...props }, ref) {
+  const generatedId = useId();
+  const id = props.id ?? generatedId;
   const content = /* @__PURE__ */ jsxs(
     InlineField,
     {
       className,
       name,
-      control: /* @__PURE__ */ jsx(ToggleInput, { ref, ...props }),
+      control: /* @__PURE__ */ jsx(ToggleInput, { id, ref, ...props }),
       children: [
-        /* @__PURE__ */ jsx(Label, { children: label }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label }),
         helpMessage && /* @__PURE__ */ jsx(HelpMessage, { children: helpMessage }),
         disabledMessage && props.disabled && /* @__PURE__ */ jsx(HelpMessage, { children: disabledMessage })
       ]

package/dist/components/Form/Controls/SettingsToggle/SettingsToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsToggle.js","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"sourcesContent":["/*\nCopyright 2025 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 {\n  ComponentProps,\n  ComponentRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\nimport { ToggleInput } from \"../Toggle\";\nimport { Label } from \"../../Label\";\nimport { HelpMessage } from \"../../Message\";\nimport { InlineField } from \"../../InlineField\";\nimport React from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype SettingsToggleProps = {\n  /**\n   * The CSS class name for the containing field.\n   */\n  className?: string;\n  /**\n   * The field name.\n   */\n  name: string;\n  label: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  helpMessage?: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  disabledMessage?: string;\n} & Omit<ComponentProps<typeof ToggleInput>, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const SettingsToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<SettingsToggleProps>\n>(function Toggle(\n  { className, label, helpMessage, disabledMessage, name, ...props },\n  ref,\n) {\n  const content = (\n    <InlineField\n      className={className}\n      name={name}\n      control={<ToggleInput ref={ref} {...props} />}\n    >\n      <Label>{label}</Label>\n      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}\n      {disabledMessage && props.disabled && (\n        <HelpMessage>{disabledMessage}</HelpMessage>\n      )}\n    </InlineField>\n  );\n  return content;\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const SettingsToggleControl = forwardRef<\n  ComponentRef<typeof SettingsToggleInput>,\n  ComponentProps<typeof SettingsToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <SettingsToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AA2CO,MAAM,sBAAsB,WAGjC,SAAS,OACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,MAAA,GAC3D,KACA;AACA,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS,oBAAC,aAAY,EAAA,KAAW,GAAG,MAAO,CAAA;AAAA,MAE3C,UAAA;AAAA,QAAA,oBAAC,SAAO,UAAM,MAAA,CAAA;AAAA,QACb,eAAgB,oBAAA,aAAA,EAAa,UAAY,YAAA,CAAA;AAAA,QACzC,mBAAmB,MAAM,YACxB,oBAAC,eAAa,UAAgB,gBAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAElC;AAEK,SAAA;AACT,CAAC;AAKM,MAAM,wBAAwB,WAGnC,SAAS,cAAc,OAAO,KAAK;AAEjC,SAAA,oBAAC,WAAQ,SAAO,MACd,8BAAC,qBAAoB,EAAA,KAAW,GAAG,MAAA,CAAO,EAC5C,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"SettingsToggle.js","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"sourcesContent":["/*\nCopyright 2025 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 {\n  ComponentProps,\n  ComponentRef,\n  forwardRef,\n  PropsWithChildren,\n  useId,\n} from \"react\";\nimport { ToggleInput } from \"../Toggle\";\nimport { Label } from \"../../Label\";\nimport { HelpMessage } from \"../../Message\";\nimport { InlineField } from \"../../InlineField\";\nimport React from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype SettingsToggleProps = {\n  /**\n   * The CSS class name for the containing field.\n   */\n  className?: string;\n  /**\n   * The field name.\n   */\n  name: string;\n  label: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  helpMessage?: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  disabledMessage?: string;\n} & Omit<ComponentProps<typeof ToggleInput>, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const SettingsToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<SettingsToggleProps>\n>(function Toggle(\n  { className, label, helpMessage, disabledMessage, name, ...props },\n  ref,\n) {\n  const generatedId = useId();\n  const id = props.id ?? generatedId;\n  const content = (\n    <InlineField\n      className={className}\n      name={name}\n      control={<ToggleInput id={id} ref={ref} {...props} />}\n    >\n      <Label htmlFor={id}>{label}</Label>\n      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}\n      {disabledMessage && props.disabled && (\n        <HelpMessage>{disabledMessage}</HelpMessage>\n      )}\n    </InlineField>\n  );\n  return content;\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const SettingsToggleControl = forwardRef<\n  ComponentRef<typeof SettingsToggleInput>,\n  ComponentProps<typeof SettingsToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <SettingsToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AA4CO,MAAM,sBAAsB,WAGjC,SAAS,OACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,MAAA,GAC3D,KACA;AACA,QAAM,cAAc,MAAM;AACpB,QAAA,KAAK,MAAM,MAAM;AACvB,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAU,oBAAA,aAAA,EAAY,IAAQ,KAAW,GAAG,OAAO;AAAA,MAEnD,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAM,SAAS,IAAK,UAAM,OAAA;AAAA,QAC1B,eAAgB,oBAAA,aAAA,EAAa,UAAY,YAAA,CAAA;AAAA,QACzC,mBAAmB,MAAM,YACxB,oBAAC,eAAa,UAAgB,gBAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAElC;AAEK,SAAA;AACT,CAAC;AAKM,MAAM,wBAAwB,WAGnC,SAAS,cAAc,OAAO,KAAK;AAEjC,SAAA,oBAAC,WAAQ,SAAO,MACd,8BAAC,qBAAoB,EAAA,KAAW,GAAG,MAAA,CAAO,EAC5C,CAAA;AAEJ,CAAC;"}

package/dist/components/Form/Controls/Toggle/Toggle.cjs

@@ -8,7 +8,16 @@ const reactForm = require("@radix-ui/react-form");
 const ToggleInput = React.forwardRef(function Toggle({ className, ...props }, ref) {
   const classes = classNames(Toggle_module.default.container, className);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ref, className: Toggle_module.default.input, ...props, type: "checkbox" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        role: "switch",
+        ref,
+        className: Toggle_module.default.input,
+        ...props,
+        type: "checkbox"
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: Toggle_module.default.ui })
   ] });
 });

package/dist/components/Form/Controls/Toggle/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\nCopyright 2023 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 classnames from \"classnames\";\nimport React, {\n  ComponentProps,\n  ComponentRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toggle.module.css\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype ToggleProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const ToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<ToggleProps>\n>(function Toggle({ className, ...props }, ref) {\n  const classes = classnames(styles.container, className);\n  return (\n    <div className={classes}>\n      <input ref={ref} className={styles.input} {...props} type=\"checkbox\" />\n      <div className={styles.ui} />\n    </div>\n  );\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ToggleControl = forwardRef<\n  ComponentRef<typeof ToggleInput>,\n  ComponentProps<typeof ToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <ToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","classnames","styles","jsxs","jsx","ToggleControl","Control"],"mappings":";;;;;;;AA6Ba,MAAA,cAAcA,iBAGzB,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9C,QAAM,UAAUC,WAAWC,sBAAO,WAAW,SAAS;AAEpD,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAW,SACd,UAAA;AAAA,IAACC,2BAAAA,IAAA,SAAA,EAAM,KAAU,WAAWF,cAAAA,QAAO,OAAQ,GAAG,OAAO,MAAK,YAAW;AAAA,IACpEE,2BAAAA,IAAA,OAAA,EAAI,WAAWF,cAAAA,QAAO,GAAI,CAAA;AAAA,EAAA,GAC7B;AAEJ,CAAC;AAKM,MAAM,gBAAgBF,MAAAA,WAG3B,SAASK,eAAc,OAAO,KAAK;AAEjC,SAAAD,2BAAA,IAACE,qBAAQ,SAAO,MACd,yCAAC,aAAY,EAAA,KAAW,GAAG,MAAA,CAAO,EACpC,CAAA;AAEJ,CAAC;;;"}
+{"version":3,"file":"Toggle.cjs","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\nCopyright 2023 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 classnames from \"classnames\";\nimport React, {\n  ComponentProps,\n  ComponentRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toggle.module.css\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype ToggleProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const ToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<ToggleProps>\n>(function Toggle({ className, ...props }, ref) {\n  const classes = classnames(styles.container, className);\n  return (\n    <div className={classes}>\n      <input\n        role=\"switch\"\n        ref={ref}\n        className={styles.input}\n        {...props}\n        type=\"checkbox\"\n      />\n      <div className={styles.ui} />\n    </div>\n  );\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ToggleControl = forwardRef<\n  ComponentRef<typeof ToggleInput>,\n  ComponentProps<typeof ToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <ToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","classnames","styles","jsxs","jsx","ToggleControl","Control"],"mappings":";;;;;;;AA6Ba,MAAA,cAAcA,iBAGzB,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9C,QAAM,UAAUC,WAAWC,sBAAO,WAAW,SAAS;AAEpD,SAAAC,2BAAA,KAAC,OAAI,EAAA,WAAW,SACd,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,WAAWF,cAAO,QAAA;AAAA,QACjB,GAAG;AAAA,QACJ,MAAK;AAAA,MAAA;AAAA,IACP;AAAA,IACCE,2BAAAA,IAAA,OAAA,EAAI,WAAWF,cAAAA,QAAO,GAAI,CAAA;AAAA,EAAA,GAC7B;AAEJ,CAAC;AAKM,MAAM,gBAAgBF,MAAAA,WAG3B,SAASK,eAAc,OAAO,KAAK;AAEjC,SAAAD,2BAAA,IAACE,qBAAQ,SAAO,MACd,yCAAC,aAAY,EAAA,KAAW,GAAG,MAAA,CAAO,EACpC,CAAA;AAEJ,CAAC;;;"}

package/dist/components/Form/Controls/Toggle/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,EACZ,cAAc,EAIf,MAAM,OAAO,CAAC;AAIf,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;AAE1C;;GAEG;AACH,eAAO,MAAM,WAAW,4HAWtB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,aAAa,iLASxB,CAAC"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,EACZ,cAAc,EAIf,MAAM,OAAO,CAAC;AAIf,KAAK,WAAW,GAAG;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;AAE1C;;GAEG;AACH,eAAO,MAAM,WAAW,4HAiBtB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,aAAa,iLASxB,CAAC"}

package/dist/components/Form/Controls/Toggle/Toggle.js

@@ -6,7 +6,16 @@ import { Control } from "@radix-ui/react-form";
 const ToggleInput = forwardRef(function Toggle({ className, ...props }, ref) {
   const classes = classNames(styles.container, className);
   return /* @__PURE__ */ jsxs("div", { className: classes, children: [
-    /* @__PURE__ */ jsx("input", { ref, className: styles.input, ...props, type: "checkbox" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        role: "switch",
+        ref,
+        className: styles.input,
+        ...props,
+        type: "checkbox"
+      }
+    ),
     /* @__PURE__ */ jsx("div", { className: styles.ui })
   ] });
 });

package/dist/components/Form/Controls/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\nCopyright 2023 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 classnames from \"classnames\";\nimport React, {\n  ComponentProps,\n  ComponentRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toggle.module.css\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype ToggleProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const ToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<ToggleProps>\n>(function Toggle({ className, ...props }, ref) {\n  const classes = classnames(styles.container, className);\n  return (\n    <div className={classes}>\n      <input ref={ref} className={styles.input} {...props} type=\"checkbox\" />\n      <div className={styles.ui} />\n    </div>\n  );\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ToggleControl = forwardRef<\n  ComponentRef<typeof ToggleInput>,\n  ComponentProps<typeof ToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <ToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["classnames","ToggleControl"],"mappings":";;;;;AA6Ba,MAAA,cAAc,WAGzB,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9C,QAAM,UAAUA,WAAW,OAAO,WAAW,SAAS;AAEpD,SAAA,qBAAC,OAAI,EAAA,WAAW,SACd,UAAA;AAAA,IAAC,oBAAA,SAAA,EAAM,KAAU,WAAW,OAAO,OAAQ,GAAG,OAAO,MAAK,YAAW;AAAA,IACpE,oBAAA,OAAA,EAAI,WAAW,OAAO,GAAI,CAAA;AAAA,EAAA,GAC7B;AAEJ,CAAC;AAKM,MAAM,gBAAgB,WAG3B,SAASC,eAAc,OAAO,KAAK;AAEjC,SAAA,oBAAC,WAAQ,SAAO,MACd,8BAAC,aAAY,EAAA,KAAW,GAAG,MAAA,CAAO,EACpC,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Toggle.js","sources":["../../../../../src/components/Form/Controls/Toggle/Toggle.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\nCopyright 2023 The Matrix.org Foundation C.I.C.\nCopyright 2023 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 classnames from \"classnames\";\nimport React, {\n  ComponentProps,\n  ComponentRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\nimport styles from \"./Toggle.module.css\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype ToggleProps = {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n} & Omit<ComponentProps<\"input\">, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const ToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<ToggleProps>\n>(function Toggle({ className, ...props }, ref) {\n  const classes = classnames(styles.container, className);\n  return (\n    <div className={classes}>\n      <input\n        role=\"switch\"\n        ref={ref}\n        className={styles.input}\n        {...props}\n        type=\"checkbox\"\n      />\n      <div className={styles.ui} />\n    </div>\n  );\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const ToggleControl = forwardRef<\n  ComponentRef<typeof ToggleInput>,\n  ComponentProps<typeof ToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <ToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["classnames","ToggleControl"],"mappings":";;;;;AA6Ba,MAAA,cAAc,WAGzB,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9C,QAAM,UAAUA,WAAW,OAAO,WAAW,SAAS;AAEpD,SAAA,qBAAC,OAAI,EAAA,WAAW,SACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,WAAW,OAAO;AAAA,QACjB,GAAG;AAAA,QACJ,MAAK;AAAA,MAAA;AAAA,IACP;AAAA,IACC,oBAAA,OAAA,EAAI,WAAW,OAAO,GAAI,CAAA;AAAA,EAAA,GAC7B;AAEJ,CAAC;AAKM,MAAM,gBAAgB,WAG3B,SAASC,eAAc,OAAO,KAAK;AAEjC,SAAA,oBAAC,WAAQ,SAAO,MACd,8BAAC,aAAY,EAAA,KAAW,GAAG,MAAA,CAAO,EACpC,CAAA;AAEJ,CAAC;"}

package/dist/components/Menu/Menu.cjs

@@ -42,19 +42,7 @@ const Menu = ({
     ] })
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactDropdownMenu.Root, { open, onOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      reactDropdownMenu.Content,
-      {
-        asChild: true,
-        side,
-        align,
-        sideOffset: 8,
-        onCloseAutoFocus: (event) => {
-          event.preventDefault();
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(FloatingMenu.FloatingMenu, { title, showTitle, children })
-      }
-    ) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactDropdownMenu.Content, { asChild: true, side, align, sideOffset: 8, children: /* @__PURE__ */ jsxRuntime.jsx(FloatingMenu.FloatingMenu, { title, showTitle, children }) }) })
   ] });
 };
 exports.Menu = Menu;

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.cjs","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 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, { FC, ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content\n          asChild\n          side={side}\n          align={align}\n          sideOffset={8}\n          onCloseAutoFocus={(event) => {\n            // https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content => onCloseAutoFocus\n            // Prevent the default behavior of focusing the trigger when the menu closes\n            event.preventDefault();\n          }}\n        >\n          <FloatingMenu title={title} showTitle={showTitle}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["DropdownMenuItem","platform","getPlatform","useMemo","jsx","MenuContext","jsxs","Drawer","classnames","drawerMenu","DrawerMenu","Root","Trigger","Portal","Content","FloatingMenu"],"mappings":";;;;;;;;;;;;AAoEA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,qCACGA,oCAAiB,EAAA,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAMC,aAAWC,SAAAA,YAAY;AACvB,QAAA,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAA;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACHC,+BAAAC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,SAAO,SACJC,2BAAAA,KAAAC,KAAA,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAAH,2BAAA,IAACG,KAAO,OAAA,SAAP,EAAe,SAAO,MAAE,UAAQ,SAAA;AAAA,IACjCD,2BAAAA,KAACC,KAAO,OAAA,QAAP,EACC,UAAA;AAAA,MAAAH,+BAACG,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAA,QAAW,EAAE,GAAG;AAAA,MACtDL,2BAAAA,IAACG,KAAO,OAAA,SAAP,EAAe,SAAO,MACrB,UAACH,2BAAAA,IAAAM,WAAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,EACF,CAAA,IAEAJ,2BAAAA,KAACK,kBAAAA,MAAK,EAAA,MAAY,cAChB,UAAA;AAAA,IAACP,2BAAA,IAAAQ,kBAAA,SAAA,EAAQ,SAAO,MAAE,UAAQ,SAAA;AAAA,mCACzBC,kBAAAA,QACC,EAAA,UAAAT,2BAAA;AAAA,MAACU,kBAAA;AAAA,MAAA;AAAA,QACC,SAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,kBAAkB,CAAC,UAAU;AAG3B,gBAAM,eAAe;AAAA,QACvB;AAAA,QAEA,UAACV,2BAAA,IAAAW,aAAA,cAAA,EAAa,OAAc,WACzB,SACH,CAAA;AAAA,MAAA;AAAA,IAAA,EAEJ,CAAA;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"Menu.cjs","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 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, { FC, ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content asChild side={side} align={align} sideOffset={8}>\n          <FloatingMenu title={title} showTitle={showTitle}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["DropdownMenuItem","platform","getPlatform","useMemo","jsx","MenuContext","jsxs","Drawer","classnames","drawerMenu","DrawerMenu","Root","Trigger","Portal","Content","FloatingMenu"],"mappings":";;;;;;;;;;;;AAoEA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,qCACGA,oCAAiB,EAAA,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAMC,aAAWC,SAAAA,YAAY;AACvB,QAAA,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAA;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACHC,+BAAAC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,SAAO,SACJC,2BAAAA,KAAAC,KAAA,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAAH,2BAAA,IAACG,KAAO,OAAA,SAAP,EAAe,SAAO,MAAE,UAAQ,SAAA;AAAA,IACjCD,2BAAAA,KAACC,KAAO,OAAA,QAAP,EACC,UAAA;AAAA,MAAAH,+BAACG,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAA,QAAW,EAAE,GAAG;AAAA,MACtDL,2BAAAA,IAACG,KAAO,OAAA,SAAP,EAAe,SAAO,MACrB,UAACH,2BAAAA,IAAAM,WAAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,EACF,CAAA,IAEAJ,2BAAAA,KAACK,kBAAAA,MAAK,EAAA,MAAY,cAChB,UAAA;AAAA,IAACP,2BAAA,IAAAQ,kBAAA,SAAA,EAAQ,SAAO,MAAE,UAAQ,SAAA;AAAA,mCACzBC,kBAAAA,QACC,EAAA,UAAAT,2BAAA,IAACU,kBAAQ,SAAA,EAAA,SAAO,MAAC,MAAY,OAAc,YAAY,GACrD,yCAACC,2BAAa,EAAA,OAAc,WACzB,UACH,GACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAgBtD,UAAU,KAAK;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;;;OAIG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAWD;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CAyD1B,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAgBtD,UAAU,KAAK;IACb;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;;;OAIG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC;AAWD;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,KAAK,CA+C1B,CAAC"}

package/dist/components/Menu/Menu.js

@@ -40,19 +40,7 @@ const Menu = ({
     ] })
   ] }) : /* @__PURE__ */ jsxs(Root, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx(Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
-      Content,
-      {
-        asChild: true,
-        side,
-        align,
-        sideOffset: 8,
-        onCloseAutoFocus: (event) => {
-          event.preventDefault();
-        },
-        children: /* @__PURE__ */ jsx(FloatingMenu, { title, showTitle, children })
-      }
-    ) })
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { asChild: true, side, align, sideOffset: 8, children: /* @__PURE__ */ jsx(FloatingMenu, { title, showTitle, children }) }) })
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 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, { FC, ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content\n          asChild\n          side={side}\n          align={align}\n          sideOffset={8}\n          onCloseAutoFocus={(event) => {\n            // https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content => onCloseAutoFocus\n            // Prevent the default behavior of focusing the trigger when the menu closes\n            event.preventDefault();\n          }}\n        >\n          <FloatingMenu title={title} showTitle={showTitle}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;;;;;;AAoEA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,0BACG,kBAAiB,EAAA,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAM,WAAW,YAAY;AACvB,QAAA,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACH,oBAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,SAAO,SACJ,qBAAA,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAA,oBAAC,OAAO,SAAP,EAAe,SAAO,MAAE,UAAQ,SAAA;AAAA,IACjC,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAW,WAAW,EAAE,GAAG;AAAA,MACtD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAC,oBAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,EACF,CAAA,IAEA,qBAAC,MAAK,EAAA,MAAY,cAChB,UAAA;AAAA,IAAC,oBAAA,SAAA,EAAQ,SAAO,MAAE,UAAQ,SAAA;AAAA,wBACzB,QACC,EAAA,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,kBAAkB,CAAC,UAAU;AAG3B,gBAAM,eAAe;AAAA,QACvB;AAAA,QAEA,UAAC,oBAAA,cAAA,EAAa,OAAc,WACzB,SACH,CAAA;AAAA,MAAA;AAAA,IAAA,EAEJ,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\nCopyright 2023 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, { FC, ReactNode, useMemo } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  DropdownMenuItem,\n} from \"@radix-ui/react-dropdown-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerMenu from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title. This can be hidden with `showTitle={false}` in which case it will only\n   * be a label for screen readers.\n   */\n  title: string;\n  /**\n   * Controls whether the title is displayed (see `title` prop). Titles are only displayed on\n   * web: on mobile, this parameter is ignored.\n   */\n  showTitle?: boolean;\n  /**\n   * Whether the menu is open.\n   */\n  open: boolean;\n  /**\n   * Event handler called when the open state of the menu changes. This includes\n   * anything like clicking the trigger, selecting a menu item, or dismissing\n   * the menu with the mouse or keyboard.\n   */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * The button that opens the menu. This must be a component that accepts a ref\n   * and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n  /**\n   * The side of the trigger on which to place the menu. Note that the menu may\n   * still end up on a different side than the one you request if there isn't\n   * enough space.\n   * @default bottom\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /**\n   * The edge along which the menu and trigger will be aligned.\n   * @default center\n   */\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst DropdownMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <DropdownMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </DropdownMenuItem>\n);\n\n/**\n * A menu opened by pressing a button.\n */\nexport const Menu: FC<Props> = ({\n  title,\n  showTitle = true,\n  open,\n  onOpenChange,\n  trigger,\n  children: childrenProp,\n  side = \"bottom\",\n  align = \"center\",\n}) => {\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : DropdownMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  return drawer ? (\n    <Drawer.Root open={open} onOpenChange={onOpenChange}>\n      <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>\n      <Drawer.Portal>\n        <Drawer.Overlay className={classnames(drawerMenu.bg)} />\n        <Drawer.Content asChild>\n          <DrawerMenu title={title}>{children}</DrawerMenu>\n        </Drawer.Content>\n      </Drawer.Portal>\n    </Drawer.Root>\n  ) : (\n    <Root open={open} onOpenChange={onOpenChange}>\n      <Trigger asChild>{trigger}</Trigger>\n      <Portal>\n        <Content asChild side={side} align={align} sideOffset={8}>\n          <FloatingMenu title={title} showTitle={showTitle}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;;;;;;AAoEA,MAAM,0BAAoD,CAAC;AAAA,EACzD;AAAA,EACA;AACF,0BACG,kBAAiB,EAAA,UAAU,YAAY,QAAW,SAAO,MACvD,UACH;AAMK,MAAM,OAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AACV,MAAM;AAGJ,QAAM,WAAW,YAAY;AACvB,QAAA,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACH,oBAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,SAAO,SACJ,qBAAA,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA;AAAA,IAAA,oBAAC,OAAO,SAAP,EAAe,SAAO,MAAE,UAAQ,SAAA;AAAA,IACjC,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAW,WAAW,EAAE,GAAG;AAAA,MACtD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAC,oBAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,EACF,CAAA,IAEA,qBAAC,MAAK,EAAA,MAAY,cAChB,UAAA;AAAA,IAAC,oBAAA,SAAA,EAAQ,SAAO,MAAE,UAAQ,SAAA;AAAA,wBACzB,QACC,EAAA,UAAA,oBAAC,SAAQ,EAAA,SAAO,MAAC,MAAY,OAAc,YAAY,GACrD,8BAAC,cAAa,EAAA,OAAc,WACzB,UACH,GACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "8.1.1",
+  "version": "8.2.0",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -50,6 +50,7 @@
   },
   "homepage": "https://github.com/vector-im/compound-web#readme",
   "devDependencies": {
+    "@element-hq/element-web-playwright-common": "^1.4.2",
     "@fontsource/inconsolata": "^5.0.8",
     "@fontsource/inter": "^5.0.8",
     "@playwright/test": "^1.41.1",
@@ -74,7 +75,7 @@
     "@types/react": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@vector-im/compound-design-tokens": "^4.0.0",
+    "@vector-im/compound-design-tokens": "^5.0.0",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^3.0.0",
     "browserslist-to-esbuild": "^2.0.0",
@@ -117,7 +118,7 @@
     "@fontsource/inconsolata": "^5",
     "@fontsource/inter": "^5",
     "@types/react": "*",
-    "@vector-im/compound-design-tokens": ">=1.6.1 <5.0.0",
+    "@vector-im/compound-design-tokens": ">=1.6.1 <6.0.0",
     "react": "^18 || ^19.0.0"
   },
   "peerDependenciesMeta": {

package/src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx

@@ -10,6 +10,7 @@ import {
   ComponentRef,
   forwardRef,
   PropsWithChildren,
+  useId,
 } from "react";
 import { ToggleInput } from "../Toggle";
 import { Label } from "../../Label";
@@ -48,13 +49,15 @@ export const SettingsToggleInput = forwardRef<
   { className, label, helpMessage, disabledMessage, name, ...props },
   ref,
 ) {
+  const generatedId = useId();
+  const id = props.id ?? generatedId;
   const content = (
     <InlineField
       className={className}
       name={name}
-      control={<ToggleInput ref={ref} {...props} />}
+      control={<ToggleInput id={id} ref={ref} {...props} />}
     >
-      <Label>{label}</Label>
+      <Label htmlFor={id}>{label}</Label>
       {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}
       {disabledMessage && props.disabled && (
         <HelpMessage>{disabledMessage}</HelpMessage>

package/src/components/Form/Controls/Toggle/Toggle.tsx

@@ -34,7 +34,13 @@ export const ToggleInput = forwardRef<
   const classes = classnames(styles.container, className);
   return (
     <div className={classes}>
-      <input ref={ref} className={styles.input} {...props} type="checkbox" />
+      <input
+        role="switch"
+        ref={ref}
+        className={styles.input}
+        {...props}
+        type="checkbox"
+      />
       <div className={styles.ui} />
     </div>
   );

package/src/components/Menu/Menu.tsx

@@ -117,17 +117,7 @@ export const Menu: FC<Props> = ({
     <Root open={open} onOpenChange={onOpenChange}>
       <Trigger asChild>{trigger}</Trigger>
       <Portal>
-        <Content
-          asChild
-          side={side}
-          align={align}
-          sideOffset={8}
-          onCloseAutoFocus={(event) => {
-            // https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content => onCloseAutoFocus
-            // Prevent the default behavior of focusing the trigger when the menu closes
-            event.preventDefault();
-          }}
-        >
+        <Content asChild side={side} align={align} sideOffset={8}>
           <FloatingMenu title={title} showTitle={showTitle}>
             {children}
           </FloatingMenu>