braid-design-system 34.6.1 → 34.7.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # braid-design-system
 
+## 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
+
+- **Autosuggest:** Add `translate="no"` to the suggestion list and the ARIA live announcement region to prevent browser translations from wrapping text nodes in `<font>` elements, which breaks React DOM updates. Also key suggestion rows by index instead of `index + text`, so locale changes to suggestion labels no longer remount the list, and numeric text can no longer collide keys via string concatenation. ([#2117](https://github.com/seek-oss/braid-design-system/pull/2117))
+
+- **Autosuggest:** Allow the suggestions list to flip above the field when there is insufficient space below, and keep keyboard highlight scrolling inside the menu so it no longer jumps the page ([#2113](https://github.com/seek-oss/braid-design-system/pull/2113))
+
 ## 34.6.1
 
 ### Patch 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=1" | "_bdsdm=2" | "_bdsdm=0";
+declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
 //#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=1" | "_bdsdm=2" | "_bdsdm=0";
+declare const getColorModeQueryParam: () => "_bdsdm=0" | "_bdsdm=1" | "_bdsdm=2" | "";
 //#endregion
 export { colorModeQueryParamCheck, getColorModeQueryParam };

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

@@ -20,6 +20,7 @@ const require_normalizeKey = require("../private/normalizeKey.cjs");
 const require_smoothScroll = require("../private/smoothScroll.cjs");
 const require_createAccessibilityProps = require("./createAccessibilityProps.cjs");
 const require_reverseMatches = require("./reverseMatches.cjs");
+const require_useScrollIntoView = require("./useScrollIntoView.cjs");
 const require_Autosuggest_css = require("./Autosuggest.css.cjs");
 let dedent = require("dedent");
 dedent = require_runtime.__toESM(dedent, 1);
@@ -257,24 +258,15 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 		isFocused: false
 	});
 	const isOpen = showSuggestionsIfAvailable && hasItems;
-	(typeof highlightedIndex === "number" ? document.getElementById(require_createAccessibilityProps.getItemId(resolvedId, highlightedIndex)) : null)?.scrollIntoView({ block: "nearest" });
-	(0, react.useEffect)(() => {
+	const highlightedItem = typeof highlightedIndex === "number" ? document.getElementById(require_createAccessibilityProps.getItemId(resolvedId, highlightedIndex)) : null;
+	(0, react.useLayoutEffect)(() => {
 		dispatch({ type: HAS_SUGGESTIONS_CHANGED });
 	}, [hasSuggestions]);
 	const isMobile = require_useResponsiveValue.useResponsiveValue()({
 		mobile: true,
 		tablet: false
 	});
-	(0, react.useEffect)(() => {
-		if (menuRef.current && isOpen && !isMobile) {
-			const { bottom: menuBottom } = menuRef.current.getBoundingClientRect();
-			if (menuBottom > document.documentElement.clientHeight) menuRef.current.scrollIntoView(false);
-		}
-	}, [
-		isOpen,
-		isMobile,
-		suggestionCount
-	]);
+	require_useScrollIntoView.useScrollIntoView(highlightedItem, menuRef);
 	const inputProps = {
 		value: previewValue ? previewValue.text : value.text,
 		type: type === "search" ? type : "text",
@@ -337,14 +329,16 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 	const clearable = Boolean(typeof onClear !== "undefined" && !restProps.disabled && typeof value !== "undefined" && value.text.length > 0);
 	const announcements = [];
 	const hasAutomaticSelection = automaticSelection && previewValue === null && highlightedIndex === 0;
-	if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) if (hasSuggestions) {
-		announcements.push(translations.suggestionsAvailableAnnouncement(suggestionCount));
-		if (hasAutomaticSelection) announcements.push(translations.suggestionAutoSelectedAnnouncement(normalisedSuggestions[0].text));
-		announcements.push(translations.suggestionInstructions);
-	} else if (noSuggestionsMessage) {
-		if (noSuggestionsMessage.title) announcements.push(noSuggestionsMessage.title);
-		announcements.push(noSuggestionsMessage.description);
-	} else announcements.push(translations.noSuggestionsAvailableAnnouncement);
+	if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) {
+		if (hasSuggestions) {
+			announcements.push(translations.suggestionsAvailableAnnouncement(suggestionCount));
+			if (hasAutomaticSelection) announcements.push(translations.suggestionAutoSelectedAnnouncement(normalisedSuggestions[0].text));
+			announcements.push(translations.suggestionInstructions);
+		} else if (noSuggestionsMessage) {
+			if (noSuggestionsMessage.title) announcements.push(noSuggestionsMessage.title);
+			announcements.push(noSuggestionsMessage.description);
+		} else announcements.push(translations.noSuggestionsAvailableAnnouncement);
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [showMobileBackdrop ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		position: "fixed",
 		zIndex: "dropdownBackdrop",
@@ -397,7 +391,6 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 					triggerRef: fieldRef,
 					open: isOpen,
 					width: "full",
-					lockPlacement: true,
 					offsetSpace: "xxsmall",
 					modal: false,
 					role: false,
@@ -408,6 +401,7 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
 							textAlign: "left",
 							component: "ul",
+							translate: "no",
 							background: !hasSuggestions && noSuggestionsMessage ? {
 								lightMode: "neutralSoft",
 								darkMode: "neutral"
@@ -433,7 +427,6 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 									children: noSuggestionsMessage.description
 								})]
 							}) : null, hasSuggestions ? normalisedSuggestions.map((suggestion, index) => {
-								const { text } = suggestion;
 								const groupHeading = groupHeadingIndexes.get(index);
 								const highlights = suggestionHighlight ? highlightSuggestions(suggestion.text, value.text, suggestionHighlight) : suggestion.highlights;
 								return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [groupHeading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupHeading, { children: groupHeading }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuggestionItem, {
@@ -459,7 +452,7 @@ const Autosuggest = (0, react.forwardRef)(function({ id, value = fallbackValue,
 										description: suggestion.description,
 										groupHeading: groupHeadingForSuggestion.get(suggestion)
 									})
-								})] }, index + text);
+								})] }, index);
 							}) : null]
 						})
 					})

