@fluentui/web-components 3.0.0-beta.23 → 3.0.0-beta.24
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 +12 -2
- package/dist/esm/button/button.styles.js +27 -27
- package/dist/esm/button/button.styles.js.map +1 -1
- package/dist/esm/theme/set-theme.js +10 -1
- package/dist/esm/theme/set-theme.js.map +1 -1
- package/dist/web-components.js +1 -1
- package/dist/web-components.min.js +1 -1
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 06 Jun 2024 04:06:09 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-beta.24](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.24)
|
|
8
|
+
|
|
9
|
+
Thu, 06 Jun 2024 04:06:09 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.23..@fluentui/web-components_v3.0.0-beta.24)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- add @floating-ui/dom as a dependency ([PR #31590](https://github.com/microsoft/fluentui/pull/31590) by zacky.ma@microsoft.com)
|
|
15
|
+
- fix disabled button styles ([PR #31585](https://github.com/microsoft/fluentui/pull/31585) by rupertdavid@microsoft.com)
|
|
16
|
+
|
|
7
17
|
## [3.0.0-beta.23](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.23)
|
|
8
18
|
|
|
9
|
-
Wed, 05 Jun 2024 04:06:
|
|
19
|
+
Wed, 05 Jun 2024 04:06:41 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.22..@fluentui/web-components_v3.0.0-beta.23)
|
|
11
21
|
|
|
12
22
|
### Changes
|
|
@@ -57,7 +57,7 @@ export const styles = css `
|
|
|
57
57
|
|
|
58
58
|
:host(:focus-visible) {
|
|
59
59
|
border-color: ${colorTransparentStroke};
|
|
60
|
-
outline: ${strokeWidthThick}
|
|
60
|
+
outline: ${strokeWidthThick} solid ${colorTransparentStroke};
|
|
61
61
|
box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
|
|
62
62
|
}
|
|
63
63
|
|
|
@@ -157,12 +157,6 @@ export const styles = css `
|
|
|
157
157
|
box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
|
|
158
158
|
}
|
|
159
159
|
|
|
160
|
-
:host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary'])),
|
|
161
|
-
:host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover),
|
|
162
|
-
:host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover:active) {
|
|
163
|
-
border-color: transparent;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
160
|
:host([appearance='outline']) {
|
|
167
161
|
background-color: ${colorTransparentBackground};
|
|
168
162
|
}
|
|
@@ -175,12 +169,6 @@ export const styles = css `
|
|
|
175
169
|
background-color: ${colorTransparentBackgroundPressed};
|
|
176
170
|
}
|
|
177
171
|
|
|
178
|
-
:host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline'])),
|
|
179
|
-
:host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover),
|
|
180
|
-
:host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover:active) {
|
|
181
|
-
background-color: ${colorTransparentBackground};
|
|
182
|
-
}
|
|
183
|
-
|
|
184
172
|
:host([appearance='subtle']) {
|
|
185
173
|
background-color: ${colorSubtleBackground};
|
|
186
174
|
color: ${colorNeutralForeground2};
|
|
@@ -199,13 +187,6 @@ export const styles = css `
|
|
|
199
187
|
border-color: transparent;
|
|
200
188
|
}
|
|
201
189
|
|
|
202
|
-
:host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle'])),
|
|
203
|
-
:host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover),
|
|
204
|
-
:host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover:active) {
|
|
205
|
-
background-color: ${colorTransparentBackground};
|
|
206
|
-
border-color: transparent;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
190
|
:host([appearance='subtle']:hover) ::slotted(svg) {
|
|
210
191
|
fill: ${colorNeutralForeground2BrandHover};
|
|
211
192
|
}
|
|
@@ -235,13 +216,6 @@ export const styles = css `
|
|
|
235
216
|
border-color: transparent;
|
|
236
217
|
}
|
|
237
218
|
|
|
238
|
-
:host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent'])),
|
|
239
|
-
:host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover),
|
|
240
|
-
:host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover:active) {
|
|
241
|
-
border-color: transparent;
|
|
242
|
-
background-color: ${colorTransparentBackground};
|
|
243
|
-
}
|
|
244
|
-
|
|
245
219
|
:host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable])),
|
|
246
220
|
:host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover),
|
|
247
221
|
:host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover:active) {
|
|
@@ -250,6 +224,32 @@ export const styles = css `
|
|
|
250
224
|
color: ${colorNeutralForegroundDisabled};
|
|
251
225
|
cursor: not-allowed;
|
|
252
226
|
}
|
|
227
|
+
|
|
228
|
+
:host(:is([disabled][appearance='primary'], [disabled-focusable][appearance='primary'])),
|
|
229
|
+
:host(:is([disabled][appearance='primary'], [disabled-focusable][appearance='primary']):hover),
|
|
230
|
+
:host(:is([disabled][appearance='primary'], [disabled-focusable][appearance='primary']):hover:active) {
|
|
231
|
+
border-color: transparent;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
:host(:is([disabled][appearance='outline'], [disabled-focusable][appearance='outline'])),
|
|
235
|
+
:host(:is([disabled][appearance='outline'], [disabled-focusable][appearance='outline']):hover),
|
|
236
|
+
:host(:is([disabled][appearance='outline'], [disabled-focusable][appearance='outline']):hover:active) {
|
|
237
|
+
background-color: ${colorTransparentBackground};
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
:host(:is([disabled][appearance='subtle'], [disabled-focusable][appearance='subtle'])),
|
|
241
|
+
:host(:is([disabled][appearance='subtle'], [disabled-focusable][appearance='subtle']):hover),
|
|
242
|
+
:host(:is([disabled][appearance='subtle'], [disabled-focusable][appearance='subtle']):hover:active) {
|
|
243
|
+
background-color: ${colorTransparentBackground};
|
|
244
|
+
border-color: transparent;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
:host(:is([disabled][appearance='transparent'], [disabled-focusable][appearance='transparent'])),
|
|
248
|
+
:host(:is([disabled][appearance='transparent'], [disabled-focusable][appearance='transparent']):hover),
|
|
249
|
+
:host(:is([disabled][appearance='transparent'], [disabled-focusable][appearance='transparent']):hover:active) {
|
|
250
|
+
border-color: transparent;
|
|
251
|
+
background-color: ${colorTransparentBackground};
|
|
252
|
+
}
|
|
253
253
|
`.withBehaviors(forcedColorsStylesheetBehavior(css `
|
|
254
254
|
:host([appearance='transparent']:hover) {
|
|
255
255
|
border-color: Highlight;
|
|
@@ -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;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;sBAGJ,uBAAuB;;;;;;;;;;;wBAWrB,uBAAuB;aAClC,uBAAuB;cACtB,eAAe,UAAU,mBAAmB;iBACzC,kBAAkB;;qBAEd,kBAAkB;iBACtB,eAAe;mBACb,cAAc;mBACd,kBAAkB;mBAClB,iBAAiB;2BACT,cAAc;;kCAEP,aAAa;;;;;;;;;;wBAUvB,4BAA4B;aACvC,4BAA4B;oBACrB,wBAAwB;;;;wBAIpB,8BAA8B;oBAClC,0BAA0B;aACjC,8BAA8B;;;;;oBAKvB,sBAAsB;eAC3B,gBAAgB,
|
|
1
|
+
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -7,7 +7,16 @@ const tokenNames = Object.keys(tokens);
|
|
|
7
7
|
*/
|
|
8
8
|
export const setTheme = (theme) => {
|
|
9
9
|
for (const t of tokenNames) {
|
|
10
|
-
|
|
10
|
+
if ('registerProperty' in CSS) {
|
|
11
|
+
CSS.registerProperty({
|
|
12
|
+
name: `--${t}`,
|
|
13
|
+
inherits: true,
|
|
14
|
+
initialValue: theme[t],
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
18
|
+
document.body.style.setProperty(`--${t}`, theme[t]);
|
|
19
|
+
}
|
|
11
20
|
}
|
|
12
21
|
};
|
|
13
22
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAE7C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAoB,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAE7C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAoB,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,IAAI,kBAAkB,IAAI,GAAG,EAAE;YAC7B,GAAG,CAAC,gBAAgB,CAAC;gBACnB,IAAI,EAAE,KAAK,CAAC,EAAE;gBACd,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE,KAAK,CAAC,CAAC,CAAW;aACjC,CAAC,CAAC;SACJ;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;SAC/D;KACF;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;KACzD;AACH,CAAC,CAAC"}
|
package/dist/web-components.js
CHANGED
|
@@ -5040,7 +5040,7 @@ applyMixins(Button, StartEnd);
|
|
|
5040
5040
|
const styles$n = css`
|
|
5041
5041
|
${display("inline-flex")}
|
|
5042
5042
|
|
|
5043
|
-
:host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick}
|
|
5043
|
+
:host{--icon-spacing:${spacingHorizontalSNudge};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${colorNeutralBackground1};color:${colorNeutralForeground1};border:${strokeWidthThin} solid ${colorNeutralStroke1};padding:0 ${spacingHorizontalM};min-width:96px;border-radius:${borderRadiusMedium};font-size:${fontSizeBase300};font-family:${fontFamilyBase};font-weight:${fontWeightSemibold};line-height:${lineHeightBase300};transition-duration:${durationFaster};transition-property:background,border,color;transition-timing-function:${curveEasyEase};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground1Hover};border-color:${colorNeutralStroke1Hover}}:host(:hover:active){background-color:${colorNeutralBackground1Pressed};border-color:${colorNeutralStroke1Pressed};color:${colorNeutralForeground1Pressed};outline-style:none}:host(:focus-visible){border-color:${colorTransparentStroke};outline:${strokeWidthThick} solid ${colorTransparentStroke};box-shadow:${shadow4},0 0 0 2px ${colorStrokeFocus2}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${spacingHorizontalXS};min-height:24px;min-width:64px;padding:0 ${spacingHorizontalS};border-radius:${borderRadiusSmall};font-size:${fontSizeBase200};line-height:${lineHeightBase200};font-weight:${fontWeightRegular}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${borderRadiusLarge};padding:0 ${spacingHorizontalL};font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']),:host([shape='circular']:focus-visible){border-radius:${borderRadiusCircular}}:host([shape='square']),:host([shape='square']:focus-visible){border-radius:${borderRadiusNone}}:host([appearance='primary']){background-color:${colorBrandBackground};color:${colorNeutralForegroundOnBrand};border-color:transparent}:host([appearance='primary']:hover){background-color:${colorBrandBackgroundHover}}:host([appearance='primary']:hover),:host([appearance='primary']:hover:active){border-color:transparent;color:${colorNeutralForegroundOnBrand}}:host([appearance='primary']:hover:active){background-color:${colorBrandBackgroundPressed}}:host([appearance='primary']:focus-visible){border-color:${colorNeutralForegroundOnBrand};box-shadow:${shadow2},0 0 0 2px ${colorStrokeFocus2}}:host([appearance='outline']){background-color:${colorTransparentBackground}}:host([appearance='outline']:hover){background-color:${colorTransparentBackgroundHover}}:host([appearance='outline']:hover:active){background-color:${colorTransparentBackgroundPressed}}:host([appearance='subtle']){background-color:${colorSubtleBackground};color:${colorNeutralForeground2};border-color:transparent}:host([appearance='subtle']:hover){background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${colorNeutralForeground2BrandHover}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']){background-color:${colorTransparentBackground};color:${colorNeutralForeground2}}:host([appearance='transparent']:hover){background-color:${colorTransparentBackgroundHover};color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:hover:active){background-color:${colorTransparentBackgroundPressed};color:${colorNeutralForeground2BrandPressed}}:host([appearance='transparent']),:host([appearance='transparent']:hover),:host([appearance='transparent']:hover:active){border-color:transparent}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active){background-color:${colorNeutralBackgroundDisabled};border-color:${colorNeutralStrokeDisabled};color:${colorNeutralForegroundDisabled};cursor:not-allowed}:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary'])),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover:active){border-color:transparent}:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline'])),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover:active){background-color:${colorTransparentBackground}}:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle'])),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover:active){background-color:${colorTransparentBackground};border-color:transparent}:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent'])),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover:active){border-color:transparent;background-color:${colorTransparentBackground}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
5044
5044
|
:host([appearance='transparent']:hover){border-color:Highlight}`));
|
|
5045
5045
|
|
|
5046
5046
|
function buttonTemplate$1(options = {}) {
|
|
@@ -372,7 +372,7 @@ const b=Object.freeze({prefix:"fluent",shadowRootMode:"open",registry:customElem
|
|
|
372
372
|
:host,:host([appearance='outline']),:host([appearance='tint']){border-color:CanvasText}`));function on(o={}){return v` ${We(o)}<slot>${Z(o.defaultContent)}</slot>${qe(o)} `}const ud=on(),pd=Rt.compose({name:`${b.prefix}-badge`,template:ud,styles:hd});pd.define(b.registry);const er={submit:"submit",reset:"reset",button:"button"};var fd=Object.defineProperty,gd=Object.getOwnPropertyDescriptor,q=(o,e,t,r)=>{for(var i=r>1?void 0:r?gd(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&fd(e,t,i),i};class F extends w{constructor(){super(),this.disabledFocusable=!1,this.elementInternals=this.attachInternals(),this.iconOnly=!1,this.elementInternals.role="button"}disabledFocusableChanged(e,t){this.$fastController.isConnected&&(this.elementInternals.ariaDisabled=`${!!t}`)}get form(){return this.elementInternals.form}get labels(){return Object.freeze(Array.from(this.elementInternals.labels))}typeChanged(e,t){t!==er.submit&&(this.formSubmissionFallbackControl?.remove(),this.shadowRoot?.querySelector('slot[name="internal"]')?.remove())}clickHandler(e){if(e&&this.disabledFocusable){e.stopImmediatePropagation();return}return this.press(),!0}connectedCallback(){super.connectedCallback(),this.elementInternals.ariaDisabled=`${!!this.disabledFocusable}`}createAndInsertFormSubmissionFallbackControl(){const e=this.formSubmissionFallbackControlSlot??document.createElement("slot");e.setAttribute("name","internal"),this.shadowRoot?.appendChild(e),this.formSubmissionFallbackControlSlot=e;const t=this.formSubmissionFallbackControl??document.createElement("button");t.style.display="none",t.setAttribute("type","submit"),t.setAttribute("slot","internal"),this.formNoValidate&&t.toggleAttribute("formnovalidate",!0),this.elementInternals.form?.id&&t.setAttribute("form",this.elementInternals.form.id),this.name&&t.setAttribute("name",this.name),this.value&&t.setAttribute("value",this.value),this.formAction&&t.setAttribute("formaction",this.formAction??""),this.formEnctype&&t.setAttribute("formenctype",this.formEnctype??""),this.formMethod&&t.setAttribute("formmethod",this.formMethod??""),this.formTarget&&t.setAttribute("formtarget",this.formTarget??""),this.append(t),this.formSubmissionFallbackControl=t}formDisabledCallback(e){this.disabled=e}keypressHandler(e){if(e&&this.disabledFocusable){e.stopImmediatePropagation();return}if(e.key===pt||e.key===Ft){this.click();return}return!0}press(){switch(this.type){case er.reset:{this.resetForm();break}case er.submit:{this.submitForm();break}}}resetForm(){this.elementInternals.form?.reset()}submitForm(){if(!(!this.elementInternals.form||this.disabled||this.type!==er.submit)){if(!this.name&&!this.formAction&&!this.formEnctype&&!this.form&&!this.formMethod&&!this.formNoValidate&&!this.formTarget){this.elementInternals.form.requestSubmit();return}try{this.elementInternals.setFormValue(this.value??""),this.elementInternals.form.requestSubmit(this)}catch{this.createAndInsertFormSubmissionFallbackControl(),this.elementInternals.setFormValue(null),this.elementInternals.form.requestSubmit(this.formSubmissionFallbackControl)}}}}F.formAssociated=!0,q([a],F.prototype,"appearance",2),q([a({mode:"boolean"})],F.prototype,"autofocus",2),q([$],F.prototype,"defaultSlottedContent",2),q([a({mode:"boolean"})],F.prototype,"disabled",2),q([a({attribute:"disabled-focusable",mode:"boolean"})],F.prototype,"disabledFocusable",2),q([a({attribute:"formaction"})],F.prototype,"formAction",2),q([a({attribute:"form"})],F.prototype,"formAttribute",2),q([a({attribute:"formenctype"})],F.prototype,"formEnctype",2),q([a({attribute:"formmethod"})],F.prototype,"formMethod",2),q([a({attribute:"formnovalidate",mode:"boolean"})],F.prototype,"formNoValidate",2),q([a({attribute:"formtarget"})],F.prototype,"formTarget",2),q([a({attribute:"icon-only",mode:"boolean"})],F.prototype,"iconOnly",2),q([a],F.prototype,"name",2),q([a],F.prototype,"shape",2),q([a],F.prototype,"size",2),q([a],F.prototype,"type",2),q([a],F.prototype,"value",2),Fe(F,je);const tr=f`
|
|
373
373
|
${T("inline-flex")}
|
|
374
374
|
|
|
375
|
-
:host{--icon-spacing:${tt};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${V};color:${M};border:${te} solid ${gt};padding:0 ${vt};min-width:96px;border-radius:${P};font-size:${O};font-family:${y};font-weight:${R};line-height:${E};transition-duration:${Ko};transition-property:background,border,color;transition-timing-function:${Qo};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${No};color:${_r};border-color:${io}}:host(:hover:active){background-color:${Nr};border-color:${jo};color:${fs};outline-style:none}:host(:focus-visible){border-color:${we};outline:${Mt}
|
|
375
|
+
:host{--icon-spacing:${tt};contain:layout style;vertical-align:middle;align-items:center;box-sizing:border-box;justify-content:center;text-align:center;text-decoration-line:none;margin:0;min-height:32px;outline-style:none;background-color:${V};color:${M};border:${te} solid ${gt};padding:0 ${vt};min-width:96px;border-radius:${P};font-size:${O};font-family:${y};font-weight:${R};line-height:${E};transition-duration:${Ko};transition-property:background,border,color;transition-timing-function:${Qo};cursor:pointer;user-select:none}.content{display:inherit}:host(:hover){background-color:${No};color:${_r};border-color:${io}}:host(:hover:active){background-color:${Nr};border-color:${jo};color:${fs};outline-style:none}:host(:focus-visible){border-color:${we};outline:${Mt} solid ${we};box-shadow:${lo},0 0 0 2px ${Ae}}@media screen and (prefers-reduced-motion:reduce){transition-duration:0.01ms}::slotted(svg){font-size:20px;height:20px;width:20px;fill:currentColor}[slot='start'],::slotted([slot='start']){margin-inline-end:var(--icon-spacing)}[slot='end'],::slotted([slot='end']){margin-inline-start:var(--icon-spacing)}:host([icon-only]){min-width:32px;max-width:32px}:host([size='small']){--icon-spacing:${xe};min-height:24px;min-width:64px;padding:0 ${oe};border-radius:${ye};font-size:${X};line-height:${pe};font-weight:${A}}:host([size='small'][icon-only]){min-width:24px;max-width:24px}:host([size='large']){min-height:40px;border-radius:${Qr};padding:0 ${Hs};font-size:${ue};line-height:${Ce}}:host([size='large'][icon-only]){min-width:40px;max-width:40px}:host([size='large']) ::slotted(svg){font-size:24px;height:24px;width:24px}:host([shape='circular']),:host([shape='circular']:focus-visible){border-radius:${ae}}:host([shape='square']),:host([shape='square']:focus-visible){border-radius:${Yr}}:host([appearance='primary']){background-color:${Vo};color:${$e};border-color:transparent}:host([appearance='primary']:hover){background-color:${Hr}}:host([appearance='primary']:hover),:host([appearance='primary']:hover:active){border-color:transparent;color:${$e}}:host([appearance='primary']:hover:active){background-color:${Vr}}:host([appearance='primary']:focus-visible){border-color:${$e};box-shadow:${Zr},0 0 0 2px ${Ae}}:host([appearance='outline']){background-color:${ee}}:host([appearance='outline']:hover){background-color:${_t}}:host([appearance='outline']:hover:active){background-color:${Qt}}:host([appearance='subtle']){background-color:${$s};color:${he};border-color:transparent}:host([appearance='subtle']:hover){background-color:${Ho};color:${Ut};border-color:transparent}:host([appearance='subtle']:hover:active){background-color:${Yt};color:${Kt};border-color:transparent}:host([appearance='subtle']:hover) ::slotted(svg){fill:${At}}:host([appearance='subtle']:hover:active) ::slotted(svg){fill:${Et}}:host([appearance='transparent']){background-color:${ee};color:${he}}:host([appearance='transparent']:hover){background-color:${_t};color:${At}}:host([appearance='transparent']:hover:active){background-color:${Qt};color:${Et}}:host([appearance='transparent']),:host([appearance='transparent']:hover),:host([appearance='transparent']:hover:active){border-color:transparent}:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable])),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover),:host(:is([disabled],[disabled-focusable],[appearance][disabled],[appearance][disabled-focusable]):hover:active){background-color:${Zt};border-color:${Je};color:${k};cursor:not-allowed}:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary'])),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover),:host(:is([disabled][appearance='primary'],[disabled-focusable][appearance='primary']):hover:active){border-color:transparent}:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline'])),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover),:host(:is([disabled][appearance='outline'],[disabled-focusable][appearance='outline']):hover:active){background-color:${ee}}:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle'])),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover),:host(:is([disabled][appearance='subtle'],[disabled-focusable][appearance='subtle']):hover:active){background-color:${ee};border-color:transparent}:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent'])),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover),:host(:is([disabled][appearance='transparent'],[disabled-focusable][appearance='transparent']):hover:active){border-color:transparent;background-color:${ee}}`.withBehaviors(Oe(f`
|
|
376
376
|
:host([appearance='transparent']:hover){border-color:Highlight}`));function ii(o={}){return v`<template tabindex="${e=>e.disabled?-1:0}" @click="${(e,t)=>e.clickHandler(t.event)}" @keypress="${(e,t)=>e.keypressHandler(t.event)}">${We(o)}<span class="content" part="content"><slot ${Q("defaultSlottedContent")}></slot></span>${qe(o)}</template>`}const bd=ii(),md=F.compose({name:`${b.prefix}-button`,template:bd,styles:tr});md.define(b.registry);const rn="form-associated-proxy",sn="ElementInternals",nn=sn in window&&"setFormValue"in window[sn].prototype,an=new WeakMap;function ln(o){const e=class extends o{constructor(...t){super(...t),this.dirtyValue=!1,this.initialValue="",this.disabled=!1,this.proxyEventsToBlock=["change","click"],this.proxyInitialized=!1,this.required=!1,this.initialValue=this.initialValue||"",this.elementInternals||(this.formResetCallback=this.formResetCallback.bind(this))}static get formAssociated(){return nn}get validity(){return this.elementInternals?this.elementInternals.validity:this.proxy.validity}get form(){return this.elementInternals?this.elementInternals.form:this.proxy.form}get validationMessage(){return this.elementInternals?this.elementInternals.validationMessage:this.proxy.validationMessage}get willValidate(){return this.elementInternals?this.elementInternals.willValidate:this.proxy.willValidate}get labels(){if(this.elementInternals)return Object.freeze(Array.from(this.elementInternals.labels));if(this.proxy instanceof HTMLElement&&this.proxy.ownerDocument&&this.id){const t=this.proxy.labels,r=Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`)),i=t?r.concat(Array.from(t)):r;return Object.freeze(i)}else return Pi}valueChanged(t,r){this.dirtyValue=!0,this.proxy instanceof HTMLElement&&(this.proxy.value=this.value),this.currentValue=this.value,this.setFormValue(this.value),this.validate()}currentValueChanged(){this.value=this.currentValue}initialValueChanged(t,r){this.dirtyValue||(this.value=this.initialValue,this.dirtyValue=!1)}disabledChanged(t,r){this.proxy instanceof HTMLElement&&(this.proxy.disabled=this.disabled),ke.enqueue(()=>this.classList.toggle("disabled",this.disabled))}nameChanged(t,r){this.proxy instanceof HTMLElement&&(this.proxy.name=this.name)}requiredChanged(t,r){this.proxy instanceof HTMLElement&&(this.proxy.required=this.required),ke.enqueue(()=>this.classList.toggle("required",this.required)),this.validate()}get elementInternals(){if(!nn)return null;let t=an.get(this);return t||(t=this.attachInternals(),an.set(this,t)),t}connectedCallback(){super.connectedCallback(),this.addEventListener("keypress",this._keypressHandler),this.value||(this.value=this.initialValue,this.dirtyValue=!1),this.elementInternals||(this.attachProxy(),this.form&&this.form.addEventListener("reset",this.formResetCallback))}disconnectedCallback(){this.proxyEventsToBlock.forEach(t=>this.proxy.removeEventListener(t,this.stopPropagation)),!this.elementInternals&&this.form&&this.form.removeEventListener("reset",this.formResetCallback)}checkValidity(){return this.elementInternals?this.elementInternals.checkValidity():this.proxy.checkValidity()}reportValidity(){return this.elementInternals?this.elementInternals.reportValidity():this.proxy.reportValidity()}setValidity(t,r,i){this.elementInternals?this.elementInternals.setValidity(t,r,i):typeof r=="string"&&this.proxy.setCustomValidity(r)}formDisabledCallback(t){this.disabled=t}formResetCallback(){this.value=this.initialValue,this.dirtyValue=!1}attachProxy(){this.proxyInitialized||(this.proxyInitialized=!0,this.proxy.style.display="none",this.proxyEventsToBlock.forEach(t=>this.proxy.addEventListener(t,this.stopPropagation)),this.proxy.disabled=this.disabled,this.proxy.required=this.required,typeof this.name=="string"&&(this.proxy.name=this.name),typeof this.value=="string"&&(this.proxy.value=this.value),this.proxy.setAttribute("slot",rn),this.proxySlot=document.createElement("slot"),this.proxySlot.setAttribute("name",rn)),this.shadowRoot?.appendChild(this.proxySlot),this.appendChild(this.proxy)}detachProxy(){this.removeChild(this.proxy),this.shadowRoot?.removeChild(this.proxySlot)}validate(t){this.proxy instanceof HTMLElement&&this.setValidity(this.proxy.validity,this.proxy.validationMessage,t)}setFormValue(t,r){this.elementInternals&&this.elementInternals.setFormValue(t,r||t)}_keypressHandler(t){switch(t.key){case pt:this.form instanceof HTMLFormElement&&this.form.querySelector("[type=submit]")?.click();break}}stopPropagation(t){t.stopPropagation()}};return a({mode:"boolean"})(e.prototype,"disabled"),a({mode:"fromView",attribute:"value"})(e.prototype,"initialValue"),a({attribute:"current-value"})(e.prototype,"currentValue"),a(e.prototype,"name"),a({mode:"boolean"})(e.prototype,"required"),$(e.prototype,"value"),e}function si(o){class e extends ln(o){}class t extends e{constructor(...i){super(i),this.dirtyChecked=!1,this.checkedAttribute=!1,this.checked=!1,this.dirtyChecked=!1}checkedAttributeChanged(){this.defaultChecked=this.checkedAttribute}defaultCheckedChanged(){this.dirtyChecked||(this.checked=this.defaultChecked,this.dirtyChecked=!1)}checkedChanged(i,s){this.dirtyChecked||(this.dirtyChecked=!0),this.currentChecked=this.checked,this.updateForm(),this.proxy instanceof HTMLInputElement&&(this.proxy.checked=this.checked),i!==void 0&&this.$emit("change"),this.validate()}currentCheckedChanged(i,s){this.checked=this.currentChecked}updateForm(){const i=this.checked?this.value:null;this.setFormValue(i,i)}connectedCallback(){super.connectedCallback(),this.updateForm()}formResetCallback(){super.formResetCallback(),this.checked=!!this.checkedAttribute,this.dirtyChecked=!1}}return a({attribute:"checked",mode:"boolean"})(t.prototype,"checkedAttribute"),a({attribute:"current-checked",converter:Ji})(t.prototype,"currentChecked"),$(t.prototype,"defaultChecked"),$(t.prototype,"checked"),t}class vd extends w{}class $d extends si(vd){constructor(){super(...arguments),this.proxy=document.createElement("input")}}var yd=Object.defineProperty,xd=Object.getOwnPropertyDescriptor,uo=(o,e,t,r)=>{for(var i=r>1?void 0:r?xd(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(i=(r?n(e,t,i):n(i))||i);return r&&i&&yd(e,t,i),i};class Dt extends $d{constructor(){super(),this.initialValue="on",this.indeterminate=!1,this.keypressHandler=e=>{if(!this.disabled)switch(e.key){case Ft:this.toggleChecked();break}},this.clickHandler=e=>{this.disabled||this.toggleChecked()},this.proxy.setAttribute("type","checkbox")}toggleChecked(){this.indeterminate&&(this.indeterminate=!1),this.checked=!this.checked}}uo([a],Dt.prototype,"shape",2),uo([a],Dt.prototype,"size",2),uo([a({attribute:"label-position"})],Dt.prototype,"labelPosition",2),uo([$],Dt.prototype,"defaultSlottedNodes",2),uo([$],Dt.prototype,"indeterminate",2);const kd=v.partial(`
|
|
377
377
|
<div class="checked-indicator">
|
|
378
378
|
<svg fill="currentColor"
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/web-components",
|
|
3
3
|
"description": "A library of Fluent Web Components",
|
|
4
|
-
"version": "3.0.0-beta.
|
|
4
|
+
"version": "3.0.0-beta.24",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Microsoft",
|
|
7
7
|
"url": "https://discord.gg/FcSNfg4"
|
|
@@ -218,6 +218,7 @@
|
|
|
218
218
|
"dependencies": {
|
|
219
219
|
"@microsoft/fast-element": "2.0.0-beta.26",
|
|
220
220
|
"@microsoft/fast-web-utilities": "^6.0.0",
|
|
221
|
+
"@floating-ui/dom": "^1.2.0",
|
|
221
222
|
"@fluentui/tokens": "1.0.0-alpha.16",
|
|
222
223
|
"tabbable": "^6.2.0",
|
|
223
224
|
"tslib": "^2.1.0"
|