frosted-ui 0.0.1-canary.94 → 0.0.1-canary.95

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 (11) hide show
  1. package/dist/cjs/components/circular-progress/circular-progress.js +38 -5
  2. package/dist/cjs/components/circular-progress/circular-progress.js.map +1 -1
  3. package/dist/cjs/components/circular-progress/circular-progress.stories.js +4 -4
  4. package/dist/cjs/components/circular-progress/circular-progress.stories.js.map +1 -1
  5. package/dist/esm/components/circular-progress/circular-progress.js +38 -5
  6. package/dist/esm/components/circular-progress/circular-progress.js.map +1 -1
  7. package/dist/esm/components/circular-progress/circular-progress.stories.js +4 -4
  8. package/dist/esm/components/circular-progress/circular-progress.stories.js.map +1 -1
  9. package/package.json +1 -1
  10. package/styles.css +12 -37
  11. package/styles.lite.css +12 -37
package/dist/cjs/components/circular-progress/circular-progress.js CHANGED
@@ -7,15 +7,48 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
7
7
  const radix_ui_1 = require("radix-ui");
8
8
  const React = tslib_1.__importStar(require("react"));
9
9
  const circular_progress_props_1 = require("./circular-progress.props");
10
+ // Size configuration matching CSS variables
11
+ const sizeConfig = {
12
+ '1': { diameter: 16, strokeWidth: 3 },
13
+ '2': { diameter: 20, strokeWidth: 4 },
14
+ '3': { diameter: 24, strokeWidth: 5 },
15
+ '4': { diameter: 32, strokeWidth: 5 },
16
+ '5': { diameter: 40, strokeWidth: 6 },
17
+ '6': { diameter: 48, strokeWidth: 7 },
18
+ '7': { diameter: 56, strokeWidth: 8 },
19
+ '8': { diameter: 64, strokeWidth: 9 },
20
+ '9': { diameter: 72, strokeWidth: 10 },
21
+ };
10
22
  const CircularProgress = (props) => {
11
23
  const { className, size = circular_progress_props_1.circularProgressPropDefs.size.default, color = circular_progress_props_1.circularProgressPropDefs.color.default, highContrast = circular_progress_props_1.circularProgressPropDefs.highContrast.default, value = 0, max = 100, ...progressProps } = props;
12
- const progress = Math.max(0, Math.min((value || 0) / max, 100));
24
+ const { diameter, strokeWidth } = sizeConfig[size] || sizeConfig['3'];
25
+ const radius = (diameter - strokeWidth) / 2;
26
+ const circumference = 2 * Math.PI * radius;
27
+ const center = diameter / 2;
28
+ // Calculate progress (0 to 1)
29
+ const progress = Math.max(0, Math.min((value || 0) / max, 1));
30
+ // Round caps add visual length beyond the arc endpoints
31
+ // Each cap extends by strokeWidth/2, total extension = strokeWidth
32
+ const capArcLength = strokeWidth / 2;
33
+ const totalCapArc = strokeWidth;
34
+ // Calculate the arc to draw (reduced to account for cap visual extension)
35
+ // Minimum arc ensures at least a dot (rounded cap) is visible when progress > 0
36
+ const targetVisualArc = progress * circumference;
37
+ const compensatedArc = targetVisualArc - totalCapArc;
38
+ const minArc = progress > 0 ? 0.1 : 0;
39
+ const actualArcToDraw = Math.max(minArc, compensatedArc);
40
+ // Stroke dash offset (how much of the circumference to hide)
41
+ const strokeDashoffset = circumference - actualArcToDraw;
42
+ // Rotate to position start cap's outer edge at 12 o'clock
43
+ const capAngle = (capArcLength / circumference) * 360;
44
+ const rotation = -90 + capAngle;
13
45
  return (React.createElement(radix_ui_1.Progress.Root, { "data-accent-color": color, className: (0, classnames_1.default)('fui-CircularProgressRoot', className, {
14
46
  'fui-high-contrast': highContrast,
15
- }, `fui-r-size-${size}`), value: value, max: max, ...progressProps },
16
- React.createElement(radix_ui_1.Progress.Indicator, { className: "fui-CircularProgressIndicator", style: {
17
- '--circular-progress-progress': progress,
18
- } })));
47
+ }, `fui-r-size-${size}`), value: value, max: max, ...progressProps, asChild: true },
48
+ React.createElement("svg", { className: "fui-CircularProgressSvg", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` },
49
+ React.createElement("circle", { className: "fui-CircularProgressTrack", cx: center, cy: center, r: radius, strokeWidth: strokeWidth, fill: "none" }),
50
+ progress > 0 && (React.createElement(radix_ui_1.Progress.Indicator, { asChild: true },
51
+ React.createElement("circle", { className: "fui-CircularProgressIndicator", cx: center, cy: center, r: radius, strokeWidth: strokeWidth, fill: "none", strokeDasharray: progress >= 1 ? undefined : circumference, strokeDashoffset: progress >= 1 ? undefined : strokeDashoffset, strokeLinecap: progress >= 1 ? 'butt' : 'round', transform: progress >= 1 ? undefined : `rotate(${rotation} ${center} ${center})` }))))));
19
52
  };
20
53
  exports.CircularProgress = CircularProgress;
21
54
  CircularProgress.displayName = 'CircularProgress';
package/dist/cjs/components/circular-progress/circular-progress.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../../src/components/circular-progress/circular-progress.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,oEAAoC;AACpC,uCAAyD;AACzD,qDAA+B;AAE/B,uEAAqE;AAOrE,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;IACxD,MAAM,EACJ,SAAS,EACT,IAAI,GAAG,kDAAwB,CAAC,IAAI,CAAC,OAAO,EAC5C,KAAK,GAAG,kDAAwB,CAAC,KAAK,CAAC,OAAO,EAC9C,YAAY,GAAG,kDAAwB,CAAC,YAAY,CAAC,OAAO,EAC5D,KAAK,GAAG,CAAC,EACT,GAAG,GAAG,GAAG,EACT,GAAG,aAAa,EACjB,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAEhE,OAAO,CACL,oBAAC,mBAAiB,CAAC,IAAI,yBACF,KAAK,EACxB,SAAS,EAAE,IAAA,oBAAU,EACnB,0BAA0B,EAC1B,SAAS,EACT;YACE,mBAAmB,EAAE,YAAY;SAClC,EACD,cAAc,IAAI,EAAE,CACrB,EACD,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,KACJ,aAAa;QAEjB,oBAAC,mBAAiB,CAAC,SAAS,IAC1B,SAAS,EAAC,+BAA+B,EACzC,KAAK,EACH;gBACE,8BAA8B,EAAE,QAAQ;aAClB,GAE1B,CACqB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAIO,4CAAgB;AAFzB,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC"}
1
+ {"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../../src/components/circular-progress/circular-progress.tsx"],"names":[],"mappings":"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"}
package/dist/cjs/components/circular-progress/circular-progress.stories.js CHANGED
@@ -43,10 +43,10 @@ exports.Color = {
43
43
  size: __1.circularProgressPropDefs.size.default,
44
44
  },
45
45
  render: (args) => (react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', width: 300 } },
46
- react_1.default.createElement(__1.CircularProgress, { ...args, color: "indigo" }),
47
- react_1.default.createElement(__1.CircularProgress, { ...args, color: "cyan" }),
48
- react_1.default.createElement(__1.CircularProgress, { ...args, color: "orange" }),
49
- react_1.default.createElement(__1.CircularProgress, { ...args, color: "crimson" }))),
46
+ react_1.default.createElement(__1.CircularProgress, { ...args, color: "indigo", value: 15 }),
47
+ react_1.default.createElement(__1.CircularProgress, { ...args, color: "cyan", value: 50 }),
48
+ react_1.default.createElement(__1.CircularProgress, { ...args, color: "orange", value: 95 }),
49
+ react_1.default.createElement(__1.CircularProgress, { ...args, color: "crimson", value: 100 }))),
50
50
  };
51
51
  exports.HighContrast = {
52
52
  name: 'High Contrast',
package/dist/cjs/components/circular-progress/circular-progress.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"circular-progress.stories.js","sourceRoot":"","sources":["../../../../src/components/circular-progress/circular-progress.stories.tsx"],"names":[],"mappings":";;;;AAEA,0DAA0B;AAC1B,0BAAgE;AAEhE,oHAAoH;AACpH,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,oBAAgB;IAC3B,IAAI,EAAE;QACJ,IAAI,EAAE,4BAAwB,CAAC,IAAI,CAAC,OAAO;QAC3C,KAAK,EAAE,4BAAwB,CAAC,KAAK,CAAC,OAAO;QAC7C,KAAK,EAAE,EAAE;QACT,GAAG,EAAE,GAAG;KACT;IACD,UAAU,EAAE;QACV,kIAAkI;QAClI,MAAM,EAAE,UAAU;KACnB;IACD,gIAAgI;IAChI,IAAI,EAAE,CAAC,UAAU,CAAC;CACqB,CAAC;AAE1C,kBAAe,IAAI,CAAC;AAGpB,8FAA8F;AACjF,QAAA,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,4BAAwB,CAAC,IAAI,CAAC,OAAO;QAC3C,KAAK,EAAE,4BAAwB,CAAC,KAAK,CAAC,OAAO;KAC9C;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,EAAE;QACzF,8BAAC,oBAAgB,OAAK,IAAI,GAAI,CAC1B,CACP;CACF,CAAC;AAEW,QAAA,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,IAAI,EAAE,4BAAwB,CAAC,IAAI,CAAC,OAAO;QAC3C,KAAK,EAAE,4BAAwB,CAAC,KAAK,CAAC,OAAO;KAC9C;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,EAAE,IACxF,4BAAwB,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAClD,8BAAC,oBAAgB,OAAK,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,GAAI,CACtD,CAAC,CACE,CACP;CACF,CAAC;AAEW,QAAA,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,4BAAwB,CAAC,IAAI,CAAC,OAAO;KAC5C;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,EAAE;QACzF,8BAAC,oBAAgB,OAAK,IAAI,EAAE,KAAK,EAAC,QAAQ,GAAG;QAC7C,8BAAC,oBAAgB,OAAK,IAAI,EAAE,KAAK,EAAC,MAAM,GAAG;QAC3C,8BAAC,oBAAgB,OAAK,IAAI,EAAE,KAAK,EAAC,QAAQ,GAAG;QAC7C,8BAAC,oBAAgB,OAAK,IAAI,EAAE,KAAK,EAAC,SAAS,GAAG,CAC1C,CACP;CACF,CAAC;AAEW,QAAA,YAAY,GAAU;IACjC,IAAI,EAAE,eAAe;IACrB,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,gBAAgB,EAAE;QAC1E,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,EAAE;YACzF,8BAAC,oBAAgB,OAAK,IAAI,EAAE,YAAY,EAAE,KAAK,GAAI,CAC/C;QACN,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,EAAE;YACzF,8BAAC,oBAAgB,OAAK,IAAI,EAAE,YAAY,SAAG,CACvC,CACF,CACP;CACF,CAAC"}
1
+ {"version":3,"file":"circular-progress.stories.js","sourceRoot":"","sources":["../../../../src/components/circular-progress/circular-progress.stories.tsx"],"names":[],"mappings":"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"}
package/dist/esm/components/circular-progress/circular-progress.js CHANGED
@@ -3,15 +3,48 @@ import classNames from 'classnames';
3
3
  import { Progress as ProgressPrimitive } from 'radix-ui';
4
4
  import * as React from 'react';
5
5
  import { circularProgressPropDefs } from './circular-progress.props';
6
+ // Size configuration matching CSS variables
7
+ const sizeConfig = {
8
+ '1': { diameter: 16, strokeWidth: 3 },
9
+ '2': { diameter: 20, strokeWidth: 4 },
10
+ '3': { diameter: 24, strokeWidth: 5 },
11
+ '4': { diameter: 32, strokeWidth: 5 },
12
+ '5': { diameter: 40, strokeWidth: 6 },
13
+ '6': { diameter: 48, strokeWidth: 7 },
14
+ '7': { diameter: 56, strokeWidth: 8 },
15
+ '8': { diameter: 64, strokeWidth: 9 },
16
+ '9': { diameter: 72, strokeWidth: 10 },
17
+ };
6
18
  const CircularProgress = (props) => {
7
19
  const { className, size = circularProgressPropDefs.size.default, color = circularProgressPropDefs.color.default, highContrast = circularProgressPropDefs.highContrast.default, value = 0, max = 100, ...progressProps } = props;
8
- const progress = Math.max(0, Math.min((value || 0) / max, 100));
20
+ const { diameter, strokeWidth } = sizeConfig[size] || sizeConfig['3'];
21
+ const radius = (diameter - strokeWidth) / 2;
22
+ const circumference = 2 * Math.PI * radius;
23
+ const center = diameter / 2;
24
+ // Calculate progress (0 to 1)
25
+ const progress = Math.max(0, Math.min((value || 0) / max, 1));
26
+ // Round caps add visual length beyond the arc endpoints
27
+ // Each cap extends by strokeWidth/2, total extension = strokeWidth
28
+ const capArcLength = strokeWidth / 2;
29
+ const totalCapArc = strokeWidth;
30
+ // Calculate the arc to draw (reduced to account for cap visual extension)
31
+ // Minimum arc ensures at least a dot (rounded cap) is visible when progress > 0
32
+ const targetVisualArc = progress * circumference;
33
+ const compensatedArc = targetVisualArc - totalCapArc;
34
+ const minArc = progress > 0 ? 0.1 : 0;
35
+ const actualArcToDraw = Math.max(minArc, compensatedArc);
36
+ // Stroke dash offset (how much of the circumference to hide)
37
+ const strokeDashoffset = circumference - actualArcToDraw;
38
+ // Rotate to position start cap's outer edge at 12 o'clock
39
+ const capAngle = (capArcLength / circumference) * 360;
40
+ const rotation = -90 + capAngle;
9
41
  return (React.createElement(ProgressPrimitive.Root, { "data-accent-color": color, className: classNames('fui-CircularProgressRoot', className, {
10
42
  'fui-high-contrast': highContrast,
11
- }, `fui-r-size-${size}`), value: value, max: max, ...progressProps },
12
- React.createElement(ProgressPrimitive.Indicator, { className: "fui-CircularProgressIndicator", style: {
13
- '--circular-progress-progress': progress,
14
- } })));
43
+ }, `fui-r-size-${size}`), value: value, max: max, ...progressProps, asChild: true },
44
+ React.createElement("svg", { className: "fui-CircularProgressSvg", width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}` },
45
+ React.createElement("circle", { className: "fui-CircularProgressTrack", cx: center, cy: center, r: radius, strokeWidth: strokeWidth, fill: "none" }),
46
+ progress > 0 && (React.createElement(ProgressPrimitive.Indicator, { asChild: true },
47
+ React.createElement("circle", { className: "fui-CircularProgressIndicator", cx: center, cy: center, r: radius, strokeWidth: strokeWidth, fill: "none", strokeDasharray: progress >= 1 ? undefined : circumference, strokeDashoffset: progress >= 1 ? undefined : strokeDashoffset, strokeLinecap: progress >= 1 ? 'butt' : 'round', transform: progress >= 1 ? undefined : `rotate(${rotation} ${center} ${center})` }))))));
15
48
  };
