@fluentui/web-components 3.0.0-beta.89 → 3.0.0-beta.90

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 (128) hide show
  1. package/CHANGELOG.md +12 -2
  2. package/dist/dts/accordion-item/accordion-item.base.d.ts +0 -12
  3. package/dist/dts/accordion-item/accordion-item.d.ts +0 -18
  4. package/dist/dts/avatar/avatar.base.d.ts +0 -12
  5. package/dist/dts/avatar/avatar.d.ts +13 -2
  6. package/dist/dts/badge/badge.d.ts +0 -30
  7. package/dist/dts/button/button.d.ts +0 -24
  8. package/dist/dts/checkbox/checkbox.d.ts +0 -16
  9. package/dist/dts/counter-badge/counter-badge.d.ts +0 -30
  10. package/dist/dts/divider/divider.d.ts +0 -18
  11. package/dist/dts/dropdown/dropdown.d.ts +0 -16
  12. package/dist/dts/image/image.d.ts +0 -36
  13. package/dist/dts/label/label.d.ts +0 -24
  14. package/dist/dts/link/link.d.ts +0 -12
  15. package/dist/dts/message-bar/message-bar.d.ts +0 -18
  16. package/dist/dts/progress-bar/progress-bar.d.ts +0 -12
  17. package/dist/dts/rating-display/rating-display.d.ts +0 -14
  18. package/dist/dts/slider/slider.d.ts +0 -1
  19. package/dist/dts/spinner/spinner.d.ts +0 -12
  20. package/dist/dts/styles/states/index.d.ts +0 -500
  21. package/dist/dts/tablist/tablist.d.ts +0 -8
  22. package/dist/dts/text/text.d.ts +1 -34
  23. package/dist/dts/text-input/text-input.d.ts +0 -12
  24. package/dist/dts/textarea/textarea.d.ts +0 -4
  25. package/dist/dts/tree-item/tree-item.d.ts +1 -1
  26. package/dist/esm/accordion-item/accordion-item.base.js +0 -17
  27. package/dist/esm/accordion-item/accordion-item.base.js.map +1 -1
  28. package/dist/esm/accordion-item/accordion-item.js +0 -26
  29. package/dist/esm/accordion-item/accordion-item.js.map +1 -1
  30. package/dist/esm/accordion-item/accordion-item.styles.js +19 -20
  31. package/dist/esm/accordion-item/accordion-item.styles.js.map +1 -1
  32. package/dist/esm/avatar/avatar.base.js +0 -3
  33. package/dist/esm/avatar/avatar.base.js.map +1 -1
  34. package/dist/esm/avatar/avatar.js +4 -2
  35. package/dist/esm/avatar/avatar.js.map +1 -1
  36. package/dist/esm/avatar/avatar.styles.js +31 -32
  37. package/dist/esm/avatar/avatar.styles.js.map +1 -1
  38. package/dist/esm/badge/badge.js +1 -40
  39. package/dist/esm/badge/badge.js.map +1 -1
  40. package/dist/esm/badge/badge.styles.js +7 -10
  41. package/dist/esm/badge/badge.styles.js.map +1 -1
  42. package/dist/esm/button/button.js +0 -34
  43. package/dist/esm/button/button.js.map +1 -1
  44. package/dist/esm/button/button.styles.js +34 -35
  45. package/dist/esm/button/button.styles.js.map +1 -1
  46. package/dist/esm/checkbox/checkbox.js +1 -22
  47. package/dist/esm/checkbox/checkbox.js.map +1 -1
  48. package/dist/esm/checkbox/checkbox.styles.js +6 -6
  49. package/dist/esm/checkbox/checkbox.styles.js.map +1 -1
  50. package/dist/esm/compound-button/compound-button.styles.js +12 -13
  51. package/dist/esm/compound-button/compound-button.styles.js.map +1 -1
  52. package/dist/esm/counter-badge/counter-badge.js +0 -42
  53. package/dist/esm/counter-badge/counter-badge.js.map +1 -1
  54. package/dist/esm/counter-badge/counter-badge.styles.js +3 -7
  55. package/dist/esm/counter-badge/counter-badge.styles.js.map +1 -1
  56. package/dist/esm/divider/divider.js +0 -26
  57. package/dist/esm/divider/divider.js.map +1 -1
  58. package/dist/esm/divider/divider.styles.js +32 -35
  59. package/dist/esm/divider/divider.styles.js.map +1 -1
  60. package/dist/esm/dropdown/dropdown.js +1 -22
  61. package/dist/esm/dropdown/dropdown.js.map +1 -1
  62. package/dist/esm/dropdown/dropdown.styles.js +18 -18
  63. package/dist/esm/dropdown/dropdown.styles.js.map +1 -1
  64. package/dist/esm/image/image.js +0 -51
  65. package/dist/esm/image/image.js.map +1 -1
  66. package/dist/esm/image/image.styles.js +9 -10
  67. package/dist/esm/image/image.styles.js.map +1 -1
  68. package/dist/esm/label/label.js +0 -32
  69. package/dist/esm/label/label.js.map +1 -1
  70. package/dist/esm/label/label.styles.js +5 -6
  71. package/dist/esm/label/label.styles.js.map +1 -1
  72. package/dist/esm/link/link.js +0 -18
  73. package/dist/esm/link/link.js.map +1 -1
  74. package/dist/esm/link/link.styles.js +4 -5
  75. package/dist/esm/link/link.styles.js.map +1 -1
  76. package/dist/esm/message-bar/message-bar.js +0 -26
  77. package/dist/esm/message-bar/message-bar.js.map +1 -1
  78. package/dist/esm/message-bar/message-bar.styles.js +9 -10
  79. package/dist/esm/message-bar/message-bar.styles.js.map +1 -1
  80. package/dist/esm/progress-bar/progress-bar.js +0 -18
  81. package/dist/esm/progress-bar/progress-bar.js.map +1 -1
  82. package/dist/esm/progress-bar/progress-bar.styles.js +6 -7
  83. package/dist/esm/progress-bar/progress-bar.styles.js.map +1 -1
  84. package/dist/esm/radio-group/radio-group.styles.js +0 -1
  85. package/dist/esm/radio-group/radio-group.styles.js.map +1 -1
  86. package/dist/esm/rating-display/rating-display.js +0 -20
  87. package/dist/esm/rating-display/rating-display.js.map +1 -1
  88. package/dist/esm/rating-display/rating-display.styles.js +16 -19
  89. package/dist/esm/rating-display/rating-display.styles.js.map +1 -1
  90. package/dist/esm/slider/slider.js +1 -6
  91. package/dist/esm/slider/slider.js.map +1 -1
  92. package/dist/esm/slider/slider.styles.js +6 -7
  93. package/dist/esm/slider/slider.styles.js.map +1 -1
  94. package/dist/esm/spinner/spinner.js +0 -18
  95. package/dist/esm/spinner/spinner.js.map +1 -1
  96. package/dist/esm/spinner/spinner.styles.js +8 -9
  97. package/dist/esm/spinner/spinner.styles.js.map +1 -1
  98. package/dist/esm/styles/partials/badge.partials.js +42 -43
  99. package/dist/esm/styles/partials/badge.partials.js.map +1 -1
  100. package/dist/esm/styles/states/index.js +0 -500
  101. package/dist/esm/styles/states/index.js.map +1 -1
  102. package/dist/esm/tablist/tablist.js +1 -14
  103. package/dist/esm/tablist/tablist.js.map +1 -1
  104. package/dist/esm/tablist/tablist.styles.js +26 -27
  105. package/dist/esm/tablist/tablist.styles.js.map +1 -1
  106. package/dist/esm/text/text.js +1 -66
  107. package/dist/esm/text/text.js.map +1 -1
  108. package/dist/esm/text/text.styles.js +26 -27
  109. package/dist/esm/text/text.styles.js.map +1 -1
  110. package/dist/esm/text-input/text-input.js +0 -18
  111. package/dist/esm/text-input/text-input.js.map +1 -1
  112. package/dist/esm/text-input/text-input.styles.js +22 -23
  113. package/dist/esm/text-input/text-input.styles.js.map +1 -1
  114. package/dist/esm/textarea/textarea.js +1 -29
  115. package/dist/esm/textarea/textarea.js.map +1 -1
  116. package/dist/esm/textarea/textarea.styles.js +14 -14
  117. package/dist/esm/textarea/textarea.styles.js.map +1 -1
  118. package/dist/esm/toggle-button/toggle-button.styles.js +19 -20
  119. package/dist/esm/toggle-button/toggle-button.styles.js.map +1 -1
  120. package/dist/esm/tree-item/tree-item.js +1 -1
  121. package/dist/esm/tree-item/tree-item.js.map +1 -1
  122. package/dist/esm/tree-item/tree-item.styles.js.map +1 -1
  123. package/dist/esm/tree-item/tree-item.template.js +1 -1
  124. package/dist/esm/tree-item/tree-item.template.js.map +1 -1
  125. package/dist/web-components.d.ts +13 -363
  126. package/dist/web-components.js +178 -987
  127. package/dist/web-components.min.js +357 -354
  128. package/package.json +1 -1
