braid-design-system 32.3.0 → 32.4.0

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # braid-design-system
 
+## 32.4.0
+
+### Minor Changes
+
+- **Text, Heading:** Add `maxLines` support ([#1286](https://github.com/seek-oss/braid-design-system/pull/1286))
+
+  Provide support for limiting the number of lines shown by a `Text` or `Heading` component.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Text maxLines={3}>...</Text>
+  ```
+
+  **MIGRATION:**
+
+  With the addition of this feature, the `truncate` prop is now deprecated and will be removed in a future release.
+  Existing consumers should start migrating as below:
+
+  ```diff
+   <Text
+  -   truncate
+  +   maxLines={1}
+   />
+  ```
+
+- **Card:** Add full height support ([#1285](https://github.com/seek-oss/braid-design-system/pull/1285))
+
+  Provide support for making a `Card` use all available vertical space.
+  This is useful when laying out rows of `Card` elements and having them all be equal height.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Card height="full">...</Card>
+  ```
+
+### Patch Changes
+
+- **TextLink, TextLinkButton:** Update underline design ([#1288](https://github.com/seek-oss/braid-design-system/pull/1288))
+
+  Uplift the design of the the text underline used on `TextLink` and `TextLinkButton` components.
+
+- **Column:** Support full height content ([#1285](https://github.com/seek-oss/braid-design-system/pull/1285))
+
+  Provide support for full height content by growing all `Column` elements to be uniform in height.
+
+  This will have no effect on the content itself, but enables consumers to create designs of uniform content, such as rows of `Card` elements.
+
+## 32.3.1
+
+### Patch Changes
+
+- **RadioItem, Checkbox:** Fix stacking context behaviour ([#1284](https://github.com/seek-oss/braid-design-system/pull/1284))
+
+  A `RadioItem` and `Checkbox` previously created a new stacking context with an elevated `z-index` applied on hover, resulting in their labels overlaying other elements in an unpredictable ways — most noticable when [toggling nested content].
+
+  For example, toggling nested content containing an `Autosuggest`, would see the list of suggestions list would be overlayed by the next `RadioItem` on hover.
+
+  To fix this, the `z-index` is no longer elevated on hover, and additionally the nested content container applies an elevated index when the field is **checked**.
+
+  [toggling nested content]: https://seek-oss.github.io/braid-design-system/components/RadioGroup#toggling-nested-content
+
+- **Textarea:** Adjust `highlightRange` background to support different line heights ([#1279](https://github.com/seek-oss/braid-design-system/pull/1279))
+
+  Remove the vertical padding on the highlight element to prevent the background colour overlapping the wavy underline in themes with tighter line heights.
+
+- **MenuItemCheckbox:** Align checkbox size with a `small` Checkbox ([#1276](https://github.com/seek-oss/braid-design-system/pull/1276))
+
+  Align the size of a `MenuItemCheckbox` with a `small` sized `Checkbox`.
+
+- **Checkbox, RadioItem:** Fix alignment with updated Badge layout ([#1280](https://github.com/seek-oss/braid-design-system/pull/1280))
+
+  Improve layout to work with updated Badge layout which is no longer driven by line height.
+
+- **MonthPicker:** Reduce space between fields ([#1277](https://github.com/seek-oss/braid-design-system/pull/1277))
+
+  Reduce the space between the month and year fields.
+
 ## 32.3.0
 
 ### Minor Changes

package/dist/ToastContext.chunk.cjs

@@ -17,7 +17,8 @@ const styles_lib_components_Hidden_Hidden_css_cjs = require("./styles/lib/compon
 const styles_lib_css_negativeMargin_negativeMargin_css_cjs = require("./styles/lib/css/negativeMargin/negativeMargin.css.cjs");
 const styles_lib_components_Column_Column_css_cjs = require("./styles/lib/components/Column/Column.css.cjs");
 const styles_lib_components_ContentBlock_ContentBlock_css_cjs = require("./styles/lib/components/ContentBlock/ContentBlock.css.cjs");
-const styles_lib_components_private_Truncate_Truncate_css_cjs = require("./styles/lib/components/private/Truncate/Truncate.css.cjs");
+const dynamic = require("@vanilla-extract/dynamic");
+const styles_lib_components_private_MaxLines_MaxLines_css_cjs = require("./styles/lib/components/private/MaxLines/MaxLines.css.cjs");
 const styles_lib_components_private_AvoidWidowIcon_AvoidWidowIcon_css_cjs = require("./styles/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.css.cjs");
 const styles_lib_components_private_touchable_virtualTouchable_css_cjs = require("./styles/lib/components/private/touchable/virtualTouchable.css.cjs");
 const styles_lib_components_TextLink_TextLink_css_cjs = require("./styles/lib/components/TextLink/TextLink.css.cjs");
@@ -647,19 +648,48 @@ function textStyles({
     (baseline ? styles_lib_css_typography_css_cjs.textSizeTrimmed : styles_lib_css_typography_css_cjs.textSizeUntrimmed)[size]
   ];
 }
-const Truncate = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", className: styles_lib_components_private_Truncate_Truncate_css_cjs.truncate, children });
+const MaxLines = ({
+  children,
+  lines
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  Box,
+  {
+    component: "span",
+    className: [styles_lib_components_private_MaxLines_MaxLines_css_cjs.base, lines > 1 ? styles_lib_components_private_MaxLines_MaxLines_css_cjs.multiLine : void 0],
+    style: lines > 1 ? dynamic.assignInlineVars({ [styles_lib_components_private_MaxLines_MaxLines_css_cjs.lineLimit]: String(lines) }) : void 0,
+    children
+  }
+);
 const Typography = ({
   id,
   component = "span",
   className,
   align,
   truncate = false,
+  maxLines,
   icon,
   data,
   children,
   ...restProps
 }) => {
-  const contents = truncate ? /* @__PURE__ */ jsxRuntime.jsx(Truncate, { children }) : children;
+  const lines = truncate ? 1 : maxLines;
+  const contents = typeof lines === "number" ? /* @__PURE__ */ jsxRuntime.jsx(MaxLines, { lines, children }) : children;
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof truncate !== "undefined") {
+      console.warn(
+        dedent__default.default`
+          The "truncate" prop has been deprecated and will be removed in a future version. Use "maxLines" instead.
+             <Text
+            %c-   truncate
+            %c+   maxLines={1}
+             %c/>
+        `,
+        "color: red",
+        "color: green",
+        "color: inherit"
+      );
+    }
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
@@ -910,6 +940,7 @@ const Column = ({
       minWidth: 0,
       width: width !== "content" ? "full" : void 0,
       flexShrink: width === "content" ? 0 : void 0,
+      flexGrow: 1,
       className: [
         styles_lib_components_Column_Column_css_cjs.column,
         width !== "content" ? styles_lib_components_Column_Column_css_cjs.width[width] : null

package/dist/ToastContext.chunk.mjs

@@ -16,10 +16,11 @@ import { hiddenOnPrint } from "./styles/lib/components/Hidden/Hidden.css.mjs";
 import { preventCollapsePseudo, top, right, bottom, left } from "./styles/lib/css/negativeMargin/negativeMargin.css.mjs";
 import { column, width, columnContent } from "./styles/lib/components/Column/Column.css.mjs";
 import { marginAuto } from "./styles/lib/components/ContentBlock/ContentBlock.css.mjs";
-import { truncate } from "./styles/lib/components/private/Truncate/Truncate.css.mjs";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { base as base$2, multiLine, lineLimit } from "./styles/lib/components/private/MaxLines/MaxLines.css.mjs";
 import { nowrap } from "./styles/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.css.mjs";
 import { virtualTouchable as virtualTouchable$1, yAxisOnly } from "./styles/lib/components/private/touchable/virtualTouchable.css.mjs";
-import { weakLink, regularLinkLightMode, regularLinkDarkMode, base as base$2, visitedLightMode, visitedDarkMode } from "./styles/lib/components/TextLink/TextLink.css.mjs";
+import { weakLink, regularLinkLightMode, regularLinkDarkMode, base as base$3, visitedLightMode, visitedDarkMode } from "./styles/lib/components/TextLink/TextLink.css.mjs";
 import { lineHeightContainer } from "./styles/lib/css/lineHeightContainer.css.mjs";
 import { size, inlineCrop, inline, alignY, cropToTextSize, blockWidths } from "./styles/lib/hooks/useIcon/icon.css.mjs";
 import { hideFocusRingsClassName } from "./styles/lib/components/private/hideFocusRings/hideFocusRings.css.mjs";
@@ -640,19 +641,48 @@ function textStyles({
     (baseline ? textSizeTrimmed : textSizeUntrimmed)[size2]
   ];
 }
-const Truncate = ({ children }) => /* @__PURE__ */ jsx(Box, { component: "span", className: truncate, children });
+const MaxLines = ({
+  children,
+  lines
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    component: "span",
+    className: [base$2, lines > 1 ? multiLine : void 0],
+    style: lines > 1 ? assignInlineVars({ [lineLimit]: String(lines) }) : void 0,
+    children
+  }
+);
 const Typography = ({
   id,
   component = "span",
   className,
   align,
-  truncate: truncate2 = false,
+  truncate = false,
+  maxLines,
   icon,
   data,
   children,
   ...restProps
 }) => {
-  const contents = truncate2 ? /* @__PURE__ */ jsx(Truncate, { children }) : children;
+  const lines = truncate ? 1 : maxLines;
+  const contents = typeof lines === "number" ? /* @__PURE__ */ jsx(MaxLines, { lines, children }) : children;
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof truncate !== "undefined") {
+      console.warn(
+        dedent`
+          The "truncate" prop has been deprecated and will be removed in a future version. Use "maxLines" instead.
+             <Text
+            %c-   truncate
+            %c+   maxLines={1}
+             %c/>
+        `,
+        "color: red",
+        "color: green",
+        "color: inherit"
+      );
+    }
+  }
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -903,6 +933,7 @@ const Column = ({
       minWidth: 0,
       width: width$1 !== "content" ? "full" : void 0,
       flexShrink: width$1 === "content" ? 0 : void 0,
+      flexGrow: 1,
       className: [
         column,
         width$1 !== "content" ? width[width$1] : null
@@ -1975,7 +2006,7 @@ const useLinkStyles = ({
     isPlainBackground(backgroundContext2.darkMode, "dark") || weight === "regular" ? regularLinkDarkMode[backgroundLightness.darkMode] : weakLink
   ];
   return clsx(
-    base$2,
+    base$3,
     linkStyles,
     fontWeight.medium,
     showVisited ? [

package/dist/Toggle.chunk.cjs

@@ -28,6 +28,7 @@ const styles_lib_components_private_Modal_Modal_css_cjs = require("./styles/lib/
 const styles_lib_css_lineHeightContainer_css_cjs = require("./styles/lib/css/lineHeightContainer.css.cjs");
 const styles_lib_components_List_List_css_cjs = require("./styles/lib/components/List/List.css.cjs");
 const styles_lib_components_Loader_Loader_css_cjs = require("./styles/lib/components/Loader/Loader.css.cjs");
+const styles_lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs = require("./styles/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.cjs");
 const styles_lib_components_MenuItem_useMenuItem_css_cjs = require("./styles/lib/components/MenuItem/useMenuItem.css.cjs");
 const styles_lib_components_MenuRenderer_MenuRenderer_css_cjs = require("./styles/lib/components/MenuRenderer/MenuRenderer.css.cjs");
 const styles_lib_components_OverflowMenu_OverflowMenu_css_cjs = require("./styles/lib/components/OverflowMenu/OverflowMenu.css.cjs");
@@ -3643,7 +3644,7 @@ const Badge = React.forwardRef(
             paddingX: "xsmall",
             borderRadius: "standard",
             overflow: "hidden",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { size: "xsmall", weight: "medium", truncate: true, children })
+            children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { size: "xsmall", weight: "medium", maxLines: 1, children })
           }
         )
       }
@@ -3795,6 +3796,7 @@ const Card = ({
   component = "div",
   tone,
   data,
+  height,
   ...restProps
 }) => {
   assert__default.default(
@@ -3821,6 +3823,7 @@ const Card = ({
       background: "surface",
       padding: "gutter",
       borderRadius: resolvedRounding,
+      height: height === "full" ? height : void 0,
       ...ToastContext.buildDataAttributes({ data, validateRestProps: restProps }),
       children: [
         tone ? /* @__PURE__ */ jsxRuntime.jsx(Keyline, { tone, borderRadius: resolvedRounding }) : null,
@@ -3946,7 +3949,7 @@ const StyledInput = React.forwardRef(
           zIndex: 1,
           className: [
             styles_lib_components_private_InlineField_InlineField_css_cjs.realField,
-            styles_lib_components_private_InlineField_InlineField_css_cjs.realFieldPosition[size],
+            styles_lib_components_private_InlineField_InlineField_css_cjs.sizeVars[size],
             isMixed ? styles_lib_components_private_InlineField_InlineField_css_cjs.isMixed : void 0
           ],
           cursor: !disabled ? "pointer" : void 0,
@@ -3967,7 +3970,7 @@ const StyledInput = React.forwardRef(
         {
           flexShrink: 0,
           position: "relative",
-          className: [styles_lib_components_private_InlineField_InlineField_css_cjs.fakeField, styles_lib_components_private_InlineField_InlineField_css_cjs.fakeFieldSize[size]],
+          className: [styles_lib_components_private_InlineField_InlineField_css_cjs.fakeField, styles_lib_components_private_InlineField_InlineField_css_cjs.sizeVars[size]],
           background: fieldBackground,
           borderRadius: fieldBorderRadius,
           children: [
@@ -4047,7 +4050,14 @@ const InlineField = React.forwardRef(
     const messageId = `${id}-message`;
     const descriptionId = `${id}-description`;
     const hasMessage = message || reserveMessageSpace;
-    return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { position: "relative", zIndex: 0, className: styles_lib_components_private_InlineField_InlineField_css_cjs.root, children: [
+    if (process.env.NODE_ENV !== "production") {
+      if (badge && badge.props.bleedY !== void 0) {
+        console.warn(
+          `Badge elements cannot set the \`bleedY\` prop when passed to a ${type.charAt(0).toUpperCase()}${type.slice(1)} component`
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { position: "relative", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { display: "flex", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           StyledInput,
@@ -4074,7 +4084,7 @@ const InlineField = React.forwardRef(
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { paddingLeft: "small", flexGrow: 1, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Inline, { space: "small", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { className: [styles_lib_components_private_InlineField_InlineField_css_cjs.sizeVars[size], styles_lib_components_private_InlineField_InlineField_css_cjs.labelOffset], children: /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Inline, { space: "small", alignY: "center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               ToastContext.Box,
               {
@@ -4083,7 +4093,7 @@ const InlineField = React.forwardRef(
                 userSelect: "none",
                 display: "block",
                 cursor: !disabled ? "pointer" : void 0,
-                className: [styles_lib_components_private_InlineField_InlineField_css_cjs.labelOffset[size], ToastContext.virtualTouchable()],
+                className: ToastContext.virtualTouchable(),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   ToastContext.Text,
                   {
@@ -4095,12 +4105,13 @@ const InlineField = React.forwardRef(
                 )
               }
             ),
-            badge ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { className: styles_lib_components_private_InlineField_InlineField_css_cjs.badgeOffset[size], children: badge }) : null
-          ] }),
+            badge ? React.cloneElement(badge, { bleedY: true }) : null
+          ] }) }),
           description ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { paddingTop: "small", children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { tone: "secondary", size, id: descriptionId, children: description }) }) : null,
           children ? /* @__PURE__ */ jsxRuntime.jsx(
             ToastContext.Box,
             {
+              position: "relative",
               display: "none",
               paddingTop: "small",
               className: styles_lib_components_private_InlineField_InlineField_css_cjs.children,
@@ -5430,7 +5441,7 @@ function MenuItemChildren({
         size: menuItemChildrenSize,
         baseline: false,
         tone: tone === "critical" ? tone : void 0,
-        truncate: true,
+        maxLines: 1,
         children
       }
     ) }),
@@ -5499,7 +5510,7 @@ const MenuItemCheckbox = ({
             background: { lightMode: "surface" },
             marginRight: "small",
             flexShrink: 0,
-            className: ToastContext.iconSize(),
+            className: styles_lib_components_MenuItemCheckbox_MenuItemCheckbox_css_cjs.checkboxSize,
             children: /* @__PURE__ */ jsxRuntime.jsx(
               ToastContext.Box,
               {
@@ -5790,7 +5801,7 @@ const MonthPicker = ({
       ] })
     }
   );
-  const customFieldGroup = /* @__PURE__ */ jsxRuntime.jsx(FieldGroup, { id, tone, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Columns, { space: "medium", children: [
+  const customFieldGroup = /* @__PURE__ */ jsxRuntime.jsx(FieldGroup, { id, tone, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Columns, { space: "small", children: [
     /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
       Dropdown,
       {
@@ -7521,7 +7532,7 @@ const Tag = ({
           paddingRight: onClear ? void 0 : "small",
           borderRadius: "full",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { minWidth: 0, title: children, children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { baseline: false, truncate: true, icon: icon2, children }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { minWidth: 0, title: children, children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { baseline: false, maxLines: 1, icon: icon2, children }) }),
             onClear ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { flexShrink: 0, display: "flex", className: styles_lib_components_Tag_Tag_css_cjs.clearGutter, children: /* @__PURE__ */ jsxRuntime.jsx(
               ToastContext.ButtonIcon,
               {

package/dist/Toggle.chunk.mjs

@@ -27,6 +27,7 @@ import { headingRoot, headingFocus, pointerEventsAll, maxSize, closeIconOffset,
 import { lineHeightContainer } from "./styles/lib/css/lineHeightContainer.css.mjs";
 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 { checkboxSize } from "./styles/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.mjs";
 import { menuItem } from "./styles/lib/components/MenuItem/useMenuItem.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";
@@ -34,19 +35,19 @@ import { isMobile } from "is-mobile";
 import { field as field$1 } from "./styles/lib/components/Dropdown/Dropdown.css.mjs";
 import { nativeInput } from "./styles/lib/components/MonthPicker/MonthPicker.css.mjs";
 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 { realField, sizeVars, isMixed, fakeField, selected, focusOverlay as focusOverlay$1, hoverOverlay as hoverOverlay$1, checkboxIndicator, radioIndicator, labelOffset, 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$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, caution, critical } from "./styles/lib/components/Textarea/Highlight/Highlight.css.mjs";
+import { root as root$4, 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";
 import { secondaryIconSpace, field, placeholderColor, iconSpace, verticalDivider, focusOverlay, hoverOverlay } from "./styles/lib/components/private/Field/Field.css.mjs";
 import { columnsWide, columnsDesktop, columnsTablet, columnsMobile } from "./styles/lib/components/Tiles/Tiles.css.mjs";
-import { root as root$6, realField as realField$1, realFieldPosition as realFieldPosition$1, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, icon as icon$1, focusOverlay as focusOverlay$4, hoverOverlay as hoverOverlay$2, label } from "./styles/lib/components/Toggle/Toggle.css.mjs";
+import { root as root$5, realField as realField$1, realFieldPosition, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, icon as icon$1, focusOverlay as focusOverlay$4, hoverOverlay as hoverOverlay$2, label } from "./styles/lib/components/Toggle/Toggle.css.mjs";
 const ThemeNameConsumer = ({ children: children2 }) => children2(useThemeName());
 const useColor = () => useBraidTheme().color;
 const useBreakpoint = () => {
@@ -3635,7 +3636,7 @@ const Badge = forwardRef(
             paddingX: "xsmall",
             borderRadius: "standard",
             overflow: "hidden",
-            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", weight: "medium", truncate: true, children: children2 })
+            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", weight: "medium", maxLines: 1, children: children2 })
           }
         )
       }
@@ -3787,6 +3788,7 @@ const Card = ({
   component = "div",
   tone: tone2,
   data,
+  height,
   ...restProps
 }) => {
   assert(
@@ -3813,6 +3815,7 @@ const Card = ({
       background: "surface",
       padding: "gutter",
       borderRadius: resolvedRounding,
+      height: height === "full" ? height : void 0,
       ...buildDataAttributes({ data, validateRestProps: restProps }),
       children: [
         tone2 ? /* @__PURE__ */ jsx(Keyline, { tone: tone2, borderRadius: resolvedRounding }) : null,
@@ -3938,7 +3941,7 @@ const StyledInput = forwardRef(
           zIndex: 1,
           className: [
             realField,
-            realFieldPosition[size2],
+            sizeVars[size2],
             isMixed$1 ? isMixed : void 0
           ],
           cursor: !disabled ? "pointer" : void 0,
@@ -3959,7 +3962,7 @@ const StyledInput = forwardRef(
         {
           flexShrink: 0,
           position: "relative",
-          className: [fakeField, fakeFieldSize[size2]],
+          className: [fakeField, sizeVars[size2]],
           background: fieldBackground,
           borderRadius: fieldBorderRadius,
           children: [
@@ -4039,7 +4042,14 @@ const InlineField = forwardRef(
     const messageId = `${id}-message`;
     const descriptionId = `${id}-description`;
     const hasMessage = message || reserveMessageSpace;
-    return /* @__PURE__ */ jsxs(Box, { position: "relative", zIndex: 0, className: root$4, children: [
+    if (process.env.NODE_ENV !== "production") {
+      if (badge && badge.props.bleedY !== void 0) {
+        console.warn(
+          `Badge elements cannot set the \`bleedY\` prop when passed to a ${type.charAt(0).toUpperCase()}${type.slice(1)} component`
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
       /* @__PURE__ */ jsxs(Box, { display: "flex", children: [
         /* @__PURE__ */ jsx(
           StyledInput,
@@ -4066,7 +4076,7 @@ const InlineField = forwardRef(
           }
         ),
         /* @__PURE__ */ jsxs(Box, { paddingLeft: "small", flexGrow: 1, children: [
-          /* @__PURE__ */ jsxs(Inline, { space: "small", children: [
+          /* @__PURE__ */ jsx(Box, { className: [sizeVars[size2], labelOffset], children: /* @__PURE__ */ jsxs(Inline, { space: "small", alignY: "center", children: [
             /* @__PURE__ */ jsx(
               Box,
               {
@@ -4075,7 +4085,7 @@ const InlineField = forwardRef(
                 userSelect: "none",
                 display: "block",
                 cursor: !disabled ? "pointer" : void 0,
-                className: [labelOffset[size2], virtualTouchable()],
+                className: virtualTouchable(),
                 children: /* @__PURE__ */ jsx(
                   Text,
                   {
@@ -4087,12 +4097,13 @@ const InlineField = forwardRef(
                 )
               }
             ),
-            badge ? /* @__PURE__ */ jsx(Box, { className: badgeOffset[size2], children: badge }) : null
-          ] }),
+            badge ? cloneElement(badge, { bleedY: true }) : null
+          ] }) }),
           description ? /* @__PURE__ */ jsx(Box, { paddingTop: "small", children: /* @__PURE__ */ jsx(Text, { tone: "secondary", size: size2, id: descriptionId, children: description }) }) : null,
           children$1 ? /* @__PURE__ */ jsx(
             Box,
             {
+              position: "relative",
               display: "none",
               paddingTop: "small",
               className: children,
@@ -5422,7 +5433,7 @@ function MenuItemChildren({
         size: menuItemChildrenSize,
         baseline: false,
         tone: tone2 === "critical" ? tone2 : void 0,
-        truncate: true,
+        maxLines: 1,
         children: children2
       }
     ) }),
@@ -5491,7 +5502,7 @@ const MenuItemCheckbox = ({
             background: { lightMode: "surface" },
             marginRight: "small",
             flexShrink: 0,
-            className: iconSize(),
+            className: checkboxSize,
             children: /* @__PURE__ */ jsx(
               Box,
               {
@@ -5782,7 +5793,7 @@ const MonthPicker = ({
       ] })
     }
   );
-  const customFieldGroup = /* @__PURE__ */ jsx(FieldGroup, { id, tone: tone2, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxs(Columns, { space: "medium", children: [
+  const customFieldGroup = /* @__PURE__ */ jsx(FieldGroup, { id, tone: tone2, disabled, ...restProps, children: (fieldGroupProps) => /* @__PURE__ */ jsxs(Columns, { space: "small", children: [
     /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(
       Dropdown,
       {
@@ -7513,7 +7524,7 @@ const Tag = ({
           paddingRight: onClear ? void 0 : "small",
           borderRadius: "full",
           children: [
-            /* @__PURE__ */ jsx(Box, { minWidth: 0, title: children2, children: /* @__PURE__ */ jsx(Text, { baseline: false, truncate: true, icon: icon2, children: children2 }) }),
+            /* @__PURE__ */ jsx(Box, { minWidth: 0, title: children2, children: /* @__PURE__ */ jsx(Text, { baseline: false, maxLines: 1, icon: icon2, children: children2 }) }),
             onClear ? /* @__PURE__ */ jsx(Box, { flexShrink: 0, display: "flex", className: clearGutter, children: /* @__PURE__ */ jsx(
               ButtonIcon,
               {
@@ -7533,7 +7544,7 @@ const Tag = ({
   );
 };
 const styleForTone = { caution, critical };
-const Highlight = ({ children: children2, tone: tone2 }) => /* @__PURE__ */ jsx(Box, { component: "mark", className: [root$5, styleForTone[tone2]], children: children2 });
+const Highlight = ({ children: children2, tone: tone2 }) => /* @__PURE__ */ jsx(Box, { component: "mark", className: [root$4, styleForTone[tone2]], children: children2 });
 const formatRanges = (value, highlightRanges, tone2) => {
   if (highlightRanges && value) {
     let lastEnd = 0;
@@ -7951,7 +7962,7 @@ const Toggle = forwardRef(
         zIndex: 0,
         display: "flex",
         flexDirection: align === "left" ? void 0 : "rowReverse",
-        className: root$6,
+        className: root$5,
         ...buildDataAttributes({ data, validateRestProps: restProps }),
         children: [
           /* @__PURE__ */ jsx(
@@ -7968,7 +7979,7 @@ const Toggle = forwardRef(
               opacity: 0,
               className: [
                 realField$1,
-                realFieldPosition$1[size2],
+                realFieldPosition[size2],
                 fieldSize[size2]
               ],
               ref: forwardedRef

package/dist/reset.d.ts

@@ -2724,7 +2724,9 @@ interface TypographyProps extends Pick<BoxProps, 'id' | 'component'> {
     children?: ReactNode;
     icon?: ReactElement<UseIconProps>;
     align?: BoxProps['textAlign'];
+    /** @deprecated Use `maxLines={1}` instead. */
     truncate?: boolean;
+    maxLines?: number;
     data?: DataAttributeMap;
 }
 
@@ -3061,9 +3063,10 @@ type CardProps = {
     children: ReactNode;
     tone?: 'promote' | 'formAccent';
     component?: (typeof validCardComponents)[number];
+    height?: Extract<BoxProps['height'], 'full'> | 'content';
     data?: DataAttributeMap;
 } & (SimpleCardRounding | ResponsiveCardRounding);
-declare const Card$1: ({ children, component, tone, data, ...restProps }: CardProps) => JSX.Element;
+declare const Card$1: ({ children, component, tone, data, height, ...restProps }: CardProps) => JSX.Element;
 
 declare const sizes$1: {
     readonly standard: "standard";

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

@@ -0,0 +1,30 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const styles_lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
+const styles_lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
+fileScope.setFileScope("src/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.ts?used", "braid-design-system");
+const checkboxFieldSize = styles_lib_themes_vars_css_cjs.vars.inlineFieldSize.small;
+const menuItemCapHeight = css.createVar("menuItemCapHeight");
+const crop = css.createVar("crop");
+const checkboxSize = css.style([styles_lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    vars: {
+      [menuItemCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize.standard.mobile.capHeight,
+      [crop]: cssUtils.calc(checkboxFieldSize).subtract(menuItemCapHeight).divide(2).negate().toString()
+    }
+  },
+  tablet: {
+    vars: {
+      [menuItemCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize.standard.tablet.capHeight
+    }
+  }
+}), {
+  height: checkboxFieldSize,
+  width: checkboxFieldSize,
+  marginTop: crop,
+  marginBottom: crop
+}], "checkboxSize");
+fileScope.endFileScope();
+exports.checkboxSize = checkboxSize;

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

@@ -0,0 +1,31 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { createVar, style } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+import { responsiveStyle } from "../../css/responsiveStyle.mjs";
+import { vars } from "../../themes/vars.css.mjs";
+setFileScope("src/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.ts?used", "braid-design-system");
+const checkboxFieldSize = vars.inlineFieldSize.small;
+const menuItemCapHeight = createVar("menuItemCapHeight");
+const crop = createVar("crop");
+const checkboxSize = style([responsiveStyle({
+  mobile: {
+    vars: {
+      [menuItemCapHeight]: vars.textSize.standard.mobile.capHeight,
+      [crop]: calc(checkboxFieldSize).subtract(menuItemCapHeight).divide(2).negate().toString()
+    }
+  },
+  tablet: {
+    vars: {
+      [menuItemCapHeight]: vars.textSize.standard.tablet.capHeight
+    }
+  }
+}), {
+  height: checkboxFieldSize,
+  width: checkboxFieldSize,
+  marginTop: crop,
+  marginBottom: crop
+}], "checkboxSize");
+endFileScope();
+export {
+  checkboxSize
+};

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

@@ -31,9 +31,21 @@ const weakLinkVars = css.assignVars(textLinkVars, {
 const base = css.style({
   color: textLinkVars.color,
   textDecoration: textLinkVars.textDecoration,
+  textDecorationThickness: "0.1em",
+  textUnderlineOffset: "0.32em",
   ":hover": {
     color: textLinkVars.colorHover,
-    textDecoration: textLinkVars.textDecorationHover
+    textDecoration: textLinkVars.textDecorationHover,
+    /*
+          Duplicating the thickness rule due to inconsistent support
+          for shorthand properties of `text-decoration`. Without this,
+          applying the above decoration rule resets the thickness in
+          browsers that do support shorthands.
+    
+          We also cannot use the long-form `text-decoration-line` due
+          to browser support policy of Edge 16+.
+        */
+    textDecorationThickness: "0.1em"
   },
   ":focus": {
     color: textLinkVars.colorHover

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

@@ -30,9 +30,21 @@ const weakLinkVars = assignVars(textLinkVars, {
 const base = style({
   color: textLinkVars.color,
   textDecoration: textLinkVars.textDecoration,
+  textDecorationThickness: "0.1em",
+  textUnderlineOffset: "0.32em",
   ":hover": {
     color: textLinkVars.colorHover,
-    textDecoration: textLinkVars.textDecorationHover
+    textDecoration: textLinkVars.textDecorationHover,
+    /*
+          Duplicating the thickness rule due to inconsistent support
+          for shorthand properties of `text-decoration`. Without this,
+          applying the above decoration rule resets the thickness in
+          browsers that do support shorthands.
+    
+          We also cannot use the long-form `text-decoration-line` due
+          to browser support policy of Edge 16+.
+        */
+    textDecorationThickness: "0.1em"
   },
   ":focus": {
     color: textLinkVars.colorHover

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

@@ -5,20 +5,17 @@ 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 lineThickness = 2;
+const space = "2px";
 const root = css.style([styles_lib_css_atoms_atoms_cjs.atoms({
   borderRadius: "small"
 }), {
-  padding: space,
-  margin: -space,
+  padding: `0 ${space}`,
+  margin: `0 -${space}`,
   textDecoration: "underline",
   textDecorationStyle: "wavy",
   textDecorationSkipInk: "none",
-  textDecorationThickness: lineThickness,
-  textUnderlineOffset: 2,
-  paddingBottom: lineThickness / 2,
-  marginBottom: -(lineThickness / 2)
+  textDecorationThickness: 2,
+  textUnderlineOffset: 2
 }], "root");
 const critical = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
   lightMode: {

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

@@ -4,20 +4,17 @@ 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 lineThickness = 2;
+const space = "2px";
 const root = style([atoms({
   borderRadius: "small"
 }), {
-  padding: space,
-  margin: -space,
+  padding: `0 ${space}`,
+  margin: `0 -${space}`,
   textDecoration: "underline",
   textDecorationStyle: "wavy",
   textDecorationSkipInk: "none",
-  textDecorationThickness: lineThickness,
-  textUnderlineOffset: 2,
-  paddingBottom: lineThickness / 2,
-  marginBottom: -(lineThickness / 2)
+  textDecorationThickness: 2,
+  textUnderlineOffset: 2
 }], "root");
 const critical = style(colorModeStyle({
   lightMode: {

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

@@ -5,48 +5,48 @@ const cssUtils = require("@vanilla-extract/css-utils");
 const styles_lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
 const styles_lib_components_private_touchable_hitArea_cjs = require("../touchable/hitArea.cjs");
 const styles_lib_components_private_touchable_debugTouchable_cjs = require("../touchable/debugTouchable.cjs");
+const styles_lib_css_responsiveStyle_cjs = require("../../../css/responsiveStyle.cjs");
 fileScope.setFileScope("src/lib/components/private/InlineField/InlineField.css.ts?used", "braid-design-system");
 const sizes = {
   standard: "standard",
   small: "small"
 };
-const root = css.style({
-  ":hover": {
-    zIndex: 1
+const fieldSize = css.createVar("fieldSize");
+const labelCapHeight = css.createVar("labelCapHeight");
+const sizeVars = css.styleVariants(sizes, (size) => styles_lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    vars: {
+      [fieldSize]: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size],
+      [labelCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize[size].mobile.capHeight
+    }
+  },
+  tablet: {
+    vars: {
+      [labelCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize[size].tablet.capHeight
+    }
   }
-}, "root");
+}), "sizeVars");
+const hitAreaOffset = cssUtils.calc(styles_lib_components_private_touchable_hitArea_cjs.hitArea).subtract(fieldSize).divide(2).negate().toString();
 const realField = css.style([{
   width: styles_lib_components_private_touchable_hitArea_cjs.hitArea,
-  height: styles_lib_components_private_touchable_hitArea_cjs.hitArea
+  height: styles_lib_components_private_touchable_hitArea_cjs.hitArea,
+  top: hitAreaOffset,
+  left: hitAreaOffset
 }, styles_lib_components_private_touchable_debugTouchable_cjs.debugTouchable()], "realField");
-const realFieldPosition = css.styleVariants(sizes, (size) => {
-  const offset = cssUtils.calc(styles_lib_components_private_touchable_hitArea_cjs.hitArea).subtract(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).divide(2).negate().toString();
-  return {
-    top: offset,
-    left: offset
-  };
-}, "realFieldPosition");
-const fakeField = css.style({}, "fakeField");
-const fakeFieldSize = css.styleVariants(sizes, (size) => ({
-  height: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size],
-  width: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]
-}), "fakeFieldSize");
-const badgeOffset = css.styleVariants(sizes, (size) => {
-  const offset = cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).subtract(styles_lib_themes_vars_css_cjs.vars.textSize.xsmall.mobile.lineHeight).divide(2).toString();
-  return {
-    paddingTop: offset,
-    paddingBottom: offset
-  };
-}, "badgeOffset");
-const labelOffset = css.styleVariants(sizes, (size) => ({
-  paddingTop: cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).subtract(styles_lib_themes_vars_css_cjs.vars.textSize[size].mobile.capHeight).divide(2).toString()
-}), "labelOffset");
+const fakeField = css.style({
+  height: fieldSize,
+  width: fieldSize
+}, "fakeField");
+const labelOffset = css.style({
+  paddingTop: cssUtils.calc(fieldSize).subtract(labelCapHeight).divide(2).toString()
+}, "labelOffset");
 const isMixed = css.style({}, "isMixed");
 const children = css.style({
   selectors: {
     [`${realField}:checked ~ * &,
       ${realField}${isMixed} ~ * &`]: {
-      display: "block"
+      display: "block",
+      zIndex: 1
     }
   }
 }, "children");
@@ -99,17 +99,14 @@ const radioScale = css.style({
 }, "radioScale");
 const radioIndicator = [indicator, radioScale];
 fileScope.endFileScope();
-exports.badgeOffset = badgeOffset;
 exports.checkboxIndicator = checkboxIndicator;
 exports.children = children;
 exports.fakeField = fakeField;
-exports.fakeFieldSize = fakeFieldSize;
 exports.focusOverlay = focusOverlay;
 exports.hoverOverlay = hoverOverlay;
 exports.isMixed = isMixed;
 exports.labelOffset = labelOffset;
 exports.radioIndicator = radioIndicator;
 exports.realField = realField;
-exports.realFieldPosition = realFieldPosition;
-exports.root = root;
 exports.selected = selected;
+exports.sizeVars = sizeVars;

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

@@ -1,51 +1,51 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style, styleVariants } from "@vanilla-extract/css";
+import { createVar, styleVariants, style } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { vars } from "../../../themes/vars.css.mjs";
 import { hitArea } from "../touchable/hitArea.mjs";
 import { debugTouchable } from "../touchable/debugTouchable.mjs";
+import { responsiveStyle } from "../../../css/responsiveStyle.mjs";
 setFileScope("src/lib/components/private/InlineField/InlineField.css.ts?used", "braid-design-system");
 const sizes = {
   standard: "standard",
   small: "small"
 };
-const root = style({
-  ":hover": {
-    zIndex: 1
+const fieldSize = createVar("fieldSize");
+const labelCapHeight = createVar("labelCapHeight");
+const sizeVars = styleVariants(sizes, (size) => responsiveStyle({
+  mobile: {
+    vars: {
+      [fieldSize]: vars.inlineFieldSize[size],
+      [labelCapHeight]: vars.textSize[size].mobile.capHeight
+    }
+  },
+  tablet: {
+    vars: {
+      [labelCapHeight]: vars.textSize[size].tablet.capHeight
+    }
   }
-}, "root");
+}), "sizeVars");
+const hitAreaOffset = calc(hitArea).subtract(fieldSize).divide(2).negate().toString();
 const realField = style([{
   width: hitArea,
-  height: hitArea
+  height: hitArea,
+  top: hitAreaOffset,
+  left: hitAreaOffset
 }, debugTouchable()], "realField");
-const realFieldPosition = styleVariants(sizes, (size) => {
-  const offset = calc(hitArea).subtract(vars.inlineFieldSize[size]).divide(2).negate().toString();
-  return {
-    top: offset,
-    left: offset
-  };
-}, "realFieldPosition");
-const fakeField = style({}, "fakeField");
-const fakeFieldSize = styleVariants(sizes, (size) => ({
-  height: vars.inlineFieldSize[size],
-  width: vars.inlineFieldSize[size]
-}), "fakeFieldSize");
-const badgeOffset = styleVariants(sizes, (size) => {
-  const offset = calc(vars.inlineFieldSize[size]).subtract(vars.textSize.xsmall.mobile.lineHeight).divide(2).toString();
-  return {
-    paddingTop: offset,
-    paddingBottom: offset
-  };
-}, "badgeOffset");
-const labelOffset = styleVariants(sizes, (size) => ({
-  paddingTop: calc(vars.inlineFieldSize[size]).subtract(vars.textSize[size].mobile.capHeight).divide(2).toString()
-}), "labelOffset");
+const fakeField = style({
+  height: fieldSize,
+  width: fieldSize
+}, "fakeField");
+const labelOffset = style({
+  paddingTop: calc(fieldSize).subtract(labelCapHeight).divide(2).toString()
+}, "labelOffset");
 const isMixed = style({}, "isMixed");
 const children = style({
   selectors: {
     [`${realField}:checked ~ * &,
       ${realField}${isMixed} ~ * &`]: {
-      display: "block"
+      display: "block",
+      zIndex: 1
     }
   }
 }, "children");
@@ -99,18 +99,15 @@ const radioScale = style({
 const radioIndicator = [indicator, radioScale];
 endFileScope();
 export {
-  badgeOffset,
   checkboxIndicator,
   children,
   fakeField,
-  fakeFieldSize,
   focusOverlay,
   hoverOverlay,
   isMixed,
   labelOffset,
   radioIndicator,
   realField,
-  realFieldPosition,
-  root,
-  selected
+  selected,
+  sizeVars
 };

package/dist/styles/lib/components/private/MaxLines/MaxLines.css.cjs

@@ -0,0 +1,30 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_entries_css_cjs = require("../../../../../css.cjs");
+fileScope.setFileScope("src/lib/components/private/MaxLines/MaxLines.css.ts?used", "braid-design-system");
+const base = css.style([styles_entries_css_cjs.atoms({
+  display: "block",
+  overflow: "hidden",
+  minWidth: 0
+}), {
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}], "base");
+const lineLimit = css.createVar("lineLimit");
+const lineClampSupportsQuery = "(display: -webkit-box) and (-webkit-line-clamp: 1)";
+const multiLine = css.style({
+  // Can drop supports query when Edge 16 is removed from browser support policy
+  "@supports": {
+    [lineClampSupportsQuery]: {
+      whiteSpace: "initial",
+      display: "-webkit-box",
+      WebkitLineClamp: lineLimit,
+      WebkitBoxOrient: "vertical"
+    }
+  }
+}, "multiLine");
+fileScope.endFileScope();
+exports.base = base;
+exports.lineLimit = lineLimit;
+exports.multiLine = multiLine;

package/dist/styles/lib/components/private/MaxLines/MaxLines.css.mjs

@@ -0,0 +1,31 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style, createVar } from "@vanilla-extract/css";
+import { atoms } from "../../../../../css.mjs";
+setFileScope("src/lib/components/private/MaxLines/MaxLines.css.ts?used", "braid-design-system");
+const base = style([atoms({
+  display: "block",
+  overflow: "hidden",
+  minWidth: 0
+}), {
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}], "base");
+const lineLimit = createVar("lineLimit");
+const lineClampSupportsQuery = "(display: -webkit-box) and (-webkit-line-clamp: 1)";
+const multiLine = style({
+  // Can drop supports query when Edge 16 is removed from browser support policy
+  "@supports": {
+    [lineClampSupportsQuery]: {
+      whiteSpace: "initial",
+      display: "-webkit-box",
+      WebkitLineClamp: lineLimit,
+      WebkitBoxOrient: "vertical"
+    }
+  }
+}, "multiLine");
+endFileScope();
+export {
+  base,
+  lineLimit,
+  multiLine
+};

package/package.json

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

package/dist/styles/lib/components/private/Truncate/Truncate.css.cjs

@@ -1,15 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_entries_css_cjs = require("../../../../../css.cjs");
-fileScope.setFileScope("src/lib/components/private/Truncate/Truncate.css.ts?used", "braid-design-system");
-const truncate = css.style([styles_entries_css_cjs.atoms({
-  display: "block",
-  overflow: "hidden",
-  minWidth: 0
-}), {
-  whiteSpace: "nowrap",
-  textOverflow: "ellipsis"
-}], "truncate");
-fileScope.endFileScope();
-exports.truncate = truncate;

package/dist/styles/lib/components/private/Truncate/Truncate.css.mjs

@@ -1,16 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { atoms } from "../../../../../css.mjs";
-setFileScope("src/lib/components/private/Truncate/Truncate.css.ts?used", "braid-design-system");
-const truncate = style([atoms({
-  display: "block",
-  overflow: "hidden",
-  minWidth: 0
-}), {
-  whiteSpace: "nowrap",
-  textOverflow: "ellipsis"
-}], "truncate");
-endFileScope();
-export {
-  truncate
-};