16
49
  CircularProgress.displayName = 'CircularProgress';
17
50
  export { CircularProgress };
package/dist/esm/components/circular-progress/circular-progress.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../../src/components/circular-progress/circular-progress.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAOrE,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;IACxD,MAAM,EACJ,SAAS,EACT,IAAI,GAAG,wBAAwB,CAAC,IAAI,CAAC,OAAO,EAC5C,KAAK,GAAG,wBAAwB,CAAC,KAAK,CAAC,OAAO,EAC9C,YAAY,GAAG,wBAAwB,CAAC,YAAY,CAAC,OAAO,EAC5D,KAAK,GAAG,CAAC,EACT,GAAG,GAAG,GAAG,EACT,GAAG,aAAa,EACjB,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;IAEhE,OAAO,CACL,oBAAC,iBAAiB,CAAC,IAAI,yBACF,KAAK,EACxB,SAAS,EAAE,UAAU,CACnB,0BAA0B,EAC1B,SAAS,EACT;YACE,mBAAmB,EAAE,YAAY;SAClC,EACD,cAAc,IAAI,EAAE,CACrB,EACD,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,KACJ,aAAa;QAEjB,oBAAC,iBAAiB,CAAC,SAAS,IAC1B,SAAS,EAAC,+BAA+B,EACzC,KAAK,EACH;gBACE,8BAA8B,EAAE,QAAQ;aAClB,GAE1B,CACqB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
1
+ {"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../../../src/components/circular-progress/circular-progress.tsx"],"names":[],"mappings":"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"}
package/dist/esm/components/circular-progress/circular-progress.stories.js CHANGED
@@ -39,10 +39,10 @@ export const Color = {
39
39
  size: circularProgressPropDefs.size.default,
40
40
  },