package/dist/lib/components/Autosuggest/Autosuggest.mjs

@@ -19,9 +19,10 @@ import { normalizeKey } from "../private/normalizeKey.mjs";
 import { smoothScroll } from "../private/smoothScroll.mjs";
 import { createAccessibilityProps, getItemId } from "./createAccessibilityProps.mjs";
 import { reverseMatches } from "./reverseMatches.mjs";
+import { useScrollIntoView } from "./useScrollIntoView.mjs";
 import { backdrop, backdropVisible, menu } from "./Autosuggest.css.mjs";
 import dedent from "dedent";
-import { Fragment, forwardRef, useCallback, useEffect, useReducer, useRef } from "react";
+import { Fragment, forwardRef, useCallback, useLayoutEffect, useReducer, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import matchHighlights from "autosuggest-highlight/match/index.js";
 import parseHighlights from "autosuggest-highlight/parse/index.js";
@@ -253,24 +254,15 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 		isFocused: false
 	});
 	const isOpen = showSuggestionsIfAvailable && hasItems;
-	(typeof highlightedIndex === "number" ? document.getElementById(getItemId(resolvedId, highlightedIndex)) : null)?.scrollIntoView({ block: "nearest" });
-	useEffect(() => {
+	const highlightedItem = typeof highlightedIndex === "number" ? document.getElementById(getItemId(resolvedId, highlightedIndex)) : null;
+	useLayoutEffect(() => {
 		dispatch({ type: HAS_SUGGESTIONS_CHANGED });
 	}, [hasSuggestions]);
 	const isMobile = useResponsiveValue()({
 		mobile: true,
 		tablet: false
 	});
-	useEffect(() => {
-		if (menuRef.current && isOpen && !isMobile) {
-			const { bottom: menuBottom } = menuRef.current.getBoundingClientRect();
-			if (menuBottom > document.documentElement.clientHeight) menuRef.current.scrollIntoView(false);
-		}
-	}, [
-		isOpen,
-		isMobile,
-		suggestionCount
-	]);
+	useScrollIntoView(highlightedItem, menuRef);
 	const inputProps = {
 		value: previewValue ? previewValue.text : value.text,
 		type: type === "search" ? type : "text",
@@ -333,14 +325,16 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 	const clearable = Boolean(typeof onClear !== "undefined" && !restProps.disabled && typeof value !== "undefined" && value.text.length > 0);
 	const announcements = [];
 	const hasAutomaticSelection = automaticSelection && previewValue === null && highlightedIndex === 0;
-	if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) if (hasSuggestions) {
-		announcements.push(translations.suggestionsAvailableAnnouncement(suggestionCount));
-		if (hasAutomaticSelection) announcements.push(translations.suggestionAutoSelectedAnnouncement(normalisedSuggestions[0].text));
-		announcements.push(translations.suggestionInstructions);
-	} else if (noSuggestionsMessage) {
-		if (noSuggestionsMessage.title) announcements.push(noSuggestionsMessage.title);
-		announcements.push(noSuggestionsMessage.description);
-	} else announcements.push(translations.noSuggestionsAvailableAnnouncement);
+	if (isFocused && isOpen && (highlightedIndex === null || hasAutomaticSelection)) {
+		if (hasSuggestions) {
+			announcements.push(translations.suggestionsAvailableAnnouncement(suggestionCount));
+			if (hasAutomaticSelection) announcements.push(translations.suggestionAutoSelectedAnnouncement(normalisedSuggestions[0].text));
+			announcements.push(translations.suggestionInstructions);
+		} else if (noSuggestionsMessage) {
+			if (noSuggestionsMessage.title) announcements.push(noSuggestionsMessage.title);
+			announcements.push(noSuggestionsMessage.description);
+		} else announcements.push(translations.noSuggestionsAvailableAnnouncement);
+	}
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [showMobileBackdrop ? /* @__PURE__ */ jsx(Box, {
 		position: "fixed",
 		zIndex: "dropdownBackdrop",
@@ -393,7 +387,6 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 					triggerRef: fieldRef,
 					open: isOpen,
 					width: "full",
-					lockPlacement: true,
 					offsetSpace: "xxsmall",
 					modal: false,
 					role: false,
@@ -404,6 +397,7 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 						children: /* @__PURE__ */ jsxs(Box, {
 							textAlign: "left",
 							component: "ul",
+							translate: "no",
 							background: !hasSuggestions && noSuggestionsMessage ? {
 								lightMode: "neutralSoft",
 								darkMode: "neutral"
@@ -429,7 +423,6 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 									children: noSuggestionsMessage.description
 								})]
 							}) : null, hasSuggestions ? normalisedSuggestions.map((suggestion, index) => {
-								const { text } = suggestion;
 								const groupHeading = groupHeadingIndexes.get(index);
 								const highlights = suggestionHighlight ? highlightSuggestions(suggestion.text, value.text, suggestionHighlight) : suggestion.highlights;
 								return /* @__PURE__ */ jsxs(Fragment, { children: [groupHeading ? /* @__PURE__ */ jsx(GroupHeading, { children: groupHeading }) : null, /* @__PURE__ */ jsx(SuggestionItem, {
@@ -455,7 +448,7 @@ const Autosuggest = forwardRef(function({ id, value = fallbackValue, suggestions
 										description: suggestion.description,
 										groupHeading: groupHeadingForSuggestion.get(suggestion)
 									})
-								})] }, index + text);
+								})] }, index);
 							}) : null]
 						})
 					})

