braid-design-system 34.3.0 → 34.5.0

package/dist/lib/components/BraidTestProvider/BraidTestProvider.cjs

@@ -1,10 +1,8 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_BraidTestProviderContext = require('./BraidTestProviderContext.cjs');
-const require_BreakpointContext = require('../BraidProvider/BreakpointContext.cjs');
-const require_BraidProvider = require('../BraidProvider/BraidProvider.cjs');
-const require_index = require('../../themes/index.cjs');
+const require_BraidTestProviderContext = require("./BraidTestProviderContext.cjs");
+const require_BreakpointContext = require("../BraidProvider/BreakpointContext.cjs");
+const require_BraidProvider = require("../BraidProvider/BraidProvider.cjs");
+const require_index = require("../../themes/index.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/lib/components/BraidTestProvider/BraidTestProvider.tsx
 const noop = () => {};
 /**
@@ -34,6 +32,7 @@ if (typeof navigator !== "undefined" && navigator?.userAgent?.includes("jsdom"))
 	class MockIntersectionObserver {
 		root = null;
 		rootMargin = "";
+		scrollMargin = "";
 		thresholds = [];
 		observe = noop;
 		unobserve = noop;
@@ -53,6 +52,5 @@ const BraidTestProvider = ({ themeName = "wireframe", breakpoint = null, ...rest
 		})
 	})
 });
-
 //#endregion
-exports.BraidTestProvider = BraidTestProvider;
+exports.BraidTestProvider = BraidTestProvider;

package/dist/lib/components/BraidTestProvider/BraidTestProvider.d.cts

@@ -1,17 +1,11 @@
 import { Breakpoint } from "../../css/breakpoints.cjs";
 import { BraidProviderProps } from "../BraidProvider/BraidProvider.cjs";
 import { index_d_exports } from "../../themes/index.cjs";
-import * as react from "react";
-
 //#region src/lib/components/BraidTestProvider/BraidTestProvider.d.ts
 interface BraidTestProviderProps extends Omit<BraidProviderProps, 'theme' | 'styleBody'> {
   themeName?: keyof typeof index_d_exports;
   breakpoint?: Breakpoint | null;
 }
-declare const BraidTestProvider: ({
-  themeName,
-  breakpoint,
-  ...restProps
-}: BraidTestProviderProps) => react.JSX.Element;
+declare const BraidTestProvider: ({ themeName, breakpoint, ...restProps }: BraidTestProviderProps) => import("react").JSX.Element;
 //#endregion
 export { BraidTestProvider };

package/dist/lib/components/BraidTestProvider/BraidTestProvider.d.mts

@@ -1,17 +1,11 @@
 import { Breakpoint } from "../../css/breakpoints.mjs";
 import { BraidProviderProps } from "../BraidProvider/BraidProvider.mjs";
 import { index_d_exports } from "../../themes/index.mjs";
-import * as react from "react";
-
 //#region src/lib/components/BraidTestProvider/BraidTestProvider.d.ts
 interface BraidTestProviderProps extends Omit<BraidProviderProps, 'theme' | 'styleBody'> {
   themeName?: keyof typeof index_d_exports;
   breakpoint?: Breakpoint | null;
 }
-declare const BraidTestProvider: ({
-  themeName,
-  breakpoint,
-  ...restProps
-}: BraidTestProviderProps) => react.JSX.Element;
+declare const BraidTestProvider: ({ themeName, breakpoint, ...restProps }: BraidTestProviderProps) => import("react").JSX.Element;
 //#endregion
 export { BraidTestProvider };

package/dist/lib/components/BraidTestProvider/BraidTestProvider.mjs

@@ -3,7 +3,6 @@ import { breakpointContext } from "../BraidProvider/BreakpointContext.mjs";
 import { BraidProvider } from "../BraidProvider/BraidProvider.mjs";
 import { themes_exports } from "../../themes/index.mjs";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/lib/components/BraidTestProvider/BraidTestProvider.tsx
 const noop = () => {};
 /**
@@ -33,6 +32,7 @@ if (typeof navigator !== "undefined" && navigator?.userAgent?.includes("jsdom"))
 	class MockIntersectionObserver {
 		root = null;
 		rootMargin = "";
+		scrollMargin = "";
 		thresholds = [];
 		observe = noop;
 		unobserve = noop;
@@ -52,6 +52,5 @@ const BraidTestProvider = ({ themeName = "wireframe", breakpoint = null, ...rest
 		})
 	})
 });
-
 //#endregion
-export { BraidTestProvider };
+export { BraidTestProvider };

package/dist/lib/components/BraidTestProvider/BraidTestProviderContext.cjs

@@ -1,8 +1,4 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-let react = require("react");
-
 //#region src/lib/components/BraidTestProvider/BraidTestProviderContext.ts
-const BraidTestProviderContext = (0, react.createContext)(false);
-
+const BraidTestProviderContext = (0, require("react").createContext)(false);
 //#endregion
-exports.BraidTestProviderContext = BraidTestProviderContext;
+exports.BraidTestProviderContext = BraidTestProviderContext;

package/dist/lib/components/BraidTestProvider/BraidTestProviderContext.mjs

@@ -1,7 +1,5 @@
 import { createContext } from "react";
-
 //#region src/lib/components/BraidTestProvider/BraidTestProviderContext.ts
 const BraidTestProviderContext = createContext(false);
-
 //#endregion
-export { BraidTestProviderContext };
+export { BraidTestProviderContext };

package/dist/lib/components/Button/Button.cjs

@@ -1,20 +1,21 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_BackgroundContext = require('../Box/BackgroundContext.cjs');
-const require_buildDataAttributes = require('../private/buildDataAttributes.cjs');
-const require_Box = require('../Box/Box.cjs');
-const require_Text = require('../Text/Text.cjs');
-const require_virtualTouchable_css = require('../private/touchable/virtualTouchable.css.cjs');
-const require_ActionsContext = require('../Actions/ActionsContext.cjs');
-const require_negativeMargin = require('../../css/negativeMargin/negativeMargin.cjs');
-const require_Bleed = require('../Bleed/Bleed.cjs');
-const require_AvoidWidowIcon = require('../private/AvoidWidowIcon/AvoidWidowIcon.cjs');
-const require_FieldOverlay = require('../private/FieldOverlay/FieldOverlay.cjs');
-const require_Button_css = require('./Button.css.cjs');
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+const require_BackgroundContext = require("../Box/BackgroundContext.cjs");
+const require_buildDataAttributes = require("../private/buildDataAttributes.cjs");
+const require_Box = require("../Box/Box.cjs");
+const require_iconSlotSpace = require("../private/iconSlotSpace.cjs");
+const require_Text = require("../Text/Text.cjs");
+const require_virtualTouchable_css = require("../private/touchable/virtualTouchable.css.cjs");
+const require_ActionsContext = require("../Actions/ActionsContext.cjs");
+const require_negativeMargin = require("../../css/negativeMargin/negativeMargin.cjs");
+const require_Bleed = require("../Bleed/Bleed.cjs");
+const require_AvoidWidowIcon = require("../private/AvoidWidowIcon/AvoidWidowIcon.cjs");
+const require_FieldOverlay = require("../private/FieldOverlay/FieldOverlay.cjs");
+const require_ButtonLoader = require("./ButtonLoader.cjs");
+const require_Button_css = require("./Button.css.cjs");
 let assert = require("assert");
-assert = require_runtime.__toESM(assert);
+assert = require_runtime.__toESM(assert, 1);
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/lib/components/Button/Button.tsx
 const buttonVariants = [
 	"solid",
@@ -165,28 +166,6 @@ const variants = {
 		}
 	}
 };
-const ButtonLoader = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
-	"aria-hidden": true,
-	component: "span",
-	display: "inlineBlock",
-	children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-			component: "span",
-			className: require_Button_css.loadingDot,
-			children: "."
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-			component: "span",
-			className: require_Button_css.loadingDot,
-			children: "."
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-			component: "span",
-			className: require_Button_css.loadingDot,
-			children: "."
-		})
-	]
-});
 const transparentPaddingX = "small";
 const buttonRadius = "standard";
 const resolveToneAndVariant = ({ variant: variantProp, tone: toneProp }) => {
@@ -272,7 +251,11 @@ const ButtonText = ({ children, loading, size: sizeProp, icon, iconPosition = "l
 					children: icon
 				}) : null,
 				children,
-				loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ButtonLoader, {}) : null,
+				loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+					component: "span",
+					paddingLeft: require_iconSlotSpace.iconSlotSpace,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonLoader.ButtonLoader, {})
+				}) : null,
 				!loading && icon && iconPosition === "trailing" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvoidWidowIcon.AvoidWidowIcon, {
 					iconPosition,
 					className: shouldReducePaddingX || bleed ? null : require_negativeMargin.negativeMargin("right", "xxsmall"),
@@ -326,7 +309,7 @@ const ButtonContainer = ({ children, bleed, variant = "solid" }) => bleed && var
 	horizontal: transparentPaddingX,
 	children
 }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
-const Button = (0, react.forwardRef)(({ onClick, children, size, tone, icon, iconPosition, bleed, variant, loading, type = "button", id, tabIndex, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, data, ...restProps }, ref) => {
+const Button = (0, react.forwardRef)(({ onClick, children, size, tone, icon, iconPosition, bleed, variant, loading, type = "button", id, tabIndex, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-pressed": ariaPressed, data, ...restProps }, ref) => {
 	const { root, content } = useButtonStyles({
 		variant,
 		tone,
@@ -350,6 +333,7 @@ const Button = (0, react.forwardRef)(({ onClick, children, size, tone, icon, ico
 			"aria-expanded": ariaExpanded,
 			"aria-describedby": ariaDescribedBy,
 			"aria-label": ariaLabel,
+			"aria-pressed": ariaPressed,
 			onClick,
 			disabled: loading,
 			...root,
@@ -377,11 +361,10 @@ const Button = (0, react.forwardRef)(({ onClick, children, size, tone, icon, ico
 	});
 });
 Button.displayName = "Button";
-
 //#endregion
 exports.Button = Button;
 exports.ButtonContainer = ButtonContainer;
 exports.ButtonOverlays = ButtonOverlays;
 exports.ButtonText = ButtonText;
 exports.buttonVariants = buttonVariants;
-exports.useButtonStyles = useButtonStyles;
+exports.useButtonStyles = useButtonStyles;

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

@@ -1,13 +1,11 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_vars_css = require('../../themes/vars.css.cjs');
-const require_outlineStyle = require('../../css/outlineStyle.cjs');
-const require_colorModeStyle = require('../../css/colorModeStyle.cjs');
-const require_responsiveStyle = require('../../css/responsiveStyle.cjs');
+const require_vars_css = require("../../themes/vars.css.cjs");
+const require_outlineStyle = require("../../css/outlineStyle.cjs");
+const require_colorModeStyle = require("../../css/colorModeStyle.cjs");
+const require_responsiveStyle = require("../../css/responsiveStyle.cjs");
 let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
 let _vanilla_extract_css = require("@vanilla-extract/css");
 let _vanilla_extract_css_utils = require("@vanilla-extract/css-utils");
 let polished = require("polished");
-
 //#region src/lib/components/Button/Button.css.ts
 (0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/Button/Button.css.ts", "braid-design-system");
 const root = (0, _vanilla_extract_css.style)({
@@ -16,8 +14,8 @@ const root = (0, _vanilla_extract_css.style)({
 	outline: "none"
 }, "root");
 const forceActive = (0, _vanilla_extract_css.style)({}, "forceActive");
-const activeAnimation = (0, _vanilla_extract_css.style)({ selectors: { [`${root}:active &, ${forceActive}&`]: { transform: require_vars_css.vars.transform.touchable } } }, "activeAnimation");
-const activeOverlay = (0, _vanilla_extract_css.style)({ selectors: { [`${root}:active &, ${forceActive}&`]: { opacity: 1 } } }, "activeOverlay");
+const activeAnimation = (0, _vanilla_extract_css.style)({ selectors: { [`${root}:not(:disabled):active &, ${forceActive}&`]: { transform: require_vars_css.vars.transform.touchable } } }, "activeAnimation");
+const activeOverlay = (0, _vanilla_extract_css.style)({ selectors: { [`${root}:not(:disabled):active &, ${forceActive}&`]: { opacity: 1 } } }, "activeOverlay");
 const hoverOverlay = (0, _vanilla_extract_css.style)({ selectors: { [`${root}:hover:not(:disabled) &`]: { opacity: 1 } } }, "hoverOverlay");
 const { transition: outlineTransition, ...restOutlineStyles } = require_outlineStyle.outlineStyle(`${root}:focus-visible > &`);
 const focusRing = (0, _vanilla_extract_css.style)([{ transition: [require_vars_css.vars.transition.touchable, outlineTransition].join(", ") }, restOutlineStyles], "focusRing");
@@ -43,28 +41,6 @@ const padToMinHeight = (0, _vanilla_extract_css.style)({
 	paddingTop: capHeightToMinHeight,
 	paddingBottom: capHeightToMinHeight
 }, "padToMinHeight");
-const dot1 = (0, _vanilla_extract_css.keyframes)({
-	"14%": { opacity: 0 },
-	"15%,100%": { opacity: 1 }
-}, "dot1");
-const dot2 = (0, _vanilla_extract_css.keyframes)({
-	"29%": { opacity: 0 },
-	"30%,100%": { opacity: 1 }
-}, "dot2");
-const dot3 = (0, _vanilla_extract_css.keyframes)({
-	"44%": { opacity: 0 },
-	"45%,100%": { opacity: 1 }
-}, "dot3");
-const loadingDot = (0, _vanilla_extract_css.style)({
-	animationDuration: "1s",
-	animationIterationCount: "infinite",
-	opacity: 0,
-	selectors: {
-		[`&:nth-child(1)`]: { animationName: dot1 },
-		[`&:nth-child(2)`]: { animationName: dot2 },
-		[`&:nth-child(3)`]: { animationName: dot3 }
-	}
-}, "loadingDot");
 const invertedBackgroundsLightMode = (0, _vanilla_extract_css.styleVariants)({
 	soft: require_colorModeStyle.colorModeStyle({ lightMode: { background: (0, polished.rgba)("#fff", .1) } }),
 	hover: require_colorModeStyle.colorModeStyle({ lightMode: { background: (0, polished.rgba)("#fff", .15) } }),
@@ -76,7 +52,6 @@ const invertedBackgroundsDarkMode = (0, _vanilla_extract_css.styleVariants)({
 	active: require_colorModeStyle.colorModeStyle({ darkMode: { background: (0, polished.rgba)("#fff", .15) } })
 }, "invertedBackgroundsDarkMode");
 (0, _vanilla_extract_css_fileScope.endFileScope)();
-
 //#endregion
 exports.activeAnimation = activeAnimation;
 exports.activeOverlay = activeOverlay;
@@ -86,8 +61,7 @@ exports.forceActive = forceActive;
 exports.hoverOverlay = hoverOverlay;
 exports.invertedBackgroundsDarkMode = invertedBackgroundsDarkMode;
 exports.invertedBackgroundsLightMode = invertedBackgroundsLightMode;
-exports.loadingDot = loadingDot;
 exports.padToMinHeight = padToMinHeight;
 exports.root = root;
 exports.small = small;
-exports.standard = standard;
+exports.standard = standard;

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

@@ -3,10 +3,9 @@ import { outlineStyle } from "../../css/outlineStyle.mjs";
 import { colorModeStyle } from "../../css/colorModeStyle.mjs";
 import { responsiveStyle } from "../../css/responsiveStyle.mjs";
 import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
-import { createVar, keyframes, style, styleVariants } from "@vanilla-extract/css";
+import { createVar, style, styleVariants } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { rgba } from "polished";
-
 //#region src/lib/components/Button/Button.css.ts
 setFileScope("src/lib/components/Button/Button.css.ts", "braid-design-system");
 const root = style({
@@ -15,8 +14,8 @@ const root = style({
 	outline: "none"
 }, "root");
 const forceActive = style({}, "forceActive");
-const activeAnimation = style({ selectors: { [`${root}:active &, ${forceActive}&`]: { transform: vars.transform.touchable } } }, "activeAnimation");
-const activeOverlay = style({ selectors: { [`${root}:active &, ${forceActive}&`]: { opacity: 1 } } }, "activeOverlay");
+const activeAnimation = style({ selectors: { [`${root}:not(:disabled):active &, ${forceActive}&`]: { transform: vars.transform.touchable } } }, "activeAnimation");
+const activeOverlay = style({ selectors: { [`${root}:not(:disabled):active &, ${forceActive}&`]: { opacity: 1 } } }, "activeOverlay");
 const hoverOverlay = style({ selectors: { [`${root}:hover:not(:disabled) &`]: { opacity: 1 } } }, "hoverOverlay");
 const { transition: outlineTransition, ...restOutlineStyles } = outlineStyle(`${root}:focus-visible > &`);
 const focusRing = style([{ transition: [vars.transition.touchable, outlineTransition].join(", ") }, restOutlineStyles], "focusRing");
@@ -42,28 +41,6 @@ const padToMinHeight = style({
 	paddingTop: capHeightToMinHeight,
 	paddingBottom: capHeightToMinHeight
 }, "padToMinHeight");
-const dot1 = keyframes({
-	"14%": { opacity: 0 },
-	"15%,100%": { opacity: 1 }
-}, "dot1");
-const dot2 = keyframes({
-	"29%": { opacity: 0 },
-	"30%,100%": { opacity: 1 }
-}, "dot2");
-const dot3 = keyframes({
-	"44%": { opacity: 0 },
-	"45%,100%": { opacity: 1 }
-}, "dot3");
-const loadingDot = style({
-	animationDuration: "1s",
-	animationIterationCount: "infinite",
-	opacity: 0,
-	selectors: {
-		[`&:nth-child(1)`]: { animationName: dot1 },
-		[`&:nth-child(2)`]: { animationName: dot2 },
-		[`&:nth-child(3)`]: { animationName: dot3 }
-	}
-}, "loadingDot");
 const invertedBackgroundsLightMode = styleVariants({
 	soft: colorModeStyle({ lightMode: { background: rgba("#fff", .1) } }),
 	hover: colorModeStyle({ lightMode: { background: rgba("#fff", .15) } }),
@@ -75,6 +52,5 @@ const invertedBackgroundsDarkMode = styleVariants({
 	active: colorModeStyle({ darkMode: { background: rgba("#fff", .15) } })
 }, "invertedBackgroundsDarkMode");
 endFileScope();
-
 //#endregion
-export { activeAnimation, activeOverlay, bleedVerticallyToCapHeight, focusRing, forceActive, hoverOverlay, invertedBackgroundsDarkMode, invertedBackgroundsLightMode, loadingDot, padToMinHeight, root, small, standard };
+export { activeAnimation, activeOverlay, bleedVerticallyToCapHeight, focusRing, forceActive, hoverOverlay, invertedBackgroundsDarkMode, invertedBackgroundsLightMode, padToMinHeight, root, small, standard };

package/dist/lib/components/Button/Button.d.cts

@@ -1,9 +1,8 @@
 import { DataAttributeMap } from "../private/buildDataAttributes.cjs";
+import "../Box/Box.cjs";
 import { UseIconProps } from "../../hooks/useIcon/index.cjs";
 import { buttonTones } from "./buttonTones.cjs";
-import * as react from "react";
 import { AllHTMLAttributes, ReactElement, ReactNode } from "react";
-
 //#region src/lib/components/Button/Button.d.ts
 declare const buttonVariants: readonly ["solid", "ghost", "soft", "transparent"];
 declare const buttonSizes: readonly ["standard", "small"];
@@ -32,9 +31,10 @@ interface ButtonProps extends ButtonStyleProps {
   'aria-expanded'?: NativeButtonProps['aria-expanded'];
   'aria-describedby'?: NativeButtonProps['aria-describedby'];
   'aria-label'?: NativeButtonProps['aria-label'];
+  'aria-pressed'?: NativeButtonProps['aria-pressed'];
   tabIndex?: NativeButtonProps['tabIndex'];
   data?: DataAttributeMap;
 }
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion
-export { Button, ButtonProps, ButtonStyleProps };
+export { Button, ButtonProps, ButtonStyleProps, buttonSizes, buttonVariants };

package/dist/lib/components/Button/Button.d.mts

@@ -1,9 +1,8 @@
 import { DataAttributeMap } from "../private/buildDataAttributes.mjs";
+import "../Box/Box.mjs";
 import { UseIconProps } from "../../hooks/useIcon/index.mjs";
 import { buttonTones } from "./buttonTones.mjs";
-import * as react from "react";
 import { AllHTMLAttributes, ReactElement, ReactNode } from "react";
-
 //#region src/lib/components/Button/Button.d.ts
 declare const buttonVariants: readonly ["solid", "ghost", "soft", "transparent"];
 declare const buttonSizes: readonly ["standard", "small"];
@@ -32,9 +31,10 @@ interface ButtonProps extends ButtonStyleProps {
   'aria-expanded'?: NativeButtonProps['aria-expanded'];
   'aria-describedby'?: NativeButtonProps['aria-describedby'];
   'aria-label'?: NativeButtonProps['aria-label'];
+  'aria-pressed'?: NativeButtonProps['aria-pressed'];
   tabIndex?: NativeButtonProps['tabIndex'];
   data?: DataAttributeMap;
 }
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion
-export { Button, ButtonProps, ButtonStyleProps };
+export { Button, ButtonProps, ButtonStyleProps, buttonSizes, buttonVariants };

package/dist/lib/components/Button/Button.mjs

@@ -1,6 +1,7 @@
 import { useBackgroundLightness, useColorContrast } from "../Box/BackgroundContext.mjs";
 import buildDataAttributes_default from "../private/buildDataAttributes.mjs";
 import { Box } from "../Box/Box.mjs";
+import { iconSlotSpace } from "../private/iconSlotSpace.mjs";
 import { Text } from "../Text/Text.mjs";
 import { virtualTouchable } from "../private/touchable/virtualTouchable.css.mjs";
 import ActionsContext_default from "../Actions/ActionsContext.mjs";
@@ -8,11 +9,11 @@ import { negativeMargin } from "../../css/negativeMargin/negativeMargin.mjs";
 import { Bleed } from "../Bleed/Bleed.mjs";
 import { AvoidWidowIcon } from "../private/AvoidWidowIcon/AvoidWidowIcon.mjs";
 import { FieldOverlay } from "../private/FieldOverlay/FieldOverlay.mjs";
-import { activeAnimation, activeOverlay, bleedVerticallyToCapHeight, focusRing, forceActive, hoverOverlay, invertedBackgroundsDarkMode, invertedBackgroundsLightMode, loadingDot, padToMinHeight, root, small, standard } from "./Button.css.mjs";
+import { ButtonLoader } from "./ButtonLoader.mjs";
+import { activeAnimation, activeOverlay, bleedVerticallyToCapHeight, focusRing, forceActive, hoverOverlay, invertedBackgroundsDarkMode, invertedBackgroundsLightMode, padToMinHeight, root, small, standard } from "./Button.css.mjs";
 import assert from "assert";
 import { forwardRef, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/lib/components/Button/Button.tsx
 const buttonVariants = [
 	"solid",
@@ -163,28 +164,6 @@ const variants = {
 		}
 	}
 };
-const ButtonLoader = () => /* @__PURE__ */ jsxs(Box, {
-	"aria-hidden": true,
-	component: "span",
-	display: "inlineBlock",
-	children: [
-		/* @__PURE__ */ jsx(Box, {
-			component: "span",
-			className: loadingDot,
-			children: "."
-		}),
-		/* @__PURE__ */ jsx(Box, {
-			component: "span",
-			className: loadingDot,
-			children: "."
-		}),
-		/* @__PURE__ */ jsx(Box, {
-			component: "span",
-			className: loadingDot,
-			children: "."
-		})
-	]
-});
 const transparentPaddingX = "small";
 const buttonRadius = "standard";
 const resolveToneAndVariant = ({ variant: variantProp, tone: toneProp }) => {
@@ -270,7 +249,11 @@ const ButtonText = ({ children, loading, size: sizeProp, icon, iconPosition = "l
 					children: icon
 				}) : null,
 				children,
-				loading ? /* @__PURE__ */ jsx(ButtonLoader, {}) : null,
+				loading ? /* @__PURE__ */ jsx(Box, {
+					component: "span",
+					paddingLeft: iconSlotSpace,
+					children: /* @__PURE__ */ jsx(ButtonLoader, {})
+				}) : null,
 				!loading && icon && iconPosition === "trailing" ? /* @__PURE__ */ jsx(AvoidWidowIcon, {
 					iconPosition,
 					className: shouldReducePaddingX || bleed ? null : negativeMargin("right", "xxsmall"),
@@ -324,7 +307,7 @@ const ButtonContainer = ({ children, bleed, variant = "solid" }) => bleed && var
 	horizontal: transparentPaddingX,
 	children
 }) : /* @__PURE__ */ jsx(Fragment$1, { children });
-const Button = forwardRef(({ onClick, children, size, tone, icon, iconPosition, bleed, variant, loading, type = "button", id, tabIndex, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, data, ...restProps }, ref) => {
+const Button = forwardRef(({ onClick, children, size, tone, icon, iconPosition, bleed, variant, loading, type = "button", id, tabIndex, onKeyUp, onKeyDown, "aria-haspopup": ariaHasPopup, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-pressed": ariaPressed, data, ...restProps }, ref) => {
 	const { root, content } = useButtonStyles({
 		variant,
 		tone,
@@ -348,6 +331,7 @@ const Button = forwardRef(({ onClick, children, size, tone, icon, iconPosition,
 			"aria-expanded": ariaExpanded,
 			"aria-describedby": ariaDescribedBy,
 			"aria-label": ariaLabel,
+			"aria-pressed": ariaPressed,
 			onClick,
 			disabled: loading,
 			...root,
@@ -375,6 +359,5 @@ const Button = forwardRef(({ onClick, children, size, tone, icon, iconPosition,
 	});
 });
 Button.displayName = "Button";
-
 //#endregion
-export { Button, ButtonContainer, ButtonOverlays, ButtonText, buttonVariants, useButtonStyles };
+export { Button, ButtonContainer, ButtonOverlays, ButtonText, buttonVariants, useButtonStyles };

package/dist/lib/components/Button/Button.playroom.cjs

@@ -1,9 +1,7 @@
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_Button = require('./Button.cjs');
-const require_buttonTones = require('./buttonTones.cjs');
+const require_Button = require("./Button.cjs");
+const require_buttonTones = require("./buttonTones.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/lib/components/Button/Button.playroom.tsx
 const Button = (0, react.forwardRef)(({ variant, tone, ...restProps }, ref) => {
 	const isValidVariant = variant && require_Button.buttonVariants.indexOf(variant) > -1;
@@ -16,6 +14,5 @@ const Button = (0, react.forwardRef)(({ variant, tone, ...restProps }, ref) => {
 	});
 });
 Button.displayName = "Button";
-
 //#endregion
-exports.Button = Button;
+exports.Button = Button;

package/dist/lib/components/Button/Button.playroom.d.cts

@@ -1,7 +1,5 @@
 import { ButtonProps } from "./Button.cjs";
-import * as react from "react";
-
 //#region src/lib/components/Button/Button.playroom.d.ts
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { Button };

package/dist/lib/components/Button/Button.playroom.d.mts

@@ -1,7 +1,5 @@
 import { ButtonProps } from "./Button.mjs";
-import * as react from "react";
-
 //#region src/lib/components/Button/Button.playroom.d.ts
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { Button };

package/dist/lib/components/Button/Button.playroom.mjs

@@ -2,7 +2,6 @@ import { Button as Button$1, buttonVariants } from "./Button.mjs";
 import { buttonTones } from "./buttonTones.mjs";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/lib/components/Button/Button.playroom.tsx
 const Button = forwardRef(({ variant, tone, ...restProps }, ref) => {
 	const isValidVariant = variant && buttonVariants.indexOf(variant) > -1;
@@ -15,6 +14,5 @@ const Button = forwardRef(({ variant, tone, ...restProps }, ref) => {
 	});
 });
 Button.displayName = "Button";
-
 //#endregion
-export { Button };
+export { Button };

package/dist/lib/components/Button/ButtonLoader.cjs

@@ -0,0 +1,30 @@
+const require_Box = require("../Box/Box.cjs");
+const require_IconContainer = require("../icons/IconContainer.cjs");
+const require_ButtonLoader_css = require("./ButtonLoader.css.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/lib/components/Button/ButtonLoader.tsx
+const LoaderSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	xmlSpace: "preserve",
+	focusable: "false",
+	fill: "currentColor",
+	width: 16,
+	height: 16,
+	"aria-labelledby": titleId,
+	...props,
+	children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", {
+		id: titleId,
+		children: title
+	}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10a1 1 0 1 1-2 0c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8a1 1 0 1 1 0 2" })]
+});
+const ButtonLoader = (props) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconContainer.IconContainer, {
+	...props,
+	children: ({ className, ...svgProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		component: LoaderSvg,
+		className: [className, require_ButtonLoader_css.loading],
+		...svgProps
+	})
+});
+//#endregion
+exports.ButtonLoader = ButtonLoader;

package/dist/lib/components/Button/ButtonLoader.css.cjs

@@ -0,0 +1,9 @@
+let _vanilla_extract_css_fileScope = require("@vanilla-extract/css/fileScope");
+let _vanilla_extract_css = require("@vanilla-extract/css");
+//#region src/lib/components/Button/ButtonLoader.css.ts
+(0, _vanilla_extract_css_fileScope.setFileScope)("src/lib/components/Button/ButtonLoader.css.ts", "braid-design-system");
+const spin = (0, _vanilla_extract_css.keyframes)({ to: { transform: "rotate(360deg)" } }, "spin");
+const loading = (0, _vanilla_extract_css.style)({ animation: `${spin} 0.7s linear infinite` }, "loading");
+(0, _vanilla_extract_css_fileScope.endFileScope)();
+//#endregion
+exports.loading = loading;

package/dist/lib/components/Button/ButtonLoader.css.mjs

@@ -0,0 +1,8 @@
+import { endFileScope, setFileScope } from "@vanilla-extract/css/fileScope";
+import { keyframes, style } from "@vanilla-extract/css";
+//#region src/lib/components/Button/ButtonLoader.css.ts
+setFileScope("src/lib/components/Button/ButtonLoader.css.ts", "braid-design-system");
+const loading = style({ animation: `${keyframes({ to: { transform: "rotate(360deg)" } }, "spin")} 0.7s linear infinite` }, "loading");
+endFileScope();
+//#endregion
+export { loading };

package/dist/lib/components/Button/ButtonLoader.mjs

@@ -0,0 +1,30 @@
+import { Box } from "../Box/Box.mjs";
+import { IconContainer } from "../icons/IconContainer.mjs";
+import { loading } from "./ButtonLoader.css.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/components/Button/ButtonLoader.tsx
+const LoaderSvg = ({ title, titleId, ...props }) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	xmlSpace: "preserve",
+	focusable: "false",
+	fill: "currentColor",
+	width: 16,
+	height: 16,
+	"aria-labelledby": titleId,
+	...props,
+	children: [title ? /* @__PURE__ */ jsx("title", {
+		id: titleId,
+		children: title
+	}) : null, /* @__PURE__ */ jsx("path", { d: "M12 22C6.486 22 2 17.514 2 12S6.486 2 12 2s10 4.486 10 10a1 1 0 1 1-2 0c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8a1 1 0 1 1 0 2" })]
+});
+const ButtonLoader = (props) => /* @__PURE__ */ jsx(IconContainer, {
+	...props,
+	children: ({ className, ...svgProps }) => /* @__PURE__ */ jsx(Box, {
+		component: LoaderSvg,
+		className: [className, loading],
+		...svgProps
+	})
+});
+//#endregion
+export { ButtonLoader };