41
41
  render: (args) => (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', width: 300 } },
42
- React.createElement(CircularProgress, { ...args, color: "indigo" }),
43
- React.createElement(CircularProgress, { ...args, color: "cyan" }),
44
- React.createElement(CircularProgress, { ...args, color: "orange" }),
45
- React.createElement(CircularProgress, { ...args, color: "crimson" }))),
42
+ React.createElement(CircularProgress, { ...args, color: "indigo", value: 15 }),
43
+ React.createElement(CircularProgress, { ...args, color: "cyan", value: 50 }),
44
+ React.createElement(CircularProgress, { ...args, color: "orange", value: 95 }),
45
+ React.createElement(CircularProgress, { ...args, color: "crimson", value: 100 }))),
46
46
  };
47
47
  export const HighContrast = {
48
48
  name: 'High Contrast',
package/dist/esm/components/circular-progress/circular-progress.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"circular-progress.stories.js","sourceRoot":"","sources":["../../../../src/components/circular-progress/circular-progress.stories.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"circular-progress.stories.js","sourceRoot":"","sources":["../../../../src/components/circular-progress/circular-progress.stories.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frosted-ui",
3
- "version": "0.0.1-canary.94",
3
+ "version": "0.0.1-canary.95",
4
4
  "private": false,
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
package/styles.css CHANGED
@@ -8897,83 +8897,58 @@ video {
8897
8897
  display: block;
8898
8898
  width: var(--circular-progress-size);
8899
8899
  height: var(--circular-progress-size);
8900
- border-radius: 50%;
8901
- overflow: hidden;
8902
- --circular-progress-color: var(--accent-9);
8903
8900
  }
8904
8901
 
8905
- .fui-CircularProgressRoot::before {
8906
- content: '';
8907
- inset: 0;
8908
- z-index: 1;
8909
- position: absolute;
8910
- border-radius: inherit;
8911
- border: var(--circular-progress-border-thickness) solid var(--accent-a3);
8902
+ .fui-CircularProgressSvg {
8903
+ display: block;
8904
+ }
8905
+
8906
+ .fui-CircularProgressTrack {
8907
+ stroke: var(--accent-a3);
8908
+ }
8909
+
8910
+ .fui-CircularProgressIndicator {
8911
+ stroke: var(--accent-9);
8912
8912
  }
8913
8913
 
8914
8914
  .fui-CircularProgressRoot:where(.fui-r-size-1) {
8915
8915
  --circular-progress-size: 16px;
8916
- --circular-progress-border-thickness: 3px;
8917
8916
  }
8918
8917
 
8919
8918
  .fui-CircularProgressRoot:where(.fui-r-size-2) {
8920
8919
  --circular-progress-size: 20px;
8921
- --circular-progress-border-thickness: 4px;
8922
8920
  }
8923
8921
 
8924
8922
  .fui-CircularProgressRoot:where(.fui-r-size-3) {
8925
8923
  --circular-progress-size: 24px;
8926
- --circular-progress-border-thickness: 5px;
8927
8924
  }
8928
8925
 
8929
8926
  .fui-CircularProgressRoot:where(.fui-r-size-4) {
8930
8927
  --circular-progress-size: 32px;
8931
- --circular-progress-border-thickness: 5px;
8932
8928
  }
8933
8929
 
8934
8930
  .fui-CircularProgressRoot:where(.fui-r-size-5) {
8935
8931
  --circular-progress-size: 40px;
8936
- --circular-progress-border-thickness: 6px;
8937
8932
  }
8938
8933
 
8939
8934
  .fui-CircularProgressRoot:where(.fui-r-size-6) {
8940
8935
  --circular-progress-size: 48px;
8941
- --circular-progress-border-thickness: 7px;
8942
8936
  }
8943
8937
 
8944
8938
  .fui-CircularProgressRoot:where(.fui-r-size-7) {
8945
8939
  --circular-progress-size: 56px;
8946
- --circular-progress-border-thickness: 8px;
8947
8940
  }
8948
8941
 
8949
8942
  .fui-CircularProgressRoot:where(.fui-r-size-8) {
8950
8943
  --circular-progress-size: 64px;
8951
- --circular-progress-border-thickness: 9px;
8952
8944
  }
8953
8945
 
8954
8946
  .fui-CircularProgressRoot:where(.fui-r-size-9) {
8955
8947
  --circular-progress-size: 72px;
8956
- --circular-progress-border-thickness: 10px;
8957
8948
  }
8958
8949
 
8959
- .fui-CircularProgressIndicator {
8960
- position: absolute;
8961
- inset: 0;
8962
- border: var(--circular-progress-border-thickness) solid var(--circular-progress-color);
8963
- border-radius: inherit;
8964
- --mask: conic-gradient(
8965
- black calc(1turn * var(--circular-progress-progress)),
8966
- /* 0.001turn to smoothen out the cut out part */ transparent
8967
- calc(1turn * var(--circular-progress-progress) + 0.001turn)
8968
- );
8969
- -webkit-mask: var(--mask);
8970
- mask: var(--mask);
8971
- -webkit-mask-image: var(--mask);
8972
- mask-image: var(--mask);
8973
- }
8974
-
8975
- .fui-CircularProgressRoot:where(.fui-high-contrast) {
8976
- --circular-progress-color: var(--accent-12);
8950
+ .fui-CircularProgressRoot:where(.fui-high-contrast) .fui-CircularProgressIndicator {
8951
+ stroke: var(--accent-12);
8977
8952
  }
8978
8953
 
8979
8954
  .fui-Quote {
package/styles.lite.css CHANGED
@@ -7186,83 +7186,58 @@ video {
7186
7186
  display: block;
7187
7187
  width: var(--circular-progress-size);
7188
7188
  height: var(--circular-progress-size);
7189
- border-radius: 50%;
7190
- overflow: hidden;
7191
- --circular-progress-color: var(--accent-9);
7192
7189
  }
7193
7190
 
7194
- .fui-CircularProgressRoot::before {
7195
- content: '';
7196
- inset: 0;
7197
- z-index: 1;
7198
- position: absolute;
7199
- border-radius: inherit;
7200
- border: var(--circular-progress-border-thickness) solid var(--accent-a3);
7191
+ .fui-CircularProgressSvg {
7192
+ display: block;
7193
+ }
7194
+
7195
+ .fui-CircularProgressTrack {
7196
+ stroke: var(--accent-a3);
7197
+ }
7198
+
7199
+ .fui-CircularProgressIndicator {
7200
+ stroke: var(--accent-9);
7201
7201
  }
7202
7202
 
7203
7203
  .fui-CircularProgressRoot:where(.fui-r-size-1) {
7204
7204
  --circular-progress-size: 16px;
7205
- --circular-progress-border-thickness: 3px;
7206
7205
  }
7207
7206
 
7208
7207
  .fui-CircularProgressRoot:where(.fui-r-size-2) {
7209
7208
  --circular-progress-size: 20px;
7210
- --circular-progress-border-thickness: 4px;
7211
7209
  }
7212
7210
 
7213
7211
  .fui-CircularProgressRoot:where(.fui-r-size-3) {
7214
7212
  --circular-progress-size: 24px;
7215
- --circular-progress-border-thickness: 5px;
7216
7213
  }
7217
7214
 
7218
7215
  .fui-CircularProgressRoot:where(.fui-r-size-4) {
7219
7216
  --circular-progress-size: 32px;
7220
- --circular-progress-border-thickness: 5px;
7221
7217
  }
7222
7218
 
7223
7219
  .fui-CircularProgressRoot:where(.fui-r-size-5) {
7224
7220
  --circular-progress-size: 40px;
7225
- --circular-progress-border-thickness: 6px;
7226
7221
  }
7227
7222
 
7228
7223
  .fui-CircularProgressRoot:where(.fui-r-size-6) {
7229
7224
  --circular-progress-size: 48px;
7230
- --circular-progress-border-thickness: 7px;
7231
7225
  }
7232
7226
 
7233
7227
  .fui-CircularProgressRoot:where(.fui-r-size-7) {
7234
7228
  --circular-progress-size: 56px;
7235
- --circular-progress-border-thickness: 8px;
7236
7229
  }
7237
7230
 
7238
7231
  .fui-CircularProgressRoot:where(.fui-r-size-8) {
7239
7232
  --circular-progress-size: 64px;
7240
- --circular-progress-border-thickness: 9px;
7241
7233
  }
7242
7234
 
7243
7235
  .fui-CircularProgressRoot:where(.fui-r-size-9) {
7244
7236
  --circular-progress-size: 72px;
7245
- --circular-progress-border-thickness: 10px;
7246
7237
  }
7247
7238
 
7248
- .fui-CircularProgressIndicator {
7249
- position: absolute;
7250
- inset: 0;
7251
- border: var(--circular-progress-border-thickness) solid var(--circular-progress-color);
7252
- border-radius: inherit;
7253
- --mask: conic-gradient(
7254
- black calc(1turn * var(--circular-progress-progress)),
7255
- /* 0.001turn to smoothen out the cut out part */ transparent
7256
- calc(1turn * var(--circular-progress-progress) + 0.001turn)
7257
- );
7258
- -webkit-mask: var(--mask);
7259
- mask: var(--mask);
7260
- -webkit-mask-image: var(--mask);
7261
- mask-image: var(--mask);
7262
- }
7263
-
7264
- .fui-CircularProgressRoot:where(.fui-high-contrast) {
7265
- --circular-progress-color: var(--accent-12);
7239
+ .fui-CircularProgressRoot:where(.fui-high-contrast) .fui-CircularProgressIndicator {
7240
+ stroke: var(--accent-12);
7266
7241
  }
7267
7242
 
7268
7243
  .fui-Quote {