@vector-im/compound-web 7.7.1 → 7.8.0

package/dist/components/ActivityMarker/Pill.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Pill_module = require("./Pill.module.css.cjs");
+function Pill({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: Pill_module.default.pill, children });
+}
+exports.Pill = Pill;
+//# sourceMappingURL=Pill.cjs.map

package/dist/components/ActivityMarker/Pill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.cjs","sources":["../../../src/components/ActivityMarker/Pill.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, { HTMLProps, JSX } from \"react\";\nimport styles from \"./Pill.module.css\";\n\nexport function Pill({\n  children,\n  ...props\n}: HTMLProps<HTMLSpanElement>): JSX.Element {\n  return (\n    <span {...props} className={styles.pill}>\n      {children}\n    </span>\n  );\n}\n"],"names":["styles"],"mappings":";;;;AAUO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,wCACG,QAAM,EAAA,GAAG,OAAO,WAAWA,YAAA,QAAO,MAChC,UACH;AAEJ;;"}

package/dist/components/ActivityMarker/Pill.d.ts

@@ -0,0 +1,3 @@
+import { HTMLProps, JSX } from 'react';
+export declare function Pill({ children, ...props }: HTMLProps<HTMLSpanElement>): JSX.Element;
+//# sourceMappingURL=Pill.d.ts.map

package/dist/components/ActivityMarker/Pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../src/components/ActivityMarker/Pill.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG9C,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,eAAe,CAAC,GAAG,GAAG,CAAC,OAAO,CAM1C"}

package/dist/components/ActivityMarker/Pill.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import styles from "./Pill.module.css.js";
+function Pill({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("span", { ...props, className: styles.pill, children });
+}
+export {
+  Pill
+};
+//# sourceMappingURL=Pill.js.map

package/dist/components/ActivityMarker/Pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.js","sources":["../../../src/components/ActivityMarker/Pill.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, { HTMLProps, JSX } from \"react\";\nimport styles from \"./Pill.module.css\";\n\nexport function Pill({\n  children,\n  ...props\n}: HTMLProps<HTMLSpanElement>): JSX.Element {\n  return (\n    <span {...props} className={styles.pill}>\n      {children}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAUO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,6BACG,QAAM,EAAA,GAAG,OAAO,WAAW,OAAO,MAChC,UACH;AAEJ;"}

package/dist/components/ActivityMarker/Pill.module.css.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const pill = "_pill_1pem8_8";
+const styles = {
+  pill
+};
+exports.default = styles;
+exports.pill = pill;
+//# sourceMappingURL=Pill.module.css.cjs.map

package/dist/components/ActivityMarker/Pill.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/ActivityMarker/Pill.module.css.js

@@ -0,0 +1,9 @@
+const pill = "_pill_1pem8_8";
+const styles = {
+  pill
+};
+export {
+  styles as default,
+  pill
+};
+//# sourceMappingURL=Pill.module.css.js.map

package/dist/components/ActivityMarker/Pill.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/ActivityMarker/Unread.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Unread_module = require("./Unread.module.css.cjs");
+function Unread(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: Unread_module.default.unread, children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) });
+}
+exports.Unread = Unread;
+//# sourceMappingURL=Unread.cjs.map

package/dist/components/ActivityMarker/Unread.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Unread.cjs","sources":["../../../src/components/ActivityMarker/Unread.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, { HTMLProps } from \"react\";\nimport styles from \"./Unread.module.css\";\n\nexport function Unread(props: HTMLProps<HTMLDivElement>) {\n  return (\n    <div {...props} className={styles.unread}>\n      <div />\n    </div>\n  );\n}\n"],"names":["jsx","styles"],"mappings":";;;;AAUO,SAAS,OAAO,OAAkC;AAErD,SAAAA,2BAAA,IAAC,SAAK,GAAG,OAAO,WAAWC,cAAAA,QAAO,QAChC,UAACD,2BAAA,IAAA,OAAA,CAAA,CAAI,EACP,CAAA;AAEJ;;"}

package/dist/components/ActivityMarker/Unread.d.ts

@@ -0,0 +1,3 @@
+import { HTMLProps } from 'react';
+export declare function Unread(props: HTMLProps<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Unread.d.ts.map

package/dist/components/ActivityMarker/Unread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Unread.d.ts","sourceRoot":"","sources":["../../../src/components/ActivityMarker/Unread.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,wBAAgB,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,cAAc,CAAC,2CAMtD"}

package/dist/components/ActivityMarker/Unread.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import styles from "./Unread.module.css.js";
+function Unread(props) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: styles.unread, children: /* @__PURE__ */ jsx("div", {}) });
+}
+export {
+  Unread
+};
+//# sourceMappingURL=Unread.js.map

package/dist/components/ActivityMarker/Unread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Unread.js","sources":["../../../src/components/ActivityMarker/Unread.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, { HTMLProps } from \"react\";\nimport styles from \"./Unread.module.css\";\n\nexport function Unread(props: HTMLProps<HTMLDivElement>) {\n  return (\n    <div {...props} className={styles.unread}>\n      <div />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAUO,SAAS,OAAO,OAAkC;AAErD,SAAA,oBAAC,SAAK,GAAG,OAAO,WAAW,OAAO,QAChC,UAAC,oBAAA,OAAA,CAAA,CAAI,EACP,CAAA;AAEJ;"}

package/dist/components/ActivityMarker/Unread.module.css.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const unread = "_unread_1k06b_8";
+const styles = {
+  unread
+};
+exports.default = styles;
+exports.unread = unread;
+//# sourceMappingURL=Unread.module.css.cjs.map

package/dist/components/ActivityMarker/Unread.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Unread.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/ActivityMarker/Unread.module.css.js

@@ -0,0 +1,9 @@
+const unread = "_unread_1k06b_8";
+const styles = {
+  unread
+};
+export {
+  styles as default,
+  unread
+};
+//# sourceMappingURL=Unread.module.css.js.map

package/dist/components/ActivityMarker/Unread.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Unread.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/ActivityMarker/UnreadCounter.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const UnreadCounter_module = require("./UnreadCounter.module.css.cjs");
+function UnreadCounter({ count, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: UnreadCounter_module.default["unread-counter"], children: count });
+}
+exports.UnreadCounter = UnreadCounter;
+//# sourceMappingURL=UnreadCounter.cjs.map

