@dynatrace/strato-components 1.9.1 → 1.11.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 (210) hide show
  1. package/README.md +11 -6
  2. package/buttons/button/Button.css +18 -18
  3. package/buttons/button/Button.d.ts +2 -3
  4. package/buttons/button/Button.sty.js +4 -4
  5. package/content/progress/ProgressBar.css +72 -72
  6. package/content/progress/ProgressBar.js +2 -1
  7. package/content/progress/ProgressBar.sty.js +5 -5
  8. package/content/progress/ProgressBarIcon.css +2 -2
  9. package/content/progress/ProgressBarIcon.sty.js +1 -1
  10. package/content/progress/ProgressBarLabel.css +3 -3
  11. package/content/progress/ProgressBarLabel.sty.js +1 -1
  12. package/content/progress/ProgressBarValue.css +5 -5
  13. package/content/progress/ProgressBarValue.sty.js +1 -1
  14. package/content/progress/ProgressCircle.css +40 -40
  15. package/content/progress/ProgressCircle.js +2 -1
  16. package/content/progress/ProgressCircle.sty.js +5 -5
  17. package/content/skeleton/Skeleton.css +7 -7
  18. package/content/skeleton/Skeleton.sty.js +1 -1
  19. package/core/components/app-root/AppRoot.css +28 -125
  20. package/core/hooks/useId.d.ts +24 -0
  21. package/core/hooks/useId.js +31 -0
  22. package/core/index.d.ts +1 -0
  23. package/core/index.js +3 -1
  24. package/core/styles/focusRing.css +61 -61
  25. package/core/styles/focusRing.sty.js +2 -2
  26. package/core/styles/useFocusRing.js +2 -2
  27. package/core/utils/colorUtils.css +60 -60
  28. package/core/utils/colorUtils.sty.js +2 -2
  29. package/esm/buttons/button/Button.css +18 -18
  30. package/esm/buttons/button/Button.js.map +2 -2
  31. package/esm/buttons/button/Button.sty.js +4 -4
  32. package/esm/buttons/button/Button.sty.js.map +2 -2
  33. package/esm/content/progress/ProgressBar.css +72 -72
  34. package/esm/content/progress/ProgressBar.js +1 -1
  35. package/esm/content/progress/ProgressBar.js.map +2 -2
  36. package/esm/content/progress/ProgressBar.sty.js +5 -5
  37. package/esm/content/progress/ProgressBar.sty.js.map +2 -2
  38. package/esm/content/progress/ProgressBarIcon.css +2 -2
  39. package/esm/content/progress/ProgressBarIcon.sty.js +1 -1
  40. package/esm/content/progress/ProgressBarIcon.sty.js.map +1 -1
  41. package/esm/content/progress/ProgressBarLabel.css +3 -3
  42. package/esm/content/progress/ProgressBarLabel.sty.js +1 -1
  43. package/esm/content/progress/ProgressBarLabel.sty.js.map +2 -2
  44. package/esm/content/progress/ProgressBarValue.css +5 -5
  45. package/esm/content/progress/ProgressBarValue.sty.js +1 -1
  46. package/esm/content/progress/ProgressBarValue.sty.js.map +2 -2
  47. package/esm/content/progress/ProgressCircle.css +40 -40
  48. package/esm/content/progress/ProgressCircle.js +2 -1
  49. package/esm/content/progress/ProgressCircle.js.map +2 -2
  50. package/esm/content/progress/ProgressCircle.sty.js +5 -5
  51. package/esm/content/progress/ProgressCircle.sty.js.map +2 -2
  52. package/esm/content/skeleton/Skeleton.css +7 -7
  53. package/esm/content/skeleton/Skeleton.sty.js +1 -1
  54. package/esm/content/skeleton/Skeleton.sty.js.map +2 -2
  55. package/esm/core/components/app-root/AppRoot.css +28 -125
  56. package/esm/core/hooks/useId.js +12 -0
  57. package/esm/core/hooks/useId.js.map +7 -0
  58. package/esm/core/index.js +3 -1
  59. package/esm/core/index.js.map +2 -2
  60. package/esm/core/styles/focusRing.css +61 -61
  61. package/esm/core/styles/focusRing.sty.js +2 -2
  62. package/esm/core/styles/focusRing.sty.js.map +2 -2
  63. package/esm/core/styles/useFocusRing.js +2 -2
  64. package/esm/core/styles/useFocusRing.js.map +2 -2
  65. package/esm/core/utils/colorUtils.css +60 -60
  66. package/esm/core/utils/colorUtils.sty.js +2 -2
  67. package/esm/core/utils/colorUtils.sty.js.map +2 -2
  68. package/esm/layouts/container/Container.css +5 -5
  69. package/esm/layouts/container/Container.js +5 -3
  70. package/esm/layouts/container/Container.js.map +2 -2
  71. package/esm/layouts/container/Container.sty.js +1 -1
  72. package/esm/layouts/container/Container.sty.js.map +1 -1
  73. package/esm/layouts/divider/Divider.css +6 -6
  74. package/esm/layouts/divider/Divider.sty.js +1 -1
  75. package/esm/layouts/divider/Divider.sty.js.map +2 -2
  76. package/esm/layouts/surface/Surface.css +39 -39
  77. package/esm/layouts/surface/Surface.sty.js +2 -2
  78. package/esm/layouts/surface/Surface.sty.js.map +2 -2
  79. package/esm/layouts/surface/variables.sty.js +1 -1
  80. package/esm/layouts/surface/variables.sty.js.map +1 -1
  81. package/esm/styles/colorUtils.css +60 -60
  82. package/esm/styles/colorUtils.sty.js +2 -2
  83. package/esm/styles/colorUtils.sty.js.map +2 -2
  84. package/esm/styles/container.css +47 -47
  85. package/esm/styles/container.sty.js +2 -2
  86. package/esm/styles/container.sty.js.map +2 -2
  87. package/esm/styles/ellipsis.css +1 -1
  88. package/esm/styles/ellipsis.sty.js +1 -1
  89. package/esm/styles/ellipsis.sty.js.map +1 -1
  90. package/esm/styles/field.css +153 -153
  91. package/esm/styles/field.sty.js +2 -2
  92. package/esm/styles/field.sty.js.map +2 -2
  93. package/esm/styles/sprinkles.css +262 -262
  94. package/esm/styles/sprinkles.sty.js +1 -1
  95. package/esm/styles/sprinkles.sty.js.map +2 -2
  96. package/esm/styles/textStyle.css +8 -8
  97. package/esm/styles/textStyle.sty.js +1 -1
  98. package/esm/styles/textStyle.sty.js.map +2 -2
  99. package/esm/typography/block-quote/Blockquote.css +2 -2
  100. package/esm/typography/block-quote/Blockquote.js.map +2 -2
  101. package/esm/typography/block-quote/Blockquote.sty.js +1 -1
  102. package/esm/typography/block-quote/Blockquote.sty.js.map +1 -1
  103. package/esm/typography/code/Code.css +2 -2
  104. package/esm/typography/code/Code.js.map +2 -2
  105. package/esm/typography/code/Code.sty.js +1 -1
  106. package/esm/typography/code/Code.sty.js.map +1 -1
  107. package/esm/typography/emphasis/Emphasis.css +1 -1
  108. package/esm/typography/emphasis/Emphasis.js.map +2 -2
  109. package/esm/typography/emphasis/Emphasis.sty.js +1 -1
  110. package/esm/typography/emphasis/Emphasis.sty.js.map +1 -1
  111. package/esm/typography/external-link/ExternalLink.css +5 -5
  112. package/esm/typography/external-link/ExternalLink.js +2 -4
  113. package/esm/typography/external-link/ExternalLink.js.map +2 -2
  114. package/esm/typography/external-link/ExternalLink.sty.js +1 -1
  115. package/esm/typography/external-link/ExternalLink.sty.js.map +1 -1
  116. package/esm/typography/heading/Heading.css +7 -7
  117. package/esm/typography/heading/Heading.js.map +2 -2
  118. package/esm/typography/heading/Heading.sty.js +1 -1
  119. package/esm/typography/heading/Heading.sty.js.map +2 -2
  120. package/esm/typography/highlight/Highlight.css +2 -2
  121. package/esm/typography/highlight/Highlight.js.map +2 -2
  122. package/esm/typography/highlight/Highlight.sty.js +2 -2
  123. package/esm/typography/highlight/Highlight.sty.js.map +1 -1
  124. package/esm/typography/link/Link.css +3 -6
  125. package/esm/typography/link/Link.js +9 -8
  126. package/esm/typography/link/Link.js.map +2 -2
  127. package/esm/typography/link/Link.sty.js +2 -2
  128. package/esm/typography/link/Link.sty.js.map +2 -2
  129. package/esm/typography/list/List.css +4 -4
  130. package/esm/typography/list/List.sty.js +2 -2
  131. package/esm/typography/list/List.sty.js.map +1 -1
  132. package/esm/typography/paragraph/Paragraph.css +3 -3
  133. package/esm/typography/paragraph/Paragraph.js.map +2 -2
  134. package/esm/typography/paragraph/Paragraph.sty.js +1 -1
  135. package/esm/typography/paragraph/Paragraph.sty.js.map +2 -2
  136. package/esm/typography/strikethrough/Strikethrough.css +1 -1
  137. package/esm/typography/strikethrough/Strikethrough.js.map +2 -2
  138. package/esm/typography/strikethrough/Strikethrough.sty.js +1 -1
  139. package/esm/typography/strikethrough/Strikethrough.sty.js.map +1 -1
  140. package/esm/typography/strong/Strong.css +1 -1
  141. package/esm/typography/strong/Strong.js.map +2 -2
  142. package/esm/typography/strong/Strong.sty.js +1 -1
  143. package/esm/typography/strong/Strong.sty.js.map +1 -1
  144. package/esm/typography/text/Text.css +3 -3
  145. package/esm/typography/text/Text.sty.js +1 -1
  146. package/esm/typography/text/Text.sty.js.map +2 -2
  147. package/esm/typography/text-ellipsis/TextEllipsis.css +6 -6
  148. package/esm/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
  149. package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map +2 -2
  150. package/layouts/container/Container.css +5 -5
  151. package/layouts/container/Container.d.ts +2 -1
  152. package/layouts/container/Container.js +4 -3
  153. package/layouts/container/Container.sty.js +1 -1
  154. package/layouts/divider/Divider.css +6 -6
  155. package/layouts/divider/Divider.sty.js +1 -1
  156. package/layouts/surface/Surface.css +39 -39
  157. package/layouts/surface/Surface.sty.js +2 -2
  158. package/layouts/surface/variables.sty.js +1 -1
  159. package/package.json +3 -3
  160. package/styles/colorUtils.css +60 -60
  161. package/styles/colorUtils.sty.js +2 -2
  162. package/styles/container.css +47 -47
  163. package/styles/container.sty.js +2 -2
  164. package/styles/ellipsis.css +1 -1
  165. package/styles/ellipsis.sty.js +1 -1
  166. package/styles/field.css +153 -153
  167. package/styles/field.sty.js +2 -2
  168. package/styles/sprinkles.css +262 -262
  169. package/styles/sprinkles.sty.js +1 -1
  170. package/styles/textStyle.css +8 -8
  171. package/styles/textStyle.sty.js +1 -1
  172. package/typography/block-quote/Blockquote.css +2 -2
  173. package/typography/block-quote/Blockquote.d.ts +3 -1
  174. package/typography/block-quote/Blockquote.sty.js +1 -1
  175. package/typography/code/Code.css +2 -2
  176. package/typography/code/Code.d.ts +3 -1
  177. package/typography/code/Code.sty.js +1 -1
  178. package/typography/emphasis/Emphasis.css +1 -1
  179. package/typography/emphasis/Emphasis.d.ts +3 -1
  180. package/typography/emphasis/Emphasis.sty.js +1 -1
  181. package/typography/external-link/ExternalLink.css +5 -5
  182. package/typography/external-link/ExternalLink.d.ts +3 -1
  183. package/typography/external-link/ExternalLink.js +2 -2
  184. package/typography/external-link/ExternalLink.sty.js +1 -1
  185. package/typography/heading/Heading.css +7 -7
  186. package/typography/heading/Heading.d.ts +4 -1
  187. package/typography/heading/Heading.sty.js +1 -1
  188. package/typography/highlight/Highlight.css +2 -2
  189. package/typography/highlight/Highlight.d.ts +2 -1
  190. package/typography/highlight/Highlight.sty.js +2 -2
  191. package/typography/link/Link.css +3 -6
  192. package/typography/link/Link.d.ts +4 -1
  193. package/typography/link/Link.js +9 -6
  194. package/typography/link/Link.sty.d.ts +1 -1
  195. package/typography/link/Link.sty.js +2 -2
  196. package/typography/list/List.css +4 -4
  197. package/typography/list/List.sty.js +2 -2
  198. package/typography/paragraph/Paragraph.css +3 -3
  199. package/typography/paragraph/Paragraph.d.ts +3 -1
  200. package/typography/paragraph/Paragraph.sty.js +1 -1
  201. package/typography/strikethrough/Strikethrough.css +1 -1
  202. package/typography/strikethrough/Strikethrough.d.ts +3 -1
  203. package/typography/strikethrough/Strikethrough.sty.js +1 -1
  204. package/typography/strong/Strong.css +1 -1
  205. package/typography/strong/Strong.d.ts +3 -1
  206. package/typography/strong/Strong.sty.js +1 -1
  207. package/typography/text/Text.css +3 -3
  208. package/typography/text/Text.sty.js +1 -1
  209. package/typography/text-ellipsis/TextEllipsis.css +6 -6
  210. package/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
