@dynatrace/strato-components 0.85.100 → 0.85.110

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 (220) hide show
  1. package/buttons/button/Button.css +17 -17
  2. package/buttons/button/Button.d.ts +1 -0
  3. package/buttons/button/Button.js +1 -0
  4. package/buttons/button/Button.sty.js +4 -4
  5. package/buttons/intent-button/IntentButton.js +4 -0
  6. package/content/progress/ProgressBar.css +73 -26
  7. package/content/progress/ProgressBar.d.ts +1 -1
  8. package/content/progress/ProgressBar.js +75 -63
  9. package/content/progress/ProgressBar.sty.d.ts +15 -20
  10. package/content/progress/ProgressBar.sty.js +9 -4
  11. package/content/progress/ProgressBarIcon.css +2 -2
  12. package/content/progress/ProgressBarIcon.js +1 -11
  13. package/content/progress/ProgressBarIcon.sty.js +2 -2
  14. package/content/progress/ProgressBarLabel.css +4 -4
  15. package/content/progress/ProgressBarLabel.js +1 -6
  16. package/content/progress/ProgressBarLabel.sty.js +1 -2
  17. package/content/progress/ProgressBarValue.css +5 -20
  18. package/content/progress/ProgressBarValue.js +2 -2
  19. package/content/progress/ProgressBarValue.sty.d.ts +0 -20
  20. package/content/progress/ProgressBarValue.sty.js +2 -1
  21. package/content/progress/ProgressCircle.css +51 -19
  22. package/content/progress/ProgressCircle.d.ts +1 -1
  23. package/content/progress/ProgressCircle.js +24 -15
  24. package/content/progress/ProgressCircle.sty.d.ts +41 -14
  25. package/content/progress/ProgressCircle.sty.js +7 -11
  26. package/content/progress/contexts/SharedProgressBarPropsContext.d.ts +0 -2
  27. package/content/progress/contexts/SharedProgressBarPropsContext.js +1 -2
  28. package/content/progress/hooks/useProgressBarPropsContext.js +0 -1
  29. package/content/skeleton/Skeleton.css +6 -6
  30. package/content/skeleton/Skeleton.sty.js +1 -1
  31. package/core/components/focus-scope/FocusScope.d.ts +2 -2
  32. package/core/index.d.ts +1 -1
  33. package/core/index.js +1 -1
  34. package/core/styles/focusRing.css +66 -66
  35. package/core/styles/focusRing.sty.js +2 -2
  36. package/core/styles/useFocusRing.d.ts +0 -1
  37. package/core/utils/colorUtils.css +60 -65
  38. package/core/utils/colorUtils.sty.d.ts +0 -5
  39. package/core/utils/colorUtils.sty.js +2 -2
  40. package/esm/buttons/button/Button.css +17 -17
  41. package/esm/buttons/button/Button.js +1 -0
  42. package/esm/buttons/button/Button.js.map +2 -2
  43. package/esm/buttons/button/Button.sty.js +4 -4
  44. package/esm/buttons/button/Button.sty.js.map +1 -1
  45. package/esm/buttons/intent-button/IntentButton.js +4 -0
  46. package/esm/buttons/intent-button/IntentButton.js.map +2 -2
  47. package/esm/content/progress/ProgressBar.css +73 -26
  48. package/esm/content/progress/ProgressBar.js +80 -64
  49. package/esm/content/progress/ProgressBar.js.map +2 -2
  50. package/esm/content/progress/ProgressBar.sty.js +9 -4
  51. package/esm/content/progress/ProgressBar.sty.js.map +2 -2
  52. package/esm/content/progress/ProgressBarIcon.css +2 -2
  53. package/esm/content/progress/ProgressBarIcon.js +1 -11
  54. package/esm/content/progress/ProgressBarIcon.js.map +2 -2
  55. package/esm/content/progress/ProgressBarIcon.sty.js +2 -2
  56. package/esm/content/progress/ProgressBarIcon.sty.js.map +1 -1
  57. package/esm/content/progress/ProgressBarLabel.css +4 -4
  58. package/esm/content/progress/ProgressBarLabel.js +1 -6
  59. package/esm/content/progress/ProgressBarLabel.js.map +2 -2
  60. package/esm/content/progress/ProgressBarLabel.sty.js +1 -2
  61. package/esm/content/progress/ProgressBarLabel.sty.js.map +2 -2
  62. package/esm/content/progress/ProgressBarValue.css +5 -20
  63. package/esm/content/progress/ProgressBarValue.js +2 -2
  64. package/esm/content/progress/ProgressBarValue.js.map +2 -2
  65. package/esm/content/progress/ProgressBarValue.sty.js +2 -1
  66. package/esm/content/progress/ProgressBarValue.sty.js.map +2 -2
  67. package/esm/content/progress/ProgressCircle.css +51 -19
  68. package/esm/content/progress/ProgressCircle.js +25 -17
  69. package/esm/content/progress/ProgressCircle.js.map +2 -2
  70. package/esm/content/progress/ProgressCircle.sty.js +7 -11
  71. package/esm/content/progress/ProgressCircle.sty.js.map +2 -2
  72. package/esm/content/progress/contexts/SharedProgressBarPropsContext.js +1 -2
  73. package/esm/content/progress/contexts/SharedProgressBarPropsContext.js.map +2 -2
  74. package/esm/content/progress/hooks/useProgressBarPropsContext.js +0 -1
  75. package/esm/content/progress/hooks/useProgressBarPropsContext.js.map +2 -2
  76. package/esm/content/skeleton/Skeleton.css +6 -6
  77. package/esm/content/skeleton/Skeleton.sty.js +1 -1
  78. package/esm/content/skeleton/Skeleton.sty.js.map +1 -1
  79. package/esm/core/components/focus-scope/FocusScope.js.map +1 -1
  80. package/esm/core/index.js +1 -1
  81. package/esm/core/index.js.map +2 -2
  82. package/esm/core/styles/focusRing.css +66 -66
  83. package/esm/core/styles/focusRing.sty.js +2 -2
  84. package/esm/core/styles/focusRing.sty.js.map +1 -1
  85. package/esm/core/styles/useFocusRing.js.map +2 -2
  86. package/esm/core/types/role-variant.js.map +2 -2
  87. package/esm/core/utils/colorUtils.css +60 -65
  88. package/esm/core/utils/colorUtils.sty.js +2 -2
  89. package/esm/core/utils/colorUtils.sty.js.map +2 -2
  90. package/esm/layouts/container/Container.css +4 -4
  91. package/esm/layouts/container/Container.js +22 -4
  92. package/esm/layouts/container/Container.js.map +2 -2
  93. package/esm/layouts/container/Container.sty.js +1 -1
  94. package/esm/layouts/container/Container.sty.js.map +1 -1
  95. package/esm/layouts/divider/Divider.css +6 -6
  96. package/esm/layouts/divider/Divider.sty.js +1 -1
  97. package/esm/layouts/divider/Divider.sty.js.map +1 -1
  98. package/esm/layouts/hooks/useBreakpoint.js +3 -0
  99. package/esm/layouts/hooks/useBreakpoint.js.map +2 -2
  100. package/esm/layouts/index.js +5 -1
  101. package/esm/layouts/index.js.map +2 -2
  102. package/esm/layouts/input-group/InputGroup.css +4 -4
  103. package/esm/layouts/input-group/InputGroup.sty.js +2 -2
  104. package/esm/layouts/input-group/InputGroup.sty.js.map +1 -1
  105. package/esm/layouts/surface/Surface.css +39 -39
  106. package/esm/layouts/surface/Surface.sty.js +2 -2
  107. package/esm/layouts/surface/Surface.sty.js.map +1 -1
  108. package/esm/layouts/surface/variables.sty.js +1 -1
  109. package/esm/layouts/surface/variables.sty.js.map +1 -1
  110. package/esm/styles/colorUtils.css +60 -65
  111. package/esm/styles/colorUtils.sty.js +2 -2
  112. package/esm/styles/colorUtils.sty.js.map +2 -2
  113. package/esm/styles/container.css +47 -47
  114. package/esm/styles/container.sty.js +2 -2
  115. package/esm/styles/container.sty.js.map +1 -1
  116. package/esm/styles/ellipsis.css +1 -1
  117. package/esm/styles/ellipsis.sty.js +1 -1
  118. package/esm/styles/ellipsis.sty.js.map +1 -1
  119. package/esm/styles/field.css +153 -153
  120. package/esm/styles/field.sty.js +2 -2
  121. package/esm/styles/field.sty.js.map +1 -1
  122. package/esm/styles/sprinkles.css +262 -262
  123. package/esm/styles/sprinkles.sty.js +1 -1
  124. package/esm/styles/sprinkles.sty.js.map +1 -1
  125. package/esm/styles/textStyle.css +8 -8
  126. package/esm/styles/textStyle.sty.js +1 -1
  127. package/esm/styles/textStyle.sty.js.map +1 -1
  128. package/esm/typography/block-quote/Blockquote.css +2 -2
  129. package/esm/typography/block-quote/Blockquote.sty.js +1 -1
  130. package/esm/typography/block-quote/Blockquote.sty.js.map +1 -1
  131. package/esm/typography/code/Code.css +1 -1
  132. package/esm/typography/code/Code.sty.js +1 -1
  133. package/esm/typography/code/Code.sty.js.map +1 -1
  134. package/esm/typography/emphasis/Emphasis.css +1 -1
  135. package/esm/typography/emphasis/Emphasis.sty.js +1 -1
  136. package/esm/typography/emphasis/Emphasis.sty.js.map +1 -1
  137. package/esm/typography/external-link/ExternalLink.css +6 -6
  138. package/esm/typography/external-link/ExternalLink.sty.js +1 -1
  139. package/esm/typography/external-link/ExternalLink.sty.js.map +1 -1
  140. package/esm/typography/heading/Heading.css +7 -7
  141. package/esm/typography/heading/Heading.sty.js +1 -1
  142. package/esm/typography/heading/Heading.sty.js.map +1 -1
  143. package/esm/typography/highlight/Highlight.css +1 -1
  144. package/esm/typography/highlight/Highlight.sty.js +1 -1
  145. package/esm/typography/highlight/Highlight.sty.js.map +1 -1
  146. package/esm/typography/link/Link.css +4 -4
  147. package/esm/typography/link/Link.sty.js +1 -1
  148. package/esm/typography/link/Link.sty.js.map +1 -1
  149. package/esm/typography/list/List.css +4 -4
  150. package/esm/typography/list/List.sty.js +2 -2
  151. package/esm/typography/list/List.sty.js.map +1 -1
  152. package/esm/typography/paragraph/Paragraph.css +3 -3
  153. package/esm/typography/paragraph/Paragraph.sty.js +1 -1
  154. package/esm/typography/paragraph/Paragraph.sty.js.map +1 -1
  155. package/esm/typography/strikethrough/Strikethrough.css +1 -1
  156. package/esm/typography/strikethrough/Strikethrough.sty.js +1 -1
  157. package/esm/typography/strikethrough/Strikethrough.sty.js.map +1 -1
  158. package/esm/typography/strong/Strong.css +1 -1
  159. package/esm/typography/strong/Strong.sty.js +1 -1
  160. package/esm/typography/strong/Strong.sty.js.map +1 -1
  161. package/esm/typography/text/Text.css +3 -3
  162. package/esm/typography/text/Text.sty.js +1 -1
  163. package/esm/typography/text/Text.sty.js.map +1 -1
  164. package/esm/typography/text-ellipsis/TextEllipsis.css +4 -4
  165. package/esm/typography/text-ellipsis/TextEllipsis.sty.js +1 -1
  166. package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map +1 -1
  167. package/layouts/container/Container.css +4 -4
  168. package/layouts/container/Container.d.ts +20 -0
  169. package/layouts/container/Container.js +16 -3
  170. package/layouts/container/Container.sty.js +1 -1
  171. package/layouts/divider/Divider.css +6 -6
  172. package/layouts/divider/Divider.sty.js +1 -1
  173. package/layouts/hooks/useBreakpoint.js +3 -0
  174. package/layouts/index.d.ts +1 -1
  175. package/layouts/index.js +1 -0
  176. package/layouts/input-group/InputGroup.css +4 -4
  177. package/layouts/input-group/InputGroup.sty.js +2 -2
  178. package/layouts/surface/Surface.css +39 -39
  179. package/layouts/surface/Surface.sty.js +2 -2
  180. package/layouts/surface/variables.sty.js +1 -1
  181. package/package.json +1 -1
  182. package/styles/colorUtils.css +60 -65
  183. package/styles/colorUtils.sty.d.ts +0 -5
  184. package/styles/colorUtils.sty.js +2 -2
  185. package/styles/container.css +47 -47
  186. package/styles/container.sty.js +2 -2
  187. package/styles/ellipsis.css +1 -1
  188. package/styles/ellipsis.sty.js +1 -1
  189. package/styles/field.css +153 -153
  190. package/styles/field.sty.js +2 -2
  191. package/styles/sprinkles.css +262 -262
  192. package/styles/sprinkles.sty.js +1 -1
  193. package/styles/textStyle.css +8 -8
  194. package/styles/textStyle.sty.js +1 -1
  195. package/typography/block-quote/Blockquote.css +2 -2
  196. package/typography/block-quote/Blockquote.sty.js +1 -1
  197. package/typography/code/Code.css +1 -1
  198. package/typography/code/Code.sty.js +1 -1
  199. package/typography/emphasis/Emphasis.css +1 -1
  200. package/typography/emphasis/Emphasis.sty.js +1 -1
  201. package/typography/external-link/ExternalLink.css +6 -6
  202. package/typography/external-link/ExternalLink.sty.js +1 -1
  203. package/typography/heading/Heading.css +7 -7
  204. package/typography/heading/Heading.sty.js +1 -1
  205. package/typography/highlight/Highlight.css +1 -1
  206. package/typography/highlight/Highlight.sty.js +1 -1
  207. package/typography/link/Link.css +4 -4
  208. package/typography/link/Link.sty.js +1 -1
  209. package/typography/list/List.css +4 -4
  210. package/typography/list/List.sty.js +2 -2
  211. package/typography/paragraph/Paragraph.css +3 -3
  212. package/typography/paragraph/Paragraph.sty.js +1 -1
  213. package/typography/strikethrough/Strikethrough.css +1 -1
  214. package/typography/strikethrough/Strikethrough.sty.js +1 -1
  215. package/typography/strong/Strong.css +1 -1
  216. package/typography/strong/Strong.sty.js +1 -1
  217. package/typography/text/Text.css +3 -3
  218. package/typography/text/Text.sty.js +1 -1
  219. package/typography/text-ellipsis/TextEllipsis.css +4 -4
  220. package/typography/text-ellipsis/TextEllipsis.sty.js +1 -1
