braid-design-system 32.2.0 → 32.3.0

package/dist/Toggle.chunk.mjs

@@ -1,4 +1,4 @@
-import { useThemeName, useResponsiveValue, Stack, Box, buildDataAttributes, Divider, useIcon, virtualTouchable, Columns, Column, Inline, Text, Overlay, ActionsContext, useBackground, iconContainerSize, IconClear, Keyline, IconPositive, IconCritical, TextContext, HeadingContext, textStyles, FieldOverlay, ButtonIcon, Bleed, useColoredBoxClasses, BackgroundProvider, ButtonContainer, useButtonStyles, ButtonOverlays, ButtonText, resolveResponsiveRangeProps, optimizeResponsiveArray, Typography, BraidPortal, TextLinkButton, AvoidWidowIcon, useDefaultTextProps, flattenChildren, DefaultTextPropsProvider, iconSize, Hidden, useSpace, negativeMargin, resolveResponsiveProp, useBackgroundLightness } from "./ToastContext.chunk.mjs";
+import { useThemeName, useResponsiveValue, Stack, Box, buildDataAttributes, Divider, useIcon, virtualTouchable, Columns, Column, Inline, Text, Overlay, ActionsContext, useBackground, iconContainerSize, IconClear, IconPositive, IconCritical, TextContext, HeadingContext, textStyles, FieldOverlay, ButtonIcon, Bleed, useColoredBoxClasses, BackgroundProvider, ButtonContainer, useButtonStyles, ButtonOverlays, ButtonText, useBackgroundLightness, resolveResponsiveRangeProps, optimizeResponsiveArray, Typography, BraidPortal, TextLinkButton, AvoidWidowIcon, useDefaultTextProps, flattenChildren, DefaultTextPropsProvider, iconSize, Hidden, useSpace, negativeMargin, resolveResponsiveProp } from "./ToastContext.chunk.mjs";
 import { useBraidTheme, useLinkComponent } from "./side-effects/lib/components/BraidProvider/BraidProvider.mjs";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import assert from "assert";
@@ -20,6 +20,7 @@ import { RemoveScroll } from "react-remove-scroll";
 import { backdrop, backdropVisible, menu, groupHeading } from "./styles/lib/components/Autosuggest/Autosuggest.css.mjs";
 import matchHighlights from "autosuggest-highlight/match/index.js";
 import clsx from "clsx";
+import { noRadiusOnRight, largestWidth, width, tone as tone$1, lightMode, darkMode } from "./styles/lib/components/private/Keyline/Keyline.css.mjs";
 import FocusLock from "react-focus-lock";
 import { externalGutter } from "./styles/lib/components/private/Modal/ModalExternalGutter.mjs";
 import { headingRoot, headingFocus, pointerEventsAll, maxSize, closeIconOffset, resetStackingContext, backdrop as backdrop$1, horiztontalTransition, modalContainer, entrance, exit, fixedStackingContext } from "./styles/lib/components/private/Modal/Modal.css.mjs";
@@ -27,7 +28,7 @@ import { lineHeightContainer } from "./styles/lib/css/lineHeightContainer.css.mj
 import { currentColor, size, minCharacterWidth, trimGutter } from "./styles/lib/components/List/List.css.mjs";
 import { rootSize, delay, size as size$1, currentColor as currentColor$1, circle } from "./styles/lib/components/Loader/Loader.css.mjs";
 import { menuItem } from "./styles/lib/components/MenuItem/useMenuItem.css.mjs";
-import { backdrop as backdrop$2, menuIsClosed, width, placementBottom } from "./styles/lib/components/MenuRenderer/MenuRenderer.css.mjs";
+import { backdrop as backdrop$2, menuIsClosed, width as width$1, placementBottom } from "./styles/lib/components/MenuRenderer/MenuRenderer.css.mjs";
 import { triggerOffset } from "./styles/lib/components/OverflowMenu/OverflowMenu.css.mjs";
 import { isMobile } from "is-mobile";
 import { field as field$1 } from "./styles/lib/components/Dropdown/Dropdown.css.mjs";
