@vector-im/compound-web 8.3.6 → 9.0.0

package/dist/components/Menu/MenuTitle.js

@@ -1,16 +1,20 @@
-import { jsx } from "react/jsx-runtime";
 import { Text } from "../Typography/Text.js";
-import styles from "./MenuTitle.module.css.js";
+import MenuTitle_module_default from "./MenuTitle.module.js";
 import classNames from "classnames";
-const MenuTitle = ({
-  title,
-  id,
-  className
-}) => {
-  const classes = classNames(styles["menu-title"], className);
-  return /* @__PURE__ */ jsx(Text, { as: "h3", id, className: classes, size: "sm", weight: "semibold", children: title });
-};
-export {
-  MenuTitle
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Menu/MenuTitle.tsx
+var MenuTitle = ({ title, id, className }) => {
+	return /* @__PURE__ */ jsx(Text, {
+		as: "h3",
+		id,
+		className: classNames(MenuTitle_module_default["menu-title"], className),
+		size: "sm",
+		weight: "semibold",
+		children: title
+	});
 };
-//# sourceMappingURL=MenuTitle.js.map
+//#endregion
+export { MenuTitle };
+
+//# sourceMappingURL=MenuTitle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuTitle.js","sources":["../../../src/components/Menu/MenuTitle.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 from \"react\";\nimport { Text } from \"../Typography/Text.tsx\";\nimport styles from \"./MenuTitle.module.css\";\nimport classnames from \"classnames\";\n\ninterface MenuTitleProps {\n  /**\n   * The title of the menu.\n   */\n  title: string;\n  /**\n   * The id of the menu title.\n   */\n  id?: string;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n}\n\nexport const MenuTitle: React.FC<MenuTitleProps> = ({\n  title,\n  id,\n  className,\n}) => {\n  const classes = classnames(styles[\"menu-title\"], className);\n\n  return (\n    <Text as=\"h3\" id={id} className={classes} size=\"sm\" weight=\"semibold\">\n      {title}\n    </Text>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;AA2BO,MAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,UAAUA,WAAW,OAAO,YAAY,GAAG,SAAS;AAE1D,SACE,oBAAC,MAAA,EAAK,IAAG,MAAK,IAAQ,WAAW,SAAS,MAAK,MAAK,QAAO,YACxD,UAAA,MAAA,CACH;AAEJ;"}
+{"version":3,"file":"MenuTitle.js","names":[],"sources":["../../../src/components/Menu/MenuTitle.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 from \"react\";\nimport { Text } from \"../Typography/Text.tsx\";\nimport styles from \"./MenuTitle.module.css\";\nimport classnames from \"classnames\";\n\ninterface MenuTitleProps {\n  /**\n   * The title of the menu.\n   */\n  title: string;\n  /**\n   * The id of the menu title.\n   */\n  id?: string;\n  /**\n   * The CSS class.\n   */\n  className?: string;\n}\n\nexport const MenuTitle: React.FC<MenuTitleProps> = ({\n  title,\n  id,\n  className,\n}) => {\n  const classes = classnames(styles[\"menu-title\"], className);\n\n  return (\n    <Text as=\"h3\" id={id} className={classes} size=\"sm\" weight=\"semibold\">\n      {title}\n    </Text>\n  );\n};\n"],"mappings":";;;;;;AA2BA,IAAa,aAAuC,EAClD,OACA,IACA,gBACI;AAGJ,QACE,oBAAC,MAAD;EAAM,IAAG;EAAS;EAAI,WAHR,WAAW,yBAAO,eAAe,UAAU;EAGf,MAAK;EAAK,QAAO;YACxD;EACI,CAAA"}

package/dist/components/Menu/MenuTitle.module.cjs

@@ -0,0 +1,6 @@
+//#region src/components/Menu/MenuTitle.module.css
+var MenuTitle_module_default = { "menu-title": "_menu-title_1sgvx_8" };
+//#endregion
+exports.default = MenuTitle_module_default;
+
+//# sourceMappingURL=MenuTitle.module.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.module.cjs","names":[],"sources":["../../../src/components/Menu/MenuTitle.module.css"],"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\n.menu-title {\n  color: var(--cpd-color-text-secondary);\n  padding-inline: var(--cpd-space-4x);\n  padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));\n  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);\n  margin-block: var(--cpd-space-2x);\n}\n"],"mappings":""}

package/dist/components/Menu/MenuTitle.module.js

@@ -0,0 +1,6 @@
+//#region src/components/Menu/MenuTitle.module.css
+var MenuTitle_module_default = { "menu-title": "_menu-title_1sgvx_8" };
+//#endregion
+export { MenuTitle_module_default as default };
+
+//# sourceMappingURL=MenuTitle.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTitle.module.js","names":[],"sources":["../../../src/components/Menu/MenuTitle.module.css"],"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\n.menu-title {\n  color: var(--cpd-color-text-secondary);\n  padding-inline: var(--cpd-space-4x);\n  padding-block-end: calc(var(--cpd-space-2x) - var(--cpd-border-width-1));\n  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);\n  margin-block: var(--cpd-space-2x);\n}\n"],"mappings":""}

package/dist/components/Menu/RadioMenuItem.cjs

@@ -1,38 +1,36 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const MenuItem = require("./MenuItem.cjs");
-const Radio = require("../Form/Controls/Radio/Radio.cjs");
-const RadioMenuItem = React.forwardRef(
-  function RadioMenuItem2({ className, label, onSelect, checked, disabled }, ref) {
-    const toggleId = React.useId();
-    const onChange = React.useCallback(() => {
-    }, []);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      MenuItem.MenuItem,
-      {
-        as: "div",
-        role: "menuitemradio",
-        "aria-checked": checked,
-        className,
-        label,
-        onSelect,
-        disabled,
-        Icon: /* @__PURE__ */ jsxRuntime.jsx(
-          Radio.RadioInput,
-          {
-            id: toggleId,
-            ref,
-            "aria-hidden": true,
-            checked,
-            disabled,
-            onChange
-          }
-        )
-      }
-    );
-  }
-);
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_MenuItem = require("./MenuItem.cjs");
+const require_Radio = require("../Form/Controls/Radio/Radio.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Menu/RadioMenuItem.tsx
+/**
+* A menu item with a radio control.
+* Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+*/
+var RadioMenuItem = (0, react.forwardRef)(function RadioMenuItem({ className, label, onSelect, checked, disabled }, ref) {
+	const toggleId = (0, react.useId)();
+	const onChange = (0, react.useCallback)(() => {}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
+		as: "div",
+		role: "menuitemradio",
+		"aria-checked": checked,
+		className,
+		label,
+		onSelect,
+		disabled,
+		Icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Radio.RadioInput, {
+			id: toggleId,
+			ref,
+			"aria-hidden": true,
+			checked,
+			disabled,
+			onChange
+		})
+	});
+});
+//#endregion
 exports.RadioMenuItem = RadioMenuItem;
