@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.
- package/CHANGELOG.md +28 -2
- package/dist/dts/anchor-button/anchor-button.d.ts +39 -4
- package/dist/dts/anchor-button/anchor-button.options.d.ts +0 -1
- package/dist/dts/badge/badge.d.ts +30 -0
- package/dist/dts/button/button.d.ts +25 -1
- package/dist/dts/button/button.options.d.ts +0 -1
- package/dist/dts/checkbox/checkbox.d.ts +13 -1
- package/dist/dts/compound-button/compound-button.options.d.ts +0 -5
- package/dist/dts/counter-badge/counter-badge.d.ts +36 -0
- package/dist/dts/divider/divider.d.ts +18 -0
- package/dist/dts/image/image.d.ts +36 -0
- package/dist/dts/label/label.d.ts +24 -0
- package/dist/dts/link/link.d.ts +12 -0
- package/dist/dts/menu-button/menu-button.options.d.ts +0 -1
- package/dist/dts/progress-bar/progress-bar.d.ts +18 -0
- package/dist/dts/spinner/spinner.d.ts +13 -1
- package/dist/dts/styles/states/index.d.ts +175 -0
- package/dist/dts/text-input/text-input.d.ts +12 -0
- package/dist/dts/toggle-button/toggle-button.options.d.ts +0 -1
- package/dist/esm/anchor-button/anchor-button.js +76 -8
- package/dist/esm/anchor-button/anchor-button.js.map +1 -1
- package/dist/esm/anchor-button/anchor-button.styles.js +8 -1
- package/dist/esm/anchor-button/anchor-button.styles.js.map +1 -1
- package/dist/esm/anchor-button/anchor-button.template.js +2 -2
- package/dist/esm/anchor-button/anchor-button.template.js.map +1 -1
- package/dist/esm/badge/badge.js +59 -0
- package/dist/esm/badge/badge.js.map +1 -1
- package/dist/esm/badge/badge.styles.js +6 -5
- package/dist/esm/badge/badge.styles.js.map +1 -1
- package/dist/esm/button/button.js +48 -0
- package/dist/esm/button/button.js.map +1 -1
- package/dist/esm/button/button.options.js +0 -1
- package/dist/esm/button/button.options.js.map +1 -1
- package/dist/esm/button/button.styles.js +40 -49
- package/dist/esm/button/button.styles.js.map +1 -1
- package/dist/esm/checkbox/checkbox.js +26 -0
- package/dist/esm/checkbox/checkbox.js.map +1 -1
- package/dist/esm/checkbox/checkbox.styles.js +6 -5
- package/dist/esm/checkbox/checkbox.styles.js.map +1 -1
- package/dist/esm/compound-button/compound-button.styles.js +14 -15
- package/dist/esm/compound-button/compound-button.styles.js.map +1 -1
- package/dist/esm/counter-badge/counter-badge.js +67 -0
- package/dist/esm/counter-badge/counter-badge.js.map +1 -1
- package/dist/esm/counter-badge/counter-badge.styles.js +12 -6
- package/dist/esm/counter-badge/counter-badge.styles.js.map +1 -1
- package/dist/esm/divider/divider.js +47 -2
- package/dist/esm/divider/divider.js.map +1 -1
- package/dist/esm/divider/divider.styles.js +31 -30
- package/dist/esm/divider/divider.styles.js.map +1 -1
- package/dist/esm/image/image.js +68 -0
- package/dist/esm/image/image.js.map +1 -1
- package/dist/esm/image/image.styles.js +10 -9
- package/dist/esm/image/image.styles.js.map +1 -1
- package/dist/esm/label/label.js +41 -0
- package/dist/esm/label/label.js.map +1 -1
- package/dist/esm/label/label.styles.js +7 -6
- package/dist/esm/label/label.styles.js.map +1 -1
- package/dist/esm/link/link.js +22 -0
- package/dist/esm/link/link.js.map +1 -1
- package/dist/esm/link/link.styles.js +11 -4
- package/dist/esm/link/link.styles.js.map +1 -1
- package/dist/esm/link/link.template.js +2 -2
- package/dist/esm/link/link.template.js.map +1 -1
- package/dist/esm/progress-bar/progress-bar.js +40 -0
- package/dist/esm/progress-bar/progress-bar.js.map +1 -1
- package/dist/esm/progress-bar/progress-bar.styles.js +7 -6
- package/dist/esm/progress-bar/progress-bar.styles.js.map +1 -1
- package/dist/esm/spinner/spinner.js +27 -0
- package/dist/esm/spinner/spinner.js.map +1 -1
- package/dist/esm/spinner/spinner.styles.js +9 -8
- package/dist/esm/spinner/spinner.styles.js.map +1 -1
- package/dist/esm/styles/partials/badge.partials.js +43 -42
- package/dist/esm/styles/partials/badge.partials.js.map +1 -1
- package/dist/esm/styles/states/index.js +177 -0
- package/dist/esm/styles/states/index.js.map +1 -0
- package/dist/esm/text-input/text-input.js +27 -0
- package/dist/esm/text-input/text-input.js.map +1 -1
- package/dist/esm/text-input/text-input.styles.js +23 -22
- package/dist/esm/text-input/text-input.styles.js.map +1 -1
- package/dist/esm/toggle-button/toggle-button.js +2 -1
- package/dist/esm/toggle-button/toggle-button.js.map +1 -1
- package/dist/esm/toggle-button/toggle-button.styles.js +24 -23
- package/dist/esm/toggle-button/toggle-button.styles.js.map +1 -1
- package/dist/web-components.d.ts +276 -16
- package/dist/web-components.js +649 -94
- package/dist/web-components.min.js +341 -340
- 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(
|
|
83
|
+
:host(${iconOnlyState}) {
|
|
84
84
|
min-width: 32px;
|
|
85
85
|
max-width: 32px;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
:host(
|
|
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(
|
|
99
|
+
:host(${smallState}${iconOnlyState}) {
|
|
100
100
|
min-width: 24px;
|
|
101
101
|
max-width: 24px;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
:host(
|
|
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(
|
|
112
|
+
:host(${largeState}${iconOnlyState}) {
|
|
113
113
|
min-width: 40px;
|
|
114
114
|
max-width: 40px;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
:host(
|
|
117
|
+
:host(${largeState}) ::slotted(svg) {
|
|
118
118
|
font-size: 24px;
|
|
119
119
|
height: 24px;
|
|
120
120
|
width: 24px;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
:host(
|
|
124
|
-
:host([shape='circular']:focus-visible) {
|
|
123
|
+
:host(:is(${circularState}, ${circularState}:focus-visible)) {
|
|
125
124
|
border-radius: ${borderRadiusCircular};
|
|
126
125
|
}
|
|
127
126
|
|
|
128
|
-
:host(
|
|
129
|
-
:host([shape='square']:focus-visible) {
|
|
127
|
+
:host(:is(${squareState}, ${squareState}:focus-visible)) {
|
|
130
128
|
border-radius: ${borderRadiusNone};
|
|
131
129
|
}
|
|
132
130
|
|
|
133
|
-
:host(
|
|
131
|
+
:host(${primaryState}) {
|
|
134
132
|
background-color: ${colorBrandBackground};
|
|
135
133
|
color: ${colorNeutralForegroundOnBrand};
|
|
136
134
|
border-color: transparent;
|
|
137
135
|
}
|
|
138
136
|
|
|
139
|
-
:host(
|
|
137
|
+
:host(${primaryState}:hover) {
|
|
140
138
|
background-color: ${colorBrandBackgroundHover};
|
|
141
139
|
}
|
|
142
140
|
|
|
143
|
-
:host(
|
|
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(
|
|
146
|
+
:host(${primaryState}:hover:active) {
|
|
150
147
|
background-color: ${colorBrandBackgroundPressed};
|
|
151
148
|
}
|
|
152
149
|
|
|
153
|
-
:host(
|
|
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(
|
|
155
|
+
:host(${outlineState}) {
|
|
159
156
|
background-color: ${colorTransparentBackground};
|
|
160
157
|
}
|
|
161
158
|
|
|
162
|
-
:host(
|
|
159
|
+
:host(${outlineState}:hover) {
|
|
163
160
|
background-color: ${colorTransparentBackgroundHover};
|
|
164
161
|
}
|
|
165
162
|
|
|
166
|
-
:host(
|
|
163
|
+
:host(${outlineState}:hover:active) {
|
|
167
164
|
background-color: ${colorTransparentBackgroundPressed};
|
|
168
165
|
}
|
|
169
166
|
|
|
170
|
-
:host(
|
|
167
|
+
:host(${subtleState}) {
|
|
171
168
|
background-color: ${colorSubtleBackground};
|
|
172
169
|
color: ${colorNeutralForeground2};
|
|
173
170
|
border-color: transparent;
|
|
174
171
|
}
|
|
175
172
|
|
|
176
|
-
:host(
|
|
173
|
+
:host(${subtleState}:hover) {
|
|
177
174
|
background-color: ${colorSubtleBackgroundHover};
|
|
178
175
|
color: ${colorNeutralForeground2Hover};
|
|
179
176
|
border-color: transparent;
|
|
180
177
|
}
|
|
181
178
|
|
|
182
|
-
:host(
|
|
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(
|
|
185
|
+
:host(${subtleState}:hover) ::slotted(svg) {
|
|
189
186
|
fill: ${colorNeutralForeground2BrandHover};
|
|
190
187
|
}
|
|
191
188
|
|
|
192
|
-
:host(
|
|
189
|
+
:host(${subtleState}:hover:active) ::slotted(svg) {
|
|
193
190
|
fill: ${colorNeutralForeground2BrandPressed};
|
|
194
191
|
}
|
|
195
192
|
|
|
196
|
-
:host(
|
|
193
|
+
:host(${transparentState}) {
|
|
197
194
|
background-color: ${colorTransparentBackground};
|
|
198
195
|
color: ${colorNeutralForeground2};
|
|
199
196
|
}
|
|
200
197
|
|
|
201
|
-
:host(
|
|
198
|
+
:host(${transparentState}:hover) {
|
|
202
199
|
background-color: ${colorTransparentBackgroundHover};
|
|
203
200
|
color: ${colorNeutralForeground2BrandHover};
|
|
204
201
|
}
|
|
205
202
|
|
|
206
|
-
:host(
|
|
203
|
+
:host(${transparentState}:hover:active) {
|
|
207
204
|
background-color: ${colorTransparentBackgroundPressed};
|
|
208
205
|
color: ${colorNeutralForeground2BrandPressed};
|
|
209
206
|
}
|
|
210
207
|
|
|
211
|
-
:host(
|
|
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(
|
|
226
|
-
:host(:is(
|
|
227
|
-
:host(:is(
|
|
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(
|
|
235
|
-
:host(:is(
|
|
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(
|
|
241
|
-
:host(:is(
|
|
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(
|
|
247
|
-
:host(:is(
|
|
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(
|
|
254
|
-
:host(:is(
|
|
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":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,2BAA2B,EAC3B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,qBAAqB,EACrB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,+BAA+B,EAC/B,iCAAiC,EACjC,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;IAC/B,OAAO,CAAC,aAAa,CAAC;;;sBAGJ,uBAAuB
|
|
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(
|
|
113
|
+
:host(${largeState}) {
|
|
113
114
|
--size: 20px;
|
|
114
115
|
}
|
|
115
116
|
|
|
116
|
-
:host(
|
|
117
|
-
:host(
|
|
117
|
+
:host(${largeState}) ::slotted([slot='checked-indicator']),
|
|
118
|
+
:host(${largeState}) .checked-indicator {
|
|
118
119
|
width: 16px;
|
|
119
120
|
}
|
|
120
121
|
|
|
121
|
-
:host(
|
|
122
|
-
:host(
|
|
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;
|
|
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(
|
|
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(
|
|
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(
|
|
53
|
-
|
|
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(
|
|
57
|
+
:host(${transparentState}:hover) ::slotted([slot='description']) {
|
|
59
58
|
color: ${colorNeutralForeground2BrandHover};
|
|
60
59
|
}
|
|
61
60
|
|
|
62
|
-
:host(
|
|
61
|
+
:host(${transparentState}:active) ::slotted([slot='description']) {
|
|
63
62
|
color: ${colorNeutralForeground2BrandPressed};
|
|
64
63
|
}
|
|
65
64
|
|
|
66
|
-
:host(:is(
|
|
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(
|
|
70
|
+
:host(${smallState}) {
|
|
72
71
|
padding: 8px;
|
|
73
72
|
padding-bottom: 10px;
|
|
74
73
|
}
|
|
75
74
|
|
|
76
|
-
:host(
|
|
75
|
+
:host(${iconOnlyState}) {
|
|
77
76
|
min-width: 52px;
|
|
78
77
|
max-width: 52px;
|
|
79
78
|
padding: ${spacingHorizontalSNudge};
|
|
80
79
|
}
|
|
81
80
|
|
|
82
|
-
:host(
|
|
81
|
+
:host(${iconOnlyState}${smallState}) {
|
|
83
82
|
min-width: 48px;
|
|
84
83
|
max-width: 48px;
|
|
85
84
|
padding: ${spacingHorizontalXS};
|
|
86
85
|
}
|
|
87
86
|
|
|
88
|
-
:host(
|
|
87
|
+
:host(${iconOnlyState}${largeState}) {
|
|
89
88
|
min-width: 56px;
|
|
90
89
|
max-width: 56px;
|
|
91
90
|
padding: ${spacingHorizontalS};
|
|
92
91
|
}
|
|
93
92
|
|
|
94
|
-
:host(
|
|
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(
|
|
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
|
|
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;
|
|
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;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAQ5D;;;GAGG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAkGnE;;;;;;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;IA0B9B,CAAC;IA5JC;;;;OAIG;IACI,iBAAiB,CAAC,IAAwC,EAAE,IAAwC;QACzG,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAAmC,EAAE,IAAmC;QAC1F,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAYD;;;;OAIG;IACI,YAAY,CAAC,IAAmC,EAAE,IAAmC;QAC1F,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAYD;;;;OAIG;IACI,WAAW,CAAC,IAAkC,EAAE,IAAkC;QACvF,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;SACtD;QACD,IAAI,IAAI,EAAE;YACR,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;SACrD;IACH,CAAC;IAWS,YAAY;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAWS,oBAAoB;QAC5B,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAsBD;;;;OAIG;IACI,UAAU,CAAC,IAAyB,EAAE,IAAyB;QACpE,WAAW,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC;IAED;;;;;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;AA9JC;IADC,IAAI;gDACsC;AAwB3C;IADC,IAAI;2CAC4B;AAwBjC;IADC,IAAI;2CAC4B;AAwBjC;IADC,IAAI;0CAC0B;AAwB/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;AAoC9B,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}
|
|
@@ -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(
|
|
14
|
+
:host(${roundedState}) {
|
|
9
15
|
border-radius: ${borderRadiusMedium};
|
|
10
16
|
}
|
|
11
17
|
|
|
12
|
-
:host(
|
|
13
|
-
:host(
|
|
14
|
-
:host(
|
|
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(
|
|
24
|
-
:host([
|
|
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;
|
|
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"}
|