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

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

@@ -1,87 +1,92 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: grid;
+}
 
-  :host([hidden]){display:none}:host{display:grid}
+:host {
+  background: var(--colorNeutralBackground1);
+  box-sizing: border-box;
+  gap: var(--spacingVerticalS);
+  padding: var(--spacingVerticalXXL) var(--spacingHorizontalXXL);
+  container: dialog-body / inline-size;
+}
 
-  :host {
-    background: var(--colorNeutralBackground1);
-    box-sizing: border-box;
-    gap: var(--spacingVerticalS);
-    padding: var(--spacingVerticalXXL) var(--spacingHorizontalXXL);
-    container: dialog-body / inline-size;
-  }
+.title {
+  box-sizing: border-box;
+  align-items: flex-start;
+  background: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+  column-gap: 8px;
+  display: flex;
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase500);
+  font-weight: var(--fontWeightSemibold);
+  inset-block-start: 0;
+  justify-content: space-between;
+  line-height: var(--lineHeightBase500);
+  margin-block-end: calc(var(--spacingVerticalS) * -1);
+  margin-block-start: calc(var(--spacingVerticalXXL) * -1);
+  padding-block-end: var(--spacingVerticalS);
+  padding-block-start: var(--spacingVerticalXXL);
+}
 
-  .title {
-    box-sizing: border-box;
-    align-items: flex-start;
-    background: var(--colorNeutralBackground1);
-    color: var(--colorNeutralForeground1);
-    column-gap: 8px;
-    display: flex;
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase500);
-    font-weight: var(--fontWeightSemibold);
-    inset-block-start: 0;
-    justify-content: space-between;
-    line-height: var(--lineHeightBase500);
-    margin-block-end: calc(var(--spacingVerticalS) * -1);
-    margin-block-start: calc(var(--spacingVerticalXXL) * -1);
-    padding-block-end: var(--spacingVerticalS);
-    padding-block-start: var(--spacingVerticalXXL);
-  }
+.content {
+  box-sizing: border-box;
+  color: var(--colorNeutralForeground1);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  line-height: var(--lineHeightBase300);
+  min-height: 32px;
+}
 
-  .content {
-    box-sizing: border-box;
-    color: var(--colorNeutralForeground1);
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase300);
-    font-weight: var(--fontWeightRegular);
-    line-height: var(--lineHeightBase300);
-    min-height: 32px;
-  }
+.actions {
+  box-sizing: border-box;
+  background: var(--colorNeutralBackground1);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacingVerticalS);
+  inset-block-end: 0;
+  margin-block-end: calc(var(--spacingVerticalXXL) * -1);
+  padding-block-end: var(--spacingVerticalXXL);
+  padding-block-start: var(--spacingVerticalL);
+}
 
-  .actions {
-    box-sizing: border-box;
-    background: var(--colorNeutralBackground1);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacingVerticalS);
-    inset-block-end: 0;
-    margin-block-end: calc(var(--spacingVerticalXXL) * -1);
-    padding-block-end: var(--spacingVerticalXXL);
-    padding-block-start: var(--spacingVerticalL);
-  }
+::slotted([slot='title-action']) {
+  margin-inline-start: auto;
+}
 
-  ::slotted([slot='title-action']) {
-    margin-inline-start: auto;
-  }
+::slotted([slot='title']) {
+  font: inherit;
+  padding: 0;
+  margin: 0;
+}
 
-  ::slotted([slot='title']) {
-    font: inherit;
-    padding: 0;
-    margin: 0;
-  }
+/* align  title content to the end when there is no title*/
+:not(:has(:is([slot='title'], [slot='title-action']))) .title {
+  justify-content: end;
+}
 
-  /* align  title content to the end when there is no title*/
-  :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(var(--spacingVerticalS) * -1);
+    padding-block-start: var(--spacingVerticalS);
   }
+}
 
