@fluentui/web-components 3.0.0-beta.23 → 3.0.0-beta.25

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 (76) hide show
  1. package/CHANGELOG.md +22 -2
  2. package/dist/dts/checkbox/checkbox.d.ts +256 -32
  3. package/dist/dts/checkbox/checkbox.options.d.ts +13 -10
  4. package/dist/dts/checkbox/checkbox.template.d.ts +3 -2
  5. package/dist/dts/checkbox/index.d.ts +2 -2
  6. package/dist/dts/field/define.d.ts +1 -0
  7. package/dist/dts/field/field.bench.d.ts +3 -0
  8. package/dist/dts/field/field.d.ts +99 -0
  9. package/dist/dts/field/field.definition.d.ts +9 -0
  10. package/dist/dts/field/field.options.d.ts +41 -0
  11. package/dist/dts/field/field.styles.d.ts +6 -0
  12. package/dist/dts/field/field.template.d.ts +6 -0
  13. package/dist/dts/field/index.d.ts +6 -0
  14. package/dist/dts/index-rollup.d.ts +1 -0
  15. package/dist/dts/index.d.ts +2 -0
  16. package/dist/dts/text-input/text-input.d.ts +50 -8
  17. package/dist/dts/utils/element-internals.d.ts +20 -0
  18. package/dist/esm/button/button.styles.js +27 -27
  19. package/dist/esm/button/button.styles.js.map +1 -1
  20. package/dist/esm/checkbox/checkbox.definition.js +1 -1
  21. package/dist/esm/checkbox/checkbox.definition.js.map +1 -1
  22. package/dist/esm/checkbox/checkbox.js +344 -41
  23. package/dist/esm/checkbox/checkbox.js.map +1 -1
  24. package/dist/esm/checkbox/checkbox.options.js +0 -8
  25. package/dist/esm/checkbox/checkbox.options.js.map +1 -1
  26. package/dist/esm/checkbox/checkbox.styles.js +145 -123
  27. package/dist/esm/checkbox/checkbox.styles.js.map +1 -1
  28. package/dist/esm/checkbox/checkbox.template.js +23 -34
  29. package/dist/esm/checkbox/checkbox.template.js.map +1 -1
  30. package/dist/esm/checkbox/index.js +1 -1
  31. package/dist/esm/checkbox/index.js.map +1 -1
  32. package/dist/esm/dialog/dialog.styles.js +9 -2
  33. package/dist/esm/dialog/dialog.styles.js.map +1 -1
  34. package/dist/esm/field/define.js +4 -0
  35. package/dist/esm/field/define.js.map +1 -0
  36. package/dist/esm/field/field.bench.js +10 -0
  37. package/dist/esm/field/field.bench.js.map +1 -0
  38. package/dist/esm/field/field.definition.js +20 -0
  39. package/dist/esm/field/field.definition.js.map +1 -0
  40. package/dist/esm/field/field.js +139 -0
  41. package/dist/esm/field/field.js.map +1 -0
  42. package/dist/esm/field/field.options.js +27 -0
  43. package/dist/esm/field/field.options.js.map +1 -0
  44. package/dist/esm/field/field.styles.js +186 -0
  45. package/dist/esm/field/field.styles.js.map +1 -0
  46. package/dist/esm/field/field.template.js +26 -0
  47. package/dist/esm/field/field.template.js.map +1 -0
  48. package/dist/esm/field/index.js +6 -0
  49. package/dist/esm/field/index.js.map +1 -0
  50. package/dist/esm/index-rollup.js +1 -0
  51. package/dist/esm/index-rollup.js.map +1 -1
  52. package/dist/esm/index.js +1 -0
  53. package/dist/esm/index.js.map +1 -1
  54. package/dist/esm/label/label.styles.js +12 -5
  55. package/dist/esm/label/label.styles.js.map +1 -1
  56. package/dist/esm/text/text.styles.js +48 -24
  57. package/dist/esm/text/text.styles.js.map +1 -1
  58. package/dist/esm/text-input/text-input.definition.js +3 -0
  59. package/dist/esm/text-input/text-input.definition.js.map +1 -1
  60. package/dist/esm/text-input/text-input.js +78 -20
  61. package/dist/esm/text-input/text-input.js.map +1 -1
  62. package/dist/esm/text-input/text-input.styles.js +14 -9
  63. package/dist/esm/text-input/text-input.styles.js.map +1 -1
  64. package/dist/esm/text-input/text-input.template.js +39 -33
  65. package/dist/esm/text-input/text-input.template.js.map +1 -1
  66. package/dist/esm/theme/set-theme.js +10 -1
  67. package/dist/esm/theme/set-theme.js.map +1 -1
  68. package/dist/esm/utils/element-internals.js +32 -0
  69. package/dist/esm/utils/element-internals.js.map +1 -0
  70. package/dist/web-components.d.ts +471 -55
  71. package/dist/web-components.js +2785 -2151
  72. package/dist/web-components.min.js +240 -235
  73. package/package.json +2 -1
  74. package/dist/dts/checkbox/checkbox.form-associated.d.ts +0 -14
  75. package/dist/esm/checkbox/checkbox.form-associated.js +0 -14
  76. package/dist/esm/checkbox/checkbox.form-associated.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAYvE;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,QAAS,SAAQ,sBAAsB;IAkDlD;QACE,KAAK,EAAE,CAAC;QArBV;;;;;WAKG;QACI,iBAAY,GAAW,IAAI,CAAC;QAQnC;;WAEG;QAEI,kBAAa,GAAY,KAAK,CAAC;QAetC;;WAEG;QACI,oBAAe,GAAG,CAAC,CAAgB,EAAQ,EAAE;YAClD,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,QAAQ,CAAC,CAAC,GAAG,EAAE;gBACb,KAAK,QAAQ;oBACX,IAAI,CAAC,aAAa,EAAE,CAAC;oBACrB,MAAM;aACT;QACH,CAAC,CAAC;QAEF;;WAEG;QACI,iBAAY,GAAG,CAAC,CAAa,EAAQ,EAAE;YAC5C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;QACH,CAAC,CAAC;QAhCA,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC9C,CAAC;IAEO,aAAa;QACnB,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;QACD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC/B,CAAC;CAyBF;AA7EC;IADC,IAAI;uCACwB;AAU7B;IADC,IAAI;sCACsB;AAU3B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACO;AAa7C;IADC,UAAU;qDACyB;AAMpC;IADC,UAAU;+CAC2B"}
