@fluentui/web-components 3.0.0-rc.28 → 3.0.0-rc.29
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/custom-elements.json +16 -16
- package/dist/esm/accordion-item/accordion-item.styles.js +3 -1
- package/dist/esm/accordion-item/accordion-item.styles.js.map +1 -1
- package/dist/esm/message-bar/message-bar.styles.js +1 -0
- package/dist/esm/message-bar/message-bar.styles.js.map +1 -1
- package/dist/web-components-all.js +2 -2
- package/dist/web-components-all.min.js +5 -5
- package/dist/web-components.js +2 -2
- package/dist/web-components.min.js +4 -4
- package/package.json +2 -2
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 Wed, 24 Jun 2026 04:07:52 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-rc.29](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.29)
|
|
8
|
+
|
|
9
|
+
Wed, 24 Jun 2026 04:07:52 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.28..@fluentui/web-components_v3.0.0-rc.29)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- fix: ensure message bar color is visible in dark mode themes ([PR #36340](https://github.com/microsoft/fluentui/pull/36340) by 13071055+chrisdholt@users.noreply.github.com)
|
|
15
|
+
- fix: ensure accordion item content is visible in dark mode' ([PR #36339](https://github.com/microsoft/fluentui/pull/36339) by 13071055+chrisdholt@users.noreply.github.com)
|
|
16
|
+
|
|
7
17
|
## [3.0.0-rc.28](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.28)
|
|
8
18
|
|
|
9
|
-
Fri, 19 Jun 2026 04:05:
|
|
19
|
+
Fri, 19 Jun 2026 04:05:26 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.27..@fluentui/web-components_v3.0.0-rc.28)
|
|
11
21
|
|
|
12
22
|
### Changes
|
package/custom-elements.json
CHANGED
|
@@ -28521,7 +28521,7 @@
|
|
|
28521
28521
|
},
|
|
28522
28522
|
{
|
|
28523
28523
|
"kind": "javascript-module",
|
|
28524
|
-
"path": "src/
|
|
28524
|
+
"path": "src/anchor-button/anchor-button.definition-async.ts",
|
|
28525
28525
|
"declarations": [
|
|
28526
28526
|
{
|
|
28527
28527
|
"kind": "variable",
|
|
@@ -28530,7 +28530,7 @@
|
|
|
28530
28530
|
"text": "PartialFASTElementDefinition"
|
|
28531
28531
|
},
|
|
28532
28532
|
"default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
|
|
28533
|
-
"description": "The async definition configuration for the fluent-
|
|
28533
|
+
"description": "The async definition configuration for the fluent-anchor-button element.",
|
|
28534
28534
|
"privacy": "public"
|
|
28535
28535
|
}
|
|
28536
28536
|
],
|
|
@@ -28540,20 +28540,20 @@
|
|
|
28540
28540
|
"name": "definition",
|
|
28541
28541
|
"declaration": {
|
|
28542
28542
|
"name": "definition",
|
|
28543
|
-
"module": "src/
|
|
28543
|
+
"module": "src/anchor-button/anchor-button.definition-async.ts"
|
|
28544
28544
|
}
|
|
28545
28545
|
}
|
|
28546
28546
|
]
|
|
28547
28547
|
},
|
|
28548
28548
|
{
|
|
28549
28549
|
"kind": "javascript-module",
|
|
28550
|
-
"path": "src/
|
|
28550
|
+
"path": "src/anchor-button/define-async.ts",
|
|
28551
28551
|
"declarations": [],
|
|
28552
28552
|
"exports": []
|
|
28553
28553
|
},
|
|
28554
28554
|
{
|
|
28555
28555
|
"kind": "javascript-module",
|
|
28556
|
-
"path": "src/
|
|
28556
|
+
"path": "src/avatar/avatar.definition-async.ts",
|
|
28557
28557
|
"declarations": [
|
|
28558
28558
|
{
|
|
28559
28559
|
"kind": "variable",
|
|
@@ -28562,7 +28562,7 @@
|
|
|
28562
28562
|
"text": "PartialFASTElementDefinition"
|
|
28563
28563
|
},
|
|
28564
28564
|
"default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
|
|
28565
|
-
"description": "The async definition configuration for the fluent-
|
|
28565
|
+
"description": "The async definition configuration for the fluent-avatar element.",
|
|
28566
28566
|
"privacy": "public"
|
|
28567
28567
|
}
|
|
28568
28568
|
],
|
|
@@ -28572,14 +28572,14 @@
|
|
|
28572
28572
|
"name": "definition",
|
|
28573
28573
|
"declaration": {
|
|
28574
28574
|
"name": "definition",
|
|
28575
|
-
"module": "src/
|
|
28575
|
+
"module": "src/avatar/avatar.definition-async.ts"
|
|
28576
28576
|
}
|
|
28577
28577
|
}
|
|
28578
28578
|
]
|
|
28579
28579
|
},
|
|
28580
28580
|
{
|
|
28581
28581
|
"kind": "javascript-module",
|
|
28582
|
-
"path": "src/
|
|
28582
|
+
"path": "src/avatar/define-async.ts",
|
|
28583
28583
|
"declarations": [],
|
|
28584
28584
|
"exports": []
|
|
28585
28585
|
},
|
|
@@ -28617,7 +28617,7 @@
|
|
|
28617
28617
|
},
|
|
28618
28618
|
{
|
|
28619
28619
|
"kind": "javascript-module",
|
|
28620
|
-
"path": "src/
|
|
28620
|
+
"path": "src/accordion-item/accordion-item.definition-async.ts",
|
|
28621
28621
|
"declarations": [
|
|
28622
28622
|
{
|
|
28623
28623
|
"kind": "variable",
|
|
@@ -28626,7 +28626,7 @@
|
|
|
28626
28626
|
"text": "PartialFASTElementDefinition"
|
|
28627
28627
|
},
|
|
28628
28628
|
"default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
|
|
28629
|
-
"description": "The async definition configuration for the fluent-
|
|
28629
|
+
"description": "The async definition configuration for the fluent-accordion-item element.",
|
|
28630
28630
|
"privacy": "public"
|
|
28631
28631
|
}
|
|
28632
28632
|
],
|
|
@@ -28636,20 +28636,20 @@
|
|
|
28636
28636
|
"name": "definition",
|
|
28637
28637
|
"declaration": {
|
|
28638
28638
|
"name": "definition",
|
|
28639
|
-
"module": "src/
|
|
28639
|
+
"module": "src/accordion-item/accordion-item.definition-async.ts"
|
|
28640
28640
|
}
|
|
28641
28641
|
}
|
|
28642
28642
|
]
|
|
28643
28643
|
},
|
|
28644
28644
|
{
|
|
28645
28645
|
"kind": "javascript-module",
|
|
28646
|
-
"path": "src/
|
|
28646
|
+
"path": "src/accordion-item/define-async.ts",
|
|
28647
28647
|
"declarations": [],
|
|
28648
28648
|
"exports": []
|
|
28649
28649
|
},
|
|
28650
28650
|
{
|
|
28651
28651
|
"kind": "javascript-module",
|
|
28652
|
-
"path": "src/
|
|
28652
|
+
"path": "src/button/button.definition-async.ts",
|
|
28653
28653
|
"declarations": [
|
|
28654
28654
|
{
|
|
28655
28655
|
"kind": "variable",
|
|
@@ -28658,7 +28658,7 @@
|
|
|
28658
28658
|
"text": "PartialFASTElementDefinition"
|
|
28659
28659
|
},
|
|
28660
28660
|
"default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
|
|
28661
|
-
"description": "The async definition configuration for the fluent-
|
|
28661
|
+
"description": "The async definition configuration for the fluent-button element.",
|
|
28662
28662
|
"privacy": "public"
|
|
28663
28663
|
}
|
|
28664
28664
|
],
|
|
@@ -28668,14 +28668,14 @@
|
|
|
28668
28668
|
"name": "definition",
|
|
28669
28669
|
"declaration": {
|
|
28670
28670
|
"name": "definition",
|
|
28671
|
-
"module": "src/
|
|
28671
|
+
"module": "src/button/button.definition-async.ts"
|
|
28672
28672
|
}
|
|
28673
28673
|
}
|
|
28674
28674
|
]
|
|
28675
28675
|
},
|
|
28676
28676
|
{
|
|
28677
28677
|
"kind": "javascript-module",
|
|
28678
|
-
"path": "src/
|
|
28678
|
+
"path": "src/button/define-async.ts",
|
|
28679
28679
|
"declarations": [],
|
|
28680
28680
|
"exports": []
|
|
28681
28681
|
},
|
|
@@ -7,6 +7,7 @@ export const styles = css `
|
|
|
7
7
|
:host {
|
|
8
8
|
max-width: fit-content;
|
|
9
9
|
contain: content;
|
|
10
|
+
color: ${colorNeutralForeground1};
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
.heading {
|
|
@@ -27,7 +28,7 @@ export const styles = css `
|
|
|
27
28
|
background: ${colorTransparentBackground};
|
|
28
29
|
border: none;
|
|
29
30
|
box-sizing: border-box;
|
|
30
|
-
color:
|
|
31
|
+
color: inherit;
|
|
31
32
|
cursor: pointer;
|
|
32
33
|
font: inherit;
|
|
33
34
|
grid-column: auto / span 2;
|
|
@@ -137,6 +138,7 @@ export const styles = css `
|
|
|
137
138
|
|
|
138
139
|
:host([marker-position='end']) ::slotted([slot='start']) {
|
|
139
140
|
grid-column: 1 / span 1;
|
|
141
|
+
color: currentColor;
|
|
140
142
|
}
|
|
141
143
|
|
|
142
144
|
:host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC
|
|
1
|
+
{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;aAKP,uBAAuB;;;;;;;sBAOd,kBAAkB,IAAI,uBAAuB;qBAC9C,kBAAkB;mBACpB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;kBAMlB,0BAA0B;;;;;;;;;;;;;;;;;;;qBAmBvB,iBAAiB;;;;;;;;;;;0BAWZ,kBAAkB;;;;;;gBAM5B,kBAAkB;;;;;;;qBAOb,kBAAkB;;;;;;;;;;qBAUlB,iBAAiB;;wBAEd,iBAAiB;kCACP,iBAAiB;;;;;;aAMtC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4B1B,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;4BAYR,kBAAkB;;;;;;;;;;;;;;;;sBAgBxB,kBAAkB;;;;sBAIlB,uBAAuB,IAAI,kBAAkB;;;;;;;;;;CAUlE,CAAC"}
|
|
@@ -14,6 +14,7 @@ export const styles = css `
|
|
|
14
14
|
line-height: ${lineHeightBase200};
|
|
15
15
|
width: 100%;
|
|
16
16
|
background: ${colorNeutralBackground3};
|
|
17
|
+
color: ${colorNeutralForeground3};
|
|
17
18
|
border: 1px solid ${colorNeutralStroke1};
|
|
18
19
|
padding-inline: ${spacingHorizontalM};
|
|
19
20
|
border-radius: ${borderRadiusMedium};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-bar.styles.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;mBAIrB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;kBAElB,uBAAuB;
|
|
1
|
+
{"version":3,"file":"message-bar.styles.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;mBAIrB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;kBAElB,uBAAuB;aAC5B,uBAAuB;wBACZ,mBAAmB;sBACrB,kBAAkB;qBACnB,kBAAkB;;;;;;;;;;;;wBAYf,4BAA4B;oBAChC,wBAAwB;;;;wBAIpB,iCAAiC;oBACrC,6BAA6B;;;;wBAIzB,0BAA0B;oBAC9B,sBAAsB;;;;;;;;;qBASrB,qBAAqB;sBACpB,kBAAkB;;;;;;qBAMnB,qBAAqB;;;;;;;;;;;;;aAa7B,uBAAuB;yBACX,kBAAkB;;;;;;;;;;;;;;;;yBAgBlB,kBAAkB;WAChC,kBAAkB;;;;0BAIH,qBAAqB;;;;;;;2BAOpB,gBAAgB;;;;;;CAM1C,CAAC"}
|
|
@@ -5276,7 +5276,7 @@ const zIndexFloating = "var(--zIndexFloating)";
|
|
|
5276
5276
|
const zIndexPriority = "var(--zIndexPriority)";
|
|
5277
5277
|
const zIndexDebug = "var(--zIndexDebug)";
|
|
5278
5278
|
|
|
5279
|
-
const styles$F = css`${display("block")} :host{max-width:fit-content;contain:content}.heading{height:44px;display:grid;position:relative;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.button{appearance:none;background:${colorTransparentBackground};border:none;box-sizing:border-box;color
|
|
5279
|
+
const styles$F = css`${display("block")} :host{max-width:fit-content;contain:content;color:${colorNeutralForeground1}}.heading{height:44px;display:grid;position:relative;padding-inline:${spacingHorizontalM} ${spacingHorizontalMNudge};border-radius:${borderRadiusMedium};font-family:${fontFamilyBase};font-size:${fontSizeBase300};font-weight:${fontWeightRegular};line-height:${lineHeightBase300};grid-template-columns:auto auto 1fr auto}.button{appearance:none;background:${colorTransparentBackground};border:none;box-sizing:border-box;color:inherit;cursor:pointer;font:inherit;grid-column:auto/span 2;grid-row:1;height:44px;outline:none;padding:0;text-align:start}.button::before{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall}}:where(.default-marker-collapsed,.default-marker-expanded),::slotted(:is([slot='marker-collapsed'],[slot='marker-expanded'])){display:flex;align-items:center;justify-content:center;pointer-events:none;position:relative;height:100%;padding-inline-end:${spacingHorizontalS};grid-column:1/span 1;grid-row:1}.content{margin:0 ${spacingHorizontalM}}::slotted([slot='start']){display:flex;justify-content:center;align-items:center;padding-right:${spacingHorizontalS};grid-column:2/span 1;grid-row:1}button:focus-visible::after{content:'';position:absolute;inset:0px;cursor:pointer;border-radius:${borderRadiusSmall};outline:none;border:2px solid ${colorStrokeFocus1};box-shadow:inset 0 0 0 1px ${colorStrokeFocus2}}:host([disabled]) .button{color:${colorNeutralForegroundDisabled}}:host([disabled]) svg{filter:invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%)}:host([expanded]) .content{display:block}:host([expanded]) .default-marker-collapsed,:host([expanded]) ::slotted([slot='marker-collapsed']),:host(:not([expanded])) :is(.default-marker-expanded,.content),:host(:not([expanded])) ::slotted([slot='marker-expanded']){display:none}:host([expanded]) ::slotted([slot='marker-expanded']),:host(:not([expanded])) ::slotted([slot='marker-collapsed']){display:flex}.heading{font-size:${fontSizeBase300};line-height:${lineHeightBase300}}:host([size='small']) .heading{font-size:${fontSizeBase200};line-height:${lineHeightBase200}}:host([size='large']) .heading{font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='extra-large']) .heading{font-size:${fontSizeBase500};line-height:${lineHeightBase500}}:host([marker-position='end']) ::slotted([slot='start']){grid-column:1/span 1;color:currentColor}:host([marker-position='end']) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:4/span 1;padding-inline-start:${spacingHorizontalS};padding-inline-end:0}:host([marker-position='end']) .button{grid-column:2/span 3}:host([block]){max-width:100%}:host([marker-position='end']) .heading{grid-template-columns:auto auto 28px;padding-inline:${spacingHorizontalM}}:host([marker-position='end']:has([slot='start'])) .heading{padding-inline:${spacingHorizontalMNudge} ${spacingHorizontalM}}:host([block][marker-position='end']) .heading{grid-template-columns:auto 1fr}:host([marker-position='end']) :is(.default-marker-collapsed,.default-marker-expanded){grid-column:5/span 1}`;
|
|
5280
5280
|
|
|
5281
5281
|
const chevronRight20Filled = html.partial(`<svg width=20 height=20 viewBox="0 0 20 20" fill=none xmlns=http://www.w3.org/2000/svg class=default-marker-collapsed aria-hidden=true><path d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z" fill=currentColor /></svg>`);
|
|
5282
5282
|
const chevronDown20Filled = html.partial(`<svg width=20 height=20 viewBox="0 0 20 20" fill=none xmlns=http://www.w3.org/2000/svg class=default-marker-expanded aria-hidden=true><path d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z" fill=currentColor /></svg>`);
|
|
@@ -10706,7 +10706,7 @@ __decorateClass$m([
|
|
|
10706
10706
|
attr
|
|
10707
10707
|
], MessageBar.prototype, "intent", 2);
|
|
10708
10708
|
|
|
10709
|
-
const styles$h = css`:host{display:grid;box-sizing:border-box;font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};width:100%;background:${colorNeutralBackground3};border:1px solid ${colorNeutralStroke1};padding-inline:${spacingHorizontalM};border-radius:${borderRadiusMedium};min-height:36px;align-items:center;grid-template:'icon body actions dismiss'/auto 1fr auto auto;contain:layout style paint}:host([shape='square']){border-radius:0}:host([intent='success']){background-color:${colorPaletteGreenBackground1};border-color:${colorPaletteGreenBorder1}}:host([intent='warning']){background-color:${colorPaletteDarkOrangeBackground1};border-color:${colorPaletteDarkOrangeBorder1}}:host([intent='error']){background-color:${colorPaletteRedBackground1};border-color:${colorPaletteRedBorder1}}:host([layout='multiline']){grid-template-areas:'icon body dismiss' 'actions actions actions';grid-template-columns:auto 1fr auto;grid-template-rows:auto auto 1fr;padding-block:${spacingVerticalMNudge};padding-inline:${spacingHorizontalM}}.content{grid-area:body;max-width:520px;padding-block:${spacingVerticalMNudge};padding-inline:0}:host([layout='multiline']) .content{padding:0}::slotted([slot='icon']){display:flex;grid-area:icon;flex-direction:column;align-items:center;color:${colorNeutralForeground3};margin-inline-end:${spacingHorizontalS}}:host([layout='multiline']) ::slotted([slot='icon']){align-items:start;height:100%}::slotted([slot='dismiss']){grid-area:dismiss}.actions{grid-area:actions;display:flex;justify-self:end;margin-inline-end:${spacingHorizontalS};gap:${spacingHorizontalS}}:host([layout='multiline']) .actions{margin-block-start:${spacingVerticalMNudge};margin-inline-end:0}:host([layout='multiline']) ::slotted([slot='dismiss']){align-items:start;height:100%;padding-block-start:${spacingVerticalS}}::slotted(*){font-size:inherit}`;
|
|
10709
|
+
const styles$h = css`:host{display:grid;box-sizing:border-box;font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};width:100%;background:${colorNeutralBackground3};color:${colorNeutralForeground3};border:1px solid ${colorNeutralStroke1};padding-inline:${spacingHorizontalM};border-radius:${borderRadiusMedium};min-height:36px;align-items:center;grid-template:'icon body actions dismiss'/auto 1fr auto auto;contain:layout style paint}:host([shape='square']){border-radius:0}:host([intent='success']){background-color:${colorPaletteGreenBackground1};border-color:${colorPaletteGreenBorder1}}:host([intent='warning']){background-color:${colorPaletteDarkOrangeBackground1};border-color:${colorPaletteDarkOrangeBorder1}}:host([intent='error']){background-color:${colorPaletteRedBackground1};border-color:${colorPaletteRedBorder1}}:host([layout='multiline']){grid-template-areas:'icon body dismiss' 'actions actions actions';grid-template-columns:auto 1fr auto;grid-template-rows:auto auto 1fr;padding-block:${spacingVerticalMNudge};padding-inline:${spacingHorizontalM}}.content{grid-area:body;max-width:520px;padding-block:${spacingVerticalMNudge};padding-inline:0}:host([layout='multiline']) .content{padding:0}::slotted([slot='icon']){display:flex;grid-area:icon;flex-direction:column;align-items:center;color:${colorNeutralForeground3};margin-inline-end:${spacingHorizontalS}}:host([layout='multiline']) ::slotted([slot='icon']){align-items:start;height:100%}::slotted([slot='dismiss']){grid-area:dismiss}.actions{grid-area:actions;display:flex;justify-self:end;margin-inline-end:${spacingHorizontalS};gap:${spacingHorizontalS}}:host([layout='multiline']) .actions{margin-block-start:${spacingVerticalMNudge};margin-inline-end:0}:host([layout='multiline']) ::slotted([slot='dismiss']){align-items:start;height:100%;padding-block-start:${spacingVerticalS}}::slotted(*){font-size:inherit}`;
|
|
10710
10710
|
|
|
10711
10711
|
function messageBarTemplate() {
|
|
10712
10712
|
return html`<slot name=icon></slot><div class=content><slot></slot></div><div class=actions><slot name=actions></slot></div><slot name=dismiss></slot>`;
|