package/dist/lib/components/Autosuggest/useScrollIntoView.cjs

@@ -0,0 +1,14 @@
+let react = require("react");
+//#region src/lib/components/Autosuggest/useScrollIntoView.ts
+function useScrollIntoView(element, scrollContainerRef) {
+	(0, react.useEffect)(() => {
+		const scrollContainer = scrollContainerRef.current;
+		if (!scrollContainer || !element) return;
+		const containerRect = scrollContainer.getBoundingClientRect();
+		const elementRect = element.getBoundingClientRect();
+		if (elementRect.top < containerRect.top) scrollContainer.scrollTop -= containerRect.top - elementRect.top;
+		else if (elementRect.bottom > containerRect.bottom) scrollContainer.scrollTop += elementRect.bottom - containerRect.bottom;
+	}, [scrollContainerRef, element]);
+}
+//#endregion
+exports.useScrollIntoView = useScrollIntoView;

package/dist/lib/components/Autosuggest/useScrollIntoView.mjs

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+//#region src/lib/components/Autosuggest/useScrollIntoView.ts
+function useScrollIntoView(element, scrollContainerRef) {
+	useEffect(() => {
+		const scrollContainer = scrollContainerRef.current;
+		if (!scrollContainer || !element) return;
+		const containerRect = scrollContainer.getBoundingClientRect();
+		const elementRect = element.getBoundingClientRect();
+		if (elementRect.top < containerRect.top) scrollContainer.scrollTop -= containerRect.top - elementRect.top;
+		else if (elementRect.bottom > containerRect.bottom) scrollContainer.scrollTop += elementRect.bottom - containerRect.bottom;
+	}, [scrollContainerRef, element]);
+}
+//#endregion
+export { useScrollIntoView };

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/Tabs/Tab.cjs