@@ -1,7 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
3
3
  import { colorBrandStroke1, colorBrandStroke2, colorNeutralStrokeOnBrand2, curveEasyEase, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, } from '../theme/design-tokens.js';
4
- import { extraLargeState, extraSmallState, hugeState, invertedState, largeState, smallState, tinyState, } from '../styles/states/index.js';
5
4
  export const styles = css `
6
5
  ${display('inline-flex')}
7
6
 
@@ -15,27 +14,27 @@ export const styles = css `
15
14
  content-visibility: auto;
16
15
  }
17
16
 
18
- :host(${tinyState}) {
17
+ :host([size='tiny']) {
19
18
  --indicatorSize: ${strokeWidthThick};
20
19
  --size: 20px;
21
20
  }
22
- :host(${extraSmallState}) {
21
+ :host([size='extra-small']) {
23
22
  --indicatorSize: ${strokeWidthThick};
24
23
  --size: 24px;
25
24
  }
26
- :host(${smallState}) {
25
+ :host([size='small']) {
27
26
  --indicatorSize: ${strokeWidthThick};
28
27
  --size: 28px;
29
28
  }
30
- :host(${largeState}) {
29
+ :host([size='large']) {
31
30
  --indicatorSize: ${strokeWidthThicker};
32
31
  --size: 36px;
33
32
  }
34
- :host(${extraLargeState}) {
33
+ :host([size='extra-large']) {
35
34
  --indicatorSize: ${strokeWidthThicker};
36
35
  --size: 40px;
37
36
  }
38
- :host(${hugeState}) {
37
+ :host([size='huge']) {
39
38
  --indicatorSize: ${strokeWidthThickest};
40
39
  --size: 44px;
41
40
  }
@@ -66,7 +65,7 @@ export const styles = css `
66
65
  border-radius: 50%;
67
66
  }
68
67
 
69
- :host(${invertedState}) .background {
68
+ :host([appearance='inverted']) .background {
70
69
  border-color: rgba(255, 255, 255, 0.2);
71
70
  }
72
71
 
@@ -93,7 +92,7 @@ export const styles = css `
93
92
  border-right-color: currentcolor;
94
93
  }
95
94
 
96
- :host(${invertedState}) .indicator {
95
+ :host([appearance='inverted']) .indicator {
97
96
  color: ${colorNeutralStrokeOnBrand2};
98
97
  }
99
98
 
@@ -1 +1 @@
1
- {"version":3,"file":"spinner.styles.js","sourceRoot":"","sources":["../../../src/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,SAAS,GACV,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;uBAIH,kBAAkB;;;;;;;;UAQ/B,SAAS;uBACI,gBAAgB;;;UAG7B,eAAe;uBACF,gBAAgB;;;UAG7B,UAAU;uBACG,gBAAgB;;;UAG7B,UAAU;uBACG,kBAAkB;;;UAG/B,eAAe;uBACF,kBAAkB;;;UAG/B,SAAS;uBACI,mBAAmB;;;;;;;;;;;;;;;;;+CAiBK,aAAa;;;;;;;;;yCASnB,iBAAiB;;;;UAIhD,aAAa;;;;;;;;;;;;;;;;;;;aAmBV,iBAAiB;;;;;;;;UAQpB,aAAa;aACV,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;GASjC,CAAC,CACH,CAAC"}
1
+ {"version":3,"file":"spinner.styles.js","sourceRoot":"","sources":["../../../src/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;uBAIH,kBAAkB;;;;;;;;;uBASlB,gBAAgB;;;;uBAIhB,gBAAgB;;;;uBAIhB,gBAAgB;;;;uBAIhB,kBAAkB;;;;uBAIlB,kBAAkB;;;;uBAIlB,mBAAmB;;;;;;;;;;;;;;;;;+CAiBK,aAAa;;;;;;;;;yCASnB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;aAuB7C,iBAAiB;;;;;;;;;aASjB,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;GASjC,CAAC,CACH,CAAC"}
@@ -1,7 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '../../utils/index.js';
3
3
  import { borderRadiusCircular, colorBrandBackground, colorBrandBackground2, colorBrandForeground1, colorBrandForeground2, colorBrandStroke2, colorNeutralBackground1, colorNeutralBackground4, colorNeutralBackground5, colorNeutralForeground1, colorNeutralForeground1Static, colorNeutralForeground3, colorNeutralForegroundInverted, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralStroke2, colorNeutralStrokeAccessible, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground3, colorPaletteGreenBackground1, colorPaletteGreenBackground3, colorPaletteGreenBorder2, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteRedBackground1, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedForeground1, colorPaletteRedForeground3, colorPaletteYellowBackground1, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowForeground2, colorTransparentStroke, fontFamilyBase, fontSizeBase100, fontSizeBase200, fontWeightSemibold, lineHeightBase100, lineHeightBase200, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, strokeWidthThin, } from '../../theme/design-tokens.js';
4
- import { dangerState, extraLargeState, extraSmallState, ghostState, importantState, informativeState, largeState, outlineState, severeState, smallState, subtleState, successState, tintState, tinyState, warningState, } from '../states/index.js';
5
4
  export const badgeBaseStyles = css.partial `
6
5
  ${display('inline-flex')} :host {
7
6
  position: relative;
@@ -26,7 +25,7 @@ export const badgeBaseStyles = css.partial `
26
25
  font-size: 12px;
27
26
  }
28
27
 
29
- :host(:not(${ghostState}))::after {
28
+ :host(:not([appearance='ghost']))::after {
30
29
  position: absolute;
31
30
  content: '';
32
31
  top: 0;
@@ -44,7 +43,7 @@ export const badgeBaseStyles = css.partial `
44
43
  * The badge's size styles
45
44
  */
46
45
  export const badgeSizeStyles = css.partial `
47
- :host(${tinyState}) {
46
+ :host([size='tiny']) {
48
47
  width: 6px;
49
48
  height: 6px;
50
49
  font-size: 4px;
@@ -52,10 +51,10 @@ export const badgeSizeStyles = css.partial `
52
51
  padding-inline: 0;
53
52
  min-width: unset;
54
53
  }
55
- :host(${tinyState}) ::slotted(svg) {
54
+ :host([size='tiny']) ::slotted(svg) {
56
55
  font-size: 6px;
57
56
  }
58
- :host(${extraSmallState}) {
57
+ :host([size='extra-small']) {
59
58
  width: 10px;
60
59
  height: 10px;
61
60
  font-size: 6px;
@@ -63,37 +62,37 @@ export const badgeSizeStyles = css.partial `
63
62
  padding-inline: 0;
64
63
  min-width: unset;
65
64
  }
66
- :host(${extraSmallState}) ::slotted(svg) {
65
+ :host([size='extra-small']) ::slotted(svg) {
67
66
  font-size: 10px;
68
67
  }
69
- :host(${smallState}) {
68
+ :host([size='small']) {
70
69
  min-width: 16px;
71
70
  height: 16px;
72
71
  font-size: ${fontSizeBase100};
73
72
  line-height: ${lineHeightBase100};
74
73
  padding-inline: calc(${spacingHorizontalXXS} + ${spacingHorizontalXXS});
75
74
  }
76
- :host(${smallState}) ::slotted(svg) {
75
+ :host([size='small']) ::slotted(svg) {
77
76
  font-size: 12px;
78
77
  }
79
- :host(${largeState}) {
78
+ :host([size='large']) {
80
79
  min-width: 24px;
81
80
  height: 24px;
82
81
  font-size: ${fontSizeBase200};
83
82
  line-height: ${lineHeightBase200};
84
83
  padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
85
84
  }
86
- :host(${largeState}) ::slotted(svg) {
85
+ :host([size='large']) ::slotted(svg) {
87
86
  font-size: 16px;
88
87
  }
89
- :host(${extraLargeState}) {
88
+ :host([size='extra-large']) {
90
89
  min-width: 32px;
91
90
  height: 32px;
92
91
  font-size: ${fontSizeBase200};
93
92
  line-height: ${lineHeightBase200};
94
93
  padding-inline: calc(${spacingHorizontalSNudge} + ${spacingHorizontalXXS});
95
94
  }
96
- :host(${extraLargeState}) ::slotted(svg) {
95
+ :host([size='extra-large']) ::slotted(svg) {
97
96
  font-size: 20px;
98
97
  }
99
98
  `;
@@ -104,37 +103,37 @@ export const badgeSizeStyles = css.partial `
104
103
  * @public
105
104
  */
106
105
  export const badgeFilledStyles = css.partial `
107
- :host(${dangerState}) {
106
+ :host([color='danger']) {
108
107
  background-color: ${colorPaletteRedBackground3};
109
108
  color: ${colorNeutralForegroundOnBrand};
110
109
  }
111
110
 
112
- :host(${importantState}) {
111
+ :host([color='important']) {
113
112
  background-color: ${colorNeutralForeground1};
114
113
  color: ${colorNeutralBackground1};
115
114
  }
116
115
 
117
- :host(${informativeState}) {
116
+ :host([color='informative']) {
118
117
  background-color: ${colorNeutralBackground5};
119
118
  color: ${colorNeutralForeground3};
120
119
  }
121
120
 
122
- :host(${severeState}) {
121
+ :host([color='severe']) {
123
122
  background-color: ${colorPaletteDarkOrangeBackground3};
124
123
  color: ${colorNeutralForegroundOnBrand};
125
124
  }
126
125
 
127
- :host(${subtleState}) {
126
+ :host([color='subtle']) {
128
127
  background-color: ${colorNeutralBackground1};
129
128
  color: ${colorNeutralForeground1};
130
129
  }
131
130
 
132
- :host(${successState}) {
131
+ :host([color='success']) {
133
132
  background-color: ${colorPaletteGreenBackground3};
134
133
  color: ${colorNeutralForegroundOnBrand};
135
134
  }
136
135
 
137
- :host(${warningState}) {
136
+ :host([color='warning']) {
138
137
  background-color: ${colorPaletteYellowBackground3};
139
138
  color: ${colorNeutralForeground1Static};
140
139
  }
@@ -144,36 +143,36 @@ export const badgeFilledStyles = css.partial `
144
143
  * @public
145
144
  */
146
145
  export const badgeGhostStyles = css.partial `
147
- :host(${ghostState}) {
146
+ :host([appearance='ghost']) {
148
147
  color: ${colorBrandForeground1};
149
148
  background-color: initial;
150
149
  }
151
150
 
152
- :host(${ghostState}${dangerState}) {
151
+ :host([appearance='ghost'][color='danger']) {
153
152
  color: ${colorPaletteRedForeground3};
154
153
  }
155
154
 
156
- :host(${ghostState}${importantState}) {
155
+ :host([appearance='ghost'][color='important']) {
157
156
  color: ${colorNeutralForeground1};
158
157
  }
159
158
 
160
- :host(${ghostState}${informativeState}) {
159
+ :host([appearance='ghost'][color='informative']) {
161
160
  color: ${colorNeutralForeground3};
162
161
  }
163
162
 
164
- :host(${ghostState}${severeState}) {
163
+ :host([appearance='ghost'][color='severe']) {
165
164
  color: ${colorPaletteDarkOrangeForeground3};
166
165
  }
167
166
 
168
- :host(${ghostState}${subtleState}) {
167
+ :host([appearance='ghost'][color='subtle']) {
169
168
  color: ${colorNeutralForegroundInverted};
170
169
  }
171
170
 
172
- :host(${ghostState}${successState}) {
171
+ :host([appearance='ghost'][color='success']) {
173
172
  color: ${colorPaletteGreenForeground3};
174
173
  }
175
174
 
176
- :host(${ghostState}${warningState}) {
175
+ :host([appearance='ghost'][color='warning']) {
177
176
  color: ${colorPaletteYellowForeground2};
178
177
  }
179
178
  `;
@@ -182,39 +181,39 @@ export const badgeGhostStyles = css.partial `
182
181
  * @public
183
182
  */
184
183
  export const badgeOutlineStyles = css.partial `
185
- :host(${outlineState}) {
184
+ :host([appearance='outline']) {
186
185
  border-color: currentColor;
187
186
  color: ${colorBrandForeground1};
188
187
  background-color: initial;
189
188
  }
190
189
 
191
- :host(${outlineState}${dangerState}) {
190
+ :host([appearance='outline'][color='danger']) {
192
191
  color: ${colorPaletteRedForeground3};
193
192
  }
194
193
 
195
- :host(${outlineState}${importantState}) {
194
+ :host([appearance='outline'][color='important']) {
196
195
  color: ${colorNeutralForeground3};
197
196
  border-color: ${colorNeutralStrokeAccessible};
198
197
  }
199
198
 
200
- :host(${outlineState}${informativeState}) {
199
+ :host([appearance='outline'][color='informative']) {
201
200
  color: ${colorNeutralForeground3};
202
201
  border-color: ${colorNeutralStroke2};
203
202
  }
204
203
 
205
- :host(${outlineState}${severeState}) {
204
+ :host([appearance='outline'][color='severe']) {
206
205
  color: ${colorPaletteDarkOrangeForeground3};
207
206
  }
208
207
 
209
- :host(${outlineState}${subtleState}) {
208
+ :host([appearance='outline'][color='subtle']) {
210
209
  color: ${colorNeutralForegroundStaticInverted};
211
210
  }
212
211
 
213
- :host(${outlineState}${successState}) {
212
+ :host([appearance='outline'][color='success']) {
214
213
  color: ${colorPaletteGreenForeground2};
215
214
  }
216
215
 
217
- :host(${outlineState}${warningState}) {
216
+ :host([appearance='outline'][color='warning']) {
218
217
  color: ${colorPaletteYellowForeground2};
219
218
  }
220
219
  `;
@@ -223,49 +222,49 @@ export const badgeOutlineStyles = css.partial `
223
222
  * @public
224
223
  */
225
224
  export const badgeTintStyles = css.partial `
226
- :host(${tintState}) {
225
+ :host([appearance='tint']) {
227
226
  background-color: ${colorBrandBackground2};
228
227
  color: ${colorBrandForeground2};
229
228
  border-color: ${colorBrandStroke2};
230
229
  }
231
230
 
232
- :host(${tintState}${dangerState}) {
231
+ :host([appearance='tint'][color='danger']) {
233
232
  background-color: ${colorPaletteRedBackground1};
234
233
  color: ${colorPaletteRedForeground1};
235
234
  border-color: ${colorPaletteRedBorder1};
236
235
  }
237
236
 
238
- :host(${tintState}${importantState}) {
237
+ :host([appearance='tint'][color='important']) {
239
238
  background-color: ${colorNeutralForeground3};
240
239
  color: ${colorNeutralBackground1};
241
240
  border-color: ${colorTransparentStroke};
242
241
  }
243
242
 
244
- :host(${tintState}${informativeState}) {
243
+ :host([appearance='tint'][color='informative']) {
245
244
  background-color: ${colorNeutralBackground4};
246
245
  color: ${colorNeutralForeground3};
247
246
  border-color: ${colorNeutralStroke2};
248
247
  }
249
248
 
250
- :host(${tintState}${severeState}) {
249
+ :host([appearance='tint'][color='severe']) {
251
250
  background-color: ${colorPaletteDarkOrangeBackground1};
252
251
  color: ${colorPaletteDarkOrangeForeground1};
253
252
  border-color: ${colorPaletteDarkOrangeBorder1};
254
253
  }
255
254
 
256
- :host(${tintState}${subtleState}) {
255
+ :host([appearance='tint'][color='subtle']) {
257
256
  background-color: ${colorNeutralBackground1};
258
257
  color: ${colorNeutralForeground3};
259
258
  border-color: ${colorNeutralStroke2};
260
259
  }
261
260
 
262
- :host(${tintState}${successState}) {
261
+ :host([appearance='tint'][color='success']) {
263
262
  background-color: ${colorPaletteGreenBackground1};
264
263
  color: ${colorPaletteGreenForeground1};
265
264
  border-color: ${colorPaletteGreenBorder2};
266
265
  }
267
266
 
268
- :host(${tintState}${warningState}) {
267
+ :host([appearance='tint'][color='warning']) {
269
268
  background-color: ${colorPaletteYellowBackground1};
270
269
  color: ${colorPaletteYellowForeground2};
271
270
  border-color: ${colorPaletteYellowBorder1};
@@ -1 +1 @@
1
- {"version":3,"file":"badge.partials.js","sourceRoot":"","sources":["../../../../src/styles/partials/badge.partials.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"badge.partials.js","sourceRoot":"","sources":["../../../../src/styles/partials/badge.partials.ts"],"names":[],"mappings":"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"}