1
+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.ts"],"names":[],"mappings":"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"}
@@ -14,12 +14,4 @@ export const CheckboxSize = {
14
14
  medium: 'medium',
15
15
  large: 'large',
16
16
  };
17
- /**
18
- * Checkbox label position
19
- * @public
20
- */
21
- export const CheckboxLabelPosition = {
22
- before: 'before',
23
- after: 'after',
24
- };
25
17
  //# sourceMappingURL=checkbox.options.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.options.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;CACR,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC"}
1
+ {"version":3,"file":"checkbox.options.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.options.ts"],"names":[],"mappings":"AAaA;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;CACR,CAAC;AAKX;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC"}
@@ -1,164 +1,186 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { display } from '../utils/index.js';
3
- import { borderRadiusCircular, borderRadiusMedium, borderRadiusSmall, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandForeground1, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorCompoundBrandStroke, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralForeground1, colorNeutralForeground2, colorNeutralForeground3, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorStrokeFocus1, colorStrokeFocus2, colorTransparentBackgroundHover, fontFamilyBase, fontSizeBase300, lineHeightBase300, spacingHorizontalS, spacingHorizontalXS, spacingVerticalS, strokeWidthThin, } from '../theme/design-tokens.js';
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
+ import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
4
+ import { display } from '../utils/display.js';
5
+ /**
6
+ * Selector for the `checked` state.
7
+ * @public
8
+ */
9
+ const checkedState = css.partial `:is([state--checked], :state(checked))`;
10
+ /**
11
+ * Selector for the `indeterminate` state.
12
+ * @public
13
+ */
14
+ const indeterminateState = css.partial `:is([state--indeterminate], :state(indeterminate))`;
4
15
  /** Checkbox styles
5
16
  *
6
17
  * @public
7
18
  */
