frosted-ui 0.0.1-canary.8 → 0.0.1-canary.9

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/dist/cjs/components/base-button.d.ts +1 -0
  2. package/dist/cjs/components/base-button.js +6 -4
  3. package/dist/cjs/components/base-button.js.map +1 -1
  4. package/dist/esm/components/base-button.d.ts +1 -0
  5. package/dist/esm/components/base-button.js +6 -4
  6. package/dist/esm/components/base-button.js.map +1 -1
  7. package/package.json +1 -1
  8. package/styles.css +58 -11
package/dist/cjs/components/base-button.d.ts CHANGED
@@ -4,6 +4,7 @@ import type { GetPropDefTypes, MarginProps, PropsWithoutRefOrColor } from '../he
4
4
  type BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;
5
5
  interface BaseButtonProps extends PropsWithoutRefOrColor<'button'>, MarginProps, BaseButtonOwnProps {
6
6
  asChild?: boolean;
7
+ loading?: boolean;
7
8
  }
8
9
  declare const BaseButton: React.ForwardRefExoticComponent<Omit<BaseButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
9
10
  export { BaseButton };
package/dist/cjs/components/base-button.js CHANGED
@@ -9,11 +9,13 @@ const helpers_1 = require("../helpers");
9
9
  const base_button_props_1 = require("./base-button.props");
10
10
  const BaseButton = React.forwardRef((props, forwardedRef) => {
11
11
  const { rest: marginRest, ...marginProps } = (0, helpers_1.extractMarginProps)(props);
12
- const { className, asChild = false, size = base_button_props_1.baseButtonPropDefs.size.default, variant = base_button_props_1.baseButtonPropDefs.variant.default, color = base_button_props_1.baseButtonPropDefs.color.default, highContrast = base_button_props_1.baseButtonPropDefs.highContrast.default, ...baseButtonProps } = marginRest;
12
+ const { children, loading, disabled, className, asChild = false, size = base_button_props_1.baseButtonPropDefs.size.default, variant = base_button_props_1.baseButtonPropDefs.variant.default, color = base_button_props_1.baseButtonPropDefs.color.default, highContrast = base_button_props_1.baseButtonPropDefs.highContrast.default, ...baseButtonProps } = marginRest;
13
13
  const Comp = asChild ? react_slot_1.Slot : 'button';
14
- return (React.createElement(Comp
15
- // The `data-disabled` attribute enables correct styles when doing `<Button asChild disabled>`
16
- , { "data-disabled": baseButtonProps.disabled || undefined, "data-accent-color": color || (variant === 'surface' ? 'gray' : color), ...baseButtonProps, ref: forwardedRef, className: (0, classnames_1.default)('fui-reset', 'fui-BaseButton', className, (0, helpers_1.withBreakpoints)(size, 'fui-r-size'), `fui-variant-${variant}`, { 'fui-high-contrast': highContrast }, (0, helpers_1.withMarginProps)(marginProps)) }));
14
+ return (React.createElement(Comp, { "data-accent-color": color || (variant === 'surface' ? 'gray' : color), ...baseButtonProps, ref: forwardedRef, className: (0, classnames_1.default)('fui-reset', 'fui-BaseButton', className, (0, helpers_1.withBreakpoints)(size, 'fui-r-size'), `fui-variant-${variant}`, { 'fui-high-contrast': highContrast }, (0, helpers_1.withMarginProps)(marginProps)), "aria-busy": loading || undefined, "data-disabled": disabled || undefined, "aria-disabled": disabled || loading || undefined, disabled: disabled || loading || undefined },
15
+ React.createElement(React.Fragment, null,
16
+ children,
17
+ loading && (React.createElement("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", className: "fui-BaseButtonSpinner" },
18
+ React.createElement("path", { fill: "currentColor", d: "M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z" }))))));
17
19
  });
18
20
  exports.BaseButton = BaseButton;
19
21
  BaseButton.displayName = 'BaseButton';
