@fluentui/web-components 3.0.0-beta.113 → 3.0.0-beta.115
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 +20 -2
- package/dist/esm/button/button.base.js +4 -0
- package/dist/esm/button/button.base.js.map +1 -1
- package/dist/esm/dialog/dialog.styles.js +7 -1
- package/dist/esm/dialog/dialog.styles.js.map +1 -1
- package/dist/esm/dialog-body/dialog-body.styles.js +11 -4
- package/dist/esm/dialog-body/dialog-body.styles.js.map +1 -1
- package/dist/web-components.js +6 -2
- package/dist/web-components.min.js +3 -3
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on Mon,
|
|
3
|
+
This log was last generated on Mon, 04 Aug 2025 04:07:36 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-beta.115](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.115)
|
|
8
|
+
|
|
9
|
+
Mon, 04 Aug 2025 04:07:36 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.114..@fluentui/web-components_v3.0.0-beta.115)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- fix: avoid setting tabindex before button is connected ([PR #34960](https://github.com/microsoft/fluentui/pull/34960) by machi@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## [3.0.0-beta.114](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.114)
|
|
17
|
+
|
|
18
|
+
Fri, 25 Jul 2025 04:07:23 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.113..@fluentui/web-components_v3.0.0-beta.114)
|
|
20
|
+
|
|
21
|
+
### Changes
|
|
22
|
+
|
|
23
|
+
- a11y: remove vertical margins on dialog to support 400% zoom ([PR #34906](https://github.com/microsoft/fluentui/pull/34906) by rupertdavid@microsoft.com)
|
|
24
|
+
|
|
7
25
|
## [3.0.0-beta.113](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.113)
|
|
8
26
|
|
|
9
|
-
Mon, 21 Jul 2025 04:07:
|
|
27
|
+
Mon, 21 Jul 2025 04:07:39 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.112..@fluentui/web-components_v3.0.0-beta.113)
|
|
11
29
|
|
|
12
30
|
### Changes
|
|
@@ -15,6 +15,9 @@ import { ButtonType } from './button.options.js';
|
|
|
15
15
|
*/
|
|
16
16
|
export class BaseButton extends FASTElement {
|
|
17
17
|
disabledChanged() {
|
|
18
|
+
if (!this.$fastController.isConnected) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
18
21
|
if (this.disabled) {
|
|
19
22
|
this.removeAttribute('tabindex');
|
|
20
23
|
}
|
|
@@ -91,6 +94,7 @@ export class BaseButton extends FASTElement {
|
|
|
91
94
|
connectedCallback() {
|
|
92
95
|
super.connectedCallback();
|
|
93
96
|
this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
|
|
97
|
+
this.disabledChanged();
|
|
94
98
|
}
|
|
95
99
|
constructor() {
|
|
96
100
|
super();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.base.js","sourceRoot":"","sources":["../../../src/button/button.base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAyB,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAExE;;;;;;;;;;GAUG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IA+B/B,eAAe;QACvB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,wEAAwE;YACxE,yEAAyE;YACzE,8CAA8C;YAC9C,yFAAyF;YACzF,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC;IAYD;;;;;;OAMG;IACI,wBAAwB,CAAC,QAAiB,EAAE,IAAa;QAC9D,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,CAAC;YACrC,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;QACnD,CAAC;IACH,CAAC;IASD;;;;OAIG;IACH,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAaD;;;;;OAKG;aACa,mBAAc,GAAG,IAAI,AAAP,CAAQ;IAuEtC;;;;OAIG;IACH,IAAW,MAAM;QACf,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC;IACjE,CAAC;IAwBD;;;;;;OAMG;IACI,WAAW,CAAC,QAAoB,EAAE,IAAgB;QACvD,IAAI,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE,CAAC;YAC/B,IAAI,CAAC,6BAA6B,EAAE,MAAM,EAAE,CAAC;YAC7C,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,uBAAuB,CAAC,EAAE,MAAM,EAAE,CAAC;QACpE,CAAC;IACH,CAAC;IAcD;;;;;OAKG;IACI,YAAY,CAAC,CAAQ;QAC1B,IAAI,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAChC,CAAC,CAAC,wBAAwB,EAAE,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"button.base.js","sourceRoot":"","sources":["../../../src/button/button.base.ts"],"names":[],"mappings":"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"}
|
|
@@ -21,7 +21,7 @@ export const styles = css `
|
|
|
21
21
|
border: none;
|
|
22
22
|
box-shadow: ${shadow64};
|
|
23
23
|
color: ${colorNeutralForeground1};
|
|
24
|
-
max-height:
|
|
24
|
+
max-height: 100vh;
|
|
25
25
|
padding: 0;
|
|
26
26
|
width: 100%;
|
|
27
27
|
max-width: 600px;
|
|
@@ -33,6 +33,12 @@ export const styles = css `
|
|
|
33
33
|
z-index: 2;
|
|
34
34
|
overflow: auto;
|
|
35
35
|
}
|
|
36
|
+
|
|
37
|
+
@supports (max-height: 1dvh) {
|
|
38
|
+
dialog {
|
|
39
|
+
max-height: 100dvh;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
36
42
|
}
|
|
37
43
|
|
|
38
44
|
@layer animations {
|
|
@@ -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;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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;+BA2BP,cAAc;sCACP,kBAAkB;;;;;sCAKlB,WAAW;;;;;;;;;;;;;;sCAcX,kBAAkB;;;;;;;;;;;;;;;CAevD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;kBAGlB,eAAe,UAAU,sBAAsB;;;GAG9D,CAAC,CACH,CAAC"}
|
|
@@ -32,8 +32,6 @@ export const styles = css `
|
|
|
32
32
|
margin-block-start: calc(${spacingVerticalXXL} * -1);
|
|
33
33
|
padding-block-end: ${spacingVerticalS};
|
|
34
34
|
padding-block-start: ${spacingVerticalXXL};
|
|
35
|
-
position: sticky;
|
|
36
|
-
z-index: 1;
|
|
37
35
|
}
|
|
38
36
|
|
|
39
37
|
.content {
|
|
@@ -56,8 +54,6 @@ export const styles = css `
|
|
|
56
54
|
margin-block-end: calc(${spacingVerticalXXL} * -1);
|
|
57
55
|
padding-block-end: ${spacingVerticalXXL};
|
|
58
56
|
padding-block-start: ${spacingVerticalL};
|
|
59
|
-
position: sticky;
|
|
60
|
-
z-index: 2;
|
|
61
57
|
}
|
|
62
58
|
|
|
63
59
|
::slotted([slot='title-action']) {
|
|
@@ -84,5 +80,16 @@ export const styles = css `
|
|
|
84
80
|
padding-block-start: ${spacingVerticalS};
|
|
85
81
|
}
|
|
86
82
|
}
|
|
83
|
+
|
|
84
|
+
/* For a11y, set sticky position for title and actions when the viewport is tall enough */
|
|
85
|
+
@media (min-height: 480px) {
|
|
86
|
+
.title {
|
|
87
|
+
position: sticky;
|
|
88
|
+
z-index: 1;
|
|
89
|
+
}
|
|
90
|
+
.actions {
|
|
91
|
+
position: sticky;
|
|
92
|
+
z-index: 2;
|
|
93
|
+
}
|
|
87
94
|
`;
|
|
88
95
|
//# sourceMappingURL=dialog-body.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-body.styles.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;kBAGD,uBAAuB;;WAE9B,gBAAgB;eACZ,kBAAkB,IAAI,oBAAoB;;;;;;;kBAOvC,uBAAuB;aAC5B,uBAAuB;;;mBAGjB,cAAc;iBAChB,eAAe;mBACb,kBAAkB;;;mBAGlB,iBAAiB;6BACP,gBAAgB;+BACd,kBAAkB;yBACxB,gBAAgB;2BACd,kBAAkB
|
|
1
|
+
{"version":3,"file":"dialog-body.styles.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;kBAGD,uBAAuB;;WAE9B,gBAAgB;eACZ,kBAAkB,IAAI,oBAAoB;;;;;;;kBAOvC,uBAAuB;aAC5B,uBAAuB;;;mBAGjB,cAAc;iBAChB,eAAe;mBACb,kBAAkB;;;mBAGlB,iBAAiB;6BACP,gBAAgB;+BACd,kBAAkB;yBACxB,gBAAgB;2BACd,kBAAkB;;;;;aAKhC,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;kBAMlB,uBAAuB;;;WAG9B,gBAAgB;;6BAEE,kBAAkB;yBACtB,kBAAkB;2BAChB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;iCAuBV,gBAAgB;6BACpB,gBAAgB;;;;;;;;;;;;;;CAc5C,CAAC"}
|
package/dist/web-components.js
CHANGED
|
@@ -5795,6 +5795,9 @@ class BaseButton extends FASTElement {
|
|
|
5795
5795
|
this.elementInternals.role = "button";
|
|
5796
5796
|
}
|
|
5797
5797
|
disabledChanged() {
|
|
5798
|
+
if (!this.$fastController.isConnected) {
|
|
5799
|
+
return;
|
|
5800
|
+
}
|
|
5798
5801
|
if (this.disabled) {
|
|
5799
5802
|
this.removeAttribute("tabindex");
|
|
5800
5803
|
} else {
|
|
@@ -5859,6 +5862,7 @@ class BaseButton extends FASTElement {
|
|
|
5859
5862
|
connectedCallback() {
|
|
5860
5863
|
super.connectedCallback();
|
|
5861
5864
|
this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
|
|
5865
|
+
this.disabledChanged();
|
|
5862
5866
|
}
|
|
5863
5867
|
/**
|
|
5864
5868
|
* This fallback creates a new slot, then creates a submit button to mirror the custom element's
|
|
@@ -6764,7 +6768,7 @@ __decorateClass$D([attr], Dialog.prototype, "type", 2);
|
|
|
6764
6768
|
const template$y = html`<dialog role="${x => x.type === DialogType.alert ? "alertdialog" : "dialog"}" type="${x => x.type}" class="dialog" part="dialog" aria-modal="${x => x.type === DialogType.modal || x.type === DialogType.alert ? "true" : void 0}" aria-describedby="${x => x.ariaDescribedby}" aria-labelledby="${x => x.ariaLabelledby}" aria-label="${x => x.ariaLabel}" @click="${(x, c) => x.clickHandler(c.event)}" @cancel="${x => x.hide()}" ${ref("dialog")}><slot></slot></dialog>`;
|
|
6765
6769
|
|
|
6766
6770
|
const styles$x = css`
|
|
6767
|
-
@layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:
|
|
6771
|
+
@layer base{:host{--dialog-backdrop:${colorBackgroundOverlay};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${colorNeutralBackground1};border-radius:${borderRadiusXLarge};border:none;box-shadow:${shadow64};color:${colorNeutralForeground1};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${durationGentle};transition-timing-function:${curveDecelerateMid};opacity:0}::backdrop{transition-timing-function:${curveLinear}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${curveAccelerateMid}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
6768
6772
|
@layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}`));
|
|
6769
6773
|
|
|
6770
6774
|
const definition$y = Dialog.compose({
|
|
@@ -6798,7 +6802,7 @@ const template$x = html`<template><div class="title" part="title"><slot name="ti
|
|
|
6798
6802
|
const styles$w = css`
|
|
6799
6803
|
${display("grid")}
|
|
6800
6804
|
|
|
6801
|
-
:host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL}
|
|
6805
|
+
:host{background:${colorNeutralBackground1};box-sizing:border-box;gap:${spacingVerticalS};padding:${spacingVerticalXXL} ${spacingHorizontalXXL};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${colorNeutralBackground1};color:${colorNeutralForeground1};column-gap:8px;display:flex;font-family:${fontFamilyBase};font-size:${fontSizeBase500};font-weight:${fontWeightSemibold};inset-block-start:0;justify-content:space-between;line-height:${lineHeightBase500};margin-block-end:calc(${spacingVerticalS} * -1);margin-block-start:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalS};padding-block-start:${spacingVerticalXXL}}.content{box-sizing:border-box;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};min-height:32px}.actions{box-sizing:border-box;background:${colorNeutralBackground1};display:flex;flex-direction:column;gap:${spacingVerticalS};inset-block-end:0;margin-block-end:calc(${spacingVerticalXXL} * -1);padding-block-end:${spacingVerticalXXL};padding-block-start:${spacingVerticalL}}::slotted([slot='title-action']){margin-inline-start:auto}::slotted([slot='title']){font:inherit;padding:0;margin:0}:not(:has(:is([slot='title'],[slot='title-action']))) .title{justify-content:end}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${spacingVerticalS} * -1);padding-block-start:${spacingVerticalS}}}@media (min-height:480px){.title{position:sticky;z-index:1}.actions{position:sticky;z-index:2}`;
|
|
6802
6806
|
|
|
6803
6807
|
const definition$x = DialogBody.compose({
|
|
6804
6808
|
name: `${FluentDesignSystem.prefix}-dialog-body`,
|
|
@@ -376,7 +376,7 @@ const p=Object.freeze({prefix:"fluent",shadowRootMode:"open",registry:customElem
|
|
|
376
376
|
${oa}
|
|
377
377
|
${ta}
|
|
378
378
|
`.withBehaviors(U(u`
|
|
379
|
-
:host,:host([appearance='outline']),:host([appearance='tint']){border-color:CanvasText}`));function aa(o={}){return b` ${Le(o)}<slot>${he(o.defaultContent)}</slot>${ot(o)} `}const zh=aa(),Th=Kt.compose({name:`${p.prefix}-badge`,template:zh,styles:Ph});Th.define(p.registry);var Bh=Object.defineProperty,Oh=Object.getOwnPropertyDescriptor,Se=(o,e,t,i)=>{for(var r=i>1?void 0:i?Oh(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&Bh(e,t,r),r};class pe extends ${constructor(){super(),this.disabled=!1,this.disabledFocusable=!1,this.elementInternals=this.attachInternals(),this.elementInternals.role="button"}disabledChanged(){this.disabled?this.removeAttribute("tabindex"):this.tabIndex=Number(this.getAttribute("tabindex")??0)<0?-1:0}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!==yi.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}
|
|
379
|
+
:host,:host([appearance='outline']),:host([appearance='tint']){border-color:CanvasText}`));function aa(o={}){return b` ${Le(o)}<slot>${he(o.defaultContent)}</slot>${ot(o)} `}const zh=aa(),Th=Kt.compose({name:`${p.prefix}-badge`,template:zh,styles:Ph});Th.define(p.registry);var Bh=Object.defineProperty,Oh=Object.getOwnPropertyDescriptor,Se=(o,e,t,i)=>{for(var r=i>1?void 0:i?Oh(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&Bh(e,t,r),r};class pe extends ${constructor(){super(),this.disabled=!1,this.disabledFocusable=!1,this.elementInternals=this.attachInternals(),this.elementInternals.role="button"}disabledChanged(){this.$fastController.isConnected&&(this.disabled?this.removeAttribute("tabindex"):this.tabIndex=Number(this.getAttribute("tabindex")??0)<0?-1:0)}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!==yi.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}`,this.disabledChanged()}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===fo||e.key===Zo){this.click();return}return!0}press(){switch(this.type){case yi.reset:{this.resetForm();break}case yi.submit:{this.submitForm();break}}}resetForm(){this.elementInternals.form?.reset()}submitForm(){if(!(!this.elementInternals.form||this.disabled||this.type!==yi.submit)){if(!this.name&&!this.formAction&&!this.formEnctype&&!this.formAttribute&&!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)}}}}pe.formAssociated=!0,Se([a({mode:"boolean"})],pe.prototype,"autofocus",2),Se([g],pe.prototype,"defaultSlottedContent",2),Se([a({mode:"boolean"})],pe.prototype,"disabled",2),Se([a({attribute:"disabled-focusable",mode:"boolean"})],pe.prototype,"disabledFocusable",2),Se([a({attribute:"formaction"})],pe.prototype,"formAction",2),Se([a({attribute:"form"})],pe.prototype,"formAttribute",2),Se([a({attribute:"formenctype"})],pe.prototype,"formEnctype",2),Se([a({attribute:"formmethod"})],pe.prototype,"formMethod",2),Se([a({attribute:"formnovalidate",mode:"boolean"})],pe.prototype,"formNoValidate",2),Se([a({attribute:"formtarget"})],pe.prototype,"formTarget",2),Se([a],pe.prototype,"name",2),Se([a],pe.prototype,"type",2),Se([a],pe.prototype,"value",2);var Ah=Object.defineProperty,_h=Object.getOwnPropertyDescriptor,Ci=(o,e,t,i)=>{for(var r=i>1?void 0:i?_h(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&Ah(e,t,r),r};class Ze extends pe{constructor(){super(...arguments),this.iconOnly=!1}}Ci([a],Ze.prototype,"appearance",2),Ci([a],Ze.prototype,"shape",2),Ci([a],Ze.prototype,"size",2),Ci([a({attribute:"icon-only",mode:"boolean"})],Ze.prototype,"iconOnly",2),Ke(Ze,Ue);function Ar(o={}){return b`<template @click="${(e,t)=>e.clickHandler(t.event)}" @keypress="${(e,t)=>e.keypressHandler(t.event)}">${Le(o)}<span class="content" part="content"><slot ${L("defaultSlottedContent")}></slot></span>${ot(o)}</template>`}const Eh=Ar(),Nh=Ze.compose({name:`${p.prefix}-button`,template:Eh,styles:ki});Nh.define(p.registry);var Fh=Object.defineProperty,Mh=Object.getOwnPropertyDescriptor,at=(o,e,t,i)=>{for(var r=i>1?void 0:i?Mh(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&Fh(e,t,r),r};class Pe extends ${constructor(){super(...arguments),this.initialValue="on",this._keydownPressed=!1,this.dirtyChecked=!1,this.elementInternals=this.attachInternals(),this._validationFallbackMessage="",this._value=this.initialValue}get checked(){return m.track(this,"checked"),!!this._checked}set checked(e){this._checked=e,this.setFormValue(e?this.value:null),this.setValidity(),this.setAriaChecked(),y(this.elementInternals,"checked",e),m.notify(this,"checked")}disabledChanged(e,t){this.disabled?this.removeAttribute("tabindex"):this.tabIndex=Number(this.getAttribute("tabindex")??0)<0?-1:0,this.elementInternals.ariaDisabled=this.disabled?"true":"false",y(this.elementInternals,"disabled",this.disabled)}disabledAttributeChanged(e,t){this.disabled=!!t}initialCheckedChanged(e,t){this.dirtyChecked||(this.checked=!!t)}initialValueChanged(e,t){this._value=t}requiredChanged(e,t){this.$fastController.isConnected&&(this.setValidity(),this.elementInternals.ariaRequired=this.required?"true":"false")}get form(){return this.elementInternals.form}get labels(){return Object.freeze(Array.from(this.elementInternals.labels))}get validationMessage(){if(this.elementInternals.validationMessage)return this.elementInternals.validationMessage;if(!this._validationFallbackMessage){const e=document.createElement("input");e.type="checkbox",e.required=!0,e.checked=!1,this._validationFallbackMessage=e.validationMessage}return this._validationFallbackMessage}get validity(){return this.elementInternals.validity}get value(){return m.track(this,"value"),this._value}set value(e){this._value=e,this.$fastController.isConnected&&(this.setFormValue(e),this.setValidity(),m.notify(this,"value"))}get willValidate(){return this.elementInternals.willValidate}checkValidity(){return this.elementInternals.checkValidity()}clickHandler(e){if(this.disabled)return;this.dirtyChecked=!0;const t=this.checked;return this.toggleChecked(),t!==this.checked&&(this.$emit("change"),this.$emit("input")),!0}connectedCallback(){super.connectedCallback(),this.disabled=!!this.disabledAttribute,this.setAriaChecked(),this.setValidity()}inputHandler(e){return this.setFormValue(this.value),this.setValidity(),!0}keydownHandler(e){if(e.key!==" ")return!0;this._keydownPressed=!0}keyupHandler(e){if(!this._keydownPressed||e.key!==" ")return!0;this._keydownPressed=!1,this.click()}formResetCallback(){this.checked=this.initialChecked??!1,this.dirtyChecked=!1,this.setValidity()}reportValidity(){return this.elementInternals.reportValidity()}setAriaChecked(e=this.checked){this.elementInternals.ariaChecked=e?"true":"false"}setFormValue(e,t){this.elementInternals.setFormValue(e,e??t)}setCustomValidity(e){this.elementInternals.setValidity({customError:!0},e),this.setValidity()}setValidity(e,t,i){if(this.$fastController.isConnected){if(this.disabled||!this.required){this.elementInternals.setValidity({});return}this.elementInternals.setValidity({valueMissing:!!this.required&&!this.checked,...e},t??this.validationMessage,i)}}toggleChecked(e=!this.checked){this.checked=e}}Pe.formAssociated=!0,at([a({mode:"boolean"})],Pe.prototype,"autofocus",2),at([g],Pe.prototype,"disabled",2),at([a({attribute:"disabled",mode:"boolean"})],Pe.prototype,"disabledAttribute",2),at([a({attribute:"form"})],Pe.prototype,"formAttribute",2),at([a({attribute:"checked",mode:"boolean"})],Pe.prototype,"initialChecked",2),at([a({attribute:"value",mode:"fromView"})],Pe.prototype,"initialValue",2),at([a],Pe.prototype,"name",2),at([a({mode:"boolean"})],Pe.prototype,"required",2);var Dh=Object.defineProperty,Hh=Object.getOwnPropertyDescriptor,_r=(o,e,t,i)=>{for(var r=i>1?void 0:i?Hh(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&Dh(e,t,r),r};class Si extends Pe{indeterminateChanged(e,t){this.setAriaChecked(),y(this.elementInternals,"indeterminate",t)}constructor(){super(),this.elementInternals.role="checkbox"}setAriaChecked(e=this.checked){if(this.indeterminate){this.elementInternals.ariaChecked="mixed";return}super.setAriaChecked(e)}toggleChecked(e=!this.checked){this.indeterminate=!1,super.toggleChecked(e)}}_r([g],Si.prototype,"indeterminate",2),_r([a],Si.prototype,"shape",2),_r([a],Si.prototype,"size",2);const Vh=P("active"),Lh=P("bad-input"),x=P("checked"),jh=P("custom-error"),Rh=P("description"),ye=P("disabled");P("error");const qh=P("flip-block"),Wh=P("focus-visible");P("has-message");const It=P("indeterminate"),Yt=P("multiple"),Gh=P("open"),Xh=P("pattern-mismatch"),Uh=P("placeholder-shown"),F=P("pressed"),Kh=P("range-overflow"),Yh=P("range-underflow"),Qh=P("required"),Er=P("selected"),Zh=P("step-mismatch"),Ii=P("submenu"),Jh=P("too-long"),eu=P("too-short"),tu=P("type-mismatch"),ou=P("user-invalid"),iu=P("valid"),ru=P("value-missing"),su=u`
|
|
380
380
|
${k("inline-flex")}
|
|
381
381
|
|
|
382
382
|
:host{--size:16px;background-color:${I};border-radius:${Oe};border:${T} solid ${je};box-sizing:border-box;cursor:pointer;position:relative;width:var(--size)}:host,.indeterminate-indicator,.checked-indicator{aspect-ratio:1}:host(:hover){border-color:${$t}}:host(:active){border-color:${yt}}:host(${x}:hover){background-color:${Vt};border-color:${Ql}}:host(${x}:active){background-color:${Lt};border-color:${xn}}:host(:focus-visible){outline:none}:host(:not([slot='input']))::after{content:'';position:absolute;inset:-8px;box-sizing:border-box;outline:none;border:${$e} solid ${J};border-radius:${C}}:host(:not([slot='input']):focus-visible)::after{border-color:${Ce}}.indeterminate-indicator,.checked-indicator{color:${ft};inset:0;margin:auto;position:absolute}::slotted([slot='checked-indicator']),.checked-indicator{fill:currentColor;display:inline-flex;flex:1 0 auto;width:12px}:host(:not(${x})) *:is(::slotted([slot='checked-indicator']),.checked-indicator){display:none}:host(${x}),:host(${It}){border-color:${xt}}:host(${x}),:host(${It}) .indeterminate-indicator{background-color:${vt}}:host(${It}) .indeterminate-indicator{border-radius:${Oe};position:absolute;width:calc(var(--size) / 2);inset:0}:host([size='large']){--size:20px}:host([size='large']) ::slotted([slot='checked-indicator']),:host([size='large']) .checked-indicator{width:16px}:host([shape='circular']),:host([shape='circular']) .indeterminate-indicator{border-radius:${me}}:host([disabled]),:host([disabled]${x}){background-color:${it};border-color:${we}}:host([disabled]){cursor:unset}:host([disabled]${It}) .indeterminate-indicator{background-color:${we}}:host([disabled]${x}) .checked-indicator{color:${we}}`.withBehaviors(U(u`
|
|
@@ -407,11 +407,11 @@ const p=Object.freeze({prefix:"fluent",shadowRootMode:"open",registry:customElem
|
|
|
407
407
|
${ta}
|
|
408
408
|
|
|
409
409
|
:host(:is([dot],[dot][appearance][size])){min-width:auto;width:6px;height:6px;padding:0}`;function $u(o={}){return aa({defaultContent:b`${e=>e.setCount()}`})}const yu=$u(),xu=Ge.compose({name:`${p.prefix}-counter-badge`,template:yu,styles:vu});xu.define(p.registry);const ct={modal:"modal",nonModal:"non-modal",alert:"alert"};function la(o,e="-dialog"){return o?.nodeType!==Node.ELEMENT_NODE?!1:o.tagName.toLowerCase().endsWith(e)}var ku=Object.defineProperty,wu=Object.getOwnPropertyDescriptor,Pi=(o,e,t,i)=>{for(var r=i>1?void 0:i?wu(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&ku(e,t,r),r};class So extends ${constructor(){super(...arguments),this.type=ct.modal,this.emitBeforeToggle=()=>{this.$emit("beforetoggle",{oldState:this.dialog.open?"open":"closed",newState:this.dialog.open?"closed":"open"})},this.emitToggle=()=>{this.$emit("toggle",{oldState:this.dialog.open?"closed":"open",newState:this.dialog.open?"open":"closed"})}}show(){Q.enqueue(()=>{this.emitBeforeToggle(),this.type===ct.alert||this.type===ct.modal?this.dialog.showModal():this.type===ct.nonModal&&this.dialog.show(),this.emitToggle()})}hide(){this.emitBeforeToggle(),this.dialog.close(),this.emitToggle()}clickHandler(e){return this.dialog.open&&this.type!==ct.alert&&e.target===this.dialog&&this.hide(),!0}}Pi([g],So.prototype,"dialog",2),Pi([a({attribute:"aria-describedby"})],So.prototype,"ariaDescribedby",2),Pi([a({attribute:"aria-labelledby"})],So.prototype,"ariaLabelledby",2),Pi([a],So.prototype,"type",2);const Cu=b`<dialog role="${o=>o.type===ct.alert?"alertdialog":"dialog"}" type="${o=>o.type}" class="dialog" part="dialog" aria-modal="${o=>o.type===ct.modal||o.type===ct.alert?"true":void 0}" aria-describedby="${o=>o.ariaDescribedby}" aria-labelledby="${o=>o.ariaLabelledby}" aria-label="${o=>o.ariaLabel}" @click="${(o,e)=>o.clickHandler(e.event)}" @cancel="${o=>o.hide()}" ${V("dialog")}><slot></slot></dialog>`,Su=u`
|
|
410
|
-
@layer base{:host{--dialog-backdrop:${pr};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${I};border-radius:${En};border:none;box-shadow:${qn};color:${z};max-height:
|
|
410
|
+
@layer base{:host{--dialog-backdrop:${pr};--dialog-starting-scale:0.85}::backdrop{background:var(--dialog-backdrop,rgba(0,0,0,0.4))}dialog{background:${I};border-radius:${En};border:none;box-shadow:${qn};color:${z};max-height:100vh;padding:0;width:100%;max-width:600px}:host([type='non-modal']) dialog{inset:0;position:fixed;z-index:2;overflow:auto}@supports (max-height:1dvh){dialog{max-height:100dvh}}}@layer animations{@media (prefers-reduced-motion:no-preference){dialog,::backdrop{transition:display allow-discrete,opacity,overlay allow-discrete,scale;transition-duration:${Sr};transition-timing-function:${Ct};opacity:0}::backdrop{transition-timing-function:${Pr}}[open],[open]::backdrop{opacity:1}dialog:not([open]){scale:var(--dialog-starting-scale);transition-timing-function:${wt}}}@starting-style{[open],[open]::backdrop{opacity:0}dialog{scale:var(--dialog-starting-scale)}}}`.withBehaviors(U(u`
|
|
411
411
|
@layer base{dialog{border:${T} solid ${J}}}`)),Iu=So.compose({name:`${p.prefix}-dialog`,template:Cu,styles:Su});Iu.define(p.registry);class Pu extends ${clickHandler(e){if(!e.defaultPrevented){const t=this.parentElement;la(t)&&t.hide()}return!0}}const zu=b`<template><div class="title" part="title"><slot name="title"></slot><slot name="title-action"></slot><slot name="close" @click="${(o,e)=>o.clickHandler(e.event)}"></slot></div><div class="content" part="content"><slot></slot></div><div class="actions" part="actions"><slot name="action"></slot></div></template>`,Tu=u`
|
|
412
412
|
${k("grid")}
|
|
413
413
|
|
|
414
|
-
:host{background:${I};box-sizing:border-box;gap:${H};padding:${kt} ${kr};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${I};color:${z};column-gap:8px;display:flex;font-family:${v};font-size:${Rt};font-weight:${D};inset-block-start:0;justify-content:space-between;line-height:${pi};margin-block-end:calc(${H} * -1);margin-block-start:calc(${kt} * -1);padding-block-end:${H};padding-block-start:${kt}
|
|
414
|
+
:host{background:${I};box-sizing:border-box;gap:${H};padding:${kt} ${kr};container:dialog-body / inline-size}.title{box-sizing:border-box;align-items:flex-start;background:${I};color:${z};column-gap:8px;display:flex;font-family:${v};font-size:${Rt};font-weight:${D};inset-block-start:0;justify-content:space-between;line-height:${pi};margin-block-end:calc(${H} * -1);margin-block-start:calc(${kt} * -1);padding-block-end:${H};padding-block-start:${kt}}.content{box-sizing:border-box;color:${z};font-family:${v};font-size:${B};font-weight:${A};line-height:${_};min-height:32px}.actions{box-sizing:border-box;background:${I};display:flex;flex-direction:column;gap:${H};inset-block-end:0;margin-block-end:calc(${kt} * -1);padding-block-end:${kt};padding-block-start:${gi}}::slotted([slot='title-action']){margin-inline-start:auto}::slotted([slot='title']){font:inherit;padding:0;margin:0}:not(:has(:is([slot='title'],[slot='title-action']))) .title{justify-content:end}@container (min-width:480px){.actions{align-items:center;flex-direction:row;justify-content:flex-end;margin-block-start:calc(${H} * -1);padding-block-start:${H}}}@media (min-height:480px){.title{position:sticky;z-index:1}.actions{position:sticky;z-index:2}`,Bu=Pu.compose({name:`${p.prefix}-dialog-body`,template:zu,styles:Tu});Bu.define(p.registry);const Io={separator:"separator",presentation:"presentation"},ca=ge;var Ou=Object.defineProperty,Au=Object.getOwnPropertyDescriptor,da=(o,e,t,i)=>{for(var r=i>1?void 0:i?Au(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&Ou(e,t,r),r};class Nr extends ${constructor(){super(...arguments),this.elementInternals=this.attachInternals()}connectedCallback(){super.connectedCallback(),this.elementInternals.role=this.role??Io.separator,this.role!==Io.presentation&&(this.elementInternals.ariaOrientation=this.orientation??ca.horizontal)}roleChanged(e,t){this.$fastController.isConnected&&(this.elementInternals.role=`${t??Io.separator}`),t===Io.presentation&&(this.elementInternals.ariaOrientation=null)}orientationChanged(e,t){this.elementInternals.ariaOrientation=this.role!==Io.presentation?t??null:null,St(this.elementInternals,e,t,ca)}}da([a],Nr.prototype,"role",2),da([a],Nr.prototype,"orientation",2);var _u=Object.defineProperty,Eu=Object.getOwnPropertyDescriptor,Fr=(o,e,t,i)=>{for(var r=i>1?void 0:i?Eu(e,t):e,s=o.length-1,n;s>=0;s--)(n=o[s])&&(r=(i?n(e,t,r):n(r))||r);return i&&r&&_u(e,t,r),r};class zi extends Nr{}Fr([a({attribute:"align-content"})],zi.prototype,"alignContent",2),Fr([a],zi.prototype,"appearance",2),Fr([a({mode:"boolean"})],zi.prototype,"inset",2);function Nu(){return b`<slot></slot>`}const Fu=Nu(),Mu=u`
|
|
415
415
|
${k("flex")}
|
|
416
416
|
|
|
417
417
|
:host{contain:content}:host::after,:host::before{align-self:center;background:${wo};box-sizing:border-box;content:'';display:flex;flex-grow:1;height:${T}}:host([inset]){padding:0 12px}:host ::slotted(*){color:${Ie};font-family:${v};font-size:${N};font-weight:${A};margin:0;padding:0 12px}:host([align-content='start'])::before,:host([align-content='end'])::after{flex-basis:12px;flex-grow:0;flex-shrink:0}:host([orientation='vertical']){align-items:center;flex-direction:column;height:100%;min-height:84px}:host([orientation='vertical']):empty{min-height:20px}:host([orientation='vertical'][inset])::before{margin-top:12px}:host([orientation='vertical'][inset])::after{margin-bottom:12px}:host([orientation='vertical']):empty::before,:host([orientation='vertical']):empty::after{height:10px;min-height:10px;flex-grow:0}:host([orientation='vertical'])::before,:host([orientation='vertical'])::after{width:${T};min-height:20px;height:100%}:host([orientation='vertical']) ::slotted(*){display:flex;flex-direction:column;padding:12px 0;line-height:20px}:host([orientation='vertical'][align-content='start'])::before{min-height:8px}:host([orientation='vertical'][align-content='end'])::after{min-height:8px}:host([appearance='strong'])::before,:host([appearance='strong'])::after{background:${Re}}:host([appearance='strong']) ::slotted(*){color:${z}}:host([appearance='brand'])::before,:host([appearance='brand'])::after{background:${$n}}:host([appearance='brand']) ::slotted(*){color:${si}}:host([appearance='subtle'])::before,:host([appearance='subtle'])::after{background:${Kl}}:host([appearance='subtle']) ::slotted(*){color:${Z}}`.withBehaviors(U(u`
|
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.115",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Microsoft",
|
|
7
7
|
"url": "https://discord.gg/FcSNfg4"
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
},
|
|
84
84
|
"dependencies": {
|
|
85
85
|
"@microsoft/fast-web-utilities": "^6.0.0",
|
|
86
|
-
"@fluentui/tokens": "1.0.0-alpha.
|
|
86
|
+
"@fluentui/tokens": "1.0.0-alpha.22",
|
|
87
87
|
"tabbable": "^6.2.0",
|
|
88
88
|
"tslib": "^2.1.0"
|
|
89
89
|
},
|