-//# sourceMappingURL=RadioMenuItem.cjs.map
+
+//# sourceMappingURL=RadioMenuItem.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioMenuItem.cjs","sources":["../../../src/components/Menu/RadioMenuItem.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 { RadioInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the radio is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a radio control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const RadioMenuItem = forwardRef<HTMLInputElement, Props>(\n  function RadioMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The radio 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 menuitemradio, 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=\"menuitemradio\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <RadioInput\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      ></MenuItem>\n    );\n  },\n);\n"],"names":["forwardRef","RadioMenuItem","useId","useCallback","jsx","MenuItem","RadioInput"],"mappings":";;;;;;AA8BO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,SAASC,eACP,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,MAAAA;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":"RadioMenuItem.cjs","names":[],"sources":["../../../src/components/Menu/RadioMenuItem.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 { RadioInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the radio is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a radio control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const RadioMenuItem = forwardRef<HTMLInputElement, Props>(\n  function RadioMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The radio 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 menuitemradio, 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=\"menuitemradio\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <RadioInput\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      ></MenuItem>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AA8BA,IAAa,iBAAA,GAAA,MAAA,YACX,SAAS,cACP,EAAE,WAAW,OAAO,UAAU,SAAS,YACvC,KACA;CACA,MAAM,YAAA,GAAA,MAAA,QAAkB;CAGxB,MAAM,YAAA,GAAA,MAAA,mBAA6B,IAAI,EAAE,CAAC;AAK1C,QACE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,UAAD;EACE,IAAG;EACH,MAAK;EACL,gBAAc;EACH;EACJ;EACG;EACA;EACV,MACE,iBAAA,GAAA,kBAAA,KAAC,cAAA,YAAD;GACE,IAAI;GACC;GAEL,eAAA;GACS;GACC;GACA;GACV,CAAA;EAEM,CAAA;EAGjB"}