package/dist/components/ActivityMarker/UnreadCounter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadCounter.cjs","sources":["../../../src/components/ActivityMarker/UnreadCounter.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, { HTMLProps } from \"react\";\nimport styles from \"./UnreadCounter.module.css\";\n\ninterface UnreadCounterProps extends HTMLProps<HTMLSpanElement> {\n  count: string | number;\n}\n\nexport function UnreadCounter({ count, ...props }: UnreadCounterProps) {\n  return (\n    <span {...props} className={styles[\"unread-counter\"]}>\n      {count}\n    </span>\n  );\n}\n"],"names":["jsx","styles"],"mappings":";;;;AAcO,SAAS,cAAc,EAAE,OAAO,GAAG,SAA6B;AAEnE,SAAAA,+BAAC,UAAM,GAAG,OAAO,WAAWC,qBAAO,QAAA,gBAAgB,GAChD,UACH,OAAA;AAEJ;;"}

package/dist/components/ActivityMarker/UnreadCounter.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps } from 'react';
+interface UnreadCounterProps extends HTMLProps<HTMLSpanElement> {
+    count: string | number;
+}
+export declare function UnreadCounter({ count, ...props }: UnreadCounterProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UnreadCounter.d.ts.map

package/dist/components/ActivityMarker/UnreadCounter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadCounter.d.ts","sourceRoot":"","sources":["../../../src/components/ActivityMarker/UnreadCounter.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,UAAU,kBAAmB,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC7D,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAMpE"}

package/dist/components/ActivityMarker/UnreadCounter.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import styles from "./UnreadCounter.module.css.js";
+function UnreadCounter({ count, ...props }) {
+  return /* @__PURE__ */ jsx("span", { ...props, className: styles["unread-counter"], children: count });
+}
+export {
+  UnreadCounter
+};
+//# sourceMappingURL=UnreadCounter.js.map

package/dist/components/ActivityMarker/UnreadCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadCounter.js","sources":["../../../src/components/ActivityMarker/UnreadCounter.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, { HTMLProps } from \"react\";\nimport styles from \"./UnreadCounter.module.css\";\n\ninterface UnreadCounterProps extends HTMLProps<HTMLSpanElement> {\n  count: string | number;\n}\n\nexport function UnreadCounter({ count, ...props }: UnreadCounterProps) {\n  return (\n    <span {...props} className={styles[\"unread-counter\"]}>\n      {count}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAcO,SAAS,cAAc,EAAE,OAAO,GAAG,SAA6B;AAEnE,SAAA,oBAAC,UAAM,GAAG,OAAO,WAAW,OAAO,gBAAgB,GAChD,UACH,OAAA;AAEJ;"}

package/dist/components/ActivityMarker/UnreadCounter.module.css.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const styles = {
+  "unread-counter": "_unread-counter_1ibqq_8"
+};
+exports.default = styles;
+//# sourceMappingURL=UnreadCounter.module.css.cjs.map

package/dist/components/ActivityMarker/UnreadCounter.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadCounter.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/ActivityMarker/UnreadCounter.module.css.js

