@vector-im/compound-web 7.12.0 → 8.1.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/Form/Controls/SettingsToggle/SettingsToggle.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Label = require("../../Label.cjs");
+const Message = require("../../Message.cjs");
+const InlineField = require("../../InlineField.cjs");
+const reactForm = require("@radix-ui/react-form");
+const Toggle = require("../Toggle/Toggle.cjs");
+const SettingsToggleInput = React.forwardRef(function Toggle$1({ className, label, helpMessage, disabledMessage, name, ...props }, ref) {
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(
+    InlineField.InlineField,
+    {
+      className,
+      name,
+      control: /* @__PURE__ */ jsxRuntime.jsx(Toggle.ToggleInput, { ref, ...props }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { children: label }),
+        helpMessage && /* @__PURE__ */ jsxRuntime.jsx(Message.HelpMessage, { children: helpMessage }),
+        disabledMessage && props.disabled && /* @__PURE__ */ jsxRuntime.jsx(Message.HelpMessage, { children: disabledMessage })
+      ]
+    }
+  );
+  return content;
+});
+const SettingsToggleControl = React.forwardRef(function ToggleControl(props, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactForm.Control, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(SettingsToggleInput, { ref, ...props }) });
+});
+exports.SettingsToggleControl = SettingsToggleControl;
+exports.SettingsToggleInput = SettingsToggleInput;
+//# sourceMappingURL=SettingsToggle.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsToggle.cjs","sources":["../../../../../src/components/Form/Controls/SettingsToggle/SettingsToggle.tsx"],"sourcesContent":["/*\nCopyright 2025 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport {\n  ComponentProps,\n  ComponentRef,\n  forwardRef,\n  PropsWithChildren,\n} from \"react\";\nimport { ToggleInput } from \"../Toggle\";\nimport { Label } from \"../../Label\";\nimport { HelpMessage } from \"../../Message\";\nimport { InlineField } from \"../../InlineField\";\nimport React from \"react\";\nimport { Control } from \"@radix-ui/react-form\";\n\ntype SettingsToggleProps = {\n  /**\n   * The CSS class name for the containing field.\n   */\n  className?: string;\n  /**\n   * The field name.\n   */\n  name: string;\n  label: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  helpMessage?: string;\n  /**\n   * Optional help text to display below the setting.\n   */\n  disabledMessage?: string;\n} & Omit<ComponentProps<typeof ToggleInput>, \"type\">;\n\n/**\n * A toggle component.\n */\nexport const SettingsToggleInput = forwardRef<\n  HTMLInputElement,\n  PropsWithChildren<SettingsToggleProps>\n>(function Toggle(\n  { className, label, helpMessage, disabledMessage, name, ...props },\n  ref,\n) {\n  const content = (\n    <InlineField\n      className={className}\n      name={name}\n      control={<ToggleInput ref={ref} {...props} />}\n    >\n      <Label>{label}</Label>\n      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}\n      {disabledMessage && props.disabled && (\n        <HelpMessage>{disabledMessage}</HelpMessage>\n      )}\n    </InlineField>\n  );\n  return content;\n});\n\n/**\n * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.\n */\nexport const SettingsToggleControl = forwardRef<\n  ComponentRef<typeof SettingsToggleInput>,\n  ComponentProps<typeof SettingsToggleInput>\n>(function ToggleControl(props, ref) {\n  return (\n    <Control asChild>\n      <SettingsToggleInput ref={ref} {...props} />\n    </Control>\n  );\n});\n"],"names":["forwardRef","Toggle","jsxs","InlineField","jsx","ToggleInput","Label","HelpMessage","Control"],"mappings":";;;;;;;;;AA2CO,MAAM,sBAAsBA,MAAA,WAGjC,SAASC,SACT,EAAE,WAAW,OAAO,aAAa,iBAAiB,MAAM,GAAG,MAAA,GAC3D,KACA;AACA,QAAM,UACJC,2BAAA;AAAA,IAACC,YAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAASC,2BAAA,IAACC,OAAY,aAAA,EAAA,KAAW,GAAG,MAAO,CAAA;AAAA,MAE3C,UAAA;AAAA,QAAAD,2BAAAA,IAACE,eAAO,UAAM,MAAA,CAAA;AAAA,QACb,eAAgBF,2BAAAA,IAAAG,QAAAA,aAAA,EAAa,UAAY,YAAA,CAAA;AAAA,QACzC,mBAAmB,MAAM,YACxBH,2BAAAA,IAACG,QAAAA,eAAa,UAAgB,gBAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAElC;AAEK,SAAA;AACT,CAAC;AAKM,MAAM,wBAAwBP,MAAAA,WAGnC,SAAS,cAAc,OAAO,KAAK;AAEjC,SAAAI,2BAAA,IAACI,qBAAQ,SAAO,MACd,yCAAC,qBAAoB,EAAA,KAAW,GAAG,MAAA,CAAO,EAC5C,CAAA;AAEJ,CAAC;;;"}

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