-  @container (min-width: 480px) {
-    .actions {
-      align-items: center;
-      flex-direction: row;
-      justify-content: flex-end;
-      margin-block-start: calc(var(--spacingVerticalS) * -1);
-      padding-block-start: var(--spacingVerticalS);
-    }
+/* For a11y, set sticky position for title and actions when the viewport is tall enough */
+@media (min-height: 480px) {
+  .title {
+    position: sticky;
+    z-index: 1;
   }
-
-  /* For a11y, set sticky position for title and actions when the viewport is tall enough */
-  @media (min-height: 480px) {
-    .title {
-      position: sticky;
-      z-index: 1;
-    }
-    .actions {
-      position: sticky;
-      z-index: 2;
-    }
+  .actions {
+    position: sticky;
+    z-index: 2;
+  }
+}

package/dist/esm/dialog-body/dialog-body.styles.js

@@ -91,5 +91,6 @@ export const styles = css `
       position: sticky;
       z-index: 2;
     }
+  }
 `;
 //# sourceMappingURL=dialog-body.styles.js.map

package/dist/esm/dialog-body/dialog-body.styles.js.map

@@ -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,qBAAqB,CAAC;AAC9C,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"}
+{"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,qBAAqB,CAAC;AAC9C,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;;;;;;;;;;;;;;;CAe5C,CAAC"}

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

@@ -1,5 +1,6 @@
 <f-template name="fluent-dialog-body" shadowrootmode="open">
-<template>{{styles}}
+  <template>
+    {{styles}}
     <div class="title" part="title">
       <slot name="title"></slot>
       <slot name="title-action"></slot>

package/dist/esm/divider/divider.styles.css

@@ -1,119 +1,123 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: flex;
+}
 
-  :host([hidden]){display:none}:host{display:flex}
+:host {
+  contain: content;
+}
 
-  :host {
-    contain: content;
-  }
+:host::after,
+:host::before {
+  align-self: center;
+  background: var(--colorNeutralStroke2);
+  box-sizing: border-box;
+  content: '';
+  display: flex;
+  flex-grow: 1;
+  height: var(--strokeWidthThin);
+}
 
-  :host::after,
-  :host::before {
-    align-self: center;
-    background: var(--colorNeutralStroke2);
-    box-sizing: border-box;
-    content: '';
-    display: flex;
-    flex-grow: 1;
-    height: var(--strokeWidthThin);
-  }
+:host([inset]) {
+  padding: 0 12px;
+}
 
-  :host([inset]) {
-    padding: 0 12px;
-  }
+:host ::slotted(*) {
+  color: var(--colorNeutralForeground2);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase200);
+  font-weight: var(--fontWeightRegular);
+  margin: 0;
+  padding: 0 12px;
+}
 
-  :host ::slotted(*) {
-    color: var(--colorNeutralForeground2);
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase200);
-    font-weight: var(--fontWeightRegular);
-    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([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']) {
-    align-items: center;
-    flex-direction: column;
-    height: 100%;
-    min-height: 84px;
-  }
+:host([orientation='vertical']):empty {
+  min-height: 20px;
+}
 
-  :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'][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']):empty::before,
-  :host([orientation='vertical']):empty::after {
-    height: 10px;
-    min-height: 10px;
-    flex-grow: 0;
-  }
+:host([orientation='vertical'])::before,
+:host([orientation='vertical'])::after {
+  width: var(--strokeWidthThin);
+  min-height: 20px;
+  height: 100%;
+}
 
-  :host([orientation='vertical'])::before,
-  :host([orientation='vertical'])::after {
-    width: var(--strokeWidthThin);
-    min-height: 20px;
-    height: 100%;
-  }
+:host([orientation='vertical']) ::slotted(*) {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 0;
+  line-height: 20px;
+}
 
