@fluentui/web-components 3.0.0-rc.25 → 3.0.0-rc.27

package/dist/esm/compound-button/compound-button.template.html

@@ -1,13 +1,11 @@
 <f-template name="fluent-compound-button" shadowrootmode="open">
-<template
-      @click="{clickHandler($e)}"
-      @keypress="{keypressHandler($e)}"
-    >{{styles}}
-       <slot name="start" f-ref="{start}"></slot> 
-      <span class="content" part="content">
-        <slot f-slotted="{defaultSlottedContent}"></slot>
-        <slot name="description"></slot>
-      </span>
-       <slot name="end" f-ref="{end}"></slot> 
-    </template>
+  <template @click="{clickHandler($e)}" @keypress="{keypressHandler($e)}">
+    {{styles}}
+    <slot name="start" f-ref="{start}"></slot>
+    <span class="content" part="content">
+      <slot f-slotted="{defaultSlottedContent}"></slot>
+      <slot name="description"></slot>
+    </span>
+    <slot name="end" f-ref="{end}"></slot>
+  </template>
 </f-template>

package/dist/esm/counter-badge/counter-badge.d.ts

@@ -7,6 +7,9 @@ import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBa
  *
  * @tag fluent-counter-badge
  *
+ * @slot start - Content which can be provided before the badge content.
+ * @slot end - Content which can be provided after the badge content.
+ *
  * @public
  */
 export declare class CounterBadge extends BaseCounterBadge {

package/dist/esm/counter-badge/counter-badge.js

@@ -9,6 +9,9 @@ import { BaseCounterBadge } from './counter-badge.base.js';
  *
  * @tag fluent-counter-badge
  *
+ * @slot start - Content which can be provided before the badge content.
+ * @slot end - Content which can be provided after the badge content.
+ *
  * @public
  */
 export class CounterBadge extends BaseCounterBadge {

package/dist/esm/counter-badge/counter-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"counter-badge.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAQ3D;;;;;;;GAOG;AACH,MAAM,OAAO,YAAa,SAAQ,gBAAgB;CAwCjD;AA/BQ;IADN,IAAI;gDACsC;AAUpC;IADN,IAAI;2CAC4B;AAU1B;IADN,IAAI;2CAC4B;AAU1B;IADN,IAAI;0CAC0B;AAKjC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"counter-badge.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAQ3D;;;;;;;;;;GAUG;AACH,MAAM,OAAO,YAAa,SAAQ,gBAAgB;CAwCjD;AA/BQ;IADN,IAAI;gDACsC;AAUpC;IADN,IAAI;2CAC4B;AAU1B;IADN,IAAI;2CAC4B;AAU1B;IADN,IAAI;0CAC0B;AAKjC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}

package/dist/esm/counter-badge/counter-badge.styles.css

@@ -1,177 +1,177 @@
-
-  :host([shape='rounded']) {
-    border-radius: var(--borderRadiusMedium);
-  }
-
-  :host([shape='rounded']:is([size='tiny'], [size='extra-small'], [size='small'])) {
-    border-radius: var(--borderRadiusSmall);
-  }
-
-  
-  :host([size='tiny']) {
-    width: 6px;
-    height: 6px;
-    font-size: 4px;
-    line-height: 4px;
-    padding-inline: 0;
-    min-width: unset;
-  }
-  :host([size='tiny']) ::slotted(svg) {
-    font-size: 6px;
-  }
-  :host([size='extra-small']) {
-    width: 10px;
-    height: 10px;
-    font-size: 6px;
-    line-height: 6px;
-    padding-inline: 0;
-    min-width: unset;
-  }
-  :host([size='extra-small']) ::slotted(svg) {
-    font-size: 10px;
-  }
-  :host([size='small']) {
-    min-width: 16px;
-    height: 16px;
-    font-size: var(--fontSizeBase100);
-    line-height: var(--lineHeightBase100);
-    padding-inline: calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));
-  }
-  :host([size='small']) ::slotted(svg) {
-    font-size: 12px;
-  }
-  :host([size='large']) {
-    min-width: 24px;
-    height: 24px;
-    font-size: var(--fontSizeBase200);
-    line-height: var(--lineHeightBase200);
-    padding-inline: calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
-  }
-  :host([size='large']) ::slotted(svg) {
-    font-size: 16px;
-  }
-  :host([size='extra-large']) {
-    min-width: 32px;
-    height: 32px;
-    font-size: var(--fontSizeBase200);
-    line-height: var(--lineHeightBase200);
-    padding-inline: calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));
-  }
-  :host([size='extra-large']) ::slotted(svg) {
-    font-size: 20px;
-  }
-
-  
-  :host([color='danger']) {
-    background-color: var(--colorPaletteRedBackground3);
-    color: var(--colorNeutralForegroundOnBrand);
-  }
-
-  :host([color='important']) {
-    background-color: var(--colorNeutralForeground1);
-    color: var(--colorNeutralBackground1);
-  }
-
-  :host([color='informative']) {
-    background-color: var(--colorNeutralBackground5);
-    color: var(--colorNeutralForeground3);
-  }
-
-  :host([color='severe']) {
-    background-color: var(--colorPaletteDarkOrangeBackground3);
-    color: var(--colorNeutralForegroundOnBrand);
-  }
-
-  :host([color='subtle']) {
-    background-color: var(--colorNeutralBackground1);
-    color: var(--colorNeutralForeground1);
-  }
-
-  :host([color='success']) {
-    background-color: var(--colorPaletteGreenBackground3);
-    color: var(--colorNeutralForegroundOnBrand);
-  }
-
-  :host([color='warning']) {
-    background-color: var(--colorPaletteYellowBackground3);
-    color: var(--colorNeutralForeground1Static);
-  }
-
-  
-  :host([appearance='ghost']) {
-    color: var(--colorBrandForeground1);
-    background-color: initial;
-  }
-
-  :host([appearance='ghost'][color='danger']) {
-    color: var(--colorPaletteRedForeground3);
-  }
-
-  :host([appearance='ghost'][color='important']) {
-    color: var(--colorNeutralForeground1);
-  }
-
-  :host([appearance='ghost'][color='informative']) {
-    color: var(--colorNeutralForeground3);
-  }
-
-  :host([appearance='ghost'][color='severe']) {
-    color: var(--colorPaletteDarkOrangeForeground3);
-  }
-
-  :host([appearance='ghost'][color='subtle']) {
-    color: var(--colorNeutralForegroundInverted);
-  }
-
-  :host([appearance='ghost'][color='success']) {
-    color: var(--colorPaletteGreenForeground3);
-  }
-
-  :host([appearance='ghost'][color='warning']) {
-    color: var(--colorPaletteYellowForeground2);
-  }
-
-  
-  :host([hidden]){display:none}:host{display:inline-flex} :host {
-    position: relative;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    font-family: var(--fontFamilyBase);
-    font-weight: var(--fontWeightSemibold);
-    font-size: var(--fontSizeBase200);
-    line-height: var(--lineHeightBase200);
-    min-width: 20px;
-    height: 20px;
-    padding-inline: calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
-    border-radius: var(--borderRadiusCircular);
-    border-color: var(--colorTransparentStroke);
-    background-color: var(--colorBrandBackground);
-    color: var(--colorNeutralForegroundOnBrand);
-    contain: content;
-  }
-
-  ::slotted(svg) {
-    font-size: 12px;
-  }
-
-  :host(:not([appearance='ghost']))::after {
-    position: absolute;
-    content: '';
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    border-style: solid;
-    border-width: var(--strokeWidthThin);
-    border-color: inherit;
-    border-radius: inherit;
-  }
-
-
-  :host(:is([dot], [dot][appearance][size])) {
-    min-width: auto;
-    width: 6px;
-    height: 6px;
-    padding: 0;
-  }
+:host([shape='rounded']) {
+  border-radius: var(--borderRadiusMedium);
+}
+
+:host([shape='rounded']:is([size='tiny'], [size='extra-small'], [size='small'])) {
+  border-radius: var(--borderRadiusSmall);
+}
+
+:host([size='tiny']) {
+  width: 6px;
+  height: 6px;
+  font-size: 4px;
+  line-height: 4px;
+  padding-inline: 0;
+  min-width: unset;
+}
+:host([size='tiny']) ::slotted(svg) {
+  font-size: 6px;
+}
+:host([size='extra-small']) {
+  width: 10px;
+  height: 10px;
+  font-size: 6px;
+  line-height: 6px;
+  padding-inline: 0;
+  min-width: unset;
+}
+:host([size='extra-small']) ::slotted(svg) {
+  font-size: 10px;
+}
+:host([size='small']) {
+  min-width: 16px;
+  height: 16px;
+  font-size: var(--fontSizeBase100);
+  line-height: var(--lineHeightBase100);
+  padding-inline: calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));
+}
+:host([size='small']) ::slotted(svg) {
+  font-size: 12px;
+}
+:host([size='large']) {
+  min-width: 24px;
+  height: 24px;
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  padding-inline: calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
+}
+:host([size='large']) ::slotted(svg) {
+  font-size: 16px;
+}
+:host([size='extra-large']) {
+  min-width: 32px;
+  height: 32px;
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  padding-inline: calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));
+}
+:host([size='extra-large']) ::slotted(svg) {
+  font-size: 20px;
+}
+
+:host([color='danger']) {
+  background-color: var(--colorPaletteRedBackground3);
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([color='important']) {
+  background-color: var(--colorNeutralForeground1);
+  color: var(--colorNeutralBackground1);
+}
+
+:host([color='informative']) {
+  background-color: var(--colorNeutralBackground5);
+  color: var(--colorNeutralForeground3);
+}
+
+:host([color='severe']) {
+  background-color: var(--colorPaletteDarkOrangeBackground3);
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([color='subtle']) {
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+}
+
+:host([color='success']) {
+  background-color: var(--colorPaletteGreenBackground3);
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([color='warning']) {
+  background-color: var(--colorPaletteYellowBackground3);
+  color: var(--colorNeutralForeground1Static);
+}
+
+:host([appearance='ghost']) {
+  color: var(--colorBrandForeground1);
+  background-color: initial;
+}
+
+:host([appearance='ghost'][color='danger']) {
+  color: var(--colorPaletteRedForeground3);
+}
+
+:host([appearance='ghost'][color='important']) {
+  color: var(--colorNeutralForeground1);
+}
+
+:host([appearance='ghost'][color='informative']) {
+  color: var(--colorNeutralForeground3);
+}
+
+:host([appearance='ghost'][color='severe']) {
+  color: var(--colorPaletteDarkOrangeForeground3);
+}
+
+:host([appearance='ghost'][color='subtle']) {
+  color: var(--colorNeutralForegroundInverted);
+}
+
+:host([appearance='ghost'][color='success']) {
+  color: var(--colorPaletteGreenForeground3);
+}
+
+:host([appearance='ghost'][color='warning']) {
+  color: var(--colorPaletteYellowForeground2);
+}
+
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
+:host {
+  position: relative;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--fontFamilyBase);
+  font-weight: var(--fontWeightSemibold);
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  min-width: 20px;
+  height: 20px;
+  padding-inline: calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
+  border-radius: var(--borderRadiusCircular);
+  border-color: var(--colorTransparentStroke);
+  background-color: var(--colorBrandBackground);
+  color: var(--colorNeutralForegroundOnBrand);
+  contain: content;
+}
+
+::slotted(svg) {
+  font-size: 12px;
+}
+
+:host(:not([appearance='ghost']))::after {
+  position: absolute;
+  content: '';
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border-style: solid;
+  border-width: var(--strokeWidthThin);
+  border-color: inherit;
+  border-radius: inherit;
+}
+
+:host(:is([dot], [dot][appearance][size])) {
+  min-width: auto;
+  width: 6px;
+  height: 6px;
+  padding: 0;
+}

package/dist/esm/counter-badge/counter-badge.template.html

@@ -1,5 +1,8 @@
 <f-template name="fluent-counter-badge" shadowrootmode="open">
-<template>{{styles}}<slot name="start" f-ref="{start}"></slot> 
+  <template>
+    {{styles}}
+    <slot name="start" f-ref="{start}"></slot>
     <span>{{displayValue}}</span>
-     <slot name="end" f-ref="{end}"></slot></template>
+    <slot name="end" f-ref="{end}"></slot>
+  </template>
 </f-template>

package/dist/esm/dialog/dialog.d.ts

@@ -5,6 +5,10 @@ import { DialogType } from './dialog.options.js';
  *
  * @tag fluent-dialog
  *
+ * @fires { ToggleEvent } toggle - Event emitted after the dialog's open state changes.
+ * @fires { ToggleEvent } beforetoggle - Event emitted before the dialog's open state changes.
+ * @slot - The default slot. {@link (DialogBody:class)} element recommended.
+ *
  * @public
  */
 export declare class Dialog extends FASTElement {

package/dist/esm/dialog/dialog.js

@@ -6,6 +6,10 @@ import { DialogType } from './dialog.options.js';
  *
  * @tag fluent-dialog
  *
+ * @fires { ToggleEvent } toggle - Event emitted after the dialog's open state changes.
+ * @fires { ToggleEvent } beforetoggle - Event emitted before the dialog's open state changes.
+ * @slot - The default slot. {@link (DialogBody:class)} element recommended.
+ *
  * @public
  */
 export class Dialog extends FASTElement {

package/dist/esm/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/dialog/dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC3F,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,MAAO,SAAQ,WAAW;IAAvC;;QA+HE;;;;;WAKG;QACI,eAAU,GAAG,GAAS,EAAE;YAC7B,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBACnB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;gBAC9C,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;aAC/C,CAAC,CAAC;QACL,CAAC,CAAC;IA4CJ,CAAC;IA7IC;;;;;OAKG;IAEH,IAAW,iBAAiB;QAC1B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,eAAe,CAAC;QAC9B,CAAC;IACH,CAAC;IAED;;;;;OAKG;IAEH,IAAW,WAAW;QACpB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,SAAS,CAAC;QACxB,CAAC;IACH,CAAC;IAED;;;;;OAKG;IAEH,IAAW,gBAAgB;QACzB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,cAAc,CAAC;QAC7B,CAAC;IACH,CAAC;IAED;;;;;OAKG;IAEH,IAAW,WAAW;QACpB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,QAAQ,EAAE,CAAC;YACrD,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAED;;;;;OAKG;IAEH,IAAW,UAAU;QACnB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YAClD,OAAO,aAAa,CAAC;QACvB,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,UAAU,CAAC,KAAK,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACI,gBAAgB;QACrB,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;YACzB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;YAC9C,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;SAC/C,CAAC,CAAC;IACL,CAAC;IAeD;;;;OAIG;IACI,IAAI;QACT,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;gBACrE,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;YAC1B,CAAC;iBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,QAAQ,EAAE,CAAC;gBAC7C,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACrB,CAAC;YACD,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACI,IAAI;QACT,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACpB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED;;;;;;OAMG;IACI,YAAY,CAAC,KAAY;QAC9B,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;YACvF,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AA/KQ;IADN,UAAU;sCACuB;AAQ3B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;+CACR;AAQzB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;8CACR;AAQxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;yCACD;AAQ1B;IADN,IAAI;oCACoB;AASzB;IADC,QAAQ;+CAKR;AASD;IADC,QAAQ;yCAKR;AASD;IADC,QAAQ;8CAKR;AASD;IADC,QAAQ;yCAKR;AASD;IADC,QAAQ;wCAKR"}

package/dist/esm/dialog/dialog.styles.css

@@ -1,85 +1,84 @@
+@layer base {
+  :host {
+    --dialog-backdrop: var(--colorBackgroundOverlay);
+    --dialog-starting-scale: 0.85;
+  }
 
-  @layer base {
-    :host {
-      --dialog-backdrop: var(--colorBackgroundOverlay);
-      --dialog-starting-scale: 0.85;
+  ::backdrop {
+    background: var(--dialog-backdrop, rgba(0, 0, 0, 0.4));
+  }
+
+  dialog {
+    background: var(--colorNeutralBackground1);
+    border-radius: var(--borderRadiusXLarge);
+    border: none;
+    box-shadow: var(--shadow64);
+    color: var(--colorNeutralForeground1);
+    max-height: 100vh;
+    padding: 0;
+    width: 100%;
+    max-width: 600px;
+  }
+
+  :host([type='non-modal']) dialog {
+    inset: 0;
+    z-index: 2;
+    overflow: auto;
+  }
+
+  @supports (max-height: 1dvh) {
+    dialog {
+      max-height: 100dvh;
     }
+  }
+}
 
+@layer animations {
+  /* Disable animations for reduced motion */
+  @media (prefers-reduced-motion: no-preference) {
+    dialog,
     ::backdrop {
-      background: var(--dialog-backdrop, rgba(0, 0, 0, 0.4));
+      transition: display allow-discrete, opacity, overlay allow-discrete, scale;
+      transition-duration: var(--durationGentle);
+      transition-timing-function: var(--curveDecelerateMid);
+      /* Set opacity to 0 when closed */
+      opacity: 0;
     }
-
-    dialog {
-      background: var(--colorNeutralBackground1);
-      border-radius: var(--borderRadiusXLarge);
-      border: none;
-      box-shadow: var(--shadow64);
-      color: var(--colorNeutralForeground1);
-      max-height: 100vh;
-      padding: 0;
-      width: 100%;
-      max-width: 600px;
+    ::backdrop {
+      transition-timing-function: var(--curveLinear);
     }
 
-    :host([type='non-modal']) dialog {
-      inset: 0;
-      z-index: 2;
-      overflow: auto;
+    /* Set opacity to 1 when open */
+    [open],
+    [open]::backdrop {
+      opacity: 1;
     }
 
-    @supports (max-height: 1dvh) {
-      dialog {
-        max-height: 100dvh;
-      }
+    /* Exit styles for dialog */
+    dialog:not([open]) {
+      /* Make small when leaving */
+      scale: var(--dialog-starting-scale);
+      /* Faster leaving the stage then entering */
+      transition-timing-function: var(--curveAccelerateMid);
     }
   }
 
-  @layer animations {
-    /* Disable animations for reduced motion */
-    @media (prefers-reduced-motion: no-preference) {
-      dialog,
-      ::backdrop {
-        transition: display allow-discrete, opacity, overlay allow-discrete, scale;
-        transition-duration: var(--durationGentle);
-        transition-timing-function: var(--curveDecelerateMid);
-        /* Set opacity to 0 when closed */
-        opacity: 0;
-      }
-      ::backdrop {
-        transition-timing-function: var(--curveLinear);
-      }
-
-      /* Set opacity to 1 when open */
-      [open],
-      [open]::backdrop {
-        opacity: 1;
-      }
-
-      /* Exit styles for dialog */
-      dialog:not([open]) {
-        /* Make small when leaving */
-        scale: var(--dialog-starting-scale);
-        /* Faster leaving the stage then entering */
-        transition-timing-function: var(--curveAccelerateMid);
-      }
+  @starting-style {
+    [open],
+    [open]::backdrop {
+      opacity: 0;
     }
 
-    @starting-style {
-      [open],
-      [open]::backdrop {
-        opacity: 0;
-      }
-
-      dialog {
-        scale: var(--dialog-starting-scale);
-      }
+    dialog {
+      scale: var(--dialog-starting-scale);
     }
   }
+}
 
-  @media (forced-colors: active) {
-    @layer base {
-      dialog {
-        border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
-      }
+@media (forced-colors: active) {
+  @layer base {
+    dialog {
+      border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
     }
   }
+}

package/dist/esm/dialog/dialog.template.html

@@ -1,17 +1,20 @@
 <f-template name="fluent-dialog" shadowrootmode="open">
-<template>{{styles}}<dialog
-    class="dialog"
-    part="dialog"
-    aria-modal="{{dialogModal}}"
-    aria-describedby="{{dialogDescribedby}}"
-    aria-labelledby="{{dialogLabelledby}}"
-    aria-label="{{dialogLabel}}"
-    role="{{dialogRole}}"
-    @click="{clickHandler($e)}"
-    @cancel="{hide()}"
-    f-ref="{dialog}"
-  >
-    <div tabindex="-1"></div>
-    <slot></slot>
-  </dialog></template>
+  <template>
+    {{styles}}
+    <dialog
+      class="dialog"
+      part="dialog"
+      aria-modal="{{dialogModal}}"
+      aria-describedby="{{dialogDescribedby}}"
+      aria-labelledby="{{dialogLabelledby}}"
+      aria-label="{{dialogLabel}}"
+      role="{{dialogRole}}"
+      @click="{clickHandler($e)}"
+      @cancel="{hide()}"
+      f-ref="{dialog}"
+    >
+      <div tabindex="-1"></div>
+      <slot></slot>
+    </dialog>
+  </template>
 </f-template>