@@ -1,28 +1,13 @@
1
- ._1ri4i7o1-0-85-100 {
2
- color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
1
+ ._1ri4i7o0-0-85-110 {
2
+ color: var(--_13n9uwh4-0-85-110);
3
3
  }
4
- ._1ri4i7o2-0-85-100 {
5
- color: var(--dt-colors-text-neutral-subdued, #545587);
6
- }
7
- ._1ri4i7o3-0-85-100 {
8
- color: var(--dt-colors-text-neutral-subdued, #545587);
9
- }
10
- ._1ri4i7o4-0-85-100 {
11
- color: var(--dt-colors-text-neutral-subdued, #545587);
12
- }
13
- ._1ri4i7o5-0-85-100 {
14
- color: var(--dt-colors-text-neutral-subdued, #545587);
15
- }
16
- ._1ri4i7o6-0-85-100 {
17
- color: var(--dt-colors-text-neutral-subdued, #545587);
18
- }
19
- ._1ri4i7o8-0-85-100 {
4
+ ._1ri4i7o2-0-85-110 {
20
5
  word-break: break-word;
21
6
  }
22
- ._1ri4i7oa-0-85-100 {
7
+ ._1ri4i7o4-0-85-110 {
23
8
  word-break: break-word;
24
9
  }
25
- ._1ri4i7ob-0-85-100 {
10
+ ._1ri4i7o5-0-85-110 {
26
11
  margin-left: auto;
27
12
  align-self: center;
28
13
  }
@@ -51,7 +51,7 @@ const ProgressBarValue = (0, import_react.forwardRef)((props, forwardedRef) => {
51
51
  id: "3J6qHQEUwDxvZuIl",
52
52
  description: "Default label for the progress-bar."
53
53
  });
54
- const { variant, density } = (0, import_useProgressBarPropsContext._useSharedProgressBarPropsContext)();
54
+ const { density } = (0, import_useProgressBarPropsContext._useSharedProgressBarPropsContext)();
55
55
  const childIsText = (0, import_is_string_children.isStringChildren)(children);
56
56
  return /* @__PURE__ */ import_react.default.createElement(
57
57
  "div",
@@ -60,7 +60,7 @@ const ProgressBarValue = (0, import_react.forwardRef)((props, forwardedRef) => {
60
60
  ref: forwardedRef,
61
61
  className: (0, import_clsx.default)(
62
62
  consumerClassName,
63
- (0, import_ProgressBarValue_css.progressBarValueCSS)({ variant, size: density, childIsText }),
63
+ (0, import_ProgressBarValue_css.progressBarValueCSS)({ size: density, childIsText }),
64
64
  (0, import_textStyle_css.textStyleCSS)({ textStyle: "small" })
65
65
  ),
66
66
  style: consumerStyle,
@@ -1,24 +1,4 @@
1
1
  export declare const progressBarValueCSS: import("@vanilla-extract/recipes").RuntimeFn<{
2
- variant: {
3
- onAccent: {
4
- color: string;
5
- };
6
- primary: {
7
- color: string;
8
- };
9
- success: {
10
- color: string;
11
- };
12
- warning: {
13
- color: string;
14
- };
15
- critical: {
16
- color: string;
17
- };
18
- neutral: {
19
- color: string;
20
- };
21
- };
22
2
  size: {
23
3
  condensed: {};
24
4
  default: {
@@ -20,7 +20,8 @@ __export(ProgressBarValue_css_exports, {
20
20
  progressBarValueCSS: () => progressBarValueCSS
21
21
  });
22
22
  module.exports = __toCommonJS(ProgressBarValue_css_exports);
23
+ var import_ProgressBar_css_ts_vanilla = require("./ProgressBar.css");
23
24
  var import_ellipsis_css_ts_vanilla = require("../../styles/ellipsis.css");
24
25
  var import_ProgressBarValue_css_ts_vanilla = require("./ProgressBarValue.css");
25
26
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
26
- var progressBarValueCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ri4i7o0-0-85-100", variantClassNames: { variant: { onAccent: "_1ri4i7o1-0-85-100", primary: "_1ri4i7o2-0-85-100", success: "_1ri4i7o3-0-85-100", warning: "_1ri4i7o4-0-85-100", critical: "_1ri4i7o5-0-85-100", neutral: "_1ri4i7o6-0-85-100" }, size: { condensed: "_1ri4i7o7-0-85-100", "default": "_1ri4i7o8-0-85-100" }, childIsText: { true: "_1ri4i7o9-0-85-100", false: "_1ri4i7oa-0-85-100" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7ob-0-85-100 _oqqp1n0-0-85-100"]] });
27
+ var progressBarValueCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ri4i7o0-0-85-110", variantClassNames: { size: { condensed: "_1ri4i7o1-0-85-110", "default": "_1ri4i7o2-0-85-110" }, childIsText: { true: "_1ri4i7o3-0-85-110", false: "_1ri4i7o4-0-85-110" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7o5-0-85-110 _oqqp1n0-0-85-110"]] });
@@ -1,4 +1,4 @@
1
- @keyframes _kvldjh0-0-85-100 {
1
+ @keyframes _kvldjh3-0-85-110 {
2
2
  0% {
3
3
  transform: rotate(0deg);
4
4
  }
@@ -6,47 +6,79 @@
6
6
  transform: rotate(360deg);
7
7
  }
8
8
  }
9
- ._kvldjh1-0-85-100 {
9
+ ._kvldjh4-0-85-110 {
10
10
  display: inline-block;
11
- color: var(--_17bwkb02-0-85-100);
12
11
  }
13
- ._kvldjh2-0-85-100 {
12
+ ._kvldjh5-0-85-110 {
14
13
  display: block;
15
14
  transform: rotate(-90deg);
16
15
  }
17
- ._kvldjh3-0-85-100 {
18
- stroke: currentColor;
16
+ ._kvldjh6-0-85-110 {
17
+ stroke: var(--_kvldjh2-0-85-110);
19
18
  transform-origin: center;
20
19
  }
21
- ._kvldjh4-0-85-100 {
20
+ ._kvldjh7-0-85-110 {
22
21
  stroke-dasharray: 90 360;
23
22
  transform-origin: 50% 50%;
24
- animation-name: _kvldjh0-0-85-100;
23
+ animation-name: _kvldjh3-0-85-110;
25
24
  animation-duration: var(--dt-timings-slow-gentle, 800ms);
26
25
  animation-timing-function: cubic-bezier(0.5, 0.15, 0.5, 0.8);
27
26
  animation-iteration-count: infinite;
28
27
  }
29
- ._kvldjh5-0-85-100 {
28
+ ._kvldjh8-0-85-110 {
30
29
  animation-duration: var(--dt-timings-fast-moderate, 200ms);
31
30
  transition-property: stroke-dashoffset;
32
31
  }
33
- ._kvldjh6-0-85-100 {
34
- stroke: var(--dt-colors-border-neutral-default, #d2d3e1);
32
+ ._kvldjh9-0-85-110 {
33
+ stroke: var(--_kvldjh1-0-85-110);
35
34
  }
36
- ._kvldjh7-0-85-100 {
37
- stroke: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
38
- }
39
- ._kvldjhd-0-85-100 {
35
+ ._kvldjha-0-85-110 {
40
36
  display: flex;
41
37
  flex-direction: column;
42
38
  align-items: center;
39
+ color: var(--_kvldjh0-0-85-110);
43
40
  }
44
- ._kvldjhe-0-85-100 {
41
+ ._kvldjhb-0-85-110 {
45
42
  gap: var(--dt-spacings-size-8, 8px);
46
43
  }
47
- ._kvldjhf-0-85-100 {
44
+ ._kvldjhc-0-85-110 {
48
45
  gap: var(--dt-spacings-size-12, 12px);
49
46
  }
50
- ._kvldjhg-0-85-100 {
51
- color: var(--_6levse0-0-85-100);
47
+ ._kvldjhd-0-85-110 {
48
+ --_kvldjh2-0-85-110: var(--dt-colors-border-critical-accent, #b80031);
49
+ }
50
+ ._kvldjhe-0-85-110 {
51
+ --_kvldjh2-0-85-110: var(--dt-colors-border-neutral-accent, #545587);
52
+ }
53
+ ._kvldjhf-0-85-110 {
54
+ --_kvldjh2-0-85-110: var(--dt-colors-border-primary-accent, #454cc9);
55
+ }
56
+ ._kvldjhg-0-85-110 {
57
+ --_kvldjh2-0-85-110: var(--dt-colors-border-success-accent, #2c6360);
58
+ }
59
+ ._kvldjhh-0-85-110 {
60
+ --_kvldjh2-0-85-110: var(--dt-colors-border-warning-accent, #805100);
61
+ }
62
+ ._kvldjhi-0-85-110 {
63
+ --_kvldjh0-0-85-110: var(--dt-colors-text-neutral-default, #2b2a58);
64
+ --_kvldjh1-0-85-110: var(--dt-colors-border-neutral-default, #d2d3e1);
65
+ }
66
+ ._kvldjhj-0-85-110 {
67
+ --_kvldjh0-0-85-110: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
68
+ --_kvldjh1-0-85-110: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
69
+ }
70
+ ._kvldjhk-0-85-110 {
71
+ --_kvldjh2-0-85-110: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
72
+ }
73
+ ._kvldjhl-0-85-110 {
74
+ --_kvldjh2-0-85-110: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
75
+ }
76
+ ._kvldjhm-0-85-110 {
77
+ --_kvldjh2-0-85-110: var(--dt-colors-border-warning-on-accent-default, #272025);
78
+ }
79
+ ._kvldjhn-0-85-110 {
80
+ --_kvldjh2-0-85-110: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
81
+ }
82
+ ._kvldjho-0-85-110 {
83
+ --_kvldjh2-0-85-110: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
52
84
  }
@@ -39,7 +39,7 @@ export interface ProgressCircleProps extends WithChildren, DOMProps, AriaLabelin
39
39
  variant?: RoleVariantType;
40
40
  /**
41
41
  * Controls the color of the progress.
42
- * @defaultValue 'primary'
42
+ * @defaultValue 'primary' or a container's color.
43
43
  */
44
44
  color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';
45
45
  /**
@@ -36,7 +36,7 @@ var import_useProgressAriaProps = require("./hooks/useProgressAriaProps.js");
36
36
  var import_ProgressCircle_css = require("./ProgressCircle.sty.js");
37
37
  var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
38
38
  var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
39
- var import_colorUtils_css = require("../../styles/colorUtils.sty.js");
39
+ var import_Container = require("../../layouts/container/Container.js");
40
40
  var import_container_css = require("../../styles/container.sty.js");
41
41
  var import_textStyle_css = require("../../styles/textStyle.sty.js");
42
42
  const progressCircleSizes = {
@@ -51,8 +51,8 @@ const ProgressCircle = (0, import_react.forwardRef)(
51
51
  min = 0,
52
52
  max = 100,
53
53
  size = "large",
54
- variant = "primary",
55
- color = "primary",
54
+ variant,
55
+ color,
56
56
  children,
57
57
  id: propId,
58
58
  "aria-valuetext": ariaValuetext,
@@ -69,6 +69,17 @@ const ProgressCircle = (0, import_react.forwardRef)(
69
69
  max,
70
70
  ariaValuetext
71
71
  );
72
+ const containerColoring = (0, import_Container.useContainerColoring)();
73
+ const cascadedVariant = variant !== void 0 && variant === "onAccent" ? "accent" : containerColoring.variant;
74
+ const derivedVariant = cascadedVariant === "accent" ? "accent" : "default";
75
+ const fallbackColor = containerColoring.default ? "primary" : containerColoring.color;
76
+ let derivedColor = fallbackColor;
77
+ if (variant !== void 0 && variant !== "onAccent") {
78
+ derivedColor = variant;
79
+ }
80
+ if (color !== void 0) {
81
+ derivedColor = color;
82
+ }
72
83
  const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(remainingProps);
73
84
  const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(remainingProps, ariaLabelingProps);
74
85
  const generatedId = (0, import_react.useId)();
@@ -99,10 +110,14 @@ const ProgressCircle = (0, import_react.forwardRef)(
99
110
  className: (0, import_clsx.default)(
100
111
  consumerClassName,
101
112
  (0, import_container_css.containerColorsCSS)({
102
- color: "neutral",
103
- variant: variant === "onAccent" ? "accent" : "default"
113
+ color: derivedColor,
114
+ variant: derivedVariant
104
115
  }),
105
- (0, import_ProgressCircle_css.progressCircleContainerCSS)({ size })
116
+ (0, import_ProgressCircle_css.progressCircleContainerCSS)({
117
+ size,
118
+ color: derivedColor,
119
+ variant: derivedVariant
120
+ })
106
121
  ),
107
122
  style: consumerStyle,
108
123
  ...forwardProps
@@ -111,10 +126,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
111
126
  "span",
112
127
  {
113
128
  id,
114
- className: (0, import_clsx.default)(
115
- (0, import_colorUtils_css.colorUtilsCSS)({ color: variant || color, variant: "accent" }),
116
- import_ProgressCircle_css.progressCircleRootCSS
117
- ),
129
+ className: (0, import_clsx.default)(import_ProgressCircle_css.progressCircleRootCSS),
118
130
  style: {
119
131
  height: `${progressCircleSizes[size]}px`,
120
132
  width: `${progressCircleSizes[size]}px`
@@ -126,7 +138,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
126
138
  /* @__PURE__ */ import_react.default.createElement(
127
139
  "svg",
128
140
  {
129
- className: import_ProgressCircle_css.ProgressCircleSVGCSS,
141
+ className: import_ProgressCircle_css.progressCircleSvgCss,
130
142
  viewBox: `0 0 ${progressCircleSizes[size]} ${progressCircleSizes[size]}`,
131
143
  width: "100%",
132
144
  height: "100%"
@@ -135,9 +147,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
135
147
  "circle",
136
148
  {
137
149
  fill: "none",
138
- className: (0, import_clsx.default)(
139
- (0, import_ProgressCircle_css.progressCircleBackgroundCSS)({ variant: variant || color })
140
- ),
150
+ className: (0, import_clsx.default)(import_ProgressCircle_css.progressCircleBackgroundCSS),
141
151
  cx: progressCircleSizes[size] / 2,
142
152
  cy: progressCircleSizes[size] / 2,
143
153
  r: (progressCircleSizes[size] - progressCircleThickness) / 2,
@@ -163,7 +173,6 @@ const ProgressCircle = (0, import_react.forwardRef)(
163
173
  "label",
164
174
  {
165
175
  className: (0, import_clsx.default)(
166
- import_ProgressCircle_css.progressCircleChildCSS,
167
176
  (0, import_textStyle_css.textStyleCSS)({ textStyle: size === "small" ? "small" : "base" })
168
177
  ),
169
178
  htmlFor: id
@@ -1,5 +1,5 @@
1
1
  export declare const progressCircleRootCSS: string;
2
- export declare const ProgressCircleSVGCSS: string;
2
+ export declare const progressCircleSvgCss: string;
3
3
  export declare const progressCircleCSS: import("@vanilla-extract/recipes").RuntimeFn<{
4
4
  indeterminate: {
5
5
  true: {
@@ -16,18 +16,7 @@ export declare const progressCircleCSS: import("@vanilla-extract/recipes").Runti
16
16
  };
17
17
  };
18
18
  }>;
19
- export declare const progressCircleBackgroundCSS: import("@vanilla-extract/recipes").RuntimeFn<{
20
- variant: {
21
- onAccent: {
22
- stroke: string;
23
- };
24
- primary: {};
25
- success: {};
26
- warning: {};
27
- critical: {};
28
- neutral: {};
29
- };
30
- }>;
19
+ export declare const progressCircleBackgroundCSS: string;
31
20
  export declare const progressCircleContainerCSS: import("@vanilla-extract/recipes").RuntimeFn<{
32
21
  size: {
33
22
  small: {
@@ -37,5 +26,43 @@ export declare const progressCircleContainerCSS: import("@vanilla-extract/recipe
37
26
  gap: string;
38
27
  };
39
28
  };
29
+ color: {
30
+ critical: {
31
+ vars: {
32
+ [x: string]: string;
33
+ };
34
+ };
35
+ neutral: {
36
+ vars: {
37
+ [x: string]: string;
38
+ };
39
+ };
40
+ primary: {
41
+ vars: {
42
+ [x: string]: string;
43
+ };
44
+ };
45
+ success: {
46
+ vars: {
47
+ [x: string]: string;
48
+ };
49
+ };
50
+ warning: {
51
+ vars: {
52
+ [x: string]: string;
53
+ };
54
+ };
55
+ };
56
+ variant: {
57
+ default: {
58
+ vars: {
59
+ [x: string]: string;
60
+ };
61
+ };
62
+ accent: {
63
+ vars: {
64
+ [x: string]: string;
65
+ };
66
+ };
67
+ };
40
68
  }>;
41
- export declare const progressCircleChildCSS: string;
@@ -17,21 +17,17 @@ var __copyProps = (to, from, except, desc) => {
17
17
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
18
  var ProgressCircle_css_exports = {};
19
19
  __export(ProgressCircle_css_exports, {
20
- ProgressCircleSVGCSS: () => ProgressCircleSVGCSS,
21
20
  progressCircleBackgroundCSS: () => progressCircleBackgroundCSS,
22
21
  progressCircleCSS: () => progressCircleCSS,
23
- progressCircleChildCSS: () => progressCircleChildCSS,
24
22
  progressCircleContainerCSS: () => progressCircleContainerCSS,
25
- progressCircleRootCSS: () => progressCircleRootCSS
23
+ progressCircleRootCSS: () => progressCircleRootCSS,
24
+ progressCircleSvgCss: () => progressCircleSvgCss
26
25
  });
27
26
  module.exports = __toCommonJS(ProgressCircle_css_exports);
28
- var import_colorUtils_css_ts_vanilla = require("../../styles/colorUtils.css");
29
- var import_container_css_ts_vanilla = require("../../styles/container.css");
30
27
  var import_ProgressCircle_css_ts_vanilla = require("./ProgressCircle.css");
31
28
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
32
- var ProgressCircleSVGCSS = "_kvldjh2-0-85-100";
33
- var progressCircleBackgroundCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-0-85-100", variantClassNames: { variant: { onAccent: "_kvldjh7-0-85-100", primary: "_kvldjh8-0-85-100", success: "_kvldjh9-0-85-100", warning: "_kvldjha-0-85-100", critical: "_kvldjhb-0-85-100", neutral: "_kvldjhc-0-85-100" } }, defaultVariants: {}, compoundVariants: [] });
34
- var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh3-0-85-100", variantClassNames: { indeterminate: { true: "_kvldjh4-0-85-100", false: "_kvldjh5-0-85-100" } }, defaultVariants: {}, compoundVariants: [] });
35
- var progressCircleChildCSS = "_kvldjhg-0-85-100";
36
- var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjhd-0-85-100", variantClassNames: { size: { small: "_kvldjhe-0-85-100", large: "_kvldjhf-0-85-100" } }, defaultVariants: {}, compoundVariants: [] });
37
- var progressCircleRootCSS = "_kvldjh1-0-85-100";
29
+ var progressCircleBackgroundCSS = "_kvldjh9-0-85-110";
30
+ var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-0-85-110", variantClassNames: { indeterminate: { true: "_kvldjh7-0-85-110", false: "_kvldjh8-0-85-110" } }, defaultVariants: {}, compoundVariants: [] });
31
+ var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-0-85-110", variantClassNames: { size: { small: "_kvldjhb-0-85-110", large: "_kvldjhc-0-85-110" }, color: { critical: "_kvldjhd-0-85-110", neutral: "_kvldjhe-0-85-110", primary: "_kvldjhf-0-85-110", success: "_kvldjhg-0-85-110", warning: "_kvldjhh-0-85-110" }, variant: { "default": "_kvldjhi-0-85-110", accent: "_kvldjhj-0-85-110" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-0-85-110"], [{ color: "success", variant: "accent" }, "_kvldjhl-0-85-110"], [{ color: "warning", variant: "accent" }, "_kvldjhm-0-85-110"], [{ color: "critical", variant: "accent" }, "_kvldjhn-0-85-110"], [{ color: "neutral", variant: "accent" }, "_kvldjho-0-85-110"]] });
32
+ var progressCircleRootCSS = "_kvldjh4-0-85-110";
33
+ var progressCircleSvgCss = "_kvldjh5-0-85-110";
@@ -1,8 +1,6 @@
1
1
  import React from 'react';
2
- import { RoleVariantType } from '../../../core/types/role-variant.js';
3
2
  export type SharedProgressBarProps = {
4
3
  id: string;
5
- variant: RoleVariantType;
6
4
  density: 'default' | 'condensed';
7
5
  };
8
6
  /** Context provider for `ProgressBarProps` props meant to be provided to all its progressbar-related child nodes. */
@@ -33,6 +33,5 @@ module.exports = __toCommonJS(SharedProgressBarPropsContext_exports);
33
33
  var import_react = __toESM(require("react"));
34
34
  const SharedProgressBarPropsContext = import_react.default.createContext({
35
35
  id: "",
36
- density: "default",
37
- variant: "neutral"
36
+ density: "default"
38
37
  });
@@ -26,7 +26,6 @@ function _useSharedProgressBarPropsContext() {
26
26
  const context = (0, import_react.useContext)(import_SharedProgressBarPropsContext.SharedProgressBarPropsContext);
27
27
  return {
28
28
  id: context.id,
29
- variant: context.variant,
30
29
  density: context.density
31
30
  };
32
31
  }
@@ -1,4 +1,4 @@
1
- @keyframes _1a1ozfd0-0-85-100 {
1
+ @keyframes _1a1ozfd0-0-85-110 {
2
2
  0% {
3
3
  transform: translateX(-100%) scaleX(0);
4
4
  }
@@ -6,12 +6,12 @@
6
6
  transform: translateX(100%) scaleX(1.5);
7
7
  }
8
8
  }
9
- ._1a1ozfd1-0-85-100 {
9
+ ._1a1ozfd1-0-85-110 {
10
10
  position: relative;
11
11
  overflow: hidden;
12
12
  background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
13
13
  }
14
- ._1a1ozfd1-0-85-100:after {
14
+ ._1a1ozfd1-0-85-110:after {
15
15
  content: "";
16
16
  position: absolute;
17
17
  top: 0;
@@ -21,13 +21,13 @@
21
21
  background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
22
22
  animation-iteration-count: infinite;
23
23
  transform-origin: left center;
24
- animation-name: _1a1ozfd0-0-85-100;
24
+ animation-name: _1a1ozfd0-0-85-110;
25
25
  animation-duration: var(--dt-timings-slow-gentle, 800ms);
26
26
  animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
27
27
  }
28
- ._1a1ozfd2-0-85-100 {
28
+ ._1a1ozfd2-0-85-110 {
29
29
  border-radius: var(--dt-borders-radius-container-subdued, 8px);
30
30
  }
31
- ._1a1ozfd3-0-85-100 {
31
+ ._1a1ozfd3-0-85-110 {
32
32
  border-radius: 9999px;
33
33
  }
@@ -22,4 +22,4 @@ __export(Skeleton_css_exports, {
22
22
  module.exports = __toCommonJS(Skeleton_css_exports);
23
23
  var import_Skeleton_css_ts_vanilla = require("./Skeleton.css");
24
24
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
25
- var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd1-0-85-100", variantClassNames: { variant: { "default": "_1a1ozfd2-0-85-100", rounded: "_1a1ozfd3-0-85-100" } }, defaultVariants: {}, compoundVariants: [] });
25
+ var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd1-0-85-110", variantClassNames: { variant: { "default": "_1a1ozfd2-0-85-110", rounded: "_1a1ozfd3-0-85-110" } }, defaultVariants: {}, compoundVariants: [] });
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import type { WithChildren } from '../../types/with-children.js';
3
3
  /**
4
4
  * Prop definition of the `FocusScope` component.
5
- * @internal
5
+ * @public
6
6
  */
7
7
  export interface FocusScopeProps extends WithChildren {
8
8
  /**
@@ -21,7 +21,7 @@ export interface FocusScopeProps extends WithChildren {
21
21
  * want to create a custom overlay, you can wrap the content of your overlay in the
22
22
  * `FocusScope` to help you make the overlay accessible and handle focus
23
23
  * appropriately.
24
- * @internal
24
+ * @public
25
25
  */
26
26
  export declare const FocusScope: {
27
27
  (props: FocusScopeProps): React.JSX.Element;
package/core/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';
2
- export { FocusScope as _FocusScope, type FocusScopeProps as _FocusScopeProps, } from './components/focus-scope/FocusScope.js';
2
+ export { FocusScope, type FocusScopeProps, } from './components/focus-scope/FocusScope.js';
3
3
  export { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';
4
4
  export { useCurrentTheme } from './hooks/useCurrentTheme.js';
5
5
  export { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';
package/core/index.js CHANGED
@@ -18,8 +18,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
18
18
  var core_exports = {};
19
19
  __export(core_exports, {
20
20
  AppRoot: () => import_AppRoot.AppRoot,
21
+ FocusScope: () => import_FocusScope.FocusScope,
21
22
  _FocusProvider: () => import_FocusProvider.FocusProvider,
22
- _FocusScope: () => import_FocusScope.FocusScope,
23
23
  _attemptFocus: () => import_attempt_focus.attemptFocus,
24
24
  _focusFirstDescendant: () => import_focus_first_descendant.focusFirstDescendant,
25
25
  _getFirstFocusableChild: () => import_get_first_focusable_child.getFirstFocusableChild,