@@ -0,0 +1,31 @@
+import { ComponentProps, PropsWithChildren, default as React } from 'react';
+import { ToggleInput } from '../Toggle';
+type SettingsToggleProps = {
+    /**
+     * The CSS class name for the containing field.
+     */
+    className?: string;
+    /**
+     * The field name.
+     */
+    name: string;
+    label: string;
+    /**
+     * Optional help text to display below the setting.
+     */
+    helpMessage?: string;
+    /**
+     * Optional help text to display below the setting.
+     */
+    disabledMessage?: string;
+} & Omit<ComponentProps<typeof ToggleInput>, "type">;
+/**
+ * A toggle component.
+ */
+export declare const SettingsToggleInput: React.ForwardRefExoticComponent<Omit<PropsWithChildren<SettingsToggleProps>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+/**
+ * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.
+ */
+export declare const SettingsToggleControl: React.ForwardRefExoticComponent<Omit<Omit<PropsWithChildren<SettingsToggleProps>, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=SettingsToggle.d.ts.map

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

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

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

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Label } from "../../Label.js";
+import { HelpMessage } from "../../Message.js";
+import { InlineField } from "../../InlineField.js";
+import { Control } from "@radix-ui/react-form";
+import { ToggleInput } from "../Toggle/Toggle.js";
+const SettingsToggleInput = forwardRef(function Toggle({ className, label, helpMessage, disabledMessage, name, ...props }, ref) {
+  const content = /* @__PURE__ */ jsxs(
+    InlineField,
+    {
+      className,
+      name,
+      control: /* @__PURE__ */ jsx(ToggleInput, { ref, ...props }),
+      children: [
+        /* @__PURE__ */ jsx(Label, { children: label }),
+        helpMessage && /* @__PURE__ */ jsx(HelpMessage, { children: helpMessage }),
+        disabledMessage && props.disabled && /* @__PURE__ */ jsx(HelpMessage, { children: disabledMessage })
+      ]
+    }
+  );
+  return content;
+});
+const SettingsToggleControl = forwardRef(function ToggleControl(props, ref) {
+  return /* @__PURE__ */ jsx(Control, { asChild: true, children: /* @__PURE__ */ jsx(SettingsToggleInput, { ref, ...props }) });
+});
+export {
+  SettingsToggleControl,
+  SettingsToggleInput
+};
+//# sourceMappingURL=SettingsToggle.js.map

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

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

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

@@ -0,0 +1,2 @@
+export { SettingsToggleControl, SettingsToggleInput } from './SettingsToggle';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Controls/SettingsToggle/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Form/Controls/index.d.ts

@@ -6,4 +6,5 @@ export { CheckboxControl, CheckboxInput } from './Checkbox';
 export { RadioControl, RadioInput } from './Radio';
 export { ToggleControl, ToggleInput } from './Toggle';
 export { EditInPlace } from './EditInPlace';
+export { SettingsToggleInput, SettingsToggleControl } from './SettingsToggle';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Controls/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Controls/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Form/index.cjs

@@ -15,6 +15,7 @@ const Checkbox = require("./Controls/Checkbox/Checkbox.cjs");
 const Radio = require("./Controls/Radio/Radio.cjs");
 const Toggle = require("./Controls/Toggle/Toggle.cjs");
 const EditInPlace = require("./Controls/EditInPlace/EditInPlace.cjs");