package/dist/cjs/components/base-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../../src/components/base-button.tsx"],"names":[],"mappings":";;;;AAAA,qDAA4C;AAC5C,oEAAoC;AACpC,qDAA+B;AAC/B,wCAIoB;AACpB,2DAAyD;AAgBzD,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,GAAG,IAAA,4BAAkB,EAAC,KAAK,CAAC,CAAC;IACvE,MAAM,EACJ,SAAS,EACT,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,sCAAkB,CAAC,IAAI,CAAC,OAAO,EACtC,OAAO,GAAG,sCAAkB,CAAC,OAAO,CAAC,OAAO,EAC5C,KAAK,GAAG,sCAAkB,CAAC,KAAK,CAAC,OAAO,EACxC,YAAY,GAAG,sCAAkB,CAAC,YAAY,CAAC,OAAO,EACtD,GAAG,eAAe,EACnB,GAAG,UAAU,CAAC;IACf,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,OAAO,CACL,oBAAC,IAAI;IACH,8FAA8F;yBAC/E,eAAe,CAAC,QAAQ,IAAI,SAAS,uBACjC,KAAK,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAChE,eAAe,EACnB,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,oBAAU,EACnB,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,IAAA,yBAAe,EAAC,IAAI,EAAE,YAAY,CAAC,EACnC,eAAe,OAAO,EAAE,EACxB,EAAE,mBAAmB,EAAE,YAAY,EAAE,EACrC,IAAA,yBAAe,EAAC,WAAW,CAAC,CAC7B,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,gCAAU;AAFnB,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
1
+ {"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../../src/components/base-button.tsx"],"names":[],"mappings":";;;;AAAA,qDAA4C;AAC5C,oEAAoC;AACpC,qDAA+B;AAC/B,wCAIoB;AACpB,2DAAyD;AAiBzD,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,GAAG,IAAA,4BAAkB,EAAC,KAAK,CAAC,CAAC;IACvE,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,sCAAkB,CAAC,IAAI,CAAC,OAAO,EACtC,OAAO,GAAG,sCAAkB,CAAC,OAAO,CAAC,OAAO,EAC5C,KAAK,GAAG,sCAAkB,CAAC,KAAK,CAAC,OAAO,EACxC,YAAY,GAAG,sCAAkB,CAAC,YAAY,CAAC,OAAO,EACtD,GAAG,eAAe,EACnB,GAAG,UAAU,CAAC;IACf,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,OAAO,CACL,oBAAC,IAAI,yBACgB,KAAK,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAChE,eAAe,EACnB,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,oBAAU,EACnB,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,IAAA,yBAAe,EAAC,IAAI,EAAE,YAAY,CAAC,EACnC,eAAe,OAAO,EAAE,EACxB,EAAE,mBAAmB,EAAE,YAAY,EAAE,EACrC,IAAA,yBAAe,EAAC,WAAW,CAAC,CAC7B,eACU,OAAO,IAAI,SAAS,mBAEhB,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,OAAO,IAAI,SAAS,EAC/C,QAAQ,EAAE,QAAQ,IAAI,OAAO,IAAI,SAAS;QAE1C;YACG,QAAQ;YAER,OAAO,IAAI,CACV,6BACE,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAC,uBAAuB;gBAEjC,8BACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,uHAAuH,GACnH,CACJ,CACP,CACA,CACE,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,gCAAU;AAFnB,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
package/dist/esm/components/base-button.d.ts CHANGED
@@ -4,6 +4,7 @@ import type { GetPropDefTypes, MarginProps, PropsWithoutRefOrColor } from '../he
4
4
  type BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;
5
5
  interface BaseButtonProps extends PropsWithoutRefOrColor<'button'>, MarginProps, BaseButtonOwnProps {
6
6
  asChild?: boolean;
7
+ loading?: boolean;
7
8
  }
8
9
  declare const BaseButton: React.ForwardRefExoticComponent<Omit<BaseButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
9
10
  export { BaseButton };
package/dist/esm/components/base-button.js CHANGED
@@ -5,11 +5,13 @@ import { extractMarginProps, withBreakpoints, withMarginProps, } from '../helper
5
5
  import { baseButtonPropDefs } from './base-button.props';
