@vector-im/compound-web 7.12.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/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.12.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}