braid-design-system 34.6.2 → 34.8.0-docs-uplift-20260914032958

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # braid-design-system
 
+## 34.8.0-docs-uplift-20260914032958
+
+### Minor Changes
+
+- **Accordion:** Deprecate `space` prop and update spacing defaults ([#2120](https://github.com/seek-oss/braid-design-system/pull/2120))
+
+  The `space` prop is now deprecated and will be removed in a future release. Spacing between items is now automatically derived from the `size` prop.
+
+  The following default spacing value has been updated:
+
+  | `dividers` | `size`     | Previous default | New default |
+  | ---------- | ---------- | ---------------- | ----------- |
+  | `false`    | `standard` | `large`          | `medium`    |
+
+  **MIGRATION GUIDE:**
+
+  If the updated default causes an undesired visual change, you can preserve the previous spacing by explicitly setting the `space` prop while migrating:
+
+  ```diff
+   <Accordion
+  +  space="large"
+     dividers={false}
+     size="standard"
+   >
+  ```
+
+## 34.7.0
+
+### Minor Changes
+
+- **ButtonIcon:** Add `brandAccent` tone ([#2125](https://github.com/seek-oss/braid-design-system/pull/2125))
+
+  Introduces support for the `brandAccent` tone on `ButtonIcon`.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <ButtonIcon tone="brandAccent" icon={<IconAdd />} label="Add" />
+  ```
+
+- **ButtonIcon:** Default accent tones to `solid` when `variant` is omitted ([#2125](https://github.com/seek-oss/braid-design-system/pull/2125))
+
+  Accent tones (`formAccent`, `brandAccent`) now default to `solid` when `variant` is omitted — existing `formAccent` usage can pass `variant="soft"` to keep the previous look.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <ButtonIcon tone="formAccent" icon={<IconAdd />} label="Add" />
+  ```
+
+### Patch Changes
+
+- **Rating:** Expose the star graphic with `role="img"` so the `aria-label` is announced reliably by assistive technologies. ([#2122](https://github.com/seek-oss/braid-design-system/pull/2122))
+
 ## 34.6.2
 
 ### Patch Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 SEEK
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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/Accordion/Accordion.cjs

@@ -26,7 +26,7 @@ const defaultSpaceForSize = {
 	undivided: {
 		xsmall: "medium",
 		small: "medium",
-		standard: "large",
+		standard: "medium",
 		large: "large"
 	}
 };
@@ -68,4 +68,3 @@ const Accordion = ({ children, size = defaultSize, tone, weight, space: spacePro
 //#endregion
 exports.Accordion = Accordion;
 exports.defaultSize = defaultSize;
-exports.validSpaceValues = validSpaceValues;

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

@@ -11,9 +11,10 @@ interface AccordionProps {
   size?: AccordionContextValue['size'];
   tone?: AccordionContextValue['tone'];
   weight?: AccordionContextValue['weight'];
+  /** @deprecated The spacing is now derived from the `size` prop and will be removed in a future release. */
   space?: RequiredResponsiveValue<(typeof validSpaceValues)[number]>;
   data?: DataAttributeMap;
 }
 declare const Accordion: FC<AccordionProps>;
 //#endregion
-export { Accordion, AccordionProps, validSpaceValues };
+export { Accordion, AccordionProps };

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

@@ -11,9 +11,10 @@ interface AccordionProps {
   size?: AccordionContextValue['size'];
   tone?: AccordionContextValue['tone'];
   weight?: AccordionContextValue['weight'];
+  /** @deprecated The spacing is now derived from the `size` prop and will be removed in a future release. */
   space?: RequiredResponsiveValue<(typeof validSpaceValues)[number]>;
   data?: DataAttributeMap;
 }
 declare const Accordion: FC<AccordionProps>;
 //#endregion
-export { Accordion, AccordionProps, validSpaceValues };
+export { Accordion, AccordionProps };

package/dist/lib/components/Accordion/Accordion.mjs

@@ -24,7 +24,7 @@ const defaultSpaceForSize = {
 	undivided: {
 		xsmall: "medium",
 		small: "medium",
-		standard: "large",
+		standard: "medium",
 		large: "large"
 	}
 };
@@ -64,4 +64,4 @@ const Accordion = ({ children, size = defaultSize, tone, weight, space: spacePro
 	});
 };
 //#endregion
-export { Accordion, defaultSize, validSpaceValues };
+export { Accordion, defaultSize };

package/dist/lib/components/Accordion/Accordion.playroom.cjs

@@ -3,11 +3,16 @@ const require_Accordion = require("./Accordion.cjs");
 const require_wireframeTheme_css = require("../../themes/wireframe/wireframeTheme.css.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/lib/components/Accordion/Accordion.playroom.tsx
+const validSpaceValues = [
+	"medium",
+	"large",
+	"xlarge"
+];
 const spaceScale = ["none", ...Object.keys(require_wireframeTheme_css.default.space.space)];
 const filterSpace = (space) => {
 	return require_sprinkles_css.mapResponsiveValue(space, (value) => {
-		if (spaceScale.includes(value) && !require_Accordion.validSpaceValues.includes(value)) throw new Error(`To ensure adequate space for touch targets, 'space' prop values must be one of the following: ${require_Accordion.validSpaceValues.map((x) => `"${x}"`).join(", ")}`);
-		return require_Accordion.validSpaceValues.includes(value) ? value : "medium";
+		if (spaceScale.includes(value) && !validSpaceValues.includes(value)) throw new Error(`To ensure adequate space for touch targets, 'space' prop values must be one of the following: ${validSpaceValues.map((x) => `"${x}"`).join(", ")}`);
+		return validSpaceValues.includes(value) ? value : "medium";
 	});
 };
 const Accordion = ({ space, size, tone, weight, ...restProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Accordion.Accordion, {

package/dist/lib/components/Accordion/Accordion.playroom.mjs

@@ -1,8 +1,13 @@
 import { mapResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
-import { Accordion as Accordion$1, validSpaceValues } from "./Accordion.mjs";
+import { Accordion as Accordion$1 } from "./Accordion.mjs";
 import wireframeTheme_css_default from "../../themes/wireframe/wireframeTheme.css.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/lib/components/Accordion/Accordion.playroom.tsx
+const validSpaceValues = [
+	"medium",
+	"large",
+	"xlarge"
+];
 const spaceScale = ["none", ...Object.keys(wireframeTheme_css_default.space.space)];
 const filterSpace = (space) => {
 	return mapResponsiveValue(space, (value) => {

package/dist/lib/components/Actions/Actions.cjs

@@ -25,4 +25,3 @@ const Actions = ({ size, data, children }) => {
 };
 //#endregion
 exports.Actions = Actions;
-exports.actionsSpace = actionsSpace;

package/dist/lib/components/Actions/Actions.mjs

@@ -24,4 +24,4 @@ const Actions = ({ size, data, children }) => {
 	});
 };
 //#endregion
-export { Actions, actionsSpace };
+export { Actions };

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

@@ -19,7 +19,11 @@ const buttonIconVariants = [
 	"transparent",
 	"solid"
 ];
-const buttonIconTones = ["neutral", "formAccent"];
+const buttonIconTones = [
+	"neutral",
+	"formAccent",
+	"brandAccent"
+];
 const buttonIconSizes = [
 	"small",
 	"standard",
@@ -30,7 +34,17 @@ const padding = {
 	standard: "xsmall",
 	large: "xsmall"
 };
-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 resolveToneAndVariant = ({ variant: variantProp, tone: toneProp }) => {
+	return {
+		variant: variantProp ?? (toneProp === "formAccent" || toneProp === "brandAccent" ? "solid" : "soft"),
+		tone: toneProp ?? "neutral"
+	};
+};
+const ButtonIconContent = (0, react.forwardRef)(({ icon, label, id, size = "standard", tone: toneProp, variant: variantProp, 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 { tone, variant } = resolveToneAndVariant({
+		variant: variantProp,
+		tone: toneProp
+	});
 	const { root, content } = require_Button.useButtonStyles({
 		variant,
 		tone,

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

@@ -4,7 +4,7 @@ import { ButtonStyleProps } from "../Button/Button.cjs";
 import { AllHTMLAttributes, ReactElement } from "react";
 //#region src/lib/components/ButtonIcon/ButtonIcon.d.ts
 declare const buttonIconVariants: Array<Extract<ButtonStyleProps['variant'], 'soft' | 'transparent' | 'solid'>>;
-declare const buttonIconTones: Array<Extract<ButtonStyleProps['tone'], 'neutral' | 'formAccent'>>;
+declare const buttonIconTones: Array<Extract<ButtonStyleProps['tone'], 'neutral' | 'formAccent' | 'brandAccent'>>;
 declare const buttonIconSizes: readonly ["small", "standard", "large"];
 type ButtonIconSize = (typeof buttonIconSizes)[number];
 type NativeButtonProps = AllHTMLAttributes<HTMLButtonElement>;

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

@@ -4,7 +4,7 @@ import { ButtonStyleProps } from "../Button/Button.mjs";
 import { AllHTMLAttributes, ReactElement } from "react";
 //#region src/lib/components/ButtonIcon/ButtonIcon.d.ts
 declare const buttonIconVariants: Array<Extract<ButtonStyleProps['variant'], 'soft' | 'transparent' | 'solid'>>;
-declare const buttonIconTones: Array<Extract<ButtonStyleProps['tone'], 'neutral' | 'formAccent'>>;
+declare const buttonIconTones: Array<Extract<ButtonStyleProps['tone'], 'neutral' | 'formAccent' | 'brandAccent'>>;
 declare const buttonIconSizes: readonly ["small", "standard", "large"];
 type ButtonIconSize = (typeof buttonIconSizes)[number];
 type NativeButtonProps = AllHTMLAttributes<HTMLButtonElement>;

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

@@ -17,7 +17,11 @@ const buttonIconVariants = [
 	"transparent",
 	"solid"
 ];
-const buttonIconTones = ["neutral", "formAccent"];
+const buttonIconTones = [
+	"neutral",
+	"formAccent",
+	"brandAccent"
+];
 const buttonIconSizes = [
 	"small",
 	"standard",
@@ -28,7 +32,17 @@ const padding = {
 	standard: "xsmall",
 	large: "xsmall"
 };
-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 resolveToneAndVariant = ({ variant: variantProp, tone: toneProp }) => {
+	return {
+		variant: variantProp ?? (toneProp === "formAccent" || toneProp === "brandAccent" ? "solid" : "soft"),
+		tone: toneProp ?? "neutral"
+	};
+};
+const ButtonIconContent = forwardRef(({ icon, label, id, size = "standard", tone: toneProp, variant: variantProp, 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 { tone, variant } = resolveToneAndVariant({
+		variant: variantProp,
+		tone: toneProp
+	});
 	const { root, content } = useButtonStyles({
 		variant,
 		tone,

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

@@ -4,14 +4,14 @@ import { DataAttributeMap } from "../private/buildDataAttributes.cjs";
 import { CollapsibleAlignmentProps } from "../../utils/collapsibleAlignmentProps.cjs";
 import { FC } from "react";
 //#region src/lib/components/Inline/Inline.d.ts
-declare const validInlineComponents: readonly ["div", "span", "p", "nav", "ul", "ol", "li"];
+type ValidInlineComponent = 'div' | 'span' | 'p' | 'nav' | 'ul' | 'ol' | 'li';
 type InlineProps = CollapsibleAlignmentProps & {
   space: ResponsiveSpace;
-  component?: (typeof validInlineComponents)[number];
+  component?: ValidInlineComponent;
   data?: DataAttributeMap;
   children: ReactNodeNoStrings;
   noWrap?: boolean;
 };
 declare const Inline: FC<InlineProps>;
 //#endregion
-export { Inline, InlineProps, validInlineComponents };
+export { Inline, InlineProps };

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

@@ -4,14 +4,14 @@ import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
 import { CollapsibleAlignmentProps } from "../../utils/collapsibleAlignmentProps.mjs";
 import { FC } from "react";
 //#region src/lib/components/Inline/Inline.d.ts
-declare const validInlineComponents: readonly ["div", "span", "p", "nav", "ul", "ol", "li"];
+type ValidInlineComponent = 'div' | 'span' | 'p' | 'nav' | 'ul' | 'ol' | 'li';
 type InlineProps = CollapsibleAlignmentProps & {
   space: ResponsiveSpace;
-  component?: (typeof validInlineComponents)[number];
+  component?: ValidInlineComponent;
   data?: DataAttributeMap;
   children: ReactNodeNoStrings;
   noWrap?: boolean;
 };
 declare const Inline: FC<InlineProps>;
 //#endregion
-export { Inline, InlineProps, validInlineComponents };
+export { Inline, InlineProps };

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

@@ -5,22 +5,6 @@ let _vanilla_extract_css_utils = require("@vanilla-extract/css-utils");
 //#region src/lib/components/MenuRenderer/MenuRenderer.css.ts
 (0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/MenuRenderer/MenuRenderer.css.ts", "braid-design-system");
 const menuYPadding = (0, _vanilla_extract_css.createVar)("menuYPadding");
-(0, _vanilla_extract_css.style)({
-	width: "100vw",
-	height: "100vh"
-}, "backdrop");
-const triggerVars = {
-	top: (0, _vanilla_extract_css.createVar)("triggerVars_top"),
-	left: (0, _vanilla_extract_css.createVar)("triggerVars_left"),
-	bottom: (0, _vanilla_extract_css.createVar)("triggerVars_bottom"),
-	right: (0, _vanilla_extract_css.createVar)("triggerVars_right")
-};
-(0, _vanilla_extract_css.style)({
-	top: triggerVars.bottom,
-	bottom: triggerVars.top,
-	left: triggerVars.left,
-	right: triggerVars.right
-}, "menuPosition");
 const widthVar = (0, _vanilla_extract_css.createVar)("widthVar");
 const baseWidth = (0, _vanilla_extract_css.style)({ width: (0, _vanilla_extract_css_utils.calc)(widthVar).divide(4).toString() }, "baseWidth");
 const { small, medium, large } = require_vars_css.vars.contentWidth;
@@ -34,5 +18,4 @@ const menuHeightLimit = (0, _vanilla_extract_css.style)({ maxHeight: (0, _vanill
 //#endregion
 exports.menuHeightLimit = menuHeightLimit;
 exports.menuYPadding = menuYPadding;
-exports.triggerVars = triggerVars;
 exports.width = width;

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

@@ -5,22 +5,6 @@ import { calc } from "@vanilla-extract/css-utils";
 //#region src/lib/components/MenuRenderer/MenuRenderer.css.ts
 setFileScope("src/lib/components/MenuRenderer/MenuRenderer.css.ts", "braid-design-system");
 const menuYPadding = createVar("menuYPadding");
-style({
-	width: "100vw",
-	height: "100vh"
-}, "backdrop");
-const triggerVars = {
-	top: createVar("triggerVars_top"),
-	left: createVar("triggerVars_left"),
-	bottom: createVar("triggerVars_bottom"),
-	right: createVar("triggerVars_right")
-};
-style({
-	top: triggerVars.bottom,
-	bottom: triggerVars.top,
-	left: triggerVars.left,
-	right: triggerVars.right
-}, "menuPosition");
 const widthVar = createVar("widthVar");
 const baseWidth = style({ width: calc(widthVar).divide(4).toString() }, "baseWidth");
 const { small, medium, large } = vars.contentWidth;
@@ -32,4 +16,4 @@ const width = styleVariants({
 const menuHeightLimit = style({ maxHeight: calc(vars.touchableSize).multiply(9.5).add(calc(menuYPadding).multiply(2)).toString() }, "menuHeightLimit");
 endFileScope();
 //#endregion
-export { menuHeightLimit, menuYPadding, triggerVars, width };
+export { menuHeightLimit, menuYPadding, width };

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

@@ -26,4 +26,4 @@ declare const MonthPicker: {
   displayName: string;
 };
 //#endregion
-export { MonthPicker, MonthPickerBaseProps, MonthPickerLabelProps, MonthPickerProps };
+export { MonthPicker, MonthPickerBaseProps, MonthPickerLabelProps };

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

@@ -26,4 +26,4 @@ declare const MonthPicker: {
   displayName: string;
 };
 //#endregion
-export { MonthPicker, MonthPickerBaseProps, MonthPickerLabelProps, MonthPickerProps };
+export { MonthPicker, MonthPickerBaseProps, MonthPickerLabelProps };

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

@@ -11,7 +11,6 @@ const focusRing = (0, _vanilla_extract_css.style)([{ outlineOffset: 0 }, require
 	borderRadius
 })], "focusRing");
 const hover = (0, _vanilla_extract_css.style)({}, "hover");
-(0, _vanilla_extract_css.style)(require_colorModeStyle.colorModeStyle({ lightMode: { opacity: .3 } }), "lightModeCurrentKeyline");
 const darkModeCurrentKeyline = (0, _vanilla_extract_css.style)(require_colorModeStyle.colorModeStyle({ darkMode: { opacity: .3 } }), "darkModeCurrentKeyline");
 const current = (0, _vanilla_extract_css.style)({ opacity: .075 }, "current");
 const background = (0, _vanilla_extract_css.style)({ selectors: { [`${hover}:hover &:not(${current})`]: { opacity: .5 } } }, "background");

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

@@ -11,7 +11,6 @@ const focusRing = style([{ outlineOffset: 0 }, atoms({
 	borderRadius
 })], "focusRing");
 const hover = style({}, "hover");
-style(colorModeStyle({ lightMode: { opacity: .3 } }), "lightModeCurrentKeyline");
 const darkModeCurrentKeyline = style(colorModeStyle({ darkMode: { opacity: .3 } }), "darkModeCurrentKeyline");
 const current = style({ opacity: .075 }, "current");
 const background = style({ selectors: { [`${hover}:hover &:not(${current})`]: { opacity: .5 } } }, "background");

package/dist/lib/components/Rating/Rating.cjs

@@ -45,6 +45,7 @@ const Rating = ({ rating, size = "standard", weight, variant = "full", tone = "b
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 			component: "span",
 			className: require_Rating_css.inlineFlex,
+			role: "img",
 			"aria-label": ariaLabel || `${rating.toFixed(1)} out of ${ratingArr.length}`,
 			children: variant === "minimal" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RatingStar, {
 				percent: 100,

package/dist/lib/components/Rating/Rating.mjs

@@ -42,6 +42,7 @@ const Rating = ({ rating, size = "standard", weight, variant = "full", tone = "b
 		children: [/* @__PURE__ */ jsx(Box, {
 			component: "span",
 			className: inlineFlex,
+			role: "img",
 			"aria-label": ariaLabel || `${rating.toFixed(1)} out of ${ratingArr.length}`,
 			children: variant === "minimal" ? /* @__PURE__ */ jsx(RatingStar, {
 				percent: 100,

package/dist/lib/components/Stepper/StepperContext.cjs

@@ -6,6 +6,16 @@ const StepContext = (0, react.createContext)({
 	stepNumber: 0,
 	isLast: false
 });
+const NAV_RIGHT = 0;
+const NAV_DOWN = 1;
+const NAV_LEFT = 2;
+const NAV_UP = 3;
+const NAV_HOME = 4;
+const NAV_END = 5;
+const NAV_TAB = 6;
+const NAV_CLICKED = 7;
+const NAV_FOCUSED = 8;
+const NAV_BLURRED = 9;
 const StepperContext = (0, react.createContext)(null);
 const getNextStep = (moveAmount, current, maxStep) => {
 	if (current === null) return moveAmount > 0 ? 1 : maxStep;
@@ -18,34 +28,34 @@ const StepperContextProvider = ({ children, activeStep, stepCount: stepCountProp
 	const stepCount = isLinear ? progress : stepCountProp;
 	const [stepperState, dispatch] = (0, react.useReducer)((state, action) => {
 		switch (action.type) {
-			case 3:
-			case 2: return {
+			case NAV_UP:
+			case NAV_LEFT: return {
 				...state,
 				focusedStep: getNextStep(-1, state.focusedStep, stepCount)
 			};
-			case 1:
-			case 0: return {
+			case NAV_DOWN:
+			case NAV_RIGHT: return {
 				...state,
 				focusedStep: getNextStep(1, state.focusedStep, stepCount)
 			};
-			case 4: return {
+			case NAV_HOME: return {
 				...state,
 				focusedStep: 1
 			};
-			case 5: return {
+			case NAV_END: return {
 				...state,
 				focusedStep: stepCount
 			};
-			case 9:
-			case 6: return {
+			case NAV_BLURRED:
+			case NAV_TAB: return {
 				...state,
 				focusedStep: null
 			};
-			case 7: return {
+			case NAV_CLICKED: return {
 				...state,
 				focusedStep: action.value
 			};
-			case 8: return {
+			case NAV_FOCUSED: return {
 				...state,
 				focusedStep: state.focusedStep === null ? activeStep : state.focusedStep
 			};
@@ -64,27 +74,27 @@ const StepperContextProvider = ({ children, activeStep, stepCount: stepCountProp
 		const targetKey = require_normalizeKey.normalizeKey(event);
 		if (targetKey === "Tab") return;
 		const action = {
-			ArrowRight: { type: 0 },
-			ArrowLeft: { type: 2 },
-			ArrowUp: { type: 3 },
-			ArrowDown: { type: 1 },
-			Home: { type: 4 },
-			End: { type: 5 }
+			ArrowRight: { type: NAV_RIGHT },
+			ArrowLeft: { type: NAV_LEFT },
+			ArrowUp: { type: NAV_UP },
+			ArrowDown: { type: NAV_DOWN },
+			Home: { type: NAV_HOME },
+			End: { type: NAV_END }
 		};
 		if (action[targetKey]) dispatch(action[targetKey]);
 	};
 	const onKeyDown = (event) => {
 		const targetKey = require_normalizeKey.normalizeKey(event);
 		if (targetKey === "Tab") {
-			dispatch({ type: 6 });
+			dispatch({ type: NAV_TAB });
 			return;
 		}
 		if (targetKey.indexOf("Arrow") === 0 || ["Home", "End"].includes(targetKey)) event.preventDefault();
 	};
-	const onFocus = () => dispatch({ type: 8 });
-	const onBlur = () => dispatch({ type: 9 });
+	const onFocus = () => dispatch({ type: NAV_FOCUSED });
+	const onBlur = () => dispatch({ type: NAV_BLURRED });
 	const onClick = (index) => dispatch({
-		type: 7,
+		type: NAV_CLICKED,
 		value: index
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepperContext.Provider, {

package/dist/lib/components/Stepper/StepperContext.mjs

@@ -6,6 +6,16 @@ const StepContext = createContext({
 	stepNumber: 0,
 	isLast: false
 });
+const NAV_RIGHT = 0;
+const NAV_DOWN = 1;
+const NAV_LEFT = 2;
+const NAV_UP = 3;
+const NAV_HOME = 4;
+const NAV_END = 5;
+const NAV_TAB = 6;
+const NAV_CLICKED = 7;
+const NAV_FOCUSED = 8;
+const NAV_BLURRED = 9;
 const StepperContext = createContext(null);
 const getNextStep = (moveAmount, current, maxStep) => {
 	if (current === null) return moveAmount > 0 ? 1 : maxStep;
@@ -18,34 +28,34 @@ const StepperContextProvider = ({ children, activeStep, stepCount: stepCountProp
 	const stepCount = isLinear ? progress : stepCountProp;
 	const [stepperState, dispatch] = useReducer((state, action) => {
 		switch (action.type) {
-			case 3:
-			case 2: return {
+			case NAV_UP:
+			case NAV_LEFT: return {
 				...state,
 				focusedStep: getNextStep(-1, state.focusedStep, stepCount)
 			};
-			case 1:
-			case 0: return {
+			case NAV_DOWN:
+			case NAV_RIGHT: return {
 				...state,
 				focusedStep: getNextStep(1, state.focusedStep, stepCount)
 			};
-			case 4: return {
+			case NAV_HOME: return {
 				...state,
 				focusedStep: 1
 			};
-			case 5: return {
+			case NAV_END: return {
 				...state,
 				focusedStep: stepCount
 			};
-			case 9:
-			case 6: return {
+			case NAV_BLURRED:
+			case NAV_TAB: return {
 				...state,
 				focusedStep: null
 			};
-			case 7: return {
+			case NAV_CLICKED: return {
 				...state,
 				focusedStep: action.value
 			};
-			case 8: return {
+			case NAV_FOCUSED: return {
 				...state,
 				focusedStep: state.focusedStep === null ? activeStep : state.focusedStep
 			};
@@ -64,27 +74,27 @@ const StepperContextProvider = ({ children, activeStep, stepCount: stepCountProp
 		const targetKey = normalizeKey(event);
 		if (targetKey === "Tab") return;
 		const action = {
-			ArrowRight: { type: 0 },
-			ArrowLeft: { type: 2 },
-			ArrowUp: { type: 3 },
-			ArrowDown: { type: 1 },
-			Home: { type: 4 },
-			End: { type: 5 }
+			ArrowRight: { type: NAV_RIGHT },
+			ArrowLeft: { type: NAV_LEFT },
+			ArrowUp: { type: NAV_UP },
+			ArrowDown: { type: NAV_DOWN },
+			Home: { type: NAV_HOME },
+			End: { type: NAV_END }
 		};
 		if (action[targetKey]) dispatch(action[targetKey]);
 	};
 	const onKeyDown = (event) => {
 		const targetKey = normalizeKey(event);
 		if (targetKey === "Tab") {
-			dispatch({ type: 6 });
+			dispatch({ type: NAV_TAB });
 			return;
 		}
 		if (targetKey.indexOf("Arrow") === 0 || ["Home", "End"].includes(targetKey)) event.preventDefault();
 	};
-	const onFocus = () => dispatch({ type: 8 });
-	const onBlur = () => dispatch({ type: 9 });
+	const onFocus = () => dispatch({ type: NAV_FOCUSED });
+	const onBlur = () => dispatch({ type: NAV_BLURRED });
 	const onClick = (index) => dispatch({
-		type: 7,
+		type: NAV_CLICKED,
 		value: index
 	});
 	return /* @__PURE__ */ jsx(StepperContext.Provider, {

package/dist/lib/components/TooltipRenderer/TooltipRenderer.cjs

@@ -156,5 +156,3 @@ const TooltipRenderer = ({ id, tooltip, placement = "top", children }) => {
 //#endregion
 exports.TooltipContent = TooltipContent;
 exports.TooltipRenderer = TooltipRenderer;
-exports.TooltipTextDefaultsProvider = TooltipTextDefaultsProvider;
-exports.offsetSpace = offsetSpace;

package/dist/lib/components/TooltipRenderer/TooltipRenderer.mjs

@@ -152,4 +152,4 @@ const TooltipRenderer = ({ id, tooltip, placement = "top", children }) => {
 	})] });
 };
 //#endregion
-export { TooltipContent, TooltipRenderer, TooltipTextDefaultsProvider, offsetSpace };
+export { TooltipContent, TooltipRenderer };

package/dist/lib/components/private/InlineField/InlineField.css.cjs

@@ -67,7 +67,6 @@ exports.disabledRadioIndicator = disabledRadioIndicator;
 exports.fakeField = fakeField;
 exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;
 exports.hoverOverlay = hoverOverlay;
-exports.indicator = indicator;
 exports.isMixed = isMixed;
 exports.labelOffset = labelOffset;
 exports.radioIndicator = radioIndicator;

package/dist/lib/components/private/InlineField/InlineField.css.mjs

@@ -61,4 +61,4 @@ const radioIndicator = [indicator, style({
 }, "radioScale")];
 endFileScope();
 //#endregion
-export { checkboxIndicator, children, disabledRadioIndicator, fakeField, hideBorderOnDarkBackgroundInLightMode, hoverOverlay, indicator, isMixed, labelOffset, radioIndicator, realField, selected, sizeVars };
+export { checkboxIndicator, children, disabledRadioIndicator, fakeField, hideBorderOnDarkBackgroundInLightMode, hoverOverlay, isMixed, labelOffset, radioIndicator, realField, selected, sizeVars };

package/dist/lib/components/private/InlineField/StyledInput.d.cts

@@ -22,4 +22,4 @@ interface StyledInputProps {
   tabIndex?: 0 | -1;
 }
 //#endregion
-export { CheckboxChecked, InlineFieldTone, StyledInputProps };
+export { CheckboxChecked, StyledInputProps };

package/dist/lib/components/private/InlineField/StyledInput.d.mts

@@ -22,4 +22,4 @@ interface StyledInputProps {
   tabIndex?: 0 | -1;
 }
 //#endregion
-export { CheckboxChecked, InlineFieldTone, StyledInputProps };
+export { CheckboxChecked, StyledInputProps };

package/dist/lib/components/private/Popover/Popover.css.cjs

@@ -10,10 +10,9 @@ const backdrop = (0, _vanilla_extract_css.style)({
 }, "backdrop");
 const placementModifier = (0, _vanilla_extract_css.createVar)("placementModifier");
 const invertPlacement = (0, _vanilla_extract_css.style)({ vars: { [placementModifier]: "-1" } }, "invertPlacement");
-const transitionThreshold = "xxsmall";
 const popupAnimation = (0, _vanilla_extract_css.keyframes)({ from: {
 	opacity: 0,
-	transform: `translateY(${(0, _vanilla_extract_css_utils.calc)(require_vars_css.vars.space[transitionThreshold]).multiply((0, _vanilla_extract_css.fallbackVar)(placementModifier, "1"))})`
+	transform: `translateY(${(0, _vanilla_extract_css_utils.calc)(require_vars_css.vars.space["xxsmall"]).multiply((0, _vanilla_extract_css.fallbackVar)(placementModifier, "1"))})`
 } }, "popupAnimation");
 const animation = (0, _vanilla_extract_css.style)({
 	animationName: popupAnimation,
@@ -29,4 +28,3 @@ exports.animation = animation;
 exports.backdrop = backdrop;
 exports.delayVisibility = delayVisibility;
 exports.invertPlacement = invertPlacement;
-exports.transitionThreshold = transitionThreshold;

package/dist/lib/components/private/Popover/Popover.css.mjs

@@ -10,10 +10,9 @@ const backdrop = style({
 }, "backdrop");
 const placementModifier = createVar("placementModifier");
 const invertPlacement = style({ vars: { [placementModifier]: "-1" } }, "invertPlacement");
-const transitionThreshold = "xxsmall";
 const popupAnimation = keyframes({ from: {
 	opacity: 0,
-	transform: `translateY(${calc(vars.space[transitionThreshold]).multiply(fallbackVar(placementModifier, "1"))})`
+	transform: `translateY(${calc(vars.space["xxsmall"]).multiply(fallbackVar(placementModifier, "1"))})`
 } }, "popupAnimation");
 const animation = style({
 	animationName: popupAnimation,
@@ -25,4 +24,4 @@ const animation = style({
 const delayVisibility = style({ animationDelay: "250ms" }, "delayVisibility");
 endFileScope();
 //#endregion
-export { animation, backdrop, delayVisibility, invertPlacement, transitionThreshold };
+export { animation, backdrop, delayVisibility, invertPlacement };

package/dist/lib/components/private/Popover/Popover.d.cts

@@ -28,4 +28,4 @@ interface PopoverProps {
   children: ReactNode;
 }
 //#endregion
-export { PopoverPlacementData, PopoverProps };
+export { PopoverProps };

package/dist/lib/components/private/Popover/Popover.d.mts

@@ -28,4 +28,4 @@ interface PopoverProps {
   children: ReactNode;
 }
 //#endregion
-export { PopoverPlacementData, PopoverProps };
+export { PopoverProps };

package/dist/lib/css/atoms/sprinkles.css.d.cts

@@ -4,7 +4,7 @@ import { ConditionalValue, RequiredConditionalValue } from "@vanilla-extract/spr
 declare const colorAtomicProperties: {
   conditions: {
     defaultCondition: "lightMode";
-    conditionNames: ("darkMode" | "lightMode")[];
+    conditionNames: ("lightMode" | "darkMode")[];
   };
   styles: {
     readonly background: {

package/dist/lib/css/atoms/sprinkles.css.d.mts

@@ -4,7 +4,7 @@ import { ConditionalValue, RequiredConditionalValue } from "@vanilla-extract/spr
 declare const colorAtomicProperties: {
   conditions: {
     defaultCondition: "lightMode";
-    conditionNames: ("darkMode" | "lightMode")[];
+    conditionNames: ("lightMode" | "darkMode")[];
   };
   styles: {
     readonly background: {

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

@@ -23,6 +23,10 @@ const snippets = [
 	{
 		description: "Form accent",
 		code: "<ButtonIcon tone=\"formAccent\" icon={<IconAdd />} label=\"Add\" />"
+	},
+	{
+		description: "Brand accent",
+		code: "<ButtonIcon tone=\"brandAccent\" icon={<IconAdd />} label=\"Add\" />"
 	}
 ];
 //#endregion

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

@@ -23,6 +23,10 @@ const snippets = [
 	{
 		description: "Form accent",
 		code: "<ButtonIcon tone=\"formAccent\" icon={<IconAdd />} label=\"Add\" />"
+	},
+	{
+		description: "Brand accent",
+		code: "<ButtonIcon tone=\"brandAccent\" icon={<IconAdd />} label=\"Add\" />"
 	}
 ];
 //#endregion

package/dist/lib/themes/docs/tokens.cjs

@@ -234,9 +234,9 @@ const tokens = {
 			neutralActive: (0, polished.darken)(.05, require_palette.palette.grey["800"]),
 			neutralHover: (0, polished.lighten)(.05, require_palette.palette.grey["800"]),
 			neutralLight: require_palette.palette.grey["100"],
-			neutralSoft: require_palette.palette.grey["50"],
-			neutralSoftActive: (0, polished.darken)(.05, require_palette.palette.grey["50"]),
-			neutralSoftHover: (0, polished.darken)(.025, require_palette.palette.grey["50"]),
+			neutralSoft: require_palette.palette.grey["75"],
+			neutralSoftActive: (0, polished.darken)(.05, require_palette.palette.grey["75"]),
+			neutralSoftHover: (0, polished.darken)(.025, require_palette.palette.grey["75"]),
 			positive: require_palette.palette.mint["700"],
 			positiveLight: require_palette.palette.mint["100"],
 			promote: require_palette.palette.violet["600"],

package/dist/lib/themes/docs/tokens.mjs

@@ -234,9 +234,9 @@ const tokens = {
 			neutralActive: darken(.05, palette.grey["800"]),
 			neutralHover: lighten(.05, palette.grey["800"]),
 			neutralLight: palette.grey["100"],
-			neutralSoft: palette.grey["50"],
-			neutralSoftActive: darken(.05, palette.grey["50"]),
-			neutralSoftHover: darken(.025, palette.grey["50"]),
+			neutralSoft: palette.grey["75"],
+			neutralSoftActive: darken(.05, palette.grey["75"]),
+			neutralSoftHover: darken(.025, palette.grey["75"]),
 			positive: palette.mint["700"],
 			positiveLight: palette.mint["100"],
 			promote: palette.violet["600"],

package/dist/lib/themes/tokenType.d.cts

@@ -174,4 +174,4 @@ interface BraidTokens {
   };
 }
 //#endregion
-export { BraidTokens, TextBreakpoint, TextDefinition };
+export { BraidTokens, TextDefinition };

package/dist/lib/themes/tokenType.d.mts

@@ -174,4 +174,4 @@ interface BraidTokens {
   };
 }
 //#endregion
-export { BraidTokens, TextBreakpoint, TextDefinition };
+export { BraidTokens, TextDefinition };

package/dist/lib/utils/a11y/index.cjs

@@ -103,8 +103,6 @@ function getAccessibleVariant(color, background) {
 	return findClosestAccessibleDarkerColor(color, background ?? getLightVariant(color), AA_TEXT_CONTRAST);
 }
 //#endregion
-exports.contrast = contrast;
-exports.findClosestAccessibleDarkerColor = findClosestAccessibleDarkerColor;
 exports.findClosestAccessibleLighterColor = findClosestAccessibleLighterColor;
 exports.getAccessibleVariant = getAccessibleVariant;
 exports.getLightVariant = getLightVariant;

package/dist/lib/utils/a11y/index.mjs

@@ -103,4 +103,4 @@ function getAccessibleVariant(color, background) {
 	return findClosestAccessibleDarkerColor(color, background ?? getLightVariant(color), AA_TEXT_CONTRAST);
 }
 //#endregion
-export { contrast, findClosestAccessibleDarkerColor, findClosestAccessibleLighterColor, getAccessibleVariant, getLightVariant };
+export { findClosestAccessibleLighterColor, getAccessibleVariant, getLightVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "34.6.2",
+  "version": "34.8.0-docs-uplift-20260914032958",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -129,6 +129,7 @@
     "@babel/core": "^7.26.0",
     "@babel/plugin-transform-typescript": "^7.20.13",
     "@babel/types": "^7.26.0",
+    "@braid-design-system/source.macro": "1.0.0",
     "@capsizecss/metrics": "^4.0.0",
     "@storybook/react-webpack5": "^10.2.7",
     "@svgr/core": "^5.5.0",
@@ -164,8 +165,7 @@
     "skott": "^0.32.1",
     "storybook": "^10.2.7",
     "svgo": "^2.8.0",
-    "title-case": "^3.0.3",
-    "@braid-design-system/source.macro": "1.0.0"
+    "title-case": "^3.0.3"
   },
   "peerDependencies": {
     "react": "^18 || ^19",