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

package/dist/esm/menu-item/menu-item.styles.css

@@ -1,150 +1,154 @@
-
-  :host([hidden]){display:none}:host{display:grid}
-
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: grid;
+}
+
+:host {
+  --indent: 0;
+  align-items: center;
+  background: var(--colorNeutralBackground1);
+  border-radius: var(--borderRadiusMedium);
+  color: var(--colorNeutralForeground2);
+  contain: layout;
+  cursor: pointer;
+  /* Prevent shrinking of MenuItems when max-height is applied to MenuList */
+  flex-shrink: 0;
+  font: var(--fontWeightRegular) var(--fontSizeBase300) / var(--lineHeightBase300) var(--fontFamilyBase);
+  grid-gap: 4px;
+  grid-template-columns: 20px 20px auto 20px;
+  height: 32px;
+  overflow: visible;
+  padding: 0 10px;
+}
+
+:host(:hover) {
+  background: var(--colorNeutralBackground1Hover);
+  color: var(--colorNeutralForeground2Hover);
+}
+
+:host(:active) {
+  background-color: var(--colorNeutralBackground1Selected);
+  color: var(--colorNeutralForeground2Pressed);
+}
+
+:host(:active) ::slotted([slot='start']) {
+  color: var(--colorCompoundBrandForeground1Pressed);
+}
+
+:host(:state(disabled)) {
+  background-color: var(--colorNeutralBackgroundDisabled);
+  color: var(--colorNeutralForegroundDisabled);
+}
+
+:host(:state(disabled)) ::slotted([slot='start']),
+:host(:state(disabled)) ::slotted([slot='end']) {
+  color: var(--colorNeutralForegroundDisabled);
+}
+
+:host(:focus-visible) {
+  border-radius: var(--borderRadiusMedium);
+  outline: 2px solid var(--colorStrokeFocus2);
+}
+
+.content {
+  white-space: nowrap;
+  flex-grow: 1;
+  grid-column: auto / span 2;
+  padding: 0 2px;
+}
+
+:host(:not(:state(checked))) .indicator,
+:host(:not(:state(checked))) ::slotted([slot='indicator']),
+:host(:not(:state(submenu))) .submenu-glyph,
+:host(:not(:state(submenu))) ::slotted([slot='submenu-glyph']) {
+  display: none;
+}
+
+::slotted([slot='end']) {
+  color: var(--colorNeutralForeground3);
+  font: var(--fontWeightRegular) var(--fontSizeBase200) / var(--lineHeightBase200) var(--fontFamilyBase);
+  white-space: nowrap;
+}
+
+:host([data-indent='1']) {
+  --indent: 1;
+}
+
+:host([data-indent='2']) {
+  --indent: 2;
+  grid-template-columns: 20px 20px auto auto;
+}
+
+:host(:state(submenu)) {
+  grid-template-columns: 20px auto auto 20px;
+}
+
+:host([data-indent='2']:state(submenu)) {
+  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 {
-    --indent: 0;
-    align-items: center;
-    background: var(--colorNeutralBackground1);
-    border-radius: var(--borderRadiusMedium);
-    color: var(--colorNeutralForeground2);
-    contain: layout;
-    cursor: pointer;
-    /* Prevent shrinking of MenuItems when max-height is applied to MenuList */
-    flex-shrink: 0;
-    font: var(--fontWeightRegular) var(--fontSizeBase300) / var(--lineHeightBase300) var(--fontFamilyBase);
-    grid-gap: 4px;
-    grid-template-columns: 20px 20px auto 20px;
-    height: 32px;
-    overflow: visible;
-    padding: 0 10px;
-  }
-
-  :host(:hover) {
-    background: var(--colorNeutralBackground1Hover);
-    color: var(--colorNeutralForeground2Hover);
-  }
-
-  :host(:active) {
-    background-color: var(--colorNeutralBackground1Selected);
-    color: var(--colorNeutralForeground2Pressed);
+    anchor-name: --menu-trigger;
+    position: relative;
   }
 
-  :host(:active) ::slotted([slot='start']) {
-    color: var(--colorCompoundBrandForeground1Pressed);
-  }
-
-  :host(:state(disabled)) {
-    background-color: var(--colorNeutralBackgroundDisabled);
-    color: var(--colorNeutralForegroundDisabled);
-  }
-
-  :host(:state(disabled)) ::slotted([slot='start']),
-  :host(:state(disabled)) ::slotted([slot='end']) {
-    color: var(--colorNeutralForegroundDisabled);
+  ::slotted([popover]) {
+    margin: 0;
+    max-height: var(--menu-max-height, auto);
+    position: fixed;
+    position-anchor: --menu-trigger;
+    inset: unset;
+    inset-block-start: anchor(start);
+    inset-inline-start: anchor(end);
+    position-try-fallbacks: flip-inline, block-start, block-end;
+    z-index: 1;
   }
 
-  :host(:focus-visible) {
-    border-radius: var(--borderRadiusMedium);
-    outline: 2px solid var(--colorStrokeFocus2);
-  }
-
-  .content {
-    white-space: nowrap;
-    flex-grow: 1;
-    grid-column: auto / span 2;
-    padding: 0 2px;
-  }
-
-  :host(:not(:state(checked))) .indicator,
-  :host(:not(:state(checked))) ::slotted([slot='indicator']),
-  :host(:not(:state(submenu))) .submenu-glyph,
-  :host(:not(:state(submenu))) ::slotted([slot='submenu-glyph']) {
+  ::slotted([popover]:not(:popover-open)) {
     display: none;
   }
 
-  ::slotted([slot='end']) {
-    color: var(--colorNeutralForeground3);
-    font: var(--fontWeightRegular) var(--fontSizeBase200) / var(--lineHeightBase200) var(--fontFamilyBase);
-    white-space: nowrap;
-  }
-
-  :host([data-indent='1']) {
-    --indent: 1;
-  }
-
-  :host([data-indent='2']) {
-    --indent: 2;
-    grid-template-columns: 20px 20px auto auto;
-  }
-
-  :host(:state(submenu)) {
-    grid-template-columns: 20px auto auto 20px;
-  }
-
-  :host([data-indent='2']:state(submenu)) {
-    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;
-    }
-
+  /* Fallback for no anchor-positioning */
+  @supports not (anchor-name: --menu-trigger) {
     ::slotted([popover]) {
-      margin: 0;
-      max-height: var(--menu-max-height, auto);
-      position: fixed;
-      position-anchor: --menu-trigger;
-      inset: unset;
-      inset-block-start: anchor(start);
-      inset-inline-start: anchor(end);
-      position-try-fallbacks: flip-inline, block-start, block-end;
-      z-index: 1;
-    }
-
-    ::slotted([popover]:not(:popover-open)) {
-      display: none;
-    }
-
-    /* Fallback for no anchor-positioning */
-    @supports not (anchor-name: --menu-trigger) {
-      ::slotted([popover]) {
-        align-self: start;
-      }
+      align-self: start;
     }
   }
+}
 
-  @media (forced-colors: active) {
-    :host(:state(disabled)),
-    :host(:state(disabled)) ::slotted([slot='start']),
-    :host(:state(disabled)) ::slotted([slot='end']) {
-      color: GrayText;
-    }
+@media (forced-colors: active) {
+  :host(:state(disabled)),
+  :host(:state(disabled)) ::slotted([slot='start']),
+  :host(:state(disabled)) ::slotted([slot='end']) {
+    color: GrayText;
   }
+}

package/dist/esm/menu-item/menu-item.styles.js

@@ -124,15 +124,20 @@ export const styles = css `
       position: relative;
     }
 
+    @position-try --inline-inside {
+      inset-inline-start: unset;
+      inset-inline-end: anchor(inside);
+    }
+
     ::slotted([popover]) {
       margin: 0;
       max-height: var(--menu-max-height, auto);
       position: fixed;
       position-anchor: --menu-trigger;
       inset: unset;
-      inset-block-start: anchor(start);
-      inset-inline-start: anchor(end);
-      position-try-fallbacks: flip-inline, block-start, block-end;
+      inset-block-start: anchor(inside);
+      inset-inline-start: anchor(outside);
+      position-try-fallbacks: --inline-inside, flip-block, flip-block --inline-inside;
       z-index: 1;
     }
 

package/dist/esm/menu-item/menu-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../../src/menu-item/menu-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,oCAAoC,EACpC,uBAAuB,EACvB,4BAA4B,EAC5B,+BAA+B,EAC/B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEtF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKD,uBAAuB;qBACpB,kBAAkB;aAC1B,uBAAuB;;;;;YAKxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;kBASvE,4BAA4B;aACjC,4BAA4B;;;;wBAIjB,+BAA+B;aAC1C,8BAA8B;;;;aAI9B,oCAAoC;;;UAGvC,aAAa;wBACC,8BAA8B;aACzC,8BAA8B;;;UAGjC,aAAa;UACb,aAAa;aACV,8BAA8B;;;;qBAItB,kBAAkB;yBACd,iBAAiB;;;;;;;;;;eAU3B,YAAY;eACZ,YAAY;eACZ,YAAY;eACZ,YAAY;;;;;aAKd,uBAAuB;YACxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;;;;;UAa/E,YAAY;;;;2BAIK,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA6D3B,aAAa;YACb,aAAa;YACb,aAAa;;;;CAIxB,CAAC"}
+{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../../src/menu-item/menu-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,oCAAoC,EACpC,uBAAuB,EACvB,4BAA4B,EAC5B,+BAA+B,EAC/B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEtF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKD,uBAAuB;qBACpB,kBAAkB;aAC1B,uBAAuB;;;;;YAKxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;kBASvE,4BAA4B;aACjC,4BAA4B;;;;wBAIjB,+BAA+B;aAC1C,8BAA8B;;;;aAI9B,oCAAoC;;;UAGvC,aAAa;wBACC,8BAA8B;aACzC,8BAA8B;;;UAGjC,aAAa;UACb,aAAa;aACV,8BAA8B;;;;qBAItB,kBAAkB;yBACd,iBAAiB;;;;;;;;;;eAU3B,YAAY;eACZ,YAAY;eACZ,YAAY;eACZ,YAAY;;;;;aAKd,uBAAuB;YACxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;;;;;UAa/E,YAAY;;;;2BAIK,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAkE3B,aAAa;YACb,aAAa;YACb,aAAa;;;;CAIxB,CAAC"}

package/dist/esm/menu-item/menu-item.template.html

@@ -1,19 +1,50 @@
 <f-template name="fluent-menu-item" shadowrootmode="open">
-<template
-      tabindex="0"
-      @keydown="{handleMenuItemKeyDown($e)}"
-      @click="{handleMenuItemClick($e)}"
-      @mouseover="{handleMouseOver($e)}"
-      @mouseout="{handleMouseOut($e)}"
-      @toggle="{handleToggle($e)}"
-    >{{styles}}
-      <slot name="indicator"> <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> </slot>
-       <slot name="start" f-ref="{start}"></slot> 
-      <div part="content" class="content">
-        <slot></slot>
-      </div>
-       <slot name="end" f-ref="{end}"></slot> 
-      <slot name="submenu-glyph"> <svg class="submenu-glyph" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg> </slot>
-      <slot name="submenu" f-slotted="{slottedSubmenu}"></slot>
-    </template>
+  <template
+    tabindex="0"
+    @keydown="{handleMenuItemKeyDown($e)}"
+    @click="{handleMenuItemClick($e)}"
+    @mouseover="{handleMouseOver($e)}"
+    @mouseout="{handleMouseOut($e)}"
+    @toggle="{handleToggle($e)}"
+  >
+    {{styles}}
+    <slot name="indicator">
+      <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>
+    </slot>
+    <slot name="start" f-ref="{start}"></slot>
+    <div part="content" class="content">
+      <slot></slot>
+    </div>
+    <slot name="end" f-ref="{end}"></slot>
+    <slot name="submenu-glyph">
+      <svg
+        class="submenu-glyph"
+        fill="currentColor"
+        aria-hidden="true"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </slot>
+    <slot name="submenu" f-slotted="{slottedSubmenu}"></slot>
+  </template>
 </f-template>

package/dist/esm/menu-list/menu-list.styles.css

@@ -1,16 +1,20 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: flex;
+}
 
-  :host([hidden]){display:none}:host{display:flex}
-
-  :host {
-    flex-direction: column;
-    height: fit-content;
-    max-width: 300px;
-    min-width: 160px;
-    width: auto;
-    background-color: var(--colorNeutralBackground1);
-    border: 1px solid var(--colorTransparentStroke);
-    border-radius: var(--borderRadiusMedium);
-    box-shadow: var(--shadow16);
-    padding: 4px;
-    row-gap: 2px;
-  }
+:host {
+  flex-direction: column;
+  height: fit-content;
+  max-width: 300px;
+  min-width: 160px;
+  width: auto;
+  background-color: var(--colorNeutralBackground1);
+  border: 1px solid var(--colorTransparentStroke);
+  border-radius: var(--borderRadiusMedium);
+  box-shadow: var(--shadow16);
+  padding: 4px;
+  row-gap: 2px;
+}

package/dist/esm/menu-list/menu-list.template.html

@@ -1,5 +1,6 @@
 <f-template name="fluent-menu-list" shadowrootmode="open">
-<template focusgroup="menu">{{styles}}
-      <slot f-slotted="{items}"></slot>
-    </template>
+  <template focusgroup="menu">
+    {{styles}}
+    <slot f-slotted="{items}"></slot>
+  </template>
 </f-template>

package/dist/esm/message-bar/message-bar.styles.css

@@ -1,98 +1,97 @@
+:host {
+  display: grid;
+  box-sizing: border-box;
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  width: 100%;
+  background: var(--colorNeutralBackground3);
+  border: 1px solid var(--colorNeutralStroke1);
+  padding-inline: var(--spacingHorizontalM);
+  border-radius: var(--borderRadiusMedium);
+  min-height: 36px;
+  align-items: center;
+  grid-template: 'icon body actions dismiss' / auto 1fr auto auto;
+  contain: layout style paint;
+}
 
-  :host {
-    display: grid;
-    box-sizing: border-box;
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase200);
-    line-height: var(--lineHeightBase200);
-    width: 100%;
-    background: var(--colorNeutralBackground3);
-    border: 1px solid var(--colorNeutralStroke1);
-    padding-inline: var(--spacingHorizontalM);
-    border-radius: var(--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([shape='square']) {
-    border-radius: 0;
-  }
+:host([intent='success']) {
+  background-color: var(--colorPaletteGreenBackground1);
+  border-color: var(--colorPaletteGreenBorder1);
+}
 
-  :host([intent='success']) {
-    background-color: var(--colorPaletteGreenBackground1);
-    border-color: var(--colorPaletteGreenBorder1);
-  }
+:host([intent='warning']) {
+  background-color: var(--colorPaletteDarkOrangeBackground1);
+  border-color: var(--colorPaletteDarkOrangeBorder1);
+}
 
-  :host([intent='warning']) {
-    background-color: var(--colorPaletteDarkOrangeBackground1);
-    border-color: var(--colorPaletteDarkOrangeBorder1);
-  }
+:host([intent='error']) {
+  background-color: var(--colorPaletteRedBackground1);
+  border-color: var(--colorPaletteRedBorder1);
+}
 
-  :host([intent='error']) {
-    background-color: var(--colorPaletteRedBackground1);
-    border-color: var(--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: var(--spacingVerticalMNudge);
+  padding-inline: var(--spacingHorizontalM);
+}
 
-  :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: var(--spacingVerticalMNudge);
-    padding-inline: var(--spacingHorizontalM);
-  }
+.content {
+  grid-area: body;
+  max-width: 520px;
+  padding-block: var(--spacingVerticalMNudge);
+  padding-inline: 0;
+}
 
-  .content {
-    grid-area: body;
-    max-width: 520px;
-    padding-block: var(--spacingVerticalMNudge);
-    padding-inline: 0;
-  }
+:host([layout='multiline']) .content {
+  padding: 0;
+}
 
-  :host([layout='multiline']) .content {
-    padding: 0;
-  }
+::slotted([slot='icon']) {
+  display: flex;
+  grid-area: icon;
+  flex-direction: column;
+  align-items: center;
+  color: var(--colorNeutralForeground3);
+  margin-inline-end: var(--spacingHorizontalS);
+}
 
-  ::slotted([slot='icon']) {
-    display: flex;
-    grid-area: icon;
-    flex-direction: column;
-    align-items: center;
-    color: var(--colorNeutralForeground3);
-    margin-inline-end: var(--spacingHorizontalS);
-  }
+:host([layout='multiline']) ::slotted([slot='icon']) {
+  align-items: start;
+  height: 100%;
+}
 
-  :host([layout='multiline']) ::slotted([slot='icon']) {
-    align-items: start;
-    height: 100%;
-  }
+::slotted([slot='dismiss']) {
+  grid-area: dismiss;
+}
 
-  ::slotted([slot='dismiss']) {
-    grid-area: dismiss;
-  }
+.actions {
+  grid-area: actions;
+  display: flex;
+  justify-self: end;
+  margin-inline-end: var(--spacingHorizontalS);
+  gap: var(--spacingHorizontalS);
+}
 
-  .actions {
-    grid-area: actions;
-    display: flex;
-    justify-self: end;
-    margin-inline-end: var(--spacingHorizontalS);
-    gap: var(--spacingHorizontalS);
-  }
+:host([layout='multiline']) .actions {
+  margin-block-start: var(--spacingVerticalMNudge);
+  margin-inline-end: 0;
+}
 
-  :host([layout='multiline']) .actions {
-    margin-block-start: var(--spacingVerticalMNudge);
-    margin-inline-end: 0;
-  }
+:host([layout='multiline']) ::slotted([slot='dismiss']) {
+  align-items: start;
+  height: 100%;
+  padding-block-start: var(--spacingVerticalS);
+}
 
-  :host([layout='multiline']) ::slotted([slot='dismiss']) {
-    align-items: start;
-    height: 100%;
-    padding-block-start: var(--spacingVerticalS);
-  }
-
-  ::slotted(*) {
-    font-size: inherit;
-  }
+::slotted(*) {
+  font-size: inherit;
+}

package/dist/esm/message-bar/message-bar.template.html

@@ -1,8 +1,13 @@
-<f-template name="fluent-message-bar" shadowrootmode="open"><template>{{styles}}<slot name="icon"></slot>
+<f-template name="fluent-message-bar" shadowrootmode="open">
+  <template>
+    {{styles}}
+    <slot name="icon"></slot>
     <div class="content">
       <slot></slot>
     </div>
     <div class="actions">
       <slot name="actions"></slot>
     </div>
-    <slot name="dismiss"></slot></template></f-template>
+    <slot name="dismiss"></slot>
+  </template>
+</f-template>