package/dist/components/Menu/RadioMenuItem.js

@@ -1,38 +1,34 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useId, useCallback } from "react";
 import { MenuItem } from "./MenuItem.js";
 import { RadioInput } from "../Form/Controls/Radio/Radio.js";
-const RadioMenuItem = forwardRef(
-  function RadioMenuItem2({ className, label, onSelect, checked, disabled }, ref) {
-    const toggleId = useId();
-    const onChange = useCallback(() => {
-    }, []);
-    return /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        as: "div",
-        role: "menuitemradio",
-        "aria-checked": checked,
-        className,
-        label,
-        onSelect,
-        disabled,
-        Icon: /* @__PURE__ */ jsx(
-          RadioInput,
-          {
-            id: toggleId,
-            ref,
-            "aria-hidden": true,
-            checked,
-            disabled,
-            onChange
-          }
-        )
-      }
-    );
-  }
-);
-export {
-  RadioMenuItem
-};
-//# sourceMappingURL=RadioMenuItem.js.map
+import { forwardRef, useCallback, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Menu/RadioMenuItem.tsx
+/**
+* A menu item with a radio control.
+* Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+*/
+var RadioMenuItem = forwardRef(function RadioMenuItem({ className, label, onSelect, checked, disabled }, ref) {
+	const toggleId = useId();
+	const onChange = useCallback(() => {}, []);
+	return /* @__PURE__ */ jsx(MenuItem, {
+		as: "div",
+		role: "menuitemradio",
+		"aria-checked": checked,
+		className,
+		label,
+		onSelect,
+		disabled,
+		Icon: /* @__PURE__ */ jsx(RadioInput, {
+			id: toggleId,
+			ref,
+			"aria-hidden": true,
+			checked,
+			disabled,
+			onChange
+		})
+	});
+});
+//#endregion
+export { RadioMenuItem };
+
+//# sourceMappingURL=RadioMenuItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioMenuItem.js","sources":["../../../src/components/Menu/RadioMenuItem.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 { RadioInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the radio is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a radio control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const RadioMenuItem = forwardRef<HTMLInputElement, Props>(\n  function RadioMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The radio 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 menuitemradio, 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=\"menuitemradio\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <RadioInput\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      ></MenuItem>\n    );\n  },\n);\n"],"names":["RadioMenuItem"],"mappings":";;;;AA8BO,MAAM,gBAAgB;AAAA,EAC3B,SAASA,eACP,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":"RadioMenuItem.js","names":[],"sources":["../../../src/components/Menu/RadioMenuItem.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 { RadioInput } from \"../Form\";\n\ntype Props = Pick<\n  ComponentProps<typeof MenuItem>,\n  \"className\" | \"label\" | \"onSelect\" | \"disabled\"\n> & {\n  /**\n   * Whether the radio is checked.\n   */\n  checked: boolean;\n};\n\n/**\n * A menu item with a radio control.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const RadioMenuItem = forwardRef<HTMLInputElement, Props>(\n  function RadioMenuItem(\n    { className, label, onSelect, checked, disabled },\n    ref,\n  ) {\n    const toggleId = useId();\n    // The radio 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 menuitemradio, 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=\"menuitemradio\"\n        aria-checked={checked}\n        className={className}\n        label={label}\n        onSelect={onSelect}\n        disabled={disabled}\n        Icon={\n          <RadioInput\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      ></MenuItem>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AA8BA,IAAa,gBAAgB,WAC3B,SAAS,cACP,EAAE,WAAW,OAAO,UAAU,SAAS,YACvC,KACA;CACA,MAAM,WAAW,OAAO;CAGxB,MAAM,WAAW,kBAAkB,IAAI,EAAE,CAAC;AAK1C,QACE,oBAAC,UAAD;EACE,IAAG;EACH,MAAK;EACL,gBAAc;EACH;EACJ;EACG;EACA;EACV,MACE,oBAAC,YAAD;GACE,IAAI;GACC;GAEL,eAAA;GACS;GACC;GACA;GACV,CAAA;EAEM,CAAA;EAGjB"}

package/dist/components/Menu/ToggleMenuItem.cjs

@@ -1,42 +1,40 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const MenuItem = require("./MenuItem.cjs");
-const Toggle = require("../Form/Controls/Toggle/Toggle.cjs");
-const ToggleMenuItem = React.forwardRef(
-  function ToggleMenuItem2({ className, Icon, label, onSelect, checked, disabled, onClick }, ref) {
-    const toggleId = React.useId();
-    const onChange = React.useCallback(() => {
-    }, []);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      MenuItem.MenuItem,
-      {
-        as: "button",
-        role: "menuitemcheckbox",
-        "aria-checked": checked,
-        className,
-        Icon,
-        label,
-        hideChevron: true,
-        onSelect,
-        disabled,
-        onClick,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          Toggle.ToggleInput,
-          {
-            id: toggleId,
-            ref,
-            "aria-hidden": true,
-            tabIndex: -1,
-            checked,
-            disabled,
-            onChange
-          }
-        )
-      }
-    );
-  }
-);
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_MenuItem = require("./MenuItem.cjs");
+const require_Toggle = require("../Form/Controls/Toggle/Toggle.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Menu/ToggleMenuItem.tsx
+/**
+* A menu item with a toggle control.
+* Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+*/
+var ToggleMenuItem = (0, react.forwardRef)(function ToggleMenuItem({ className, Icon, label, onSelect, checked, disabled, onClick }, ref) {
+	const toggleId = (0, react.useId)();
+	const onChange = (0, react.useCallback)(() => {}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
+		as: "button",
+		role: "menuitemcheckbox",
+		"aria-checked": checked,
+		className,
+		Icon,
+		label,
+		hideChevron: true,
+		onSelect,
+		disabled,
+		onClick,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Toggle.ToggleInput, {
+			id: toggleId,
+			ref,
+			"aria-hidden": true,
+			tabIndex: -1,
+			checked,
+			disabled,
+			onChange
+		})
+	});
+});
+//#endregion
 exports.ToggleMenuItem = ToggleMenuItem;
