@vector-im/compound-web 7.11.0 → 8.0.0

package/dist/components/Breadcrumb/Breadcrumb.cjs

@@ -18,7 +18,7 @@ function Breadcrumb({
     /* @__PURE__ */ jsxRuntime.jsx(
       IconButton.IconButton,
       {
-        subtleBackground: true,
+        kind: "secondary",
         size: "28px",
         "aria-label": backLabel,
         onClick: onBackClick,

package/dist/components/Breadcrumb/Breadcrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.cjs","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/*\nCopyright 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, { HTMLProps, JSX, MouseEventHandler, KeyboardEvent } from \"react\";\nimport { IconButton } from \"../Button\";\nimport Chevron from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-left\";\nimport styles from \"./Breadcrumb.module.css\";\nimport { Link } from \"../Link/Link.tsx\";\nimport classNames from \"classnames\";\n\ninterface BreadcrumbProps extends HTMLProps<HTMLElement> {\n  /**\n   * The label for the back button.\n   */\n  backLabel: string;\n  /**\n   * The click handler for the back button.\n   */\n  onBackClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The pages to display in the breadcrumb.\n   * All the pages except the last one are displayed as links.\n   */\n  pages: string[];\n  /**\n   * The click handler for a page.\n   * @param page - The page that was clicked.\n   * @param index - The index of the page that was clicked.\n   */\n  onPageClick: (page: string, index: number) => void;\n}\n\n/**\n * A breadcrumb component.\n */\nexport function Breadcrumb({\n  backLabel,\n  onBackClick,\n  pages,\n  onPageClick,\n  className,\n  ...props\n}: BreadcrumbProps): JSX.Element {\n  return (\n    <nav className={classNames(styles.breadcrumb, className)} {...props}>\n      <IconButton\n        subtleBackground={true}\n        size=\"28px\"\n        aria-label={backLabel}\n        onClick={onBackClick}\n      >\n        <Chevron />\n      </IconButton>\n      <ol className={styles.pages}>\n        {pages.map((page, index) => (\n          <Page\n            key={index}\n            page={page}\n            isLastPage={index === pages.length - 1}\n            onClick={() => onPageClick(page, index)}\n          />\n        ))}\n      </ol>\n    </nav>\n  );\n}\n\ninterface PageProps {\n  /**\n   * The page to display.\n   */\n  page: string;\n  /**\n   * Whether this is the last page in the breadcrumb.\n   */\n  isLastPage: boolean;\n  /**\n   * The click handler for the page, ignore for last page.\n   */\n  onClick: () => void;\n}\n\n/**\n * A breadcrumb page.\n * If not the last page, the page is displayed in a link.\n */\nfunction Page({ page, isLastPage, onClick }: PageProps): JSX.Element {\n  const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n    if (event.key === \" \") {\n      onClick();\n    }\n  };\n\n  return (\n    <li>\n      {isLastPage ? (\n        <span className={styles[\"last-page\"]} aria-current=\"page\">\n          {page}\n        </span>\n      ) : (\n        <Link\n          size=\"small\"\n          role=\"button\"\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          tabIndex={0}\n        >\n          {page}\n        </Link>\n      )}\n    </li>\n  );\n}\n"],"names":["jsxs","styles","jsx","IconButton","Link"],"mappings":";;;;;;;;AAuCO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiC;AAE7B,SAAAA,gCAAC,SAAI,WAAW,WAAWC,0BAAO,YAAY,SAAS,GAAI,GAAG,OAC5D,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,kBAAkB;AAAA,QAClB,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,SAAS;AAAA,QAET,yCAAC,SAAQ,CAAA,CAAA;AAAA,MAAA;AAAA,IACX;AAAA,IACAD,2BAAAA,IAAC,QAAG,WAAWD,kBAAA,QAAO,OACnB,UAAM,MAAA,IAAI,CAAC,MAAM,UAChBC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA,YAAY,UAAU,MAAM,SAAS;AAAA,QACrC,SAAS,MAAM,YAAY,MAAM,KAAK;AAAA,MAAA;AAAA,MAHjC;AAAA,IAAA,CAKR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;AAqBA,SAAS,KAAK,EAAE,MAAM,YAAY,WAAmC;AAC7D,QAAA,YAAY,CAAC,UAA4C;AACzD,QAAA,MAAM,QAAQ,KAAK;AACb,cAAA;AAAA,IAAA;AAAA,EAEZ;AAEA,SACGA,2BAAAA,IAAA,MAAA,EACE,UACC,aAAAA,2BAAAA,IAAC,QAAK,EAAA,WAAWD,kBAAAA,QAAO,WAAW,GAAG,gBAAa,QAChD,UAAA,KACH,CAAA,IAEAC,2BAAA;AAAA,IAACE,KAAA;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MAET,UAAA;AAAA,IAAA;AAAA,EAAA,GAGP;AAEJ;;"}
+{"version":3,"file":"Breadcrumb.cjs","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/*\nCopyright 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, { HTMLProps, JSX, MouseEventHandler, KeyboardEvent } from \"react\";\nimport { IconButton } from \"../Button\";\nimport Chevron from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-left\";\nimport styles from \"./Breadcrumb.module.css\";\nimport { Link } from \"../Link/Link.tsx\";\nimport classNames from \"classnames\";\n\ninterface BreadcrumbProps extends HTMLProps<HTMLElement> {\n  /**\n   * The label for the back button.\n   */\n  backLabel: string;\n  /**\n   * The click handler for the back button.\n   */\n  onBackClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The pages to display in the breadcrumb.\n   * All the pages except the last one are displayed as links.\n   */\n  pages: string[];\n  /**\n   * The click handler for a page.\n   * @param page - The page that was clicked.\n   * @param index - The index of the page that was clicked.\n   */\n  onPageClick: (page: string, index: number) => void;\n}\n\n/**\n * A breadcrumb component.\n */\nexport function Breadcrumb({\n  backLabel,\n  onBackClick,\n  pages,\n  onPageClick,\n  className,\n  ...props\n}: BreadcrumbProps): JSX.Element {\n  return (\n    <nav className={classNames(styles.breadcrumb, className)} {...props}>\n      <IconButton\n        kind=\"secondary\"\n        size=\"28px\"\n        aria-label={backLabel}\n        onClick={onBackClick}\n      >\n        <Chevron />\n      </IconButton>\n      <ol className={styles.pages}>\n        {pages.map((page, index) => (\n          <Page\n            key={index}\n            page={page}\n            isLastPage={index === pages.length - 1}\n            onClick={() => onPageClick(page, index)}\n          />\n        ))}\n      </ol>\n    </nav>\n  );\n}\n\ninterface PageProps {\n  /**\n   * The page to display.\n   */\n  page: string;\n  /**\n   * Whether this is the last page in the breadcrumb.\n   */\n  isLastPage: boolean;\n  /**\n   * The click handler for the page, ignore for last page.\n   */\n  onClick: () => void;\n}\n\n/**\n * A breadcrumb page.\n * If not the last page, the page is displayed in a link.\n */\nfunction Page({ page, isLastPage, onClick }: PageProps): JSX.Element {\n  const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n    if (event.key === \" \") {\n      onClick();\n    }\n  };\n\n  return (\n    <li>\n      {isLastPage ? (\n        <span className={styles[\"last-page\"]} aria-current=\"page\">\n          {page}\n        </span>\n      ) : (\n        <Link\n          size=\"small\"\n          role=\"button\"\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          tabIndex={0}\n        >\n          {page}\n        </Link>\n      )}\n    </li>\n  );\n}\n"],"names":["jsxs","styles","jsx","IconButton","Link"],"mappings":";;;;;;;;AAuCO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiC;AAE7B,SAAAA,gCAAC,SAAI,WAAW,WAAWC,0BAAO,YAAY,SAAS,GAAI,GAAG,OAC5D,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,SAAS;AAAA,QAET,yCAAC,SAAQ,CAAA,CAAA;AAAA,MAAA;AAAA,IACX;AAAA,IACAD,2BAAAA,IAAC,QAAG,WAAWD,kBAAA,QAAO,OACnB,UAAM,MAAA,IAAI,CAAC,MAAM,UAChBC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA,YAAY,UAAU,MAAM,SAAS;AAAA,QACrC,SAAS,MAAM,YAAY,MAAM,KAAK;AAAA,MAAA;AAAA,MAHjC;AAAA,IAAA,CAKR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;AAqBA,SAAS,KAAK,EAAE,MAAM,YAAY,WAAmC;AAC7D,QAAA,YAAY,CAAC,UAA4C;AACzD,QAAA,MAAM,QAAQ,KAAK;AACb,cAAA;AAAA,IAAA;AAAA,EAEZ;AAEA,SACGA,2BAAAA,IAAA,MAAA,EACE,UACC,aAAAA,2BAAAA,IAAC,QAAK,EAAA,WAAWD,kBAAAA,QAAO,WAAW,GAAG,gBAAa,QAChD,UAAA,KACH,CAAA,IAEAC,2BAAA;AAAA,IAACE,KAAA;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MAET,UAAA;AAAA,IAAA;AAAA,EAAA,GAGP;AAEJ;;"}

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -16,7 +16,7 @@ function Breadcrumb({
     /* @__PURE__ */ jsx(
       IconButton,
       {
-        subtleBackground: true,
+        kind: "secondary",
         size: "28px",
         "aria-label": backLabel,
         onClick: onBackClick,

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/*\nCopyright 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, { HTMLProps, JSX, MouseEventHandler, KeyboardEvent } from \"react\";\nimport { IconButton } from \"../Button\";\nimport Chevron from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-left\";\nimport styles from \"./Breadcrumb.module.css\";\nimport { Link } from \"../Link/Link.tsx\";\nimport classNames from \"classnames\";\n\ninterface BreadcrumbProps extends HTMLProps<HTMLElement> {\n  /**\n   * The label for the back button.\n   */\n  backLabel: string;\n  /**\n   * The click handler for the back button.\n   */\n  onBackClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The pages to display in the breadcrumb.\n   * All the pages except the last one are displayed as links.\n   */\n  pages: string[];\n  /**\n   * The click handler for a page.\n   * @param page - The page that was clicked.\n   * @param index - The index of the page that was clicked.\n   */\n  onPageClick: (page: string, index: number) => void;\n}\n\n/**\n * A breadcrumb component.\n */\nexport function Breadcrumb({\n  backLabel,\n  onBackClick,\n  pages,\n  onPageClick,\n  className,\n  ...props\n}: BreadcrumbProps): JSX.Element {\n  return (\n    <nav className={classNames(styles.breadcrumb, className)} {...props}>\n      <IconButton\n        subtleBackground={true}\n        size=\"28px\"\n        aria-label={backLabel}\n        onClick={onBackClick}\n      >\n        <Chevron />\n      </IconButton>\n      <ol className={styles.pages}>\n        {pages.map((page, index) => (\n          <Page\n            key={index}\n            page={page}\n            isLastPage={index === pages.length - 1}\n            onClick={() => onPageClick(page, index)}\n          />\n        ))}\n      </ol>\n    </nav>\n  );\n}\n\ninterface PageProps {\n  /**\n   * The page to display.\n   */\n  page: string;\n  /**\n   * Whether this is the last page in the breadcrumb.\n   */\n  isLastPage: boolean;\n  /**\n   * The click handler for the page, ignore for last page.\n   */\n  onClick: () => void;\n}\n\n/**\n * A breadcrumb page.\n * If not the last page, the page is displayed in a link.\n */\nfunction Page({ page, isLastPage, onClick }: PageProps): JSX.Element {\n  const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n    if (event.key === \" \") {\n      onClick();\n    }\n  };\n\n  return (\n    <li>\n      {isLastPage ? (\n        <span className={styles[\"last-page\"]} aria-current=\"page\">\n          {page}\n        </span>\n      ) : (\n        <Link\n          size=\"small\"\n          role=\"button\"\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          tabIndex={0}\n        >\n          {page}\n        </Link>\n      )}\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAuCO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiC;AAE7B,SAAA,qBAAC,SAAI,WAAW,WAAW,OAAO,YAAY,SAAS,GAAI,GAAG,OAC5D,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAkB;AAAA,QAClB,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,SAAS;AAAA,QAET,8BAAC,SAAQ,CAAA,CAAA;AAAA,MAAA;AAAA,IACX;AAAA,IACA,oBAAC,QAAG,WAAW,OAAO,OACnB,UAAM,MAAA,IAAI,CAAC,MAAM,UAChB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA,YAAY,UAAU,MAAM,SAAS;AAAA,QACrC,SAAS,MAAM,YAAY,MAAM,KAAK;AAAA,MAAA;AAAA,MAHjC;AAAA,IAAA,CAKR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;AAqBA,SAAS,KAAK,EAAE,MAAM,YAAY,WAAmC;AAC7D,QAAA,YAAY,CAAC,UAA4C;AACzD,QAAA,MAAM,QAAQ,KAAK;AACb,cAAA;AAAA,IAAA;AAAA,EAEZ;AAEA,SACG,oBAAA,MAAA,EACE,UACC,aAAA,oBAAC,QAAK,EAAA,WAAW,OAAO,WAAW,GAAG,gBAAa,QAChD,UAAA,KACH,CAAA,IAEA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MAET,UAAA;AAAA,IAAA;AAAA,EAAA,GAGP;AAEJ;"}
+{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["/*\nCopyright 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, { HTMLProps, JSX, MouseEventHandler, KeyboardEvent } from \"react\";\nimport { IconButton } from \"../Button\";\nimport Chevron from \"@vector-im/compound-design-tokens/assets/web/icons/chevron-left\";\nimport styles from \"./Breadcrumb.module.css\";\nimport { Link } from \"../Link/Link.tsx\";\nimport classNames from \"classnames\";\n\ninterface BreadcrumbProps extends HTMLProps<HTMLElement> {\n  /**\n   * The label for the back button.\n   */\n  backLabel: string;\n  /**\n   * The click handler for the back button.\n   */\n  onBackClick: MouseEventHandler<HTMLButtonElement>;\n  /**\n   * The pages to display in the breadcrumb.\n   * All the pages except the last one are displayed as links.\n   */\n  pages: string[];\n  /**\n   * The click handler for a page.\n   * @param page - The page that was clicked.\n   * @param index - The index of the page that was clicked.\n   */\n  onPageClick: (page: string, index: number) => void;\n}\n\n/**\n * A breadcrumb component.\n */\nexport function Breadcrumb({\n  backLabel,\n  onBackClick,\n  pages,\n  onPageClick,\n  className,\n  ...props\n}: BreadcrumbProps): JSX.Element {\n  return (\n    <nav className={classNames(styles.breadcrumb, className)} {...props}>\n      <IconButton\n        kind=\"secondary\"\n        size=\"28px\"\n        aria-label={backLabel}\n        onClick={onBackClick}\n      >\n        <Chevron />\n      </IconButton>\n      <ol className={styles.pages}>\n        {pages.map((page, index) => (\n          <Page\n            key={index}\n            page={page}\n            isLastPage={index === pages.length - 1}\n            onClick={() => onPageClick(page, index)}\n          />\n        ))}\n      </ol>\n    </nav>\n  );\n}\n\ninterface PageProps {\n  /**\n   * The page to display.\n   */\n  page: string;\n  /**\n   * Whether this is the last page in the breadcrumb.\n   */\n  isLastPage: boolean;\n  /**\n   * The click handler for the page, ignore for last page.\n   */\n  onClick: () => void;\n}\n\n/**\n * A breadcrumb page.\n * If not the last page, the page is displayed in a link.\n */\nfunction Page({ page, isLastPage, onClick }: PageProps): JSX.Element {\n  const onKeyDown = (event: KeyboardEvent<HTMLAnchorElement>) => {\n    if (event.key === \" \") {\n      onClick();\n    }\n  };\n\n  return (\n    <li>\n      {isLastPage ? (\n        <span className={styles[\"last-page\"]} aria-current=\"page\">\n          {page}\n        </span>\n      ) : (\n        <Link\n          size=\"small\"\n          role=\"button\"\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n          tabIndex={0}\n        >\n          {page}\n        </Link>\n      )}\n    </li>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAuCO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiC;AAE7B,SAAA,qBAAC,SAAI,WAAW,WAAW,OAAO,YAAY,SAAS,GAAI,GAAG,OAC5D,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,SAAS;AAAA,QAET,8BAAC,SAAQ,CAAA,CAAA;AAAA,MAAA;AAAA,IACX;AAAA,IACA,oBAAC,QAAG,WAAW,OAAO,OACnB,UAAM,MAAA,IAAI,CAAC,MAAM,UAChB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA,YAAY,UAAU,MAAM,SAAS;AAAA,QACrC,SAAS,MAAM,YAAY,MAAM,KAAK;AAAA,MAAA;AAAA,MAHjC;AAAA,IAAA,CAKR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;AAqBA,SAAS,KAAK,EAAE,MAAM,YAAY,WAAmC;AAC7D,QAAA,YAAY,CAAC,UAA4C;AACzD,QAAA,MAAM,QAAQ,KAAK;AACb,cAAA;AAAA,IAAA;AAAA,EAEZ;AAEA,SACG,oBAAA,MAAA,EACE,UACC,aAAA,oBAAC,QAAK,EAAA,WAAW,OAAO,WAAW,GAAG,gBAAa,QAChD,UAAA,KACH,CAAA,IAEA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MAET,UAAA;AAAA,IAAA;AAAA,EAAA,GAGP;AAEJ;"}

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

@@ -8,6 +8,7 @@ const UnstyledButton = require("../UnstyledButton.cjs");
 const IndicatorIcon = require("../../Icon/IndicatorIcon/IndicatorIcon.cjs");
 const Tooltip = require("../../Tooltip/Tooltip.cjs");
 const IconButton = React.forwardRef(function IconButton2({
+  kind = "primary",
   children,
   className,
   indicator,
@@ -16,12 +17,12 @@ const IconButton = React.forwardRef(function IconButton2({
   disabled,
   destructive,
   tooltip,
-  subtleBackground,
+  noBackground = false,
   ...props
 }, ref) {
   const classes = classNames(IconButton_module.default["icon-button"], className, {
     [IconButton_module.default.destructive]: destructive,
-    [IconButton_module.default["subtle-bg"]]: subtleBackground
+    [IconButton_module.default["no-background"]]: noBackground
   });
   const button = /* @__PURE__ */ jsxRuntime.jsx(
     UnstyledButton.UnstyledButton,
@@ -36,6 +37,7 @@ const IconButton = React.forwardRef(function IconButton2({
       disabled,
       ...props,
       "data-indicator": indicator,
+      "data-kind": kind,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         IndicatorIcon.IndicatorIcon,
         {

package/dist/components/Button/IconButton/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  subtleBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    subtleBackground,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"subtle-bg\"]]: subtleBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? <Tooltip label={tooltip}>{button}</Tooltip> : button;\n});\n"],"names":["forwardRef","IconButton","classnames","styles","jsx","UnstyledButton","IndicatorIcon","Tooltip"],"mappings":";;;;;;;;;AAkDa,MAAA,aAAaA,MAAAA,WAGxB,SAASC,YACT;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAUC,WAAWC,kBAAO,QAAA,aAAa,GAAG,WAAW;AAAA,IAC3D,CAACA,kBAAAA,QAAO,WAAW,GAAG;AAAA,IACtB,CAACA,kBAAAA,QAAO,WAAW,CAAC,GAAG;AAAA,EAAA,CACxB;AAED,QAAM,SACJC,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX,OACE;AAAA,QACE,0BAA0B;AAAA,QAC1B,GAAG;AAAA,MACL;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MACJ,kBAAgB;AAAA,MAEhB,UAAAD,2BAAA;AAAA,QAACE,cAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAQ,WAAW,mCAAmC;AAAA,UAErD,UAAA,MAAM,SAAS,KAAK,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/B;AAAA,EACF;AAGF,SAAO,UAAWF,+BAAAG,QAAAA,SAAA,EAAQ,OAAO,SAAU,iBAAO,CAAA,IAAa;AACjE,CAAC;;"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The type of button.\n   * @default \"primary\"\n   */\n  kind?: \"primary\" | \"secondary\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  /**\n   * Hide the background when the button is not active or hovered.\n   * @default false\n   */\n  noBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    kind = \"primary\",\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    noBackground = false,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"no-background\"]]: noBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n      data-kind={kind}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? <Tooltip label={tooltip}>{button}</Tooltip> : button;\n});\n"],"names":["forwardRef","IconButton","classnames","styles","jsx","UnstyledButton","IndicatorIcon","Tooltip"],"mappings":";;;;;;;;;AA2Da,MAAA,aAAaA,MAAAA,WAGxB,SAASC,YACT;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAUC,WAAWC,kBAAO,QAAA,aAAa,GAAG,WAAW;AAAA,IAC3D,CAACA,kBAAAA,QAAO,WAAW,GAAG;AAAA,IACtB,CAACA,kBAAAA,QAAO,eAAe,CAAC,GAAG;AAAA,EAAA,CAC5B;AAED,QAAM,SACJC,2BAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX,OACE;AAAA,QACE,0BAA0B;AAAA,QAC1B,GAAG;AAAA,MACL;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MACJ,kBAAgB;AAAA,MAChB,aAAW;AAAA,MAEX,UAAAD,2BAAA;AAAA,QAACE,cAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAQ,WAAW,mCAAmC;AAAA,UAErD,UAAA,MAAM,SAAS,KAAK,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/B;AAAA,EACF;AAGF,SAAO,UAAWF,+BAAAG,QAAAA,SAAA,EAAQ,OAAO,SAAU,iBAAO,CAAA,IAAa;AACjE,CAAC;;"}

package/dist/components/Button/IconButton/IconButton.d.ts

@@ -1,6 +1,11 @@
 import { default as React } from 'react';
 import { UnstyledButtonPropsFor } from '../UnstyledButton';
 type IconButtonProps = UnstyledButtonPropsFor<"button"> & {
+    /**
+     * The type of button.
+     * @default "primary"
+     */
+    kind?: "primary" | "secondary";
     /**
      * The CSS class name.
      */
@@ -29,7 +34,11 @@ type IconButtonProps = UnstyledButtonPropsFor<"button"> & {
      * Optional tooltip for the button
      */
     tooltip?: string;
-    subtleBackground?: boolean;
+    /**
+     * Hide the background when the button is not active or hovered.
+     * @default false
+     */
+    noBackground?: boolean;
 };
 /**
  * Display an icon as a button. Can render an indicator

package/dist/components/Button/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/IconButton/IconButton.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAI7D,OAAO,EAAkB,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAI3E,KAAK,eAAe,GAAG,sBAAsB,CAAC,QAAQ,CAAC,GAAG;IACxD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,iIAgDrB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/IconButton/IconButton.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAI7D,OAAO,EAAkB,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAI3E,KAAK,eAAe,GAAG,sBAAsB,CAAC,QAAQ,CAAC,GAAG;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAC/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,iIAkDrB,CAAC"}

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

@@ -6,6 +6,7 @@ import { UnstyledButton } from "../UnstyledButton.js";
 import { IndicatorIcon } from "../../Icon/IndicatorIcon/IndicatorIcon.js";
 import { Tooltip } from "../../Tooltip/Tooltip.js";
 const IconButton = forwardRef(function IconButton2({
+  kind = "primary",
   children,
   className,
   indicator,
@@ -14,12 +15,12 @@ const IconButton = forwardRef(function IconButton2({
   disabled,
   destructive,
   tooltip,
-  subtleBackground,
+  noBackground = false,
   ...props
 }, ref) {
   const classes = classNames(styles["icon-button"], className, {
     [styles.destructive]: destructive,
-    [styles["subtle-bg"]]: subtleBackground
+    [styles["no-background"]]: noBackground
   });
   const button = /* @__PURE__ */ jsx(
     UnstyledButton,
@@ -34,6 +35,7 @@ const IconButton = forwardRef(function IconButton2({
       disabled,
       ...props,
       "data-indicator": indicator,
+      "data-kind": kind,
       children: /* @__PURE__ */ jsx(
         IndicatorIcon,
         {

package/dist/components/Button/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  subtleBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    subtleBackground,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"subtle-bg\"]]: subtleBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? <Tooltip label={tooltip}>{button}</Tooltip> : button;\n});\n"],"names":["IconButton","classnames"],"mappings":";;;;;;;AAkDa,MAAA,aAAa,WAGxB,SAASA,YACT;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAUC,WAAW,OAAO,aAAa,GAAG,WAAW;AAAA,IAC3D,CAAC,OAAO,WAAW,GAAG;AAAA,IACtB,CAAC,OAAO,WAAW,CAAC,GAAG;AAAA,EAAA,CACxB;AAED,QAAM,SACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX,OACE;AAAA,QACE,0BAA0B;AAAA,QAC1B,GAAG;AAAA,MACL;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MACJ,kBAAgB;AAAA,MAEhB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAQ,WAAW,mCAAmC;AAAA,UAErD,UAAA,MAAM,SAAS,KAAK,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/B;AAAA,EACF;AAGF,SAAO,UAAW,oBAAA,SAAA,EAAQ,OAAO,SAAU,iBAAO,CAAA,IAAa;AACjE,CAAC;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/Button/IconButton/IconButton.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { PropsWithChildren, forwardRef } from \"react\";\nimport classnames from \"classnames\";\n\nimport styles from \"./IconButton.module.css\";\nimport { UnstyledButton, UnstyledButtonPropsFor } from \"../UnstyledButton\";\nimport { IndicatorIcon } from \"../../Icon/IndicatorIcon/IndicatorIcon\";\nimport { Tooltip } from \"../../Tooltip/Tooltip\";\n\ntype IconButtonProps = UnstyledButtonPropsFor<\"button\"> & {\n  /**\n   * The type of button.\n   * @default \"primary\"\n   */\n  kind?: \"primary\" | \"secondary\";\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * The size of the button in CSS units, e.g. `\"24px\"`.\n   * Note that this is the size of the *button* itself: the icon will be 0.75 * this size\n   * @default 32px\n   */\n  size?: CSSStyleDeclaration[\"height\"];\n  /**\n   * The icon button indicator dot displayed on the top right\n   * As in IndicatorIcon\n   */\n  indicator?: \"default\" | \"success\" | \"critical\";\n  /**\n   * Whether the button is interactable\n   */\n  disabled?: boolean;\n  /**\n   * Whether this button triggers a destructive action.\n   * @default false\n   */\n  destructive?: boolean;\n  /**\n   * Optional tooltip for the button\n   */\n  tooltip?: string;\n  /**\n   * Hide the background when the button is not active or hovered.\n   * @default false\n   */\n  noBackground?: boolean;\n};\n\n/**\n * Display an icon as a button. Can render an indicator\n */\nexport const IconButton = forwardRef<\n  HTMLButtonElement,\n  PropsWithChildren<IconButtonProps>\n>(function IconButton(\n  {\n    kind = \"primary\",\n    children,\n    className,\n    indicator,\n    size = \"32px\",\n    style,\n    disabled,\n    destructive,\n    tooltip,\n    noBackground = false,\n    ...props\n  },\n  ref,\n) {\n  const classes = classnames(styles[\"icon-button\"], className, {\n    [styles.destructive]: destructive,\n    [styles[\"no-background\"]]: noBackground,\n  });\n\n  const button = (\n    <UnstyledButton\n      as=\"button\"\n      ref={ref}\n      className={classes}\n      style={\n        {\n          \"--cpd-icon-button-size\": size,\n          ...style,\n        } as React.CSSProperties\n      }\n      disabled={disabled}\n      {...props}\n      data-indicator={indicator}\n      data-kind={kind}\n    >\n      <IndicatorIcon\n        indicator={indicator}\n        colour={disabled ? \"var(--cpd-color-icon-disabled)\" : undefined}\n      >\n        {React.Children.only(children)}\n      </IndicatorIcon>\n    </UnstyledButton>\n  );\n\n  return tooltip ? <Tooltip label={tooltip}>{button}</Tooltip> : button;\n});\n"],"names":["IconButton","classnames"],"mappings":";;;;;;;AA2Da,MAAA,aAAa,WAGxB,SAASA,YACT;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAUC,WAAW,OAAO,aAAa,GAAG,WAAW;AAAA,IAC3D,CAAC,OAAO,WAAW,GAAG;AAAA,IACtB,CAAC,OAAO,eAAe,CAAC,GAAG;AAAA,EAAA,CAC5B;AAED,QAAM,SACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA,WAAW;AAAA,MACX,OACE;AAAA,QACE,0BAA0B;AAAA,QAC1B,GAAG;AAAA,MACL;AAAA,MAEF;AAAA,MACC,GAAG;AAAA,MACJ,kBAAgB;AAAA,MAChB,aAAW;AAAA,MAEX,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAQ,WAAW,mCAAmC;AAAA,UAErD,UAAA,MAAM,SAAS,KAAK,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/B;AAAA,EACF;AAGF,SAAO,UAAW,oBAAA,SAAA,EAAQ,OAAO,SAAU,iBAAO,CAAA,IAAa;AACjE,CAAC;"}

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

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

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

@@ -1,7 +1,7 @@
-const destructive = "_destructive_m2erp_74";
+const destructive = "_destructive_1pz9o_95";
 const styles = {
-  "icon-button": "_icon-button_m2erp_8",
-  "subtle-bg": "_subtle-bg_m2erp_29",
+  "icon-button": "_icon-button_1pz9o_8",
+  "no-background": "_no-background_1pz9o_42",
   destructive
 };
 export {

package/dist/components/Menu/ContextMenu.cjs

@@ -16,6 +16,7 @@ const ContextMenuItemWrapper = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.ContextMenuItem, { onSelect: onSelect ?? void 0, asChild: true, children });
 const ContextMenu = ({
   title,
+  showTitle = true,
   onOpenChange: onOpenChangeProp,
   trigger: triggerProp,
   hasAccessibleAlternative,
@@ -56,7 +57,7 @@ const ContextMenu = ({
     ] }) })
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs(reactContextMenu.Root, { onOpenChange, children: [
     trigger,
-    /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FloatingMenu.FloatingMenu, { title, children }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(reactContextMenu.Content, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(FloatingMenu.FloatingMenu, { showTitle, title, children }) }) })
   ] });
 };
 exports.ContextMenu = ContextMenu;

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.cjs","sources":["../../../src/components/Menu/ContextMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\n\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild>\n          <FloatingMenu title={title}>{children}</FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["ContextMenuItem","useState","useCallback","platform","getPlatform","useMemo","jsx","MenuContext","Trigger","jsxs","Fragment","Root","Drawer","classnames","drawerStyles","DrawerMenu","Portal","Content","FloatingMenu"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,qCACGA,kCAAgB,EAAA,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAIC,MAAAA,SAAS,KAAK;AACtC,QAAM,eAAeC,MAAA;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAC5B;AAIA,QAAMC,aAAWC,SAAAA,YAAY;AACvB,QAAA,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAA;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACHC,+BAAAC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,QAAM,UACJD,2BAAA;AAAA,IAACE,iBAAA;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EACH;AASF,SAAO,SAEHC,2BAAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,IAACJ,2BAAAA,IAAAK,iBAAAA,MAAA,EAAK,cAA6B,UAAQ,QAAA,CAAA;AAAA,IAC3CL,2BAAAA,IAACM,YAAO,MAAP,EAAY,MAAY,cACvB,UAAAH,gCAACG,KAAAA,OAAO,QAAP,EACC,UAAA;AAAA,MAAAN,+BAACM,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAA,QAAa,EAAE,GAAG;AAAA,MACxDR,2BAAAA,IAACM,KAAO,OAAA,SAAP,EAAe,SAAO,MACrB,UAACN,2BAAAA,IAAAS,WAAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EACF,EAAA,CAAA,IAECN,2BAAA,KAAAE,iBAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,IACDL,2BAAA,IAACU,iBACC,QAAA,EAAA,UAAAV,2BAAAA,IAACW,iBAAAA,SAAQ,EAAA,SAAO,MACd,UAAAX,2BAAAA,IAACY,aAAAA,cAAa,EAAA,OAAe,SAAS,CAAA,EAAA,CACxC,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"ContextMenu.cjs","sources":["../../../src/components/Menu/ContextMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Wether the title is displayed.\n   * @default true\n   */\n  showTitle?: boolean;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  showTitle = true,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\n\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild>\n          <FloatingMenu showTitle={showTitle} title={title}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["ContextMenuItem","useState","useCallback","platform","getPlatform","useMemo","jsx","MenuContext","Trigger","jsxs","Fragment","Root","Drawer","classnames","drawerStyles","DrawerMenu","Portal","Content","FloatingMenu"],"mappings":";;;;;;;;;;;;AAwDA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,qCACGA,kCAAgB,EAAA,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAIC,MAAAA,SAAS,KAAK;AACtC,QAAM,eAAeC,MAAA;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAC5B;AAIA,QAAMC,aAAWC,SAAAA,YAAY;AACvB,QAAA,SAASD,eAAa,aAAaA,eAAa;AACtD,QAAM,UAAoBE,MAAA;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACHC,+BAAAC,YAAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,QAAM,UACJD,2BAAA;AAAA,IAACE,iBAAA;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EACH;AASF,SAAO,SAEHC,2BAAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,IAACJ,2BAAAA,IAAAK,iBAAAA,MAAA,EAAK,cAA6B,UAAQ,QAAA,CAAA;AAAA,IAC3CL,2BAAAA,IAACM,YAAO,MAAP,EAAY,MAAY,cACvB,UAAAH,gCAACG,KAAAA,OAAO,QAAP,EACC,UAAA;AAAA,MAAAN,+BAACM,KAAAA,OAAO,SAAP,EAAe,WAAWC,WAAWC,kBAAA,QAAa,EAAE,GAAG;AAAA,MACxDR,2BAAAA,IAACM,KAAO,OAAA,SAAP,EAAe,SAAO,MACrB,UAACN,2BAAAA,IAAAS,WAAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EACF,EAAA,CAAA,IAECN,2BAAA,KAAAE,iBAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,IACAL,2BAAA,IAAAU,iBAAA,QAAA,EACC,UAACV,2BAAA,IAAAW,iBAAA,SAAA,EAAQ,SAAO,MACd,UAACX,2BAAA,IAAAY,aAAA,cAAA,EAAa,WAAsB,OACjC,SACH,CAAA,EAAA,CACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

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

@@ -4,6 +4,11 @@ interface Props {
      * The menu title.
      */
     title: string;
+    /**
+     * Wether the title is displayed.
+     * @default true
+     */
+    showTitle?: boolean;
     /**
      * Event handler called when the open state of the menu changes.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ContextMenu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAgB7E,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,wBAAwB,EAAE,OAAO,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,KAAK,CAqEjC,CAAC"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/ContextMenu.tsx"],"names":[],"mappings":"AAOA,OAAc,EAAE,EAAE,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAgB7E,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,wBAAwB,EAAE,OAAO,CAAC;IAClC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,KAAK,CAwEjC,CAAC"}

package/dist/components/Menu/ContextMenu.js

@@ -14,6 +14,7 @@ const ContextMenuItemWrapper = ({
 }) => /* @__PURE__ */ jsx(ContextMenuItem, { onSelect: onSelect ?? void 0, asChild: true, children });
 const ContextMenu = ({
   title,
+  showTitle = true,
   onOpenChange: onOpenChangeProp,
   trigger: triggerProp,
   hasAccessibleAlternative,
@@ -54,7 +55,7 @@ const ContextMenu = ({
     ] }) })
   ] }) : /* @__PURE__ */ jsxs(Root, { onOpenChange, children: [
     trigger,
-    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { asChild: true, children: /* @__PURE__ */ jsx(FloatingMenu, { title, children }) }) })
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { asChild: true, children: /* @__PURE__ */ jsx(FloatingMenu, { showTitle, title, children }) }) })
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/Menu/ContextMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\n\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild>\n          <FloatingMenu title={title}>{children}</FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames","drawerStyles"],"mappings":";;;;;;;;;;AAmDA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,0BACG,iBAAgB,EAAA,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,eAAe;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAC5B;AAIA,QAAM,WAAW,YAAY;AACvB,QAAA,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACH,oBAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EACH;AASF,SAAO,SAEH,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,MAAA,EAAK,cAA6B,UAAQ,QAAA,CAAA;AAAA,IAC3C,oBAAC,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAWC,WAAa,EAAE,GAAG;AAAA,MACxD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAC,oBAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EACF,EAAA,CAAA,IAEC,qBAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,IACD,oBAAC,QACC,EAAA,UAAA,oBAAC,SAAQ,EAAA,SAAO,MACd,UAAA,oBAAC,cAAa,EAAA,OAAe,SAAS,CAAA,EAAA,CACxC,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/Menu/ContextMenu.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from \"react\";\nimport {\n  Root,\n  Trigger,\n  Portal,\n  Content,\n  ContextMenuItem,\n} from \"@radix-ui/react-context-menu\";\nimport { FloatingMenu } from \"./FloatingMenu\";\nimport { Drawer } from \"vaul\";\nimport classnames from \"classnames\";\nimport drawerStyles from \"./DrawerMenu.module.css\";\nimport { MenuContext, MenuData, MenuItemWrapperProps } from \"./MenuContext\";\nimport { DrawerMenu } from \"./DrawerMenu\";\nimport { getPlatform } from \"../../utils/platform\";\n\ninterface Props {\n  /**\n   * The menu title.\n   */\n  title: string;\n  /**\n   * Wether the title is displayed.\n   * @default true\n   */\n  showTitle?: boolean;\n  /**\n   * Event handler called when the open state of the menu changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger that can be right-clicked or long-pressed to open the menu.\n   * This must be a component that accepts a ref and spreads props.\n   * https://www.radix-ui.com/primitives/docs/guides/composition\n   */\n  trigger: ReactNode;\n  /**\n   * Whether the functionality of this menu is available through some other\n   * keyboard-accessible means. Preferably this should be true, because context\n   * menus are potentially difficult to discover, but if false the trigger will\n   * become focusable so that it can be opened via keyboard navigation.\n   */\n  hasAccessibleAlternative: boolean;\n  /**\n   * The menu contents.\n   */\n  children: ReactNode;\n}\n\nconst ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({\n  onSelect,\n  children,\n}) => (\n  <ContextMenuItem onSelect={onSelect ?? undefined} asChild>\n    {children}\n  </ContextMenuItem>\n);\n\n/**\n * A menu opened by right-clicking or long-pressing another UI element.\n */\nexport const ContextMenu: FC<Props> = ({\n  title,\n  showTitle = true,\n  onOpenChange: onOpenChangeProp,\n  trigger: triggerProp,\n  hasAccessibleAlternative,\n  children: childrenProp,\n}) => {\n  const [open, setOpen] = useState(false);\n  const onOpenChange = useCallback(\n    (value: boolean) => {\n      setOpen(value);\n      onOpenChangeProp?.(value);\n    },\n    [setOpen, onOpenChangeProp],\n  );\n\n  // Normally, the menu takes the form of a floating box. But on Android and\n  // iOS, the menu should morph into a drawer\n  const platform = getPlatform();\n  const drawer = platform === \"android\" || platform === \"ios\";\n  const context: MenuData = useMemo(\n    () => ({\n      MenuItemWrapper: drawer ? null : ContextMenuItemWrapper,\n      onOpenChange,\n    }),\n    [onOpenChange],\n  );\n  const children = (\n    <MenuContext.Provider value={context}>{childrenProp}</MenuContext.Provider>\n  );\n\n  const trigger = (\n    <Trigger\n      aria-haspopup=\"menu\"\n      tabIndex={hasAccessibleAlternative ? undefined : 0}\n      asChild\n    >\n      {triggerProp}\n    </Trigger>\n  );\n\n  // This is a small hack: Vaul drawers only support buttons as triggers, so\n  // we end up mounting an empty Radix context menu tree alongside the\n  // drawer tree, purely so we can use its Trigger component (which supports\n  // touch for free). The resulting behavior and DOM tree looks exactly the\n  // same as if Vaul provided a long-press trigger of its own, so I think\n  // this is fine.\n  return drawer ? (\n    <>\n      <Root onOpenChange={onOpenChange}>{trigger}</Root>\n      <Drawer.Root open={open} onOpenChange={onOpenChange}>\n        <Drawer.Portal>\n          <Drawer.Overlay className={classnames(drawerStyles.bg)} />\n          <Drawer.Content asChild>\n            <DrawerMenu title={title}>{children}</DrawerMenu>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </>\n  ) : (\n    <Root onOpenChange={onOpenChange}>\n      {trigger}\n      <Portal>\n        <Content asChild>\n          <FloatingMenu showTitle={showTitle} title={title}>\n            {children}\n          </FloatingMenu>\n        </Content>\n      </Portal>\n    </Root>\n  );\n};\n"],"names":["classnames","drawerStyles"],"mappings":";;;;;;;;;;AAwDA,MAAM,yBAAmD,CAAC;AAAA,EACxD;AAAA,EACA;AACF,0BACG,iBAAgB,EAAA,UAAU,YAAY,QAAW,SAAO,MACtD,UACH;AAMK,MAAM,cAAyB,CAAC;AAAA,EACrC;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,SAAS;AAAA,EACT;AAAA,EACA,UAAU;AACZ,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,eAAe;AAAA,IACnB,CAAC,UAAmB;AAClB,cAAQ,KAAK;AACb,yBAAmB,KAAK;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,gBAAgB;AAAA,EAC5B;AAIA,QAAM,WAAW,YAAY;AACvB,QAAA,SAAS,aAAa,aAAa,aAAa;AACtD,QAAM,UAAoB;AAAA,IACxB,OAAO;AAAA,MACL,iBAAiB,SAAS,OAAO;AAAA,MACjC;AAAA,IAAA;AAAA,IAEF,CAAC,YAAY;AAAA,EACf;AACA,QAAM,WACH,oBAAA,YAAY,UAAZ,EAAqB,OAAO,SAAU,UAAa,cAAA;AAGtD,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,iBAAc;AAAA,MACd,UAAU,2BAA2B,SAAY;AAAA,MACjD,SAAO;AAAA,MAEN,UAAA;AAAA,IAAA;AAAA,EACH;AASF,SAAO,SAEH,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,oBAAA,MAAA,EAAK,cAA6B,UAAQ,QAAA,CAAA;AAAA,IAC3C,oBAAC,OAAO,MAAP,EAAY,MAAY,cACvB,UAAA,qBAAC,OAAO,QAAP,EACC,UAAA;AAAA,MAAA,oBAAC,OAAO,SAAP,EAAe,WAAWA,WAAWC,WAAa,EAAE,GAAG;AAAA,MACxD,oBAAC,OAAO,SAAP,EAAe,SAAO,MACrB,UAAC,oBAAA,YAAA,EAAW,OAAe,SAAS,CAAA,EACtC,CAAA;AAAA,IAAA,EAAA,CACF,EACF,CAAA;AAAA,EACF,EAAA,CAAA,IAEC,qBAAA,MAAA,EAAK,cACH,UAAA;AAAA,IAAA;AAAA,IACA,oBAAA,QAAA,EACC,UAAC,oBAAA,SAAA,EAAQ,SAAO,MACd,UAAC,oBAAA,cAAA,EAAa,WAAsB,OACjC,SACH,CAAA,EAAA,CACF,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/style.css.css

@@ -247,7 +247,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-._icon-button_m2erp_8 {
+._icon-button_1pz9o_8 {
   --cpd-icon-button-indicator-border-size: calc(
     var(--cpd-icon-button-size) * 0.0625
   );
@@ -258,7 +258,6 @@ Please see LICENSE files in the repository root for full details.
   /* the icon is 0.75 the size of the button, so add padding to put it in the middle */
   padding: calc(var(--cpd-icon-button-size) * 0.125);
   aspect-ratio: 1 / 1;
-  color: var(--cpd-color-icon-tertiary);
   border: 0;
   appearance: none;
   cursor: pointer;
@@ -268,14 +267,30 @@ Please see LICENSE files in the repository root for full details.
   line-height: 0px;
 }
 
-._subtle-bg_m2erp_29 {
-  color: var(--cpd-color-icon-secondary);
+._icon-button_1pz9o_8[data-kind="primary"] {
+  * {
+    color: var(--cpd-color-icon-tertiary);
+  }
+}
+
+._icon-button_1pz9o_8[data-kind="secondary"] {
   background: var(--cpd-color-bg-subtle-secondary);
+
+  * {
+    color: var(--cpd-color-icon-secondary);
+  }
 }
 
-._icon-button_m2erp_8[aria-disabled="true"] {
-  color: var(--cpd-color-icon-disabled);
+._no-background_1pz9o_42[data-kind="secondary"] {
+  background: transparent;
+}
+
+._icon-button_1pz9o_8[aria-disabled="true"] {
   cursor: not-allowed;
+
+  * {
+    color: var(--cpd-color-icon-disabled);
+  }
 }
 
 /**
@@ -283,19 +298,25 @@ Please see LICENSE files in the repository root for full details.
  */
 
 @media (hover) {
-  ._icon-button_m2erp_8:not([aria-disabled="true"]):hover {
-    color: var(--cpd-color-icon-primary);
+  ._icon-button_1pz9o_8:not([aria-disabled="true"]):hover {
     background: var(--cpd-color-bg-subtle-primary);
+
+    * {
+      color: var(--cpd-color-icon-primary);
+    }
   }
 }
 
-._icon-button_m2erp_8:not([aria-disabled="true"]):active {
-  color: var(--cpd-color-icon-primary);
+._icon-button_1pz9o_8:not([aria-disabled="true"]):active {
   background: var(--cpd-color-bg-subtle-primary);
+
+  * {
+    color: var(--cpd-color-icon-primary);
+  }
 }
 
 @media (hover) {
-  ._icon-button_m2erp_8:not([aria-disabled="true"])[data-indicator]:is(:hover)::before {
+  ._icon-button_1pz9o_8:not([aria-disabled="true"])[data-indicator]:is(:hover)::before {
     /* Same colour as the background */
     border: var(--cpd-icon-button-indicator-border-size) solid
       var(--cpd-color-bg-subtle-primary);
@@ -304,7 +325,7 @@ Please see LICENSE files in the repository root for full details.
   }
 }
 
-._icon-button_m2erp_8:not([aria-disabled="true"])[data-indicator]:is(:active)::before {
+._icon-button_1pz9o_8:not([aria-disabled="true"])[data-indicator]:is(:active)::before {
   /* Same colour as the background */
   border: var(--cpd-icon-button-indicator-border-size) solid
     var(--cpd-color-bg-subtle-primary);
@@ -313,14 +334,16 @@ Please see LICENSE files in the repository root for full details.
 }
 
 @media (hover) {
-  ._icon-button_m2erp_8:not([aria-disabled="true"])._destructive_m2erp_74:hover {
-    background: var(--cpd-color-bg-critical-subtle);
+  ._icon-button_1pz9o_8:not([aria-disabled="true"])._destructive_1pz9o_95:hover {
+    background: var(--cpd-color-bg-critical-subtle-hovered);
     outline: 1px solid var(--cpd-color-border-critical-subtle);
   }
 }
 
-._icon-button_m2erp_8:not([aria-disabled="true"])._destructive_m2erp_74 > * {
-  color: var(--cpd-color-icon-critical-primary);
+._icon-button_1pz9o_8:not([aria-disabled="true"])._destructive_1pz9o_95 {
+  * {
+    color: var(--cpd-color-icon-critical-primary);
+  }
 }
 /*
 Copyright 2024 New Vector Ltd.

package/package.json

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

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -48,7 +48,7 @@ export function Breadcrumb({
   return (
     <nav className={classNames(styles.breadcrumb, className)} {...props}>
       <IconButton
-        subtleBackground={true}
+        kind="secondary"
         size="28px"
         aria-label={backLabel}
         onClick={onBackClick}

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

@@ -16,7 +16,6 @@ Please see LICENSE files in the repository root for full details.
   /* the icon is 0.75 the size of the button, so add padding to put it in the middle */
   padding: calc(var(--cpd-icon-button-size) * 0.125);
   aspect-ratio: 1 / 1;
-  color: var(--cpd-color-icon-tertiary);
   border: 0;
   appearance: none;
   cursor: pointer;
@@ -26,14 +25,30 @@ Please see LICENSE files in the repository root for full details.
   line-height: 0px;
 }
 
-.subtle-bg {
-  color: var(--cpd-color-icon-secondary);
+.icon-button[data-kind="primary"] {
+  * {
+    color: var(--cpd-color-icon-tertiary);
+  }
+}
+
+.icon-button[data-kind="secondary"] {
   background: var(--cpd-color-bg-subtle-secondary);
+
+  * {
+    color: var(--cpd-color-icon-secondary);
+  }
+}
+
+.no-background[data-kind="secondary"] {
+  background: transparent;
 }
 
 .icon-button[aria-disabled="true"] {
-  color: var(--cpd-color-icon-disabled);
   cursor: not-allowed;
+
+  * {
+    color: var(--cpd-color-icon-disabled);
+  }
 }
 
 /**
@@ -42,14 +57,20 @@ Please see LICENSE files in the repository root for full details.
 
 @media (hover) {
   .icon-button:not([aria-disabled="true"]):hover {
-    color: var(--cpd-color-icon-primary);
     background: var(--cpd-color-bg-subtle-primary);
+
+    * {
+      color: var(--cpd-color-icon-primary);
+    }
   }
 }
 
 .icon-button:not([aria-disabled="true"]):active {
-  color: var(--cpd-color-icon-primary);
   background: var(--cpd-color-bg-subtle-primary);
+
+  * {
+    color: var(--cpd-color-icon-primary);
+  }
 }
 
 @media (hover) {
@@ -72,11 +93,13 @@ Please see LICENSE files in the repository root for full details.
 
 @media (hover) {
   .icon-button:not([aria-disabled="true"]).destructive:hover {
-    background: var(--cpd-color-bg-critical-subtle);
+    background: var(--cpd-color-bg-critical-subtle-hovered);
     outline: 1px solid var(--cpd-color-border-critical-subtle);
   }
 }
 
-.icon-button:not([aria-disabled="true"]).destructive > * {
-  color: var(--cpd-color-icon-critical-primary);
+.icon-button:not([aria-disabled="true"]).destructive {
+  * {
+    color: var(--cpd-color-icon-critical-primary);
+  }
 }

package/src/components/Button/IconButton/IconButton.tsx

@@ -14,6 +14,11 @@ import { IndicatorIcon } from "../../Icon/IndicatorIcon/IndicatorIcon";
 import { Tooltip } from "../../Tooltip/Tooltip";
 
 type IconButtonProps = UnstyledButtonPropsFor<"button"> & {
+  /**
+   * The type of button.
+   * @default "primary"
+   */
+  kind?: "primary" | "secondary";
   /**
    * The CSS class name.
    */
@@ -42,7 +47,11 @@ type IconButtonProps = UnstyledButtonPropsFor<"button"> & {
    * Optional tooltip for the button
    */
   tooltip?: string;
-  subtleBackground?: boolean;
+  /**
+   * Hide the background when the button is not active or hovered.
+   * @default false
+   */
+  noBackground?: boolean;
 };
 
 /**
@@ -53,6 +62,7 @@ export const IconButton = forwardRef<
   PropsWithChildren<IconButtonProps>
 >(function IconButton(
   {
+    kind = "primary",
     children,
     className,
     indicator,
@@ -61,14 +71,14 @@ export const IconButton = forwardRef<
     disabled,
     destructive,
     tooltip,
-    subtleBackground,
+    noBackground = false,
     ...props
   },
   ref,
 ) {
   const classes = classnames(styles["icon-button"], className, {
     [styles.destructive]: destructive,
-    [styles["subtle-bg"]]: subtleBackground,
+    [styles["no-background"]]: noBackground,
   });
 
   const button = (
@@ -85,6 +95,7 @@ export const IconButton = forwardRef<
       disabled={disabled}
       {...props}
       data-indicator={indicator}
+      data-kind={kind}
     >
       <IndicatorIcon
         indicator={indicator}

package/src/components/Menu/ContextMenu.tsx

@@ -26,6 +26,11 @@ interface Props {
    * The menu title.
    */
   title: string;
+  /**
+   * Wether the title is displayed.
+   * @default true
+   */
+  showTitle?: boolean;
   /**
    * Event handler called when the open state of the menu changes.
    */
@@ -63,6 +68,7 @@ const ContextMenuItemWrapper: FC<MenuItemWrapperProps> = ({
  */
 export const ContextMenu: FC<Props> = ({
   title,
+  showTitle = true,
   onOpenChange: onOpenChangeProp,
   trigger: triggerProp,
   hasAccessibleAlternative,
@@ -125,7 +131,9 @@ export const ContextMenu: FC<Props> = ({
       {trigger}
       <Portal>
         <Content asChild>
-          <FloatingMenu title={title}>{children}</FloatingMenu>
+          <FloatingMenu showTitle={showTitle} title={title}>
+            {children}
+          </FloatingMenu>
         </Content>
       </Portal>
     </Root>