@@ -0,0 +1,7 @@
+const styles = {
+  "unread-counter": "_unread-counter_1ibqq_8"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=UnreadCounter.module.css.js.map

package/dist/components/ActivityMarker/UnreadCounter.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnreadCounter.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/ActivityMarker/index.d.ts

@@ -0,0 +1,4 @@
+export { UnreadCounter } from './UnreadCounter.tsx';
+export { Pill } from './Pill';
+export { Unread } from './Unread';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ActivityMarker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ActivityMarker/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

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

@@ -10,7 +10,7 @@ export declare const CheckboxMenuItem: React.ForwardRefExoticComponent<Pick<{
     label: string | null;
     labelProps?: React.ComponentPropsWithoutRef<typeof import('../..').Text>;
     onSelect: ((e: Event) => void) | null;
-    onClick?: React.MouseEventHandler<"a" | "button" | "div"> | undefined;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement> | undefined;
     kind?: "primary" | "critical";
     disabled?: boolean;
     hideChevron?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/Menu/MenuItem.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 classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  ElementType,\n  isValidElement,\n  ReactElement,\n  SVGAttributes,\n  useCallback,\n  useContext,\n  MouseEventHandler,\n} from \"react\";\nimport styles from \"./MenuItem.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport ChevronRightIcon from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-right\";\nimport { MenuContext } from \"./MenuContext\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype MenuItemElement = \"button\" | \"a\" | \"div\";\n\ntype Props<C extends MenuItemElement> = {\n  /**\n   * The element type of this menu item.\n   * @default button\n   */\n  as?: C;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon to show on this menu item.\n   * When `Icon` is a ReactElement, it should spread the props\n   */\n  Icon: ComponentType<SVGAttributes<SVGElement>> | ReactElement;\n  /**\n   * The label to show on this menu item.\n   */\n  // This prop is required because it's rare to not want a label\n  label: string | null;\n  /**\n   * Additional properties to pass to the Text label component.\n   */\n  labelProps?: ComponentPropsWithoutRef<typeof Text>;\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  // This prop is required because it's rare to not want a selection handler\n  onSelect: ((e: Event) => void) | null;\n  /**\n   * Event callback for when the item is clicked.\n   * @param e\n   */\n  onClick?: MouseEventHandler<C>;\n  /**\n   * The color variant of the menu item.\n   * @default primary\n   */\n  kind?: \"primary\" | \"critical\";\n  disabled?: boolean;\n  /**\n   * Whether to hide the chevron navigation hint.\n   */\n  hideChevron?: boolean;\n} & Omit<ComponentPropsWithoutRef<C>, \"onSelect\" | \"onClick\">;\n\n/**\n * An item within a menu, acting either as a navigation button, or simply a\n * container for other interactive elements.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const MenuItem = <C extends MenuItemElement = \"button\">({\n  as,\n  className,\n  Icon,\n  label,\n  labelProps,\n  onSelect,\n  kind = \"primary\",\n  children,\n  onClick: onClickProp,\n  disabled,\n  hideChevron,\n  ...props\n}: Props<C>): React.ReactElement => {\n  const Component = as ?? (\"button\" as ElementType);\n  const context = useContext(MenuContext);\n\n  const onClick = useCallback(\n    (e: Parameters<Exclude<typeof onClickProp, undefined>>[0]) => {\n      (onClickProp as ((e_: typeof e) => void) | undefined)?.(e);\n      // If there is no wrapper component to automatically handle onSelect, we\n      // need to handle it manually, dismissing the menu as the default action\n      if (onSelect !== null && context?.MenuItemWrapper == null) {\n        const selectEvent = new CustomEvent(\"menu.itemSelect\", {\n          bubbles: true,\n          cancelable: true,\n        });\n        onSelect(selectEvent);\n        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);\n      }\n    },\n    [context, onSelect],\n  );\n\n  const iconIsReactElement = isValidElement(Icon);\n  const componentIcon = Icon as ReactElement;\n  const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;\n\n  const content = (\n    <Component\n      role=\"menuitem\"\n      {...props}\n      className={classnames(className, styles.item, {\n        [styles.interactive]: onSelect !== null,\n        [styles[\"no-label\"]]: label === null,\n        [styles[\"disabled\"]]: disabled,\n      })}\n      data-kind={kind}\n      onClick={onClick}\n      disabled={Component === \"button\" ? disabled : undefined}\n      aria-disabled={Component === \"button\" ? undefined : disabled}\n    >\n      {iconIsReactElement ? (\n        <Slot className={styles.icon}>{componentIcon}</Slot>\n      ) : (\n        <SvgIcon\n          width={24}\n          height={24}\n          className={styles.icon}\n          aria-hidden={true}\n        />\n      )}\n\n      {label !== null && (\n        <Text\n          className={styles.label}\n          size=\"md\"\n          weight=\"medium\"\n          as=\"span\"\n          {...labelProps}\n        >\n          {label}\n        </Text>\n      )}\n      {/* We use CSS to swap between this navigation hint and the provided\n      children on hover - see the styles module. */}\n      {!hideChevron && (Component === \"button\" || Component === \"a\") && (\n        <ChevronRightIcon\n          width={8}\n          height={24}\n          className={styles[\"nav-hint\"]}\n          aria-hidden={true}\n          /* The SVG is a small icon in a large canvas. It probably ought to be\n             cropped, but we can adjust the viewBox here to chop off the horizontal\n             space to get it closer to the right hand edge.\n           */\n          viewBox=\"8 0 8 24\"\n        />\n      )}\n      {children}\n    </Component>\n  );\n\n  return context?.MenuItemWrapper == null || onSelect === null ? (\n    content\n  ) : (\n    <context.MenuItemWrapper onSelect={onSelect}>\n      {content}\n    </context.MenuItemWrapper>\n  );\n};\n"],"names":["useContext","MenuContext","useCallback","isValidElement","jsxs","classnames","styles","Slot","jsx","Text"],"mappings":";;;;;;;;;;AAgFO,MAAM,WAAW,CAAuC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoC;AAClC,QAAM,YAAY,MAAO;AACnB,QAAA,UAAUA,iBAAWC,uBAAW;AAEtC,QAAM,UAAUC,MAAA;AAAA,IACd,CAAC,MAA6D;AAC3D,oBAAuD,CAAC;AAGzD,UAAI,aAAa,QAAQ,SAAS,mBAAmB,MAAM;AACnD,cAAA,cAAc,IAAI,YAAY,mBAAmB;AAAA,UACrD,SAAS;AAAA,UACT,YAAY;AAAA,QAAA,CACb;AACD,iBAAS,WAAW;AACpB,YAAI,CAAC,YAAY,iBAAkB,UAAS,aAAa,KAAK;AAAA,MAAA;AAAA,IAElE;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEM,QAAA,qBAAqBC,qBAAe,IAAI;AAC9C,QAAM,gBAAgB;AACtB,QAAM,UAAU;AAEhB,QAAM,UACJC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWC,WAAW,WAAWC,gBAAAA,QAAO,MAAM;AAAA,QAC5C,CAACA,gBAAA,QAAO,WAAW,GAAG,aAAa;AAAA,QACnC,CAACA,wBAAO,UAAU,CAAC,GAAG,UAAU;AAAA,QAChC,CAACA,gBAAAA,QAAO,UAAU,CAAC,GAAG;AAAA,MAAA,CACvB;AAAA,MACD,aAAW;AAAA,MACX;AAAA,MACA,UAAU,cAAc,WAAW,WAAW;AAAA,MAC9C,iBAAe,cAAc,WAAW,SAAY;AAAA,MAEnD,UAAA;AAAA,QAAA,oDACEC,UAAK,MAAA,EAAA,WAAWD,wBAAO,MAAO,wBAAc,CAAA,IAE7CE,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWF,gBAAO,QAAA;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QACf;AAAA,QAGD,UAAU,QACTE,2BAAA;AAAA,UAACC,KAAA;AAAA,UAAA;AAAA,YACC,WAAWH,gBAAO,QAAA;AAAA,YAClB,MAAK;AAAA,YACL,QAAO;AAAA,YACP,IAAG;AAAA,YACF,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAID,CAAC,gBAAgB,cAAc,YAAY,cAAc,QACxDE,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWF,wBAAO,UAAU;AAAA,YAC5B,eAAa;AAAA,YAKb,SAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGK,SAAA,SAAS,mBAAmB,QAAQ,aAAa,OACtD,UAEAE,+BAAC,QAAQ,iBAAR,EAAwB,UACtB,UACH,QAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../src/components/Menu/MenuItem.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 classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  ElementType,\n  isValidElement,\n  ReactElement,\n  SVGAttributes,\n  useCallback,\n  useContext,\n  MouseEventHandler,\n} from \"react\";\nimport styles from \"./MenuItem.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport ChevronRightIcon from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-right\";\nimport { MenuContext } from \"./MenuContext\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype MenuItemElement = \"button\" | \"a\" | \"div\";\n\ntype Props<C extends MenuItemElement> = {\n  /**\n   * The element type of this menu item.\n   * @default button\n   */\n  as?: C;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon to show on this menu item.\n   * When `Icon` is a ReactElement, it should spread the props\n   */\n  Icon: ComponentType<SVGAttributes<SVGElement>> | ReactElement;\n  /**\n   * The label to show on this menu item.\n   */\n  // This prop is required because it's rare to not want a label\n  label: string | null;\n  /**\n   * Additional properties to pass to the Text label component.\n   */\n  labelProps?: ComponentPropsWithoutRef<typeof Text>;\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  // This prop is required because it's rare to not want a selection handler\n  onSelect: ((e: Event) => void) | null;\n  /**\n   * Event callback for when the item is clicked.\n   * @param e\n   */\n  onClick?: MouseEventHandler<HTMLElementTagNameMap[C]>;\n  /**\n   * The color variant of the menu item.\n   * @default primary\n   */\n  kind?: \"primary\" | \"critical\";\n  disabled?: boolean;\n  /**\n   * Whether to hide the chevron navigation hint.\n   */\n  hideChevron?: boolean;\n} & Omit<ComponentPropsWithoutRef<C>, \"onSelect\" | \"onClick\">;\n\n/**\n * An item within a menu, acting either as a navigation button, or simply a\n * container for other interactive elements.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const MenuItem = <C extends MenuItemElement = \"button\">({\n  as,\n  className,\n  Icon,\n  label,\n  labelProps,\n  onSelect,\n  kind = \"primary\",\n  children,\n  onClick: onClickProp,\n  disabled,\n  hideChevron,\n  ...props\n}: Props<C>): React.ReactElement => {\n  const Component = as ?? (\"button\" as ElementType);\n  const context = useContext(MenuContext);\n\n  const onClick = useCallback(\n    (e: Parameters<Exclude<typeof onClickProp, undefined>>[0]) => {\n      (onClickProp as ((e_: typeof e) => void) | undefined)?.(e);\n      // If there is no wrapper component to automatically handle onSelect, we\n      // need to handle it manually, dismissing the menu as the default action\n      if (onSelect !== null && context?.MenuItemWrapper == null) {\n        const selectEvent = new CustomEvent(\"menu.itemSelect\", {\n          bubbles: true,\n          cancelable: true,\n        });\n        onSelect(selectEvent);\n        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);\n      }\n    },\n    [context, onSelect],\n  );\n\n  const iconIsReactElement = isValidElement(Icon);\n  const componentIcon = Icon as ReactElement;\n  const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;\n\n  const content = (\n    <Component\n      role=\"menuitem\"\n      {...props}\n      className={classnames(className, styles.item, {\n        [styles.interactive]: onSelect !== null,\n        [styles[\"no-label\"]]: label === null,\n        [styles[\"disabled\"]]: disabled,\n      })}\n      data-kind={kind}\n      onClick={onClick}\n      disabled={Component === \"button\" ? disabled : undefined}\n      aria-disabled={Component === \"button\" ? undefined : disabled}\n    >\n      {iconIsReactElement ? (\n        <Slot className={styles.icon}>{componentIcon}</Slot>\n      ) : (\n        <SvgIcon\n          width={24}\n          height={24}\n          className={styles.icon}\n          aria-hidden={true}\n        />\n      )}\n\n      {label !== null && (\n        <Text\n          className={styles.label}\n          size=\"md\"\n          weight=\"medium\"\n          as=\"span\"\n          {...labelProps}\n        >\n          {label}\n        </Text>\n      )}\n      {/* We use CSS to swap between this navigation hint and the provided\n      children on hover - see the styles module. */}\n      {!hideChevron && (Component === \"button\" || Component === \"a\") && (\n        <ChevronRightIcon\n          width={8}\n          height={24}\n          className={styles[\"nav-hint\"]}\n          aria-hidden={true}\n          /* The SVG is a small icon in a large canvas. It probably ought to be\n             cropped, but we can adjust the viewBox here to chop off the horizontal\n             space to get it closer to the right hand edge.\n           */\n          viewBox=\"8 0 8 24\"\n        />\n      )}\n      {children}\n    </Component>\n  );\n\n  return context?.MenuItemWrapper == null || onSelect === null ? (\n    content\n  ) : (\n    <context.MenuItemWrapper onSelect={onSelect}>\n      {content}\n    </context.MenuItemWrapper>\n  );\n};\n"],"names":["useContext","MenuContext","useCallback","isValidElement","jsxs","classnames","styles","Slot","jsx","Text"],"mappings":";;;;;;;;;;AAgFO,MAAM,WAAW,CAAuC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoC;AAClC,QAAM,YAAY,MAAO;AACnB,QAAA,UAAUA,iBAAWC,uBAAW;AAEtC,QAAM,UAAUC,MAAA;AAAA,IACd,CAAC,MAA6D;AAC3D,oBAAuD,CAAC;AAGzD,UAAI,aAAa,QAAQ,SAAS,mBAAmB,MAAM;AACnD,cAAA,cAAc,IAAI,YAAY,mBAAmB;AAAA,UACrD,SAAS;AAAA,UACT,YAAY;AAAA,QAAA,CACb;AACD,iBAAS,WAAW;AACpB,YAAI,CAAC,YAAY,iBAAkB,UAAS,aAAa,KAAK;AAAA,MAAA;AAAA,IAElE;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEM,QAAA,qBAAqBC,qBAAe,IAAI;AAC9C,QAAM,gBAAgB;AACtB,QAAM,UAAU;AAEhB,QAAM,UACJC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWC,WAAW,WAAWC,gBAAAA,QAAO,MAAM;AAAA,QAC5C,CAACA,gBAAA,QAAO,WAAW,GAAG,aAAa;AAAA,QACnC,CAACA,wBAAO,UAAU,CAAC,GAAG,UAAU;AAAA,QAChC,CAACA,gBAAAA,QAAO,UAAU,CAAC,GAAG;AAAA,MAAA,CACvB;AAAA,MACD,aAAW;AAAA,MACX;AAAA,MACA,UAAU,cAAc,WAAW,WAAW;AAAA,MAC9C,iBAAe,cAAc,WAAW,SAAY;AAAA,MAEnD,UAAA;AAAA,QAAA,oDACEC,UAAK,MAAA,EAAA,WAAWD,wBAAO,MAAO,wBAAc,CAAA,IAE7CE,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWF,gBAAO,QAAA;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QACf;AAAA,QAGD,UAAU,QACTE,2BAAA;AAAA,UAACC,KAAA;AAAA,UAAA;AAAA,YACC,WAAWH,gBAAO,QAAA;AAAA,YAClB,MAAK;AAAA,YACL,QAAO;AAAA,YACP,IAAG;AAAA,YACF,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAID,CAAC,gBAAgB,cAAc,YAAY,cAAc,QACxDE,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAWF,wBAAO,UAAU;AAAA,YAC5B,eAAa;AAAA,YAKb,SAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGK,SAAA,SAAS,mBAAmB,QAAQ,aAAa,OACtD,UAEAE,+BAAC,QAAQ,iBAAR,EAAwB,UACtB,UACH,QAAA,CAAA;AAEJ;;"}

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