-//# sourceMappingURL=ToggleMenuItem.cjs.map
+
+//# sourceMappingURL=ToggleMenuItem.cjs.map

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=\"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;;"}
+{"version":3,"file":"ToggleMenuItem.cjs","names":[],"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"],"mappings":";;;;;;;;;;;AA8BA,IAAa,kBAAA,GAAA,MAAA,YACX,SAAS,eACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,WACvD,KACA;CACA,MAAM,YAAA,GAAA,MAAA,QAAkB;CAGxB,MAAM,YAAA,GAAA,MAAA,mBAA6B,IAAI,EAAE,CAAC;AAK1C,QACE,iBAAA,GAAA,kBAAA,KAAC,iBAAA,UAAD;EACE,IAAG;EACH,MAAK;EACL,gBAAc;EACH;EACL;EACC;EACP,aAAA;EACU;EACA;EACD;YAET,iBAAA,GAAA,kBAAA,KAAC,eAAA,aAAD;GACE,IAAI;GACC;GAEL,eAAA;GACA,UAAU;GACD;GACC;GACA;GACV,CAAA;EACO,CAAA;EAGhB"}

package/dist/components/Menu/ToggleMenuItem.js

@@ -1,42 +1,38 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useId, useCallback } from "react";
 import { MenuItem } from "./MenuItem.js";
 import { ToggleInput } from "../Form/Controls/Toggle/Toggle.js";
