@fluentui/web-components 3.0.0-beta.113 → 3.0.0-beta.114
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/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 +2 -2
- package/dist/web-components.min.js +2 -2
- 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 Fri, 25 Jul 2025 04:07:09 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [3.0.0-beta.114](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.114)
|
|
8
|
+
|
|
9
|
+
Fri, 25 Jul 2025 04:07:09 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.113..@fluentui/web-components_v3.0.0-beta.114)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- a11y: remove vertical margins on dialog to support 400% zoom ([PR #34906](https://github.com/microsoft/fluentui/pull/34906) by rupertdavid@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [3.0.0-beta.113](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.113)
|
|
8
17
|
|
|
9
|
-
Mon, 21 Jul 2025 04:07:
|
|
18
|
+
Mon, 21 Jul 2025 04:07:39 GMT
|
|
10
19
|
[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
20
|
|
|
12
21
|
### Changes
|
|
@@ -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
|
@@ -6764,7 +6764,7 @@ __decorateClass$D([attr], Dialog.prototype, "type", 2);
|
|
|
6764
6764
|
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
6765
|
|
|
6766
6766
|
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:
|
|
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: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
6768
|
@layer base{dialog{border:${strokeWidthThin} solid ${colorTransparentStroke}}}`));
|
|
6769
6769
|
|
|
6770
6770
|
const definition$y = Dialog.compose({
|
|
@@ -6798,7 +6798,7 @@ const template$x = html`<template><div class="title" part="title"><slot name="ti
|
|
|
6798
6798
|
const styles$w = css`
|
|
6799
6799
|
${display("grid")}
|
|
6800
6800
|
|
|
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}
|
|
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}}.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
6802
|
|
|
6803
6803
|
const definition$x = DialogBody.compose({
|
|
6804
6804
|
name: `${FluentDesignSystem.prefix}-dialog-body`,
|
|
@@ -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`
|