6
6
  const BaseButton = React.forwardRef((props, forwardedRef) => {
7
7
  const { rest: marginRest, ...marginProps } = extractMarginProps(props);
8
- const { className, asChild = false, size = baseButtonPropDefs.size.default, variant = baseButtonPropDefs.variant.default, color = baseButtonPropDefs.color.default, highContrast = baseButtonPropDefs.highContrast.default, ...baseButtonProps } = marginRest;
8
+ const { children, loading, disabled, className, asChild = false, size = baseButtonPropDefs.size.default, variant = baseButtonPropDefs.variant.default, color = baseButtonPropDefs.color.default, highContrast = baseButtonPropDefs.highContrast.default, ...baseButtonProps } = marginRest;
9
9
  const Comp = asChild ? Slot : 'button';
10
- return (React.createElement(Comp
11
- // The `data-disabled` attribute enables correct styles when doing `<Button asChild disabled>`
12
- , { "data-disabled": baseButtonProps.disabled || undefined, "data-accent-color": color || (variant === 'surface' ? 'gray' : color), ...baseButtonProps, ref: forwardedRef, className: classNames('fui-reset', 'fui-BaseButton', className, withBreakpoints(size, 'fui-r-size'), `fui-variant-${variant}`, { 'fui-high-contrast': highContrast }, withMarginProps(marginProps)) }));
10
+ return (React.createElement(Comp, { "data-accent-color": color || (variant === 'surface' ? 'gray' : color), ...baseButtonProps, ref: forwardedRef, className: classNames('fui-reset', 'fui-BaseButton', className, withBreakpoints(size, 'fui-r-size'), `fui-variant-${variant}`, { 'fui-high-contrast': highContrast }, withMarginProps(marginProps)), "aria-busy": loading || undefined, "data-disabled": disabled || undefined, "aria-disabled": disabled || loading || undefined, disabled: disabled || loading || undefined },
11
+ React.createElement(React.Fragment, null,
12
+ children,
13
+ loading && (React.createElement("svg", { viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", className: "fui-BaseButtonSpinner" },
14
+ React.createElement("path", { fill: "currentColor", d: "M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z" }))))));
13
15
  });
14
16
  BaseButton.displayName = 'BaseButton';
15
17
  export { BaseButton };
package/dist/esm/components/base-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../../src/components/base-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAgBzD,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACvE,MAAM,EACJ,SAAS,EACT,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,OAAO,EACtC,OAAO,GAAG,kBAAkB,CAAC,OAAO,CAAC,OAAO,EAC5C,KAAK,GAAG,kBAAkB,CAAC,KAAK,CAAC,OAAO,EACxC,YAAY,GAAG,kBAAkB,CAAC,YAAY,CAAC,OAAO,EACtD,GAAG,eAAe,EACnB,GAAG,UAAU,CAAC;IACf,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,OAAO,CACL,oBAAC,IAAI;IACH,8FAA8F;yBAC/E,eAAe,CAAC,QAAQ,IAAI,SAAS,uBACjC,KAAK,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAChE,eAAe,EACnB,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,UAAU,CACnB,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,eAAe,CAAC,IAAI,EAAE,YAAY,CAAC,EACnC,eAAe,OAAO,EAAE,EACxB,EAAE,mBAAmB,EAAE,YAAY,EAAE,EACrC,eAAe,CAAC,WAAW,CAAC,CAC7B,GACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,CAAC"}
1
+ {"version":3,"file":"base-button.js","sourceRoot":"","sources":["../../../src/components/base-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAiBzD,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,EAAE,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACvE,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,OAAO,EACtC,OAAO,GAAG,kBAAkB,CAAC,OAAO,CAAC,OAAO,EAC5C,KAAK,GAAG,kBAAkB,CAAC,KAAK,CAAC,OAAO,EACxC,YAAY,GAAG,kBAAkB,CAAC,YAAY,CAAC,OAAO,EACtD,GAAG,eAAe,EACnB,GAAG,UAAU,CAAC;IACf,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,OAAO,CACL,oBAAC,IAAI,yBACgB,KAAK,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAChE,eAAe,EACnB,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,UAAU,CACnB,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,eAAe,CAAC,IAAI,EAAE,YAAY,CAAC,EACnC,eAAe,OAAO,EAAE,EACxB,EAAE,mBAAmB,EAAE,YAAY,EAAE,EACrC,eAAe,CAAC,WAAW,CAAC,CAC7B,eACU,OAAO,IAAI,SAAS,mBAEhB,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,OAAO,IAAI,SAAS,EAC/C,QAAQ,EAAE,QAAQ,IAAI,OAAO,IAAI,SAAS;QAE1C;YACG,QAAQ;YAER,OAAO,IAAI,CACV,6BACE,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAC,uBAAuB;gBAEjC,8BACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,uHAAuH,GACnH,CACJ,CACP,CACA,CACE,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frosted-ui",
3
- "version": "0.0.1-canary.8",
3
+ "version": "0.0.1-canary.9",
4
4
  "private": false,
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
package/styles.css CHANGED
@@ -6172,6 +6172,7 @@ video {
6172
6172
  -moz-user-select: none;
6173
6173
  user-select: none;
6174
6174
  vertical-align: top;
6175
+ color: var(--base-button-color);
6175
6176
  }
6176
6177
 
6177
6178
  .fui-BaseButton:where(:not(.fui-variant-ghost)) {
@@ -6189,21 +6190,25 @@ video {
6189
6190
  --base-button-classic-active-padding-top: 1px;
6190
6191
  --base-button-height: var(--space-5);
6191
6192
  border-radius: var(--radius-3);
6193
+ --base-button-spinner-size: 12px;
6192
6194
  }
6193
6195
  .fui-BaseButton:where(.fui-r-size-2) {
6194
6196
  --base-button-classic-active-padding-top: 2px;
6195
6197
  --base-button-height: var(--space-6);
6196
6198
  border-radius: var(--radius-4);
6199
+ --base-button-spinner-size: 16px;
6197
6200
  }
6198
6201
  .fui-BaseButton:where(.fui-r-size-3) {
6199
6202
  --base-button-classic-active-padding-top: 2px;
6200
6203
  --base-button-height: var(--space-7);
6201
6204
  border-radius: var(--radius-4);
6205
+ --base-button-spinner-size: 18px;
6202
6206
  }
6203
6207
  .fui-BaseButton:where(.fui-r-size-4) {
6204
6208
  --base-button-classic-active-padding-top: 2px;
6205
6209
  --base-button-height: var(--space-8);
6206
6210
  border-radius: var(--radius-5);
6211
+ --base-button-spinner-size: 22px;
6207
6212
  }
6208
6213
  }
6209
6214
 
@@ -6212,21 +6217,25 @@ video {
6212
6217
  --base-button-classic-active-padding-top: 1px;
6213
6218
  --base-button-height: var(--space-5);
6214
6219
  border-radius: var(--radius-3);
6220
+ --base-button-spinner-size: 12px;
6215
6221
  }
6216
6222
  .fui-BaseButton:where(.xs\:fui-r-size-2) {
6217
6223
  --base-button-classic-active-padding-top: 2px;
6218
6224
  --base-button-height: var(--space-6);
6219
6225
  border-radius: var(--radius-4);
6226
+ --base-button-spinner-size: 16px;
6220
6227
  }
6221
6228
  .fui-BaseButton:where(.xs\:fui-r-size-3) {
6222
6229
  --base-button-classic-active-padding-top: 2px;
6223
6230
  --base-button-height: var(--space-7);
6224
6231
  border-radius: var(--radius-4);
6232
+ --base-button-spinner-size: 18px;
6225
6233
  }
6226
6234
  .fui-BaseButton:where(.xs\:fui-r-size-4) {
6227
6235
  --base-button-classic-active-padding-top: 2px;
6228
6236
  --base-button-height: var(--space-8);
6229
6237
  border-radius: var(--radius-5);
6238
+ --base-button-spinner-size: 22px;
6230
6239
  }
6231
6240
  }
6232
6241
 
@@ -6235,21 +6244,25 @@ video {
6235
6244
  --base-button-classic-active-padding-top: 1px;
6236
6245
  --base-button-height: var(--space-5);
6237
6246
  border-radius: var(--radius-3);
6247
+ --base-button-spinner-size: 12px;
6238
6248
  }
6239
6249
  .fui-BaseButton:where(.sm\:fui-r-size-2) {
6240
6250
  --base-button-classic-active-padding-top: 2px;
6241
6251
  --base-button-height: var(--space-6);
6242
6252
  border-radius: var(--radius-4);
6253
+ --base-button-spinner-size: 16px;
6243
6254
  }
6244
6255
  .fui-BaseButton:where(.sm\:fui-r-size-3) {
6245
6256
  --base-button-classic-active-padding-top: 2px;
6246
6257
  --base-button-height: var(--space-7);
6247
6258
  border-radius: var(--radius-4);
6259
+ --base-button-spinner-size: 18px;
6248
6260
  }
6249
6261
  .fui-BaseButton:where(.sm\:fui-r-size-4) {
6250
6262
  --base-button-classic-active-padding-top: 2px;
6251
6263
  --base-button-height: var(--space-8);
6252
6264
  border-radius: var(--radius-5);
6265
+ --base-button-spinner-size: 22px;
6253
6266
  }
6254
6267
  }
6255
6268
 
@@ -6258,21 +6271,25 @@ video {
6258
6271
  --base-button-classic-active-padding-top: 1px;
6259
6272
  --base-button-height: var(--space-5);
6260
6273
  border-radius: var(--radius-3);
6274
+ --base-button-spinner-size: 12px;
6261
6275
  }
6262
6276
  .fui-BaseButton:where(.md\:fui-r-size-2) {
6263
6277
  --base-button-classic-active-padding-top: 2px;
6264
6278
  --base-button-height: var(--space-6);
6265
6279
  border-radius: var(--radius-4);
6280
+ --base-button-spinner-size: 16px;
6266
6281
  }
6267
6282
  .fui-BaseButton:where(.md\:fui-r-size-3) {
6268
6283
  --base-button-classic-active-padding-top: 2px;
6269
6284
  --base-button-height: var(--space-7);
6270
6285
  border-radius: var(--radius-4);
6286
+ --base-button-spinner-size: 18px;
6271
6287
  }
6272
6288
  .fui-BaseButton:where(.md\:fui-r-size-4) {
6273
6289
  --base-button-classic-active-padding-top: 2px;
6274
6290
  --base-button-height: var(--space-8);
6275
6291
  border-radius: var(--radius-5);
6292
+ --base-button-spinner-size: 22px;
6276
6293
  }
6277
6294
  }
