braid-design-system 32.0.0 → 32.1.0

package/dist/ToastContext.chunk.cjs

@@ -18,6 +18,7 @@ const styles_lib_css_negativeMargin_negativeMargin_css_cjs = require("./styles/l
 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 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");
 const styles_lib_css_lineHeightContainer_css_cjs = require("./styles/lib/css/lineHeightContainer.css.cjs");
@@ -1222,6 +1223,26 @@ const FieldOverlay = ({ variant, ...restProps }) => /* @__PURE__ */ jsxRuntime.j
     ...restProps
   }
 );
+const AvoidWidowIcon = ({
+  children,
+  iconPosition,
+  space = "xxsmall",
+  className
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  Box,
+  {
+    component: "span",
+    paddingRight: iconPosition === "leading" ? space : void 0,
+    paddingLeft: iconPosition === "trailing" ? space : void 0,
+    className: [styles_lib_components_private_AvoidWidowIcon_AvoidWidowIcon_css_cjs.nowrap, className],
+    "aria-hidden": true,
+    children: [
+      iconPosition === "leading" ? children : void 0,
+      "⁠",
+      iconPosition === "trailing" ? children : void 0
+    ]
+  }
+);
 const validBleedComponents = ["div", "span"];
 const Bleed = ({
   space,
@@ -1456,6 +1477,7 @@ const ButtonText = ({
   loading,
   size: sizeProp,
   icon,
+  iconPosition = "leading",
   variant = "solid",
   tone,
   labelSpacing = true,
@@ -1496,17 +1518,26 @@ const ButtonText = ({
           size,
           baseline: false,
           children: [
-            icon ? /* @__PURE__ */ jsxRuntime.jsx(
-              Box,
+            icon && iconPosition === "leading" ? /* @__PURE__ */ jsxRuntime.jsx(
+              AvoidWidowIcon,
               {
-                component: "span",
-                paddingRight: "xsmall",
+                iconPosition,
+                space: "xsmall",
                 className: shouldReducePaddingX || bleed ? null : negativeMargin("left", "xxsmall"),
                 children: icon
               }
             ) : null,
             children,
-            loading ? /* @__PURE__ */ jsxRuntime.jsx(ButtonLoader, {}) : null
+            loading ? /* @__PURE__ */ jsxRuntime.jsx(ButtonLoader, {}) : null,
+            !loading && icon && iconPosition === "trailing" ? /* @__PURE__ */ jsxRuntime.jsx(
+              AvoidWidowIcon,
+              {
+                iconPosition,
+                space: "xsmall",
+                className: shouldReducePaddingX || bleed ? null : negativeMargin("right", "xxsmall"),
+                children: icon
+              }
+            ) : null
           ]
         }
       )
@@ -1560,6 +1591,7 @@ const Button = React.forwardRef(
     size,
     tone,
     icon,
+    iconPosition,
     bleedY,
     bleed,
     variant,
@@ -1626,6 +1658,7 @@ const Button = React.forwardRef(
               size,
               loading,
               icon,
+              iconPosition,
               bleed,
               children
             }
@@ -1980,6 +2013,7 @@ const useLinkStyles = ({
   return clsx__default.default(
     styles_lib_components_TextLink_TextLink_css_cjs.base,
     linkStyles,
+    styles_lib_css_typography_css_cjs.fontWeight.medium,
     showVisited ? [
       styles_lib_components_TextLink_TextLink_css_cjs.visitedLightMode[backgroundLightness.lightMode],
       styles_lib_components_TextLink_TextLink_css_cjs.visitedDarkMode[backgroundLightness.darkMode]
@@ -1993,25 +2027,40 @@ const useLinkStyles = ({
     hitArea === "large" && virtualTouchable()
   );
 };
+const TextLinkContent = ({
+  icon,
+  iconPosition = "leading",
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  icon && iconPosition === "leading" ? /* @__PURE__ */ jsxRuntime.jsx(AvoidWidowIcon, { iconPosition, children: icon }) : null,
+  children,
+  icon && iconPosition === "trailing" ? /* @__PURE__ */ jsxRuntime.jsx(AvoidWidowIcon, { iconPosition, children: icon }) : null
+] });
 const TextLink = React.forwardRef(
-  ({ weight, showVisited, hitArea, data, icon, children, ...restProps }, ref) => {
+  ({
+    weight,
+    showVisited,
+    hitArea,
+    data,
+    icon,
+    children,
+    iconPosition,
+    ...restProps
+  }, ref) => {
     const LinkComponent = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useLinkComponent(ref);
     const classes = useLinkStyles({
       weight,
       showVisited,
       hitArea
     });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       LinkComponent,
       {
         ref,
         ...restProps,
         className: classes,
         ...buildDataAttributes({ data, validateRestProps: false }),
-        children: [
-          icon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", paddingRight: "xxsmall", children: icon }) : null,
-          children
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsx(TextLinkContent, { icon, iconPosition, children })
       }
     );
   }
@@ -2031,6 +2080,7 @@ const TextLinkButton = ({
   "aria-describedby": ariaDescribedBy,
   tabIndex,
   icon,
+  iconPosition,
   ...restProps
 }) => {
   const buttonRef = React.useRef(null);
@@ -2049,7 +2099,7 @@ const TextLinkButton = ({
     },
     [buttonRef]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
       ref: buttonRef,
@@ -2064,10 +2114,7 @@ const TextLinkButton = ({
       id,
       className: classes,
       ...buildDataAttributes({ data, validateRestProps: restProps }),
-      children: [
-        icon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", paddingRight: "xxsmall", children: icon }) : null,
-        children
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx(TextLinkContent, { icon, iconPosition, children })
     }
   );
 };
@@ -2477,6 +2524,7 @@ const useToast = () => {
   );
 };
 exports.ActionsContext = ActionsContext;
+exports.AvoidWidowIcon = AvoidWidowIcon;
 exports.BackgroundProvider = BackgroundProvider;
 exports.Bleed = Bleed;
 exports.Box = Box;

package/dist/ToastContext.chunk.mjs

@@ -17,6 +17,7 @@ import { p as preventCollapsePseudo, s as styles } from "./styles/lib/css/negati
 import { c as column, w as width, a as columnContent } from "./styles/lib/components/Column/Column.css.mjs";
 import { m as marginAuto } from "./styles/lib/components/ContentBlock/ContentBlock.css.mjs";
 import { t as truncate } from "./styles/lib/components/private/Truncate/Truncate.css.mjs";
+import { n as nowrap } from "./styles/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.css.mjs";
 import { v as virtualTouchable$1, y as yAxisOnly } from "./styles/lib/components/private/touchable/virtualTouchable.css.mjs";
 import { w as weakLink, r as regularLinkLightMode, a as regularLinkDarkMode, b as base$2, v as visitedLightMode, c as visitedDarkMode } from "./styles/lib/components/TextLink/TextLink.css.mjs";
 import { l as lineHeightContainer } from "./styles/lib/css/lineHeightContainer.css.mjs";
@@ -1215,6 +1216,26 @@ const FieldOverlay = ({ variant, ...restProps }) => /* @__PURE__ */ jsx(
     ...restProps
   }
 );
+const AvoidWidowIcon = ({
+  children,
+  iconPosition,
+  space = "xxsmall",
+  className
+}) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    component: "span",
+    paddingRight: iconPosition === "leading" ? space : void 0,
+    paddingLeft: iconPosition === "trailing" ? space : void 0,
+    className: [nowrap, className],
+    "aria-hidden": true,
+    children: [
+      iconPosition === "leading" ? children : void 0,
+      "⁠",
+      iconPosition === "trailing" ? children : void 0
+    ]
+  }
+);
 const validBleedComponents = ["div", "span"];
 const Bleed = ({
   space,
@@ -1449,6 +1470,7 @@ const ButtonText = ({
   loading,
   size: sizeProp,
   icon,
+  iconPosition = "leading",
   variant = "solid",
   tone: tone2,
   labelSpacing = true,
@@ -1489,17 +1511,26 @@ const ButtonText = ({
           size: size2,
           baseline: false,
           children: [
-            icon ? /* @__PURE__ */ jsx(
-              Box,
+            icon && iconPosition === "leading" ? /* @__PURE__ */ jsx(
+              AvoidWidowIcon,
               {
-                component: "span",
-                paddingRight: "xsmall",
+                iconPosition,
+                space: "xsmall",
                 className: shouldReducePaddingX || bleed ? null : negativeMargin("left", "xxsmall"),
                 children: icon
               }
             ) : null,
             children,
-            loading ? /* @__PURE__ */ jsx(ButtonLoader, {}) : null
+            loading ? /* @__PURE__ */ jsx(ButtonLoader, {}) : null,
+            !loading && icon && iconPosition === "trailing" ? /* @__PURE__ */ jsx(
+              AvoidWidowIcon,
+              {
+                iconPosition,
+                space: "xsmall",
+                className: shouldReducePaddingX || bleed ? null : negativeMargin("right", "xxsmall"),
+                children: icon
+              }
+            ) : null
           ]
         }
       )
@@ -1553,6 +1584,7 @@ const Button = forwardRef(
     size: size2,
     tone: tone2,
     icon,
+    iconPosition,
     bleedY,
     bleed,
     variant,
@@ -1619,6 +1651,7 @@ const Button = forwardRef(
               size: size2,
               loading,
               icon,
+              iconPosition,
               bleed,
               children
             }
@@ -1973,6 +2006,7 @@ const useLinkStyles = ({
   return clsx(
     base$2,
     linkStyles,
+    fontWeight.medium,
     showVisited ? [
       visitedLightMode[backgroundLightness.lightMode],
       visitedDarkMode[backgroundLightness.darkMode]
@@ -1986,25 +2020,40 @@ const useLinkStyles = ({
     hitArea === "large" && virtualTouchable()
   );
 };
+const TextLinkContent = ({
+  icon,
+  iconPosition = "leading",
+  children
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  icon && iconPosition === "leading" ? /* @__PURE__ */ jsx(AvoidWidowIcon, { iconPosition, children: icon }) : null,
+  children,
+  icon && iconPosition === "trailing" ? /* @__PURE__ */ jsx(AvoidWidowIcon, { iconPosition, children: icon }) : null
+] });
 const TextLink = forwardRef(
-  ({ weight, showVisited, hitArea, data, icon, children, ...restProps }, ref) => {
+  ({
+    weight,
+    showVisited,
+    hitArea,
+    data,
+    icon,
+    children,
+    iconPosition,
+    ...restProps
+  }, ref) => {
     const LinkComponent = useLinkComponent(ref);
     const classes = useLinkStyles({
       weight,
       showVisited,
       hitArea
     });
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       LinkComponent,
       {
         ref,
         ...restProps,
         className: classes,
         ...buildDataAttributes({ data, validateRestProps: false }),
-        children: [
-          icon ? /* @__PURE__ */ jsx(Box, { component: "span", paddingRight: "xxsmall", children: icon }) : null,
-          children
-        ]
+        children: /* @__PURE__ */ jsx(TextLinkContent, { icon, iconPosition, children })
       }
     );
   }
@@ -2024,6 +2073,7 @@ const TextLinkButton = ({
   "aria-describedby": ariaDescribedBy,
   tabIndex,
   icon,
+  iconPosition,
   ...restProps
 }) => {
   const buttonRef = useRef(null);
@@ -2042,7 +2092,7 @@ const TextLinkButton = ({
     },
     [buttonRef]
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Box,
     {
       ref: buttonRef,
@@ -2057,10 +2107,7 @@ const TextLinkButton = ({
       id,
       className: classes,
       ...buildDataAttributes({ data, validateRestProps: restProps }),
-      children: [
-        icon ? /* @__PURE__ */ jsx(Box, { component: "span", paddingRight: "xxsmall", children: icon }) : null,
-        children
-      ]
+      children: /* @__PURE__ */ jsx(TextLinkContent, { icon, iconPosition, children })
     }
   );
 };
@@ -2470,7 +2517,7 @@ const useToast = () => {
   );
 };
 export {
-  useBackgroundLightness as $,
+  resolveResponsiveProp as $,
   ActionsContext as A,
   BraidPortal as B,
   Column as C,
@@ -2492,19 +2539,20 @@ export {
   Stack as S,
   Text as T,
   Typography as U,
-  useDefaultTextProps as V,
-  flattenChildren as W,
-  DefaultTextPropsProvider as X,
-  iconSize as Y,
-  negativeMargin as Z,
-  resolveResponsiveProp as _,
+  AvoidWidowIcon as V,
+  useDefaultTextProps as W,
+  flattenChildren as X,
+  DefaultTextPropsProvider as Y,
+  iconSize as Z,
+  negativeMargin as _,
   useSpace as a,
-  validBleedComponents as a0,
-  buttonVariants as a1,
-  buttonIconVariants as a2,
-  validColumnsComponents as a3,
-  validInlineComponents as a4,
-  validStackComponents as a5,
+  useBackgroundLightness as a0,
+  validBleedComponents as a1,
+  buttonVariants as a2,
+  buttonIconVariants as a3,
+  validColumnsComponents as a4,
+  validInlineComponents as a5,
+  validStackComponents as a6,
   useResponsiveValue as b,
   Bleed as c,
   Button as d,

package/dist/Toggle.chunk.cjs

@@ -2435,7 +2435,7 @@ const FieldLabel = ({
   descriptionId,
   data
 }) => {
-  if (!label) {
+  if (!label && !description) {
     return null;
   }
   const labelEl = /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Text, { tone: disabled ? "secondary" : void 0, children: [
@@ -2447,14 +2447,14 @@ const FieldLabel = ({
     ] }) : null
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Stack, { space: "xsmall", data, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { component: "span", display: "flex", justifyContent: "spaceBetween", children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { component: "span", display: "flex", justifyContent: "spaceBetween", children: [
       htmlFor === false ? labelEl : /* @__PURE__ */ jsxRuntime.jsx("label", { id, htmlFor, children: labelEl }),
       tertiaryLabel ? /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Text, { children: [
         " ",
         tertiaryLabel
       ] }) : null
-    ] }),
-    description ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { paddingY: "xxsmall", children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { tone: "secondary", id: descriptionId, children: description }) }) : null
+    ] }) : null,
+    description ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { paddingTop: label ? "xxsmall" : void 0, paddingBottom: "xxsmall", children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { tone: "secondary", id: descriptionId, children: description }) }) : null
   ] });
 };
 const tones$1 = ["neutral", "critical", "positive"];
@@ -2516,6 +2516,7 @@ const Field = ({
   disabled,
   autoComplete,
   children,
+  description,
   message,
   secondaryMessage,
   reserveMessageSpace = false,
@@ -2535,10 +2536,10 @@ const Field = ({
     "Prefix must be a string"
   );
   const messageId = `${id}-message`;
-  const descriptionId = "description" in restProps && restProps.description ? `${id}-description` : void 0;
+  const descriptionId = description ? `${id}-description` : void 0;
   const fieldBackground = disabled ? { lightMode: "neutralSoft", darkMode: "neutral" } : { lightMode: "surface" };
   const hasValue = typeof value === "string" ? value.length > 0 : value != null;
-  const hasVisualLabel = "label" in restProps;
+  const hasVisualLabelOrDescription = "label" in restProps || description;
   const showSecondaryIcon = alwaysShowSecondaryIcon || secondaryIcon && hasValue;
   const overlays = /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2560,7 +2561,7 @@ const Field = ({
   ] });
   const fieldPadding = "small";
   return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Stack, { space: "xsmall", children: [
-    hasVisualLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+    hasVisualLabelOrDescription ? /* @__PURE__ */ jsxRuntime.jsx(
       FieldLabel,
       {
         id: labelId,
@@ -2569,7 +2570,7 @@ const Field = ({
         disabled,
         secondaryLabel: "secondaryLabel" in restProps ? restProps.secondaryLabel : void 0,
         tertiaryLabel: "tertiaryLabel" in restProps ? restProps.tertiaryLabel : void 0,
-        description: "description" in restProps ? restProps.description : void 0,
+        description,
         descriptionId
       }
     ) : null,
@@ -3703,6 +3704,7 @@ const ButtonLink = React.forwardRef(
     bleedY,
     bleed,
     icon: icon2,
+    iconPosition,
     loading,
     data,
     ...restProps
@@ -3748,6 +3750,7 @@ const ButtonLink = React.forwardRef(
               size,
               loading,
               icon: icon2,
+              iconPosition,
               bleed,
               children
             }
@@ -4610,6 +4613,7 @@ const Disclosure = ({
   space = "medium",
   children,
   data,
+  weight,
   ...restProps
 }) => {
   assert__default.default(
@@ -4620,6 +4624,9 @@ const Disclosure = ({
     typeof collapseLabel === "undefined" || typeof collapseLabel === "string",
     "'collapseLabel' must be a string"
   );
+  const textContext = React.useContext(ToastContext.TextContext);
+  const headingContext = React.useContext(ToastContext.HeadingContext);
+  const isInline = Boolean(textContext || headingContext);
   const { expanded, buttonProps, contentProps } = useDisclosure({
     id,
     ...restProps.expanded !== void 0 ? {
@@ -4629,27 +4636,43 @@ const Disclosure = ({
       onToggle: restProps.onToggle
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Box, { ...ToastContext.buildDataAttributes({ data, validateRestProps: restProps }), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { userSelect: "none", children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { children: /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.TextLinkButton, { hitArea: "large", ...buttonProps, children: [
-      expanded ? collapseLabel : expandLabel,
-      /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { component: "span", paddingLeft: "xxsmall", children: /* @__PURE__ */ jsxRuntime.jsx(
-        IconChevron,
-        {
-          direction: expanded ? "up" : "down",
-          alignY: "lowercase"
-        }
-      ) })
-    ] }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ToastContext.Box,
-      {
-        paddingTop: space,
-        display: expanded ? "block" : "none",
-        ...contentProps,
-        children
-      }
-    )
+  const trigger = /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.TextLinkButton, { hitArea: "large", weight, ...buttonProps, children: [
+    expanded ? collapseLabel : expandLabel,
+    /* @__PURE__ */ jsxRuntime.jsx(ToastContext.AvoidWidowIcon, { iconPosition: "trailing", children: /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { direction: expanded ? "up" : "down", alignY: "lowercase" }) })
   ] });
+  const component = isInline ? "span" : "div";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ToastContext.Box,
+    {
+      component,
+      display: isInline ? "inline" : void 0,
+      ...ToastContext.buildDataAttributes({ data, validateRestProps: restProps }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToastContext.Box,
+          {
+            component,
+            display: isInline ? "inline" : void 0,
+            userSelect: "none",
+            children: isInline ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              " ",
+              trigger
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { children: trigger })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToastContext.Box,
+          {
+            component,
+            paddingTop: space,
+            display: expanded ? "block" : "none",
+            ...contentProps,
+            children
+          }
+        )
+      ]
+    }
+  );
 };
 const validWidths = ["small", "medium", "large"];
 const validPositions = ["left", "right"];
@@ -5589,11 +5612,11 @@ const FieldGroup = ({
       "aria-required": required,
       ...ToastContext.buildDataAttributes({ data, validateRestProps: restProps }),
       children: /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Stack, { space, children: [
-        "label" in restProps && restProps.label ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { component: "legend", id: labelId, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "label" in restProps && restProps.label || description ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { component: "legend", id: labelId, children: /* @__PURE__ */ jsxRuntime.jsx(
           FieldLabel,
           {
             htmlFor: false,
-            label: restProps.label,
+            label: "label" in restProps ? restProps.label : void 0,
             secondaryLabel,
             tertiaryLabel,
             disabled,