@@ -35,11 +36,11 @@ import { nativeInput } from "./styles/lib/components/MonthPicker/MonthPicker.css
 import { hover, background, current, lightModeCurrentKeyline, darkModeCurrentKeyline } from "./styles/lib/components/Pagination/Pagination.css.mjs";
 import { realField, realFieldPosition, isMixed, fakeField, fakeFieldSize, selected, focusOverlay as focusOverlay$1, hoverOverlay as hoverOverlay$1, checkboxIndicator, radioIndicator, root as root$4, labelOffset, badgeOffset, children } from "./styles/lib/components/private/InlineField/InlineField.css.mjs";
 import { starSpacing, textSpacing, lightModeStarColor, darkModeStarColor } from "./styles/lib/components/Rating/Rating.css.mjs";
-import { step, tone as tone$1, progressTrack, progressTrackCentered, progressLine, progressUnfilled, indicatorContainer, focusOverlay as focusOverlay$2, indicator, highlight, complete, active, inner, tick, stretch, stretchLastAboveTablet } from "./styles/lib/components/Stepper/Stepper.css.mjs";
+import { step, tone as tone$2, progressTrack, progressTrackCentered, progressLine, progressUnfilled, indicatorContainer, focusOverlay as focusOverlay$2, indicator, highlight, complete, active, inner, tick, stretch, stretchLastAboveTablet } from "./styles/lib/components/Stepper/Stepper.css.mjs";
 import { tab, cropToIconX, hoveredTab, tabFocusRing, scroll as scroll$1, nowrap, mask, marginAuto, divider, tabUnderline, tabUnderlineActiveDarkMode, underlineLeft, underlineWidth, tabPanel, tabPanelFocusRing } from "./styles/lib/components/Tabs/Tabs.css.mjs";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { clearGutter } from "./styles/lib/components/Tag/Tag.css.mjs";
-import { root as root$5 } from "./styles/lib/components/Textarea/Highlight/Highlight.css.mjs";
+import { root as root$5, caution, critical } from "./styles/lib/components/Textarea/Highlight/Highlight.css.mjs";
 import { highlights, field as field$2 } from "./styles/lib/components/Textarea/Textarea.css.mjs";
 import { select, focusOverlay as focusOverlay$3 } from "./styles/lib/components/TextDropdown/TextDropdown.css.mjs";
 import { root as root$1, up, left, right } from "./styles/lib/components/icons/IconChevron/IconChevron.css.mjs";
@@ -2260,7 +2261,8 @@ const Alert = ({
     {
       id,
       background: backgroundForTone[tone2],
-      padding: "medium",
+      paddingY: "medium",
+      paddingX: "gutter",
       borderRadius: borderRadius$3,
       position: "relative",
       overflow: "hidden",
@@ -2334,8 +2336,7 @@ const Alert = ({
             boxShadow: { lightMode: borderForTone[tone2] },
             visible: true
           }
-        ),
-        /* @__PURE__ */ jsx(Keyline, { tone: tone2, borderRadius: borderRadius$3 })
+        )
       ]
     }
   );
@@ -2448,10 +2449,11 @@ const FieldLabel = ({
     description ? /* @__PURE__ */ jsx(Box, { paddingTop: label2 ? "xxsmall" : void 0, paddingBottom: "xxsmall", children: /* @__PURE__ */ jsx(Text, { tone: "secondary", id: descriptionId, children: description }) }) : null
   ] });
 };