6278
6295
 
@@ -6281,21 +6298,25 @@ video {
6281
6298
  --base-button-classic-active-padding-top: 1px;
6282
6299
  --base-button-height: var(--space-5);
6283
6300
  border-radius: var(--radius-3);
6301
+ --base-button-spinner-size: 12px;
6284
6302
  }
6285
6303
  .fui-BaseButton:where(.lg\:fui-r-size-2) {
6286
6304
  --base-button-classic-active-padding-top: 2px;
6287
6305
  --base-button-height: var(--space-6);
6288
6306
  border-radius: var(--radius-4);
6307
+ --base-button-spinner-size: 16px;
6289
6308
  }
6290
6309
  .fui-BaseButton:where(.lg\:fui-r-size-3) {
6291
6310
  --base-button-classic-active-padding-top: 2px;
6292
6311
  --base-button-height: var(--space-7);
6293
6312
  border-radius: var(--radius-4);
6313
+ --base-button-spinner-size: 18px;
6294
6314
  }
6295
6315
  .fui-BaseButton:where(.lg\:fui-r-size-4) {
6296
6316
  --base-button-classic-active-padding-top: 2px;
6297
6317
  --base-button-height: var(--space-8);
6298
6318
  border-radius: var(--radius-5);
6319
+ --base-button-spinner-size: 22px;
6299
6320
  }
