braid-design-system 34.3.0 → 34.4.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # braid-design-system
 
+## 34.4.0
+
+### Minor Changes
+
+- **ButtonIcon:** Add `loading` support ([#2083](https://github.com/seek-oss/braid-design-system/pull/2083))
+
+  Provide the same `loading` behaviour as available on `Button`
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <ButtonIcon icon={<IconSend />} label="Send" loading />
+  ```
+
+- **Button, ButtonIcon:** Add `aria-pressed` support ([#2084](https://github.com/seek-oss/braid-design-system/pull/2084))
+
+- **ButtonIcon:** Add support for `solid` variant ([#2079](https://github.com/seek-oss/braid-design-system/pull/2079))
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <ButtonIcon variant="solid" label="Solid variant" icon={<IconSend />} />
+  ```
+
+### Patch Changes
+
+- **Button:** Update `loading` indicator ([#2080](https://github.com/seek-oss/braid-design-system/pull/2080))
+
+  Update design asset for loading state, moving from progressive ellipsis animation, to a spinning indicator.
+
+- **Button:** Ensure active state is not applied when disabled ([#2080](https://github.com/seek-oss/braid-design-system/pull/2080))
+
+- Ensure fallback ids pass HTML validation ([#2083](https://github.com/seek-oss/braid-design-system/pull/2083))
+
+  Adopt recommended practice of ensuring all generated `id` attributes start with a letter as per HTML validation rules.
+
 ## 34.3.0
 
 ### Minor Changes

package/dist/color-mode/query-param.d.cts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
+declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/color-mode/query-param.d.mts

@@ -43,6 +43,6 @@ declare const colorModeQueryParamCheck: string;
  *
  * @returns Braid color mode preference as query string parameter
  */
-declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
+declare const getColorModeQueryParam: () => "" | "_bdsdm=1" | "_bdsdm=2" | "_bdsdm=0";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/lib/components/Button/Button.cjs

@@ -2,6 +2,7 @@ const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_BackgroundContext = require('../Box/BackgroundContext.cjs');
 const require_buildDataAttributes = require('../private/buildDataAttributes.cjs');
 const require_Box = require('../Box/Box.cjs');
+const require_iconSlotSpace = require('../private/iconSlotSpace.cjs');
 const require_Text = require('../Text/Text.cjs');
 const require_virtualTouchable_css = require('../private/touchable/virtualTouchable.css.cjs');
 const require_ActionsContext = require('../Actions/ActionsContext.cjs');
@@ -9,6 +10,7 @@ const require_negativeMargin = require('../../css/negativeMargin/negativeMargin.
 const require_Bleed = require('../Bleed/Bleed.cjs');
 const require_AvoidWidowIcon = require('../private/AvoidWidowIcon/AvoidWidowIcon.cjs');
 const require_FieldOverlay = require('../private/FieldOverlay/FieldOverlay.cjs');
+const require_ButtonLoader = require('./ButtonLoader.cjs');
 const require_Button_css = require('./Button.css.cjs');
 let assert = require("assert");
 assert = require_runtime.__toESM(assert);
@@ -165,28 +167,6 @@ const variants = {
 		}
 	}
 };
-const ButtonLoader = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
-	"aria-hidden": true,
-	component: "span",
-	display: "inlineBlock",
-	children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-			component: "span",
-			className: require_Button_css.loadingDot,
-			children: "."
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-			component: "span",
-			className: require_Button_css.loadingDot,
-			children: "."
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-			component: "span",
-			className: require_Button_css.loadingDot,
-			children: "."
-		})
-	]
-});
 const transparentPaddingX = "small";
 const buttonRadius = "standard";
 const resolveToneAndVariant = ({ variant: variantProp, tone: toneProp }) => {
@@ -272,7 +252,11 @@ const ButtonText = ({ children, loading, size: sizeProp, icon, iconPosition = "l
 					children: icon
 				}) : null,
 				children,
-				loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonLoader, {}) : null,
+				loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+					component: "span",
+					paddingLeft: require_iconSlotSpace.iconSlotSpace,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonLoader.ButtonLoader, {})
+				}) : null,
 				!loading && icon && iconPosition === "trailing" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvoidWidowIcon.AvoidWidowIcon, {
 					iconPosition,
 					className: shouldReducePaddingX || bleed ? null : require_negativeMargin.negativeMargin("right", "xxsmall"),
@@ -326,7 +310,7 @@ const ButtonContainer = ({ children, bleed, variant = "solid" }) => bleed && var
 	horizontal: transparentPaddingX,
 	children
 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
-const Button = (0, react.forwardRef)(({ onClick, children, size, tone, icon, iconPosition, bleed, variant, loading, type = "button", id, tabIndex, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, data, ...restProps }, ref) => {
+const Button = (0, react.forwardRef)(({ onClick, children, size, tone, icon, iconPosition, bleed, variant, loading, type = "button", id, tabIndex, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-pressed": ariaPressed, data, ...restProps }, ref) => {
 	const { root, content } = useButtonStyles({
 		variant,
 		tone,
@@ -350,6 +334,7 @@ const Button = (0, react.forwardRef)(({ onClick, children, size, tone, icon, ico
 			"aria-expanded": ariaExpanded,
 			"aria-describedby": ariaDescribedBy,
 			"aria-label": ariaLabel,
+			"aria-pressed": ariaPressed,
 			onClick,
 			disabled: loading,
 			...root,

package/dist/lib/components/Button/Button.css.cjs

@@ -16,8 +16,8 @@ const root = (0, _vanilla_extract_css.style)({
 	outline: "none"
 }, "root");
 const forceActive = (0, _vanilla_extract_css.style)({}, "forceActive");
-const activeAnimation = (0, _vanilla_extract_css.style)({ selectors: { [`${root}:active &, ${forceActive}&`]: { transform: require_vars_css.vars.transform.touchable } } }, "activeAnimation");
-const activeOverlay = (0, _vanilla_extract_css.style)({ selectors: { [`${root}:active &, ${forceActive}&`]: { opacity: 1 } } }, "activeOverlay");
+const activeAnimation = (0, _vanilla_extract_css.style)({ selectors: { [`${root}:not(:disabled):active &, ${forceActive}&`]: { transform: require_vars_css.vars.transform.touchable } } }, "activeAnimation");
+const activeOverlay = (0, _vanilla_extract_css.style)({ selectors: { [`${root}:not(:disabled):active &, ${forceActive}&`]: { opacity: 1 } } }, "activeOverlay");
 const hoverOverlay = (0, _vanilla_extract_css.style)({ selectors: { [`${root}:hover:not(:disabled) &`]: { opacity: 1 } } }, "hoverOverlay");
 const { transition: outlineTransition, ...restOutlineStyles } = require_outlineStyle.outlineStyle(`${root}:focus-visible > &`);
 const focusRing = (0, _vanilla_extract_css.style)([{ transition: [require_vars_css.vars.transition.touchable, outlineTransition].join(", ") }, restOutlineStyles], "focusRing");
@@ -43,28 +43,6 @@ const padToMinHeight = (0, _vanilla_extract_css.style)({
 	paddingTop: capHeightToMinHeight,
 	paddingBottom: capHeightToMinHeight
 }, "padToMinHeight");
-const dot1 = (0, _vanilla_extract_css.keyframes)({
-	"14%": { opacity: 0 },
-	"15%,100%": { opacity: 1 }
-}, "dot1");
-const dot2 = (0, _vanilla_extract_css.keyframes)({
-	"29%": { opacity: 0 },
-	"30%,100%": { opacity: 1 }
-}, "dot2");
-const dot3 = (0, _vanilla_extract_css.keyframes)({
-	"44%": { opacity: 0 },
-	"45%,100%": { opacity: 1 }
-}, "dot3");
-const loadingDot = (0, _vanilla_extract_css.style)({
-	animationDuration: "1s",
-	animationIterationCount: "infinite",
-	opacity: 0,
-	selectors: {
-		[`&:nth-child(1)`]: { animationName: dot1 },
-		[`&:nth-child(2)`]: { animationName: dot2 },
-		[`&:nth-child(3)`]: { animationName: dot3 }
-	}
-}, "loadingDot");
 const invertedBackgroundsLightMode = (0, _vanilla_extract_css.styleVariants)({
 	soft: require_colorModeStyle.colorModeStyle({ lightMode: { background: (0, polished.rgba)("#fff", .1) } }),
 	hover: require_colorModeStyle.colorModeStyle({ lightMode: { background: (0, polished.rgba)("#fff", .15) } }),
@@ -86,7 +64,6 @@ exports.forceActive = forceActive;
 exports.hoverOverlay = hoverOverlay;
 exports.invertedBackgroundsDarkMode = invertedBackgroundsDarkMode;
 exports.invertedBackgroundsLightMode = invertedBackgroundsLightMode;
-exports.loadingDot = loadingDot;
 exports.padToMinHeight = padToMinHeight;
 exports.root = root;
 exports.small = small;

package/dist/lib/components/Button/Button.css.mjs

@@ -3,7 +3,7 @@ import { outlineStyle } from "../../css/outlineStyle.mjs";
 import { colorModeStyle } from "../../css/colorModeStyle.mjs";
 import { responsiveStyle } from "../../css/responsiveStyle.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
-import { createVar, keyframes, style, styleVariants } from "@vanilla-extract/css";
+import { createVar, style, styleVariants } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { rgba } from "polished";
 
@@ -15,8 +15,8 @@ const root = style({
 	outline: "none"
 }, "root");
 const forceActive = style({}, "forceActive");
-const activeAnimation = style({ selectors: { [`${root}:active &, ${forceActive}&`]: { transform: vars.transform.touchable } } }, "activeAnimation");
-const activeOverlay = style({ selectors: { [`${root}:active &, ${forceActive}&`]: { opacity: 1 } } }, "activeOverlay");
+const activeAnimation = style({ selectors: { [`${root}:not(:disabled):active &, ${forceActive}&`]: { transform: vars.transform.touchable } } }, "activeAnimation");
+const activeOverlay = style({ selectors: { [`${root}:not(:disabled):active &, ${forceActive}&`]: { opacity: 1 } } }, "activeOverlay");
 const hoverOverlay = style({ selectors: { [`${root}:hover:not(:disabled) &`]: { opacity: 1 } } }, "hoverOverlay");
 const { transition: outlineTransition, ...restOutlineStyles } = outlineStyle(`${root}:focus-visible > &`);
 const focusRing = style([{ transition: [vars.transition.touchable, outlineTransition].join(", ") }, restOutlineStyles], "focusRing");
@@ -42,28 +42,6 @@ const padToMinHeight = style({
 	paddingTop: capHeightToMinHeight,
 	paddingBottom: capHeightToMinHeight
 }, "padToMinHeight");
-const dot1 = keyframes({
-	"14%": { opacity: 0 },
-	"15%,100%": { opacity: 1 }
-}, "dot1");
-const dot2 = keyframes({
-	"29%": { opacity: 0 },
-	"30%,100%": { opacity: 1 }
-}, "dot2");
-const dot3 = keyframes({
-	"44%": { opacity: 0 },
-	"45%,100%": { opacity: 1 }
-}, "dot3");
-const loadingDot = style({
-	animationDuration: "1s",
-	animationIterationCount: "infinite",
-	opacity: 0,
-	selectors: {
-		[`&:nth-child(1)`]: { animationName: dot1 },
-		[`&:nth-child(2)`]: { animationName: dot2 },
-		[`&:nth-child(3)`]: { animationName: dot3 }
-	}
-}, "loadingDot");
 const invertedBackgroundsLightMode = styleVariants({
 	soft: colorModeStyle({ lightMode: { background: rgba("#fff", .1) } }),
 	hover: colorModeStyle({ lightMode: { background: rgba("#fff", .15) } }),
@@ -77,4 +55,4 @@ const invertedBackgroundsDarkMode = styleVariants({
 endFileScope();
 
 //#endregion
-export { activeAnimation, activeOverlay, bleedVerticallyToCapHeight, focusRing, forceActive, hoverOverlay, invertedBackgroundsDarkMode, invertedBackgroundsLightMode, loadingDot, padToMinHeight, root, small, standard };
+export { activeAnimation, activeOverlay, bleedVerticallyToCapHeight, focusRing, forceActive, hoverOverlay, invertedBackgroundsDarkMode, invertedBackgroundsLightMode, padToMinHeight, root, small, standard };

package/dist/lib/components/Button/Button.d.cts

@@ -32,6 +32,7 @@ interface ButtonProps extends ButtonStyleProps {
   'aria-expanded'?: NativeButtonProps['aria-expanded'];
   'aria-describedby'?: NativeButtonProps['aria-describedby'];
   'aria-label'?: NativeButtonProps['aria-label'];
+  'aria-pressed'?: NativeButtonProps['aria-pressed'];
   tabIndex?: NativeButtonProps['tabIndex'];
   data?: DataAttributeMap;
 }

package/dist/lib/components/Button/Button.d.mts

@@ -32,6 +32,7 @@ interface ButtonProps extends ButtonStyleProps {
   'aria-expanded'?: NativeButtonProps['aria-expanded'];
   'aria-describedby'?: NativeButtonProps['aria-describedby'];
   'aria-label'?: NativeButtonProps['aria-label'];
+  'aria-pressed'?: NativeButtonProps['aria-pressed'];
   tabIndex?: NativeButtonProps['tabIndex'];
   data?: DataAttributeMap;
 }

package/dist/lib/components/Button/Button.mjs

@@ -1,6 +1,7 @@
 import { useBackgroundLightness, useColorContrast } from "../Box/BackgroundContext.mjs";
 import buildDataAttributes_default from "../private/buildDataAttributes.mjs";
 import { Box } from "../Box/Box.mjs";
+import { iconSlotSpace } from "../private/iconSlotSpace.mjs";
 import { Text } from "../Text/Text.mjs";
 import { virtualTouchable } from "../private/touchable/virtualTouchable.css.mjs";
 import ActionsContext_default from "../Actions/ActionsContext.mjs";
@@ -8,7 +9,8 @@ import { negativeMargin } from "../../css/negativeMargin/negativeMargin.mjs";
 import { Bleed } from "../Bleed/Bleed.mjs";
 import { AvoidWidowIcon } from "../private/AvoidWidowIcon/AvoidWidowIcon.mjs";
 import { FieldOverlay } from "../private/FieldOverlay/FieldOverlay.mjs";
-import { activeAnimation, activeOverlay, bleedVerticallyToCapHeight, focusRing, forceActive, hoverOverlay, invertedBackgroundsDarkMode, invertedBackgroundsLightMode, loadingDot, padToMinHeight, root, small, standard } from "./Button.css.mjs";
+import { ButtonLoader } from "./ButtonLoader.mjs";
+import { activeAnimation, activeOverlay, bleedVerticallyToCapHeight, focusRing, forceActive, hoverOverlay, invertedBackgroundsDarkMode, invertedBackgroundsLightMode, padToMinHeight, root, small, standard } from "./Button.css.mjs";
 import assert from "assert";
 import { forwardRef, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -163,28 +165,6 @@ const variants = {
 		}
 	}
 };
-const ButtonLoader = () => /* @__PURE__ */ jsxs(Box, {
-	"aria-hidden": true,
-	component: "span",
-	display: "inlineBlock",
-	children: [
-		/* @__PURE__ */ jsx(Box, {
-			component: "span",
-			className: loadingDot,
-			children: "."
-		}),
-		/* @__PURE__ */ jsx(Box, {
-			component: "span",
-			className: loadingDot,
-			children: "."
-		}),
-		/* @__PURE__ */ jsx(Box, {
-			component: "span",
-			className: loadingDot,
-			children: "."
-		})
-	]
-});
 const transparentPaddingX = "small";
 const buttonRadius = "standard";
 const resolveToneAndVariant = ({ variant: variantProp, tone: toneProp }) => {
@@ -270,7 +250,11 @@ const ButtonText = ({ children, loading, size: sizeProp, icon, iconPosition = "l
 					children: icon
 				}) : null,
 				children,
-				loading ? /* @__PURE__ */ jsx(ButtonLoader, {}) : null,
+				loading ? /* @__PURE__ */ jsx(Box, {
+					component: "span",
+					paddingLeft: iconSlotSpace,
+					children: /* @__PURE__ */ jsx(ButtonLoader, {})
+				}) : null,
 				!loading && icon && iconPosition === "trailing" ? /* @__PURE__ */ jsx(AvoidWidowIcon, {
 					iconPosition,
 					className: shouldReducePaddingX || bleed ? null : negativeMargin("right", "xxsmall"),
@@ -324,7 +308,7 @@ const ButtonContainer = ({ children, bleed, variant = "solid" }) => bleed && var
 	horizontal: transparentPaddingX,
 	children
 }) : /* @__PURE__ */ jsx(Fragment$1, { children });
-const Button = forwardRef(({ onClick, children, size, tone, icon, iconPosition, bleed, variant, loading, type = "button", id, tabIndex, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, data, ...restProps }, ref) => {
+const Button = forwardRef(({ onClick, children, size, tone, icon, iconPosition, bleed, variant, loading, type = "button", id, tabIndex, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-pressed": ariaPressed, data, ...restProps }, ref) => {
 	const { root, content } = useButtonStyles({
 		variant,
 		tone,
@@ -348,6 +332,7 @@ const Button = forwardRef(({ onClick, children, size, tone, icon, iconPosition,
 			"aria-expanded": ariaExpanded,
 			"aria-describedby": ariaDescribedBy,
 			"aria-label": ariaLabel,
+			"aria-pressed": ariaPressed,
 			onClick,
 			disabled: loading,
 			...root,

package/dist/lib/components/Button/ButtonLoader.cjs

@@ -0,0 +1,33 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_Box = require('../Box/Box.cjs');
+const require_IconContainer = require('../icons/IconContainer.cjs');
+const require_ButtonLoader_css = require('./ButtonLoader.css.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/lib/components/Button/ButtonLoader.tsx
+const LoaderSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	xmlSpace: "preserve",
+	focusable: "false",
+	fill: "currentColor",
+	width: 16,
+	height: 16,
+	"aria-labelledby": titleId,
+	...props,
+	children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", {
+		id: titleId,
+		children: title
+	}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10a1 1 0 1 1-2 0c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8a1 1 0 1 1 0 2" })]
+});
+const ButtonLoader = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconContainer.IconContainer, {
+	...props,
+	children: ({ className, ...svgProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		component: LoaderSvg,
+		className: [className, require_ButtonLoader_css.loading],
+		...svgProps
+	})
+});
+
+//#endregion
+exports.ButtonLoader = ButtonLoader;

package/dist/lib/components/Button/ButtonLoader.css.cjs

@@ -0,0 +1,12 @@
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
+let _vanilla_extract_css = require("@vanilla-extract/css");
+
+//#region src/lib/components/Button/ButtonLoader.css.ts
+(0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/Button/ButtonLoader.css.ts", "braid-design-system");
+const spin = (0, _vanilla_extract_css.keyframes)({ to: { transform: "rotate(360deg)" } }, "spin");
+const loading = (0, _vanilla_extract_css.style)({ animation: `${spin} 0.7s linear infinite` }, "loading");
+(0, _vanilla_extract_css_fileScope.endFileScope)();
+
+//#endregion
+exports.loading = loading;

package/dist/lib/components/Button/ButtonLoader.css.mjs

@@ -0,0 +1,11 @@
+import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
+import { keyframes, style } from "@vanilla-extract/css";
+
+//#region src/lib/components/Button/ButtonLoader.css.ts
+setFileScope("src/lib/components/Button/ButtonLoader.css.ts", "braid-design-system");
+const spin = keyframes({ to: { transform: "rotate(360deg)" } }, "spin");
+const loading = style({ animation: `${spin} 0.7s linear infinite` }, "loading");
+endFileScope();
+
+//#endregion
+export { loading };

package/dist/lib/components/Button/ButtonLoader.mjs

@@ -0,0 +1,32 @@
+import { Box } from "../Box/Box.mjs";
+import { IconContainer } from "../icons/IconContainer.mjs";
+import { loading } from "./ButtonLoader.css.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/lib/components/Button/ButtonLoader.tsx
+const LoaderSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	xmlSpace: "preserve",
+	focusable: "false",
+	fill: "currentColor",
+	width: 16,
+	height: 16,
+	"aria-labelledby": titleId,
+	...props,
+	children: [title ? /* @__PURE__ */ jsx("title", {
+		id: titleId,
+		children: title
+	}) : null, /* @__PURE__ */ jsx("path", { d: "M12 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10a1 1 0 1 1-2 0c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8a1 1 0 1 1 0 2" })]
+});
+const ButtonLoader = (props) => /* @__PURE__ */ jsx(IconContainer, {
+	...props,
+	children: ({ className, ...svgProps }) => /* @__PURE__ */ jsx(Box, {
+		component: LoaderSvg,
+		className: [className, loading],
+		...svgProps
+	})
+});
+
+//#endregion
+export { ButtonLoader };

package/dist/lib/components/ButtonIcon/ButtonIcon.cjs

@@ -5,6 +5,7 @@ const require_useFallbackId = require('../../hooks/useFallbackId.cjs');
 const require_Text = require('../Text/Text.cjs');
 const require_index = require('../../hooks/useIcon/index.cjs');
 const require_Bleed = require('../Bleed/Bleed.cjs');
+const require_ButtonLoader = require('../Button/ButtonLoader.cjs');
 const require_Button = require('../Button/Button.cjs');
 const require_TooltipRenderer = require('../TooltipRenderer/TooltipRenderer.cjs');
 const require_ButtonIcon_css = require('./ButtonIcon.css.cjs');
@@ -14,7 +15,11 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/lib/components/ButtonIcon/ButtonIcon.tsx
-const buttonIconVariants = ["soft", "transparent"];
+const buttonIconVariants = [
+	"soft",
+	"transparent",
+	"solid"
+];
 const buttonIconTones = ["neutral", "formAccent"];
 const buttonIconSizes = [
 	"small",
@@ -26,13 +31,16 @@ const padding = {
 	standard: "xsmall",
 	large: "xsmall"
 };
-const ButtonIconContent = (0, react.forwardRef)(({ icon, label, id, size = "standard", tone = "neutral", variant = "soft", type = "button", bleed, tooltipPlacement, onClick, onMouseDown, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopUp, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, tabIndex, data, ...restProps }, forwardedRef) => {
+const ButtonIconContent = (0, react.forwardRef)(({ icon, label, id, size = "standard", tone = "neutral", variant = "soft", type = "button", bleed, tooltipPlacement, loading, onClick, onMouseDown, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopUp, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-pressed": ariaPressed, tabIndex, data, ...restProps }, forwardedRef) => {
 	const { root, content } = require_Button.useButtonStyles({
 		variant,
 		tone,
+		loading,
 		size: size === "small" ? "small" : "standard",
 		radius: "full"
 	});
+	const fallbackIconTone = variant === "solid" ? "neutral" : tone;
+	const resolvedIconTone = icon.props.tone || fallbackIconTone;
 	(0, assert.default)(icon && icon.props.size === void 0, "Icons cannot set the 'size' prop when passed to a ButtonIcon component");
 	const button$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		component: "button",
@@ -44,6 +52,7 @@ const ButtonIconContent = (0, react.forwardRef)(({ icon, label, id, size = "stan
 		"aria-haspopup": ariaHasPopUp,
 		"aria-expanded": ariaExpanded,
 		"aria-describedby": ariaDescribedBy,
+		"aria-pressed": ariaPressed,
 		onClick,
 		onKeyUp,
 		onKeyDown,
@@ -51,6 +60,7 @@ const ButtonIconContent = (0, react.forwardRef)(({ icon, label, id, size = "stan
 		maxWidth: "content",
 		tabIndex,
 		...root,
+		disabled: loading,
 		className: [root.className, require_ButtonIcon_css.button],
 		...require_buildDataAttributes.default({
 			data,
@@ -72,8 +82,11 @@ const ButtonIconContent = (0, react.forwardRef)(({ icon, label, id, size = "stan
 					size,
 					crop: true
 				}),
-				children: (0, react.cloneElement)(icon, {
-					tone: icon.props.tone || tone,
+				children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonLoader.ButtonLoader, {
+					tone: resolvedIconTone,
+					size: "fill"
+				}) : (0, react.cloneElement)(icon, {
+					tone: resolvedIconTone,
 					size: "fill"
 				})
 			})]

package/dist/lib/components/ButtonIcon/ButtonIcon.d.cts

@@ -5,7 +5,7 @@ import * as react from "react";
 import { AllHTMLAttributes, ReactElement } from "react";
 
 //#region src/lib/components/ButtonIcon/ButtonIcon.d.ts
-declare const buttonIconVariants: Array<Extract<ButtonStyleProps['variant'], 'soft' | 'transparent'>>;
+declare const buttonIconVariants: Array<Extract<ButtonStyleProps['variant'], 'soft' | 'transparent' | 'solid'>>;
 declare const buttonIconTones: Array<Extract<ButtonStyleProps['tone'], 'neutral' | 'formAccent'>>;
 declare const buttonIconSizes: readonly ["small", "standard", "large"];
 type ButtonIconSize = (typeof buttonIconSizes)[number];
@@ -25,7 +25,9 @@ interface ButtonIconProps {
   'aria-haspopup'?: NativeButtonProps['aria-haspopup'];
   'aria-expanded'?: NativeButtonProps['aria-expanded'];
   'aria-describedby'?: NativeButtonProps['aria-describedby'];
+  'aria-pressed'?: NativeButtonProps['aria-pressed'];
   tabIndex?: number;
+  loading?: boolean;
   data?: DataAttributeMap;
   bleed?: boolean;
   tooltipPlacement?: 'bottom' | 'top';

package/dist/lib/components/ButtonIcon/ButtonIcon.d.mts

@@ -5,7 +5,7 @@ import * as react from "react";
 import { AllHTMLAttributes, ReactElement } from "react";
 
 //#region src/lib/components/ButtonIcon/ButtonIcon.d.ts
-declare const buttonIconVariants: Array<Extract<ButtonStyleProps['variant'], 'soft' | 'transparent'>>;
+declare const buttonIconVariants: Array<Extract<ButtonStyleProps['variant'], 'soft' | 'transparent' | 'solid'>>;
 declare const buttonIconTones: Array<Extract<ButtonStyleProps['tone'], 'neutral' | 'formAccent'>>;
 declare const buttonIconSizes: readonly ["small", "standard", "large"];
 type ButtonIconSize = (typeof buttonIconSizes)[number];
@@ -25,7 +25,9 @@ interface ButtonIconProps {
   'aria-haspopup'?: NativeButtonProps['aria-haspopup'];
   'aria-expanded'?: NativeButtonProps['aria-expanded'];
   'aria-describedby'?: NativeButtonProps['aria-describedby'];
+  'aria-pressed'?: NativeButtonProps['aria-pressed'];
   tabIndex?: number;
+  loading?: boolean;
   data?: DataAttributeMap;
   bleed?: boolean;
   tooltipPlacement?: 'bottom' | 'top';

package/dist/lib/components/ButtonIcon/ButtonIcon.mjs

@@ -4,6 +4,7 @@ import { useFallbackId } from "../../hooks/useFallbackId.mjs";
 import { Text } from "../Text/Text.mjs";
 import { iconContainerSize, iconSize } from "../../hooks/useIcon/index.mjs";
 import { Bleed } from "../Bleed/Bleed.mjs";
+import { ButtonLoader } from "../Button/ButtonLoader.mjs";
 import { ButtonOverlays, useButtonStyles } from "../Button/Button.mjs";
 import { TooltipRenderer } from "../TooltipRenderer/TooltipRenderer.mjs";
 import { button } from "./ButtonIcon.css.mjs";
@@ -12,7 +13,11 @@ import { cloneElement, forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/lib/components/ButtonIcon/ButtonIcon.tsx
-const buttonIconVariants = ["soft", "transparent"];
+const buttonIconVariants = [
+	"soft",
+	"transparent",
+	"solid"
+];
 const buttonIconTones = ["neutral", "formAccent"];
 const buttonIconSizes = [
 	"small",
@@ -24,13 +29,16 @@ const padding = {
 	standard: "xsmall",
 	large: "xsmall"
 };
-const ButtonIconContent = forwardRef(({ icon, label, id, size = "standard", tone = "neutral", variant = "soft", type = "button", bleed, tooltipPlacement, onClick, onMouseDown, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopUp, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, tabIndex, data, ...restProps }, forwardedRef) => {
+const ButtonIconContent = forwardRef(({ icon, label, id, size = "standard", tone = "neutral", variant = "soft", type = "button", bleed, tooltipPlacement, loading, onClick, onMouseDown, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopUp, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-pressed": ariaPressed, tabIndex, data, ...restProps }, forwardedRef) => {
 	const { root, content } = useButtonStyles({
 		variant,
 		tone,
+		loading,
 		size: size === "small" ? "small" : "standard",
 		radius: "full"
 	});
+	const fallbackIconTone = variant === "solid" ? "neutral" : tone;
+	const resolvedIconTone = icon.props.tone || fallbackIconTone;
 	assert(icon && icon.props.size === void 0, "Icons cannot set the 'size' prop when passed to a ButtonIcon component");
 	const button$1 = /* @__PURE__ */ jsx(Box, {
 		component: "button",
@@ -42,6 +50,7 @@ const ButtonIconContent = forwardRef(({ icon, label, id, size = "standard", tone
 		"aria-haspopup": ariaHasPopUp,
 		"aria-expanded": ariaExpanded,
 		"aria-describedby": ariaDescribedBy,
+		"aria-pressed": ariaPressed,
 		onClick,
 		onKeyUp,
 		onKeyDown,
@@ -49,6 +58,7 @@ const ButtonIconContent = forwardRef(({ icon, label, id, size = "standard", tone
 		maxWidth: "content",
 		tabIndex,
 		...root,
+		disabled: loading,
 		className: [root.className, button],
 		...buildDataAttributes_default({
 			data,
@@ -70,8 +80,11 @@ const ButtonIconContent = forwardRef(({ icon, label, id, size = "standard", tone
 					size,
 					crop: true
 				}),
-				children: cloneElement(icon, {
-					tone: icon.props.tone || tone,
+				children: loading ? /* @__PURE__ */ jsx(ButtonLoader, {
+					tone: resolvedIconTone,
+					size: "fill"
+				}) : cloneElement(icon, {
+					tone: resolvedIconTone,
 					size: "fill"
 				})
 			})]

package/dist/lib/hooks/useFallbackId.cjs

@@ -4,7 +4,7 @@ let react = require("react");
 //#region src/lib/hooks/useFallbackId.ts
 const useFallbackId = (id) => {
 	const fallbackId = (0, react.useId)();
-	return id || fallbackId;
+	return id || `id-${fallbackId}`;
 };
 
 //#endregion

package/dist/lib/hooks/useFallbackId.mjs

@@ -3,7 +3,7 @@ import { useId } from "react";
 //#region src/lib/hooks/useFallbackId.ts
 const useFallbackId = (id) => {
 	const fallbackId = useId();
-	return id || fallbackId;
+	return id || `id-${fallbackId}`;
 };
 
 //#endregion

package/dist/lib/playroom/snippets/ButtonIcon.cjs

@@ -5,6 +5,10 @@ const snippets = [
 		description: "Soft",
 		code: "<ButtonIcon variant=\"soft\" icon={<IconBookmark />} label=\"Bookmark\" />"
 	},
+	{
+		description: "Solid",
+		code: "<ButtonIcon variant=\"solid\" icon={<IconBookmark />} label=\"Bookmark\" />"
+	},
 	{
 		description: "Transparent",
 		code: "<ButtonIcon variant=\"transparent\" icon={<IconHelp />} label=\"Help\" />"

package/dist/lib/playroom/snippets/ButtonIcon.mjs

@@ -4,6 +4,10 @@ const snippets = [
 		description: "Soft",
 		code: "<ButtonIcon variant=\"soft\" icon={<IconBookmark />} label=\"Bookmark\" />"
 	},
+	{
+		description: "Solid",
+		code: "<ButtonIcon variant=\"solid\" icon={<IconBookmark />} label=\"Bookmark\" />"
+	},
 	{
 		description: "Transparent",
 		code: "<ButtonIcon variant=\"transparent\" icon={<IconHelp />} label=\"Help\" />"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "34.3.0",
+  "version": "34.4.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {