@fluentui/web-components 3.0.0-beta.129 → 3.0.0-beta.130
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 +11 -2
- package/dist/esm/dropdown/dropdown.styles.js +9 -1
- package/dist/esm/dropdown/dropdown.styles.js.map +1 -1
- package/dist/esm/listbox/listbox.styles.js +2 -2
- package/dist/esm/listbox/listbox.styles.js.map +1 -1
- package/dist/esm/option/option.styles.js +7 -2
- package/dist/esm/option/option.styles.js.map +1 -1
- package/dist/web-components.js +4 -4
- package/dist/web-components.min.js +72 -72
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/web-components
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 20 Oct 2025 04:08:02 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-beta.130](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.130)
|
|
8
|
+
|
|
9
|
+
Mon, 20 Oct 2025 04:08:02 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.129..@fluentui/web-components_v3.0.0-beta.130)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- fix: update dropdown forced-colors mode states ([PR #35340](https://github.com/microsoft/fluentui/pull/35340) by rupertdavid@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [3.0.0-beta.129](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.129)
|
|
8
17
|
|
|
9
|
-
Thu, 16 Oct 2025 04:
|
|
18
|
+
Thu, 16 Oct 2025 04:09:10 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.128..@fluentui/web-components_v3.0.0-beta.129)
|
|
11
20
|
|
|
12
21
|
### Changes
|
|
@@ -26,7 +26,7 @@ export const styles = css `
|
|
|
26
26
|
appearance: none;
|
|
27
27
|
background-color: ${colorNeutralBackground1};
|
|
28
28
|
border-radius: ${borderRadiusMedium};
|
|
29
|
-
border:
|
|
29
|
+
border: ${strokeWidthThin} solid ${colorTransparentStroke};
|
|
30
30
|
box-shadow: inset 0 0 0 ${strokeWidthThin} var(--control-border-color);
|
|
31
31
|
box-sizing: border-box;
|
|
32
32
|
color: inherit;
|
|
@@ -204,5 +204,13 @@ export const styles = css `
|
|
|
204
204
|
--margin-offset: calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin});
|
|
205
205
|
}
|
|
206
206
|
}
|
|
207
|
+
|
|
208
|
+
@media (forced-colors: active) {
|
|
209
|
+
:host(:disabled) .control {
|
|
210
|
+
border-color: GrayText;
|
|
211
|
+
}
|
|
212
|
+
:host(:disabled) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
|
|
213
|
+
color: GrayText;
|
|
214
|
+
}
|
|
207
215
|
`;
|
|
208
216
|
//# sourceMappingURL=dropdown.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.styles.js","sourceRoot":"","sources":["../../../src/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAkB,SAAS,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7F,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;aAKb,uBAAuB;;;;UAI1B,qBAAqB;aAClB,uBAAuB;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB
|
|
1
|
+
{"version":3,"file":"dropdown.styles.js","sourceRoot":"","sources":["../../../src/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAkB,SAAS,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7F,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;aAKb,uBAAuB;;;;UAI1B,qBAAqB;aAClB,uBAAuB;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;cACzB,eAAe,UAAU,sBAAsB;8BAC/B,eAAe;;;kBAG3B,oBAAoB;;;;;eAKvB,qBAAqB,IAAI,uBAAuB;;;;;MAKzD,qBAAqB;;;;kBAIT,oBAAoB;eACvB,iBAAiB,IAAI,uBAAuB;MACrD,wBAAwB;;;;kBAIZ,kBAAkB;eACrB,gBAAgB,IAAI,kBAAkB;MAC/C,qBAAqB;;;;;;;;;;;;;;;;;;;;;aAqBd,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;cAuBtB,eAAe;;;;wBAIL,wBAAwB;cAClC,gBAAgB;;wBAEN,iBAAiB,IAAI,kBAAkB;;;;;;;;;qBAS1C,kBAAkB;kCACL,iBAAiB;eACpC,gBAAgB,UAAU,iBAAiB;;;iBAGzC,SAAS;;2BAEC,cAAc;kCACP,kBAAkB;;;;wBAI5B,4BAA4B;;;;8BAItB,iCAAiC;wBACvC,0BAA0B;qBAC7B,gBAAgB;;;;8BAIP,mBAAmB;;;;8BAInB,wBAAwB;;;;wBAI9B,iCAAiC;;;;wBAIjC,iCAAiC;;;;8BAI3B,0BAA0B;;;;wBAIhC,mCAAmC;;;;wBAInC,mCAAmC;;;;wBAInC,uBAAuB;;;;8BAIjB,sBAAsB;;;;;;;;;;;;;;;8BAetB,0BAA0B;wBAChC,8BAA8B;aACzC,8BAA8B;;;;;;;;;;8BAUb,iBAAiB,OAAO,qBAAqB,WAAW,eAAe;;;;8BAIvE,iBAAiB,OAAO,iBAAiB,WAAW,eAAe;;;;8BAInE,iBAAiB,OAAO,gBAAgB,WAAW,eAAe;;;;;;;;;;;CAW/F,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { flipBlockState } from '../styles/states/index.js';
|
|
3
|
-
import { borderRadiusMedium, colorNeutralBackground1, shadow16, spacingHorizontalXS, spacingHorizontalXXS, } from '../theme/design-tokens.js';
|
|
3
|
+
import { borderRadiusMedium, colorNeutralBackground1, colorTransparentStroke, shadow16, spacingHorizontalXS, spacingHorizontalXXS, strokeWidthThin, } from '../theme/design-tokens.js';
|
|
4
4
|
import { display } from '../utils/display.js';
|
|
5
5
|
/**
|
|
6
6
|
* Styles for the {@link (Listbox:class)} component.
|
|
@@ -13,7 +13,7 @@ export const styles = css `
|
|
|
13
13
|
:host {
|
|
14
14
|
background-color: ${colorNeutralBackground1};
|
|
15
15
|
border-radius: ${borderRadiusMedium};
|
|
16
|
-
border:
|
|
16
|
+
border: ${strokeWidthThin} solid ${colorTransparentStroke};
|
|
17
17
|
box-shadow: ${shadow16};
|
|
18
18
|
box-sizing: border-box;
|
|
19
19
|
flex-direction: column;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"listbox.styles.js","sourceRoot":"","sources":["../../../src/listbox/listbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,
|
|
1
|
+
{"version":3,"file":"listbox.styles.js","sourceRoot":"","sources":["../../../src/listbox/listbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;wBAGF,uBAAuB;qBAC1B,kBAAkB;cACzB,eAAe,UAAU,sBAAsB;kBAC3C,QAAQ;;;;;eAKX,mBAAmB;eACnB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiCd,cAAc;;;;;CAKlC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { typographyBody1Styles, typographyCaption1Styles } from '../styles/partials/typography.partials.js';
|
|
3
3
|
import { activeState, descriptionState, multipleState, selectedState } from '../styles/states/index.js';
|
|
4
|
-
import { borderRadiusMedium, borderRadiusSmall, colorCompoundBrandBackground, colorCompoundBrandStroke, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackgroundDisabled, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground3, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStrokeAccessible, colorNeutralStrokeDisabled, colorStrokeFocus2,
|
|
4
|
+
import { borderRadiusMedium, borderRadiusSmall, colorCompoundBrandBackground, colorCompoundBrandStroke, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackgroundDisabled, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground3, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStrokeAccessible, colorNeutralStrokeDisabled, colorStrokeFocus2, spacingHorizontalSNudge, spacingHorizontalXS, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
|
|
5
5
|
import { display } from '../utils/display.js';
|
|
6
6
|
/**
|
|
7
7
|
* Styles for the {@link (DropdownOption:class)} component.
|
|
@@ -17,7 +17,6 @@ export const styles = css `
|
|
|
17
17
|
align-items: center;
|
|
18
18
|
background-color: ${colorNeutralBackground1};
|
|
19
19
|
border-radius: ${borderRadiusMedium};
|
|
20
|
-
border: ${strokeWidthThick} solid ${colorTransparentStroke};
|
|
21
20
|
box-sizing: border-box;
|
|
22
21
|
color: ${colorNeutralForeground2};
|
|
23
22
|
column-gap: ${spacingHorizontalXS};
|
|
@@ -124,5 +123,11 @@ export const styles = css `
|
|
|
124
123
|
grid-area: description;
|
|
125
124
|
${typographyCaption1Styles}
|
|
126
125
|
}
|
|
126
|
+
|
|
127
|
+
@media (forced-colors: active) {
|
|
128
|
+
:host(:disabled) {
|
|
129
|
+
color: GrayText;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
127
132
|
`;
|
|
128
133
|
//# sourceMappingURL=option.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"option.styles.js","sourceRoot":"","sources":["../../../src/option/option.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AAC5G,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACxG,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,wBAAwB,EACxB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,0BAA0B,EAC1B,iBAAiB,
|
|
1
|
+
{"version":3,"file":"option.styles.js","sourceRoot":"","sources":["../../../src/option/option.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AAC5G,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACxG,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,wBAAwB,EACxB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,0BAA0B,EAC1B,iBAAiB,EAEjB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;MAIpB,qBAAqB;;wBAEH,uBAAuB;qBAC1B,kBAAkB;;aAE1B,uBAAuB;kBAClB,mBAAmB;;;;;eAKtB,uBAAuB;;;;;;;;;;;;;;wBAcd,4BAA4B;aACvC,4BAA4B;;;;wBAIjB,8BAA8B;aACzC,8BAA8B;;;;wBAInB,uBAAuB;aAClC,8BAA8B;;;;;;;;;;;;;;;;;UAiBjC,aAAa;;;;UAIb,aAAa;eACR,aAAa;;;;UAIlB,aAAa;wBACC,uBAAuB;qBAC1B,iBAAiB;cACxB,eAAe,UAAU,4BAA4B;;;;;;;;;UASzD,aAAa,GAAG,aAAa;wBACf,4BAA4B;oBAChC,wBAAwB;YAChC,8BAA8B;;;mBAGvB,aAAa;oBACZ,0BAA0B;;;mBAG3B,aAAa,GAAG,aAAa;wBACxB,8BAA8B;;;UAG5C,WAAW;cACP,gBAAgB,UAAU,iBAAiB;;;;;oBAKrC,uBAAuB;;;;UAIjC,gBAAgB;kBACR,uBAAuB;;;;;;;aAO5B,uBAAuB;;MAE9B,wBAAwB;;;;;;;;CAQ7B,CAAC"}
|
package/dist/web-components.js
CHANGED
|
@@ -7933,7 +7933,7 @@ __decorateClass$y([attr], Dropdown.prototype, "size", 2);
|
|
|
7933
7933
|
const styles$s = css`
|
|
7934
7934
|
${display("inline-flex")}
|
|
7935
7935
|
|
|
7936
|
-
:host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border
|
|
7936
|
+
:host{anchor-name:--dropdown-trigger;box-sizing:border-box;color:${colorNeutralForeground1};cursor:pointer}:host(${placeholderShownState}){color:${colorNeutralForeground4}}.control{appearance:none;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:inset 0 0 0 ${strokeWidthThin} var(--control-border-color);box-sizing:border-box;color:inherit;column-gap:${spacingHorizontalXXS};display:inline-flex;justify-content:space-between;min-width:160px;overflow:hidden;padding:${spacingVerticalSNudge} ${spacingHorizontalMNudge};position:relative;text-align:start;width:100%;z-index:1;${typographyBody1Styles}}:host([size='small']) .control{column-gap:${spacingHorizontalXXS};padding:${spacingVerticalXS} ${spacingHorizontalSNudge};${typographyCaption1Styles}}:host([size='large']) .control{column-gap:${spacingHorizontalS};padding:${spacingVerticalS} ${spacingHorizontalM};${typographyBody2Styles}}::slotted(:is(input,button)){all:unset;flex:1 1 auto}::slotted(button){cursor:pointer}::slotted(input){cursor:text}:where(slot[name='indicator'] > *,::slotted([slot='indicator'])){all:unset;align-items:center;appearance:none;aspect-ratio:1;color:${colorNeutralForeground3};display:inline-flex;justify-content:center;width:20px}:host([size='small']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:16px}:host([size='large']) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){width:24px}.control::after,.control::before{content:'' / '';inset:auto 0 0;pointer-events:none;position:absolute}.control::before{height:${strokeWidthThin}}.control::after{background-color:${colorCompoundBrandStroke};height:${strokeWidthThick};scale:0 1;transition:scale ${durationUltraFast} ${curveDecelerateMid}}:host(:where(:focus-within)) .control{border-radius:${borderRadiusMedium};box-shadow:inset 0 0 0 1px ${colorStrokeFocus1};outline:${strokeWidthThick} solid ${colorStrokeFocus2}}:host(:where(${openState},:focus-within)) .control::after{scale:1 1;transition-duration:${durationNormal};transition-timing-function:${curveAccelerateMid}}:host(:where([appearance='outline'],[appearance='transparent'])) .control::before{background-color:${colorNeutralStrokeAccessible}}:host([appearance='transparent']) .control{--control-border-color:${colorTransparentStrokeInteractive};background-color:${colorTransparentBackground};border-radius:${borderRadiusNone}}:host([appearance='outline']) .control{--control-border-color:${colorNeutralStroke1}}:host([appearance='outline']) .control:hover{--control-border-color:${colorNeutralStroke1Hover}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:hover::before{background-color:${colorNeutralStrokeAccessibleHover}}:host([appearance='outline']) .control:hover::after{background-color:${colorCompoundBrandBackgroundHover}}:host([appearance='outline']) .control:active{--control-border-color:${colorNeutralStroke1Pressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::before{background-color:${colorNeutralStrokeAccessiblePressed}}:host(:where([appearance='outline'],[appearance='transparent'])) .control:active::after{background-color:${colorCompoundBrandBackgroundPressed}}:host([appearance='filled-darker']) .control{background-color:${colorNeutralBackground3}}:host(:where([appearance='filled-lighter'],[appearance='filled-darker'])) .control{--control-border-color:${colorTransparentStroke}}:host(:disabled),:host(:disabled) ::slotted(:where(button,input)){cursor:not-allowed}:host(:disabled) .control::before,:host(:disabled) .control::after{content:none}:host(:disabled) .control:is(*,:active,:hover),:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){--control-border-color:${colorNeutralStrokeDisabled};background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}::slotted([popover]:not(:popover-open)){display:none}@supports not (anchor-name:--anchor){:host{--listbox-max-height:50vh;--margin-offset:calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin})}:host([size='small']){--margin-offset:calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin})}:host([size='large']){--margin-offset:calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin})}}@media (forced-colors:active){:host(:disabled) .control{border-color:GrayText}:host(:disabled) :where(slot[name='indicator'] > *,::slotted([slot='indicator'])){color:GrayText}`;
|
|
7937
7937
|
|
|
7938
7938
|
const definition$t = Dropdown.compose({
|
|
7939
7939
|
name: `${FluentDesignSystem.prefix}-dropdown`,
|
|
@@ -8469,7 +8469,7 @@ __decorateClass$s([observable], Listbox.prototype, "dropdown", 2);
|
|
|
8469
8469
|
const styles$n = css`
|
|
8470
8470
|
${display("inline-flex")}
|
|
8471
8471
|
|
|
8472
|
-
:host{background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border
|
|
8472
|
+
:host{background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};border:${strokeWidthThin} solid ${colorTransparentStroke};box-shadow:${shadow16};box-sizing:border-box;flex-direction:column;margin:0;min-width:160px;padding:${spacingHorizontalXS};row-gap:${spacingHorizontalXXS};width:auto}:host([popover]){inset:unset;overflow:auto}@supports (anchor-name:--anchor){:host([popover]){position:absolute;margin-block-start:0;max-height:var(--listbox-max-height,calc(50vh - anchor-size(self-block)));min-width:anchor-size(width);position-anchor:--dropdown;position-area:block-end span-inline-end;position-try-fallbacks:flip-inline,flip-block,--flip-block,block-start}@position-try --flip-block{bottom:anchor(top);top:unset}}@supports not (anchor-name:--anchor){:host([popover]){margin-block-start:var(--margin-offset,0);max-height:var(--listbox-max-height,50vh);position:fixed}:host([popover]${flipBlockState}){margin-block-start:revert;translate:0 -100%}}`;
|
|
8473
8473
|
|
|
8474
8474
|
function listboxTemplate() {
|
|
8475
8475
|
return html`<template id="${x => x.id}" @beforetoggle="${(x, c) => x.beforetoggleHandler(c.event)}" @click="${(x, c) => x.clickHandler(c.event)}"><slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot></template>`;
|
|
@@ -9646,8 +9646,8 @@ const styles$i = css`
|
|
|
9646
9646
|
${display("inline-grid")}
|
|
9647
9647
|
|
|
9648
9648
|
:host{-webkit-tap-highlight-color:transparent;${typographyBody1Styles}
|
|
9649
|
-
align-items:center;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};
|
|
9650
|
-
'indicator start description'}::slotted([slot='description']){color:${colorNeutralForeground3};grid-area:description;${typographyCaption1Styles}}`;
|
|
9649
|
+
align-items:center;background-color:${colorNeutralBackground1};border-radius:${borderRadiusMedium};box-sizing:border-box;color:${colorNeutralForeground2};column-gap:${spacingHorizontalXS};cursor:pointer;grid-template-areas:'indicator start content';grid-template-columns:auto auto 1fr;min-height:32px;padding:${spacingHorizontalSNudge};text-align:start}.content{grid-area:content;line-height:1}::slotted([slot='start']){grid-area:start}:host(:hover){background-color:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Pressed};color:${colorNeutralForeground2Pressed}}:host(:disabled){background-color:${colorNeutralBackground1};color:${colorNeutralForegroundDisabled};cursor:default}.checkmark-16-filled{fill:currentColor;width:16px}slot[name='checked-indicator'] > *,::slotted([slot='checked-indicator']){aspect-ratio:1;flex:0 0 auto;grid-area:indicator;visibility:hidden}:host(${selectedState}) :is(slot[name='checked-indicator'] > *,::slotted([slot='checked-indicator'])){visibility:visible}:host(${multipleState}) .checkmark-16-filled,:host(:not(${multipleState})) .checkmark-12-regular{display:none}:host(${multipleState}) .checkmark-12-regular{background-color:${colorNeutralBackground1};border-radius:${borderRadiusSmall};border:${strokeWidthThin} solid ${colorNeutralStrokeAccessible};box-sizing:border-box;cursor:pointer;fill:transparent;position:relative;visibility:visible;width:16px}:host(${multipleState}${selectedState}) .checkmark-12-regular{background-color:${colorCompoundBrandBackground};border-color:${colorCompoundBrandStroke};fill:${colorNeutralForegroundInverted}}:host(:disabled${multipleState}) .checkmark-12-regular{border-color:${colorNeutralStrokeDisabled}}:host(:disabled${multipleState}${selectedState}) .checkmark-12-regular{background-color:${colorNeutralBackgroundDisabled}}:host(${activeState}){border:${strokeWidthThick} solid ${colorStrokeFocus2}}@supports (selector(:host(:has(*)))){:host(:has([slot='start']:not([size='16']))){column-gap:${spacingHorizontalSNudge}}}:host(${descriptionState}){column-gap:${spacingHorizontalSNudge};grid-template-areas:'indicator start content'
|
|
9650
|
+
'indicator start description'}::slotted([slot='description']){color:${colorNeutralForeground3};grid-area:description;${typographyCaption1Styles}}@media (forced-colors:active){:host(:disabled){color:GrayText}}`;
|
|
9651
9651
|
|
|
9652
9652
|
const checkedIndicator$1 = html.partial( /* html */
|
|
9653
9653
|
`
|