-const tones$1 = ["neutral", "critical", "positive"];
+const tones$1 = ["neutral", "critical", "positive", "caution"];
 const icon = {
   critical: /* @__PURE__ */ jsx(IconCritical, { tone: "critical" }),
-  positive: /* @__PURE__ */ jsx(IconPositive, { tone: "positive" })
+  positive: /* @__PURE__ */ jsx(IconPositive, { tone: "positive" }),
+  caution: /* @__PURE__ */ jsx(IconCaution, { tone: "caution" })
 };
 const FieldMessage = ({
   id,
@@ -3741,6 +3743,36 @@ const ButtonLink = forwardRef(
   }
 );
 ButtonLink.displayName = "ButtonLink";
+const Keyline = ({ tone: tone2, borderRadius: borderRadius2 }) => {
+  const backgroundLightness = useBackgroundLightness();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      overflow: "hidden",
+      borderRadius: borderRadius2,
+      className: [noRadiusOnRight, largestWidth],
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          height: "full",
+          display: "inlineBlock",
+          className: [
+            width,
+            tone$1[tone2],
+            lightMode[backgroundLightness.lightMode],
+            darkMode[backgroundLightness.darkMode]
+          ]
+        }
+      )
+    }
+  );
+};
 const validCardComponents = [
   "div",
   "article",
@@ -5172,7 +5204,7 @@ const borderRadius$1 = "large";
 function Menu({
   offsetSpace,
   align,
-  width: width$1,
+  width: width2,
   placement,
   children: children2,
   open,
@@ -5200,7 +5232,7 @@ function Menu({
       overflow: "hidden",
       className: [
         !open && menuIsClosed,
-        width$1 !== "content" && width[width$1],
+        width2 !== "content" && width$1[width2],
         placement === "top" && placementBottom
       ],
       children: [
@@ -6598,7 +6630,7 @@ const Step = ({ complete: complete2 = false, id, children: children2 }) => {
       cursor: interactable ? "pointer" : void 0,
       pointerEvents: !interactable && !active2 ? "none" : void 0,
       "aria-current": active2 ? "step" : void 0,
-      className: [step, tone$1[tone2]],
+      className: [step, tone$2[tone2]],
       onClick: interactable ? () => {
         if (onClick) {
           onClick(stepNumber);
@@ -7500,17 +7532,9 @@ const Tag = ({
     }
   );
 };
-const Highlight = ({ children: children2 }) => /* @__PURE__ */ jsx(
-  Box,
-  {
-    component: "mark",
-    borderRadius: "small",
-    background: { lightMode: "criticalLight", darkMode: "critical" },
-    className: root$5,
-    children: children2
-  }
-);
-const formatRanges = (value, highlightRanges) => {
+const styleForTone = { caution, critical };
+const Highlight = ({ children: children2, tone: tone2 }) => /* @__PURE__ */ jsx(Box, { component: "mark", className: [root$5, styleForTone[tone2]], children: children2 });
+const formatRanges = (value, highlightRanges, tone2) => {
   if (highlightRanges && value) {
     let lastEnd = 0;
     const validatedAndSortedRanges = highlightRanges.sort((a, b) => a.start > b.start ? 1 : -1).reduce((acc, { end, start }) => {
@@ -7537,7 +7561,9 @@ const formatRanges = (value, highlightRanges) => {
       ])
     ).reduce((acc, { text, highlight: highlight2 }, i) => {
       if (text) {
-        acc.push(highlight2 ? /* @__PURE__ */ jsx(Highlight, { children: text }, i) : text);
+        acc.push(
+          highlight2 ? /* @__PURE__ */ jsx(Highlight, { tone: tone2, children: text }, i) : text
+        );
       }
       return acc;
     }, []);
@@ -7584,6 +7610,8 @@ const Textarea = forwardRef(
     lines = 3,
     lineLimit,
     grow = true,
+    tone: tone2,
+    spellCheck,
     ...restProps
   }, ref) => {
     const [rows, setRows] = useState(lines);
@@ -7597,13 +7625,15 @@ const Textarea = forwardRef(
       [highlightsRef]
     );
     const inputLength = String(value).length;
-    const excessCharactersRange = characterLimit && inputLength > characterLimit ? [{ start: characterLimit }] : [];
-    const highlightRanges = [...excessCharactersRange, ...highlightRangesProp];
+    const hasExceededCharacterLimit = characterLimit && inputLength > characterLimit;
+    const highlightTone = !hasExceededCharacterLimit && (tone2 === "critical" || tone2 === "caution") ? tone2 : "critical";
+    const highlightRanges = hasExceededCharacterLimit ? [{ start: characterLimit }] : highlightRangesProp;
     const hasHighlights = highlightRanges.length > 0;
     return /* @__PURE__ */ jsx(
       Field,
       {
         ...restProps,
+        tone: tone2,
         value,
         icon: void 0,
         prefix: void 0,
@@ -7634,7 +7664,7 @@ const Textarea = forwardRef(
                   left: 0,
                   className: [highlights, className],
                   ...fieldProps,
-                  children: formatRanges(String(value), highlightRanges)
+                  children: formatRanges(String(value), highlightRanges, highlightTone)
                 }
               ) : null,
               /* @__PURE__ */ jsx(
@@ -7661,6 +7691,7 @@ const Textarea = forwardRef(
                   onPaste,
                   onScroll: hasHighlights ? (event) => updateScroll(event.currentTarget.scrollTop) : void 0,
                   placeholder: !restProps.disabled ? placeholder : void 0,
+                  spellCheck,
                   className: [field$2, className],
                   ...fieldProps,
                   ref

package/dist/reset.d.ts

@@ -754,6 +754,20 @@ declare const colorAtomicProperties: {
                         darkMode: string;
                     };
                 };
+                borderBrandAccent: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
+                borderBrandAccentLight: {
+                    defaultClass: string;
+                    conditions: {
+                        lightMode: string;
+                        darkMode: string;
+                    };
+                };
                 borderBrandAccentLarge: {
                     defaultClass: string;
                     conditions: {
@@ -2280,9 +2294,9 @@ declare const sprinkles: ((props: {
         lightMode?: "brandAccent" | "caution" | "cautionLight" | "critical" | "criticalLight" | "formAccent" | "info" | "infoLight" | "neutral" | "neutralLight" | "positive" | "positiveLight" | "promote" | "promoteLight" | "body" | "bodyDark" | "brand" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "criticalActive" | "criticalHover" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "neutralActive" | "neutralHover" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "surface" | "surfaceDark" | undefined;
         darkMode?: "brandAccent" | "caution" | "cautionLight" | "critical" | "criticalLight" | "formAccent" | "info" | "infoLight" | "neutral" | "neutralLight" | "positive" | "positiveLight" | "promote" | "promoteLight" | "body" | "bodyDark" | "brand" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "criticalActive" | "criticalHover" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "neutralActive" | "neutralHover" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "surface" | "surfaceDark" | undefined;
     }) | undefined;
-    readonly boxShadow?: ("small" | "medium" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | {
-        lightMode?: "small" | "medium" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
-        darkMode?: "small" | "medium" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
+    readonly boxShadow?: ("small" | "medium" | "large" | "borderBrandAccent" | "borderBrandAccentLight" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | {
+        lightMode?: "small" | "medium" | "large" | "borderBrandAccent" | "borderBrandAccentLight" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
+        darkMode?: "small" | "medium" | "large" | "borderBrandAccent" | "borderBrandAccentLight" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
     }) | undefined;
 }) => string) & {
     properties: Set<"background" | "borderRadius" | "transition" | "transform" | "alignItems" | "bottom" | "boxShadow" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "inset" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "opacity" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "textAlign" | "top" | "userSelect" | "width" | "zIndex" | "margin" | "outline" | "overflow" | "padding" | "paddingY" | "paddingX" | "marginY" | "marginX">;
@@ -2626,6 +2640,8 @@ interface Atoms extends Sprinkles {
 }
 
 declare const boxShadow: {
+    borderBrandAccent: string;
+    borderBrandAccentLight: string;
     borderBrandAccentLarge: string;
     borderBrandAccentLightLarge: string;
     borderCaution: string;
@@ -2866,7 +2882,7 @@ interface FieldLabelProps {
 }
 declare const FieldLabel$1: ({ id, htmlFor, label, disabled, secondaryLabel, tertiaryLabel, description, descriptionId, data, }: FieldLabelProps) => JSX.Element | null;
 
-declare const tones$1: readonly ["neutral", "critical", "positive"];
+declare const tones$1: readonly ["neutral", "critical", "positive", "caution"];
 type FieldTone = (typeof tones$1)[number];
 interface FieldMessageProps {
     id: string;
@@ -3515,6 +3531,7 @@ type RadioGroupBaseProps<Value = NonNullable<string | number>> = FieldGroupBaseP
     onChange: (event: FormEvent<HTMLInputElement>) => void;
     name?: string;
     size?: InlineFieldProps['size'];
+    tone?: Extract<FieldGroupBaseProps['tone'], 'critical' | 'positive' | 'neutral'>;
 };
 type RadioGroupLabelProps = FieldLabelVariant;
 type RadioGroupProps<Value = NonNullable<string | number>> = RadioGroupBaseProps<Value> & RadioGroupLabelProps;
@@ -3658,6 +3675,7 @@ type TextareaBaseProps = Omit<FieldBaseProps, 'value' | 'labelId' | 'secondaryMe
     onFocus?: NativeTextareaProps['onFocus'];
     onPaste?: NativeTextareaProps['onPaste'];
     placeholder?: NativeTextareaProps['placeholder'];
+    spellCheck?: NativeTextareaProps['spellCheck'];
     highlightRanges?: Array<{
         start: number;
         end?: number;

package/dist/styles/lib/components/Stepper/Stepper.css.cjs

@@ -10,6 +10,7 @@ const styles_lib_components_private_hideFocusRings_hideFocusRingsDataAttribute_c
 fileScope.setFileScope("src/lib/components/Stepper/Stepper.css.ts?used", "braid-design-system");
 const baseColourVar = css.createVar("baseColourVar");
 const highlightVar = css.createVar("highlightVar");
+const stepIndicatorSize = styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.small;
 const tone = {
   formAccent: css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
     lightMode: {
@@ -54,8 +55,8 @@ const step = css.style({
 const indicator = css.style([styles_lib_css_atoms_atoms_cjs.atoms({
   display: "block"
 }), {
-  height: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard,
-  width: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard,
+  height: stepIndicatorSize,
+  width: stepIndicatorSize,
   color: baseColourVar
 }], "indicator");
 const stretch = css.style({
@@ -114,13 +115,13 @@ const dotSize = 2;
 const progressTrack = css.style({
   background: `repeating-linear-gradient(90deg, ${baseColourVar}, ${baseColourVar} ${dotSize}px, transparent ${dotSize}px, transparent ${dotSize * 2}px)`,
   height: styles_lib_themes_vars_css_cjs.vars.borderWidth.large,
-  width: `${cssUtils.calc("100%").subtract(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard).subtract(cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap]).multiply(2))}`,
-  top: `${cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard).subtract(styles_lib_themes_vars_css_cjs.vars.borderWidth.large).divide(2)}`,
-  left: `${cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard).add(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap])}`
+  width: `${cssUtils.calc("100%").subtract(stepIndicatorSize).subtract(cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap]).multiply(2))}`,
+  top: `${cssUtils.calc(stepIndicatorSize).subtract(styles_lib_themes_vars_css_cjs.vars.borderWidth.large).divide(2)}`,
+  left: `${cssUtils.calc(stepIndicatorSize).add(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap])}`
 }, "progressTrack");
 const progressTrackCentered = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
   tablet: {
-    left: `${cssUtils.calc("50%").add(cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard).divide(2)).add(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap])}`
+    left: `${cssUtils.calc("50%").add(cssUtils.calc(stepIndicatorSize).divide(2)).add(styles_lib_themes_vars_css_cjs.vars.space[progressBarGap])}`
   }
 }), "progressTrackCentered");
 const progressLine = css.style({
@@ -131,7 +132,7 @@ const progressUnfilled = css.style({
   transform: "translateX(-101%)"
 }, "progressUnfilled");
 const indicatorContainer = css.style({
-  width: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.standard,
+  width: stepIndicatorSize,
   selectors: {
     [`${step}:active &`]: {
       transform: styles_lib_themes_vars_css_cjs.vars.transform.touchable

package/dist/styles/lib/components/Stepper/Stepper.css.mjs

@@ -9,6 +9,7 @@ import { hideFocusRingsDataAttribute } from "../private/hideFocusRings/hideFocus
 setFileScope("src/lib/components/Stepper/Stepper.css.ts?used", "braid-design-system");
 const baseColourVar = createVar("baseColourVar");
 const highlightVar = createVar("highlightVar");
+const stepIndicatorSize = vars.inlineFieldSize.small;
 const tone = {
   formAccent: style(colorModeStyle({
     lightMode: {
@@ -53,8 +54,8 @@ const step = style({
 const indicator = style([atoms({
   display: "block"
 }), {
-  height: vars.inlineFieldSize.standard,
-  width: vars.inlineFieldSize.standard,
+  height: stepIndicatorSize,
+  width: stepIndicatorSize,
   color: baseColourVar
 }], "indicator");
 const stretch = style({
@@ -113,13 +114,13 @@ const dotSize = 2;
 const progressTrack = style({
   background: `repeating-linear-gradient(90deg, ${baseColourVar}, ${baseColourVar} ${dotSize}px, transparent ${dotSize}px, transparent ${dotSize * 2}px)`,
   height: vars.borderWidth.large,
-  width: `${calc("100%").subtract(vars.inlineFieldSize.standard).subtract(calc(vars.space[progressBarGap]).multiply(2))}`,
-  top: `${calc(vars.inlineFieldSize.standard).subtract(vars.borderWidth.large).divide(2)}`,
-  left: `${calc(vars.inlineFieldSize.standard).add(vars.space[progressBarGap])}`
+  width: `${calc("100%").subtract(stepIndicatorSize).subtract(calc(vars.space[progressBarGap]).multiply(2))}`,
+  top: `${calc(stepIndicatorSize).subtract(vars.borderWidth.large).divide(2)}`,
+  left: `${calc(stepIndicatorSize).add(vars.space[progressBarGap])}`
 }, "progressTrack");
 const progressTrackCentered = style(responsiveStyle({
   tablet: {
-    left: `${calc("50%").add(calc(vars.inlineFieldSize.standard).divide(2)).add(vars.space[progressBarGap])}`
+    left: `${calc("50%").add(calc(stepIndicatorSize).divide(2)).add(vars.space[progressBarGap])}`
   }
 }), "progressTrackCentered");
 const progressLine = style({
@@ -130,7 +131,7 @@ const progressUnfilled = style({
   transform: "translateX(-101%)"
 }, "progressUnfilled");
 const indicatorContainer = style({
-  width: vars.inlineFieldSize.standard,
+  width: stepIndicatorSize,
   selectors: {
     [`${step}:active &`]: {
       transform: vars.transform.touchable

package/dist/styles/lib/components/Textarea/Highlight/Highlight.css.cjs

@@ -1,11 +1,42 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
+const styles_lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
+const styles_lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
+const styles_lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
 fileScope.setFileScope("src/lib/components/Textarea/Highlight/Highlight.css.ts?used", "braid-design-system");
 const space = 2;
-const root = css.style({
+const lineThickness = 2;
+const root = css.style([styles_lib_css_atoms_atoms_cjs.atoms({
+  borderRadius: "small"
+}), {
   padding: space,
-  margin: -space
-}, "root");
+  margin: -space,
+  textDecoration: "underline",
+  textDecorationStyle: "wavy",
+  textDecorationSkipInk: "none",
+  textDecorationThickness: lineThickness,
+  textUnderlineOffset: 2,
+  paddingBottom: lineThickness / 2,
+  marginBottom: -(lineThickness / 2)
+}], "root");
+const critical = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
+  lightMode: {
+    textDecorationColor: styles_lib_themes_vars_css_cjs.vars.borderColor.critical,
+    background: styles_lib_themes_vars_css_cjs.vars.backgroundColor.criticalLight
+  },
+  darkMode: {
+    textDecorationColor: styles_lib_themes_vars_css_cjs.vars.borderColor.criticalLight
+  }
+}), "critical");
+const caution = css.style([{
+  textDecorationColor: styles_lib_themes_vars_css_cjs.vars.borderColor.caution
+}, styles_lib_css_colorModeStyle_cjs.colorModeStyle({
+  lightMode: {
+    background: styles_lib_themes_vars_css_cjs.vars.backgroundColor.cautionLight
+  }
+})], "caution");
 fileScope.endFileScope();
+exports.caution = caution;
+exports.critical = critical;
 exports.root = root;

package/dist/styles/lib/components/Textarea/Highlight/Highlight.css.mjs

@@ -1,12 +1,43 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
+import { atoms } from "../../../css/atoms/atoms.mjs";
+import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
+import { vars } from "../../../themes/vars.css.mjs";
 setFileScope("src/lib/components/Textarea/Highlight/Highlight.css.ts?used", "braid-design-system");
 const space = 2;
-const root = style({
+const lineThickness = 2;
+const root = style([atoms({
+  borderRadius: "small"
+}), {
   padding: space,
-  margin: -space
-}, "root");
+  margin: -space,
+  textDecoration: "underline",
+  textDecorationStyle: "wavy",
+  textDecorationSkipInk: "none",
+  textDecorationThickness: lineThickness,
+  textUnderlineOffset: 2,
+  paddingBottom: lineThickness / 2,
+  marginBottom: -(lineThickness / 2)
+}], "root");
+const critical = style(colorModeStyle({
+  lightMode: {
+    textDecorationColor: vars.borderColor.critical,
+    background: vars.backgroundColor.criticalLight
+  },
+  darkMode: {
+    textDecorationColor: vars.borderColor.criticalLight
+  }
+}), "critical");
+const caution = style([{
+  textDecorationColor: vars.borderColor.caution
+}, colorModeStyle({
+  lightMode: {
+    background: vars.backgroundColor.cautionLight
+  }
+})], "caution");
 endFileScope();
 export {
+  caution,
+  critical,
   root
 };

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

@@ -8,9 +8,6 @@ const constants = {
   maxWidth: "260px",
   arrowSize: "12px"
 };
-const background = css.style({
-  background: styles_lib_themes_vars_css_cjs.vars.foregroundColor.neutral
-}, "background");
 const maxWidth = css.style({
   maxWidth: constants.maxWidth
 }, "maxWidth");
@@ -58,7 +55,6 @@ const arrow = css.style({
 }, "arrow");
 fileScope.endFileScope();
 exports.arrow = arrow;
-exports.background = background;
 exports.maxWidth = maxWidth;
 exports.translateZ0 = translateZ0;
 exports.verticalOffsetBeforeEntrance = verticalOffsetBeforeEntrance;

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

@@ -7,9 +7,6 @@ const constants = {
   maxWidth: "260px",
   arrowSize: "12px"
 };
-const background = style({
-  background: vars.foregroundColor.neutral
-}, "background");
 const maxWidth = style({
   maxWidth: constants.maxWidth
 }, "maxWidth");
@@ -58,7 +55,6 @@ const arrow = style({
 endFileScope();
 export {
   arrow,
-  background,
   maxWidth,
   translateZ0,
   verticalOffsetBeforeEntrance

package/dist/styles/lib/css/atoms/atomicProperties.cjs

@@ -10,6 +10,8 @@ const space = {
 };
 const boxShadow = {
   ...styles_lib_themes_vars_css_cjs.vars.shadow,
+  borderBrandAccent: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.brandAccent}`,
+  borderBrandAccentLight: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.brandAccentLight}`,
   borderBrandAccentLarge: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.large} ${styles_lib_themes_vars_css_cjs.vars.borderColor.brandAccent}`,
   borderBrandAccentLightLarge: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.large} ${styles_lib_themes_vars_css_cjs.vars.borderColor.brandAccentLight}`,
   borderCaution: `inset 0 0 0 ${styles_lib_themes_vars_css_cjs.vars.borderWidth.standard} ${styles_lib_themes_vars_css_cjs.vars.borderColor.caution}`,

package/dist/styles/lib/css/atoms/atomicProperties.mjs

@@ -9,6 +9,8 @@ const space = {
 };
 const boxShadow = {
   ...vars.shadow,
+  borderBrandAccent: `inset 0 0 0 ${vars.borderWidth.standard} ${vars.borderColor.brandAccent}`,
+  borderBrandAccentLight: `inset 0 0 0 ${vars.borderWidth.standard} ${vars.borderColor.brandAccentLight}`,
   borderBrandAccentLarge: `inset 0 0 0 ${vars.borderWidth.large} ${vars.borderColor.brandAccent}`,
   borderBrandAccentLightLarge: `inset 0 0 0 ${vars.borderWidth.large} ${vars.borderColor.brandAccentLight}`,
   borderCaution: `inset 0 0 0 ${vars.borderWidth.standard} ${vars.borderColor.caution}`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.2.0",
+  "version": "32.3.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -183,7 +183,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "sanitize-html": "^2.7.0",
-    "sku": "11.7.2",
+    "sku": "11.8.1",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3"
   },