@fluentui/web-components 3.0.0-beta.30 → 3.0.0-beta.32

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 (87) hide show
  1. package/CHANGELOG.md +28 -2
  2. package/dist/dts/anchor-button/anchor-button.d.ts +39 -4
  3. package/dist/dts/anchor-button/anchor-button.options.d.ts +0 -1
  4. package/dist/dts/badge/badge.d.ts +30 -0
  5. package/dist/dts/button/button.d.ts +25 -1
  6. package/dist/dts/button/button.options.d.ts +0 -1
  7. package/dist/dts/checkbox/checkbox.d.ts +13 -1
  8. package/dist/dts/compound-button/compound-button.options.d.ts +0 -5
  9. package/dist/dts/counter-badge/counter-badge.d.ts +36 -0
  10. package/dist/dts/divider/divider.d.ts +18 -0
  11. package/dist/dts/image/image.d.ts +36 -0
  12. package/dist/dts/label/label.d.ts +24 -0
  13. package/dist/dts/link/link.d.ts +12 -0
  14. package/dist/dts/menu-button/menu-button.options.d.ts +0 -1
  15. package/dist/dts/progress-bar/progress-bar.d.ts +18 -0
  16. package/dist/dts/spinner/spinner.d.ts +13 -1
  17. package/dist/dts/styles/states/index.d.ts +175 -0
  18. package/dist/dts/text-input/text-input.d.ts +12 -0
  19. package/dist/dts/toggle-button/toggle-button.options.d.ts +0 -1
  20. package/dist/esm/anchor-button/anchor-button.js +76 -8
  21. package/dist/esm/anchor-button/anchor-button.js.map +1 -1
  22. package/dist/esm/anchor-button/anchor-button.styles.js +8 -1
  23. package/dist/esm/anchor-button/anchor-button.styles.js.map +1 -1
  24. package/dist/esm/anchor-button/anchor-button.template.js +2 -2
  25. package/dist/esm/anchor-button/anchor-button.template.js.map +1 -1
  26. package/dist/esm/badge/badge.js +59 -0
  27. package/dist/esm/badge/badge.js.map +1 -1
  28. package/dist/esm/badge/badge.styles.js +6 -5
  29. package/dist/esm/badge/badge.styles.js.map +1 -1
  30. package/dist/esm/button/button.js +48 -0
  31. package/dist/esm/button/button.js.map +1 -1
  32. package/dist/esm/button/button.options.js +0 -1
  33. package/dist/esm/button/button.options.js.map +1 -1
  34. package/dist/esm/button/button.styles.js +40 -49
  35. package/dist/esm/button/button.styles.js.map +1 -1
  36. package/dist/esm/checkbox/checkbox.js +26 -0
  37. package/dist/esm/checkbox/checkbox.js.map +1 -1
  38. package/dist/esm/checkbox/checkbox.styles.js +6 -5
  39. package/dist/esm/checkbox/checkbox.styles.js.map +1 -1
  40. package/dist/esm/compound-button/compound-button.styles.js +14 -15
  41. package/dist/esm/compound-button/compound-button.styles.js.map +1 -1
  42. package/dist/esm/counter-badge/counter-badge.js +67 -0
  43. package/dist/esm/counter-badge/counter-badge.js.map +1 -1
  44. package/dist/esm/counter-badge/counter-badge.styles.js +12 -6
  45. package/dist/esm/counter-badge/counter-badge.styles.js.map +1 -1
  46. package/dist/esm/divider/divider.js +47 -2
  47. package/dist/esm/divider/divider.js.map +1 -1
  48. package/dist/esm/divider/divider.styles.js +31 -30
  49. package/dist/esm/divider/divider.styles.js.map +1 -1
  50. package/dist/esm/image/image.js +68 -0
  51. package/dist/esm/image/image.js.map +1 -1
  52. package/dist/esm/image/image.styles.js +10 -9
  53. package/dist/esm/image/image.styles.js.map +1 -1
  54. package/dist/esm/label/label.js +41 -0
  55. package/dist/esm/label/label.js.map +1 -1
  56. package/dist/esm/label/label.styles.js +7 -6
  57. package/dist/esm/label/label.styles.js.map +1 -1
  58. package/dist/esm/link/link.js +22 -0
  59. package/dist/esm/link/link.js.map +1 -1
  60. package/dist/esm/link/link.styles.js +11 -4
  61. package/dist/esm/link/link.styles.js.map +1 -1
  62. package/dist/esm/link/link.template.js +2 -2
  63. package/dist/esm/link/link.template.js.map +1 -1
  64. package/dist/esm/progress-bar/progress-bar.js +40 -0
  65. package/dist/esm/progress-bar/progress-bar.js.map +1 -1
  66. package/dist/esm/progress-bar/progress-bar.styles.js +7 -6
  67. package/dist/esm/progress-bar/progress-bar.styles.js.map +1 -1
  68. package/dist/esm/spinner/spinner.js +27 -0
  69. package/dist/esm/spinner/spinner.js.map +1 -1
  70. package/dist/esm/spinner/spinner.styles.js +9 -8
  71. package/dist/esm/spinner/spinner.styles.js.map +1 -1
  72. package/dist/esm/styles/partials/badge.partials.js +43 -42
  73. package/dist/esm/styles/partials/badge.partials.js.map +1 -1
  74. package/dist/esm/styles/states/index.js +177 -0
  75. package/dist/esm/styles/states/index.js.map +1 -0
  76. package/dist/esm/text-input/text-input.js +27 -0
  77. package/dist/esm/text-input/text-input.js.map +1 -1
  78. package/dist/esm/text-input/text-input.styles.js +23 -22
  79. package/dist/esm/text-input/text-input.styles.js.map +1 -1
  80. package/dist/esm/toggle-button/toggle-button.js +2 -1
  81. package/dist/esm/toggle-button/toggle-button.js.map +1 -1
  82. package/dist/esm/toggle-button/toggle-button.styles.js +24 -23
  83. package/dist/esm/toggle-button/toggle-button.styles.js.map +1 -1
  84. package/dist/web-components.d.ts +276 -16
  85. package/dist/web-components.js +649 -94
  86. package/dist/web-components.min.js +341 -340
  87. package/package.json +3 -2