+const SettingsToggle = require("./Controls/SettingsToggle/SettingsToggle.cjs");
 exports.Root = Root.Root;
 exports.Field = Field.Field;
 exports.InlineField = InlineField.InlineField;
@@ -47,4 +48,6 @@ exports.RadioInput = Radio.RadioInput;
 exports.ToggleControl = Toggle.ToggleControl;
 exports.ToggleInput = Toggle.ToggleInput;
 exports.EditInPlace = EditInPlace.EditInPlace;
+exports.SettingsToggleControl = SettingsToggle.SettingsToggleControl;
+exports.SettingsToggleInput = SettingsToggle.SettingsToggleInput;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Form/index.cjs.map

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

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

@@ -1,4 +1,4 @@
-export { ActionControl, ActionInput, PasswordControl, PasswordInput, TextControl, TextInput, MFAControl, MFAInput, CheckboxControl, CheckboxInput, RadioControl, RadioInput, ToggleControl, ToggleInput, EditInPlace, } from './Controls';
+export { ActionControl, ActionInput, PasswordControl, PasswordInput, TextControl, TextInput, MFAControl, MFAInput, CheckboxControl, CheckboxInput, RadioControl, RadioInput, ToggleControl, ToggleInput, EditInPlace, SettingsToggleInput, SettingsToggleControl, } from './Controls';
 export { Root } from './Root';
 export { Field } from './Field';
 export { InlineField } from './InlineField';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,aAAa,EACb,WAAW,EACX,eAAe,EACf,aAAa,EACb,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EACb,YAAY,EACZ,UAAU,EACV,aAAa,EACb,WAAW,EACX,WAAW,GACZ,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,cAAc,GACf,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Form/index.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,aAAa,EACb,WAAW,EACX,eAAe,EACf,aAAa,EACb,WAAW,EACX,SAAS,EACT,UAAU,EACV,QAAQ,EACR,eAAe,EACf,aAAa,EACb,YAAY,EACZ,UAAU,EACV,aAAa,EACb,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,cAAc,GACf,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Form/index.js

@@ -13,6 +13,7 @@ import { CheckboxControl, CheckboxInput } from "./Controls/Checkbox/Checkbox.js"
 import { RadioControl, RadioInput } from "./Controls/Radio/Radio.js";
 import { ToggleControl, ToggleInput } from "./Controls/Toggle/Toggle.js";
 import { EditInPlace } from "./Controls/EditInPlace/EditInPlace.js";