8
19
  export const styles = css `
9
20
  ${display('inline-flex')}
21
+
10
22
  :host {
11
- align-items: center;
12
- outline: none;
13
- user-select: none;
14
- vertical-align: middle;
23
+ --size: 16px;
24
+ background-color: ${colorNeutralBackground1};
25
+ border-radius: ${borderRadiusSmall};
26
+ border: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
27
+ box-sizing: border-box;
15
28
  cursor: pointer;
16
- font-family: ${fontFamilyBase};
17
- font-size: ${fontSizeBase300};
18
- line-height: ${lineHeightBase300};
19
- color: ${colorNeutralForeground3};
20
29
  position: relative;
30
+ width: var(--size);
21
31
  }
22
32
 
23
- :host(:focus-visible)::after {
24
- content: '';
25
- position: absolute;
26
- inset: 0px;
27
- cursor: pointer;
28
- border-radius: ${borderRadiusMedium};
29
- outline: none;
30
- border: 2px solid ${colorStrokeFocus1};
31
- box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
32
- }
33
-
34
- .control {
35
- position: relative;
36
- box-sizing: border-box;
37
- display: flex;
38
- flex-shrink: 0;
39
- align-items: center;
40
- justify-content: center;
41
- overflow: hidden;
42
- margin: ${spacingVerticalS} ${spacingHorizontalS};
43
- fill: currentcolor;
44
- height: 16px;
45
- width: 16px;
46
- border: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
47
- border-radius: ${borderRadiusSmall};
48
- outline: none;
49
- }
50
- .label {
51
- align-self: center;
52
- cursor: inherit;
53
- padding-inline: ${spacingHorizontalS};
54
- padding-bottom: ${spacingVerticalS};
55
- padding-top: ${spacingVerticalS};
56
- }
57
- .label__hidden {
58
- display: none;
59
- visibility: hidden;
60
- }
33
+ :host,
34
+ .indeterminate-indicator,
61
35
  .checked-indicator {
62
- display: flex;
63
- align-items: center;
64
- justify-content: center;
65
- color: ${colorNeutralForegroundInverted};
66
- font-size: 12px;
67
- margin: auto;
68
- opacity: 0;
69
- }
70
- .indeterminate-indicator {
71
- position: absolute;
72
- width: 8px;
73
- height: 8px;
74
- border-radius: ${borderRadiusSmall};
75
- background-color: ${colorCompoundBrandForeground1};
76
- opacity: 0;
36
+ aspect-ratio: 1;
77
37
  }
38
+
78
39
  :host(:hover) {
79
- color: ${colorNeutralForeground2};
80
- }
81
- :host(:hover) .control {
82
40
  border-color: ${colorNeutralStrokeAccessibleHover};
83
41
  }
84
- :host(:hover) .indeterminate-indicator {
85
- background-color: ${colorCompoundBrandForeground1Hover};
86
- }
87
- :host(:active) .control {
42
+
43
+ :host(:active) {
88
44
  border-color: ${colorNeutralStrokeAccessiblePressed};
89
45
  }
90
- :host(:active) .indeterminate-indicator {
91
- background-color: ${colorCompoundBrandForeground1Pressed};
46
+
47
+ :host(${checkedState}:hover) {
48
+ background-color: ${colorCompoundBrandBackgroundHover};
49
+ border-color: ${colorCompoundBrandStrokeHover};
92
50
  }
93
- :host([aria-checked='true']),
94
- :host([aria-checked='mixed']),
95
- :host(:active) {
96
- color: ${colorNeutralForeground1};
51
+
52
+ :host(${checkedState}:active) {
53
+ background-color: ${colorCompoundBrandBackgroundPressed};
54
+ border-color: ${colorCompoundBrandStrokePressed};
97
55
  }
98
- :host([aria-checked='true']) .control {
99
- background-color: ${colorCompoundBrandBackground};
56
+
57
+ :host(:focus-visible) {
58
+ outline: none;
100
59
  }
101
- :host([aria-checked='true']:hover) .control {
102
- border-color: ${colorCompoundBrandStrokeHover};
103
- background-color: ${colorCompoundBrandBackgroundHover};
60
+
61
+ :host(:not([slot='input']))::after {
62
+ content: '';
63
+ position: absolute;
64
+ inset: -8px;
65
+ box-sizing: border-box;
66
+ outline: none;
67
+ border: ${strokeWidthThick} solid ${colorTransparentStroke};
68
+ border-radius: ${borderRadiusMedium};
104
69
  }
105
- :host([aria-checked='true']:active) .control {
106
- background-color: ${colorCompoundBrandBackgroundPressed};
70
+
71
+ :host(:not([slot='input']):focus-visible)::after {
72
+ border-color: ${colorStrokeFocus2};
107
73
  }
108
- :host([aria-checked='mixed']:hover) .control {
109
- border-color: ${colorCompoundBrandStrokeHover};
74
+
75
+ .indeterminate-indicator,
76
+ .checked-indicator {
77
+ color: ${colorNeutralForegroundInverted};
78
+ inset: 0;
79
+ margin: auto;
80
+ position: absolute;
110
81
  }
111
- :host([aria-checked='true']) .checked-indicator,
112
- :host([aria-checked='mixed']) .indeterminate-indicator {
113
- opacity: 1;
82
+
83
+ ::slotted([slot='checked-indicator']),
84
+ .checked-indicator {
85
+ fill: currentColor;
86
+ display: inline-flex;
87
+ flex: 1 0 auto;
88
+ width: 12px;
114
89
  }
115
- :host([aria-checked='true']) .control,
116
- :host([aria-checked='mixed']) .control {
117
- border-color: ${colorCompoundBrandStroke};
90
+
91
+ :host(:not(${checkedState})) *:is(::slotted([slot='checked-indicator']), .checked-indicator) {
92
+ display: none;
118
93
  }
119
- :host([aria-checked='mixed']:active) .control,
120
- :host([aria-checked='true']:active) .control {
121
- border-color: ${colorCompoundBrandStrokePressed};
94
+
95
+ :host(${checkedState}),
96
+ :host(${indeterminateState}) {
97
+ border-color: ${colorCompoundBrandStroke};
122
98
  }
123
- :host([label-position='before']) {
124
- flex-direction: row-reverse;
99
+
100
+ :host(${checkedState}),
101
+ :host(${indeterminateState}) .indeterminate-indicator {
102
+ background-color: ${colorCompoundBrandBackground};
125
103
  }
126
- :host([label-position='before']) .label {
127
- padding-inline: ${spacingHorizontalS} ${spacingHorizontalXS};
128
- padding-top: ${spacingVerticalS};
129
- padding-bottom: ${spacingVerticalS};
104
+
105
+ :host(${indeterminateState}) .indeterminate-indicator {
106
+ border-radius: ${borderRadiusSmall};
107
+ position: absolute;
108
+ width: calc(var(--size) / 2);
109
+ inset: 0;
130
110
  }
131
- :host([size='large']) .control {
132
- width: 20px;
133
- height: 20px;
111
+
112
+ :host([size='large']) {
113
+ --size: 20px;
134
114
  }
115
+
116
+ :host([size='large']) ::slotted([slot='checked-indicator']),
135
117
  :host([size='large']) .checked-indicator {
136
- font-size: 16px;
137
- height: 20px;
138
- }
139
- :host([aria-checked='mixed'][size='large']) .indeterminate-indicator {
140
- height: 10px;
141
- width: 10px;
118
+ width: 16px;
142
119
  }
143
- :host([shape='circular']) .control,
120
+
121
+ :host([shape='circular']),
144
122
  :host([shape='circular']) .indeterminate-indicator {
145
123
  border-radius: ${borderRadiusCircular};
146
124
  }
147
- :host([disabled]) .control,
148
- :host([aria-checked='mixed'][disabled]) .control,
149
- :host([aria-checked='true'][disabled]) .control {
150
- background-color: ${colorTransparentBackgroundHover};
125
+
126
+ :host([disabled]),
127
+ :host([disabled]${checkedState}) {
128
+ background-color: ${colorNeutralBackgroundDisabled};
151
129
  border-color: ${colorNeutralStrokeDisabled};
152
130
  }
153
- :host([aria-checked='true'][disabled]) .checked-indicator,
154
- :host([disabled]) ::slotted([slot='start']),
155
- :host([disabled]) .label,
156
- :host([aria-checked='mixed'][disabled]) .label,
157
- :host([aria-checked='true'][disabled]) .label {
158
- color: ${colorNeutralForegroundDisabled};
131
+
132
+ :host([disabled]) {
133
+ cursor: unset;
159
134
  }
160
- :host([disabled]) .indeterminate-indicator {
161
- background-color: ${colorNeutralForegroundDisabled};
135
+
136
+ :host([disabled]${indeterminateState}) .indeterminate-indicator {
137
+ background-color: ${colorNeutralStrokeDisabled};
138
+ }
139
+
140
+ :host([disabled]${checkedState}) .checked-indicator {
141
+ color: ${colorNeutralStrokeDisabled};
162
142
  }
163
- `;
143
+ `.withBehaviors(forcedColorsStylesheetBehavior(css `
144
+ :host {
145
+ border-color: FieldText;
146
+ }
147
+
148
+ :host(:not([slot='input']:focus-visible))::after {
149
+ border-color: Canvas;
150
+ }
151
+
152
+ :host(:not([disabled]):hover),
153
+ :host(${checkedState}:not([disabled]):hover),
154
+ :host(:not([slot='input']):focus-visible)::after {
155
+ border-color: Highlight;
156
+ }
157
+
158
+ .indeterminate-indicator,
159
+ .checked-indicator {
160
+ color: HighlightText;
161
+ }
162
+
163
+ :host(${checkedState}),
164
+ :host(${indeterminateState}) .indeterminate-indicator {
165
+ background-color: FieldText;
166
+ }
167
+
168
+ :host(${checkedState}:not([disabled]):hover),
169
+ :host(${indeterminateState}:not([disabled]):hover) .indeterminate-indicator {
170
+ background-color: Highlight;
171
+ }
172
+
173
+ :host([disabled]) {
174
+ border-color: GrayText;
175
+ }
176
+
177
+ :host([disabled]${indeterminateState}) .indeterminate-indicator {
178
+ background-color: GrayText;
179
+ }
180
+
181
+ :host([disabled]),
182
+ :host([disabled]${checkedState}) .checked-indicator {
183
+ color: GrayText;
184
+ }
185
+ `));
164
186
  //# sourceMappingURL=checkbox.styles.js.map
@@ -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,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,6BAA6B,EAC7B,kCAAkC,EAClC,oCAAoC,EACpC,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,+BAA+B,EAC/B,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;mBAOP,cAAc;iBAChB,eAAe;mBACb,iBAAiB;aACvB,uBAAuB;;;;;;;;;qBASf,kBAAkB;;wBAEf,iBAAiB;kCACP,iBAAiB;;;;;;;;;;;cAWrC,gBAAgB,IAAI,kBAAkB;;;;cAItC,eAAe,UAAU,4BAA4B;qBAC9C,iBAAiB;;;;;;sBAMhB,kBAAkB;sBAClB,gBAAgB;mBACnB,gBAAgB;;;;;;;;;;aAUtB,8BAA8B;;;;;;;;;qBAStB,iBAAiB;wBACd,6BAA6B;;;;aAIxC,uBAAuB;;;oBAGhB,iCAAiC;;;wBAG7B,kCAAkC;;;oBAGtC,mCAAmC;;;wBAG/B,oCAAoC;;;;;aAK/C,uBAAuB;;;wBAGZ,4BAA4B;;;oBAGhC,6BAA6B;wBACzB,iCAAiC;;;wBAGjC,mCAAmC;;;oBAGvC,6BAA6B;;;;;;;;oBAQ7B,wBAAwB;;;;oBAIxB,+BAA+B;;;;;;sBAM7B,kBAAkB,IAAI,mBAAmB;mBAC5C,gBAAgB;sBACb,gBAAgB;;;;;;;;;;;;;;;;qBAgBjB,oBAAoB;;;;;wBAKjB,+BAA+B;oBACnC,0BAA0B;;;;;;;aAOjC,8BAA8B;;;wBAGnB,8BAA8B;;CAErD,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;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,20 +1,19 @@
1
- import { html, slotted } from '@microsoft/fast-element';
2
- import { staticallyCompose } from '../utils/index.js';
3
- const checkedIndicator = html.partial(`
4
- <div class="checked-indicator">
5
- <svg fill="currentColor"
6
- aria-hidden="true"
7
- width="1em"
8
- height="1em"
9
- viewBox="0 0 12 12"
10
- xmlns="http://www.w3.org/2000/svg">
11
- <path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor">
12
- </path>
13
- </svg>
14
- </div>
1
+ import { html } from '@microsoft/fast-element';
2
+ import { staticallyCompose } from '../utils/template-helpers.js';
3
+ const checkedIndicator = html.partial(/* html */ `
4
+ <svg
5
+ fill="currentColor"
6
+ aria-hidden="true"
7
+ class="checked-indicator"
8
+ width="1em"
9
+ height="1em"
10
+ viewBox="0 0 12 12"
11
+ xmlns="http://www.w3.org/2000/svg">
12
+ <path d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 0 1-1.08.02L2.22 6.53a.75.75 0 0 1 1.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 0 1 1.06-.04Z" fill="currentColor"></path>
13
+ </svg>
15
14
  `);