-const ToggleMenuItem = forwardRef(
-  function ToggleMenuItem2({ className, Icon, label, onSelect, checked, disabled, onClick }, ref) {
-    const toggleId = useId();
-    const onChange = useCallback(() => {
-    }, []);
-    return /* @__PURE__ */ jsx(
-      MenuItem,
-      {
-        as: "button",
-        role: "menuitemcheckbox",
-        "aria-checked": checked,
-        className,
-        Icon,
-        label,
-        hideChevron: true,
-        onSelect,
-        disabled,
-        onClick,
-        children: /* @__PURE__ */ jsx(
-          ToggleInput,
-          {
-            id: toggleId,
-            ref,
-            "aria-hidden": true,
-            tabIndex: -1,
-            checked,
-            disabled,
-            onChange
-          }
-        )
-      }
-    );
-  }
-);
-export {
-  ToggleMenuItem
-};
-//# sourceMappingURL=ToggleMenuItem.js.map
+import { forwardRef, useCallback, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Menu/ToggleMenuItem.tsx
+/**
+* A menu item with a toggle control.
+* Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.
+*/
+var ToggleMenuItem = forwardRef(function ToggleMenuItem({ className, Icon, label, onSelect, checked, disabled, onClick }, ref) {
+	const toggleId = useId();
+	const onChange = useCallback(() => {}, []);
+	return /* @__PURE__ */ jsx(MenuItem, {
+		as: "button",
+		role: "menuitemcheckbox",
+		"aria-checked": checked,
+		className,
+		Icon,
+		label,
+		hideChevron: true,
+		onSelect,
+		disabled,
+		onClick,
+		children: /* @__PURE__ */ jsx(ToggleInput, {
+			id: toggleId,
+			ref,
+			"aria-hidden": true,
+			tabIndex: -1,
+			checked,
+			disabled,
+			onChange
+		})
+	});
+});
+//#endregion
+export { ToggleMenuItem };
+
+//# sourceMappingURL=ToggleMenuItem.js.map

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=\"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;"}
+{"version":3,"file":"ToggleMenuItem.js","names":[],"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"],"mappings":";;;;;;;;;AA8BA,IAAa,iBAAiB,WAC5B,SAAS,eACP,EAAE,WAAW,MAAM,OAAO,UAAU,SAAS,UAAU,WACvD,KACA;CACA,MAAM,WAAW,OAAO;CAGxB,MAAM,WAAW,kBAAkB,IAAI,EAAE,CAAC;AAK1C,QACE,oBAAC,UAAD;EACE,IAAG;EACH,MAAK;EACL,gBAAc;EACH;EACL;EACC;EACP,aAAA;EACU;EACA;EACD;YAET,oBAAC,aAAD;GACE,IAAI;GACC;GAEL,eAAA;GACA,UAAU;GACD;GACC;GACA;GACV,CAAA;EACO,CAAA;EAGhB"}

package/dist/components/Nav/Nav.module.cjs

@@ -0,0 +1,11 @@
+//#region src/components/Nav/Nav.module.css
+var Nav_module_default = {
+	"nav-bar": "_nav-bar_1e9qm_8",
+	"nav-bar-items": "_nav-bar-items_1e9qm_14",
+	"nav-tab": "_nav-tab_1e9qm_25",
+	"nav-item": "_nav-item_1e9qm_47"
+};
+//#endregion
+exports.default = Nav_module_default;
+
+//# sourceMappingURL=Nav.module.cjs.map