@@ -34,7 +34,7 @@ type Props<C extends MenuItemElement> = {
      * Event callback for when the item is clicked.
      * @param e
      */
-    onClick?: MouseEventHandler<C>;
+    onClick?: MouseEventHandler<HTMLElementTagNameMap[C]>;
     /**
      * The color variant of the menu item.
      * @default primary

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EACxB,aAAa,EAGb,YAAY,EACZ,aAAa,EAGb,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAK1C,KAAK,eAAe,GAAG,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAC;AAE9C,KAAK,KAAK,CAAC,CAAC,SAAS,eAAe,IAAI;IACtC;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,GAAG,YAAY,CAAC;IAC9D;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC;IACnD;;;;OAIG;IAEH,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAE9D;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,eAAe,0IAa/C,KAAK,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YAuFnB,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EACZ,wBAAwB,EACxB,aAAa,EAGb,YAAY,EACZ,aAAa,EAGb,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAK1C,KAAK,eAAe,GAAG,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAC;AAE9C,KAAK,KAAK,CAAC,CAAC,SAAS,eAAe,IAAI;IACtC;;;OAGG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,GAAG,YAAY,CAAC;IAC9D;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAC,OAAO,IAAI,CAAC,CAAC;IACnD;;;;OAIG;IAEH,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;IACtD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AAE9D;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,eAAe,0IAa/C,KAAK,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YAuFnB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../src/components/Menu/MenuItem.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 classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  ElementType,\n  isValidElement,\n  ReactElement,\n  SVGAttributes,\n  useCallback,\n  useContext,\n  MouseEventHandler,\n} from \"react\";\nimport styles from \"./MenuItem.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport ChevronRightIcon from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-right\";\nimport { MenuContext } from \"./MenuContext\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype MenuItemElement = \"button\" | \"a\" | \"div\";\n\ntype Props<C extends MenuItemElement> = {\n  /**\n   * The element type of this menu item.\n   * @default button\n   */\n  as?: C;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon to show on this menu item.\n   * When `Icon` is a ReactElement, it should spread the props\n   */\n  Icon: ComponentType<SVGAttributes<SVGElement>> | ReactElement;\n  /**\n   * The label to show on this menu item.\n   */\n  // This prop is required because it's rare to not want a label\n  label: string | null;\n  /**\n   * Additional properties to pass to the Text label component.\n   */\n  labelProps?: ComponentPropsWithoutRef<typeof Text>;\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  // This prop is required because it's rare to not want a selection handler\n  onSelect: ((e: Event) => void) | null;\n  /**\n   * Event callback for when the item is clicked.\n   * @param e\n   */\n  onClick?: MouseEventHandler<C>;\n  /**\n   * The color variant of the menu item.\n   * @default primary\n   */\n  kind?: \"primary\" | \"critical\";\n  disabled?: boolean;\n  /**\n   * Whether to hide the chevron navigation hint.\n   */\n  hideChevron?: boolean;\n} & Omit<ComponentPropsWithoutRef<C>, \"onSelect\" | \"onClick\">;\n\n/**\n * An item within a menu, acting either as a navigation button, or simply a\n * container for other interactive elements.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const MenuItem = <C extends MenuItemElement = \"button\">({\n  as,\n  className,\n  Icon,\n  label,\n  labelProps,\n  onSelect,\n  kind = \"primary\",\n  children,\n  onClick: onClickProp,\n  disabled,\n  hideChevron,\n  ...props\n}: Props<C>): React.ReactElement => {\n  const Component = as ?? (\"button\" as ElementType);\n  const context = useContext(MenuContext);\n\n  const onClick = useCallback(\n    (e: Parameters<Exclude<typeof onClickProp, undefined>>[0]) => {\n      (onClickProp as ((e_: typeof e) => void) | undefined)?.(e);\n      // If there is no wrapper component to automatically handle onSelect, we\n      // need to handle it manually, dismissing the menu as the default action\n      if (onSelect !== null && context?.MenuItemWrapper == null) {\n        const selectEvent = new CustomEvent(\"menu.itemSelect\", {\n          bubbles: true,\n          cancelable: true,\n        });\n        onSelect(selectEvent);\n        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);\n      }\n    },\n    [context, onSelect],\n  );\n\n  const iconIsReactElement = isValidElement(Icon);\n  const componentIcon = Icon as ReactElement;\n  const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;\n\n  const content = (\n    <Component\n      role=\"menuitem\"\n      {...props}\n      className={classnames(className, styles.item, {\n        [styles.interactive]: onSelect !== null,\n        [styles[\"no-label\"]]: label === null,\n        [styles[\"disabled\"]]: disabled,\n      })}\n      data-kind={kind}\n      onClick={onClick}\n      disabled={Component === \"button\" ? disabled : undefined}\n      aria-disabled={Component === \"button\" ? undefined : disabled}\n    >\n      {iconIsReactElement ? (\n        <Slot className={styles.icon}>{componentIcon}</Slot>\n      ) : (\n        <SvgIcon\n          width={24}\n          height={24}\n          className={styles.icon}\n          aria-hidden={true}\n        />\n      )}\n\n      {label !== null && (\n        <Text\n          className={styles.label}\n          size=\"md\"\n          weight=\"medium\"\n          as=\"span\"\n          {...labelProps}\n        >\n          {label}\n        </Text>\n      )}\n      {/* We use CSS to swap between this navigation hint and the provided\n      children on hover - see the styles module. */}\n      {!hideChevron && (Component === \"button\" || Component === \"a\") && (\n        <ChevronRightIcon\n          width={8}\n          height={24}\n          className={styles[\"nav-hint\"]}\n          aria-hidden={true}\n          /* The SVG is a small icon in a large canvas. It probably ought to be\n             cropped, but we can adjust the viewBox here to chop off the horizontal\n             space to get it closer to the right hand edge.\n           */\n          viewBox=\"8 0 8 24\"\n        />\n      )}\n      {children}\n    </Component>\n  );\n\n  return context?.MenuItemWrapper == null || onSelect === null ? (\n    content\n  ) : (\n    <context.MenuItemWrapper onSelect={onSelect}>\n      {content}\n    </context.MenuItemWrapper>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;;;;AAgFO,MAAM,WAAW,CAAuC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoC;AAClC,QAAM,YAAY,MAAO;AACnB,QAAA,UAAU,WAAW,WAAW;AAEtC,QAAM,UAAU;AAAA,IACd,CAAC,MAA6D;AAC3D,oBAAuD,CAAC;AAGzD,UAAI,aAAa,QAAQ,SAAS,mBAAmB,MAAM;AACnD,cAAA,cAAc,IAAI,YAAY,mBAAmB;AAAA,UACrD,SAAS;AAAA,UACT,YAAY;AAAA,QAAA,CACb;AACD,iBAAS,WAAW;AACpB,YAAI,CAAC,YAAY,iBAAkB,UAAS,aAAa,KAAK;AAAA,MAAA;AAAA,IAElE;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEM,QAAA,qBAAqB,eAAe,IAAI;AAC9C,QAAM,gBAAgB;AACtB,QAAM,UAAU;AAEhB,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWA,WAAW,WAAW,OAAO,MAAM;AAAA,QAC5C,CAAC,OAAO,WAAW,GAAG,aAAa;AAAA,QACnC,CAAC,OAAO,UAAU,CAAC,GAAG,UAAU;AAAA,QAChC,CAAC,OAAO,UAAU,CAAC,GAAG;AAAA,MAAA,CACvB;AAAA,MACD,aAAW;AAAA,MACX;AAAA,MACA,UAAU,cAAc,WAAW,WAAW;AAAA,MAC9C,iBAAe,cAAc,WAAW,SAAY;AAAA,MAEnD,UAAA;AAAA,QAAA,yCACE,MAAK,EAAA,WAAW,OAAO,MAAO,wBAAc,CAAA,IAE7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QACf;AAAA,QAGD,UAAU,QACT;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,MAAK;AAAA,YACL,QAAO;AAAA,YACP,IAAG;AAAA,YACF,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAID,CAAC,gBAAgB,cAAc,YAAY,cAAc,QACxD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO,UAAU;AAAA,YAC5B,eAAa;AAAA,YAKb,SAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGK,SAAA,SAAS,mBAAmB,QAAQ,aAAa,OACtD,UAEA,oBAAC,QAAQ,iBAAR,EAAwB,UACtB,UACH,QAAA,CAAA;AAEJ;"}
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/Menu/MenuItem.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 classnames from \"classnames\";\nimport React, {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  ElementType,\n  isValidElement,\n  ReactElement,\n  SVGAttributes,\n  useCallback,\n  useContext,\n  MouseEventHandler,\n} from \"react\";\nimport styles from \"./MenuItem.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport ChevronRightIcon from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-right\";\nimport { MenuContext } from \"./MenuContext\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\ntype MenuItemElement = \"button\" | \"a\" | \"div\";\n\ntype Props<C extends MenuItemElement> = {\n  /**\n   * The element type of this menu item.\n   * @default button\n   */\n  as?: C;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The icon to show on this menu item.\n   * When `Icon` is a ReactElement, it should spread the props\n   */\n  Icon: ComponentType<SVGAttributes<SVGElement>> | ReactElement;\n  /**\n   * The label to show on this menu item.\n   */\n  // This prop is required because it's rare to not want a label\n  label: string | null;\n  /**\n   * Additional properties to pass to the Text label component.\n   */\n  labelProps?: ComponentPropsWithoutRef<typeof Text>;\n  /**\n   * Event callback for when the item is selected via mouse, touch, or keyboard.\n   * Calling event.preventDefault in this handler will prevent the menu from\n   * being dismissed.\n   */\n  // This prop is required because it's rare to not want a selection handler\n  onSelect: ((e: Event) => void) | null;\n  /**\n   * Event callback for when the item is clicked.\n   * @param e\n   */\n  onClick?: MouseEventHandler<HTMLElementTagNameMap[C]>;\n  /**\n   * The color variant of the menu item.\n   * @default primary\n   */\n  kind?: \"primary\" | \"critical\";\n  disabled?: boolean;\n  /**\n   * Whether to hide the chevron navigation hint.\n   */\n  hideChevron?: boolean;\n} & Omit<ComponentPropsWithoutRef<C>, \"onSelect\" | \"onClick\">;\n\n/**\n * An item within a menu, acting either as a navigation button, or simply a\n * container for other interactive elements.\n * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree.\n */\nexport const MenuItem = <C extends MenuItemElement = \"button\">({\n  as,\n  className,\n  Icon,\n  label,\n  labelProps,\n  onSelect,\n  kind = \"primary\",\n  children,\n  onClick: onClickProp,\n  disabled,\n  hideChevron,\n  ...props\n}: Props<C>): React.ReactElement => {\n  const Component = as ?? (\"button\" as ElementType);\n  const context = useContext(MenuContext);\n\n  const onClick = useCallback(\n    (e: Parameters<Exclude<typeof onClickProp, undefined>>[0]) => {\n      (onClickProp as ((e_: typeof e) => void) | undefined)?.(e);\n      // If there is no wrapper component to automatically handle onSelect, we\n      // need to handle it manually, dismissing the menu as the default action\n      if (onSelect !== null && context?.MenuItemWrapper == null) {\n        const selectEvent = new CustomEvent(\"menu.itemSelect\", {\n          bubbles: true,\n          cancelable: true,\n        });\n        onSelect(selectEvent);\n        if (!selectEvent.defaultPrevented) context?.onOpenChange(false);\n      }\n    },\n    [context, onSelect],\n  );\n\n  const iconIsReactElement = isValidElement(Icon);\n  const componentIcon = Icon as ReactElement;\n  const SvgIcon = Icon as ComponentType<SVGAttributes<SVGElement>>;\n\n  const content = (\n    <Component\n      role=\"menuitem\"\n      {...props}\n      className={classnames(className, styles.item, {\n        [styles.interactive]: onSelect !== null,\n        [styles[\"no-label\"]]: label === null,\n        [styles[\"disabled\"]]: disabled,\n      })}\n      data-kind={kind}\n      onClick={onClick}\n      disabled={Component === \"button\" ? disabled : undefined}\n      aria-disabled={Component === \"button\" ? undefined : disabled}\n    >\n      {iconIsReactElement ? (\n        <Slot className={styles.icon}>{componentIcon}</Slot>\n      ) : (\n        <SvgIcon\n          width={24}\n          height={24}\n          className={styles.icon}\n          aria-hidden={true}\n        />\n      )}\n\n      {label !== null && (\n        <Text\n          className={styles.label}\n          size=\"md\"\n          weight=\"medium\"\n          as=\"span\"\n          {...labelProps}\n        >\n          {label}\n        </Text>\n      )}\n      {/* We use CSS to swap between this navigation hint and the provided\n      children on hover - see the styles module. */}\n      {!hideChevron && (Component === \"button\" || Component === \"a\") && (\n        <ChevronRightIcon\n          width={8}\n          height={24}\n          className={styles[\"nav-hint\"]}\n          aria-hidden={true}\n          /* The SVG is a small icon in a large canvas. It probably ought to be\n             cropped, but we can adjust the viewBox here to chop off the horizontal\n             space to get it closer to the right hand edge.\n           */\n          viewBox=\"8 0 8 24\"\n        />\n      )}\n      {children}\n    </Component>\n  );\n\n  return context?.MenuItemWrapper == null || onSelect === null ? (\n    content\n  ) : (\n    <context.MenuItemWrapper onSelect={onSelect}>\n      {content}\n    </context.MenuItemWrapper>\n  );\n};\n"],"names":["classnames"],"mappings":";;;;;;;;AAgFO,MAAM,WAAW,CAAuC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAoC;AAClC,QAAM,YAAY,MAAO;AACnB,QAAA,UAAU,WAAW,WAAW;AAEtC,QAAM,UAAU;AAAA,IACd,CAAC,MAA6D;AAC3D,oBAAuD,CAAC;AAGzD,UAAI,aAAa,QAAQ,SAAS,mBAAmB,MAAM;AACnD,cAAA,cAAc,IAAI,YAAY,mBAAmB;AAAA,UACrD,SAAS;AAAA,UACT,YAAY;AAAA,QAAA,CACb;AACD,iBAAS,WAAW;AACpB,YAAI,CAAC,YAAY,iBAAkB,UAAS,aAAa,KAAK;AAAA,MAAA;AAAA,IAElE;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEM,QAAA,qBAAqB,eAAe,IAAI;AAC9C,QAAM,gBAAgB;AACtB,QAAM,UAAU;AAEhB,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWA,WAAW,WAAW,OAAO,MAAM;AAAA,QAC5C,CAAC,OAAO,WAAW,GAAG,aAAa;AAAA,QACnC,CAAC,OAAO,UAAU,CAAC,GAAG,UAAU;AAAA,QAChC,CAAC,OAAO,UAAU,CAAC,GAAG;AAAA,MAAA,CACvB;AAAA,MACD,aAAW;AAAA,MACX;AAAA,MACA,UAAU,cAAc,WAAW,WAAW;AAAA,MAC9C,iBAAe,cAAc,WAAW,SAAY;AAAA,MAEnD,UAAA;AAAA,QAAA,yCACE,MAAK,EAAA,WAAW,OAAO,MAAO,wBAAc,CAAA,IAE7C;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO;AAAA,YAClB,eAAa;AAAA,UAAA;AAAA,QACf;AAAA,QAGD,UAAU,QACT;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,OAAO;AAAA,YAClB,MAAK;AAAA,YACL,QAAO;AAAA,YACP,IAAG;AAAA,YACF,GAAG;AAAA,YAEH,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAID,CAAC,gBAAgB,cAAc,YAAY,cAAc,QACxD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW,OAAO,UAAU;AAAA,YAC5B,eAAa;AAAA,YAKb,SAAQ;AAAA,UAAA;AAAA,QACV;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGK,SAAA,SAAS,mBAAmB,QAAQ,aAAa,OACtD,UAEA,oBAAC,QAAQ,iBAAR,EAAwB,UACtB,UACH,QAAA,CAAA;AAEJ;"}

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