@@ -48,18 +48,20 @@ const Tab = ({ children, data, badge, icon, item, ...restProps }) => {
 	});
 	(0, react.useEffect)(() => {
 		if (!tabRef.current || !scrollContainer) return;
-		if (isSelected || isFocused) if (isMobile) require_smoothScroll.smoothScroll(tabRef.current, {
-			scrollContainer,
-			direction: "horizontal",
-			offset: space[paddingXForTabSize[size]] * grid * 3,
-			...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
-		});
-		else require_smoothScroll.smoothScrollIntoView(tabRef.current, {
-			scrollContainer,
-			direction: "horizontal",
-			offset: space[paddingXForTabSize[size]] * grid * 6,
-			...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
-		});
+		if (isSelected || isFocused) {
+			if (isMobile) require_smoothScroll.smoothScroll(tabRef.current, {
+				scrollContainer,
+				direction: "horizontal",
+				offset: space[paddingXForTabSize[size]] * grid * 3,
+				...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
+			});
+			else require_smoothScroll.smoothScrollIntoView(tabRef.current, {
+				scrollContainer,
+				direction: "horizontal",
+				offset: space[paddingXForTabSize[size]] * grid * 6,
+				...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
+			});
+		}
 		firstRenderRef.current = false;
 	}, [
 		isSelected,

package/dist/lib/components/Tabs/Tab.mjs

@@ -46,18 +46,20 @@ const Tab = ({ children, data, badge, icon, item, ...restProps }) => {
 	});
 	useEffect(() => {
 		if (!tabRef.current || !scrollContainer) return;
-		if (isSelected || isFocused) if (isMobile) smoothScroll(tabRef.current, {
-			scrollContainer,
-			direction: "horizontal",
-			offset: space[paddingXForTabSize[size]] * grid * 3,
-			...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
-		});
-		else smoothScrollIntoView(tabRef.current, {
-			scrollContainer,
-			direction: "horizontal",
-			offset: space[paddingXForTabSize[size]] * grid * 6,
-			...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
-		});
+		if (isSelected || isFocused) {
+			if (isMobile) smoothScroll(tabRef.current, {
+				scrollContainer,
+				direction: "horizontal",
+				offset: space[paddingXForTabSize[size]] * grid * 3,
+				...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
+			});
+			else smoothScrollIntoView(tabRef.current, {
+				scrollContainer,
+				direction: "horizontal",
+				offset: space[paddingXForTabSize[size]] * grid * 6,
+				...firstRenderRef.current ? { duration: 0 } : { speed: .7 }
+			});
+		}
 		firstRenderRef.current = false;
 	}, [
 		isSelected,

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

@@ -20,6 +20,7 @@ const Announcement = ({ children }) => {
 		element.setAttribute("class", className);
 		element.setAttribute("aria-live", "polite");
 		element.setAttribute("aria-atomic", "true");
+		element.setAttribute("translate", "no");
 		document.body.appendChild(element);
 		setElement(element);
 		return () => {

package/dist/lib/components/private/Announcement/Announcement.mjs

@@ -20,6 +20,7 @@ const Announcement = ({ children }) => {
 		element.setAttribute("class", className);
 		element.setAttribute("aria-live", "polite");
 		element.setAttribute("aria-atomic", "true");
+		element.setAttribute("translate", "no");
 		document.body.appendChild(element);
 		setElement(element);
 		return () => {

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/components/useToast/useFlipList.cjs

@@ -55,8 +55,10 @@ const useFlipList = (expanded) => {
 		};
 		const activeToasts = [];
 		Array.from(refs.entries()).forEach(([toastKey, element]) => {
-			if (element !== null) if (toastStates.get(toastKey) === "exiting") refs.delete(toastKey);
-			else activeToasts.push([toastKey, element]);
+			if (element !== null) {
+				if (toastStates.get(toastKey) === "exiting") refs.delete(toastKey);
+				else activeToasts.push([toastKey, element]);
+			}
 		});
 		activeToasts.forEach(([toastKey, element], index) => {
 			const position = activeToasts.length - index - 1;

package/dist/lib/components/useToast/useFlipList.mjs

@@ -55,8 +55,10 @@ const useFlipList = (expanded) => {
 		};
 		const activeToasts = [];
 		Array.from(refs.entries()).forEach(([toastKey, element]) => {
-			if (element !== null) if (toastStates.get(toastKey) === "exiting") refs.delete(toastKey);
-			else activeToasts.push([toastKey, element]);
+			if (element !== null) {
+				if (toastStates.get(toastKey) === "exiting") refs.delete(toastKey);
+				else activeToasts.push([toastKey, element]);
+			}
 		});
 		activeToasts.forEach(([toastKey, element], index) => {
 			const position = activeToasts.length - index - 1;

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: ("lightMode" | "darkMode")[];
+    conditionNames: ("darkMode" | "lightMode")[];
   };
   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: ("lightMode" | "darkMode")[];
+    conditionNames: ("darkMode" | "lightMode")[];
   };
   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/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/dist/lib/utils/isLight/index.cjs

@@ -15,7 +15,7 @@ const isLight = (inputColor, foregroundColor = "#000") => {
 	const colors = /^linear-gradient/.test(inputColor) ? getLinearGradientColors(inputColor) : [inputColor];
 	const foregroundYiq = calculateYiq(foregroundColor);
 	return colors.some((color) => {
-		return calculateYiq(color) >= 256 / 2 + foregroundYiq / 2;
+		return calculateYiq(color) >= 128 + foregroundYiq / 2;
 	});
 };
 //#endregion

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

@@ -15,7 +15,7 @@ const isLight = (inputColor, foregroundColor = "#000") => {
 	const colors = /^linear-gradient/.test(inputColor) ? getLinearGradientColors(inputColor) : [inputColor];
 	const foregroundYiq = calculateYiq(foregroundColor);
 	return colors.some((color) => {
-		return calculateYiq(color) >= 256 / 2 + foregroundYiq / 2;
+		return calculateYiq(color) >= 128 + foregroundYiq / 2;
 	});
 };
 //#endregion

package/package.json

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