@@ -1,6 +1,7 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
3
3
  import { borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, colorBrandBackground, colorBrandBackgroundHover, colorBrandBackgroundPressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackgroundDisabled, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentStroke, curveEasyEase, durationFaster, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, shadow4, spacingHorizontalL, spacingHorizontalM, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
4
+ import { circularState, iconOnlyState, largeState, outlineState, primaryState, smallState, squareState, subtleState, transparentState, } from '../styles/states/index.js';
4
5
  /**
5
6
  * @internal
6
7
  */
@@ -9,6 +10,7 @@ export const baseButtonStyles = css `
9
10
 
10
11
  :host {
11
12
  --icon-spacing: ${spacingHorizontalSNudge};
13
+ position: relative;
12
14
  contain: layout style;
13
15
  vertical-align: middle;
14
16
  align-items: center;
@@ -70,22 +72,20 @@ export const baseButtonStyles = css `
70
72
  fill: currentColor;
71
73
  }
72
74
 
73
- [slot='start'],
74
- ::slotted([slot='start']) {
75
+ :is([slot='start'], ::slotted([slot='start'])) {
75
76
  margin-inline-end: var(--icon-spacing);
76
77
  }
77
78
 
78
- [slot='end'],
79
- ::slotted([slot='end']) {
79
+ :is([slot='end'], ::slotted([slot='end'])) {
80
80
  margin-inline-start: var(--icon-spacing);
81
81
  }
82
82
 
83
- :host([icon-only]) {
83
+ :host(${iconOnlyState}) {
84
84
  min-width: 32px;
85
85
  max-width: 32px;
86
86
  }
87
87
 
88
- :host([size='small']) {
88
+ :host(${smallState}) {
89
89
  --icon-spacing: ${spacingHorizontalXS};
90
90
  min-height: 24px;
91
91
  min-width: 64px;
@@ -96,12 +96,12 @@ export const baseButtonStyles = css `
96
96
  font-weight: ${fontWeightRegular};
97
97
  }
98
98
 
99
- :host([size='small'][icon-only]) {
99
+ :host(${smallState}${iconOnlyState}) {
100
100
  min-width: 24px;
101
101
  max-width: 24px;
102
102
  }
103
103
 
104
- :host([size='large']) {
104
+ :host(${largeState}) {
105
105
  min-height: 40px;
106
106
  border-radius: ${borderRadiusLarge};
107
107
  padding: 0 ${spacingHorizontalL};
@@ -109,108 +109,103 @@ export const baseButtonStyles = css `
109
109
  line-height: ${lineHeightBase400};
110
110
  }
111
111
 
112
- :host([size='large'][icon-only]) {
112
+ :host(${largeState}${iconOnlyState}) {
113
113
  min-width: 40px;
114
114
  max-width: 40px;
115
115
  }
116
116
 
117
- :host([size='large']) ::slotted(svg) {
117
+ :host(${largeState}) ::slotted(svg) {
118
118
  font-size: 24px;
119
119
  height: 24px;
120
120
  width: 24px;
121
121
  }
122
122
 
123
- :host([shape='circular']),
124
- :host([shape='circular']:focus-visible) {
123
+ :host(:is(${circularState}, ${circularState}:focus-visible)) {
125
124
  border-radius: ${borderRadiusCircular};
126
125
  }
127
126
 
128
- :host([shape='square']),
129
- :host([shape='square']:focus-visible) {
127
+ :host(:is(${squareState}, ${squareState}:focus-visible)) {
130
128
  border-radius: ${borderRadiusNone};
131
129
  }
132
130
 
133
- :host([appearance='primary']) {
131
+ :host(${primaryState}) {
134
132
  background-color: ${colorBrandBackground};
135
133
  color: ${colorNeutralForegroundOnBrand};
136
134
  border-color: transparent;
137
135
  }
138
136
 
139
- :host([appearance='primary']:hover) {
137
+ :host(${primaryState}:hover) {
140
138
  background-color: ${colorBrandBackgroundHover};
141
139
  }
142
140
 
143
- :host([appearance='primary']:hover),
144
- :host([appearance='primary']:hover:active) {
141
+ :host(${primaryState}:is(:hover, :hover:active)) {
145
142
  border-color: transparent;
146
143
  color: ${colorNeutralForegroundOnBrand};
147
144
  }
148
145
 
149
- :host([appearance='primary']:hover:active) {
146
+ :host(${primaryState}:hover:active) {
150
147
  background-color: ${colorBrandBackgroundPressed};
151
148
  }
152
149
 
153
- :host([appearance='primary']:focus-visible) {
150
+ :host(${primaryState}:focus-visible) {
154
151
  border-color: ${colorNeutralForegroundOnBrand};
155
152
  box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
156
153
  }
157
154
 
158
- :host([appearance='outline']) {
155
+ :host(${outlineState}) {
159
156
  background-color: ${colorTransparentBackground};
160
157
  }
161
158
 
162
- :host([appearance='outline']:hover) {
159
+ :host(${outlineState}:hover) {
163
160
  background-color: ${colorTransparentBackgroundHover};
164
161
  }
165
162
 
166
- :host([appearance='outline']:hover:active) {
163
+ :host(${outlineState}:hover:active) {
167
164
  background-color: ${colorTransparentBackgroundPressed};
168
165
  }
169
166
 
170
- :host([appearance='subtle']) {
167
+ :host(${subtleState}) {
171
168
  background-color: ${colorSubtleBackground};
172
169
  color: ${colorNeutralForeground2};
173
170
  border-color: transparent;
174
171
  }
175
172
 
176
- :host([appearance='subtle']:hover) {
173
+ :host(${subtleState}:hover) {
177
174
  background-color: ${colorSubtleBackgroundHover};
178
175
  color: ${colorNeutralForeground2Hover};
179
176
  border-color: transparent;
180
177
  }
181
178
 
182
- :host([appearance='subtle']:hover:active) {
179
+ :host(${subtleState}:hover:active) {
183
180
  background-color: ${colorSubtleBackgroundPressed};
184
181
  color: ${colorNeutralForeground2Pressed};
185
182
  border-color: transparent;
186
183
  }
187
184
 
188
- :host([appearance='subtle']:hover) ::slotted(svg) {
185
+ :host(${subtleState}:hover) ::slotted(svg) {
189
186
  fill: ${colorNeutralForeground2BrandHover};
190
187
  }
191
188
 
192
- :host([appearance='subtle']:hover:active) ::slotted(svg) {
189
+ :host(${subtleState}:hover:active) ::slotted(svg) {
193
190
  fill: ${colorNeutralForeground2BrandPressed};
194
191
  }
195
192
 
196
- :host([appearance='transparent']) {
193
+ :host(${transparentState}) {
197
194
  background-color: ${colorTransparentBackground};
198
195
  color: ${colorNeutralForeground2};
199
196
  }
200
197
 
201
- :host([appearance='transparent']:hover) {
198
+ :host(${transparentState}:hover) {
202
199
  background-color: ${colorTransparentBackgroundHover};
203
200
  color: ${colorNeutralForeground2BrandHover};
204
201
  }
205
202
 
206
- :host([appearance='transparent']:hover:active) {
203
+ :host(${transparentState}:hover:active) {
207
204
  background-color: ${colorTransparentBackgroundPressed};
208
205
  color: ${colorNeutralForeground2BrandPressed};
209
206
  }
210
207
 
211
- :host([appearance='transparent']),
212
- :host([appearance='transparent']:hover),
213
- :host([appearance='transparent']:hover:active) {
208
+ :host(:is(${transparentState}, ${transparentState}:is(:hover, :active))) {
214
209
  border-color: transparent;
215
210
  }
216
211
  `;
@@ -222,37 +217,33 @@ export const baseButtonStyles = css `
222
217
  export const styles = css `
223
218
  ${baseButtonStyles}
224
219
 
225
- :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable])),
226
- :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover),
227
- :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover:active) {
220
+ :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])),
221
+ :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable]):hover),
222
+ :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable]):hover:active) {
228
223
  background-color: ${colorNeutralBackgroundDisabled};
229
224
  border-color: ${colorNeutralStrokeDisabled};
230
225
  color: ${colorNeutralForegroundDisabled};
231
226
  cursor: not-allowed;
232
227
  }
233
228
 
234
- :host(:is([disabled][appearance='primary'], [disabled-focusable][appearance='primary'])),
235
- :host(:is([disabled][appearance='primary'], [disabled-focusable][appearance='primary']):hover),
236
- :host(:is([disabled][appearance='primary'], [disabled-focusable][appearance='primary']):hover:active) {
229
+ :host(${primaryState}:is(:disabled, [disabled-focusable])),
230
+ :host(${primaryState}:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
237
231
  border-color: transparent;
238
232
  }
239
233
 
240
- :host(:is([disabled][appearance='outline'], [disabled-focusable][appearance='outline'])),
241
- :host(:is([disabled][appearance='outline'], [disabled-focusable][appearance='outline']):hover),
242
- :host(:is([disabled][appearance='outline'], [disabled-focusable][appearance='outline']):hover:active) {
234
+ :host(${outlineState}:is(:disabled, [disabled-focusable])),
235
+ :host(${outlineState}:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
243
236
  background-color: ${colorTransparentBackground};
244
237
  }
245
238
 
246
- :host(:is([disabled][appearance='subtle'], [disabled-focusable][appearance='subtle'])),
247
- :host(:is([disabled][appearance='subtle'], [disabled-focusable][appearance='subtle']):hover),
248
- :host(:is([disabled][appearance='subtle'], [disabled-focusable][appearance='subtle']):hover:active) {
239
+ :host(${subtleState}:is(:disabled, [disabled-focusable])),
240
+ :host(${subtleState}:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
249
241
  background-color: ${colorTransparentBackground};
250
242
  border-color: transparent;
251
243
  }
252
244
 
253
- :host(:is([disabled][appearance='transparent'], [disabled-focusable][appearance='transparent'])),
254
- :host(:is([disabled][appearance='transparent'], [disabled-focusable][appearance='transparent']):hover),
255
- :host(:is([disabled][appearance='transparent'], [disabled-focusable][appearance='transparent']):hover:active) {
245
+ :host(${transparentState}:is(:disabled, [disabled-focusable])),
246
+ :host(${transparentState}:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
256
247
  border-color: transparent;
257
248
  background-color: ${colorTransparentBackground};
258
249
  }
@@ -1 +1 @@
1
- {"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"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"}
@@ -372,6 +372,32 @@ __decorate([
372
372
  attr({ mode: 'boolean' })
373
373
  ], BaseCheckbox.prototype, "required", void 0);
374
374
  export class Checkbox extends BaseCheckbox {
375
+ /**
376
+ * Handles changes to shape attribute custom states
377
+ * @param prev - the previous state
378
+ * @param next - the next state
379
+ */
380
+ shapeChanged(prev, next) {
381
+ if (prev) {
382
+ toggleState(this.elementInternals, prev, false);
383
+ }
384
+ if (next) {
385
+ toggleState(this.elementInternals, next, true);
386
+ }
387
+ }
388
+ /**
389
+ * Handles changes to size attribute custom states
390
+ * @param prev - the previous state
391
+ * @param next - the next state
392
+ */
393
+ sizeChanged(prev, next) {
394
+ if (prev) {
395
+ toggleState(this.elementInternals, prev, false);
396
+ }
397
+ if (next) {
398
+ toggleState(this.elementInternals, next, true);
399
+ }
400
+ }
375
401
  }
376
402
  __decorate([
377
403
  attr
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.ts"],"names":[],"mappings":"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"}
@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
2
2
  import { borderRadiusCircular, borderRadiusMedium, borderRadiusSmall, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackgroundDisabled, colorNeutralForegroundInverted, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorTransparentStroke, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
3
3
  import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
4
4
  import { display } from '../utils/display.js';
5
+ import { circularState, largeState } from '../styles/states/index.js';
5
6
  /**
6
7
  * Selector for the `checked` state.
7
8
  * @public
@@ -109,17 +110,17 @@ export const styles = css `
109
110
  inset: 0;
110
111
  }
111
112
 
112
- :host([size='large']) {
113
+ :host(${largeState}) {
113
114
  --size: 20px;
114
115
  }
115
116
 
116
- :host([size='large']) ::slotted([slot='checked-indicator']),
117
- :host([size='large']) .checked-indicator {
117
+ :host(${largeState}) ::slotted([slot='checked-indicator']),
118
+ :host(${largeState}) .checked-indicator {
118
119
  width: 16px;
119
120
  }
120
121
 
121
- :host([shape='circular']),
122
- :host([shape='circular']) .indeterminate-indicator {
122
+ :host(${circularState}),
123
+ :host(${circularState}) .indeterminate-indicator {
123
124
  border-radius: ${borderRadiusCircular};
124
125
  }
125
126
 
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.styles.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;GAGG;AACH,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEzE;;;GAGG;AACH,MAAM,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAAA,oDAAoD,CAAC;AAE3F;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;wBAIF,uBAAuB;qBAC1B,iBAAiB;cACxB,eAAe,UAAU,4BAA4B;;;;;;;;;;;;;;oBAc/C,iCAAiC;;;;oBAIjC,mCAAmC;;;UAG7C,YAAY;wBACE,iCAAiC;oBACrC,6BAA6B;;;UAGvC,YAAY;wBACE,mCAAmC;oBACvC,+BAA+B;;;;;;;;;;;;;cAarC,gBAAgB,UAAU,sBAAsB;qBACzC,kBAAkB;;;;oBAInB,iBAAiB;;;;;aAKxB,8BAA8B;;;;;;;;;;;;;;eAc5B,YAAY;;;;UAIjB,YAAY;UACZ,kBAAkB;oBACR,wBAAwB;;;UAGlC,YAAY;UACZ,kBAAkB;wBACJ,4BAA4B;;;UAG1C,kBAAkB;qBACP,iBAAiB;;;;;;;;;;;;;;;;;qBAiBjB,oBAAoB;;;;oBAIrB,YAAY;wBACR,8BAA8B;oBAClC,0BAA0B;;;;;;;oBAO1B,kBAAkB;wBACd,0BAA0B;;;oBAG9B,YAAY;aACnB,0BAA0B;;CAEtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;YAUxB,YAAY;;;;;;;;;;YAUZ,YAAY;YACZ,kBAAkB;;;;YAIlB,YAAY;YACZ,kBAAkB;;;;;;;;sBAQR,kBAAkB;;;;;sBAKlB,YAAY;;;GAG/B,CAAC,CACH,CAAC"}
1
+ {"version":3,"file":"checkbox.styles.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEtE;;;GAGG;AACH,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEzE;;;GAGG;AACH,MAAM,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAAA,oDAAoD,CAAC;AAE3F;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;wBAIF,uBAAuB;qBAC1B,iBAAiB;cACxB,eAAe,UAAU,4BAA4B;;;;;;;;;;;;;;oBAc/C,iCAAiC;;;;oBAIjC,mCAAmC;;;UAG7C,YAAY;wBACE,iCAAiC;oBACrC,6BAA6B;;;UAGvC,YAAY;wBACE,mCAAmC;oBACvC,+BAA+B;;;;;;;;;;;;;cAarC,gBAAgB,UAAU,sBAAsB;qBACzC,kBAAkB;;;;oBAInB,iBAAiB;;;;;aAKxB,8BAA8B;;;;;;;;;;;;;;eAc5B,YAAY;;;;UAIjB,YAAY;UACZ,kBAAkB;oBACR,wBAAwB;;;UAGlC,YAAY;UACZ,kBAAkB;wBACJ,4BAA4B;;;UAG1C,kBAAkB;qBACP,iBAAiB;;;;;;UAM5B,UAAU;;;;UAIV,UAAU;UACV,UAAU;;;;UAIV,aAAa;UACb,aAAa;qBACF,oBAAoB;;;;oBAIrB,YAAY;wBACR,8BAA8B;oBAClC,0BAA0B;;;;;;;oBAO1B,kBAAkB;wBACd,0BAA0B;;;oBAG9B,YAAY;aACnB,0BAA0B;;CAEtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;YAUxB,YAAY;;;;;;;;;;YAUZ,YAAY;YACZ,kBAAkB;;;;YAIlB,YAAY;YACZ,kBAAkB;;;;;;;;sBAQR,kBAAkB;;;;;sBAKlB,YAAY;;;GAG/B,CAAC,CACH,CAAC"}
@@ -1,6 +1,7 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { styles as ButtonStyles } from '../button/button.styles.js';
3
3
  import { colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundOnBrand, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, lineHeightBase300, lineHeightBase400, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, } from '../theme/design-tokens.js';
4
+ import { iconOnlyState, largeState, primaryState, smallState, subtleState, transparentState, } from '../styles/states/index.js';
4
5
  // Need to support icon hover styles
5
6
  export const styles = css `
6
7
  ${ButtonStyles}
@@ -30,7 +31,7 @@ export const styles = css `
30
31
  }
31
32
 
32
33
  ::slotted(svg),
33
- :host([size='large']) ::slotted(svg) {
34
+ :host(${largeState}) ::slotted(svg) {
34
35
  font-size: 40px;
35
36
  height: 40px;
36
37
  width: 40px;
@@ -44,61 +45,59 @@ export const styles = css `
44
45
  color: ${colorNeutralForeground2Pressed};
45
46
  }
46
47
 
47
- :host(:is([appearance='primary'], [appearance='primary']:hover, [appearance='primary']:active))
48
- ::slotted([slot='description']) {
48
+ :host(:is(${primaryState}, ${primaryState}:hover, ${primaryState}:active)) ::slotted([slot='description']) {
49
49
  color: ${colorNeutralForegroundOnBrand};
50
50
  }
51
51
 
52
- :host(:is([appearance='subtle'], [appearance='subtle']:hover, [appearance='subtle']:active))
53
- ::slotted([slot='description']),
54
- :host([appearance='transparent']) ::slotted([slot='description']) {
52
+ :host(:is(${subtleState}, ${subtleState}:hover, ${subtleState}:active)) ::slotted([slot='description']),
53
+ :host(${transparentState}) ::slotted([slot='description']) {
55
54
  color: ${colorNeutralForeground2};
56
55
  }
57
56
 
58
- :host([appearance='transparent']:hover) ::slotted([slot='description']) {
57
+ :host(${transparentState}:hover) ::slotted([slot='description']) {
59
58
  color: ${colorNeutralForeground2BrandHover};
60
59
  }
61
60
 
62
- :host([appearance='transparent']:active) ::slotted([slot='description']) {
61
+ :host(${transparentState}:active) ::slotted([slot='description']) {
63
62
  color: ${colorNeutralForeground2BrandPressed};
64
63
  }
65
64
 
66
- :host(:is([disabled], [disabled][appearance], [disabled-focusable], [disabled-focusable][appearance]))
65
+ :host(:is(:disabled, :disabled[appearance], [disabled-focusable], [disabled-focusable][appearance]))
67
66
  ::slotted([slot='description']) {
68
67
  color: ${colorNeutralForegroundDisabled};
69
68
  }
70
69
 
71
- :host([size='small']) {
70
+ :host(${smallState}) {
72
71
  padding: 8px;
73
72
  padding-bottom: 10px;
74
73
  }
75
74
 
76
- :host([icon-only]) {
75
+ :host(${iconOnlyState}) {
77
76
  min-width: 52px;
78
77
  max-width: 52px;
79
78
  padding: ${spacingHorizontalSNudge};
80
79
  }
81
80
 
82
- :host([icon-only][size='small']) {
81
+ :host(${iconOnlyState}${smallState}) {
83
82
  min-width: 48px;
84
83
  max-width: 48px;
85
84
  padding: ${spacingHorizontalXS};
86
85
  }
87
86
 
88
- :host([icon-only][size='large']) {
87
+ :host(${iconOnlyState}${largeState}) {
89
88
  min-width: 56px;
90
89
  max-width: 56px;
91
90
  padding: ${spacingHorizontalS};
92
91
  }
93
92
 
94
- :host([size='large']) {
93
+ :host(${largeState}) {
95
94
  padding-top: 18px;
96
95
  padding-inline: 16px;
97
96
  padding-bottom: 20px;
98
97
  font-size: ${fontSizeBase400};
99
98
  line-height: ${lineHeightBase400};
100
99
  }
101
- :host([size='large']) ::slotted([slot='description']) {
100
+ :host(${largeState}) ::slotted([slot='description']) {
102
101
  font-size: ${fontSizeBase300};
103
102
  }
104
103
  `;
@@ -1 +1 @@
1
- {"version":3,"file":"compound-button.styles.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;;;;;iBASC,eAAe;mBACb,iBAAiB;;;;;;;;;;aAUvB,uBAAuB;;iBAEnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;aAWvB,4BAA4B;;;;aAI5B,8BAA8B;;;;;aAK9B,6BAA6B;;;;;;aAM7B,uBAAuB;;;;aAIvB,iCAAiC;;;;aAIjC,mCAAmC;;;;;aAKnC,8BAA8B;;;;;;;;;;;eAW5B,uBAAuB;;;;;;eAMvB,mBAAmB;;;;;;eAMnB,kBAAkB;;;;;;;iBAOhB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;;CAE/B,CAAC"}
1
+ {"version":3,"file":"compound-button.styles.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,aAAa,EACb,UAAU,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;;;;;iBASC,eAAe;mBACb,iBAAiB;;;;;;;;;;aAUvB,uBAAuB;;iBAEnB,eAAe;mBACb,iBAAiB;;;;UAI1B,UAAU;;;;;;;aAOP,4BAA4B;;;;aAI5B,8BAA8B;;;cAG7B,YAAY,KAAK,YAAY,WAAW,YAAY;aACrD,6BAA6B;;;cAG5B,WAAW,KAAK,WAAW,WAAW,WAAW;UACrD,gBAAgB;aACb,uBAAuB;;;UAG1B,gBAAgB;aACb,iCAAiC;;;UAGpC,gBAAgB;aACb,mCAAmC;;;;;aAKnC,8BAA8B;;;UAGjC,UAAU;;;;;UAKV,aAAa;;;eAGR,uBAAuB;;;UAG5B,aAAa,GAAG,UAAU;;;eAGrB,mBAAmB;;;UAGxB,aAAa,GAAG,UAAU;;;eAGrB,kBAAkB;;;UAGvB,UAAU;;;;iBAIH,eAAe;mBACb,iBAAiB;;UAE1B,UAAU;iBACH,eAAe;;CAE/B,CAAC"}
@@ -3,6 +3,7 @@ import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-elem
3
3
  // TODO: Remove with https://github.com/microsoft/fast/pull/6797
4
4
  import { applyMixins } from '../utils/apply-mixins.js';
5
5
  import { StartEnd } from '../patterns/index.js';
6
+ import { toggleState } from '../utils/element-internals.js';
6
7
  /**
7
8
  * The base class used for constructing a fluent-badge custom element
8
9
  * @public
@@ -10,6 +11,12 @@ import { StartEnd } from '../patterns/index.js';
10
11
  export class CounterBadge extends FASTElement {
11
12
  constructor() {
12
13
  super(...arguments);
14
+ /**
15
+ * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
16
+ *
17
+ * @internal
18
+ */
19
+ this.elementInternals = this.attachInternals();
13
20
  /**
14
21
  * The count the badge should have.
15
22
  *
@@ -43,12 +50,72 @@ export class CounterBadge extends FASTElement {
43
50
  */
44
51
  this.dot = false;
45
52
  }
53
+ /**
54
+ * Handles changes to appearance attribute custom states
55
+ * @param prev - the previous state
56
+ * @param next - the next state
57
+ */
58
+ appearanceChanged(prev, next) {
59
+ if (prev) {
60
+ toggleState(this.elementInternals, `${prev}`, false);
61
+ }
62
+ if (next) {
63
+ toggleState(this.elementInternals, `${next}`, true);
64
+ }
65
+ }
66
+ /**
67
+ * Handles changes to color attribute custom states
68
+ * @param prev - the previous state
69
+ * @param next - the next state
70
+ */
71
+ colorChanged(prev, next) {
72
+ if (prev) {
73
+ toggleState(this.elementInternals, `${prev}`, false);
74
+ }
75
+ if (next) {
76
+ toggleState(this.elementInternals, `${next}`, true);
77
+ }
78
+ }
79
+ /**
80
+ * Handles changes to shape attribute custom states
81
+ * @param prev - the previous state
82
+ * @param next - the next state
83
+ */
84
+ shapeChanged(prev, next) {
85
+ if (prev) {
86
+ toggleState(this.elementInternals, `${prev}`, false);
87
+ }
88
+ if (next) {
89
+ toggleState(this.elementInternals, `${next}`, true);
90
+ }
91
+ }
92
+ /**
93
+ * Handles changes to size attribute custom states
94
+ * @param prev - the previous state
95
+ * @param next - the next state
96
+ */
97
+ sizeChanged(prev, next) {
98
+ if (prev) {
99
+ toggleState(this.elementInternals, `${prev}`, false);
100
+ }
101
+ if (next) {
102
+ toggleState(this.elementInternals, `${next}`, true);
103
+ }
104
+ }
46
105
  countChanged() {
47
106
  this.setCount();
48
107
  }
49
108
  overflowCountChanged() {
50
109
  this.setCount();
51
110
  }
111
+ /**
112
+ * Handles changes to dot attribute custom states
113
+ * @param prev - the previous state
114
+ * @param next - the next state
115
+ */
116
+ dotChanged(prev, next) {
117
+ toggleState(this.elementInternals, 'dot', !!next);
118
+ }
52
119
  /**
53
120
  * @internal
54
121
  * Function to set the count
@@ -1 +1 @@
1
- {"version":3,"file":"counter-badge.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACrF,gEAAgE;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAQhD;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QAwCE;;;;;;WAMG;QAEI,UAAK,GAAW,CAAC,CAAC;QAKzB;;;;;;WAMG;QAEI,kBAAa,GAAW,EAAE,CAAC;QAKlC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,QAAG,GAAY,KAAK,CAAC;IAiB9B,CAAC;IApDW,YAAY;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAWS,oBAAoB;QAC5B,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAsBD;;;;;OAKG;IACI,QAAQ;;QACb,MAAM,KAAK,GAAkB,MAAA,IAAI,CAAC,KAAK,mCAAI,CAAC,CAAC;QAE7C,IAAI,CAAC,KAAK,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YAC/C,OAAO,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC;SAC3E;QAED,OAAO;IACT,CAAC;CACF;AA5FC;IADC,IAAI;gDACsC;AAU3C;IADC,IAAI;2CAC4B;AASjC;IADC,IAAI;2CAC4B;AAUjC;IADC,IAAI;0CAC0B;AAU/B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;2CACpB;AAazB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;mDACxC;AAalC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACjB;AAUjC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;yCACE;AA2B9B,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}
1
+ {"version":3,"file":"counter-badge.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.ts"],"names":[],"mappings":"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"}
@@ -1,17 +1,23 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeSizeStyles } from '../styles/index.js';
3
3
  import { borderRadiusMedium, borderRadiusSmall } from '../theme/design-tokens.js';
4
+ import { extraSmallState, roundedState, smallState, tinyState } from '../styles/states/index.js';
5
+ /**
6
+ * Selector for the `dot` state.
7
+ * @public
8
+ */
9
+ const dotState = css.partial `:is([state--dot], :state(dot))`;
4
10
  /** Badge styles
5
11
  * @public
6
12
  */
7
13
  export const styles = css `
8
- :host([shape='rounded']) {
14
+ :host(${roundedState}) {
9
15
  border-radius: ${borderRadiusMedium};
10
16
  }
11
17
 
12
- :host([shape='rounded'][size='tiny']),
13
- :host([shape='rounded'][size='extra-small']),
14
- :host([shape='rounded'][size='small']) {
18
+ :host(${roundedState}${tinyState}),
19
+ :host(${roundedState}${extraSmallState}),
20
+ :host(${roundedState}${smallState}) {
15
21
  border-radius: ${borderRadiusSmall};
16
22
  }
17
23
 
@@ -20,8 +26,8 @@ export const styles = css `
20
26
  ${badgeGhostStyles}
21
27
  ${badgeBaseStyles}
22
28
 
23
- :host([dot]),
24
- :host([dot][appearance][size]) {
29
+ :host(${dotState}),
30
+ :host(${dotState}[appearance][size]) {
25
31
  min-width: auto;
26
32
  width: 6px;
27
33
  height: 6px;
@@ -1 +1 @@
1
- {"version":3,"file":"counter-badge.styles.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC3G,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAElF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;qBAEJ,kBAAkB;;;;;;qBAMlB,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,eAAe;;;;;;;;;CASlB,CAAC"}
1
+ {"version":3,"file":"counter-badge.styles.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC3G,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEjG;;;GAGG;AACH,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA,gCAAgC,CAAC;AAE7D;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;UACf,YAAY;qBACD,kBAAkB;;;UAG7B,YAAY,GAAG,SAAS;UACxB,YAAY,GAAG,eAAe;UAC9B,YAAY,GAAG,UAAU;qBACd,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,eAAe;;UAET,QAAQ;UACR,QAAQ;;;;;;CAMjB,CAAC"}