@@ -10,7 +10,7 @@ export declare const ToggleMenuItem: React.ForwardRefExoticComponent<Pick<{
     label: string | null;
     labelProps?: React.ComponentPropsWithoutRef<typeof import('../..').Text>;
     onSelect: ((e: Event) => void) | null;
-    onClick?: React.MouseEventHandler<"a" | "button" | "div"> | undefined;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement> | undefined;
     kind?: "primary" | "critical";
     disabled?: boolean;
     hideChevron?: boolean;

package/dist/index.cjs

@@ -36,6 +36,9 @@ const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const VisualList = require("./components/VisualList/VisualList.cjs");
 const VisualListItem = require("./components/VisualList/VisualListItem.cjs");
 const ChatFilter = require("./components/ChatFilter/ChatFilter.cjs");
+const UnreadCounter = require("./components/ActivityMarker/UnreadCounter.cjs");
+const Pill = require("./components/ActivityMarker/Pill.cjs");
+const Unread = require("./components/ActivityMarker/Unread.cjs");
 const Text$1 = require("./components/Form/Controls/Text/Text.cjs");
 const Action = require("./components/Form/Controls/Action/Action.cjs");
 const Password = require("./components/Form/Controls/Password/Password.cjs");
@@ -92,6 +95,9 @@ exports.Breadcrumb = Breadcrumb.Breadcrumb;
 exports.VisualList = VisualList.VisualList;
 exports.VisualListItem = VisualListItem.VisualListItem;
 exports.ChatFilter = ChatFilter.ChatFilter;
+exports.UnreadCounter = UnreadCounter.UnreadCounter;
+exports.Pill = Pill.Pill;
+exports.Unread = Unread.Unread;
 exports.Control = Text$1.TextControl;
 exports.TextControl = Text$1.TextControl;
 exports.TextInput = Text$1.TextInput;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export { InlineSpinner } from './components/InlineSpinner';
 export { Breadcrumb } from './components/Breadcrumb';
 export { VisualList, VisualListItem } from './components/VisualList';
 export { ChatFilter } from './components/ChatFilter';
+export { UnreadCounter, Pill, Unread } from './components/ActivityMarker';
 export { TextControl, TextControl as Control, TextInput, ActionControl, ActionInput, PasswordControl, PasswordInput, MFAControl, MFAInput, CheckboxControl, CheckboxInput, CheckboxInput as Checkbox, RadioControl, RadioInput, RadioInput as Radio, ToggleControl, ToggleInput, ToggleInput as Toggle, Root, Submit, Message, ErrorMessage, HelpMessage, ValidityState, Field, InlineField, Label, EditInPlace, } from './components/Form';
 export * as Form from './components/Form';
 /**

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA;;GAEG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EACL,OAAO,EACP,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,GACH,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EACL,WAAW,EAEX,WAAW,IAAI,OAAO,EACtB,SAAS,EACT,aAAa,EACb,WAAW,EACX,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EAEb,aAAa,IAAI,QAAQ,EACzB,YAAY,EACZ,UAAU,EAEV,UAAU,IAAI,KAAK,EACnB,aAAa,EACb,WAAW,EAEX,WAAW,IAAI,MAAM,EACrB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,YAAY,EACZ,WAAW,EACX,aAAa,EACb,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,IAAI,MAAM,mBAAmB,CAAC;AAE1C;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAQA;;GAEG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EACL,OAAO,EACP,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,GACH,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE1E,OAAO,EACL,WAAW,EAEX,WAAW,IAAI,OAAO,EACtB,SAAS,EACT,aAAa,EACb,WAAW,EACX,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EAEb,aAAa,IAAI,QAAQ,EACzB,YAAY,EACZ,UAAU,EAEV,UAAU,IAAI,KAAK,EACnB,aAAa,EACb,WAAW,EAEX,WAAW,IAAI,MAAM,EACrB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,YAAY,EACZ,WAAW,EACX,aAAa,EACb,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,IAAI,MAAM,mBAAmB,CAAC;AAE1C;;GAEG;AAEH,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,qBAAqB,CAAC"}

package/dist/index.js

@@ -34,6 +34,9 @@ import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
 import { VisualList } from "./components/VisualList/VisualList.js";
 import { VisualListItem } from "./components/VisualList/VisualListItem.js";
 import { ChatFilter } from "./components/ChatFilter/ChatFilter.js";
+import { UnreadCounter } from "./components/ActivityMarker/UnreadCounter.js";
+import { Pill } from "./components/ActivityMarker/Pill.js";
+import { Unread } from "./components/ActivityMarker/Unread.js";
 import { TextControl, TextControl as TextControl2, TextInput } from "./components/Form/Controls/Text/Text.js";
 import { ActionControl, ActionInput } from "./components/Form/Controls/Action/Action.js";
 import { PasswordControl, PasswordInput } from "./components/Form/Controls/Password/Password.js";
@@ -95,6 +98,7 @@ export {
   NavItem,
   PasswordControl,
   PasswordInput,
+  Pill,
   Progress,
   RadioInput as Radio,
   RadioControl,
@@ -114,6 +118,8 @@ export {
   ToggleMenuItem,
   Tooltip,
   TooltipProvider,
+  Unread,
+  UnreadCounter,
   ValidityState,
   VisualList,
   VisualListItem,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/style.css

@@ -2626,3 +2626,59 @@ Please see LICENSE files in the repository root for full details.
   background: var(--cpd-color-bg-action-primary-rest);
   color: var(--cpd-color-text-on-solid-primary);
 }
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+._unread-counter_1ibqq_8 {
+  border-radius: 100%;
+  font: var(--cpd-font-body-xs-semibold);
+  color: var(--cpd-color-text-on-solid-primary);
+  background-color: var(--cpd-color-icon-success-primary);
+  block-size: 20px;
+  min-inline-size: 20px;
+  padding: 0 var(--cpd-space-1-5x);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+._pill_1pem8_8 {
+  border-radius: 38px;
+  font: var(--cpd-font-body-xs-semibold);
+  color: var(--cpd-color-text-on-solid-primary);
+  background-color: var(--cpd-color-icon-success-primary);
+  padding: 0 var(--cpd-space-2x);
+  block-size: 20px;
+  display: inline-flex;
+  align-items: center;
+}
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+._unread_1k06b_8 {
+  inline-size: 20px;
+  display: flex;
+  justify-content: center;
+
+  div {
+    block-size: 8px;
+    inline-size: 8px;
+    background-color: var(--cpd-color-icon-secondary);
+    border-radius: 100%;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vector-im/compound-web",
-  "version": "7.7.1",
+  "version": "7.8.0",
   "description": "Compound components for the Web",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/ActivityMarker/Pill.module.css

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.pill {
+  border-radius: 38px;
+  font: var(--cpd-font-body-xs-semibold);
+  color: var(--cpd-color-text-on-solid-primary);
+  background-color: var(--cpd-color-icon-success-primary);
+  padding: 0 var(--cpd-space-2x);
+  block-size: 20px;
+  display: inline-flex;
+  align-items: center;
+}

package/src/components/ActivityMarker/Pill.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { HTMLProps, JSX } from "react";
+import styles from "./Pill.module.css";
+
+export function Pill({
+  children,
+  ...props
+}: HTMLProps<HTMLSpanElement>): JSX.Element {
+  return (
+    <span {...props} className={styles.pill}>
+      {children}
+    </span>
+  );
+}

package/src/components/ActivityMarker/Unread.module.css

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.unread {
+  inline-size: 20px;
+  display: flex;
+  justify-content: center;
+
+  div {
+    block-size: 8px;
+    inline-size: 8px;
+    background-color: var(--cpd-color-icon-secondary);
+    border-radius: 100%;
+  }
+}

package/src/components/ActivityMarker/Unread.tsx

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { HTMLProps } from "react";
+import styles from "./Unread.module.css";
+
+export function Unread(props: HTMLProps<HTMLDivElement>) {
+  return (
+    <div {...props} className={styles.unread}>
+      <div />
+    </div>
+  );
+}

package/src/components/ActivityMarker/UnreadCounter.module.css

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.unread-counter {
+  border-radius: 100%;
+  font: var(--cpd-font-body-xs-semibold);
+  color: var(--cpd-color-text-on-solid-primary);
+  background-color: var(--cpd-color-icon-success-primary);
+  block-size: 20px;
+  min-inline-size: 20px;
+  padding: 0 var(--cpd-space-1-5x);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}

package/src/components/ActivityMarker/UnreadCounter.tsx

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { HTMLProps } from "react";
+import styles from "./UnreadCounter.module.css";
+
+interface UnreadCounterProps extends HTMLProps<HTMLSpanElement> {
+  count: string | number;
+}
+
+export function UnreadCounter({ count, ...props }: UnreadCounterProps) {
+  return (
+    <span {...props} className={styles["unread-counter"]}>
+      {count}
+    </span>
+  );
+}

package/src/components/ActivityMarker/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright 2025 New Vector Ltd
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export { UnreadCounter } from "./UnreadCounter.tsx";
+export { Pill } from "./Pill";
+export { Unread } from "./Unread";

package/src/components/Menu/MenuItem.tsx

@@ -60,7 +60,7 @@ type Props<C extends MenuItemElement> = {
    * Event callback for when the item is clicked.
    * @param e
    */
-  onClick?: MouseEventHandler<C>;
+  onClick?: MouseEventHandler<HTMLElementTagNameMap[C]>;
   /**
    * The color variant of the menu item.
    * @default primary

package/src/index.ts

@@ -47,6 +47,7 @@ export { InlineSpinner } from "./components/InlineSpinner";
 export { Breadcrumb } from "./components/Breadcrumb";
 export { VisualList, VisualListItem } from "./components/VisualList";
 export { ChatFilter } from "./components/ChatFilter";
+export { UnreadCounter, Pill, Unread } from "./components/ActivityMarker";
 
 export {
   TextControl,