@spark-web/button 5.6.0-rc.0 → 5.6.0

package/CHANGELOG.md

@@ -1,22 +1,66 @@
 # @spark-web/button
 
-## 5.6.0-rc.0
+## 5.6.0
 
 ### Minor Changes
 
-- update react version and other packages
+- [#667](https://github.com/brighte-labs/spark-web/pull/667)
+  [`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)
+  Thanks [@Leo704099](https://github.com/Leo704099)! - Support react 17 to 19
 
 ### Patch Changes
 
-- Updated dependencies []:
-  - @spark-web/spinner@5.1.0-rc.0
-  - @spark-web/theme@5.12.0-rc.0
-  - @spark-web/utils@5.1.0-rc.0
-  - @spark-web/a11y@5.3.0-rc.0
-  - @spark-web/icon@5.1.0-rc.0
-  - @spark-web/link@5.1.0-rc.0
-  - @spark-web/text@5.3.0-rc.0
-  - @spark-web/box@6.0.0-rc.0
+- Updated dependencies
+  [[`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)]:
+  - @spark-web/spinner@5.1.0
+  - @spark-web/theme@5.13.0
+  - @spark-web/utils@5.1.0
+  - @spark-web/a11y@5.3.0
+  - @spark-web/icon@5.1.0
+  - @spark-web/link@5.1.0
+  - @spark-web/text@5.3.0
+  - @spark-web/box@6.0.0
+
+## 5.5.3
+
+### Patch Changes
+
+- [#704](https://github.com/brighte-labs/spark-web/pull/704)
+  [`67ad8de`](https://github.com/brighte-labs/spark-web/commit/67ad8de8ce99bedb733293bbb23d554ae48a9f1f)
+  Thanks [@mkt-brighte](https://github.com/mkt-brighte)! - Support bravo theme
+  for button component
+
+- Updated dependencies
+  [[`67ad8de`](https://github.com/brighte-labs/spark-web/commit/67ad8de8ce99bedb733293bbb23d554ae48a9f1f)]:
+  - @spark-web/theme@5.12.4
+
+## 5.5.2
+
+### Patch Changes
+
+- [#698](https://github.com/brighte-labs/spark-web/pull/698)
+  [`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)
+  Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Bump version
+
+- Updated dependencies
+  [[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)]:
+  - @spark-web/box@5.2.2
+  - @spark-web/link@5.0.2
+  - @spark-web/text@5.2.3
+  - @spark-web/theme@5.12.1
+
+## 5.5.1
+
+### Patch Changes
+
+- [#693](https://github.com/brighte-labs/spark-web/pull/693)
+  [`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)
+  Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Add Bravo theme
+
+- Updated dependencies
+  [[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
+  - @spark-web/theme@5.12.0
+  - @spark-web/text@5.2.2
 
 ## 5.5.0
 

package/dist/declarations/src/base-button.d.ts

@@ -1,7 +1,7 @@
 import type { BoxProps } from '@spark-web/box';
 import type { MouseEvent as ReactMouseEvent } from 'react';
 import type { NativeButtonProps } from "./types.js";
-export declare type BaseButtonProps = NativeButtonProps & Partial<BoxProps>;
+export type BaseButtonProps = NativeButtonProps & Partial<BoxProps>;
 export declare const BaseButton: import("react").ForwardRefExoticComponent<NativeButtonProps & Partial<BoxProps> & import("react").RefAttributes<HTMLButtonElement>>;
 /**
  * handle "disabled" behaviour w/o disabling buttons

package/dist/declarations/src/button-link.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import type { LinkComponentProps } from '@spark-web/link';
 import type { CommonButtonProps } from "./types.js";
-export declare type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
+export type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
 /** The appearance of a `Button`, with the semantics of a link. */
-export declare const ButtonLink: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "a">(props: {
+export declare const ButtonLink: <Comp extends import("react").ElementType = "a">(props: {
     as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "text" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
-} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
+} & (Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps)) => import("react").ReactElement;

package/dist/declarations/src/button.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { CommonButtonProps, NativeButtonProps } from "./types.js";
-export declare type ButtonProps = CommonButtonProps & {
+export type ButtonProps = CommonButtonProps & {
     /**
      * Identifies the element (or elements) whose contents or presence
      * are controlled by the current element.
@@ -22,6 +21,8 @@ export declare type ButtonProps = CommonButtonProps & {
     size?: CommonButtonProps['size'];
     /** Provide an alternate type if the button is within a form. */
     type?: 'button' | 'submit' | 'reset';
+    /** When true, the button will be filled depending on the variant. */
+    filled?: boolean;
 };
 /**
  * Buttons are used to initialize an action, their label should express what

package/dist/declarations/src/types.d.ts

@@ -4,14 +4,14 @@ import type { IconProps } from '@spark-web/icon';
 import type { DataAttributeMap } from '@spark-web/utils/internal';
 import type { ButtonHTMLAttributes, ReactElement } from 'react';
 import type { mapTokens } from "./utils.js";
-export declare type ButtonSize = keyof (typeof mapTokens)[keyof typeof mapTokens];
-export declare type ButtonProminence = 'high' | 'low' | 'none';
-export declare type ButtonTone = Exclude<BackgroundTone, 'disabled'>;
-declare type ChildrenWithText = {
+export type ButtonSize = keyof (typeof mapTokens)[keyof typeof mapTokens];
+export type ButtonProminence = 'high' | 'low' | 'none';
+export type ButtonTone = Exclude<BackgroundTone, 'disabled'>;
+type ChildrenWithText = {
     label?: never;
     children: string | number | [ReactElement<IconProps>, string | number] | [string | number, ReactElement<IconProps>];
 };
-declare type IconOnly = {
+type IconOnly = {
     /**
      * Implicit label for buttons only required for icon-only buttons
      * for accessibility reasons.
@@ -19,15 +19,15 @@ declare type IconOnly = {
     label: string;
     children: ReactElement<IconProps>;
 };
-export declare type ButtonChildrenProps = ChildrenWithText | IconOnly;
-export declare type NativeButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
-export declare type CommonButtonProps = {
+export type ButtonChildrenProps = ChildrenWithText | IconOnly;
+export type NativeButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export type CommonButtonProps = {
     /** Sets data attributes for the element. */
     data?: DataAttributeMap;
     /** Unique identifier for the underlying element. */
     id?: string;
 } & ButtonStyleProps & ButtonChildrenProps;
-export declare type ButtonStyleProps = {
+export type ButtonStyleProps = {
     /** Sets override styles for the button. */
     css?: CSSObject;
     /** Sets the visual prominence of the button. */
@@ -38,5 +38,7 @@ export declare type ButtonStyleProps = {
     size?: ButtonSize;
     /** Sets the tone of the button. */
     tone?: ButtonTone;
+    /** Sets the background color of the button. */
+    filled?: boolean;
 };
 export {};

package/dist/declarations/src/use-button-styles.d.ts

@@ -7,7 +7,7 @@ import type { ButtonStyleProps } from "./types.js";
  * underlying `Box` component, and the second item is a CSS object that can be
  * passed to Emotion's `css` function.
  */
-export declare function useButtonStyles({ iconOnly, prominence, rounded, size, tone, }: UseButtonStylesProps): readonly [{
+export declare function useButtonStyles({ iconOnly, prominence, rounded, size, tone, filled, }: UseButtonStylesProps): readonly [{
     readonly alignItems: "center";
     readonly background: string | number | undefined;
     readonly border: import("@spark-web/theme").ResponsiveProp<string> | undefined;
@@ -47,29 +47,20 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
             };
         };
         readonly ':focus': {
+            boxShadow: string;
+            outline: string;
+            outlineOffset: string;
+        } | {
+            "[data-brighte-focus-visible] &": {
+                boxShadow: string;
+            };
             outline: string;
             outlineOffset: string;
         } | {
-            border?: string | undefined;
-            outline?: string | undefined;
-            /**
-             * useButtonStyles
-             *
-             * Custom hook for styling buttons and certain links.
-             * Returns a tuple where the first item is an object of props to spread onto the
-             * underlying `Box` component, and the second item is a CSS object that can be
-             * passed to Emotion's `css` function.
-             */
-            outlineOffset?: string | undefined;
-            /**
-             * useButtonStyles
-             *
-             * Custom hook for styling buttons and certain links.
-             * Returns a tuple where the first item is an object of props to spread onto the
-             * underlying `Box` component, and the second item is a CSS object that can be
-             * passed to Emotion's `css` function.
-             */
-            boxShadow?: string | undefined;
+            border?: string;
+            outline?: string;
+            outlineOffset?: string;
+            boxShadow?: string;
         };
     };
     readonly '&[aria-disabled=true]': {
@@ -85,6 +76,9 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
             outline: string;
             outlineOffset: string;
         } | {
+            "[data-brighte-focus-visible] &": {
+                boxShadow: string;
+            };
             outline: string;
             outlineOffset: string;
         };
@@ -93,9 +87,9 @@ export declare function useButtonStyles({ iconOnly, prominence, rounded, size, t
     readonly transitionTimingFunction: string;
     readonly transitionDuration: string;
 }, {
-    readonly fontWeight: "medium" | "light" | "bold" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
+    readonly fontWeight: "bold" | "medium" | "light" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
 }];
-export declare type UseButtonStylesProps = Omit<Required<ButtonStyleProps>, 'css' | 'rounded'> & Partial<Pick<ButtonStyleProps, 'rounded'>> & {
+export type UseButtonStylesProps = Omit<Required<ButtonStyleProps>, 'css' | 'rounded' | 'filled'> & Partial<Pick<ButtonStyleProps, 'rounded' | 'filled'>> & {
     /** Whether the children of the button is a single icon or not. */
     iconOnly: boolean;
 };

package/dist/declarations/src/utils.d.ts

@@ -2,29 +2,30 @@ import type { BoxProps } from '@spark-web/box';
 import type { ForegroundTone } from '@spark-web/text';
 import type { SparkTheme } from '@spark-web/theme';
 import type { ButtonProminence, ButtonTone } from "./types.js";
-declare type BaseButtonStyles = {
+type BaseButtonStyles = {
     background: BoxProps['background'];
+    backgroundFill?: BoxProps['background'];
     border?: BoxProps['border'];
     borderWidth?: BoxProps['borderWidth'];
     textTone?: ForegroundTone;
 };
-declare type HoverButtonStyles = {
+type HoverButtonStyles = {
     backgroundHover: keyof SparkTheme['backgroundInteractions'];
     borderHover?: keyof SparkTheme['border']['color'];
     textToneHover?: keyof SparkTheme['color']['foreground'];
 };
-declare type ActiveButtonStyles = {
+type ActiveButtonStyles = {
     backgroundActive: keyof SparkTheme['backgroundInteractions'];
     borderActive?: keyof SparkTheme['border']['color'];
     textToneActive?: keyof SparkTheme['color']['foreground'];
 };
-declare type DisabledButtonStyles = {
+type DisabledButtonStyles = {
     backgroundDisabled: keyof SparkTheme['color']['background'];
     borderDisabled?: keyof SparkTheme['border']['color'];
     textToneDisabled: keyof SparkTheme['color']['foreground'];
 };
-declare type ButtonStyles = BaseButtonStyles & HoverButtonStyles & ActiveButtonStyles & DisabledButtonStyles;
-declare type Variants = Record<ButtonProminence, Record<ButtonTone, ButtonStyles | undefined>>;
+type ButtonStyles = BaseButtonStyles & HoverButtonStyles & ActiveButtonStyles & DisabledButtonStyles;
+type Variants = Record<ButtonProminence, Record<ButtonTone, ButtonStyles | undefined>>;
 export declare const variants: Variants;
 export declare const mapTokens: {
     readonly fontSize: {

package/dist/spark-web-button.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "./declarations/src/index";
+export * from "./declarations/src/index.js";
 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJ1dHRvbi5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

package/dist/spark-web-button.cjs.dev.js

@@ -10,9 +10,9 @@ var react = require('react');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react$1 = require('@emotion/react');
-var a11y = require('@spark-web/a11y');
 var spinner = require('@spark-web/spinner');
 var text = require('@spark-web/text');
+var a11y = require('@spark-web/a11y');
 var theme = require('@spark-web/theme');
 var link = require('@spark-web/link');
 var ts = require('@spark-web/utils/ts');
@@ -93,7 +93,8 @@ var variants = {
     primary: _objectSpread({
       background: 'primary',
       backgroundHover: 'primaryHover',
-      backgroundActive: 'primaryActive'
+      backgroundActive: 'primaryActive',
+      textTone: 'dark'
     }, highDisabledStyles),
     secondary: _objectSpread({
       background: 'secondary',
@@ -122,14 +123,20 @@ var variants = {
       background: 'primaryDark',
       backgroundHover: 'primaryHover',
       backgroundActive: 'primaryActive'
+    }, highDisabledStyles),
+    dark: _objectSpread({
+      background: 'dark',
+      backgroundHover: 'darkHover',
+      backgroundActive: 'darkActive'
     }, highDisabledStyles)
   },
   low: {
     primary: _objectSpread({
       background: 'surface',
+      backgroundFill: 'primarySoft',
       border: 'primary',
       borderWidth: 'large',
-      textTone: 'primary',
+      textTone: 'dark',
       backgroundHover: 'none',
       borderHover: 'primaryHover',
       textToneHover: 'primaryHover',
@@ -185,6 +192,16 @@ var variants = {
       backgroundActive: 'none',
       borderActive: 'primaryActive',
       textToneActive: 'primaryActive'
+    }, lowDisabledAltStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      backgroundHover: 'none',
+      backgroundActive: 'none',
+      textTone: 'dark',
+      borderWidth: 'large',
+      border: 'dark',
+      borderHover: 'darkHover',
+      borderActive: 'darkActive'
     }, lowDisabledAltStyles)
   },
   none: {
@@ -235,6 +252,12 @@ var variants = {
       textTone: 'primaryActive',
       backgroundHover: 'primaryLowHover',
       backgroundActive: 'primaryLowActive'
+    }, noneDisabledStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      textTone: 'dark',
+      backgroundHover: 'darkLowHover',
+      backgroundActive: 'darkLowActive'
     }, noneDisabledStyles)
   }
 };
@@ -276,7 +299,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
         })
       });
     }
-    if ( /*#__PURE__*/react.isValidElement(child)) {
+    if (/*#__PURE__*/react.isValidElement(child)) {
       return jsxRuntime.jsx(HiddenWhenLoading, {
         isLoading: isLoading,
         children: /*#__PURE__*/react.cloneElement(child, {
@@ -317,13 +340,15 @@ function HiddenWhenLoading(_ref2) {
  * passed to Emotion's `css` function.
  */
 function useButtonStyles(_ref) {
-  var _theme$components$but, _theme$components, _theme$components2;
+  var _variant$backgroundFi, _theme$components$but, _theme$components, _theme$components2;
   var iconOnly = _ref.iconOnly,
     prominence = _ref.prominence,
     _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     size = _ref.size,
-    tone = _ref.tone;
+    tone = _ref.tone,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled;
   var theme$1 = theme.useTheme();
   var focusRingStyles = a11y.useFocusRing({
     tone: tone,
@@ -341,7 +366,7 @@ function useButtonStyles(_ref) {
   };
   return [{
     alignItems: 'center',
-    background: variant === null || variant === void 0 ? void 0 : variant.background,
+    background: filled ? (_variant$backgroundFi = variant === null || variant === void 0 ? void 0 : variant.backgroundFill) !== null && _variant$backgroundFi !== void 0 ? _variant$backgroundFi : variant === null || variant === void 0 ? void 0 : variant.background : variant === null || variant === void 0 ? void 0 : variant.background,
     border: variant === null || variant === void 0 ? void 0 : variant.border,
     borderWidth: variant === null || variant === void 0 ? void 0 : variant.borderWidth,
     borderRadius: rounded ? 'full' : isLarge ? 'medium' : 'small',
@@ -394,7 +419,7 @@ function useButtonStyles(_ref) {
   }];
 }
 
-var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
+var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type", "filled"];
 /**
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
@@ -420,6 +445,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
     _ref$tone = _ref.tone,
     tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
     type = _ref.type,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled,
     props = _objectWithoutProperties(_ref, _excluded$1);
   var iconOnly = Boolean(props.label);
   var _useButtonStyles = useButtonStyles({
@@ -427,7 +454,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       rounded: rounded,
       size: size,
       tone: tone,
-      prominence: prominence
+      prominence: prominence,
+      filled: filled
     }),
     _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
     boxProps = _useButtonStyles2[0],
@@ -460,7 +488,7 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
 Button.displayName = 'Button';
 function Loading(_ref2) {
   var tone = _ref2.tone;
-  return jsxRuntime.jsxs(box.Box, {
+  return jsxRuntime.jsx(box.Box, {
     as: "span",
     position: "absolute",
     top: 0,
@@ -470,12 +498,10 @@ function Loading(_ref2) {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    children: [jsxRuntime.jsx(a11y.VisuallyHidden, {
-      children: "button loading indicator"
-    }), jsxRuntime.jsx(spinner.Spinner, {
+    children: jsxRuntime.jsx(spinner.Spinner, {
       size: "xsmall",
       tone: tone
-    })]
+    })
   });
 }
 

package/dist/spark-web-button.cjs.prod.js

@@ -10,9 +10,9 @@ var react = require('react');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react$1 = require('@emotion/react');
-var a11y = require('@spark-web/a11y');
 var spinner = require('@spark-web/spinner');
 var text = require('@spark-web/text');
+var a11y = require('@spark-web/a11y');
 var theme = require('@spark-web/theme');
 var link = require('@spark-web/link');
 var ts = require('@spark-web/utils/ts');
@@ -93,7 +93,8 @@ var variants = {
     primary: _objectSpread({
       background: 'primary',
       backgroundHover: 'primaryHover',
-      backgroundActive: 'primaryActive'
+      backgroundActive: 'primaryActive',
+      textTone: 'dark'
     }, highDisabledStyles),
     secondary: _objectSpread({
       background: 'secondary',
@@ -122,14 +123,20 @@ var variants = {
       background: 'primaryDark',
       backgroundHover: 'primaryHover',
       backgroundActive: 'primaryActive'
+    }, highDisabledStyles),
+    dark: _objectSpread({
+      background: 'dark',
+      backgroundHover: 'darkHover',
+      backgroundActive: 'darkActive'
     }, highDisabledStyles)
   },
   low: {
     primary: _objectSpread({
       background: 'surface',
+      backgroundFill: 'primarySoft',
       border: 'primary',
       borderWidth: 'large',
-      textTone: 'primary',
+      textTone: 'dark',
       backgroundHover: 'none',
       borderHover: 'primaryHover',
       textToneHover: 'primaryHover',
@@ -185,6 +192,16 @@ var variants = {
       backgroundActive: 'none',
       borderActive: 'primaryActive',
       textToneActive: 'primaryActive'
+    }, lowDisabledAltStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      backgroundHover: 'none',
+      backgroundActive: 'none',
+      textTone: 'dark',
+      borderWidth: 'large',
+      border: 'dark',
+      borderHover: 'darkHover',
+      borderActive: 'darkActive'
     }, lowDisabledAltStyles)
   },
   none: {
@@ -235,6 +252,12 @@ var variants = {
       textTone: 'primaryActive',
       backgroundHover: 'primaryLowHover',
       backgroundActive: 'primaryLowActive'
+    }, noneDisabledStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      textTone: 'dark',
+      backgroundHover: 'darkLowHover',
+      backgroundActive: 'darkLowActive'
     }, noneDisabledStyles)
   }
 };
@@ -276,7 +299,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
         })
       });
     }
-    if ( /*#__PURE__*/react.isValidElement(child)) {
+    if (/*#__PURE__*/react.isValidElement(child)) {
       return jsxRuntime.jsx(HiddenWhenLoading, {
         isLoading: isLoading,
         children: /*#__PURE__*/react.cloneElement(child, {
@@ -317,13 +340,15 @@ function HiddenWhenLoading(_ref2) {
  * passed to Emotion's `css` function.
  */
 function useButtonStyles(_ref) {
-  var _theme$components$but, _theme$components, _theme$components2;
+  var _variant$backgroundFi, _theme$components$but, _theme$components, _theme$components2;
   var iconOnly = _ref.iconOnly,
     prominence = _ref.prominence,
     _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     size = _ref.size,
-    tone = _ref.tone;
+    tone = _ref.tone,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled;
   var theme$1 = theme.useTheme();
   var focusRingStyles = a11y.useFocusRing({
     tone: tone,
@@ -341,7 +366,7 @@ function useButtonStyles(_ref) {
   };
   return [{
     alignItems: 'center',
-    background: variant === null || variant === void 0 ? void 0 : variant.background,
+    background: filled ? (_variant$backgroundFi = variant === null || variant === void 0 ? void 0 : variant.backgroundFill) !== null && _variant$backgroundFi !== void 0 ? _variant$backgroundFi : variant === null || variant === void 0 ? void 0 : variant.background : variant === null || variant === void 0 ? void 0 : variant.background,
     border: variant === null || variant === void 0 ? void 0 : variant.border,
     borderWidth: variant === null || variant === void 0 ? void 0 : variant.borderWidth,
     borderRadius: rounded ? 'full' : isLarge ? 'medium' : 'small',
@@ -394,7 +419,7 @@ function useButtonStyles(_ref) {
   }];
 }
 
-var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
+var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type", "filled"];
 /**
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
@@ -420,6 +445,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
     _ref$tone = _ref.tone,
     tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
     type = _ref.type,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled,
     props = _objectWithoutProperties(_ref, _excluded$1);
   var iconOnly = Boolean(props.label);
   var _useButtonStyles = useButtonStyles({
@@ -427,7 +454,8 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       rounded: rounded,
       size: size,
       tone: tone,
-      prominence: prominence
+      prominence: prominence,
+      filled: filled
     }),
     _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
     boxProps = _useButtonStyles2[0],
@@ -460,7 +488,7 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
 Button.displayName = 'Button';
 function Loading(_ref2) {
   var tone = _ref2.tone;
-  return jsxRuntime.jsxs(box.Box, {
+  return jsxRuntime.jsx(box.Box, {
     as: "span",
     position: "absolute",
     top: 0,
@@ -470,12 +498,10 @@ function Loading(_ref2) {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    children: [jsxRuntime.jsx(a11y.VisuallyHidden, {
-      children: "button loading indicator"
-    }), jsxRuntime.jsx(spinner.Spinner, {
+    children: jsxRuntime.jsx(spinner.Spinner, {
       size: "xsmall",
       tone: tone
-    })]
+    })
   });
 }
 

package/dist/spark-web-button.esm.js

@@ -6,9 +6,9 @@ import { forwardRef, useRef, useCallback, Children, isValidElement, cloneElement
 import { jsx, jsxs } from '@emotion/react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import { css } from '@emotion/react';
-import { useFocusRing, VisuallyHidden } from '@spark-web/a11y';
 import { Spinner } from '@spark-web/spinner';
 import { Text } from '@spark-web/text';
+import { useFocusRing } from '@spark-web/a11y';
 import { useTheme } from '@spark-web/theme';
 import { useLinkComponent } from '@spark-web/link';
 import { forwardRefWithAs } from '@spark-web/utils/ts';
@@ -89,7 +89,8 @@ var variants = {
     primary: _objectSpread({
       background: 'primary',
       backgroundHover: 'primaryHover',
-      backgroundActive: 'primaryActive'
+      backgroundActive: 'primaryActive',
+      textTone: 'dark'
     }, highDisabledStyles),
     secondary: _objectSpread({
       background: 'secondary',
@@ -118,14 +119,20 @@ var variants = {
       background: 'primaryDark',
       backgroundHover: 'primaryHover',
       backgroundActive: 'primaryActive'
+    }, highDisabledStyles),
+    dark: _objectSpread({
+      background: 'dark',
+      backgroundHover: 'darkHover',
+      backgroundActive: 'darkActive'
     }, highDisabledStyles)
   },
   low: {
     primary: _objectSpread({
       background: 'surface',
+      backgroundFill: 'primarySoft',
       border: 'primary',
       borderWidth: 'large',
-      textTone: 'primary',
+      textTone: 'dark',
       backgroundHover: 'none',
       borderHover: 'primaryHover',
       textToneHover: 'primaryHover',
@@ -181,6 +188,16 @@ var variants = {
       backgroundActive: 'none',
       borderActive: 'primaryActive',
       textToneActive: 'primaryActive'
+    }, lowDisabledAltStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      backgroundHover: 'none',
+      backgroundActive: 'none',
+      textTone: 'dark',
+      borderWidth: 'large',
+      border: 'dark',
+      borderHover: 'darkHover',
+      borderActive: 'darkActive'
     }, lowDisabledAltStyles)
   },
   none: {
@@ -231,6 +248,12 @@ var variants = {
       textTone: 'primaryActive',
       backgroundHover: 'primaryLowHover',
       backgroundActive: 'primaryLowActive'
+    }, noneDisabledStyles),
+    dark: _objectSpread({
+      background: 'surface',
+      textTone: 'dark',
+      backgroundHover: 'darkLowHover',
+      backgroundActive: 'darkLowActive'
     }, noneDisabledStyles)
   }
 };
@@ -272,7 +295,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
         })
       });
     }
-    if ( /*#__PURE__*/isValidElement(child)) {
+    if (/*#__PURE__*/isValidElement(child)) {
       return jsx(HiddenWhenLoading, {
         isLoading: isLoading,
         children: /*#__PURE__*/cloneElement(child, {
@@ -313,13 +336,15 @@ function HiddenWhenLoading(_ref2) {
  * passed to Emotion's `css` function.
  */
 function useButtonStyles(_ref) {
-  var _theme$components$but, _theme$components, _theme$components2;
+  var _variant$backgroundFi, _theme$components$but, _theme$components, _theme$components2;
   var iconOnly = _ref.iconOnly,
     prominence = _ref.prominence,
     _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
     size = _ref.size,
-    tone = _ref.tone;
+    tone = _ref.tone,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled;
   var theme = useTheme();
   var focusRingStyles = useFocusRing({
     tone: tone,
@@ -337,7 +362,7 @@ function useButtonStyles(_ref) {
   };
   return [{
     alignItems: 'center',
-    background: variant === null || variant === void 0 ? void 0 : variant.background,
+    background: filled ? (_variant$backgroundFi = variant === null || variant === void 0 ? void 0 : variant.backgroundFill) !== null && _variant$backgroundFi !== void 0 ? _variant$backgroundFi : variant === null || variant === void 0 ? void 0 : variant.background : variant === null || variant === void 0 ? void 0 : variant.background,
     border: variant === null || variant === void 0 ? void 0 : variant.border,
     borderWidth: variant === null || variant === void 0 ? void 0 : variant.borderWidth,
     borderRadius: rounded ? 'full' : isLarge ? 'medium' : 'small',
@@ -390,7 +415,7 @@ function useButtonStyles(_ref) {
   }];
 }
 
-var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type"];
+var _excluded$1 = ["aria-controls", "aria-describedby", "aria-expanded", "aria-label", "data", "disabled", "id", "loading", "onClick", "css", "rounded", "prominence", "size", "tone", "type", "filled"];
 /**
  * Buttons are used to initialize an action, their label should express what
  * action will occur when the user interacts with it.
@@ -416,6 +441,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
     _ref$tone = _ref.tone,
     tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
     type = _ref.type,
+    _ref$filled = _ref.filled,
+    filled = _ref$filled === void 0 ? false : _ref$filled,
     props = _objectWithoutProperties(_ref, _excluded$1);
   var iconOnly = Boolean(props.label);
   var _useButtonStyles = useButtonStyles({
@@ -423,7 +450,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       rounded: rounded,
       size: size,
       tone: tone,
-      prominence: prominence
+      prominence: prominence,
+      filled: filled
     }),
     _useButtonStyles2 = _slicedToArray(_useButtonStyles, 3),
     boxProps = _useButtonStyles2[0],
@@ -456,7 +484,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
 Button.displayName = 'Button';
 function Loading(_ref2) {
   var tone = _ref2.tone;
-  return jsxs(Box, {
+  return jsx(Box, {
     as: "span",
     position: "absolute",
     top: 0,
@@ -466,12 +494,10 @@ function Loading(_ref2) {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    children: [jsx(VisuallyHidden, {
-      children: "button loading indicator"
-    }), jsx(Spinner, {
+    children: jsx(Spinner, {
       size: "xsmall",
       tone: tone
-    })]
+    })
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/button",
-  "version": "5.6.0-rc.0",
+  "version": "5.6.0",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,21 +17,21 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.14.0",
-    "@spark-web/a11y": "^5.3.0-rc.0",
-    "@spark-web/box": "^6.0.0-rc.0",
-    "@spark-web/icon": "^5.1.0-rc.0",
-    "@spark-web/link": "^5.1.0-rc.0",
-    "@spark-web/spinner": "^5.1.0-rc.0",
-    "@spark-web/text": "^5.3.0-rc.0",
-    "@spark-web/theme": "^5.12.0-rc.0",
-    "@spark-web/utils": "^5.1.0-rc.0"
+    "@spark-web/a11y": "^5.3.0",
+    "@spark-web/box": "^6.0.0",
+    "@spark-web/icon": "^5.1.0",
+    "@spark-web/link": "^5.1.0",
+    "@spark-web/spinner": "^5.1.0",
+    "@spark-web/text": "^5.3.0",
+    "@spark-web/theme": "^5.13.0",
+    "@spark-web/utils": "^5.1.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
     "react": "^19.1.0"
   },
   "peerDependencies": {
-    "react": ">=19.1.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "engines": {
     "node": ">=14"