-  :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([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: var(--colorNeutralStroke1);
+}
+:host([appearance='strong']) ::slotted(*) {
+  color: var(--colorNeutralForeground1);
+}
+:host([appearance='brand'])::before,
+:host([appearance='brand'])::after {
+  background: var(--colorBrandStroke1);
+}
+:host([appearance='brand']) ::slotted(*) {
+  color: var(--colorBrandForeground1);
+}
+:host([appearance='subtle'])::before,
+:host([appearance='subtle'])::after {
+  background: var(--colorNeutralStroke3);
+}
+:host([appearance='subtle']) ::slotted(*) {
+  color: var(--colorNeutralForeground3);
+}
 
+@media (forced-colors: active) {
   :host([appearance='strong'])::before,
-  :host([appearance='strong'])::after {
-    background: var(--colorNeutralStroke1);
-  }
-  :host([appearance='strong']) ::slotted(*) {
-    color: var(--colorNeutralForeground1);
-  }
+  :host([appearance='strong'])::after,
   :host([appearance='brand'])::before,
-  :host([appearance='brand'])::after {
-    background: var(--colorBrandStroke1);
-  }
-  :host([appearance='brand']) ::slotted(*) {
-    color: var(--colorBrandForeground1);
-  }
+  :host([appearance='brand'])::after,
   :host([appearance='subtle'])::before,
-  :host([appearance='subtle'])::after {
-    background: var(--colorNeutralStroke3);
-  }
-  :host([appearance='subtle']) ::slotted(*) {
-    color: var(--colorNeutralForeground3);
-  }
-
-  @media (forced-colors: active) {
-    :host([appearance='strong'])::before,
-    :host([appearance='strong'])::after,
-    :host([appearance='brand'])::before,
-    :host([appearance='brand'])::after,
-    :host([appearance='subtle'])::before,
-    :host([appearance='subtle'])::after,
-    :host::after,
-    :host::before {
-      background: WindowText;
-      color: WindowText;
-    }
+  :host([appearance='subtle'])::after,
+  :host::after,
+  :host::before {
+    background: WindowText;
+    color: WindowText;
   }
+}

package/dist/esm/divider/divider.template.html

@@ -1 +1,6 @@
-<f-template name="fluent-divider" shadowrootmode="open"><template>{{styles}}<slot></slot></template></f-template>
+<f-template name="fluent-divider" shadowrootmode="open">
+  <template>
+    {{styles}}
+    <slot></slot>
+  </template>
+</f-template>

package/dist/esm/drawer/drawer.styles.css

@@ -1,129 +1,134 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: block;
+}
+
+:host {
+  --dialog-backdrop: var(--colorBackgroundOverlay);
+}
+
+:host([type='non-modal']) dialog[open]::backdrop {
+  display: none;
+}
+
+:host([type='non-modal']) dialog {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+}
+
+:host([type='inline']) {
+  height: 100%;
+  width: fit-content;
+}
+
+:host([type='inline']) dialog[open] {
+  box-shadow: none;
+  position: relative;
+}
+
+:host([size='small']) dialog {
+  width: 320px;
+  max-width: 320px;
+}
+
+:host([size='large']) dialog {
+  width: 940px;
+  max-width: 940px;
+}
+
+:host([size='full']) dialog {
+  width: 100%;
+  max-width: 100%;
+}
+
+:host([position='end']) dialog {
+  margin-inline-start: auto;
+  margin-inline-end: 0;
+}
+
+dialog {
+  box-sizing: border-box;
+  z-index: var(--drawer-elevation, 1000);
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+  font-family: var(--fontFamilyBase);
+  font-weight: var(--fontWeightRegular);
+  color: var(--colorNeutralForeground1);
+  max-width: var(--drawer-width, 592px);
+  max-height: 100vh;
+  height: 100%;
+  margin-inline-start: 0;
+  margin-inline-end: auto;
+  border-inline-end-color: var(--colorTransparentStroke);
+  border-inline-start-color: var(--drawer-separator, var(--colorTransparentStroke));
+  outline: none;
+  top: 0;
+  bottom: 0;
+  width: var(--drawer-width, 592px);
+  border-radius: 0;
+  padding: 0;
+  max-width: var(--drawer-width, 592px);
+  box-shadow: var(--shadow64);
+  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+  background: var(--colorNeutralBackground1);
+}
+
+dialog::backdrop {
+  background: var(--dialog-backdrop);
+}
+
+@layer animations {
+  /* Disable animations for reduced motion */
+  @media (prefers-reduced-motion: no-preference) {
+    dialog {
+      transition: display allow-discrete, opacity, overlay allow-discrete, transform;
+      transition-duration: var(--durationGentle);
+      transition-timing-function: var(--curveDecelerateMid);
+    }
 
-  :host([hidden]){display:none}:host{display:block}
-
-  :host {
-    --dialog-backdrop: var(--colorBackgroundOverlay);
-  }
-
-  :host([type='non-modal']) dialog[open]::backdrop {
-    display: none;
-  }
-
-  :host([type='non-modal']) dialog {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-  }
-
-  :host([type='inline']) {
-    height: 100%;
-    width: fit-content;
-  }
-
-  :host([type='inline']) dialog[open] {
-    box-shadow: none;
-    position: relative;
-  }
-
-  :host([size='small']) dialog {
-    width: 320px;
-    max-width: 320px;
-  }
-
-  :host([size='large']) dialog {
-    width: 940px;
-    max-width: 940px;
-  }
+    /* Exit styles for dialog */
+    :host dialog:not([open]) {
+      transform: translateX(-100%);
+      transition-timing-function: var(--curveAccelerateMid);
+    }
+    :host([position='end']) dialog:not([open]) {
+      transform: translateX(100%);
+      transition-timing-function: var(--curveAccelerateMid);
+    }
 
-  :host([size='full']) dialog {
-    width: 100%;
-    max-width: 100%;
-  }
+    dialog[open] {
+      transform: translateX(0);
+    }
 
-  :host([position='end']) dialog {
-    margin-inline-start: auto;
-    margin-inline-end: 0;
-  }
+    dialog::backdrop {
+      transition: display allow-discrete, opacity, overlay allow-discrete, scale;
+      transition-duration: var(--durationGentle);
+      transition-timing-function: var(--curveDecelerateMid);
+      background: var(--dialog-backdrop, var(--colorBackgroundOverlay));
+      opacity: 0;
+    }
 
-  dialog {
-    background: var(--colorNeutralBackground1);
-    border-radius: 0;
-    border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
-    border-inline-end-color: var(--colorTransparentStroke);
-    border-inline-start-color: var(--drawer-separator, var(--colorTransparentStroke));
-    box-shadow: var(--shadow64);
-    box-sizing: border-box;
-    color: var(--colorNeutralForeground1);
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase300);
-    font-weight: var(--fontWeightRegular);
-    height: 100%;
-    line-height: var(--lineHeightBase300);
-    margin-inline-end: auto;
-    margin-inline-start: 0;
-    max-height: 100vh;
-    max-width: calc(100vw - var(--spacingHorizontalXXL));
-    outline: none;
-    padding: 0;
-    bottom: 0;
-    top: 0;
-    width: var(--drawer-width, 592px);
-    z-index: var(--drawer-elevation, 1000);
-  }
+    dialog[open]::backdrop {
+      opacity: 1;
+    }
 
-  dialog::backdrop {
-    background: var(--dialog-backdrop);
+    dialog::backdrop {
+      transition-timing-function: var(--curveLinear);
+    }
   }
 
-  @layer animations {
-    /* Disable animations for reduced motion */
-    @media (prefers-reduced-motion: no-preference) {
-      dialog {
-        transition: display allow-discrete, opacity, overlay allow-discrete, transform;
-        transition-duration: var(--durationGentle);
-        transition-timing-function: var(--curveDecelerateMid);
-      }
-
-      /* Exit styles for dialog */
-      :host dialog:not([open]) {
-        transform: translateX(-100%);
-        transition-timing-function: var(--curveAccelerateMid);
-      }
-      :host([position='end']) dialog:not([open]) {
-        transform: translateX(100%);
-        transition-timing-function: var(--curveAccelerateMid);
-      }
-
-      dialog[open] {
-        transform: translateX(0);
-      }
-
-      dialog::backdrop {
-        transition: display allow-discrete, opacity, overlay allow-discrete, scale;
-        transition-duration: var(--durationGentle);
-        transition-timing-function: var(--curveDecelerateMid);
-        background: var(--dialog-backdrop, var(--colorBackgroundOverlay));
-        opacity: 0;
-      }
-
-      dialog[open]::backdrop {
-        opacity: 1;
-      }
-
-      dialog::backdrop {
-        transition-timing-function: var(--curveLinear);
-      }
+  @starting-style {
+    dialog[open] {
+      transform: translateX(-100%);
     }
-
-    @starting-style {
-      dialog[open] {
-        transform: translateX(-100%);
-      }
-      :host([position='end']) dialog[open] {
-        transform: translateX(100%);
-      }
-      dialog[open]::backdrop {
-        opacity: 0;
-      }
+    :host([position='end']) dialog[open] {
+      transform: translateX(100%);
+    }
+    dialog[open]::backdrop {
+      opacity: 0;
     }
   }
+}