braid-design-system 32.19.1 → 32.20.0

package/CHANGELOG.md

@@ -1,5 +1,66 @@
 # braid-design-system
 
+## 32.20.0
+
+### Minor Changes
+
+- **Toggle:** Add `togglePosition` prop ([#1509](https://github.com/seek-oss/braid-design-system/pull/1509))
+
+  Introduces the `togglePosition` prop, enabling the toggle to either be `leading` or `trailing` its label text.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Toggle togglePosition="trailing" label="Label" />
+  ```
+
+- **Toggle:** Add `bleedY` prop ([#1519](https://github.com/seek-oss/braid-design-system/pull/1519))
+
+  Introduces the `bleedY` prop, enabling vertical bleed for the `Toggle` component. This removes excess vertical space created by the `Toggle` input.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Toggle label="Label" bleedY />
+  ```
+
+  **MIGRATION GUIDE:**
+
+  Vertical bleed will become standard for the `Toggle` component in a future version. Please use the `bleedY` prop with a value of `true` and update your layout accordingly.
+
+- **Tag:** Introduce "addable" support ([#1521](https://github.com/seek-oss/braid-design-system/pull/1521))
+
+  Tag actions have been extended to now support being “added”.
+  A `Tag` will include a small add icon button when both an `onAdd` handler and `addLabel` prop are provided.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Tag onAdd={() => {...}} addLabel="Add Tag" />
+  ```
+
+- **seekJobs:** Use Tahoma for Thai fallback font ([#1527](https://github.com/seek-oss/braid-design-system/pull/1527))
+
+  Currently in the `seekJobs` theme, the fallback font for the Thai character set resolves to the default system font which differs by operating system.
+  By choosing a deterministic fallback that is available across operating systems, we can use [Capsize] to [improve the alignment] with the SEEK Sans web font, and reduce Cumulative Layout Shift for experiences that use Thai.
+
+  Additionally, adding `sans-serif` as an ultimate fallback in the event that we ever fall all the way through the stack on an obscure operating system.
+
+  [Capsize]: https://seek-oss.github.io/capsize/
+  [improve the alignment]: https://github.com/seek-oss/capsize?tab=readme-ov-file#createfontstack
+
+### Patch Changes
+
+- **Tag**: Add missing click event parameter to `onClear` prop type ([#1516](https://github.com/seek-oss/braid-design-system/pull/1516))
+
+- **Toggle:** Improve label text vertical alignment at `small` size ([#1518](https://github.com/seek-oss/braid-design-system/pull/1518))
+
+- **Toggle:** Remove tick icon & fix antialias haze when selected ([#1525](https://github.com/seek-oss/braid-design-system/pull/1525))
+
+  Simplying the selected state design by removing the tick icon from the toggle thumb.
+
+  Also fixes the antialias haze that appears around the thumb when selected.
+
 ## 32.19.1
 
 ### Patch Changes

package/codemod/dist/wrapper.js

@@ -121660,7 +121660,7 @@ var require_lib32 = __commonJS({
       value: true
     });
     exports2.default = optimiseCallExpression;
-    var _t = require_lib16();
+    var _t = require_lib3();
     var {
       callExpression: callExpression2,
       identifier,
@@ -121962,7 +121962,7 @@ var require_lib35 = __commonJS({
     exports2.isTransparentExprWrapper = isTransparentExprWrapper;
     exports2.skipTransparentExprWrapperNodes = skipTransparentExprWrapperNodes;
     exports2.skipTransparentExprWrappers = skipTransparentExprWrappers;
-    var _t = require_lib16();
+    var _t = require_lib3();
     var {
       isParenthesizedExpression,
       isTSAsExpression,

package/dist/lib/components/Tag/Tag.cjs

@@ -6,6 +6,7 @@ const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
 const lib_components_ButtonIcon_ButtonIcon_cjs = require("../ButtonIcon/ButtonIcon.cjs");
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
 const lib_components_Tag_Tag_css_cjs = require("./Tag.css.cjs");
+const lib_components_icons_IconAdd_IconAdd_cjs = require("../icons/IconAdd/IconAdd.cjs");
 const lib_components_icons_IconClear_IconClear_cjs = require("../icons/IconClear/IconClear.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
@@ -15,8 +16,6 @@ const paddingXForSize = {
   standard: "small"
 };
 const Tag = ({
-  onClear,
-  clearLabel = "Clear",
   size = "standard",
   data,
   id,
@@ -32,6 +31,21 @@ const Tag = ({
     !icon || icon.props.size === void 0 || icon.props.tone === void 0,
     "Icons cannot set the 'size' or 'tone' prop when passed to a Tag component"
   );
+  let label = "Clear";
+  let buttonType = "clear";
+  let handler;
+  const clearable = "onClear" in restProps && restProps.onClear;
+  const addable = "onAdd" in restProps && restProps.onAdd;
+  if (clearable) {
+    label = restProps.clearLabel;
+    handler = restProps.onClear;
+    buttonType = "clear";
+  } else if (addable) {
+    label = restProps.addLabel;
+    handler = restProps.onAdd;
+    buttonType = "add";
+  }
+  const hasButton = clearable || addable;
   return /* @__PURE__ */ jsxRuntime.jsx(
     lib_components_Box_Box_cjs.Box,
     {
@@ -44,18 +58,27 @@ const Tag = ({
           display: "flex",
           minWidth: 0,
           alignItems: "center",
-          background: "neutralLight",
+          background: addable ? "formAccentSoft" : "neutralLight",
           paddingY: "xxsmall",
           paddingX: paddingXForSize[size],
-          paddingRight: onClear ? "xsmall" : paddingXForSize[size],
+          paddingRight: hasButton ? "xsmall" : paddingXForSize[size],
           borderRadius: "full",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { minWidth: 0, title: children, children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Text_Text_cjs.Text, { size, baseline: false, maxLines: 1, children: [
-              icon,
-              " ",
-              children
-            ] }) }),
-            onClear ? /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { minWidth: 0, title: children, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              lib_components_Text_Text_cjs.Text,
+              {
+                size,
+                baseline: false,
+                maxLines: 1,
+                tone: addable ? "formAccent" : void 0,
+                children: [
+                  icon,
+                  " ",
+                  children
+                ]
+              }
+            ) }),
+            hasButton ? /* @__PURE__ */ jsxRuntime.jsx(
               lib_components_Box_Box_cjs.Box,
               {
                 flexShrink: 0,
@@ -64,12 +87,13 @@ const Tag = ({
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   lib_components_ButtonIcon_ButtonIcon_cjs.ButtonIcon,
                   {
-                    id: id ? `${id}-clear` : void 0,
-                    icon: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconClear_IconClear_cjs.IconClear, { tone: "secondary" }),
-                    label: clearLabel,
+                    id: id ? `${id}-${buttonType}` : void 0,
+                    icon: addable ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconAdd_IconAdd_cjs.IconAdd, {}) : /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconClear_IconClear_cjs.IconClear, { tone: "secondary" }),
+                    label,
                     size: "small",
+                    tone: addable ? "formAccent" : "neutral",
                     variant: "transparent",
-                    onClick: onClear
+                    onClick: handler
                   }
                 )
               }

package/dist/lib/components/Tag/Tag.mjs

@@ -5,6 +5,7 @@ import { Text } from "../Text/Text.mjs";
 import { ButtonIcon } from "../ButtonIcon/ButtonIcon.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 import { clearGutter } from "./Tag.css.mjs";
+import { IconAdd } from "../icons/IconAdd/IconAdd.mjs";
 import { IconClear } from "../icons/IconClear/IconClear.mjs";
 const tagSizes = ["small", "standard"];
 const paddingXForSize = {
@@ -12,8 +13,6 @@ const paddingXForSize = {
   standard: "small"
 };
 const Tag = ({
-  onClear,
-  clearLabel = "Clear",
   size = "standard",
   data,
   id,
@@ -29,6 +28,21 @@ const Tag = ({
     !icon || icon.props.size === void 0 || icon.props.tone === void 0,
     "Icons cannot set the 'size' or 'tone' prop when passed to a Tag component"
   );
+  let label = "Clear";
+  let buttonType = "clear";
+  let handler;
+  const clearable = "onClear" in restProps && restProps.onClear;
+  const addable = "onAdd" in restProps && restProps.onAdd;
+  if (clearable) {
+    label = restProps.clearLabel;
+    handler = restProps.onClear;
+    buttonType = "clear";
+  } else if (addable) {
+    label = restProps.addLabel;
+    handler = restProps.onAdd;
+    buttonType = "add";
+  }
+  const hasButton = clearable || addable;
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -41,18 +55,27 @@ const Tag = ({
           display: "flex",
           minWidth: 0,
           alignItems: "center",
-          background: "neutralLight",
+          background: addable ? "formAccentSoft" : "neutralLight",
           paddingY: "xxsmall",
           paddingX: paddingXForSize[size],
-          paddingRight: onClear ? "xsmall" : paddingXForSize[size],
+          paddingRight: hasButton ? "xsmall" : paddingXForSize[size],
           borderRadius: "full",
           children: [
-            /* @__PURE__ */ jsx(Box, { minWidth: 0, title: children, children: /* @__PURE__ */ jsxs(Text, { size, baseline: false, maxLines: 1, children: [
-              icon,
-              " ",
-              children
-            ] }) }),
-            onClear ? /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Box, { minWidth: 0, title: children, children: /* @__PURE__ */ jsxs(
+              Text,
+              {
+                size,
+                baseline: false,
+                maxLines: 1,
+                tone: addable ? "formAccent" : void 0,
+                children: [
+                  icon,
+                  " ",
+                  children
+                ]
+              }
+            ) }),
+            hasButton ? /* @__PURE__ */ jsx(
               Box,
               {
                 flexShrink: 0,
@@ -61,12 +84,13 @@ const Tag = ({
                 children: /* @__PURE__ */ jsx(
                   ButtonIcon,
                   {
-                    id: id ? `${id}-clear` : void 0,
-                    icon: /* @__PURE__ */ jsx(IconClear, { tone: "secondary" }),
-                    label: clearLabel,
+                    id: id ? `${id}-${buttonType}` : void 0,
+                    icon: addable ? /* @__PURE__ */ jsx(IconAdd, {}) : /* @__PURE__ */ jsx(IconClear, { tone: "secondary" }),
+                    label,
                     size: "small",
+                    tone: addable ? "formAccent" : "neutral",
                     variant: "transparent",
-                    onClick: onClear
+                    onClick: handler
                   }
                 )
               }

package/dist/lib/components/Toggle/Toggle.cjs

@@ -8,7 +8,9 @@ const lib_components_Box_BackgroundContext_cjs = require("../Box/BackgroundConte
 const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
 const lib_components_private_touchable_virtualTouchable_css_cjs = require("../private/touchable/virtualTouchable.css.cjs");
 const lib_components_Toggle_Toggle_css_cjs = require("./Toggle.css.cjs");
-const lib_components_icons_IconTick_IconTick_cjs = require("../icons/IconTick/IconTick.cjs");
+const dedent = require("dedent");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
 const handleChange = (onChange) => (event) => {
   if (typeof onChange === "function") {
     onChange(event.target.checked);
@@ -21,118 +23,152 @@ const Toggle = React.forwardRef(
     onChange,
     label,
     align = "left",
+    togglePosition,
     size = "standard",
+    bleedY = false,
     data,
     ...restProps
   }, forwardedRef) => {
     const lightness = lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
+    if (process.env.NODE_ENV !== "production") {
+      if (bleedY === void 0) {
+        console.warn(
+          dedent__default.default`
+          Vertical bleed will become standard in a future version, which will affect your layout.
+          Please add the "bleedY" prop with a value of "true" and optimise your layout.
+          `
+        );
+      }
+      if (bleedY === false) {
+        console.warn(
+          dedent__default.default`
+          Using "bleedY" set to "false" will be deprecated in a future version.
+          Please set the "bleedY" prop to "true" and optimise your layout.`
+        );
+      }
+    }
+    const defaultTogglePosition = align === "left" ? "leading" : "trailing";
+    const appliedTogglePosition = togglePosition || defaultTogglePosition;
+    const alignToEnd = align === "left" && appliedTogglePosition === "trailing" || align !== "left" && appliedTogglePosition === "leading";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       lib_components_Box_Box_cjs.Box,
       {
         position: "relative",
         zIndex: 0,
         display: "flex",
-        flexDirection: align === "left" ? void 0 : "rowReverse",
+        flexDirection: appliedTogglePosition === "trailing" ? "rowReverse" : "row",
+        justifyContent: alignToEnd ? "flexEnd" : void 0,
         className: lib_components_Toggle_Toggle_css_cjs.root,
         ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            lib_components_Box_Box_cjs.Box,
-            {
-              component: "input",
-              type: "checkbox",
-              id,
-              checked: on,
-              onChange: handleChange(onChange),
-              position: "absolute",
-              zIndex: 1,
-              cursor: "pointer",
-              opacity: 0,
-              className: [
-                lib_components_Toggle_Toggle_css_cjs.realField,
-                lib_components_Toggle_Toggle_css_cjs.realFieldPosition[size],
-                lib_components_Toggle_Toggle_css_cjs.fieldSize[size]
-              ],
-              ref: forwardedRef
-            }
-          ),
           /* @__PURE__ */ jsxRuntime.jsxs(
             lib_components_Box_Box_cjs.Box,
             {
               position: "relative",
-              display: "flex",
-              alignItems: "center",
-              flexShrink: 0,
-              className: [
-                lib_components_Toggle_Toggle_css_cjs.slideContainer,
-                lib_components_Toggle_Toggle_css_cjs.slideContainerSize[size],
-                lib_components_Toggle_Toggle_css_cjs.fieldSize[size]
-              ],
+              className: bleedY && lib_components_Toggle_Toggle_css_cjs.bleedToCapHeight[size],
+              display: bleedY ? "flex" : void 0,
+              alignItems: bleedY ? "center" : void 0,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   lib_components_Box_Box_cjs.Box,
                   {
+                    component: "input",
+                    type: "checkbox",
+                    id,
+                    checked: on,
+                    onChange: handleChange(onChange),
                     position: "absolute",
-                    width: "full",
-                    overflow: "hidden",
-                    borderRadius: "full",
+                    zIndex: 1,
+                    cursor: "pointer",
+                    opacity: 0,
                     className: [
-                      lib_components_Toggle_Toggle_css_cjs.slideTrack[size],
-                      lib_components_Toggle_Toggle_css_cjs.slideTrackMask,
-                      lib_components_Toggle_Toggle_css_cjs.slideTrackBgLightMode[lightness.lightMode],
-                      lib_components_Toggle_Toggle_css_cjs.slideTrackBgDarkMode[lightness.darkMode]
+                      lib_components_Toggle_Toggle_css_cjs.realField,
+                      !bleedY && lib_components_Toggle_Toggle_css_cjs.realFieldPosition[size],
+                      lib_components_Toggle_Toggle_css_cjs.fieldSize[size]
                     ],
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      lib_components_Box_Box_cjs.Box,
-                      {
-                        position: "absolute",
-                        width: "full",
-                        height: "full",
-                        background: "formAccent",
-                        transition: "fast",
-                        className: lib_components_Toggle_Toggle_css_cjs.slideTrackSelected
-                      }
-                    )
+                    ref: forwardedRef
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   lib_components_Box_Box_cjs.Box,
                   {
-                    position: "absolute",
-                    background: "surface",
-                    transition: "fast",
+                    position: "relative",
                     display: "flex",
                     alignItems: "center",
-                    justifyContent: "center",
-                    borderRadius: "full",
-                    className: lib_components_Toggle_Toggle_css_cjs.slider[size],
+                    flexShrink: 0,
+                    className: [
+                      lib_components_Toggle_Toggle_css_cjs.slideContainer,
+                      lib_components_Toggle_Toggle_css_cjs.slideContainerSize[size],
+                      lib_components_Toggle_Toggle_css_cjs.fieldSize[size]
+                    ],
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
-                        lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
+                        lib_components_Box_Box_cjs.Box,
                         {
-                          variant: on ? "formAccent" : "default",
+                          position: "absolute",
+                          width: "full",
+                          overflow: "hidden",
                           borderRadius: "full",
-                          visible: true,
-                          className: {
-                            [lib_components_Toggle_Toggle_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightness.lightMode === "dark"
-                          }
+                          className: [
+                            lib_components_Toggle_Toggle_css_cjs.slideTrack[size],
+                            lib_components_Toggle_Toggle_css_cjs.slideTrackMask,
+                            lib_components_Toggle_Toggle_css_cjs.slideTrackBgLightMode[lightness.lightMode],
+                            lib_components_Toggle_Toggle_css_cjs.slideTrackBgDarkMode[lightness.darkMode]
+                          ],
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            lib_components_Box_Box_cjs.Box,
+                            {
+                              position: "absolute",
+                              width: "full",
+                              height: "full",
+                              background: "formAccent",
+                              transition: "fast",
+                              className: lib_components_Toggle_Toggle_css_cjs.slideTrackSelected
+                            }
+                          )
                         }
                       ),
-                      /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay, { className: lib_components_Toggle_Toggle_css_cjs.icon, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconTick_IconTick_cjs.IconTick, { tone: "formAccent", size: "fill" }) }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        lib_components_Box_Box_cjs.Box,
                         {
-                          variant: "focus",
+                          position: "absolute",
+                          background: "surface",
+                          transition: "fast",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
                           borderRadius: "full",
-                          className: lib_components_Toggle_Toggle_css_cjs.focusOverlay
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
-                        {
-                          variant: "formAccent",
-                          borderRadius: "full",
-                          className: !on ? lib_components_Toggle_Toggle_css_cjs.hoverOverlay : void 0
+                          className: lib_components_Toggle_Toggle_css_cjs.slider[size],
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
+                              {
+                                variant: on ? "formAccent" : "default",
+                                borderRadius: "full",
+                                visible: true,
+                                className: {
+                                  [lib_components_Toggle_Toggle_css_cjs.sliderThumbOutlineFix]: true,
+                                  [lib_components_Toggle_Toggle_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightness.lightMode === "dark"
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
+                              {
+                                variant: "focus",
+                                borderRadius: "full",
+                                className: lib_components_Toggle_Toggle_css_cjs.focusOverlay
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
+                              {
+                                variant: "formAccent",
+                                borderRadius: "full",
+                                className: !on ? lib_components_Toggle_Toggle_css_cjs.hoverOverlay : void 0
+                              }
+                            )
+                          ]
                         }
                       )
                     ]
@@ -146,13 +182,25 @@ const Toggle = React.forwardRef(
             {
               component: "label",
               htmlFor: id,
-              paddingLeft: align === "left" ? "xsmall" : void 0,
-              paddingRight: align === "right" || align === "justify" ? "xsmall" : void 0,
+              paddingLeft: appliedTogglePosition === "trailing" ? void 0 : "xsmall",
+              paddingRight: appliedTogglePosition === "leading" ? void 0 : "xsmall",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
               flexGrow: align === "justify" ? 1 : void 0,
               userSelect: "none",
               cursor: "pointer",
-              className: [lib_components_Toggle_Toggle_css_cjs.label[size], lib_components_private_touchable_virtualTouchable_css_cjs.virtualTouchable],
-              children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { baseline: false, weight: on ? "strong" : void 0, size, children: label })
+              className: lib_components_private_touchable_virtualTouchable_css_cjs.virtualTouchable,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                lib_components_Text_Text_cjs.Text,
+                {
+                  baseline: bleedY,
+                  weight: on ? "strong" : void 0,
+                  size,
+                  align: align === "justify" && appliedTogglePosition === "leading" ? "right" : void 0,
+                  children: label
+                }
+              )
             }
           )
         ]

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

@@ -7,11 +7,20 @@ const lib_components_private_touchable_hitArea_cjs = require("../private/touchab
 const lib_components_private_touchable_debugTouchable_cjs = require("../private/touchable/debugTouchable.cjs");
 const polished = require("polished");
 const lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
+const lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
 fileScope.setFileScope("src/lib/components/Toggle/Toggle.css.ts", "braid-design-system");
 const sizes = {
   standard: "standard",
   small: "small"
 };
+const bleedToCapHeight = css.styleVariants(sizes, (size) => lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    height: lib_themes_vars_css_cjs.vars.textSize[size].mobile.capHeight
+  },
+  tablet: {
+    height: lib_themes_vars_css_cjs.vars.textSize[size].tablet.capHeight
+  }
+}), "bleedToCapHeight");
 const toggleWidthRatio = 1.6;
 const root = css.style({
   ":hover": {
@@ -24,13 +33,6 @@ const realField = css.style([{
 const realFieldPosition = css.styleVariants(sizes, (size) => ({
   top: cssUtils.calc(lib_components_private_touchable_hitArea_cjs.hitArea).subtract(lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).divide(2).negate().toString()
 }), "realFieldPosition");
-const label = css.styleVariants(sizes, (size) => {
-  const padding = cssUtils.calc(lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).subtract(lib_themes_vars_css_cjs.vars.textSize.standard.mobile.lineHeight).divide(2).toString();
-  return {
-    paddingTop: padding,
-    paddingBottom: padding
-  };
-}, "label");
 const fieldSize = css.styleVariants(sizes, (size) => ({
   width: cssUtils.calc.multiply(lib_themes_vars_css_cjs.vars.inlineFieldSize[size], toggleWidthRatio)
 }), "fieldSize");
@@ -97,20 +99,9 @@ const slider = css.styleVariants(sizes, (size) => {
     }
   };
 }, "slider");
-const icon = css.style({
-  transform: "scale(.75)",
-  selectors: {
-    [`${realField}:active + ${slideContainer} &`]: {
-      transform: "scale(.75) rotate(-25deg)"
-    },
-    [`${realField}:checked + ${slideContainer} &`]: {
-      opacity: 1
-    },
-    [`${realField}:active:checked + ${slideContainer} &`]: {
-      transform: "scale(.75) rotate(6deg)"
-    }
-  }
-}, "icon");
+const sliderThumbOutlineFix = css.style({
+  transform: "scale(1.04)"
+}, "sliderThumbOutlineFix");
 const hideBorderOnDarkBackgroundInLightMode = css.style(lib_css_colorModeStyle_cjs.colorModeStyle({
   lightMode: {
     opacity: 0
@@ -133,12 +124,11 @@ const hoverOverlay = css.style({
   }
 }, "hoverOverlay");
 fileScope.endFileScope();
+exports.bleedToCapHeight = bleedToCapHeight;
 exports.fieldSize = fieldSize;
 exports.focusOverlay = focusOverlay;
 exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;
 exports.hoverOverlay = hoverOverlay;
-exports.icon = icon;
-exports.label = label;
 exports.realField = realField;
 exports.realFieldPosition = realFieldPosition;
 exports.root = root;
@@ -150,3 +140,4 @@ exports.slideTrackBgLightMode = slideTrackBgLightMode;
 exports.slideTrackMask = slideTrackMask;
 exports.slideTrackSelected = slideTrackSelected;
 exports.slider = slider;
+exports.sliderThumbOutlineFix = sliderThumbOutlineFix;

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

@@ -1,16 +1,25 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style, styleVariants } from "@vanilla-extract/css";
+import { styleVariants, style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { vars } from "../../themes/vars.css.mjs";
 import { hitArea } from "../private/touchable/hitArea.mjs";
 import { debugTouchable } from "../private/touchable/debugTouchable.mjs";
 import { rgba } from "polished";
 import { colorModeStyle } from "../../css/colorModeStyle.mjs";
+import { responsiveStyle } from "../../css/responsiveStyle.mjs";
 setFileScope("src/lib/components/Toggle/Toggle.css.ts", "braid-design-system");
 const sizes = {
   standard: "standard",
   small: "small"
 };
+const bleedToCapHeight = styleVariants(sizes, (size) => responsiveStyle({
+  mobile: {
+    height: vars.textSize[size].mobile.capHeight
+  },
+  tablet: {
+    height: vars.textSize[size].tablet.capHeight
+  }
+}), "bleedToCapHeight");
 const toggleWidthRatio = 1.6;
 const root = style({
   ":hover": {
@@ -23,13 +32,6 @@ const realField = style([{
 const realFieldPosition = styleVariants(sizes, (size) => ({
   top: calc(hitArea).subtract(vars.inlineFieldSize[size]).divide(2).negate().toString()
 }), "realFieldPosition");
-const label = styleVariants(sizes, (size) => {
-  const padding = calc(vars.inlineFieldSize[size]).subtract(vars.textSize.standard.mobile.lineHeight).divide(2).toString();
-  return {
-    paddingTop: padding,
-    paddingBottom: padding
-  };
-}, "label");
 const fieldSize = styleVariants(sizes, (size) => ({
   width: calc.multiply(vars.inlineFieldSize[size], toggleWidthRatio)
 }), "fieldSize");
@@ -96,20 +98,9 @@ const slider = styleVariants(sizes, (size) => {
     }
   };
 }, "slider");
-const icon = style({
-  transform: "scale(.75)",
-  selectors: {
-    [`${realField}:active + ${slideContainer} &`]: {
-      transform: "scale(.75) rotate(-25deg)"
-    },
-    [`${realField}:checked + ${slideContainer} &`]: {
-      opacity: 1
-    },
-    [`${realField}:active:checked + ${slideContainer} &`]: {
-      transform: "scale(.75) rotate(6deg)"
-    }
-  }
-}, "icon");
+const sliderThumbOutlineFix = style({
+  transform: "scale(1.04)"
+}, "sliderThumbOutlineFix");
 const hideBorderOnDarkBackgroundInLightMode = style(colorModeStyle({
   lightMode: {
     opacity: 0
@@ -133,12 +124,11 @@ const hoverOverlay = style({
 }, "hoverOverlay");
 endFileScope();
 export {
+  bleedToCapHeight,
   fieldSize,
   focusOverlay,
   hideBorderOnDarkBackgroundInLightMode,
   hoverOverlay,
-  icon,
-  label,
   realField,
   realFieldPosition,
   root,
@@ -149,5 +139,6 @@ export {
   slideTrackBgLightMode,
   slideTrackMask,
   slideTrackSelected,
-  slider
+  slider,
+  sliderThumbOutlineFix
 };

package/dist/lib/components/Toggle/Toggle.mjs

@@ -6,8 +6,8 @@ import { Text } from "../Text/Text.mjs";
 import { useBackgroundLightness } from "../Box/BackgroundContext.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
 import { virtualTouchable } from "../private/touchable/virtualTouchable.css.mjs";
-import { root, realField, realFieldPosition, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, hideBorderOnDarkBackgroundInLightMode, icon, focusOverlay, hoverOverlay, label } from "./Toggle.css.mjs";
-import { IconTick } from "../icons/IconTick/IconTick.mjs";
+import { root, bleedToCapHeight, realField, realFieldPosition, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, sliderThumbOutlineFix, hideBorderOnDarkBackgroundInLightMode, focusOverlay, hoverOverlay } from "./Toggle.css.mjs";
+import dedent from "dedent";
 const handleChange = (onChange) => (event) => {
   if (typeof onChange === "function") {
     onChange(event.target.checked);
@@ -18,120 +18,154 @@ const Toggle = forwardRef(
     id,
     on,
     onChange,
-    label: label$1,
+    label,
     align = "left",
+    togglePosition,
     size = "standard",
+    bleedY = false,
     data,
     ...restProps
   }, forwardedRef) => {
     const lightness = useBackgroundLightness();
+    if (process.env.NODE_ENV !== "production") {
+      if (bleedY === void 0) {
+        console.warn(
+          dedent`
+          Vertical bleed will become standard in a future version, which will affect your layout.
+          Please add the "bleedY" prop with a value of "true" and optimise your layout.
+          `
+        );
+      }
+      if (bleedY === false) {
+        console.warn(
+          dedent`
+          Using "bleedY" set to "false" will be deprecated in a future version.
+          Please set the "bleedY" prop to "true" and optimise your layout.`
+        );
+      }
+    }
+    const defaultTogglePosition = align === "left" ? "leading" : "trailing";
+    const appliedTogglePosition = togglePosition || defaultTogglePosition;
+    const alignToEnd = align === "left" && appliedTogglePosition === "trailing" || align !== "left" && appliedTogglePosition === "leading";
     return /* @__PURE__ */ jsxs(
       Box,
       {
         position: "relative",
         zIndex: 0,
         display: "flex",
-        flexDirection: align === "left" ? void 0 : "rowReverse",
+        flexDirection: appliedTogglePosition === "trailing" ? "rowReverse" : "row",
+        justifyContent: alignToEnd ? "flexEnd" : void 0,
         className: root,
         ...buildDataAttributes({ data, validateRestProps: restProps }),
         children: [
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              component: "input",
-              type: "checkbox",
-              id,
-              checked: on,
-              onChange: handleChange(onChange),
-              position: "absolute",
-              zIndex: 1,
-              cursor: "pointer",
-              opacity: 0,
-              className: [
-                realField,
-                realFieldPosition[size],
-                fieldSize[size]
-              ],
-              ref: forwardedRef
-            }
-          ),
           /* @__PURE__ */ jsxs(
             Box,
             {
               position: "relative",
-              display: "flex",
-              alignItems: "center",
-              flexShrink: 0,
-              className: [
-                slideContainer,
-                slideContainerSize[size],
-                fieldSize[size]
-              ],
+              className: bleedY && bleedToCapHeight[size],
+              display: bleedY ? "flex" : void 0,
+              alignItems: bleedY ? "center" : void 0,
               children: [
                 /* @__PURE__ */ jsx(
                   Box,
                   {
+                    component: "input",
+                    type: "checkbox",
+                    id,
+                    checked: on,
+                    onChange: handleChange(onChange),
                     position: "absolute",
-                    width: "full",
-                    overflow: "hidden",
-                    borderRadius: "full",
+                    zIndex: 1,
+                    cursor: "pointer",
+                    opacity: 0,
                     className: [
-                      slideTrack[size],
-                      slideTrackMask,
-                      slideTrackBgLightMode[lightness.lightMode],
-                      slideTrackBgDarkMode[lightness.darkMode]
+                      realField,
+                      !bleedY && realFieldPosition[size],
+                      fieldSize[size]
                     ],
-                    children: /* @__PURE__ */ jsx(
-                      Box,
-                      {
-                        position: "absolute",
-                        width: "full",
-                        height: "full",
-                        background: "formAccent",
-                        transition: "fast",
-                        className: slideTrackSelected
-                      }
-                    )
+                    ref: forwardedRef
                   }
                 ),
                 /* @__PURE__ */ jsxs(
                   Box,
                   {
-                    position: "absolute",
-                    background: "surface",
-                    transition: "fast",
+                    position: "relative",
                     display: "flex",
                     alignItems: "center",
-                    justifyContent: "center",
-                    borderRadius: "full",
-                    className: slider[size],
+                    flexShrink: 0,
+                    className: [
+                      slideContainer,
+                      slideContainerSize[size],
+                      fieldSize[size]
+                    ],
                     children: [
                       /* @__PURE__ */ jsx(
-                        FieldOverlay,
+                        Box,
                         {
-                          variant: on ? "formAccent" : "default",
+                          position: "absolute",
+                          width: "full",
+                          overflow: "hidden",
                           borderRadius: "full",
-                          visible: true,
-                          className: {
-                            [hideBorderOnDarkBackgroundInLightMode]: lightness.lightMode === "dark"
-                          }
+                          className: [
+                            slideTrack[size],
+                            slideTrackMask,
+                            slideTrackBgLightMode[lightness.lightMode],
+                            slideTrackBgDarkMode[lightness.darkMode]
+                          ],
+                          children: /* @__PURE__ */ jsx(
+                            Box,
+                            {
+                              position: "absolute",
+                              width: "full",
+                              height: "full",
+                              background: "formAccent",
+                              transition: "fast",
+                              className: slideTrackSelected
+                            }
+                          )
                         }
                       ),
-                      /* @__PURE__ */ jsx(FieldOverlay, { className: icon, children: /* @__PURE__ */ jsx(IconTick, { tone: "formAccent", size: "fill" }) }),
-                      /* @__PURE__ */ jsx(
-                        FieldOverlay,
+                      /* @__PURE__ */ jsxs(
+                        Box,
                         {
-                          variant: "focus",
+                          position: "absolute",
+                          background: "surface",
+                          transition: "fast",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
                           borderRadius: "full",
-                          className: focusOverlay
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        FieldOverlay,
-                        {
-                          variant: "formAccent",
-                          borderRadius: "full",
-                          className: !on ? hoverOverlay : void 0
+                          className: slider[size],
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              FieldOverlay,
+                              {
+                                variant: on ? "formAccent" : "default",
+                                borderRadius: "full",
+                                visible: true,
+                                className: {
+                                  [sliderThumbOutlineFix]: true,
+                                  [hideBorderOnDarkBackgroundInLightMode]: lightness.lightMode === "dark"
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              FieldOverlay,
+                              {
+                                variant: "focus",
+                                borderRadius: "full",
+                                className: focusOverlay
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              FieldOverlay,
+                              {
+                                variant: "formAccent",
+                                borderRadius: "full",
+                                className: !on ? hoverOverlay : void 0
+                              }
+                            )
+                          ]
                         }
                       )
                     ]
@@ -145,13 +179,25 @@ const Toggle = forwardRef(
             {
               component: "label",
               htmlFor: id,
-              paddingLeft: align === "left" ? "xsmall" : void 0,
-              paddingRight: align === "right" || align === "justify" ? "xsmall" : void 0,
+              paddingLeft: appliedTogglePosition === "trailing" ? void 0 : "xsmall",
+              paddingRight: appliedTogglePosition === "leading" ? void 0 : "xsmall",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
               flexGrow: align === "justify" ? 1 : void 0,
               userSelect: "none",
               cursor: "pointer",
-              className: [label[size], virtualTouchable],
-              children: /* @__PURE__ */ jsx(Text, { baseline: false, weight: on ? "strong" : void 0, size, children: label$1 })
+              className: virtualTouchable,
+              children: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  baseline: bleedY,
+                  weight: on ? "strong" : void 0,
+                  size,
+                  align: align === "justify" && appliedTogglePosition === "leading" ? "right" : void 0,
+                  children: label
+                }
+              )
             }
           )
         ]

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

@@ -8,6 +8,9 @@ const snippets = [{
 }, {
   name: "Clearable",
   code: '<Inline space="small">\n        <Tag onClear={() => {}} clearLabel="Clear">\n          Tag\n        </Tag>\n        <Tag onClear={() => {}} clearLabel="Clear">\n          Tag\n        </Tag>\n        <Tag onClear={() => {}} clearLabel="Clear">\n          Tag\n        </Tag>\n      </Inline>'
+}, {
+  name: "Addable",
+  code: '<Inline space="small">\n        <Tag onAdd={() => {}} addLabel="Add">\n          Tag\n        </Tag>\n        <Tag onAdd={() => {}} addLabel="Add">\n          Tag\n        </Tag>\n        <Tag onAdd={() => {}} addLabel="Add">\n          Tag\n        </Tag>\n      </Inline>'
 }, {
   name: "With icon",
   code: '<Inline space="small">\n        <Tag icon={<IconTag />}>Tag</Tag>\n        <Tag icon={<IconTag />}>Tag</Tag>\n        <Tag icon={<IconTag />}>Tag</Tag>\n      </Inline>'

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

@@ -7,6 +7,9 @@ const snippets = [{
 }, {
   name: "Clearable",
   code: '<Inline space="small">\n        <Tag onClear={() => {}} clearLabel="Clear">\n          Tag\n        </Tag>\n        <Tag onClear={() => {}} clearLabel="Clear">\n          Tag\n        </Tag>\n        <Tag onClear={() => {}} clearLabel="Clear">\n          Tag\n        </Tag>\n      </Inline>'
+}, {
+  name: "Addable",
+  code: '<Inline space="small">\n        <Tag onAdd={() => {}} addLabel="Add">\n          Tag\n        </Tag>\n        <Tag onAdd={() => {}} addLabel="Add">\n          Tag\n        </Tag>\n        <Tag onAdd={() => {}} addLabel="Add">\n          Tag\n        </Tag>\n      </Inline>'
 }, {
   name: "With icon",
   code: '<Inline space="small">\n        <Tag icon={<IconTag />}>Tag</Tag>\n        <Tag icon={<IconTag />}>Tag</Tag>\n        <Tag icon={<IconTag />}>Tag</Tag>\n      </Inline>'

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

@@ -1,15 +1,18 @@
 "use strict";
 const snippets = [{
   name: "Standard",
-  code: '<Toggle label="Label" />'
+  code: '<Toggle label="Label" bleedY />'
 }, {
   name: "Small",
-  code: '<Toggle label="Label" size="small" />'
+  code: '<Toggle label="Label" size="small" bleedY />'
 }, {
   name: "Right aligned",
-  code: '<Toggle label="Label" align="right" />'
+  code: '<Toggle label="Label" align="right" bleedY />'
 }, {
   name: "Justified",
-  code: '<Toggle label="Label" align="justify" />'
+  code: '<Toggle label="Label" align="justify" bleedY />'
+}, {
+  name: "Trailing toggle position",
+  code: '<Toggle label="Label" togglePosition="trailing" bleedY />'
 }];
 exports.snippets = snippets;

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

@@ -1,15 +1,18 @@
 const snippets = [{
   name: "Standard",
-  code: '<Toggle label="Label" />'
+  code: '<Toggle label="Label" bleedY />'
 }, {
   name: "Small",
-  code: '<Toggle label="Label" size="small" />'
+  code: '<Toggle label="Label" size="small" bleedY />'
 }, {
   name: "Right aligned",
-  code: '<Toggle label="Label" align="right" />'
+  code: '<Toggle label="Label" align="right" bleedY />'
 }, {
   name: "Justified",
-  code: '<Toggle label="Label" align="justify" />'
+  code: '<Toggle label="Label" align="justify" bleedY />'
+}, {
+  name: "Trailing toggle position",
+  code: '<Toggle label="Label" togglePosition="trailing" bleedY />'
 }];
 export {
   snippets

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

@@ -18,7 +18,7 @@ const tokens = lib_themes_baseTokens_apac_cjs.makeTokens({
   tokenOverrides: {
     legacy: false,
     typography: {
-      fontFamily: 'SeekSans, "SeekSans Fallback", Arial',
+      fontFamily: 'SeekSans, "SeekSans Fallback", Arial, Tahoma, sans-serif',
       webFont: "https://www.seek.com.au/static/shared-web/seeksans.css",
       fontMetrics: {
         capHeight: 783,

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

@@ -17,7 +17,7 @@ const tokens = makeTokens({
   tokenOverrides: {
     legacy: false,
     typography: {
-      fontFamily: 'SeekSans, "SeekSans Fallback", Arial',
+      fontFamily: 'SeekSans, "SeekSans Fallback", Arial, Tahoma, sans-serif',
       webFont: "https://www.seek.com.au/static/shared-web/seeksans.css",
       fontMetrics: {
         capHeight: 783,

package/dist/wireframe.chunk.d.ts

@@ -3703,17 +3703,29 @@ declare const TabPanel: {
 };
 
 declare const tagSizes: readonly ["small", "standard"];
-type TagProps = {
+type CommonProps = {
     children: string;
     size?: (typeof tagSizes)[number];
     data?: DataAttributeMap;
     id?: string;
     icon?: TextProps['icon'];
-} & AllOrNone<{
-    onClear: () => void;
+};
+interface AddableTag extends CommonProps {
+    onAdd: ButtonIconProps['onClick'];
+    addLabel: string;
+}
+interface ClearableTag extends CommonProps {
+    onClear: ButtonIconProps['onClick'];
     clearLabel: string;
-}>;
-declare const Tag$1: ({ onClear, clearLabel, size, data, id, icon, children, ...restProps }: TagProps) => JSX.Element;
+}
+interface BaseTag extends CommonProps {
+    onClear?: never;
+    clearLabel?: never;
+    onAdd?: never;
+    addLabel?: never;
+}
+type TagProps = ClearableTag | AddableTag | BaseTag;
+declare const Tag$1: ({ size, data, id, icon, children, ...restProps }: TagProps) => JSX.Element;
 
 type NativeTextareaProps = AllHTMLAttributes<HTMLTextAreaElement>;
 type TextareaBaseProps = Omit<FieldBaseProps, 'value' | 'secondaryMessage' | 'icon' | 'prefix'> & {
@@ -3803,7 +3815,9 @@ interface ToggleProps {
     on: boolean;
     onChange: ChangeHandler;
     align?: 'left' | 'right' | 'justify';
+    togglePosition?: 'leading' | 'trailing';
     size?: Size;
+    bleedY?: boolean;
     data?: DataAttributeMap;
 }
 declare const Toggle$1: React__default.ForwardRefExoticComponent<ToggleProps & React__default.RefAttributes<HTMLInputElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.19.1",
+  "version": "32.20.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -197,7 +197,7 @@
     "@svgr/plugin-prettier": "^5.5.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^15.0.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/autosuggest-highlight": "^3.1.1",
     "@types/babel__core": "^7.20.1",
@@ -225,7 +225,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
     "sanitize-html": "^2.12.1",
-    "sku": "12.6.2",
+    "sku": "12.7.0",
     "svgo": "^2.8.0",
     "title-case": "^3.0.3"
   },