braid-design-system 34.3.0 → 34.5.0

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 # braid-design-system
 
+## 34.5.0
+
+### Minor Changes
+
+- **Drawer**: Allow users to add fixed footer content to Drawer. ([#2091](https://github.com/seek-oss/braid-design-system/pull/2091))
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+    <Drawer
+      title="Drawer"
+      open={true}
+      footer={
+        <Actions>
+          <Button variant="solid" tone="formAccent">
+            Save
+          </Button>
+          <Button variant="transparent" tone="formAccent">
+            Cancel
+          </Button>
+        </Actions>
+      }
+    >
+  ```
+
+- **IconRenderer:** Add `tone` support ([#2085](https://github.com/seek-oss/braid-design-system/pull/2085))
+
+  Enable custom icons to use Braid tones in the same way as first-class Braid icons.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <IconRenderer tone={tone}>
+    {({ className }) => (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className={className}
+      >
+        ...
+      </svg>
+    )}
+  </IconRenderer>
+  ```
+
+- **Dialog**: Allow users to add fixed footer content to Dialog. ([#2091](https://github.com/seek-oss/braid-design-system/pull/2091))
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+    <Dialog
+      title="Dialog"
+      open={true}
+      footer={
+        <Actions>
+          <Button variant="solid" tone="formAccent">
+            Save
+          </Button>
+          <Button variant="transparent" tone="formAccent">
+            Cancel
+          </Button>
+        </Actions>
+      }
+    >
+  ```
+
+### Patch Changes
+
+- Reduce consumer bundle size by including only the required fonts from `@capsizecss/metrics` ([#2086](https://github.com/seek-oss/braid-design-system/pull/2086))
+
+## 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/_virtual/_rolldown/runtime.cjs

@@ -7,28 +7,20 @@ var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
-	for (var name in all) {
-		__defProp(target, name, {
-			get: all[name],
-			enumerable: true
-		});
-	}
-	if (!no_symbols) {
-		__defProp(target, Symbol.toStringTag, { value: "Module" });
-	}
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
 	return target;
 };
 var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") {
-		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-			key = keys[i];
-			if (!__hasOwnProp.call(to, key) && key !== except) {
-				__defProp(to, key, {
-					get: ((k) => from[k]).bind(null, key),
-					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-				});
-			}
-		}
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
 	}
 	return to;
 };
@@ -36,8 +28,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	value: mod,
 	enumerable: true
 }) : target, mod));
-
 //#endregion
-
 exports.__exportAll = __exportAll;
-exports.__toESM = __toESM;
+exports.__toESM = __toESM;

package/dist/_virtual/_rolldown/runtime.mjs

@@ -2,17 +2,12 @@
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
 	let target = {};
-	for (var name in all) {
-		__defProp(target, name, {
-			get: all[name],
-			enumerable: true
-		});
-	}
-	if (!no_symbols) {
-		__defProp(target, Symbol.toStringTag, { value: "Module" });
-	}
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
 	return target;
 };
-
 //#endregion
-export { __exportAll };
+export { __exportAll };

package/dist/color-mode/query-param.cjs

@@ -1,6 +1,5 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_sprinkles_css = require('../lib/css/atoms/sprinkles.css.cjs');
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_sprinkles_css = require("../lib/css/atoms/sprinkles.css.cjs");
 //#region src/color-mode/query-param.ts
 const flag = "_bdsdm";
 /**
@@ -49,7 +48,6 @@ const getColorModeQueryParam = () => {
 	if (typeof window !== "undefined" && window[flag]) return `${flag}=${window[flag]}`;
 	return "";
 };
-
 //#endregion
 exports.colorModeQueryParamCheck = colorModeQueryParamCheck;
-exports.getColorModeQueryParam = getColorModeQueryParam;
+exports.getColorModeQueryParam = getColorModeQueryParam;

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/color-mode/query-param.mjs

@@ -1,5 +1,4 @@
 import { darkMode } from "../lib/css/atoms/sprinkles.css.mjs";
-
 //#region src/color-mode/query-param.ts
 const flag = "_bdsdm";
 /**
@@ -48,6 +47,5 @@ const getColorModeQueryParam = () => {
 	if (typeof window !== "undefined" && window[flag]) return `${flag}=${window[flag]}`;
 	return "";
 };
-
 //#endregion
-export { colorModeQueryParamCheck, getColorModeQueryParam };
+export { colorModeQueryParamCheck, getColorModeQueryParam };

package/dist/css.cjs

@@ -1,12 +1,11 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_breakpoints = require('./lib/css/breakpoints.cjs');
-const require_vars_css = require('./lib/themes/vars.css.cjs');
-const require_outlineStyle = require('./lib/css/outlineStyle.cjs');
-const require_colorModeStyle = require('./lib/css/colorModeStyle.cjs');
-const require_responsiveStyle = require('./lib/css/responsiveStyle.cjs');
-const require_atoms = require('./lib/css/atoms/atoms.cjs');
-const require_globalTypographyStyles = require('./lib/css/globalTypographyStyles.cjs');
-
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_breakpoints = require("./lib/css/breakpoints.cjs");
+const require_vars_css = require("./lib/themes/vars.css.cjs");
+const require_outlineStyle = require("./lib/css/outlineStyle.cjs");
+const require_colorModeStyle = require("./lib/css/colorModeStyle.cjs");
+const require_responsiveStyle = require("./lib/css/responsiveStyle.cjs");
+const require_atoms = require("./lib/css/atoms/atoms.cjs");
+const require_globalTypographyStyles = require("./lib/css/globalTypographyStyles.cjs");
 //#region src/css.ts
 const { grid, space, touchableSize, contentWidth, backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor }, foregroundColor, textWeight, borderColor, borderRadius, borderWidth, shadow, transition } = require_vars_css.vars;
 const vars = {
@@ -29,7 +28,6 @@ function atoms(props) {
 	}
 	return require_atoms.atoms(props);
 }
-
 //#endregion
 exports.atoms = atoms;
 exports.breakpoints = require_breakpoints.breakpoints;
@@ -38,4 +36,4 @@ exports.globalHeadingStyle = require_globalTypographyStyles.globalHeadingStyle;
 exports.globalTextStyle = require_globalTypographyStyles.globalTextStyle;
 exports.outlineStyle = require_outlineStyle.outlineStyle;
 exports.responsiveStyle = require_responsiveStyle.responsiveStyle;
-exports.vars = vars;
+exports.vars = vars;

package/dist/css.d.cts

@@ -4,7 +4,6 @@ import { colorModeStyle } from "./lib/css/colorModeStyle.cjs";
 import { globalHeadingStyle, globalTextStyle } from "./lib/css/globalTypographyStyles.cjs";
 import { outlineStyle } from "./lib/css/outlineStyle.cjs";
 import { responsiveStyle } from "./lib/css/responsiveStyle.cjs";
-
 //#region src/css.d.ts
 declare const vars: {
   grid: `var(--${string})`;

package/dist/css.d.mts

@@ -4,7 +4,6 @@ import { colorModeStyle } from "./lib/css/colorModeStyle.mjs";
 import { globalHeadingStyle, globalTextStyle } from "./lib/css/globalTypographyStyles.mjs";
 import { outlineStyle } from "./lib/css/outlineStyle.mjs";
 import { responsiveStyle } from "./lib/css/responsiveStyle.mjs";
-
 //#region src/css.d.ts
 declare const vars: {
   grid: `var(--${string})`;

package/dist/css.mjs

@@ -5,7 +5,6 @@ import { colorModeStyle } from "./lib/css/colorModeStyle.mjs";
 import { responsiveStyle } from "./lib/css/responsiveStyle.mjs";
 import { atoms as atoms$1 } from "./lib/css/atoms/atoms.mjs";
 import { globalHeadingStyle, globalTextStyle } from "./lib/css/globalTypographyStyles.mjs";
-
 //#region src/css.ts
 const { grid, space, touchableSize, contentWidth, backgroundColor: { surfaceDark: _, bodyDark: __, ...backgroundColor }, foregroundColor, textWeight, borderColor, borderRadius, borderWidth, shadow, transition } = vars$1;
 const vars = {
@@ -28,6 +27,5 @@ function atoms(props) {
 	}
 	return atoms$1(props);
 }
-
 //#endregion
-export { atoms, breakpoints, colorModeStyle, globalHeadingStyle, globalTextStyle, outlineStyle, responsiveStyle, vars };
+export { atoms, breakpoints, colorModeStyle, globalHeadingStyle, globalTextStyle, outlineStyle, responsiveStyle, vars };