package/dist/components/Nav/Nav.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Nav.module.cjs","names":[],"sources":["../../../src/components/Nav/Nav.module.css"],"sourcesContent":["/* Copyright 2025 New Vector Ltd.\n * Copyright 2023 The Matrix.org Foundation C.I.C.\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\n.nav-bar {\n  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);\n  margin: var(--cpd-space-6x) 0;\n  padding: 0;\n}\n\n.nav-bar-items {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--cpd-space-3x);\n  list-style-type: \"\";\n  padding: 0;\n  margin: 0;\n}\n\n.nav-tab {\n  padding: var(--cpd-space-4x) 0;\n  position: relative;\n}\n\n/* Underline effect */\n.nav-tab::before {\n  content: \"\";\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline: 0;\n  block-size: 0;\n  border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;\n  background-color: var(--cpd-color-bg-action-primary-rest);\n  transition: height 0.1s ease-in-out;\n}\n\n.nav-tab[data-current]::before {\n  /* This is not exactly right: designs says 3px, but there are no variables for that */\n  block-size: var(--cpd-border-width-4);\n}\n\n.nav-item {\n  padding-block: var(--cpd-space-1x);\n  padding-inline: var(--cpd-space-2x);\n  border-radius: var(--cpd-radius-pill-effect);\n  cursor: pointer;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--cpd-space-2x);\n  box-sizing: border-box;\n  background: transparent;\n  border: 0;\n  font: var(--cpd-font-body-md-medium);\n  color: var(--cpd-color-text-secondary);\n  text-decoration: none;\n}\n\n@media (hover) {\n  .nav-item:not([disabled]):hover {\n    color: var(--cpd-color-text-primary);\n    background-color: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.nav-item:focus-visible {\n  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;\n}\n\n.nav-item:not([disabled]):active {\n  color: var(--cpd-color-text-primary);\n  background-color: var(--cpd-color-bg-subtle-primary);\n}\n\n.nav-item[aria-current],\n.nav-item[aria-selected=\"true\"] {\n  color: var(--cpd-color-text-primary);\n}\n\n.nav-item[disabled] {\n  cursor: not-allowed;\n\n  /* Enable pointer events for svgs even with fill=none */\n  pointer-events: all !important;\n  color: var(--cpd-color-text-disabled);\n}\n\n@media (forced-colors: active) {\n  .nav-tab[data-current]::before {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/Nav/Nav.module.js

@@ -0,0 +1,11 @@
+//#region src/components/Nav/Nav.module.css
+var Nav_module_default = {
+	"nav-bar": "_nav-bar_1e9qm_8",
+	"nav-bar-items": "_nav-bar-items_1e9qm_14",
+	"nav-tab": "_nav-tab_1e9qm_25",
+	"nav-item": "_nav-item_1e9qm_47"
+};
+//#endregion
+export { Nav_module_default as default };
+
+//# sourceMappingURL=Nav.module.js.map

package/dist/components/Nav/Nav.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Nav.module.js","names":[],"sources":["../../../src/components/Nav/Nav.module.css"],"sourcesContent":["/* Copyright 2025 New Vector Ltd.\n * Copyright 2023 The Matrix.org Foundation C.I.C.\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\n.nav-bar {\n  border-block-end: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);\n  margin: var(--cpd-space-6x) 0;\n  padding: 0;\n}\n\n.nav-bar-items {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--cpd-space-3x);\n  list-style-type: \"\";\n  padding: 0;\n  margin: 0;\n}\n\n.nav-tab {\n  padding: var(--cpd-space-4x) 0;\n  position: relative;\n}\n\n/* Underline effect */\n.nav-tab::before {\n  content: \"\";\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline: 0;\n  block-size: 0;\n  border-radius: var(--cpd-radius-pill-effect) var(--cpd-radius-pill-effect) 0 0;\n  background-color: var(--cpd-color-bg-action-primary-rest);\n  transition: height 0.1s ease-in-out;\n}\n\n.nav-tab[data-current]::before {\n  /* This is not exactly right: designs says 3px, but there are no variables for that */\n  block-size: var(--cpd-border-width-4);\n}\n\n.nav-item {\n  padding-block: var(--cpd-space-1x);\n  padding-inline: var(--cpd-space-2x);\n  border-radius: var(--cpd-radius-pill-effect);\n  cursor: pointer;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--cpd-space-2x);\n  box-sizing: border-box;\n  background: transparent;\n  border: 0;\n  font: var(--cpd-font-body-md-medium);\n  color: var(--cpd-color-text-secondary);\n  text-decoration: none;\n}\n\n@media (hover) {\n  .nav-item:not([disabled]):hover {\n    color: var(--cpd-color-text-primary);\n    background-color: var(--cpd-color-bg-subtle-secondary);\n  }\n}\n\n.nav-item:focus-visible {\n  outline: var(--cpd-color-border-focused) var(--cpd-border-width-2) solid;\n}\n\n.nav-item:not([disabled]):active {\n  color: var(--cpd-color-text-primary);\n  background-color: var(--cpd-color-bg-subtle-primary);\n}\n\n.nav-item[aria-current],\n.nav-item[aria-selected=\"true\"] {\n  color: var(--cpd-color-text-primary);\n}\n\n.nav-item[disabled] {\n  cursor: not-allowed;\n\n  /* Enable pointer events for svgs even with fill=none */\n  pointer-events: all !important;\n  color: var(--cpd-color-text-disabled);\n}\n\n@media (forced-colors: active) {\n  .nav-tab[data-current]::before {\n    outline: 1px solid transparent;\n  }\n}\n"],"mappings":""}

package/dist/components/Nav/NavBar.cjs