6300
6321
  }
6301
6322
 
@@ -6304,27 +6325,31 @@ video {
6304
6325
  --base-button-classic-active-padding-top: 1px;
6305
6326
  --base-button-height: var(--space-5);
6306
6327
  border-radius: var(--radius-3);
6328
+ --base-button-spinner-size: 12px;
6307
6329
  }
6308
6330
  .fui-BaseButton:where(.xl\:fui-r-size-2) {
6309
6331
  --base-button-classic-active-padding-top: 2px;
6310
6332
  --base-button-height: var(--space-6);
6311
6333
  border-radius: var(--radius-4);
6334
+ --base-button-spinner-size: 16px;
6312
6335
  }
6313
6336
  .fui-BaseButton:where(.xl\:fui-r-size-3) {
6314
6337
  --base-button-classic-active-padding-top: 2px;
6315
6338
  --base-button-height: var(--space-7);
6316
6339
  border-radius: var(--radius-4);
6340
+ --base-button-spinner-size: 18px;
6317
6341
  }
6318
6342
  .fui-BaseButton:where(.xl\:fui-r-size-4) {
6319
6343
  --base-button-classic-active-padding-top: 2px;
6320
6344
  --base-button-height: var(--space-8);
6321
6345
  border-radius: var(--radius-5);
6346
+ --base-button-spinner-size: 22px;
6322
6347
  }
6323
6348
  }
6324
6349
 