16
- const indeterminateIndicator = html.partial(`
17
- <div class="indeterminate-indicator"></div>
15
+ const indeterminateIndicator = html.partial(/* html */ `
16
+ <span class="indeterminate-indicator"></span>
18
17
  `);
19
18
  /**
20
19
  * Template for the Checkbox component
@@ -23,24 +22,14 @@ const indeterminateIndicator = html.partial(`
23
22
  export function checkboxTemplate(options = {}) {
24
23
  return html `
25
24
  <template
26
- role="checkbox"
27
- aria-checked="${x => (x.indeterminate ? 'mixed' : x.checked)}"
28
- aria-required="${x => x.required}"
29
- aria-disabled="${x => x.disabled}"
30
- tabindex="${x => (x.disabled ? null : 0)}"
31
- @keypress="${(x, c) => x.keypressHandler(c.event)}"
25
+ tabindex="${x => (!x.disabled ? 0 : void 0)}"
32
26
  @click="${(x, c) => x.clickHandler(c.event)}"
27
+ @input="${(x, c) => x.inputHandler(c.event)}"
28
+ @keydown="${(x, c) => x.keydownHandler(c.event)}"
29
+ @keyup="${(x, c) => x.keyupHandler(c.event)}"
33
30
  >
34
- <div part="control" class="control">
35
- <slot name="checked-indicator"> ${staticallyCompose(options.checkedIndicator)} </slot>
36
- <slot name="indeterminate-indicator"> ${staticallyCompose(options.indeterminateIndicator)} </slot>
37
- </div>
38
- <label
39
- part="label"
40
- class="${x => (x.defaultSlottedNodes && x.defaultSlottedNodes.length ? 'label' : 'label label__hidden')}"
41
- >
42
- <slot ${slotted('defaultSlottedNodes')}></slot>
43
- </label>
31
+ <slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot>
32
+ <slot name="indeterminate-indicator">${staticallyCompose(options.indeterminateIndicator)}</slot>
44
33
  </template>
45
34
  `;
46
35
  }
@@ -49,7 +38,7 @@ export function checkboxTemplate(options = {}) {
49
38
  * @public
50
39
  */
51
40
  export const template = checkboxTemplate({
52
- checkedIndicator: checkedIndicator,
53
- indeterminateIndicator: indeterminateIndicator,
41
+ checkedIndicator,
42
+ indeterminateIndicator,
54
43
  });
55
44
  //# sourceMappingURL=checkbox.template.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGtD,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;CAYrC,CAAC,CAAC;AAEH,MAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,CAAC;;CAE3C,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAAqB,UAA2B,EAAE;IAChF,OAAO,IAAI,CAAG;;;sBAGM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;uBAC3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;mBAC3B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;gBACxD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;;;0CAGrB,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC;gDACrC,iBAAiB,CAAC,OAAO,CAAC,sBAAsB,CAAC;;;;iBAIhF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;gBAE/F,OAAO,CAAC,qBAAqB,CAAC;;;GAG3C,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,CAAC;IACtE,gBAAgB,EAAE,gBAAgB;IAClC,sBAAsB,EAAE,sBAAsB;CAC/C,CAAC,CAAC"}
1
+ {"version":3,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAIjE,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;;;;;;;;;;;CAWhD,CAAC,CAAC;AAEH,MAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;;CAEtD,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAAqB,UAA2B,EAAE;IAChF,OAAO,IAAI,CAAG;;kBAEE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;gBACjC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAc,CAAC;kBACxC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;gBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAsB,CAAC;;uCAE3B,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC;6CACrC,iBAAiB,CAAC,OAAO,CAAC,sBAAsB,CAAC;;GAE3F,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,CAAC;IACtE,gBAAgB;IAChB,sBAAsB;CACvB,CAAC,CAAC"}
@@ -1,6 +1,6 @@
1
1
  export { definition as CheckboxDefinition } from './checkbox.definition.js';
2
2
  export { Checkbox } from './checkbox.js';
3
- export { CheckboxLabelPosition, CheckboxShape, CheckboxSize } from './checkbox.options.js';
3
+ export { CheckboxShape, CheckboxSize } from './checkbox.options.js';
4
4
  export { styles as CheckboxStyles } from './checkbox.styles.js';
5
5
  export { template as CheckboxTemplate } from './checkbox.template.js';
6
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC3F,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEpE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}
@@ -1,5 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { borderRadiusXLarge, colorBackgroundOverlay, colorNeutralBackground1, colorNeutralForeground1, colorTransparentStroke, curveAccelerateMid, curveDecelerateMid, curveLinear, durationGentle, shadow64, strokeWidthThin, } from '../theme/design-tokens.js';
3
+ import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
3
4
  /** Dialog styles
4
5
  * @public
5
6
  */
@@ -17,7 +18,7 @@ export const styles = css `
17
18
  dialog {
18
19
  background: ${colorNeutralBackground1};
19
20
  border-radius: ${borderRadiusXLarge};
20
- border: ${strokeWidthThin} solid ${colorTransparentStroke};
21
+ border: none;
21
22
  box-shadow: ${shadow64};
22
23
  color: ${colorNeutralForeground1};
23
24
  max-height: calc(-48px + 100vh);
@@ -75,5 +76,11 @@ export const styles = css `
75
76
  }
76
77
  }