@@ -1,30 +1,49 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classNames = require("classnames");
-const Nav_module = require("./Nav.module.css.cjs");
-const NavBar = ({
-  children,
-  className,
-  role,
-  "aria-label": ariaLabel,
-  ...rest
-}) => {
-  const classes = classNames(className, Nav_module.default["nav-bar"]);
-  const a11yAttributesForNav = role !== "tablist" ? (
-    /**
-     * If role isn't tablist, default to navigation.
-     */
-    { role: "navigation", "aria-label": ariaLabel }
-  ) : (
-    /**
-     * If role is tablist, give nav presentation role to remove
-     * any semantic meaning.
-     */
-    { role: "presentation" }
-  );
-  const a11yAttributesForUl = role === "tablist" ? { role: "tablist", "aria-label": ariaLabel } : {};
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ...a11yAttributesForNav, ...rest, className: classes, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { ...a11yAttributesForUl, className: Nav_module.default["nav-bar-items"], children }) });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_Nav_module = require("./Nav.module.cjs");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Nav/NavBar.tsx
+/**
+* A navigation bar component
+*/
+var NavBar = ({ children, className, role, "aria-label": ariaLabel, ...rest }) => {
+	const classes = (0, classnames.default)(className, require_Nav_module.default["nav-bar"]);
+	/**
+	* We sometimes want to use this NavBar for tabs.
+	* This is done by passing `role=tablist` to this component.
+	* By default, this component is used as a navigation bar.
+	*
+	* Depending on this role, a different set of accessibility
+	* attributes need to be applied to the nav/ul element.
+	*/
+	const a11yAttributesForNav = role !== "tablist" ? {
+		role: "navigation",
+		"aria-label": ariaLabel
+	} : { role: "presentation" };
+	/**
+	* When used as tabs, the tablist role must be applied to ul.
+	* When used as navigation, no special accessibility attribute
+	* is needed for the ul element.
+	*/
+	const a11yAttributesForUl = role === "tablist" ? {
+		role: "tablist",
+		"aria-label": ariaLabel
+	} : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		...a11yAttributesForNav,
+		...rest,
+		className: classes,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			...a11yAttributesForUl,
+			className: require_Nav_module.default["nav-bar-items"],
+			children
+		})
+	});
 };
+//#endregion
 exports.NavBar = NavBar;
-//# sourceMappingURL=NavBar.cjs.map
+
+//# sourceMappingURL=NavBar.cjs.map

