@fluentui/web-components 3.0.0-beta.103 → 3.0.0-beta.104
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/menu-item/menu-item.styles.js +1 -1
- package/dist/esm/rating-display/rating-display.styles.js +5 -5
- package/dist/esm/rating-display/rating-display.styles.js.map +1 -1
- package/dist/web-components.js +3 -3
- package/dist/web-components.min.js +120 -120
- package/package.json +1 -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 Fri, 23 May 2025 04:06:32 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-beta.104](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.104)
|
|
8
|
+
|
|
9
|
+
Fri, 23 May 2025 04:06:32 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.103..@fluentui/web-components_v3.0.0-beta.104)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- fix: updated rating-display icon color tokens to match the React version. ([PR #34513](https://github.com/microsoft/fluentui/pull/34513) by 601470+mlijanto@users.noreply.github.com)
|
|
15
|
+
- fix: better fallback positioning for sub menu ([PR #34499](https://github.com/microsoft/fluentui/pull/34499) by machi@microsoft.com)
|
|
16
|
+
|
|
7
17
|
## [3.0.0-beta.103](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.103)
|
|
8
18
|
|
|
9
|
-
Thu, 22 May 2025 04:06:
|
|
19
|
+
Thu, 22 May 2025 04:06:51 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.102..@fluentui/web-components_v3.0.0-beta.103)
|
|
11
21
|
|
|
12
22
|
### Changes
|
|
@@ -130,7 +130,7 @@ export const styles = css `
|
|
|
130
130
|
position: absolute;
|
|
131
131
|
position-anchor: --menu-trigger;
|
|
132
132
|
position-area: inline-end span-block-end;
|
|
133
|
-
position-try-fallbacks: flip-inline;
|
|
133
|
+
position-try-fallbacks: flip-inline, block-start, block-end;
|
|
134
134
|
z-index: 1;
|
|
135
135
|
}
|
|
136
136
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
|
|
3
|
-
import {
|
|
3
|
+
import { colorBrandBackground2, colorBrandForeground1, colorNeutralBackground6, colorNeutralForeground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBorderActive, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontWeightSemibold, lineHeightBase200, lineHeightBase300, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, } from '../theme/design-tokens.js';
|
|
4
4
|
/**
|
|
5
5
|
* The styles for the Rating Display component.
|
|
6
6
|
*
|
|
@@ -11,7 +11,7 @@ export const styles = css `
|
|
|
11
11
|
|
|
12
12
|
:host {
|
|
13
13
|
--icon-size: 16px;
|
|
14
|
-
--icon-color-filled: ${
|
|
14
|
+
--icon-color-filled: ${colorPaletteMarigoldBorderActive};
|
|
15
15
|
--icon-color-empty: ${colorPaletteMarigoldBackground2};
|
|
16
16
|
align-items: center;
|
|
17
17
|
color: ${colorNeutralForeground1};
|
|
@@ -53,7 +53,7 @@ export const styles = css `
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
:host([color='brand']) svg {
|
|
56
|
-
--icon-color-filled: ${
|
|
56
|
+
--icon-color-filled: ${colorBrandForeground1};
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
:host(:is([value^='-'], [value='0'])) svg,
|
|
@@ -64,12 +64,12 @@ export const styles = css `
|
|
|
64
64
|
|
|
65
65
|
:host([color='neutral']:is([value^='-'], [value='0'], :not([value]))) svg,
|
|
66
66
|
:host([color='neutral']) svg[selected] ~ svg {
|
|
67
|
-
--icon-color-empty: ${
|
|
67
|
+
--icon-color-empty: ${colorNeutralBackground6};
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
:host([color='brand']:is([value^='-'], [value='0'], :not([value]))) svg,
|
|
71
71
|
:host([color='brand']) svg[selected] ~ svg {
|
|
72
|
-
--icon-color-empty: ${
|
|
72
|
+
--icon-color-empty: ${colorBrandBackground2};
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
.value-label,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rating-display.styles.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.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,
|
|
1
|
+
{"version":3,"file":"rating-display.styles.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.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,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,+BAA+B,EAC/B,gCAAgC,EAChC,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;2BAIC,gCAAgC;0BACjC,+BAA+B;;aAE5C,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;iBAWnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;yBAWX,oBAAoB;;;;;;;;;2BASlB,uBAAuB;;;;2BAIvB,qBAAqB;;;;;;;;;;;0BAWtB,uBAAuB;;;;;0BAKvB,qBAAqB;;;;;;2BAMpB,mBAAmB;mBAC3B,kBAAkB;;;;;2BAKV,oBAAoB;;;;;2BAKpB,uBAAuB;;;;;;;;;;qBAU7B,mBAAmB;;;;;qBAKnB,oBAAoB;;;;;qBAKpB,uBAAuB;;CAE3C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;GAWjC,CAAC,CACH,CAAC"}
|
package/dist/web-components.js
CHANGED
|
@@ -4509,7 +4509,7 @@ const colorPaletteYellowBackground3 = "var(--colorPaletteYellowBackground3)";
|
|
|
4509
4509
|
const colorPaletteYellowBorder1 = "var(--colorPaletteYellowBorder1)";
|
|
4510
4510
|
const colorPaletteYellowForeground2 = "var(--colorPaletteYellowForeground2)";
|
|
4511
4511
|
const colorPaletteMarigoldBackground2 = "var(--colorPaletteMarigoldBackground2)";
|
|
4512
|
-
const
|
|
4512
|
+
const colorPaletteMarigoldBorderActive = "var(--colorPaletteMarigoldBorderActive)";
|
|
4513
4513
|
const colorPaletteMarigoldForeground2 = "var(--colorPaletteMarigoldForeground2)";
|
|
4514
4514
|
const colorPaletteAnchorBackground2 = "var(--colorPaletteAnchorBackground2)";
|
|
4515
4515
|
const colorPaletteAnchorForeground2 = "var(--colorPaletteAnchorForeground2)";
|
|
@@ -8616,7 +8616,7 @@ applyMixins(MenuItem, StartEnd);
|
|
|
8616
8616
|
const styles$m = css`
|
|
8617
8617
|
${display("grid")}
|
|
8618
8618
|
|
|
8619
|
-
:host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${checkedState})) .indicator,:host(:not(${checkedState})) ::slotted([slot='indicator']),:host(:not(${submenuState})) .submenu-glyph,:host(:not(${submenuState})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${submenuState}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${submenuState}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
8619
|
+
:host{--indent:0;align-items:center;background:${colorNeutralBackground1};border-radius:${borderRadiusMedium};color:${colorNeutralForeground2};contain:layout;cursor:pointer;flex-shrink:0;font:${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};grid-gap:4px;grid-template-columns:20px 20px auto 20px;height:32px;overflow:visible;padding:0 10px}:host(:hover){background:${colorNeutralBackground1Hover};color:${colorNeutralForeground2Hover}}:host(:active){background-color:${colorNeutralBackground1Selected};color:${colorNeutralForeground2Pressed}}:host(:active) ::slotted([slot='start']){color:${colorCompoundBrandForeground1Pressed}}:host(${disabledState}){background-color:${colorNeutralBackgroundDisabled};color:${colorNeutralForegroundDisabled}}:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:${colorNeutralForegroundDisabled}}:host(:focus-visible){border-radius:${borderRadiusMedium};outline:2px solid ${colorStrokeFocus2}}.content{white-space:nowrap;flex-grow:1;grid-column:auto / span 2;padding:0 2px}:host(:not(${checkedState})) .indicator,:host(:not(${checkedState})) ::slotted([slot='indicator']),:host(:not(${submenuState})) .submenu-glyph,:host(:not(${submenuState})) ::slotted([slot='submenu-glyph']){display:none}::slotted([slot='end']){color:${colorNeutralForeground3};font:${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};white-space:nowrap}:host([data-indent='1']){--indent:1}:host([data-indent='2']){--indent:2;grid-template-columns:20px 20px auto auto}:host(${submenuState}){grid-template-columns:20px auto auto 20px}:host([data-indent='2']${submenuState}){grid-template-columns:20px 20px auto auto 20px}.indicator,::slotted([slot='indicator']){grid-column:1 / span 1;width:20px}::slotted([slot='start']){display:inline-flex;grid-column:calc(var(--indent)) / span 1}.content{grid-column:calc(var(--indent) + 1) / span 1}::slotted([slot='end']){grid-column:calc(var(--indent) + 2) / span 1;justify-self:end}.submenu-glyph,::slotted([slot='submenu-glyph']){grid-column:-2 / span 1;justify-self:end}@layer popover{:host{anchor-name:--menu-trigger;position:relative}::slotted([popover]){margin:0;max-height:var(--menu-max-height,auto);position:absolute;position-anchor:--menu-trigger;position-area:inline-end span-block-end;position-try-fallbacks:flip-inline,block-start,block-end;z-index:1}::slotted([popover]:not(:popover-open)){display:none}::slotted([popover]:popover-open){inset:unset}@supports not (anchor-name:--menu-trigger){::slotted([popover]){align-self:start}}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
8620
8620
|
:host(${disabledState}),:host(${disabledState}) ::slotted([slot='start']),:host(${disabledState}) ::slotted([slot='end']){color:GrayText}`));
|
|
8621
8621
|
|
|
8622
8622
|
const Checkmark16Filled = html.partial(`<svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
|
|
@@ -10372,7 +10372,7 @@ __decorateClass$i([attr({
|
|
|
10372
10372
|
const styles$e = css`
|
|
10373
10373
|
${display("inline-flex")}
|
|
10374
10374
|
|
|
10375
|
-
:host{--icon-size:16px;--icon-color-filled:${
|
|
10375
|
+
:host{--icon-size:16px;--icon-color-filled:${colorPaletteMarigoldBorderActive};--icon-color-empty:${colorPaletteMarigoldBackground2};align-items:center;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};contain:layout style;user-select:none}:host([size='small']){--icon-size:12px}:host([size='large']){--icon-size:20px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}::slotted([slot='icon']){display:none}svg{width:var(--icon-size);height:var(--icon-size);fill:var(--icon-color-filled);margin-inline-end:${spacingHorizontalXXS}}svg:nth-child(odd){clip-path:inset(0 50% 0 0);margin-inline-end:calc(0px - var(--icon-size))}:host([color='neutral']) svg{--icon-color-filled:${colorNeutralForeground1}}:host([color='brand']) svg{--icon-color-filled:${colorBrandForeground1}}:host(:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,svg[selected] ~ svg{fill:var(--icon-color-empty)}:host([color='neutral']:is([value^='-'],[value='0'],:not([value]))) svg,:host([color='neutral']) svg[selected] ~ svg{--icon-color-empty:${colorNeutralBackground6}}:host([color='brand']:is([value^='-'],[value='0'],:not([value]))) svg,:host([color='brand']) svg[selected] ~ svg{--icon-color-empty:${colorBrandBackground2}}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host([size='small']) .value-label,:host([size='small']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host([size='large']) .value-label,:host([size='large']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host([size='small']) .count-label::before,:host([size='small']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host([size='large']) .count-label::before,:host([size='large']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
|
|
10376
10376
|
:host([color]) svg{fill:CanvasText}:host([color]:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,:host([color]) svg[selected] ~ svg{fill:Canvas;stroke:CanvasText}`));
|
|
10377
10377
|
|
|
10378
10378
|
const star = html`<svg xmlns="http://www.w3.org/2000/svg" style="display: none"><symbol id="star"><path d="M9.10433 2.89874C9.47114 2.15549 10.531 2.1555 10.8978 2.89874L12.8282 6.81024L17.1448 7.43748C17.9651 7.55666 18.2926 8.56464 17.699 9.14317L14.5755 12.1878L15.3129 16.487C15.453 17.3039 14.5956 17.9269 13.8619 17.5412L10.0011 15.5114L6.14018 17.5412C5.40655 17.9269 4.54913 17.3039 4.68924 16.487L5.4266 12.1878L2.30308 9.14317C1.70956 8.56463 2.03708 7.55666 2.8573 7.43748L7.17389 6.81024L9.10433 2.89874Z" /></symbol></svg>`;
|