@@ -1,5 +1,7 @@
1
- import { type DataTestId, type StylingProps, type WithChildren } from '../../core/index.js';
1
+ import type { DataTestId } from '../../core/types/data-props.js';
2
2
  import type { MaskingProps } from '../../core/types/masking-props.js';
3
+ import type { StylingProps } from '../../core/types/styling-props.js';
4
+ import type { WithChildren } from '../../core/types/with-children.js';
3
5
  /**
4
6
  * The props for the Strong component.
5
7
  * @public
@@ -22,4 +22,4 @@ __export(Strong_css_exports, {
22
22
  });
23
23
  module.exports = __toCommonJS(Strong_css_exports);
24
24
  var import_Strong_css_ts_vanilla = require("./Strong.css");
25
- var strongCSS = "_wxp4dd0-1-9-1";
25
+ var strongCSS = "_wxp4dd0-1-11-0";
@@ -1,16 +1,16 @@
1
- ._rup8ap0-1-9-1 {
1
+ ._rup8ap0-1-11-0 {
2
2
  margin-top: 0;
3
3
  margin-bottom: 0;
4
4
  min-width: 0;
5
5
  overflow-wrap: break-word;
6
6
  }
7
- ._rup8ap1-1-9-1 {
7
+ ._rup8ap1-1-11-0 {
8
8
  display: block;
9
9
  white-space: nowrap;
10
10
  text-overflow: ellipsis;
11
11
  overflow: hidden;
12
12
  }
13
- ._rup8ap2-1-9-1 {
13
+ ._rup8ap2-1-11-0 {
14
14
  display: -webkit-box;
15
15
  -webkit-line-clamp: var(--strato-ellipsis-line-clamp);
16
16
  -webkit-box-orient: vertical;
@@ -23,4 +23,4 @@ __export(Text_css_exports, {
23
23
  module.exports = __toCommonJS(Text_css_exports);
24
24
  var import_Text_css_ts_vanilla = require("./Text.css");
25
25
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
26
- var textCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_rup8ap0-1-9-1", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-1-9-1", multiLine: "_rup8ap2-1-9-1" } }, defaultVariants: {}, compoundVariants: [] });
26
+ var textCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_rup8ap0-1-11-0", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-1-11-0", multiLine: "_rup8ap2-1-11-0" } }, defaultVariants: {}, compoundVariants: [] });
@@ -1,4 +1,4 @@
1
- ._1mnpbqs1-1-9-1 {
1
+ ._1mnpbqs1-1-11-0 {
2
2
  display: inline-block;
3
3
  box-sizing: border-box;
4
4
  vertical-align: middle;
@@ -9,18 +9,18 @@
9
9
  text-decoration: inherit;
10
10
  width: 100%;
11
11
  }
12
- ._1mnpbqs2-1-9-1 {
12
+ ._1mnpbqs2-1-11-0 {
13
13
  text-overflow: ellipsis;
14
14
  direction: rtl;
15
15
  text-align: left;
16
16
  }
17
- ._1mnpbqs2-1-9-1::after, ._1mnpbqs2-1-9-1::before {
17
+ ._1mnpbqs2-1-11-0::after, ._1mnpbqs2-1-11-0::before {
18
18
  content: "‎";
19
19
  }
20
- ._1mnpbqs3-1-9-1 {
20
+ ._1mnpbqs3-1-11-0 {
21
21
  text-overflow: clip;
22
22
  }
23
- ._1mnpbqs3-1-9-1._1mnpbqs0-1-9-1:after {
23
+ ._1mnpbqs3-1-11-0._1mnpbqs0-1-11-0:after {
24
24
  content: attr(data-sourcetext) / "";
25
25
  color: transparent;
26
26
  display: table;
@@ -28,6 +28,6 @@
28
28
  line-height: 0;
29
29
  user-select: none;
30
30
  }
31
- ._1mnpbqs4-1-9-1 {
31
+ ._1mnpbqs4-1-11-0 {
32
32
  text-overflow: ellipsis;
33
33
  }
@@ -24,5 +24,5 @@ __export(TextEllipsis_css_exports, {
24
24
  module.exports = __toCommonJS(TextEllipsis_css_exports);
25
25
  var import_TextEllipsis_css_ts_vanilla = require("./TextEllipsis.css");
26
26
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
27
- var active = "_1mnpbqs0-1-9-1";
28
- var ellipsis = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs1-1-9-1", variantClassNames: { truncationMode: { start: "_1mnpbqs2-1-9-1", middle: "_1mnpbqs3-1-9-1", end: "_1mnpbqs4-1-9-1" } }, defaultVariants: {}, compoundVariants: [] });
27
+ var active = "_1mnpbqs0-1-11-0";
28
+ var ellipsis = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs1-1-11-0", variantClassNames: { truncationMode: { start: "_1mnpbqs2-1-11-0", middle: "_1mnpbqs3-1-11-0", end: "_1mnpbqs4-1-11-0" } }, defaultVariants: {}, compoundVariants: [] });