package/dist/components/Nav/NavBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.cjs","sources":["../../../src/components/Nav/NavBar.tsx"],"sourcesContent":["// Copyright 2025 New Vector Ltd.\n// Copyright 2023 The Matrix.org Foundation C.I.C.\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\nimport React from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Nav.module.css\";\n\ntype NavBarProps = {\n  /**\n   * The CSS class name\n   */\n  className?: string;\n\n  /**\n   * Require a label for navigation landmarks\n   */\n  \"aria-label\": string;\n\n  /**\n   * Accessibility role that defaults to navigation.\n   *\n   * If you pass tablist you must also pass `aria-controls` as prop to your NavItem and must\n   * ensure that the conditions stated in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties\n   * are met.\n   */\n  role?: \"navigation\" | \"tablist\";\n};\n\n/**\n * A navigation bar component\n */\nexport const NavBar = ({\n  children,\n  className,\n  role,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: React.PropsWithChildren<NavBarProps>) => {\n  const classes = classNames(className, styles[\"nav-bar\"]);\n  /**\n   * We sometimes want to use this NavBar for tabs.\n   * This is done by passing `role=tablist` to this component.\n   * By default, this component is used as a navigation bar.\n   *\n   * Depending on this role, a different set of accessibility\n   * attributes need to be applied to the nav/ul element.\n   */\n  const a11yAttributesForNav =\n    role !== \"tablist\"\n      ? /**\n         * If role isn't tablist, default to navigation.\n         */\n        { role: \"navigation\", \"aria-label\": ariaLabel }\n      : /**\n         * If role is tablist, give nav presentation role to remove\n         * any semantic meaning.\n         */\n        { role: \"presentation\" };\n\n  /**\n   * When used as tabs, the tablist role must be applied to ul.\n   * When used as navigation, no special accessibility attribute\n   * is needed for the ul element.\n   */\n  const a11yAttributesForUl =\n    role === \"tablist\" ? { role: \"tablist\", \"aria-label\": ariaLabel } : {};\n\n  return (\n    <nav {...a11yAttributesForNav} {...rest} className={classes}>\n      <ul {...a11yAttributesForUl} className={styles[\"nav-bar-items\"]}>\n        {children}\n      </ul>\n    </nav>\n  );\n};\n"],"names":["styles","jsx"],"mappings":";;;;;AAmCO,MAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,MAA4C;AAC1C,QAAM,UAAU,WAAW,WAAWA,WAAAA,QAAO,SAAS,CAAC;AASvD,QAAM,uBACJ,SAAS;AAAA;AAAA;AAAA;AAAA,IAIL,EAAE,MAAM,cAAc,cAAc,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKpC,EAAE,MAAM,eAAA;AAAA;AAOd,QAAM,sBACJ,SAAS,YAAY,EAAE,MAAM,WAAW,cAAc,UAAA,IAAc,CAAA;AAEtE,wCACG,OAAA,EAAK,GAAG,sBAAuB,GAAG,MAAM,WAAW,SAClD,UAAAC,2BAAAA,IAAC,MAAA,EAAI,GAAG,qBAAqB,WAAWD,WAAAA,QAAO,eAAe,GAC3D,UACH,GACF;AAEJ;;"}
+{"version":3,"file":"NavBar.cjs","names":[],"sources":["../../../src/components/Nav/NavBar.tsx"],"sourcesContent":["// Copyright 2025 New Vector Ltd.\n// Copyright 2023 The Matrix.org Foundation C.I.C.\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\nimport React from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Nav.module.css\";\n\ntype NavBarProps = {\n  /**\n   * The CSS class name\n   */\n  className?: string;\n\n  /**\n   * Require a label for navigation landmarks\n   */\n  \"aria-label\": string;\n\n  /**\n   * Accessibility role that defaults to navigation.\n   *\n   * If you pass tablist you must also pass `aria-controls` as prop to your NavItem and must\n   * ensure that the conditions stated in https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#wai-ariaroles,states,andproperties\n   * are met.\n   */\n  role?: \"navigation\" | \"tablist\";\n};\n\n/**\n * A navigation bar component\n */\nexport const NavBar = ({\n  children,\n  className,\n  role,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: React.PropsWithChildren<NavBarProps>) => {\n  const classes = classNames(className, styles[\"nav-bar\"]);\n  /**\n   * We sometimes want to use this NavBar for tabs.\n   * This is done by passing `role=tablist` to this component.\n   * By default, this component is used as a navigation bar.\n   *\n   * Depending on this role, a different set of accessibility\n   * attributes need to be applied to the nav/ul element.\n   */\n  const a11yAttributesForNav =\n    role !== \"tablist\"\n      ? /**\n         * If role isn't tablist, default to navigation.\n         */\n        { role: \"navigation\", \"aria-label\": ariaLabel }\n      : /**\n         * If role is tablist, give nav presentation role to remove\n         * any semantic meaning.\n         */\n        { role: \"presentation\" };\n\n  /**\n   * When used as tabs, the tablist role must be applied to ul.\n   * When used as navigation, no special accessibility attribute\n   * is needed for the ul element.\n   */\n  const a11yAttributesForUl =\n    role === \"tablist\" ? { role: \"tablist\", \"aria-label\": ariaLabel } : {};\n\n  return (\n    <nav {...a11yAttributesForNav} {...rest} className={classes}>\n      <ul {...a11yAttributesForUl} className={styles[\"nav-bar-items\"]}>\n        {children}\n      </ul>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAmCA,IAAa,UAAU,EACrB,UACA,WACA,MACA,cAAc,WACd,GAAG,WACuC;CAC1C,MAAM,WAAA,GAAA,WAAA,SAAqB,WAAW,mBAAA,QAAO,WAAW;;;;;;;;;CASxD,MAAM,uBACJ,SAAS,YAIL;EAAE,MAAM;EAAc,cAAc;EAAW,GAK/C,EAAE,MAAM,gBAAgB;;;;;;CAO9B,MAAM,sBACJ,SAAS,YAAY;EAAE,MAAM;EAAW,cAAc;EAAW,GAAG,EAAE;AAExE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAsB,GAAI;EAAM,WAAW;YAClD,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAI,GAAI;GAAqB,WAAW,mBAAA,QAAO;GAC5C;GACE,CAAA;EACD,CAAA"}