@spark-web/button 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +1 -0
  2. package/dist/declarations/src/ButtonLink.d.ts +1 -1
  3. package/dist/declarations/src/types.d.ts +2 -2
  4. package/dist/declarations/src/utils.d.ts +13 -2
  5. package/dist/spark-web-button.cjs.dev.js +102 -66
  6. package/dist/spark-web-button.cjs.prod.js +102 -66
  7. package/dist/spark-web-button.esm.js +102 -66
  8. package/package.json +10 -10
package/README.md CHANGED
@@ -1,6 +1,7 @@
1
1
  ---
2
2
  title: Button
3
3
  storybookPath: forms-buttons-button--default
4
+ isExperimentalPackage: true
4
5
  ---
5
6
 
6
7
  Buttons are clickable elements that are used to trigger actions. They
package/dist/declarations/src/ButtonLink.d.ts CHANGED
@@ -5,5 +5,5 @@ export declare type ButtonLinkProps = LinkComponentProps & CommonButtonProps;
5
5
  /** The appearance of a `Button`, with the semantics of a link. */
6
6
  export declare const ButtonLink: <Comp extends import("react").ElementType<any> = "a">(props: {
7
7
  as?: Comp | undefined;
8
- ref?: import("react").Ref<Comp extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "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" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "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" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
8
+ 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" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | 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" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
9
9
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & ButtonLinkProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
package/dist/declarations/src/types.d.ts CHANGED
@@ -5,10 +5,10 @@ import type { ButtonHTMLAttributes, ReactElement } from 'react';
5
5
  import type { mapTokens } from './utils';
6
6
  export declare type ButtonSize = keyof typeof mapTokens[keyof typeof mapTokens];
7
7
  export declare type ButtonProminence = 'high' | 'low' | 'none';
8
- export declare type ButtonTone = BackgroundTone;
8
+ export declare type ButtonTone = Exclude<BackgroundTone, 'disabled'>;
9
9
  declare type ChildrenWithText = {
10
10
  label?: never;
11
- children: string | [ReactElement<IconProps>, string] | [string, ReactElement<IconProps>];
11
+ children: string | number | [ReactElement<IconProps>, string | number] | [string | number, ReactElement<IconProps>];
12
12
  };
13
13
  declare type IconOnly = {
14
14
  /**
package/dist/declarations/src/utils.d.ts CHANGED
@@ -2,19 +2,30 @@ import type { BoxProps } from '@spark-web/box';
2
2
  import type { ForegroundTone } from '@spark-web/text';
3
3
  import type { BrighteTheme } from '@spark-web/theme';
4
4
  import type { ButtonProminence, ButtonTone } from './types';
5
- declare type ButtonStyles = {
5
+ declare type BaseButtonStyles = {
6
6
  background: BoxProps['background'];
7
7
  border?: BoxProps['border'];
8
8
  borderWidth?: BoxProps['borderWidth'];
9
9
  textTone?: ForegroundTone;
10
+ };
11
+ declare type HoverButtonStyles = {
10
12
  backgroundHover: keyof BrighteTheme['backgroundInteractions'];
11
13
  borderHover?: keyof BrighteTheme['border']['color'];
12
14
  textToneHover?: keyof BrighteTheme['color']['foreground'];
15
+ };
16
+ declare type ActiveButtonStyles = {
13
17
  backgroundActive: keyof BrighteTheme['backgroundInteractions'];
14
18
  borderActive?: keyof BrighteTheme['border']['color'];
15
19
  textToneActive?: keyof BrighteTheme['color']['foreground'];
16
20
  };
17
- export declare const variants: Record<ButtonProminence, Record<ButtonTone, ButtonStyles | undefined>>;
21
+ declare type DisabledButtonStyles = {
22
+ backgroundDisabled: keyof BrighteTheme['color']['background'];
23
+ borderDisabled?: keyof BrighteTheme['border']['color'];
24
+ textToneDisabled: keyof BrighteTheme['color']['foreground'];
25
+ };
26
+ declare type ButtonStyles = BaseButtonStyles & HoverButtonStyles & ActiveButtonStyles & DisabledButtonStyles;
27
+ declare type Variants = Record<ButtonProminence, Record<ButtonTone, ButtonStyles | undefined>>;
28
+ export declare const variants: Variants;
18
29
  export declare const mapTokens: {
19
30
  readonly fontSize: {
20
31
  readonly medium: "small";
package/dist/spark-web-button.cjs.dev.js CHANGED
@@ -24,7 +24,7 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
24
24
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
25
25
  _ref$type = _ref.type,
26
26
  type = _ref$type === void 0 ? 'button' : _ref$type,
27
- rest = _objectWithoutProperties(_ref, _excluded$2);
27
+ consumerProps = _objectWithoutProperties(_ref, _excluded$2);
28
28
 
29
29
  var internalRef = react.useRef(null);
30
30
  var composedRef = utils.useComposedRefs(internalRef, forwardedRef);
@@ -42,11 +42,11 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
42
42
  var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
43
43
  preventableClickHandler(event);
44
44
  }, [disabled, onClickProp]);
45
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
46
- as: "button"
47
- }, rest), {}, {
48
- onClick: onClick,
45
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
46
+ as: "button",
49
47
  ref: composedRef,
48
+ "aria-disabled": disabled,
49
+ onClick: onClick,
50
50
  type: type
51
51
  }));
52
52
  });
@@ -66,39 +66,62 @@ function getPreventableClickHandler(onClick, disabled) {
66
66
  };
67
67
  }
68
68
 
69
+ var highDisabledStyles = {
70
+ backgroundDisabled: 'disabled',
71
+ borderDisabled: 'fieldDisabled',
72
+ textToneDisabled: 'neutralInverted'
73
+ };
74
+ var highDisabledAltStyles = {
75
+ backgroundDisabled: 'neutral',
76
+ borderDisabled: 'standard',
77
+ textToneDisabled: 'placeholder'
78
+ };
79
+ var lowDisabledStyles = {
80
+ backgroundDisabled: 'inputDisabled',
81
+ textToneDisabled: 'disabled'
82
+ };
83
+ var lowDisabledAltStyles = {
84
+ backgroundDisabled: 'inputDisabled',
85
+ borderDisabled: 'fieldDisabled',
86
+ textToneDisabled: 'disabled'
87
+ };
88
+ var noneDisabledStyles = {
89
+ backgroundDisabled: 'neutral',
90
+ textToneDisabled: 'disabled'
91
+ };
69
92
  var variants = {
70
93
  high: {
71
- primary: {
94
+ primary: _objectSpread({
72
95
  background: 'primary',
73
96
  backgroundHover: 'primaryHover',
74
97
  backgroundActive: 'primaryActive'
75
- },
76
- secondary: {
98
+ }, highDisabledStyles),
99
+ secondary: _objectSpread({
77
100
  background: 'secondary',
78
101
  backgroundHover: 'secondaryHover',
79
102
  backgroundActive: 'secondaryActive'
80
- },
81
- neutral: {
103
+ }, highDisabledStyles),
104
+ neutral: _objectSpread({
82
105
  background: 'neutral',
83
106
  border: 'field',
84
107
  backgroundHover: 'neutralHover',
85
108
  backgroundActive: 'neutralActive'
86
- },
87
- positive: {
109
+ }, highDisabledAltStyles),
110
+ positive: _objectSpread({
88
111
  background: 'positive',
89
112
  backgroundHover: 'positiveHover',
90
113
  backgroundActive: 'positiveActive'
91
- },
92
- critical: {
114
+ }, highDisabledStyles),
115
+ critical: _objectSpread({
93
116
  background: 'critical',
94
117
  backgroundHover: 'criticalHover',
95
118
  backgroundActive: 'criticalActive'
96
- },
119
+ }, highDisabledStyles),
97
120
  caution: undefined,
98
121
  info: undefined
99
122
  },
100
123
  low: {
101
- primary: {
124
+ primary: _objectSpread({
102
125
  background: 'surface',
103
126
  border: 'primary',
104
127
  borderWidth: 'large',
@@ -109,8 +132,8 @@ var variants = {
109
132
  backgroundActive: 'none',
110
133
  borderActive: 'primaryActive',
111
134
  textToneActive: 'primaryActive'
112
- },
113
- secondary: {
135
+ }, lowDisabledAltStyles),
136
+ secondary: _objectSpread({
114
137
  background: 'surface',
115
138
  border: 'secondary',
116
139
  borderWidth: 'large',
@@ -121,76 +144,76 @@ var variants = {
121
144
  backgroundActive: 'none',
122
145
  borderActive: 'secondaryActive',
123
146
  textToneActive: 'secondaryActive'
124
- },
125
- neutral: {
147
+ }, lowDisabledAltStyles),
148
+ neutral: _objectSpread({
126
149
  background: 'neutralLow',
127
150
  backgroundHover: 'neutralLowHover',
128
151
  backgroundActive: 'neutralLowActive'
129
- },
130
- positive: {
152
+ }, lowDisabledStyles),
153
+ positive: _objectSpread({
131
154
  background: 'positiveLow',
132
155
  backgroundHover: 'positiveLowHover',
133
156
  backgroundActive: 'positiveLowActive'
134
- },
135
- caution: {
157
+ }, lowDisabledStyles),
158
+ caution: _objectSpread({
136
159
  background: 'cautionLow',
137
160
  backgroundHover: 'cautionLowHover',
138
161
  backgroundActive: 'cautionLowActive'
139
- },
140
- critical: {
162
+ }, lowDisabledStyles),
163
+ critical: _objectSpread({
141
164
  background: 'criticalLow',
142
165
  backgroundHover: 'criticalLowHover',
143
166
  backgroundActive: 'criticalLowActive'
144
- },
145
- info: {
167
+ }, lowDisabledStyles),
168
+ info: _objectSpread({
146
169
  background: 'infoLow',
147
170
  backgroundHover: 'infoLowHover',
148
171
  backgroundActive: 'infoLowActive'
149
- }
172
+ }, lowDisabledStyles)
150
173
  },
151
174
  none: {
152
- primary: {
175
+ primary: _objectSpread({
153
176
  background: 'surface',
154
177
  textTone: 'primaryActive',
155
178
  backgroundHover: 'primaryLowHover',
156
179
  backgroundActive: 'primaryLowActive'
157
- },
158
- secondary: {
180
+ }, noneDisabledStyles),
181
+ secondary: _objectSpread({
159
182
  background: 'surface',
160
183
  textTone: 'secondaryActive',
161
184
  backgroundHover: 'secondaryLowHover',
162
185
  backgroundActive: 'secondaryLowActive'
163
- },
164
- neutral: {
186
+ }, noneDisabledStyles),
187
+ neutral: _objectSpread({
165
188
  background: 'surface',
166
189
  textTone: 'neutral',
167
190
  backgroundHover: 'neutralLowHover',
168
191
  backgroundActive: 'neutralLowActive'
169
- },
170
- positive: {
192
+ }, noneDisabledStyles),
193
+ positive: _objectSpread({
171
194
  background: 'surface',
172
195
  textTone: 'positive',
173
196
  backgroundHover: 'positiveLowHover',
174
197
  backgroundActive: 'positiveLowActive'
175
- },
176
- caution: {
198
+ }, noneDisabledStyles),
199
+ caution: _objectSpread({
177
200
  background: 'surface',
178
201
  textTone: 'caution',
179
202
  backgroundHover: 'cautionLowHover',
180
203
  backgroundActive: 'cautionLowActive'
181
- },
182
- critical: {
204
+ }, noneDisabledStyles),
205
+ critical: _objectSpread({
183
206
  background: 'surface',
184
207
  textTone: 'critical',
185
208
  backgroundHover: 'criticalLowHover',
186
209
  backgroundActive: 'criticalLowActive'
187
- },
188
- info: {
210
+ }, noneDisabledStyles),
211
+ info: _objectSpread({
189
212
  background: 'surface',
190
213
  textTone: 'info',
191
214
  backgroundHover: 'infoLowHover',
192
215
  backgroundActive: 'infoLowActive'
193
- }
216
+ }, noneDisabledStyles)
194
217
  }
195
218
  };
196
219
  var mapTokens = {
@@ -216,7 +239,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
216
239
  tone = _ref.tone;
217
240
  var variant = variants[prominence][tone];
218
241
  return react.Children.map(children, function (child) {
219
- if (typeof child === 'string') {
242
+ if (typeof child === 'string' || typeof child === 'number') {
220
243
  return /*#__PURE__*/jsxRuntime.jsx(HiddenWhenLoading, {
221
244
  isLoading: isLoading,
222
245
  children: /*#__PURE__*/jsxRuntime.jsx(text.Text, {
@@ -272,9 +295,12 @@ function useButtonStyles(_ref) {
272
295
  var focusRingStyles = a11y.useFocusRing({
273
296
  tone: tone
274
297
  });
298
+ var disabledFocusRingStyles = a11y.useFocusRing({
299
+ tone: 'disabled'
300
+ });
275
301
  var variant = variants[prominence][tone];
276
302
  var isLarge = size === 'large';
277
- var transitionColours = {
303
+ var transitionColors = {
278
304
  transitionProperty: 'color, background-color, border-color, text-decoration-color',
279
305
  transitionTimingFunction: 'cubic-bezier(0.02, 1.505, 0.745, 1.235)',
280
306
  transitionDuration: "".concat(theme$1.animation.standard.duration, "ms")
@@ -294,27 +320,38 @@ function useButtonStyles(_ref) {
294
320
  position: 'relative',
295
321
  width: iconOnly ? mapTokens.size[size] : undefined,
296
322
  // interactions styles
297
- className: css.css(_objectSpread(_objectSpread({}, transitionColours), {}, {
298
- '&:hover': {
299
- borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme$1.border.color[variant.borderHover] : undefined,
300
- backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme$1.backgroundInteractions[variant.backgroundHover] : undefined,
301
- // Style button text when hovering
302
- '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
303
- color: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined,
304
- stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined
305
- })
306
- },
307
- '&:active': {
308
- borderColor: variant !== null && variant !== void 0 && variant.borderActive ? theme$1.border.color[variant.borderActive] : undefined,
309
- backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme$1.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
310
- transform: 'scale(0.98)',
311
- // Style button text when it's active
312
- '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
313
- color: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined,
314
- stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined
315
- })
323
+ className: css.css(_objectSpread(_objectSpread({}, transitionColors), {}, {
324
+ '&:not([aria-disabled=true])': {
325
+ ':hover': {
326
+ borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme$1.border.color[variant.borderHover] : undefined,
327
+ backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme$1.backgroundInteractions[variant.backgroundHover] : undefined,
328
+ // Style button text when hovering
329
+ '> *': _objectSpread(_objectSpread({}, transitionColors), {}, {
330
+ color: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined,
331
+ stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined
332
+ })
333
+ },
334
+ ':active': {
335
+ borderColor: variant !== null && variant !== void 0 && variant.borderActive ? theme$1.border.color[variant.borderActive] : undefined,
336
+ backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme$1.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
337
+ transform: 'scale(0.98)',
338
+ // Style button text when it's active
339
+ '> *': _objectSpread(_objectSpread({}, transitionColors), {}, {
340
+ color: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined,
341
+ stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined
342
+ })
343
+ },
344
+ ':focus': focusRingStyles
316
345
  },
317
- ':focus': focusRingStyles
346
+ '&[aria-disabled=true]': {
347
+ backgroundColor: variant !== null && variant !== void 0 && variant.backgroundDisabled ? theme$1.color.background[variant === null || variant === void 0 ? void 0 : variant.backgroundDisabled] : undefined,
348
+ borderColor: variant !== null && variant !== void 0 && variant.borderDisabled ? theme$1.border.color[variant.borderDisabled] : undefined,
349
+ '*': {
350
+ color: variant !== null && variant !== void 0 && variant.textToneDisabled ? theme$1.color.foreground[variant.textToneDisabled] : undefined,
351
+ stroke: variant !== null && variant !== void 0 && variant.textToneDisabled ? theme$1.color.foreground[variant.textToneDisabled] : undefined
352
+ },
353
+ ':focus': disabledFocusRingStyles
354
+ }
318
355
  }))
319
356
  };
320
357
  return buttonStyleProps;
@@ -358,7 +395,6 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
358
395
  return /*#__PURE__*/jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, buttonStyleProps), {}, {
359
396
  "aria-controls": ariaControls,
360
397
  "aria-describedby": ariaDescribedBy,
361
- "aria-disabled": isDisabled,
362
398
  "aria-expanded": ariaExpanded,
363
399
  "aria-label": props.label,
364
400
  data: data,
package/dist/spark-web-button.cjs.prod.js CHANGED
@@ -24,7 +24,7 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
24
24
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
25
25
  _ref$type = _ref.type,
26
26
  type = _ref$type === void 0 ? 'button' : _ref$type,
27
- rest = _objectWithoutProperties(_ref, _excluded$2);
27
+ consumerProps = _objectWithoutProperties(_ref, _excluded$2);
28
28
 
29
29
  var internalRef = react.useRef(null);
30
30
  var composedRef = utils.useComposedRefs(internalRef, forwardedRef);
@@ -42,11 +42,11 @@ var BaseButton = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
42
42
  var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
43
43
  preventableClickHandler(event);
44
44
  }, [disabled, onClickProp]);
45
- return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({
46
- as: "button"
47
- }, rest), {}, {
48
- onClick: onClick,
45
+ return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
46
+ as: "button",
49
47
  ref: composedRef,
48
+ "aria-disabled": disabled,
49
+ onClick: onClick,
50
50
  type: type
51
51
  }));
52
52
  });
@@ -66,39 +66,62 @@ function getPreventableClickHandler(onClick, disabled) {
66
66
  };
67
67
  }
68
68
 
69
+ var highDisabledStyles = {
70
+ backgroundDisabled: 'disabled',
71
+ borderDisabled: 'fieldDisabled',
72
+ textToneDisabled: 'neutralInverted'
73
+ };
74
+ var highDisabledAltStyles = {
75
+ backgroundDisabled: 'neutral',
76
+ borderDisabled: 'standard',
77
+ textToneDisabled: 'placeholder'
78
+ };
79
+ var lowDisabledStyles = {
80
+ backgroundDisabled: 'inputDisabled',
81
+ textToneDisabled: 'disabled'
82
+ };
83
+ var lowDisabledAltStyles = {
84
+ backgroundDisabled: 'inputDisabled',
85
+ borderDisabled: 'fieldDisabled',
86
+ textToneDisabled: 'disabled'
87
+ };
88
+ var noneDisabledStyles = {
89
+ backgroundDisabled: 'neutral',
90
+ textToneDisabled: 'disabled'
91
+ };
69
92
  var variants = {
70
93
  high: {
71
- primary: {
94
+ primary: _objectSpread({
72
95
  background: 'primary',
73
96
  backgroundHover: 'primaryHover',
74
97
  backgroundActive: 'primaryActive'
75
- },
76
- secondary: {
98
+ }, highDisabledStyles),
99
+ secondary: _objectSpread({
77
100
  background: 'secondary',
78
101
  backgroundHover: 'secondaryHover',
79
102
  backgroundActive: 'secondaryActive'
80
- },
81
- neutral: {
103
+ }, highDisabledStyles),
104
+ neutral: _objectSpread({
82
105
  background: 'neutral',
83
106
  border: 'field',
84
107
  backgroundHover: 'neutralHover',
85
108
  backgroundActive: 'neutralActive'
86
- },
87
- positive: {
109
+ }, highDisabledAltStyles),
110
+ positive: _objectSpread({
88
111
  background: 'positive',
89
112
  backgroundHover: 'positiveHover',
90
113
  backgroundActive: 'positiveActive'
91
- },
92
- critical: {
114
+ }, highDisabledStyles),
115
+ critical: _objectSpread({
93
116
  background: 'critical',
94
117
  backgroundHover: 'criticalHover',
95
118
  backgroundActive: 'criticalActive'
96
- },
119
+ }, highDisabledStyles),
97
120
  caution: undefined,
98
121
  info: undefined
99
122
  },
100
123
  low: {
101
- primary: {
124
+ primary: _objectSpread({
102
125
  background: 'surface',
103
126
  border: 'primary',
104
127
  borderWidth: 'large',
@@ -109,8 +132,8 @@ var variants = {
109
132
  backgroundActive: 'none',
110
133
  borderActive: 'primaryActive',
111
134
  textToneActive: 'primaryActive'
112
- },
113
- secondary: {
135
+ }, lowDisabledAltStyles),
136
+ secondary: _objectSpread({
114
137
  background: 'surface',
115
138
  border: 'secondary',
116
139
  borderWidth: 'large',
@@ -121,76 +144,76 @@ var variants = {
121
144
  backgroundActive: 'none',
122
145
  borderActive: 'secondaryActive',
123
146
  textToneActive: 'secondaryActive'
124
- },
125
- neutral: {
147
+ }, lowDisabledAltStyles),
148
+ neutral: _objectSpread({
126
149
  background: 'neutralLow',
127
150
  backgroundHover: 'neutralLowHover',
128
151
  backgroundActive: 'neutralLowActive'
129
- },
130
- positive: {
152
+ }, lowDisabledStyles),
153
+ positive: _objectSpread({
131
154
  background: 'positiveLow',
132
155
  backgroundHover: 'positiveLowHover',
133
156
  backgroundActive: 'positiveLowActive'
134
- },
135
- caution: {
157
+ }, lowDisabledStyles),
158
+ caution: _objectSpread({
136
159
  background: 'cautionLow',
137
160
  backgroundHover: 'cautionLowHover',
138
161
  backgroundActive: 'cautionLowActive'
139
- },
140
- critical: {
162
+ }, lowDisabledStyles),
163
+ critical: _objectSpread({
141
164
  background: 'criticalLow',
142
165
  backgroundHover: 'criticalLowHover',
143
166
  backgroundActive: 'criticalLowActive'
144
- },
145
- info: {
167
+ }, lowDisabledStyles),
168
+ info: _objectSpread({
146
169
  background: 'infoLow',
147
170
  backgroundHover: 'infoLowHover',
148
171
  backgroundActive: 'infoLowActive'
149
- }
172
+ }, lowDisabledStyles)
150
173
  },
151
174
  none: {
152
- primary: {
175
+ primary: _objectSpread({
153
176
  background: 'surface',
154
177
  textTone: 'primaryActive',
155
178
  backgroundHover: 'primaryLowHover',
156
179
  backgroundActive: 'primaryLowActive'
157
- },
158
- secondary: {
180
+ }, noneDisabledStyles),
181
+ secondary: _objectSpread({
159
182
  background: 'surface',
160
183
  textTone: 'secondaryActive',
161
184
  backgroundHover: 'secondaryLowHover',
162
185
  backgroundActive: 'secondaryLowActive'
163
- },
164
- neutral: {
186
+ }, noneDisabledStyles),
187
+ neutral: _objectSpread({
165
188
  background: 'surface',
166
189
  textTone: 'neutral',
167
190
  backgroundHover: 'neutralLowHover',
168
191
  backgroundActive: 'neutralLowActive'
169
- },
170
- positive: {
192
+ }, noneDisabledStyles),
193
+ positive: _objectSpread({
171
194
  background: 'surface',
172
195
  textTone: 'positive',
173
196
  backgroundHover: 'positiveLowHover',
174
197
  backgroundActive: 'positiveLowActive'
175
- },
176
- caution: {
198
+ }, noneDisabledStyles),
199
+ caution: _objectSpread({
177
200
  background: 'surface',
178
201
  textTone: 'caution',
179
202
  backgroundHover: 'cautionLowHover',
180
203
  backgroundActive: 'cautionLowActive'
181
- },
182
- critical: {
204
+ }, noneDisabledStyles),
205
+ critical: _objectSpread({
183
206
  background: 'surface',
184
207
  textTone: 'critical',
185
208
  backgroundHover: 'criticalLowHover',
186
209
  backgroundActive: 'criticalLowActive'
187
- },
188
- info: {
210
+ }, noneDisabledStyles),
211
+ info: _objectSpread({
189
212
  background: 'surface',
190
213
  textTone: 'info',
191
214
  backgroundHover: 'infoLowHover',
192
215
  backgroundActive: 'infoLowActive'
193
- }
216
+ }, noneDisabledStyles)
194
217
  }
195
218
  };
196
219
  var mapTokens = {
@@ -216,7 +239,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
216
239
  tone = _ref.tone;
217
240
  var variant = variants[prominence][tone];
218
241
  return react.Children.map(children, function (child) {
219
- if (typeof child === 'string') {
242
+ if (typeof child === 'string' || typeof child === 'number') {
220
243
  return /*#__PURE__*/jsxRuntime.jsx(HiddenWhenLoading, {
221
244
  isLoading: isLoading,
222
245
  children: /*#__PURE__*/jsxRuntime.jsx(text.Text, {
@@ -272,9 +295,12 @@ function useButtonStyles(_ref) {
272
295
  var focusRingStyles = a11y.useFocusRing({
273
296
  tone: tone
274
297
  });
298
+ var disabledFocusRingStyles = a11y.useFocusRing({
299
+ tone: 'disabled'
300
+ });
275
301
  var variant = variants[prominence][tone];
276
302
  var isLarge = size === 'large';
277
- var transitionColours = {
303
+ var transitionColors = {
278
304
  transitionProperty: 'color, background-color, border-color, text-decoration-color',
279
305
  transitionTimingFunction: 'cubic-bezier(0.02, 1.505, 0.745, 1.235)',
280
306
  transitionDuration: "".concat(theme$1.animation.standard.duration, "ms")
@@ -294,27 +320,38 @@ function useButtonStyles(_ref) {
294
320
  position: 'relative',
295
321
  width: iconOnly ? mapTokens.size[size] : undefined,
296
322
  // interactions styles
297
- className: css.css(_objectSpread(_objectSpread({}, transitionColours), {}, {
298
- '&:hover': {
299
- borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme$1.border.color[variant.borderHover] : undefined,
300
- backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme$1.backgroundInteractions[variant.backgroundHover] : undefined,
301
- // Style button text when hovering
302
- '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
303
- color: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined,
304
- stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined
305
- })
306
- },
307
- '&:active': {
308
- borderColor: variant !== null && variant !== void 0 && variant.borderActive ? theme$1.border.color[variant.borderActive] : undefined,
309
- backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme$1.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
310
- transform: 'scale(0.98)',
311
- // Style button text when it's active
312
- '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
313
- color: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined,
314
- stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined
315
- })
323
+ className: css.css(_objectSpread(_objectSpread({}, transitionColors), {}, {
324
+ '&:not([aria-disabled=true])': {
325
+ ':hover': {
326
+ borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme$1.border.color[variant.borderHover] : undefined,
327
+ backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme$1.backgroundInteractions[variant.backgroundHover] : undefined,
328
+ // Style button text when hovering
329
+ '> *': _objectSpread(_objectSpread({}, transitionColors), {}, {
330
+ color: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined,
331
+ stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme$1.color.foreground[variant.textToneHover] : undefined
332
+ })
333
+ },
334
+ ':active': {
335
+ borderColor: variant !== null && variant !== void 0 && variant.borderActive ? theme$1.border.color[variant.borderActive] : undefined,
336
+ backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme$1.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
337
+ transform: 'scale(0.98)',
338
+ // Style button text when it's active
339
+ '> *': _objectSpread(_objectSpread({}, transitionColors), {}, {
340
+ color: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined,
341
+ stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme$1.color.foreground[variant.textToneActive] : undefined
342
+ })
343
+ },
344
+ ':focus': focusRingStyles
316
345
  },
317
- ':focus': focusRingStyles
346
+ '&[aria-disabled=true]': {
347
+ backgroundColor: variant !== null && variant !== void 0 && variant.backgroundDisabled ? theme$1.color.background[variant === null || variant === void 0 ? void 0 : variant.backgroundDisabled] : undefined,
348
+ borderColor: variant !== null && variant !== void 0 && variant.borderDisabled ? theme$1.border.color[variant.borderDisabled] : undefined,
349
+ '*': {
350
+ color: variant !== null && variant !== void 0 && variant.textToneDisabled ? theme$1.color.foreground[variant.textToneDisabled] : undefined,
351
+ stroke: variant !== null && variant !== void 0 && variant.textToneDisabled ? theme$1.color.foreground[variant.textToneDisabled] : undefined
352
+ },
353
+ ':focus': disabledFocusRingStyles
354
+ }
318
355
  }))
319
356
  };
320
357
  return buttonStyleProps;
@@ -358,7 +395,6 @@ var Button = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
358
395
  return /*#__PURE__*/jsxRuntime.jsxs(BaseButton, _objectSpread(_objectSpread({}, buttonStyleProps), {}, {
359
396
  "aria-controls": ariaControls,
360
397
  "aria-describedby": ariaDescribedBy,
361
- "aria-disabled": isDisabled,
362
398
  "aria-expanded": ariaExpanded,
363
399
  "aria-label": props.label,
364
400
  data: data,
package/dist/spark-web-button.esm.js CHANGED
@@ -20,7 +20,7 @@ var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
20
20
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
21
21
  _ref$type = _ref.type,
22
22
  type = _ref$type === void 0 ? 'button' : _ref$type,
23
- rest = _objectWithoutProperties(_ref, _excluded$2);
23
+ consumerProps = _objectWithoutProperties(_ref, _excluded$2);
24
24
 
25
25
  var internalRef = useRef(null);
26
26
  var composedRef = useComposedRefs(internalRef, forwardedRef);
@@ -38,11 +38,11 @@ var BaseButton = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
38
38
  var preventableClickHandler = getPreventableClickHandler(onClickProp, disabled);
39
39
  preventableClickHandler(event);
40
40
  }, [disabled, onClickProp]);
41
- return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
42
- as: "button"
43
- }, rest), {}, {
44
- onClick: onClick,
41
+ return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
42
+ as: "button",
45
43
  ref: composedRef,
44
+ "aria-disabled": disabled,
45
+ onClick: onClick,
46
46
  type: type
47
47
  }));
48
48
  });
@@ -62,39 +62,62 @@ function getPreventableClickHandler(onClick, disabled) {
62
62
  };
63
63
  }
64
64
 
65
+ var highDisabledStyles = {
66
+ backgroundDisabled: 'disabled',
67
+ borderDisabled: 'fieldDisabled',
68
+ textToneDisabled: 'neutralInverted'
69
+ };
70
+ var highDisabledAltStyles = {
71
+ backgroundDisabled: 'neutral',
72
+ borderDisabled: 'standard',
73
+ textToneDisabled: 'placeholder'
74
+ };
75
+ var lowDisabledStyles = {
76
+ backgroundDisabled: 'inputDisabled',
77
+ textToneDisabled: 'disabled'
78
+ };
79
+ var lowDisabledAltStyles = {
80
+ backgroundDisabled: 'inputDisabled',
81
+ borderDisabled: 'fieldDisabled',
82
+ textToneDisabled: 'disabled'
83
+ };
84
+ var noneDisabledStyles = {
85
+ backgroundDisabled: 'neutral',
86
+ textToneDisabled: 'disabled'
87
+ };
65
88
  var variants = {
66
89
  high: {
67
- primary: {
90
+ primary: _objectSpread({
68
91
  background: 'primary',
69
92
  backgroundHover: 'primaryHover',
70
93
  backgroundActive: 'primaryActive'
71
- },
72
- secondary: {
94
+ }, highDisabledStyles),
95
+ secondary: _objectSpread({
73
96
  background: 'secondary',
74
97
  backgroundHover: 'secondaryHover',
75
98
  backgroundActive: 'secondaryActive'
76
- },
77
- neutral: {
99
+ }, highDisabledStyles),
100
+ neutral: _objectSpread({
78
101
  background: 'neutral',
79
102
  border: 'field',
80
103
  backgroundHover: 'neutralHover',
81
104
  backgroundActive: 'neutralActive'
82
- },
83
- positive: {
105
+ }, highDisabledAltStyles),
106
+ positive: _objectSpread({
84
107
  background: 'positive',
85
108
  backgroundHover: 'positiveHover',
86
109
  backgroundActive: 'positiveActive'
87
- },
88
- critical: {
110
+ }, highDisabledStyles),
111
+ critical: _objectSpread({
89
112
  background: 'critical',
90
113
  backgroundHover: 'criticalHover',
91
114
  backgroundActive: 'criticalActive'
92
- },
115
+ }, highDisabledStyles),
93
116
  caution: undefined,
94
117
  info: undefined
95
118
  },
96
119
  low: {
97
- primary: {
120
+ primary: _objectSpread({
98
121
  background: 'surface',
99
122
  border: 'primary',
100
123
  borderWidth: 'large',
@@ -105,8 +128,8 @@ var variants = {
105
128
  backgroundActive: 'none',
106
129
  borderActive: 'primaryActive',
107
130
  textToneActive: 'primaryActive'
108
- },
109
- secondary: {
131
+ }, lowDisabledAltStyles),
132
+ secondary: _objectSpread({
110
133
  background: 'surface',
111
134
  border: 'secondary',
112
135
  borderWidth: 'large',
@@ -117,76 +140,76 @@ var variants = {
117
140
  backgroundActive: 'none',
118
141
  borderActive: 'secondaryActive',
119
142
  textToneActive: 'secondaryActive'
120
- },
121
- neutral: {
143
+ }, lowDisabledAltStyles),
144
+ neutral: _objectSpread({
122
145
  background: 'neutralLow',
123
146
  backgroundHover: 'neutralLowHover',
124
147
  backgroundActive: 'neutralLowActive'
125
- },
126
- positive: {
148
+ }, lowDisabledStyles),
149
+ positive: _objectSpread({
127
150
  background: 'positiveLow',
128
151
  backgroundHover: 'positiveLowHover',
129
152
  backgroundActive: 'positiveLowActive'
130
- },
131
- caution: {
153
+ }, lowDisabledStyles),
154
+ caution: _objectSpread({
132
155
  background: 'cautionLow',
133
156
  backgroundHover: 'cautionLowHover',
134
157
  backgroundActive: 'cautionLowActive'
135
- },
136
- critical: {
158
+ }, lowDisabledStyles),
159
+ critical: _objectSpread({
137
160
  background: 'criticalLow',
138
161
  backgroundHover: 'criticalLowHover',
139
162
  backgroundActive: 'criticalLowActive'
140
- },
141
- info: {
163
+ }, lowDisabledStyles),
164
+ info: _objectSpread({
142
165
  background: 'infoLow',
143
166
  backgroundHover: 'infoLowHover',
144
167
  backgroundActive: 'infoLowActive'
145
- }
168
+ }, lowDisabledStyles)
146
169
  },
147
170
  none: {
148
- primary: {
171
+ primary: _objectSpread({
149
172
  background: 'surface',
150
173
  textTone: 'primaryActive',
151
174
  backgroundHover: 'primaryLowHover',
152
175
  backgroundActive: 'primaryLowActive'
153
- },
154
- secondary: {
176
+ }, noneDisabledStyles),
177
+ secondary: _objectSpread({
155
178
  background: 'surface',
156
179
  textTone: 'secondaryActive',
157
180
  backgroundHover: 'secondaryLowHover',
158
181
  backgroundActive: 'secondaryLowActive'
159
- },
160
- neutral: {
182
+ }, noneDisabledStyles),
183
+ neutral: _objectSpread({
161
184
  background: 'surface',
162
185
  textTone: 'neutral',
163
186
  backgroundHover: 'neutralLowHover',
164
187
  backgroundActive: 'neutralLowActive'
165
- },
166
- positive: {
188
+ }, noneDisabledStyles),
189
+ positive: _objectSpread({
167
190
  background: 'surface',
168
191
  textTone: 'positive',
169
192
  backgroundHover: 'positiveLowHover',
170
193
  backgroundActive: 'positiveLowActive'
171
- },
172
- caution: {
194
+ }, noneDisabledStyles),
195
+ caution: _objectSpread({
173
196
  background: 'surface',
174
197
  textTone: 'caution',
175
198
  backgroundHover: 'cautionLowHover',
176
199
  backgroundActive: 'cautionLowActive'
177
- },
178
- critical: {
200
+ }, noneDisabledStyles),
201
+ critical: _objectSpread({
179
202
  background: 'surface',
180
203
  textTone: 'critical',
181
204
  backgroundHover: 'criticalLowHover',
182
205
  backgroundActive: 'criticalLowActive'
183
- },
184
- info: {
206
+ }, noneDisabledStyles),
207
+ info: _objectSpread({
185
208
  background: 'surface',
186
209
  textTone: 'info',
187
210
  backgroundHover: 'infoLowHover',
188
211
  backgroundActive: 'infoLowActive'
189
- }
212
+ }, noneDisabledStyles)
190
213
  }
191
214
  };
192
215
  var mapTokens = {
@@ -212,7 +235,7 @@ var resolveButtonChildren = function resolveButtonChildren(_ref) {
212
235
  tone = _ref.tone;
213
236
  var variant = variants[prominence][tone];
214
237
  return Children.map(children, function (child) {
215
- if (typeof child === 'string') {
238
+ if (typeof child === 'string' || typeof child === 'number') {
216
239
  return /*#__PURE__*/jsx(HiddenWhenLoading, {
217
240
  isLoading: isLoading,
218
241
  children: /*#__PURE__*/jsx(Text, {
@@ -268,9 +291,12 @@ function useButtonStyles(_ref) {
268
291
  var focusRingStyles = useFocusRing({
269
292
  tone: tone
270
293
  });
294
+ var disabledFocusRingStyles = useFocusRing({
295
+ tone: 'disabled'
296
+ });
271
297
  var variant = variants[prominence][tone];
272
298
  var isLarge = size === 'large';
273
- var transitionColours = {
299
+ var transitionColors = {
274
300
  transitionProperty: 'color, background-color, border-color, text-decoration-color',
275
301
  transitionTimingFunction: 'cubic-bezier(0.02, 1.505, 0.745, 1.235)',
276
302
  transitionDuration: "".concat(theme.animation.standard.duration, "ms")
@@ -290,27 +316,38 @@ function useButtonStyles(_ref) {
290
316
  position: 'relative',
291
317
  width: iconOnly ? mapTokens.size[size] : undefined,
292
318
  // interactions styles
293
- className: css(_objectSpread(_objectSpread({}, transitionColours), {}, {
294
- '&:hover': {
295
- borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme.border.color[variant.borderHover] : undefined,
296
- backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme.backgroundInteractions[variant.backgroundHover] : undefined,
297
- // Style button text when hovering
298
- '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
299
- color: variant !== null && variant !== void 0 && variant.textToneHover ? theme.color.foreground[variant.textToneHover] : undefined,
300
- stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme.color.foreground[variant.textToneHover] : undefined
301
- })
302
- },
303
- '&:active': {
304
- borderColor: variant !== null && variant !== void 0 && variant.borderActive ? theme.border.color[variant.borderActive] : undefined,
305
- backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
306
- transform: 'scale(0.98)',
307
- // Style button text when it's active
308
- '> *': _objectSpread(_objectSpread({}, transitionColours), {}, {
309
- color: variant !== null && variant !== void 0 && variant.textToneActive ? theme.color.foreground[variant.textToneActive] : undefined,
310
- stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme.color.foreground[variant.textToneActive] : undefined
311
- })
319
+ className: css(_objectSpread(_objectSpread({}, transitionColors), {}, {
320
+ '&:not([aria-disabled=true])': {
321
+ ':hover': {
322
+ borderColor: variant !== null && variant !== void 0 && variant.borderHover ? theme.border.color[variant.borderHover] : undefined,
323
+ backgroundColor: variant !== null && variant !== void 0 && variant.backgroundHover ? theme.backgroundInteractions[variant.backgroundHover] : undefined,
324
+ // Style button text when hovering
325
+ '> *': _objectSpread(_objectSpread({}, transitionColors), {}, {
326
+ color: variant !== null && variant !== void 0 && variant.textToneHover ? theme.color.foreground[variant.textToneHover] : undefined,
327
+ stroke: variant !== null && variant !== void 0 && variant.textToneHover ? theme.color.foreground[variant.textToneHover] : undefined
328
+ })
329
+ },
330
+ ':active': {
331
+ borderColor: variant !== null && variant !== void 0 && variant.borderActive ? theme.border.color[variant.borderActive] : undefined,
332
+ backgroundColor: variant !== null && variant !== void 0 && variant.backgroundActive ? theme.backgroundInteractions[variant === null || variant === void 0 ? void 0 : variant.backgroundActive] : undefined,
333
+ transform: 'scale(0.98)',
334
+ // Style button text when it's active
335
+ '> *': _objectSpread(_objectSpread({}, transitionColors), {}, {
336
+ color: variant !== null && variant !== void 0 && variant.textToneActive ? theme.color.foreground[variant.textToneActive] : undefined,
337
+ stroke: variant !== null && variant !== void 0 && variant.textToneActive ? theme.color.foreground[variant.textToneActive] : undefined
338
+ })
339
+ },
340
+ ':focus': focusRingStyles
312
341
  },
313
- ':focus': focusRingStyles
342
+ '&[aria-disabled=true]': {
343
+ backgroundColor: variant !== null && variant !== void 0 && variant.backgroundDisabled ? theme.color.background[variant === null || variant === void 0 ? void 0 : variant.backgroundDisabled] : undefined,
344
+ borderColor: variant !== null && variant !== void 0 && variant.borderDisabled ? theme.border.color[variant.borderDisabled] : undefined,
345
+ '*': {
346
+ color: variant !== null && variant !== void 0 && variant.textToneDisabled ? theme.color.foreground[variant.textToneDisabled] : undefined,
347
+ stroke: variant !== null && variant !== void 0 && variant.textToneDisabled ? theme.color.foreground[variant.textToneDisabled] : undefined
348
+ },
349
+ ':focus': disabledFocusRingStyles
350
+ }
314
351
  }))
315
352
  };
316
353
  return buttonStyleProps;
@@ -354,7 +391,6 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
354
391
  return /*#__PURE__*/jsxs(BaseButton, _objectSpread(_objectSpread({}, buttonStyleProps), {}, {
355
392
  "aria-controls": ariaControls,
356
393
  "aria-describedby": ariaDescribedBy,
357
- "aria-disabled": isDisabled,
358
394
  "aria-expanded": ariaExpanded,
359
395
  "aria-label": props.label,
360
396
  data: data,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/button",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "license": "MIT",
5
5
  "main": "dist/spark-web-button.cjs.js",
6
6
  "module": "dist/spark-web-button.esm.js",
@@ -8,16 +8,16 @@
8
8
  "dist"
9
9
  ],
10
10
  "dependencies": {
11
- "@babel/runtime": "^7.18.3",
11
+ "@babel/runtime": "^7.18.9",
12
12
  "@emotion/css": "^11.9.0",
13
- "@spark-web/a11y": "^1.1.0",
14
- "@spark-web/box": "^1.0.6",
15
- "@spark-web/icon": "^1.1.4",
16
- "@spark-web/link": "^1.0.6",
17
- "@spark-web/spinner": "^1.0.4",
18
- "@spark-web/text": "^1.0.6",
19
- "@spark-web/theme": "^3.0.2",
20
- "@spark-web/utils": "^1.1.5"
13
+ "@spark-web/a11y": "^1.2.0",
14
+ "@spark-web/box": "^1.0.7",
15
+ "@spark-web/icon": "^1.1.5",
16
+ "@spark-web/link": "^1.0.7",
17
+ "@spark-web/spinner": "^1.0.5",
18
+ "@spark-web/text": "^1.0.7",
19
+ "@spark-web/theme": "^3.0.3",
20
+ "@spark-web/utils": "^1.2.0"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@types/react": "^17.0.12",