+import { SettingsToggleControl, SettingsToggleInput } from "./Controls/SettingsToggle/SettingsToggle.js";
 export {
   ActionControl,
   ActionInput,
@@ -33,6 +34,8 @@ export {
   RadioControl,
   RadioInput,
   Root,
+  SettingsToggleControl,
+  SettingsToggleInput,
   Submit,
   SuccessMessage,
   TextControl,

package/dist/components/Form/index.js.map

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

package/dist/index.cjs

@@ -57,6 +57,7 @@ const Field = require("./components/Form/Field.cjs");
 const InlineField = require("./components/Form/InlineField.cjs");
 const Label = require("./components/Form/Label.cjs");
 const EditInPlace = require("./components/Form/Controls/EditInPlace/EditInPlace.cjs");
+const SettingsToggle = require("./components/Form/Controls/SettingsToggle/SettingsToggle.cjs");
 exports.Alert = Alert.Alert;
 exports.Avatar = Avatar.Avatar;
 exports.AvatarStack = AvatarStack.AvatarStack;
@@ -138,4 +139,6 @@ exports.Field = Field.Field;
 exports.InlineField = InlineField.InlineField;
 exports.Label = Label.Label;
 exports.EditInPlace = EditInPlace.EditInPlace;
+exports.SettingsToggleControl = SettingsToggle.SettingsToggleControl;
+exports.SettingsToggleInput = SettingsToggle.SettingsToggleInput;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

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

package/dist/index.d.ts

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

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -55,6 +55,7 @@ import { Field } from "./components/Form/Field.js";
 import { InlineField } from "./components/Form/InlineField.js";
 import { Label } from "./components/Form/Label.js";
 import { EditInPlace } from "./components/Form/Controls/EditInPlace/EditInPlace.js";
+import { SettingsToggleControl, SettingsToggleInput } from "./components/Form/Controls/SettingsToggle/SettingsToggle.js";
 export {
   ActionControl,
   ActionInput,
@@ -113,6 +114,8 @@ export {
   Root,
   Search,
   Separator,
+  SettingsToggleControl,
+  SettingsToggleInput,
   Submit,
   Text,
   TextControl2 as TextControl,

package/dist/index.js.map

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

package/dist/style.css.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.1.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/Form/Controls/SettingsToggle/SettingsToggle.tsx

@@ -0,0 +1,79 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import {
+  ComponentProps,
+  ComponentRef,
+  forwardRef,
+  PropsWithChildren,
+} from "react";
+import { ToggleInput } from "../Toggle";
+import { Label } from "../../Label";
+import { HelpMessage } from "../../Message";
+import { InlineField } from "../../InlineField";
+import React from "react";
+import { Control } from "@radix-ui/react-form";
+
+type SettingsToggleProps = {
+  /**
+   * The CSS class name for the containing field.
+   */
+  className?: string;
+  /**
+   * The field name.
+   */
+  name: string;
+  label: string;
+  /**
+   * Optional help text to display below the setting.
+   */
+  helpMessage?: string;
+  /**
+   * Optional help text to display below the setting.
+   */
+  disabledMessage?: string;
+} & Omit<ComponentProps<typeof ToggleInput>, "type">;
+
+/**
+ * A toggle component.
+ */
+export const SettingsToggleInput = forwardRef<
+  HTMLInputElement,
+  PropsWithChildren<SettingsToggleProps>
+>(function Toggle(
+  { className, label, helpMessage, disabledMessage, name, ...props },
+  ref,
+) {
+  const content = (
+    <InlineField
+      className={className}
+      name={name}
+      control={<ToggleInput ref={ref} {...props} />}
+    >
+      <Label>{label}</Label>
+      {helpMessage && <HelpMessage>{helpMessage}</HelpMessage>}
+      {disabledMessage && props.disabled && (
+        <HelpMessage>{disabledMessage}</HelpMessage>
+      )}
+    </InlineField>
+  );
+  return content;
+});
+
+/**
+ * A styled checkbox input wrapped in a `Control` component, for use in Radix forms.
+ */
+export const SettingsToggleControl = forwardRef<
+  ComponentRef<typeof SettingsToggleInput>,
+  ComponentProps<typeof SettingsToggleInput>
+>(function ToggleControl(props, ref) {
+  return (
+    <Control asChild>
+      <SettingsToggleInput ref={ref} {...props} />
+    </Control>
+  );
+});

package/src/components/Form/Controls/SettingsToggle/index.ts

@@ -0,0 +1,10 @@
+/*
+Copyright 2025 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+Copyright 2023 New Vector Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+export { SettingsToggleControl, SettingsToggleInput } from "./SettingsToggle";

package/src/components/Form/Controls/index.ts

@@ -15,3 +15,4 @@ export { CheckboxControl, CheckboxInput } from "./Checkbox";
 export { RadioControl, RadioInput } from "./Radio";
 export { ToggleControl, ToggleInput } from "./Toggle";
 export { EditInPlace } from "./EditInPlace";
+export { SettingsToggleInput, SettingsToggleControl } from "./SettingsToggle";

package/src/components/Form/index.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd.
+Copyright 2023-2025 New Vector Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
@@ -21,6 +21,8 @@ export {
   ToggleControl,
   ToggleInput,
   EditInPlace,
+  SettingsToggleInput,
+  SettingsToggleControl,
 } from "./Controls";
 
 export { Root } from "./Root";

package/src/index.ts

@@ -85,6 +85,8 @@ export {
   InlineField,
   Label,
   EditInPlace,
+  SettingsToggleInput,
+  SettingsToggleControl,
 } from "./components/Form";
 export * as Form from "./components/Form";