6325
6350
  .fui-BaseButton:where(.fui-variant-classic) {
6326
6351
  background-color: var(--accent-9);
6327
- color: var(--accent-9-contrast);
6352
+ --base-button-color: var(--accent-9-contrast);
6328
6353
  position: relative;
6329
6354
  z-index: 0;
6330
6355
  box-shadow:
@@ -6342,7 +6367,7 @@ video {
6342
6367
 
6343
6368
  .fui-BaseButton:where(.fui-variant-classic):where(.fui-high-contrast) {
6344
6369
  background-color: var(--accent-12);
6345
- color: var(--gray-1);
6370
+ --base-button-color: var(--gray-1);
6346
6371
  }
6347
6372
 
6348
6373
  .fui-BaseButton:where(.fui-variant-classic):where(:focus-visible) {
@@ -6382,7 +6407,7 @@ video {
6382
6407
 
6383
6408
  .fui-BaseButton:where(.fui-variant-classic):where([data-disabled]) {
6384
6409
  cursor: var(--cursor-disabled);
6385
- color: var(--gray-a8);
6410
+ --base-button-color: var(--gray-a8);
6386
6411
  background-color: var(--gray-3);
6387
6412
  box-shadow:
6388
6413
  /* highlight*/
@@ -6395,16 +6420,16 @@ video {
6395
6420
  }
6396
6421
 
6397
6422
  .fui-BaseButton:where(.fui-variant-soft, .fui-variant-ghost) {
6398
- color: var(--accent-a11);
6423
+ --base-button-color: var(--accent-a11);
6399
6424
  }
6400
6425
 
6401
6426
  .fui-BaseButton:where(.fui-variant-soft, .fui-variant-ghost):where(.fui-high-contrast) {
6402
- color: var(--accent-12);
6427
+ --base-button-color: var(--accent-12);
6403
6428
  }
6404
6429
 
6405
6430
  .fui-BaseButton:where(.fui-variant-soft, .fui-variant-ghost):where([data-disabled]) {
6406
6431
  cursor: var(--cursor-disabled);
6407
- color: var(--gray-a8);
6432
+ --base-button-color: var(--gray-a8);
6408
6433
  background-color: var(--gray-a3);
6409
6434
  }
6410
6435
 
@@ -6433,7 +6458,7 @@ video {
6433
6458
 
6434
6459
  .fui-BaseButton:where(.fui-variant-soft):where([data-disabled]) {
6435
6460
  cursor: var(--cursor-disabled);
6436
- color: var(--gray-a8);
6461
+ --base-button-color: var(--gray-a8);
6437
6462
  background-color: var(--gray-a3);
6438
6463
  }
6439
6464
 
@@ -6458,7 +6483,7 @@ video {
6458
6483
 
6459
6484
  .fui-BaseButton:where(.fui-variant-ghost):where([data-disabled]) {
6460
6485
  cursor: var(--cursor-disabled);
6461
- color: var(--gray-a8);
6486
+ --base-button-color: var(--gray-a8);
6462
6487
  background-color: transparent;
6463
6488
  }
6464
6489
 
@@ -6467,7 +6492,7 @@ video {
6467
6492
  box-shadow:
6468
6493
  inset 0 0 0 1px var(--accent-a5),
6469
6494
  0px 2px 2px 0px var(--black-a1);
6470
- color: var(--accent-12);
6495
+ --base-button-color: var(--accent-12);
6471
6496
  }
6472
6497
 
6473
6498
  @media (hover: hover) {
@@ -6497,16 +6522,38 @@ video {
6497
6522
  }
6498
6523
 
6499
6524
  .fui-BaseButton:where(.fui-variant-surface):where(.fui-high-contrast) {
6500
- color: var(--accent-12);
6525
+ --base-button-color: var(--accent-12);
6501
6526
  }
6502
6527
 
6503
6528
  .fui-BaseButton:where(.fui-variant-surface):where([data-disabled]) {
6504
6529
  cursor: var(--cursor-disabled);
6505
- color: var(--gray-a8);
6530
+ --base-button-color: var(--gray-a8);
6506
6531
  box-shadow: inset 0 0 0 1px var(--gray-a6);
6507
6532
  background-color: var(--gray-a2);
6508
6533
  }
6509
6534
 
6535
+ @keyframes fui-button-spin {
6536
+ from {
6537
+ transform: rotate(0deg);
6538
+ }
6539
+ to {
6540
+ transform: rotate(360deg);
6541
+ }
6542
+ }
6543
+
6544
+ .fui-BaseButton:where([aria-busy]) {
6545
+ color: transparent;
6546
+ pointer-events: none;
6547
+ }
6548
+
6549
+ .fui-BaseButtonSpinner {
6550
+ position: absolute;
6551
+ width: var(--base-button-spinner-size);
6552
+ height: var(--base-button-spinner-size);
6553
+ color: var(--base-button-color);
6554
+ animation: fui-button-spin 500ms linear infinite;
6555
+ }
6556
+
6510
6557
  .fui-Button:where(:not(.fui-variant-ghost)) :where(svg) {
6511
6558
  opacity: 0.9;
6512
6559
  }