77
78
  }
78
- `;
79
+ `.withBehaviors(forcedColorsStylesheetBehavior(css `
80
+ @layer base {
81
+ dialog {
82
+ border: ${strokeWidthThin} solid ${colorTransparentStroke};
83
+ }
84
+ }
85
+ `));
79
86
  //# sourceMappingURL=dialog.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,QAAQ,EACR,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;2BAGE,sBAAsB;;;;;;;;;oBAS7B,uBAAuB;uBACpB,kBAAkB;gBACzB,eAAe,UAAU,sBAAsB;oBAC3C,QAAQ;eACb,uBAAuB;;;;;;;;;;;;;;;;;;;;;+BAqBP,cAAc;sCACP,kBAAkB;;;;;sCAKlB,WAAW;;;;;;;;;;;;;;sCAcX,kBAAkB;;;;;;;;;;;;;;;CAevD,CAAC"}
1
+ {"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,QAAQ,EACR,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AAEvG;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;2BAGE,sBAAsB;;;;;;;;;oBAS7B,uBAAuB;uBACpB,kBAAkB;;oBAErB,QAAQ;eACb,uBAAuB;;;;;;;;;;;;;;;;;;;;;+BAqBP,cAAc;sCACP,kBAAkB;;;;;sCAKlB,WAAW;;;;;;;;;;;;;;sCAcX,kBAAkB;;;;;;;;;;;;;;;CAevD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;kBAGlB,eAAe,UAAU,sBAAsB;;;GAG9D,CAAC,CACH,CAAC"}
@@ -0,0 +1,4 @@
1
+ import { FluentDesignSystem } from '../fluent-design-system.js';
2
+ import { definition } from './field.definition.js';
3
+ definition.define(FluentDesignSystem.registry);
4
+ //# sourceMappingURL=define.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/field/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { FluentDesignSystem } from '../fluent-design-system.js';
2
+ import { definition } from './field.definition.js';
3
+ definition.define(FluentDesignSystem.registry);
4
+ const itemRenderer = () => {
5
+ const field = document.createElement('fluent-field');
6
+ return field;
7
+ };
8
+ export default itemRenderer;
9
+ export { tests } from '../utils/benchmark-wrapper.js';
10
+ //# sourceMappingURL=field.bench.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"field.bench.js","sourceRoot":"","sources":["../../../src/field/field.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
@@ -0,0 +1,20 @@
1
+ import { FluentDesignSystem } from '../fluent-design-system.js';
2
+ import { Field } from './field.js';
3
+ import { styles } from './field.styles.js';
4
+ import { template } from './field.template.js';
5
+ /**
6
+ * The Fluent Field Element
7
+ *
8
+ * @public
9
+ * @remarks
10
+ * HTML Element: `<fluent-field>`
11
+ */
12
+ export const definition = Field.compose({
13
+ name: `${FluentDesignSystem.prefix}-field`,
14
+ template,
15
+ styles,
16
+ shadowOptions: {
17
+ delegatesFocus: true,
18
+ },
19
+ });
20
+ //# sourceMappingURL=field.definition.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"field.definition.js","sourceRoot":"","sources":["../../../src/field/field.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,QAAQ;IAC1C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}