From f0db23b7778683065cd858a8cf673228ce02b1a8 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Thu, 13 Jun 2024 17:24:40 -0400
Subject: [PATCH 01/34] Adds MessageBar component to FluentUI

---
 ...-6860ddb3-4e1b-4679-9c94-1dfcf4bf40ca.json |   7 +
 packages/web-components/package.json          |   4 +
 packages/web-components/src/index-rollup.ts   |   1 +
 .../web-components/src/message-bar/define.ts  |   4 +
 .../web-components/src/message-bar/index.ts   |   5 +
 .../src/message-bar/message-bar.definition.ts |  20 +++
 .../message-bar.integration.spec.ts           |  83 +++++++++
 .../src/message-bar/message-bar.options.ts    |  47 ++++++
 .../src/message-bar/message-bar.stories.ts    | 158 ++++++++++++++++++
 .../src/message-bar/message-bar.styles.ts     | 132 +++++++++++++++
 .../src/message-bar/message-bar.template.ts   |  77 +++++++++
 .../src/message-bar/message-bar.ts            |  70 ++++++++
 12 files changed, 608 insertions(+)
 create mode 100644 change/@fluentui-web-components-6860ddb3-4e1b-4679-9c94-1dfcf4bf40ca.json
 create mode 100644 packages/web-components/src/message-bar/define.ts
 create mode 100644 packages/web-components/src/message-bar/index.ts
 create mode 100644 packages/web-components/src/message-bar/message-bar.definition.ts
 create mode 100644 packages/web-components/src/message-bar/message-bar.integration.spec.ts
 create mode 100644 packages/web-components/src/message-bar/message-bar.options.ts
 create mode 100644 packages/web-components/src/message-bar/message-bar.stories.ts
 create mode 100644 packages/web-components/src/message-bar/message-bar.styles.ts
 create mode 100644 packages/web-components/src/message-bar/message-bar.template.ts
 create mode 100644 packages/web-components/src/message-bar/message-bar.ts

diff --git a/change/@fluentui-web-components-6860ddb3-4e1b-4679-9c94-1dfcf4bf40ca.json b/change/@fluentui-web-components-6860ddb3-4e1b-4679-9c94-1dfcf4bf40ca.json
new file mode 100644
index 0000000000000..4510f8e474210
--- /dev/null
+++ b/change/@fluentui-web-components-6860ddb3-4e1b-4679-9c94-1dfcf4bf40ca.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adds MessageBar component to Fluent Web Components",
+  "packageName": "@fluentui/web-components",
+  "email": "ryan@ryanmerrill.net",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index 0cebe6ce78642..9e9797299f180 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -106,6 +106,10 @@
       "types": "./dist/dts/menu-item/define.d.ts",
       "default": "./dist/esm/menu-item/define.js"
     },
+    "./message-bar.js": {
+      "types": "./dist/dts/message-bar/define.d.ts",
+      "default": "./dist/esm/message-bar/define.js"
+    },
     "./progress-bar.js": {
       "types": "./dist/dts/progress-bar/define.d.ts",
       "default": "./dist/esm/progress-bar/define.js"
diff --git a/packages/web-components/src/index-rollup.ts b/packages/web-components/src/index-rollup.ts
index a56cc040003ff..1e9e779465956 100644
--- a/packages/web-components/src/index-rollup.ts
+++ b/packages/web-components/src/index-rollup.ts
@@ -18,6 +18,7 @@ import './menu-button/define.js';
 import './menu-item/define.js';
 import './menu-list/define.js';
 import './menu/define.js';
+import './message-bar/define.js';
 import './progress-bar/define.js';
 import './radio-group/define.js';
 import './radio/define.js';
diff --git a/packages/web-components/src/message-bar/define.ts b/packages/web-components/src/message-bar/define.ts
new file mode 100644
index 0000000000000..ef07193254fd2
--- /dev/null
+++ b/packages/web-components/src/message-bar/define.ts
@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './message-bar.definition.js';
+
+definition.define(FluentDesignSystem.registry);
diff --git a/packages/web-components/src/message-bar/index.ts b/packages/web-components/src/message-bar/index.ts
new file mode 100644
index 0000000000000..37ea124ca6325
--- /dev/null
+++ b/packages/web-components/src/message-bar/index.ts
@@ -0,0 +1,5 @@
+export { definition as MessageBarDefinition } from './message-bar.definition.js';
+export { MessageBar } from './message-bar.js';
+export { MessageBarIntent, MessageBarLayout, MessageBarPoliteness, MessageBarShape } from './message-bar.options.js';
+export { styles as MessageBarStyles } from './message-bar.styles.js';
+export { template as MessageBarTemplate } from './message-bar.template.js';
diff --git a/packages/web-components/src/message-bar/message-bar.definition.ts b/packages/web-components/src/message-bar/message-bar.definition.ts
new file mode 100644
index 0000000000000..e58c7c39e231d
--- /dev/null
+++ b/packages/web-components/src/message-bar/message-bar.definition.ts
@@ -0,0 +1,20 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { MessageBar } from './message-bar.js';
+import { styles } from './message-bar.styles.js';
+import { template } from './message-bar.template.js';
+
+/**
+ * The Fluent MessageBar Element definition.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-message-bar>`
+ */
+export const definition = MessageBar.compose({
+  name: `${FluentDesignSystem.prefix}-message-bar`,
+  template,
+  styles,
+  shadowOptions: {
+    mode: FluentDesignSystem.shadowRootMode,
+  },
+});
diff --git a/packages/web-components/src/message-bar/message-bar.integration.spec.ts b/packages/web-components/src/message-bar/message-bar.integration.spec.ts
new file mode 100644
index 0000000000000..b9cbce6cacf8f
--- /dev/null
+++ b/packages/web-components/src/message-bar/message-bar.integration.spec.ts
@@ -0,0 +1,83 @@
+import { expect, test } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
+
+test.describe('MessageBar component', () => {
+  const componentID = 'components-messagebar--message-bar';
+  let page: Page;
+  let element: Locator;
+
+  test.beforeAll(async ({ browser }) => {
+    const context = await browser.newContext();
+    page = await context.newPage();
+    root = page.locator('#root');
+    element = page.locator('fluent-message-bar');
+    await page.goto(`iframe.html?id=${componentID}`);
+  });
+
+  test.afterAll(async () => {
+    await page.close();
+  });
+
+  test('should render with default attributes', async () => {
+    const role = await element.getAttribute('role');
+    const shape = await element.getAttribute('shape');
+    const layout = await element.getAttribute('layout');
+    const intent = await element.getAttribute('intent');
+    const politeness = await element.getAttribute('aria-live');
+
+    expect(role).toEqual('status');
+    expect(shape).toEqual('rounded');
+    expect(layout).toEqual('singleline');
+    expect(intent).toEqual('info');
+    expect(politeness).toEqual('polite');
+  });
+
+  test('should have correct `aria-labelledby` attribute', async () => {
+    const attribute = await element.getAttribute('aria-labelledby');
+    expect(attribute).toBeNull();
+  });
+
+  test('on dismissing the MessageBar, it should emit `dismiss` event', async () => {
+    const [dismissed] = await Promise.all([
+      element.evaluate(el => {
+        return new Promise(resolve => {
+          el.addEventListener('dismiss', () => resolve(true), {
+            once: true,
+          });
+          (el as any).dismissMessageBar();
+        });
+      }),
+    ]);
+    expect(dismissed).toBeTruthy();
+  });
+
+  test('when the `layout` attribute is changed, it should reflect the new value', async () => {
+    await element.evaluate(el => el.setAttribute('layout', 'multiline'));
+    const layout = await element.getAttribute('layout');
+    expect(layout).toEqual('multiline');
+  });
+
+  test('when the `intent` attribute is changed, it should reflect the new value', async () => {
+    await element.evaluate(el => el.setAttribute('intent', 'warning'));
+    const intent = await element.getAttribute('intent');
+    expect(intent).toEqual('warning');
+  });
+
+  test('when the `shape` attribute is changed, it should reflect the new value', async () => {
+    await element.evaluate(el => el.setAttribute('shape', 'rectangular'));
+    const shape = await element.getAttribute('shape');
+    expect(shape).toEqual('rectangular');
+  });
+
+  test('when the `politeness` attribute is changed, it should reflect the new value', async () => {
+    await element.evaluate(el => el.setAttribute('politeness', 'polite'));
+    const politeness = await element.getAttribute('politeness');
+    expect(politeness).toEqual('polite');
+  });
+
+  test('when the `politeness` attribute is set, it should reflect the value in the aria-live attribute', async () => {
+    await element.evaluate(el => el.setAttribute('politeness', 'assertive'));
+    const ariaLive = await element.getAttribute('aria-live');
+    expect(ariaLive).toEqual('assertive');
+  });
+});
diff --git a/packages/web-components/src/message-bar/message-bar.options.ts b/packages/web-components/src/message-bar/message-bar.options.ts
new file mode 100644
index 0000000000000..be04893203b71
--- /dev/null
+++ b/packages/web-components/src/message-bar/message-bar.options.ts
@@ -0,0 +1,47 @@
+import type { ValuesOf } from '../utils/typings.js';
+
+/**
+ * @public
+ * The `layout` variations for the MessageBar component.
+ */
+export const MessageBarLayout = {
+  multiline: 'multiline',
+  singleline: 'singleline',
+} as const;
+
+export type MessageBarLayout = ValuesOf<typeof MessageBarLayout>;
+
+/**
+ * @public
+ * The `shape` variations for the MessageBar component.
+ */
+export const MessageBarShape = {
+  rounded: 'rounded',
+  square: 'square',
+} as const;
+
+export type MessageBarShape = ValuesOf<typeof MessageBarShape>;
+
+/**
+ * @public
+ * The `intent` variations for the MessageBar component.
+ */
+export const MessageBarIntent = {
+  success: 'success',
+  warning: 'warning',
+  error: 'error',
+  info: 'info',
+} as const;
+
+export type MessageBarIntent = ValuesOf<typeof MessageBarIntent>;
+
+/**
+ * @public
+ * The `politeness` variations for the MessageBar component.
+ */
+export const MessageBarPoliteness = {
+  polite: 'polite',
+  assertive: 'assertive',
+} as const;
+
+export type MessageBarPoliteness = ValuesOf<typeof MessageBarPoliteness>;
diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
new file mode 100644
index 0000000000000..6d50cae16b9ed
--- /dev/null
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -0,0 +1,158 @@
+import { html } from '@microsoft/fast-element';
+import type { Args, Meta } from '@storybook/html';
+import { renderComponent } from '../helpers.stories.js';
+import { MessageBar as FluentMessageBar } from './message-bar.js';
+import { MessageBarIntent, MessageBarLayout, MessageBarPoliteness, MessageBarShape } from './message-bar.options.js';
+import './define';
+
+type MessageBarStoryArgs = Args & FluentMessageBar;
+type MessageBarStoryMeta = Meta<MessageBarStoryArgs>;
+
+const dismissed20Regular = html`
+  <svg
+    fill="currentColor"
+    aria-hidden="true"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+`;
+
+const storyTemplate = html<MessageBarStoryArgs>`
+  <fluent-message-bar
+    shape="${x => x.shape}"
+    layout="${x => x.layout}"
+    intent="${x => x.intent}"
+    politeness="${x => x.politeness}"
+  >
+    ${x => x.content}
+    <div class="actions" slot="actions">
+      <fluent-button size="small">Action</fluent-button>
+      <fluent-button size="small">Action</fluent-button>
+    </div>
+    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+  </fluent-message-bar>
+`;
+
+export default {
+  title: 'Components/MessageBar',
+  args: {
+    content: 'This is a message bar that provides information to the user.',
+    shape: MessageBarShape.rounded,
+    layout: MessageBarLayout.singleline,
+    intent: MessageBarIntent.info,
+    politeness: MessageBarPoliteness.polite,
+  },
+  argTypes: {
+    content: {
+      description: 'MessageBar content',
+      control: { type: 'text' },
+    },
+    shape: {
+      description: 'MessageBar shape',
+      control: { type: 'select' },
+      options: Object.values(MessageBarShape),
+    },
+    layout: {
+      description: 'MessageBar layout',
+      control: { type: 'select' },
+      options: Object.values(MessageBarLayout),
+    },
+    intent: {
+      description: 'MessageBar intent',
+      control: { type: 'select' },
+      options: Object.values(MessageBarIntent),
+    },
+    politeness: {
+      description: 'MessageBar politeness',
+      control: { type: 'select' },
+      options: Object.values(MessageBarPoliteness),
+    },
+  },
+} as MessageBarStoryMeta;
+
+export const MessageBar = renderComponent(storyTemplate).bind({}) as any;
+
+export const Shape = renderComponent(html<MessageBarStoryArgs>`
+  <fluent-message-bar shape="rounded">
+    rounded
+    <div class="actions" slot="actions">
+      <fluent-button size="small">Action</fluent-button>
+      <fluent-button size="small">Action</fluent-button>
+    </div>
+    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+  </fluent-message-bar>
+  <br />
+  <fluent-message-bar shape="square">
+    square
+    <div class="actions" slot="actions">
+      <fluent-button size="small">Action</fluent-button>
+      <fluent-button size="small">Action</fluent-button>
+    </div>
+    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+  </fluent-message-bar>
+`);
+
+export const Layout = renderComponent(html<MessageBarStoryArgs>`
+  <fluent-message-bar layout="singleline">
+    singleline
+    <div class="actions" slot="actions">
+      <fluent-button size="small">Action</fluent-button>
+      <fluent-button size="small">Action</fluent-button>
+    </div>
+    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+  </fluent-message-bar>
+  <br />
+  <fluent-message-bar layout="multiline">
+    multiline
+    <div class="actions" slot="actions">
+      <fluent-button size="small">Action</fluent-button>
+      <fluent-button size="small">Action</fluent-button>
+    </div>
+    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+  </fluent-message-bar>
+`);
+
+export const Intent = renderComponent(html<MessageBarStoryArgs>`
+  <fluent-message-bar intent="info">
+    info
+    <div class="actions" slot="actions">
+      <fluent-button size="small">Action</fluent-button>
+      <fluent-button size="small">Action</fluent-button>
+    </div>
+    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+  </fluent-message-bar>
+  <br />
+  <fluent-message-bar intent="warning">
+    warning
+    <div class="actions" slot="actions">
+      <fluent-button size="small">Action</fluent-button>
+      <fluent-button size="small">Action</fluent-button>
+    </div>
+    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+  </fluent-message-bar>
+  <br />
+  <fluent-message-bar intent="success">
+    success
+    <div class="actions" slot="actions">
+      <fluent-button size="small">Action</fluent-button>
+      <fluent-button size="small">Action</fluent-button>
+    </div>
+    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+  </fluent-message-bar>
+  <br />
+  <fluent-message-bar intent="error">
+    error
+    <div class="actions" slot="actions">
+      <fluent-button size="small">Action</fluent-button>
+      <fluent-button size="small">Action</fluent-button>
+    </div>
+    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+  </fluent-message-bar>
+`);
diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
new file mode 100644
index 0000000000000..231c545a8e59a
--- /dev/null
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -0,0 +1,132 @@
+import type { ElementStyles } from '@microsoft/fast-element';
+import { css } from '@microsoft/fast-element';
+import {
+  borderRadiusMedium,
+  colorNeutralBackground3,
+  colorNeutralForeground3,
+  colorNeutralStroke1,
+  colorPaletteDarkOrangeBackground1,
+  colorPaletteDarkOrangeBorder1,
+  colorPaletteDarkOrangeForeground1,
+  colorPaletteGreenBackground1,
+  colorPaletteGreenBorder1,
+  colorPaletteGreenForeground1,
+  colorPaletteRedBackground1,
+  colorPaletteRedBorder1,
+  colorPaletteRedForeground1,
+  fontFamilyBase,
+  fontSizeBase200,
+  lineHeightBase200,
+  spacingHorizontalM,
+  spacingHorizontalS,
+  spacingVerticalMNudge,
+} from '../theme/design-tokens.js';
+
+/**
+ * Styles for the MessageBar component.
+ *
+ * @public
+ */
+export const styles: ElementStyles = 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: 0 ${spacingHorizontalM};
+    border-radius: ${borderRadiusMedium};
+    min-height: 36px;
+    align-items: center;
+    grid-template: 'icon body actions close' / auto 1fr auto auto;
+  }
+
+  :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 close'
+      'actions actions actions';
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto auto;
+    padding: ${spacingVerticalMNudge} ${spacingHorizontalM};
+  }
+
+  .icon {
+    grid-area: icon;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: ${colorNeutralForeground3};
+    margin-right: ${spacingHorizontalS};
+  }
+
+  :host([intent='success']) .icon {
+    color: ${colorPaletteGreenForeground1};
+  }
+
+  :host([intent='warning']) .icon {
+    color: ${colorPaletteDarkOrangeForeground1};
+  }
+
+  :host([intent='error']) .icon {
+    color: ${colorPaletteRedForeground1};
+  }
+
+  .content {
+    max-width: 520px;
+    grid-area: body;
+    padding: ${spacingVerticalMNudge} 0;
+  }
+
+  :host([layout='multiline']) .content {
+    padding: 0;
+  }
+
+  .close {
+    grid-area: close;
+    display: flex;
+    justify-content: end;
+  }
+
+  :host([layout='multiline']) .close {
+    flex-direction: column;
+    justify-content: start;
+    align-items: start;
+  }
+
+  .actions {
+    grid-area: actions;
+    display: flex;
+    justify-content: end;
+    margin-right: ${spacingHorizontalS};
+  }
+
+  :host([layout='multiline']) .actions {
+    margin-top: ${spacingVerticalMNudge};
+  }
+
+  ::slotted(*) {
+    font-size: unset;
+  }
+`;
diff --git a/packages/web-components/src/message-bar/message-bar.template.ts b/packages/web-components/src/message-bar/message-bar.template.ts
new file mode 100644
index 0000000000000..a0e19de215b09
--- /dev/null
+++ b/packages/web-components/src/message-bar/message-bar.template.ts
@@ -0,0 +1,77 @@
+import { ElementViewTemplate, html, when } from '@microsoft/fast-element';
+import type { MessageBar } from './message-bar.js';
+
+const infoIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path
+      d="M18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10ZM9.50806 8.91012C9.55039 8.67687 9.75454 8.49999 10 8.49999C10.2455 8.49999 10.4496 8.67687 10.4919 8.91012L10.5 8.99999V13.5021L10.4919 13.592C10.4496 13.8253 10.2455 14.0021 10 14.0021C9.75454 14.0021 9.55039 13.8253 9.50806 13.592L9.5 13.5021V8.99999L9.50806 8.91012ZM9.25 6.74999C9.25 6.33578 9.58579 5.99999 10 5.99999C10.4142 5.99999 10.75 6.33578 10.75 6.74999C10.75 7.16421 10.4142 7.49999 10 7.49999C9.58579 7.49999 9.25 7.16421 9.25 6.74999Z"
+      fill="currentColor"
+    />
+  </svg>
+`;
+
+const warningIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path
+      d="M8.68149 2.78544C9.24892 1.73813 10.752 1.73821 11.3193 2.78557L17.8198 14.7865C18.3612 15.786 17.6375 17.0009 16.5009 17.0009H3.4982C2.36147 17.0009 1.63783 15.7858 2.17934 14.7864L8.68149 2.78544ZM10.5 7.5C10.5 7.22386 10.2761 7 10 7C9.72386 7 9.5 7.22386 9.5 7.5V11.5C9.5 11.7761 9.72386 12 10 12C10.2761 12 10.5 11.7761 10.5 11.5V7.5ZM10.75 13.75C10.75 13.3358 10.4142 13 10 13C9.58579 13 9.25 13.3358 9.25 13.75C9.25 14.1642 9.58579 14.5 10 14.5C10.4142 14.5 10.75 14.1642 10.75 13.75Z"
+      fill="currentColor"
+    />
+  </svg>
+`;
+
+const successIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path
+      d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM13.3584 7.64645C13.1849 7.47288 12.9154 7.4536 12.7206 7.58859L12.6513 7.64645L9 11.298L7.35355 9.65131L7.28431 9.59346C7.08944 9.45846 6.82001 9.47775 6.64645 9.65131C6.47288 9.82488 6.4536 10.0943 6.58859 10.2892L6.64645 10.3584L8.64645 12.3584L8.71569 12.4163C8.8862 12.5344 9.1138 12.5344 9.28431 12.4163L9.35355 12.3584L13.3584 8.35355L13.4163 8.28431C13.5513 8.08944 13.532 7.82001 13.3584 7.64645Z"
+      fill="currentColor"
+    />
+  </svg>
+`;
+
+const errorIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path
+      d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 12.5C9.58579 12.5 9.25 12.8358 9.25 13.25C9.25 13.6642 9.58579 14 10 14C10.4142 14 10.75 13.6642 10.75 13.25C10.75 12.8358 10.4142 12.5 10 12.5ZM10 6C9.75454 6 9.55039 6.17688 9.50806 6.41012L9.5 6.5V11L9.50806 11.0899C9.55039 11.3231 9.75454 11.5 10 11.5C10.2455 11.5 10.4496 11.3231 10.4919 11.0899L10.5 11V6.5L10.4919 6.41012C10.4496 6.17688 10.2455 6 10 6Z"
+      fill="currentColor"
+    />
+  </svg>
+`;
+
+/**
+ * Generates a template for the MessageBar component.
+ * @public
+ * @param {MessageBar} T - The type of the MessageBar.
+ * @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
+ */
+export function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<T> {
+  return html<T>`
+    <template
+      role="status"
+      layout="${x => x.layout}"
+      shape="${x => x.shape}"
+      intent="${x => x.intent}"
+      aria-live="${x => x.politeness}"
+      aria-labelledby="${x => x.ariaLabelledBy}"
+    >
+      <span class="icon">
+        ${when(x => x.intent === 'success', successIcon)} ${when(x => x.intent === 'error', errorIcon)}
+        ${when(x => x.intent === 'warning', warningIcon)} ${when(x => x.intent === 'info', infoIcon)}
+      </span>
+      <div class="content">
+        <slot></slot>
+      </div>
+      <div class="actions">
+        <slot name="actions"></slot>
+      </div>
+      <div class="close">
+        <slot name="close"></slot>
+      </div>
+    </template>
+  `;
+}
+
+/**
+ * The template for the MessageBar component.
+ * @type {ElementViewTemplate<MessageBar>}
+ */
+export const template: ElementViewTemplate<MessageBar> = messageBarTemplate();
diff --git a/packages/web-components/src/message-bar/message-bar.ts b/packages/web-components/src/message-bar/message-bar.ts
new file mode 100644
index 0000000000000..7847732ad9e1e
--- /dev/null
+++ b/packages/web-components/src/message-bar/message-bar.ts
@@ -0,0 +1,70 @@
+import { attr, FASTElement } from '@microsoft/fast-element';
+import { MessageBarIntent, MessageBarLayout, MessageBarPoliteness, MessageBarShape } from './message-bar.options.js';
+
+/**
+ * A Message Bar Custom HTML Element.
+ *
+ * @slot actions - Content that can be provided for the actions
+ * @slot close - Content that can be provided for the close button
+ * @slot - The default slot for the content
+ * @public
+ */
+export class MessageBar extends FASTElement {
+  /**
+   * Sets the aria-labelledby attribute of the control.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: `aria-labelledby`
+   */
+  @attr({ attribute: 'aria-labelledby' })
+  ariaLabelledBy: string | null = null;
+
+  /**
+   * Sets the shape of the control.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: `shape`
+   */
+  @attr
+  shape: MessageBarShape = 'rounded';
+
+  /**
+   * Sets the layout of the control.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: `layout`
+   */
+  @attr
+  layout: MessageBarLayout = 'singleline';
+
+  /**
+   * Sets the intent of the control.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: `intent`
+   */
+  @attr
+  intent: MessageBarIntent = 'info';
+
+  /**
+   * Sets the politeness of the control.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: `politeness`
+   */
+  @attr
+  politeness: MessageBarPoliteness = 'polite';
+
+  /**
+   * @public
+   * Method to emit a `dismiss` event when the message bar is dismissed
+   */
+  public dismissMessageBar = () => {
+    this.$emit('dismiss', {});
+  };
+}

From cc0a9dff508ec13d24f247f9ce8e807ad8437701 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Fri, 14 Jun 2024 15:07:54 -0400
Subject: [PATCH 02/34] Udpates slots for rendering status icons in MessageBar

---
 .../src/message-bar/message-bar.styles.ts     | 20 ++++--
 .../src/message-bar/message-bar.template.ts   | 72 ++++++++++++-------
 .../src/message-bar/message-bar.ts            | 25 +++++++
 3 files changed, 85 insertions(+), 32 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index 231c545a8e59a..ff72e7658f7eb 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -72,24 +72,34 @@ export const styles: ElementStyles = css`
     padding: ${spacingVerticalMNudge} ${spacingHorizontalM};
   }
 
-  .icon {
+  .info,
+  .warning,
+  .error,
+  .success {
+    display: none;
     grid-area: icon;
-    display: flex;
     flex-direction: column;
     align-items: center;
     color: ${colorNeutralForeground3};
     margin-right: ${spacingHorizontalS};
   }
 
-  :host([intent='success']) .icon {
+  :host([intent='info']) .info,
+  :host([intent='warning']) .warning,
+  :host([intent='error']) .error,
+  :host([intent='success']) .success {
+    display: flex;
+  }
+
+  :host([intent='success']) .success {
     color: ${colorPaletteGreenForeground1};
   }
 
-  :host([intent='warning']) .icon {
+  :host([intent='warning']) .warning {
     color: ${colorPaletteDarkOrangeForeground1};
   }
 
-  :host([intent='error']) .icon {
+  :host([intent='error']) .error {
     color: ${colorPaletteRedForeground1};
   }
 
diff --git a/packages/web-components/src/message-bar/message-bar.template.ts b/packages/web-components/src/message-bar/message-bar.template.ts
index a0e19de215b09..be130e094da6e 100644
--- a/packages/web-components/src/message-bar/message-bar.template.ts
+++ b/packages/web-components/src/message-bar/message-bar.template.ts
@@ -1,41 +1,38 @@
 import { ElementViewTemplate, html, when } from '@microsoft/fast-element';
-import type { MessageBar } from './message-bar.js';
+import { staticallyCompose } from '../utils/index.js';
+import type { MessageBar, MessageBarOptions } from './message-bar.js';
 
-const infoIcon = html`
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+const infoIcon =
+  html.partial(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
     <path
       d="M18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10ZM9.50806 8.91012C9.55039 8.67687 9.75454 8.49999 10 8.49999C10.2455 8.49999 10.4496 8.67687 10.4919 8.91012L10.5 8.99999V13.5021L10.4919 13.592C10.4496 13.8253 10.2455 14.0021 10 14.0021C9.75454 14.0021 9.55039 13.8253 9.50806 13.592L9.5 13.5021V8.99999L9.50806 8.91012ZM9.25 6.74999C9.25 6.33578 9.58579 5.99999 10 5.99999C10.4142 5.99999 10.75 6.33578 10.75 6.74999C10.75 7.16421 10.4142 7.49999 10 7.49999C9.58579 7.49999 9.25 7.16421 9.25 6.74999Z"
       fill="currentColor"
     />
-  </svg>
-`;
+  </svg>`);
 
-const warningIcon = html`
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+const warningIcon =
+  html.partial(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
     <path
       d="M8.68149 2.78544C9.24892 1.73813 10.752 1.73821 11.3193 2.78557L17.8198 14.7865C18.3612 15.786 17.6375 17.0009 16.5009 17.0009H3.4982C2.36147 17.0009 1.63783 15.7858 2.17934 14.7864L8.68149 2.78544ZM10.5 7.5C10.5 7.22386 10.2761 7 10 7C9.72386 7 9.5 7.22386 9.5 7.5V11.5C9.5 11.7761 9.72386 12 10 12C10.2761 12 10.5 11.7761 10.5 11.5V7.5ZM10.75 13.75C10.75 13.3358 10.4142 13 10 13C9.58579 13 9.25 13.3358 9.25 13.75C9.25 14.1642 9.58579 14.5 10 14.5C10.4142 14.5 10.75 14.1642 10.75 13.75Z"
       fill="currentColor"
     />
-  </svg>
-`;
+  </svg>`);
 
-const successIcon = html`
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+const successIcon =
+  html.partial(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
     <path
       d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM13.3584 7.64645C13.1849 7.47288 12.9154 7.4536 12.7206 7.58859L12.6513 7.64645L9 11.298L7.35355 9.65131L7.28431 9.59346C7.08944 9.45846 6.82001 9.47775 6.64645 9.65131C6.47288 9.82488 6.4536 10.0943 6.58859 10.2892L6.64645 10.3584L8.64645 12.3584L8.71569 12.4163C8.8862 12.5344 9.1138 12.5344 9.28431 12.4163L9.35355 12.3584L13.3584 8.35355L13.4163 8.28431C13.5513 8.08944 13.532 7.82001 13.3584 7.64645Z"
       fill="currentColor"
     />
-  </svg>
-`;
+  </svg>`);
 
-const errorIcon = html`
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+const errorIcon =
+  html.partial(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
     <path
       d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 12.5C9.58579 12.5 9.25 12.8358 9.25 13.25C9.25 13.6642 9.58579 14 10 14C10.4142 14 10.75 13.6642 10.75 13.25C10.75 12.8358 10.4142 12.5 10 12.5ZM10 6C9.75454 6 9.55039 6.17688 9.50806 6.41012L9.5 6.5V11L9.50806 11.0899C9.55039 11.3231 9.75454 11.5 10 11.5C10.2455 11.5 10.4496 11.3231 10.4919 11.0899L10.5 11V6.5L10.4919 6.41012C10.4496 6.17688 10.2455 6 10 6Z"
       fill="currentColor"
     />
-  </svg>
-`;
+  </svg>`);
 
 /**
  * Generates a template for the MessageBar component.
@@ -43,19 +40,35 @@ const errorIcon = html`
  * @param {MessageBar} T - The type of the MessageBar.
  * @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
  */
-export function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<T> {
+export function messageBarTemplate<T extends MessageBar>(options: MessageBarOptions): ElementViewTemplate<T> {
   return html<T>`
     <template
       role="status"
-      layout="${x => x.layout}"
-      shape="${x => x.shape}"
-      intent="${x => x.intent}"
-      aria-live="${x => x.politeness}"
-      aria-labelledby="${x => x.ariaLabelledBy}"
+      layout="${(x: T) => x.layout}"
+      shape="${(x: T) => x.shape}"
+      intent="${(x: T) => x.intent}"
+      aria-live="${(x: T) => x.politeness}"
+      aria-labelledby="${(x: T) => x.ariaLabelledBy}"
     >
-      <span class="icon">
-        ${when(x => x.intent === 'success', successIcon)} ${when(x => x.intent === 'error', errorIcon)}
-        ${when(x => x.intent === 'warning', warningIcon)} ${when(x => x.intent === 'info', infoIcon)}
+      <span class="info">
+        <slot name="info-icon">
+          ${staticallyCompose(options.infoIcon)}
+        </slot>
+      </span>
+      <span class="warning">
+        <slot name="warning-icon">
+          ${staticallyCompose(options.warningIcon)}
+        </slot>
+      </span>
+      <span class="error">
+        <slot name="error-icon">
+          ${staticallyCompose(options.errorIcon)}
+        </span>
+      </span>
+      <span class="success">
+        <slot name="success-icon">
+          ${staticallyCompose(options.successIcon)}</span>
+        </slot>
       </span>
       <div class="content">
         <slot></slot>
@@ -74,4 +87,9 @@ export function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<
  * The template for the MessageBar component.
  * @type {ElementViewTemplate<MessageBar>}
  */
-export const template: ElementViewTemplate<MessageBar> = messageBarTemplate();
+export const template: ElementViewTemplate<MessageBar> = messageBarTemplate({
+  infoIcon: infoIcon,
+  errorIcon: errorIcon,
+  warningIcon: warningIcon,
+  successIcon: successIcon,
+});
diff --git a/packages/web-components/src/message-bar/message-bar.ts b/packages/web-components/src/message-bar/message-bar.ts
index 7847732ad9e1e..d4835a5cbf3b0 100644
--- a/packages/web-components/src/message-bar/message-bar.ts
+++ b/packages/web-components/src/message-bar/message-bar.ts
@@ -1,6 +1,21 @@
 import { attr, FASTElement } from '@microsoft/fast-element';
+import type { StaticallyComposableHTML } from '../utils/index.js';
+import { StartEnd } from '../patterns/index.js';
+import type { StartEndOptions } from '../patterns/index.js';
+import { applyMixins } from '../utils/apply-mixins.js';
 import { MessageBarIntent, MessageBarLayout, MessageBarPoliteness, MessageBarShape } from './message-bar.options.js';
 
+/**
+ * MessageBar configuration options
+ * @public
+ */
+export type MessageBarOptions = StartEndOptions<MessageBar> & {
+  infoIcon?: StaticallyComposableHTML<MessageBar>;
+  errorIcon?: StaticallyComposableHTML<MessageBar>;
+  warningIcon?: StaticallyComposableHTML<MessageBar>;
+  successIcon?: StaticallyComposableHTML<MessageBar>;
+};
+
 /**
  * A Message Bar Custom HTML Element.
  *
@@ -68,3 +83,13 @@ export class MessageBar extends FASTElement {
     this.$emit('dismiss', {});
   };
 }
+
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+export interface MessageBar extends StartEnd {}
+applyMixins(MessageBar, StartEnd);

From 147d1ca63ab288696b8df9ed74453395cb10330f Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Fri, 14 Jun 2024 15:12:18 -0400
Subject: [PATCH 03/34] More updates to the template

---
 .../web-components/src/message-bar/message-bar.template.ts     | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.template.ts b/packages/web-components/src/message-bar/message-bar.template.ts
index be130e094da6e..13156cbd4eaf0 100644
--- a/packages/web-components/src/message-bar/message-bar.template.ts
+++ b/packages/web-components/src/message-bar/message-bar.template.ts
@@ -44,9 +44,6 @@ export function messageBarTemplate<T extends MessageBar>(options: MessageBarOpti
   return html<T>`
     <template
       role="status"
-      layout="${(x: T) => x.layout}"
-      shape="${(x: T) => x.shape}"
-      intent="${(x: T) => x.intent}"
       aria-live="${(x: T) => x.politeness}"
       aria-labelledby="${(x: T) => x.ariaLabelledBy}"
     >

From e93c76c3d315efef2ed773ba0df632fa25542938 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Fri, 14 Jun 2024 15:40:16 -0400
Subject: [PATCH 04/34] Adds ElementInternals for role on MessageBar

---
 .../src/message-bar/message-bar.template.ts   |  2 --
 .../src/message-bar/message-bar.ts            | 22 ++++++++++---------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.template.ts b/packages/web-components/src/message-bar/message-bar.template.ts
index 13156cbd4eaf0..0a955d2a34057 100644
--- a/packages/web-components/src/message-bar/message-bar.template.ts
+++ b/packages/web-components/src/message-bar/message-bar.template.ts
@@ -44,8 +44,6 @@ export function messageBarTemplate<T extends MessageBar>(options: MessageBarOpti
   return html<T>`
     <template
       role="status"
-      aria-live="${(x: T) => x.politeness}"
-      aria-labelledby="${(x: T) => x.ariaLabelledBy}"
     >
       <span class="info">
         <slot name="info-icon">
diff --git a/packages/web-components/src/message-bar/message-bar.ts b/packages/web-components/src/message-bar/message-bar.ts
index d4835a5cbf3b0..11f3c3e6c111a 100644
--- a/packages/web-components/src/message-bar/message-bar.ts
+++ b/packages/web-components/src/message-bar/message-bar.ts
@@ -25,16 +25,6 @@ export type MessageBarOptions = StartEndOptions<MessageBar> & {
  * @public
  */
 export class MessageBar extends FASTElement {
-  /**
-   * Sets the aria-labelledby attribute of the control.
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: `aria-labelledby`
-   */
-  @attr({ attribute: 'aria-labelledby' })
-  ariaLabelledBy: string | null = null;
-
   /**
    * Sets the shape of the control.
    *
@@ -75,6 +65,18 @@ export class MessageBar extends FASTElement {
   @attr
   politeness: MessageBarPoliteness = 'polite';
 
+  /**
+   * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+   *
+   * @internal
+   */
+  protected elementInternals: ElementInternals = this.attachInternals();
+
+  constructor() {
+    super();
+    this.elementInternals.role = 'status';
+  }
+
   /**
    * @public
    * Method to emit a `dismiss` event when the message bar is dismissed

From 54fa025ce1ba8caa7f9b5d13abe4f66092ff5146 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Fri, 14 Jun 2024 15:43:29 -0400
Subject: [PATCH 05/34] remove role=status from template

---
 .../web-components/src/message-bar/message-bar.template.ts    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.template.ts b/packages/web-components/src/message-bar/message-bar.template.ts
index 0a955d2a34057..1050e3a43cfa5 100644
--- a/packages/web-components/src/message-bar/message-bar.template.ts
+++ b/packages/web-components/src/message-bar/message-bar.template.ts
@@ -42,9 +42,7 @@ const errorIcon =
  */
 export function messageBarTemplate<T extends MessageBar>(options: MessageBarOptions): ElementViewTemplate<T> {
   return html<T>`
-    <template
-      role="status"
-    >
+    <template>
       <span class="info">
         <slot name="info-icon">
           ${staticallyCompose(options.infoIcon)}

From 94fde4bd3aee0b3ab2729bd298dd348c8d848fa2 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Fri, 14 Jun 2024 15:49:00 -0400
Subject: [PATCH 06/34] Adds message-bar benchmark file

---
 .../src/message-bar/message-bar.bench.ts            | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 packages/web-components/src/message-bar/message-bar.bench.ts

diff --git a/packages/web-components/src/message-bar/message-bar.bench.ts b/packages/web-components/src/message-bar/message-bar.bench.ts
new file mode 100644
index 0000000000000..9a69d83844a55
--- /dev/null
+++ b/packages/web-components/src/message-bar/message-bar.bench.ts
@@ -0,0 +1,13 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './message-bar.definition.js';
+
+definition.define(FluentDesignSystem.registry);
+
+const itemRenderer = () => {
+  const messageBar = document.createElement('fluent-message-bar');
+  messageBar.appendChild(document.createTextNode('message-bar'));
+  return messageBar;
+};
+
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

From 88eac7880fb4f5b6ae6331295804b6ea0e6bb4ce Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Fri, 14 Jun 2024 15:55:08 -0400
Subject: [PATCH 07/34] Removes politeness attribute

---
 .../web-components/src/message-bar/README.md  | 65 ++++++++++++-------
 .../message-bar.integration.spec.ts           | 14 ----
 .../src/message-bar/message-bar.options.ts    | 11 ----
 .../src/message-bar/message-bar.stories.ts    | 24 +++----
 .../src/message-bar/message-bar.ts            | 10 ---
 5 files changed, 53 insertions(+), 71 deletions(-)

diff --git a/packages/web-components/src/message-bar/README.md b/packages/web-components/src/message-bar/README.md
index 66e08d3a922b8..c7294bd2e7780 100644
--- a/packages/web-components/src/message-bar/README.md
+++ b/packages/web-components/src/message-bar/README.md
@@ -15,37 +15,54 @@ The Fabric WC3 MessageBar extends `FASTElement`
 ### Template
 
 ```html
-<template
-  role="status"
-  layout="${x => x.layout}"
-  shape="${x => x.shape}"
-  intent="${x => x.intent}"
-  aria-live="${x => x.politeness}"
-  aria-labelledby="${x => x.ariaLabelledby}"
->
-  <slot></slot>
-  <slot name="actions"></slot>
-  <slot name="close"></slot>
+<template>
+  <span class="info">
+    <slot name="info-icon">
+      ${staticallyCompose(options.infoIcon)}
+    </slot>
+  </span>
+  <span class="warning">
+    <slot name="warning-icon">
+      ${staticallyCompose(options.warningIcon)}
+    </slot>
+  </span>
+  <span class="error">
+    <slot name="error-icon">
+      ${staticallyCompose(options.errorIcon)}
+    </span>
+  </span>
+  <span class="success">
+    <slot name="success-icon">
+      ${staticallyCompose(options.successIcon)}</span>
+    </slot>
+  </span>
+  <div class="content">
+    <slot></slot>
+  </div>
+  <div class="actions">
+    <slot name="actions"></slot>
+  </div>
+  <div class="close">
+    <slot name="close"></slot>
+  </div>
 </template>
 ```
 
 ### **Variables**
 
-| Name                  | Type                               | Description                               |
-| --------------------- | ---------------------------------- | ----------------------------------------- |
-| `MessageBarLayout`    | `multiline` `singleline`           | How text flows within the MessageBar      |
-| `MessageBarShape`     | `rounded` `square`                 | Shapes for the MessageBar                 |
-| `MessageBarIntent`    | `success` `warning` `error` `info` | Intents for the MessageBar                |
-| `MessageBarPolitness` | `assertive` `polite`               | Sets the alert style for aria-live region |
+| Name               | Type                               | Description                          |
+| ------------------ | ---------------------------------- | ------------------------------------ |
+| `MessageBarLayout` | `multiline` `singleline`           | How text flows within the MessageBar |
+| `MessageBarShape`  | `rounded` `square`                 | Shapes for the MessageBar            |
+| `MessageBarIntent` | `success` `warning` `error` `info` | Intents for the MessageBar           |
 
 ### **Attributes**
 
-| Name         | Type                               | Default      | Description                                                                                                                        |
-| ------------ | ---------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `layout`     | `multiline` `singleline`           | `singleline` | Determines if the MessageBar should opt out of automatic reflow for applications that have an existing responsive design mechanism |
-| `shape`      | `square` `rounded`                 | `rounded`    | Determines the shape of the corners on the MessageBar                                                                              |
-| `intent`     | `success` `warning` `error` `info` | `info`       | Sets the intent type for the MessageBar                                                                                            |
-| `politeness` | `assertive` `polite`               | `polite`     | Sets the alert style for aria-live region                                                                                          |
+| Name     | Type                               | Default      | Description                                                                                                                        |
+| -------- | ---------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `layout` | `multiline` `singleline`           | `singleline` | Determines if the MessageBar should opt out of automatic reflow for applications that have an existing responsive design mechanism |
+| `shape`  | `square` `rounded`                 | `rounded`    | Determines the shape of the corners on the MessageBar                                                                              |
+| `intent` | `success` `warning` `error` `info` | `info`       | Sets the intent type for the MessageBar                                                                                            |
 
 ### **Events**
 
@@ -77,7 +94,7 @@ The Fabric WC3 MessageBar extends `FASTElement`
 
 - `aria-live`
 
-  - The `aria-live` attribute should be used to associate the MessageBar with the appropriate `aria-live` value to announce content changes to assistive technology devices. Corresponds to `politeness` attribute.
+  - The `aria-live` attribute should be used to associate the MessageBar with the appropriate `aria-live` value to announce content changes to assistive technology devices.
 
 - `aria-labelledby`
 
diff --git a/packages/web-components/src/message-bar/message-bar.integration.spec.ts b/packages/web-components/src/message-bar/message-bar.integration.spec.ts
index b9cbce6cacf8f..8da9c5d998083 100644
--- a/packages/web-components/src/message-bar/message-bar.integration.spec.ts
+++ b/packages/web-components/src/message-bar/message-bar.integration.spec.ts
@@ -23,13 +23,11 @@ test.describe('MessageBar component', () => {
     const shape = await element.getAttribute('shape');
     const layout = await element.getAttribute('layout');
     const intent = await element.getAttribute('intent');
-    const politeness = await element.getAttribute('aria-live');
 
     expect(role).toEqual('status');
     expect(shape).toEqual('rounded');
     expect(layout).toEqual('singleline');
     expect(intent).toEqual('info');
-    expect(politeness).toEqual('polite');
   });
 
   test('should have correct `aria-labelledby` attribute', async () => {
@@ -68,16 +66,4 @@ test.describe('MessageBar component', () => {
     const shape = await element.getAttribute('shape');
     expect(shape).toEqual('rectangular');
   });
-
-  test('when the `politeness` attribute is changed, it should reflect the new value', async () => {
-    await element.evaluate(el => el.setAttribute('politeness', 'polite'));
-    const politeness = await element.getAttribute('politeness');
-    expect(politeness).toEqual('polite');
-  });
-
-  test('when the `politeness` attribute is set, it should reflect the value in the aria-live attribute', async () => {
-    await element.evaluate(el => el.setAttribute('politeness', 'assertive'));
-    const ariaLive = await element.getAttribute('aria-live');
-    expect(ariaLive).toEqual('assertive');
-  });
 });
diff --git a/packages/web-components/src/message-bar/message-bar.options.ts b/packages/web-components/src/message-bar/message-bar.options.ts
index be04893203b71..121cd3ad7f280 100644
--- a/packages/web-components/src/message-bar/message-bar.options.ts
+++ b/packages/web-components/src/message-bar/message-bar.options.ts
@@ -34,14 +34,3 @@ export const MessageBarIntent = {
 } as const;
 
 export type MessageBarIntent = ValuesOf<typeof MessageBarIntent>;
-
-/**
- * @public
- * The `politeness` variations for the MessageBar component.
- */
-export const MessageBarPoliteness = {
-  polite: 'polite',
-  assertive: 'assertive',
-} as const;
-
-export type MessageBarPoliteness = ValuesOf<typeof MessageBarPoliteness>;
diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
index 6d50cae16b9ed..1f99589ad0973 100644
--- a/packages/web-components/src/message-bar/message-bar.stories.ts
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -25,12 +25,7 @@ const dismissed20Regular = html`
 `;
 
 const storyTemplate = html<MessageBarStoryArgs>`
-  <fluent-message-bar
-    shape="${x => x.shape}"
-    layout="${x => x.layout}"
-    intent="${x => x.intent}"
-    politeness="${x => x.politeness}"
-  >
+  <fluent-message-bar shape="${x => x.shape}" layout="${x => x.layout}" intent="${x => x.intent}">
     ${x => x.content}
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
@@ -47,7 +42,6 @@ export default {
     shape: MessageBarShape.rounded,
     layout: MessageBarLayout.singleline,
     intent: MessageBarIntent.info,
-    politeness: MessageBarPoliteness.polite,
   },
   argTypes: {
     content: {
@@ -69,11 +63,6 @@ export default {
       control: { type: 'select' },
       options: Object.values(MessageBarIntent),
     },
-    politeness: {
-      description: 'MessageBar politeness',
-      control: { type: 'select' },
-      options: Object.values(MessageBarPoliteness),
-    },
   },
 } as MessageBarStoryMeta;
 
@@ -156,3 +145,14 @@ export const Intent = renderComponent(html<MessageBarStoryArgs>`
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `);
+
+export const Assertive = renderComponent(html<MessageBarStoryArgs>`
+  <fluent-message-bar aria-live="assertive" intent="info">
+    info
+    <div class="actions" slot="actions">
+      <fluent-button size="small">Action</fluent-button>
+      <fluent-button size="small">Action</fluent-button>
+    </div>
+    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+  </fluent-message-bar>
+`);
diff --git a/packages/web-components/src/message-bar/message-bar.ts b/packages/web-components/src/message-bar/message-bar.ts
index 11f3c3e6c111a..fbfb194ef1f55 100644
--- a/packages/web-components/src/message-bar/message-bar.ts
+++ b/packages/web-components/src/message-bar/message-bar.ts
@@ -55,16 +55,6 @@ export class MessageBar extends FASTElement {
   @attr
   intent: MessageBarIntent = 'info';
 
-  /**
-   * Sets the politeness of the control.
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: `politeness`
-   */
-  @attr
-  politeness: MessageBarPoliteness = 'polite';
-
   /**
    * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
    *

From 8465577158d0ee1d2a92a80e363d4135456eb500 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Fri, 14 Jun 2024 16:10:41 -0400
Subject: [PATCH 08/34] Simplifies template DOM

---
 .../src/message-bar/message-bar.stories.ts             | 10 ----------
 .../src/message-bar/message-bar.styles.ts              | 10 +++++-----
 .../src/message-bar/message-bar.template.ts            |  8 ++------
 3 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
index 1f99589ad0973..daea9eb0412f3 100644
--- a/packages/web-components/src/message-bar/message-bar.stories.ts
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -29,7 +29,6 @@ const storyTemplate = html<MessageBarStoryArgs>`
     ${x => x.content}
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
-      <fluent-button size="small">Action</fluent-button>
     </div>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
@@ -73,7 +72,6 @@ export const Shape = renderComponent(html<MessageBarStoryArgs>`
     rounded
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
-      <fluent-button size="small">Action</fluent-button>
     </div>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
@@ -82,7 +80,6 @@ export const Shape = renderComponent(html<MessageBarStoryArgs>`
     square
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
-      <fluent-button size="small">Action</fluent-button>
     </div>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
@@ -93,7 +90,6 @@ export const Layout = renderComponent(html<MessageBarStoryArgs>`
     singleline
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
-      <fluent-button size="small">Action</fluent-button>
     </div>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
@@ -102,7 +98,6 @@ export const Layout = renderComponent(html<MessageBarStoryArgs>`
     multiline
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
-      <fluent-button size="small">Action</fluent-button>
     </div>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
@@ -113,7 +108,6 @@ export const Intent = renderComponent(html<MessageBarStoryArgs>`
     info
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
-      <fluent-button size="small">Action</fluent-button>
     </div>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
@@ -122,7 +116,6 @@ export const Intent = renderComponent(html<MessageBarStoryArgs>`
     warning
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
-      <fluent-button size="small">Action</fluent-button>
     </div>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
@@ -131,7 +124,6 @@ export const Intent = renderComponent(html<MessageBarStoryArgs>`
     success
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
-      <fluent-button size="small">Action</fluent-button>
     </div>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
@@ -140,7 +132,6 @@ export const Intent = renderComponent(html<MessageBarStoryArgs>`
     error
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
-      <fluent-button size="small">Action</fluent-button>
     </div>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
@@ -151,7 +142,6 @@ export const Assertive = renderComponent(html<MessageBarStoryArgs>`
     info
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
-      <fluent-button size="small">Action</fluent-button>
     </div>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index ff72e7658f7eb..df715d471345f 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -104,8 +104,8 @@ export const styles: ElementStyles = css`
   }
 
   .content {
-    max-width: 520px;
     grid-area: body;
+    max-width: 520px;
     padding: ${spacingVerticalMNudge} 0;
   }
 
@@ -113,26 +113,26 @@ export const styles: ElementStyles = css`
     padding: 0;
   }
 
-  .close {
+  ::slotted([slot='close']) {
     grid-area: close;
     display: flex;
     justify-content: end;
   }
 
-  :host([layout='multiline']) .close {
+  :host([layout='multiline']) ::slotted([slot='close']) {
     flex-direction: column;
     justify-content: start;
     align-items: start;
   }
 
-  .actions {
+  ::slotted([slot='actions']) {
     grid-area: actions;
     display: flex;
     justify-content: end;
     margin-right: ${spacingHorizontalS};
   }
 
-  :host([layout='multiline']) .actions {
+  :host([layout='multiline']) ::slotted([slot='actions']) {
     margin-top: ${spacingVerticalMNudge};
   }
 
diff --git a/packages/web-components/src/message-bar/message-bar.template.ts b/packages/web-components/src/message-bar/message-bar.template.ts
index 1050e3a43cfa5..0ba80fd6d3a46 100644
--- a/packages/web-components/src/message-bar/message-bar.template.ts
+++ b/packages/web-components/src/message-bar/message-bar.template.ts
@@ -66,12 +66,8 @@ export function messageBarTemplate<T extends MessageBar>(options: MessageBarOpti
       <div class="content">
         <slot></slot>
       </div>
-      <div class="actions">
-        <slot name="actions"></slot>
-      </div>
-      <div class="close">
-        <slot name="close"></slot>
-      </div>
+      <slot name="actions"></slot>
+      <slot name="close"></slot>
     </template>
   `;
 }

From 766f28f035273c9b4b292abb4f01689478d0eb72 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Mon, 17 Jun 2024 17:39:26 -0400
Subject: [PATCH 09/34] Fixes message bar

---
 packages/web-components/src/message-bar/index.ts       | 2 +-
 packages/web-components/src/message-bar/message-bar.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/src/message-bar/index.ts b/packages/web-components/src/message-bar/index.ts
index 37ea124ca6325..2b2d8e9ad6030 100644
--- a/packages/web-components/src/message-bar/index.ts
+++ b/packages/web-components/src/message-bar/index.ts
@@ -1,5 +1,5 @@
 export { definition as MessageBarDefinition } from './message-bar.definition.js';
 export { MessageBar } from './message-bar.js';
-export { MessageBarIntent, MessageBarLayout, MessageBarPoliteness, MessageBarShape } from './message-bar.options.js';
+export { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
 export { styles as MessageBarStyles } from './message-bar.styles.js';
 export { template as MessageBarTemplate } from './message-bar.template.js';
diff --git a/packages/web-components/src/message-bar/message-bar.ts b/packages/web-components/src/message-bar/message-bar.ts
index fbfb194ef1f55..c7dd889116e93 100644
--- a/packages/web-components/src/message-bar/message-bar.ts
+++ b/packages/web-components/src/message-bar/message-bar.ts
@@ -3,7 +3,7 @@ import type { StaticallyComposableHTML } from '../utils/index.js';
 import { StartEnd } from '../patterns/index.js';
 import type { StartEndOptions } from '../patterns/index.js';
 import { applyMixins } from '../utils/apply-mixins.js';
-import { MessageBarIntent, MessageBarLayout, MessageBarPoliteness, MessageBarShape } from './message-bar.options.js';
+import { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
 
 /**
  * MessageBar configuration options

From 91c8861c0c416dde3969ca3c76d0f477ec035051 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Wed, 19 Jun 2024 16:16:06 -0400
Subject: [PATCH 10/34] Removes inlined SVGs

---
 .../src/message-bar/message-bar.stories.ts    | 53 ++++++++++++++-
 .../src/message-bar/message-bar.styles.ts     |  7 +-
 .../src/message-bar/message-bar.template.ts   | 67 ++-----------------
 3 files changed, 60 insertions(+), 67 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
index daea9eb0412f3..66009effa48cd 100644
--- a/packages/web-components/src/message-bar/message-bar.stories.ts
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -2,7 +2,7 @@ import { html } from '@microsoft/fast-element';
 import type { Args, Meta } from '@storybook/html';
 import { renderComponent } from '../helpers.stories.js';
 import { MessageBar as FluentMessageBar } from './message-bar.js';
-import { MessageBarIntent, MessageBarLayout, MessageBarPoliteness, MessageBarShape } from './message-bar.options.js';
+import { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
 import './define';
 
 type MessageBarStoryArgs = Args & FluentMessageBar;
@@ -24,8 +24,51 @@ const dismissed20Regular = html`
   </svg>
 `;
 
+const infoIcon = html`
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <path
+      d="M18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10ZM9.50806 8.91012C9.55039 8.67687 9.75454 8.49999 10 8.49999C10.2455 8.49999 10.4496 8.67687 10.4919 8.91012L10.5 8.99999V13.5021L10.4919 13.592C10.4496 13.8253 10.2455 14.0021 10 14.0021C9.75454 14.0021 9.55039 13.8253 9.50806 13.592L9.5 13.5021V8.99999L9.50806 8.91012ZM9.25 6.74999C9.25 6.33578 9.58579 5.99999 10 5.99999C10.4142 5.99999 10.75 6.33578 10.75 6.74999C10.75 7.16421 10.4142 7.49999 10 7.49999C9.58579 7.49999 9.25 7.16421 9.25 6.74999Z"
+      fill="currentColor"
+    />
+  </svg>
+`;
+
+const warningIcon = html` <svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+>
+  <path
+    d="M8.68149 2.78544C9.24892 1.73813 10.752 1.73821 11.3193 2.78557L17.8198 14.7865C18.3612 15.786 17.6375 17.0009 16.5009 17.0009H3.4982C2.36147 17.0009 1.63783 15.7858 2.17934 14.7864L8.68149 2.78544ZM10.5 7.5C10.5 7.22386 10.2761 7 10 7C9.72386 7 9.5 7.22386 9.5 7.5V11.5C9.5 11.7761 9.72386 12 10 12C10.2761 12 10.5 11.7761 10.5 11.5V7.5ZM10.75 13.75C10.75 13.3358 10.4142 13 10 13C9.58579 13 9.25 13.3358 9.25 13.75C9.25 14.1642 9.58579 14.5 10 14.5C10.4142 14.5 10.75 14.1642 10.75 13.75Z"
+    fill="currentColor"
+  />
+</svg>`;
+
+const successIcon = html` <svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+>
+  <path
+    d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM13.3584 7.64645C13.1849 7.47288 12.9154 7.4536 12.7206 7.58859L12.6513 7.64645L9 11.298L7.35355 9.65131L7.28431 9.59346C7.08944 9.45846 6.82001 9.47775 6.64645 9.65131C6.47288 9.82488 6.4536 10.0943 6.58859 10.2892L6.64645 10.3584L8.64645 12.3584L8.71569 12.4163C8.8862 12.5344 9.1138 12.5344 9.28431 12.4163L9.35355 12.3584L13.3584 8.35355L13.4163 8.28431C13.5513 8.08944 13.532 7.82001 13.3584 7.64645Z"
+    fill="currentColor"
+  />
+</svg>`;
+
+const errorIcon = html` <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path
+    d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 12.5C9.58579 12.5 9.25 12.8358 9.25 13.25C9.25 13.6642 9.58579 14 10 14C10.4142 14 10.75 13.6642 10.75 13.25C10.75 12.8358 10.4142 12.5 10 12.5ZM10 6C9.75454 6 9.55039 6.17688 9.50806 6.41012L9.5 6.5V11L9.50806 11.0899C9.55039 11.3231 9.75454 11.5 10 11.5C10.2455 11.5 10.4496 11.3231 10.4919 11.0899L10.5 11V6.5L10.4919 6.41012C10.4496 6.17688 10.2455 6 10 6Z"
+    fill="currentColor"
+  />
+</svg>`;
+
 const storyTemplate = html<MessageBarStoryArgs>`
   <fluent-message-bar shape="${x => x.shape}" layout="${x => x.layout}" intent="${x => x.intent}">
+    <span slot="icon">${infoIcon}</span>
     ${x => x.content}
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
@@ -69,6 +112,7 @@ export const MessageBar = renderComponent(storyTemplate).bind({}) as any;
 
 export const Shape = renderComponent(html<MessageBarStoryArgs>`
   <fluent-message-bar shape="rounded">
+    <span slot="icon">${infoIcon}</span>
     rounded
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
@@ -77,6 +121,7 @@ export const Shape = renderComponent(html<MessageBarStoryArgs>`
   </fluent-message-bar>
   <br />
   <fluent-message-bar shape="square">
+    <span slot="icon">${infoIcon}</span>
     square
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
@@ -87,6 +132,7 @@ export const Shape = renderComponent(html<MessageBarStoryArgs>`
 
 export const Layout = renderComponent(html<MessageBarStoryArgs>`
   <fluent-message-bar layout="singleline">
+    <span slot="icon">${infoIcon}</span>
     singleline
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
@@ -95,6 +141,7 @@ export const Layout = renderComponent(html<MessageBarStoryArgs>`
   </fluent-message-bar>
   <br />
   <fluent-message-bar layout="multiline">
+    <span slot="icon">${infoIcon}</span>
     multiline
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
@@ -105,6 +152,7 @@ export const Layout = renderComponent(html<MessageBarStoryArgs>`
 
 export const Intent = renderComponent(html<MessageBarStoryArgs>`
   <fluent-message-bar intent="info">
+    <span slot="icon">${infoIcon}</span>
     info
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
@@ -113,6 +161,7 @@ export const Intent = renderComponent(html<MessageBarStoryArgs>`
   </fluent-message-bar>
   <br />
   <fluent-message-bar intent="warning">
+    <span slot="icon">${warningIcon}</span>
     warning
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
@@ -121,6 +170,7 @@ export const Intent = renderComponent(html<MessageBarStoryArgs>`
   </fluent-message-bar>
   <br />
   <fluent-message-bar intent="success">
+    <span slot="icon">${successIcon}</span>
     success
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
@@ -129,6 +179,7 @@ export const Intent = renderComponent(html<MessageBarStoryArgs>`
   </fluent-message-bar>
   <br />
   <fluent-message-bar intent="error">
+    <span slot="icon">${errorIcon}</span>
     error
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index df715d471345f..330073d0eb50b 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -72,11 +72,8 @@ export const styles: ElementStyles = css`
     padding: ${spacingVerticalMNudge} ${spacingHorizontalM};
   }
 
-  .info,
-  .warning,
-  .error,
-  .success {
-    display: none;
+  .icon {
+    display: flex;
     grid-area: icon;
     flex-direction: column;
     align-items: center;
diff --git a/packages/web-components/src/message-bar/message-bar.template.ts b/packages/web-components/src/message-bar/message-bar.template.ts
index 0ba80fd6d3a46..9bd21572725ca 100644
--- a/packages/web-components/src/message-bar/message-bar.template.ts
+++ b/packages/web-components/src/message-bar/message-bar.template.ts
@@ -1,38 +1,5 @@
-import { ElementViewTemplate, html, when } from '@microsoft/fast-element';
-import { staticallyCompose } from '../utils/index.js';
-import type { MessageBar, MessageBarOptions } from './message-bar.js';
-
-const infoIcon =
-  html.partial(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <path
-      d="M18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10ZM9.50806 8.91012C9.55039 8.67687 9.75454 8.49999 10 8.49999C10.2455 8.49999 10.4496 8.67687 10.4919 8.91012L10.5 8.99999V13.5021L10.4919 13.592C10.4496 13.8253 10.2455 14.0021 10 14.0021C9.75454 14.0021 9.55039 13.8253 9.50806 13.592L9.5 13.5021V8.99999L9.50806 8.91012ZM9.25 6.74999C9.25 6.33578 9.58579 5.99999 10 5.99999C10.4142 5.99999 10.75 6.33578 10.75 6.74999C10.75 7.16421 10.4142 7.49999 10 7.49999C9.58579 7.49999 9.25 7.16421 9.25 6.74999Z"
-      fill="currentColor"
-    />
-  </svg>`);
-
-const warningIcon =
-  html.partial(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <path
-      d="M8.68149 2.78544C9.24892 1.73813 10.752 1.73821 11.3193 2.78557L17.8198 14.7865C18.3612 15.786 17.6375 17.0009 16.5009 17.0009H3.4982C2.36147 17.0009 1.63783 15.7858 2.17934 14.7864L8.68149 2.78544ZM10.5 7.5C10.5 7.22386 10.2761 7 10 7C9.72386 7 9.5 7.22386 9.5 7.5V11.5C9.5 11.7761 9.72386 12 10 12C10.2761 12 10.5 11.7761 10.5 11.5V7.5ZM10.75 13.75C10.75 13.3358 10.4142 13 10 13C9.58579 13 9.25 13.3358 9.25 13.75C9.25 14.1642 9.58579 14.5 10 14.5C10.4142 14.5 10.75 14.1642 10.75 13.75Z"
-      fill="currentColor"
-    />
-  </svg>`);
-
-const successIcon =
-  html.partial(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <path
-      d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM13.3584 7.64645C13.1849 7.47288 12.9154 7.4536 12.7206 7.58859L12.6513 7.64645L9 11.298L7.35355 9.65131L7.28431 9.59346C7.08944 9.45846 6.82001 9.47775 6.64645 9.65131C6.47288 9.82488 6.4536 10.0943 6.58859 10.2892L6.64645 10.3584L8.64645 12.3584L8.71569 12.4163C8.8862 12.5344 9.1138 12.5344 9.28431 12.4163L9.35355 12.3584L13.3584 8.35355L13.4163 8.28431C13.5513 8.08944 13.532 7.82001 13.3584 7.64645Z"
-      fill="currentColor"
-    />
-  </svg>`);
-
-const errorIcon =
-  html.partial(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <path
-      d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 12.5C9.58579 12.5 9.25 12.8358 9.25 13.25C9.25 13.6642 9.58579 14 10 14C10.4142 14 10.75 13.6642 10.75 13.25C10.75 12.8358 10.4142 12.5 10 12.5ZM10 6C9.75454 6 9.55039 6.17688 9.50806 6.41012L9.5 6.5V11L9.50806 11.0899C9.55039 11.3231 9.75454 11.5 10 11.5C10.2455 11.5 10.4496 11.3231 10.4919 11.0899L10.5 11V6.5L10.4919 6.41012C10.4496 6.17688 10.2455 6 10 6Z"
-      fill="currentColor"
-    />
-  </svg>`);
+import { ElementViewTemplate, html } from '@microsoft/fast-element';
+import type { MessageBar } from './message-bar.js';
 
 /**
  * Generates a template for the MessageBar component.
@@ -40,28 +7,11 @@ const errorIcon =
  * @param {MessageBar} T - The type of the MessageBar.
  * @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
  */
-export function messageBarTemplate<T extends MessageBar>(options: MessageBarOptions): ElementViewTemplate<T> {
+export function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<T> {
   return html<T>`
     <template>
-      <span class="info">
-        <slot name="info-icon">
-          ${staticallyCompose(options.infoIcon)}
-        </slot>
-      </span>
-      <span class="warning">
-        <slot name="warning-icon">
-          ${staticallyCompose(options.warningIcon)}
-        </slot>
-      </span>
-      <span class="error">
-        <slot name="error-icon">
-          ${staticallyCompose(options.errorIcon)}
-        </span>
-      </span>
-      <span class="success">
-        <slot name="success-icon">
-          ${staticallyCompose(options.successIcon)}</span>
-        </slot>
+      <span class="icon">
+        <slot name="icon"></slot>
       </span>
       <div class="content">
         <slot></slot>
@@ -76,9 +26,4 @@ export function messageBarTemplate<T extends MessageBar>(options: MessageBarOpti
  * The template for the MessageBar component.
  * @type {ElementViewTemplate<MessageBar>}
  */
-export const template: ElementViewTemplate<MessageBar> = messageBarTemplate({
-  infoIcon: infoIcon,
-  errorIcon: errorIcon,
-  warningIcon: warningIcon,
-  successIcon: successIcon,
-});
+export const template: ElementViewTemplate<MessageBar> = messageBarTemplate();

From f957735fa9d1c5880fac1d3c8cca2cf4abc3523c Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Wed, 19 Jun 2024 16:20:10 -0400
Subject: [PATCH 11/34] Improves Storybook stories

---
 .../src/message-bar/message-bar.stories.ts    | 61 +++++++++----------
 .../src/message-bar/message-bar.styles.ts     | 15 +++--
 2 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
index 66009effa48cd..476954e57094f 100644
--- a/packages/web-components/src/message-bar/message-bar.stories.ts
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -25,46 +25,40 @@ const dismissed20Regular = html`
 `;
 
 const infoIcon = html`
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10ZM9.50806 8.91012C9.55039 8.67687 9.75454 8.49999 10 8.49999C10.2455 8.49999 10.4496 8.67687 10.4919 8.91012L10.5 8.99999V13.5021L10.4919 13.592C10.4496 13.8253 10.2455 14.0021 10 14.0021C9.75454 14.0021 9.55039 13.8253 9.50806 13.592L9.5 13.5021V8.99999L9.50806 8.91012ZM9.25 6.74999C9.25 6.33578 9.58579 5.99999 10 5.99999C10.4142 5.99999 10.75 6.33578 10.75 6.74999C10.75 7.16421 10.4142 7.49999 10 7.49999C9.58579 7.49999 9.25 7.16421 9.25 6.74999Z"
-      fill="currentColor"
+      fill="#616161"
     />
   </svg>
 `;
 
-const warningIcon = html` <svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="20"
-  height="20"
-  viewBox="0 0 20 20"
-  fill="none"
->
-  <path
-    d="M8.68149 2.78544C9.24892 1.73813 10.752 1.73821 11.3193 2.78557L17.8198 14.7865C18.3612 15.786 17.6375 17.0009 16.5009 17.0009H3.4982C2.36147 17.0009 1.63783 15.7858 2.17934 14.7864L8.68149 2.78544ZM10.5 7.5C10.5 7.22386 10.2761 7 10 7C9.72386 7 9.5 7.22386 9.5 7.5V11.5C9.5 11.7761 9.72386 12 10 12C10.2761 12 10.5 11.7761 10.5 11.5V7.5ZM10.75 13.75C10.75 13.3358 10.4142 13 10 13C9.58579 13 9.25 13.3358 9.25 13.75C9.25 14.1642 9.58579 14.5 10 14.5C10.4142 14.5 10.75 14.1642 10.75 13.75Z"
-    fill="currentColor"
-  />
-</svg>`;
+const warningIcon = html`
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.68149 2.78544C9.24892 1.73813 10.752 1.73821 11.3193 2.78557L17.8198 14.7865C18.3612 15.786 17.6375 17.0009 16.5009 17.0009H3.4982C2.36147 17.0009 1.63783 15.7858 2.17934 14.7864L8.68149 2.78544ZM10.5 7.5C10.5 7.22386 10.2761 7 10 7C9.72386 7 9.5 7.22386 9.5 7.5V11.5C9.5 11.7761 9.72386 12 10 12C10.2761 12 10.5 11.7761 10.5 11.5V7.5ZM10.75 13.75C10.75 13.3358 10.4142 13 10 13C9.58579 13 9.25 13.3358 9.25 13.75C9.25 14.1642 9.58579 14.5 10 14.5C10.4142 14.5 10.75 14.1642 10.75 13.75Z"
+      fill="#DA3B01"
+    />
+  </svg>
+`;
 
-const successIcon = html` <svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="20"
-  height="20"
-  viewBox="0 0 20 20"
-  fill="none"
->
-  <path
-    d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM13.3584 7.64645C13.1849 7.47288 12.9154 7.4536 12.7206 7.58859L12.6513 7.64645L9 11.298L7.35355 9.65131L7.28431 9.59346C7.08944 9.45846 6.82001 9.47775 6.64645 9.65131C6.47288 9.82488 6.4536 10.0943 6.58859 10.2892L6.64645 10.3584L8.64645 12.3584L8.71569 12.4163C8.8862 12.5344 9.1138 12.5344 9.28431 12.4163L9.35355 12.3584L13.3584 8.35355L13.4163 8.28431C13.5513 8.08944 13.532 7.82001 13.3584 7.64645Z"
-    fill="currentColor"
-  />
-</svg>`;
+const successIcon = html`
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM13.3584 7.64645C13.1849 7.47288 12.9154 7.4536 12.7206 7.58859L12.6513 7.64645L9 11.298L7.35355 9.65131L7.28431 9.59346C7.08944 9.45846 6.82001 9.47775 6.64645 9.65131C6.47288 9.82488 6.4536 10.0943 6.58859 10.2892L6.64645 10.3584L8.64645 12.3584L8.71569 12.4163C8.8862 12.5344 9.1138 12.5344 9.28431 12.4163L9.35355 12.3584L13.3584 8.35355L13.4163 8.28431C13.5513 8.08944 13.532 7.82001 13.3584 7.64645Z"
+      fill="#0E700E"
+    />
+  </svg>
+`;
 
-const errorIcon = html` <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-  <path
-    d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 12.5C9.58579 12.5 9.25 12.8358 9.25 13.25C9.25 13.6642 9.58579 14 10 14C10.4142 14 10.75 13.6642 10.75 13.25C10.75 12.8358 10.4142 12.5 10 12.5ZM10 6C9.75454 6 9.55039 6.17688 9.50806 6.41012L9.5 6.5V11L9.50806 11.0899C9.55039 11.3231 9.75454 11.5 10 11.5C10.2455 11.5 10.4496 11.3231 10.4919 11.0899L10.5 11V6.5L10.4919 6.41012C10.4496 6.17688 10.2455 6 10 6Z"
-    fill="currentColor"
-  />
-</svg>`;
+const errorIcon = html`
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM7.80943 7.11372C7.61456 6.97872 7.34514 6.99801 7.17157 7.17157L7.11372 7.24082C6.97872 7.43569 6.99801 7.70511 7.17157 7.87868L9.29289 10L7.17157 12.1213L7.11372 12.1906C6.97872 12.3854 6.99801 12.6549 7.17157 12.8284L7.24082 12.8863C7.43569 13.0213 7.70511 13.002 7.87868 12.8284L10 10.7071L12.1213 12.8284L12.1906 12.8863C12.3854 13.0213 12.6549 13.002 12.8284 12.8284L12.8863 12.7592C13.0213 12.5643 13.002 12.2949 12.8284 12.1213L10.7071 10L12.8284 7.87868L12.8863 7.80943C13.0213 7.61456 13.002 7.34514 12.8284 7.17157L12.7592 7.11372C12.5643 6.97872 12.2949 6.99801 12.1213 7.17157L10 9.29289L7.87868 7.17157L7.80943 7.11372Z"
+      fill="#B10E1C"
+    />
+  </svg>
+`;
 
 const storyTemplate = html<MessageBarStoryArgs>`
   <fluent-message-bar shape="${x => x.shape}" layout="${x => x.layout}" intent="${x => x.intent}">
@@ -142,7 +136,8 @@ export const Layout = renderComponent(html<MessageBarStoryArgs>`
   <br />
   <fluent-message-bar layout="multiline">
     <span slot="icon">${infoIcon}</span>
-    multiline
+    This is a message bar that provides information to the user. This is a message bar that provides information to the
+    user.
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>
     </div>
diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index 330073d0eb50b..0f05da1467170 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -73,12 +73,6 @@ export const styles: ElementStyles = css`
   }
 
   .icon {
-    display: flex;
-    grid-area: icon;
-    flex-direction: column;
-    align-items: center;
-    color: ${colorNeutralForeground3};
-    margin-right: ${spacingHorizontalS};
   }
 
   :host([intent='info']) .info,
@@ -110,6 +104,15 @@ export const styles: ElementStyles = css`
     padding: 0;
   }
 
+  ::slotted([slot='icon']) {
+    display: flex;
+    grid-area: icon;
+    flex-direction: column;
+    align-items: center;
+    color: ${colorNeutralForeground3};
+    margin-right: ${spacingHorizontalS};
+  }
+
   ::slotted([slot='close']) {
     grid-area: close;
     display: flex;

From 9e851ad2747255325a9ea31970d851012ab442df Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Wed, 19 Jun 2024 16:22:36 -0400
Subject: [PATCH 12/34] Continues to simplify MessageBar template

---
 .../web-components/src/message-bar/README.md  | 29 ++-----------------
 .../src/message-bar/message-bar.template.ts   |  4 +--
 2 files changed, 4 insertions(+), 29 deletions(-)

diff --git a/packages/web-components/src/message-bar/README.md b/packages/web-components/src/message-bar/README.md
index c7294bd2e7780..c279f0b8ca220 100644
--- a/packages/web-components/src/message-bar/README.md
+++ b/packages/web-components/src/message-bar/README.md
@@ -16,35 +16,12 @@ The Fabric WC3 MessageBar extends `FASTElement`
 
 ```html
 <template>
-  <span class="info">
-    <slot name="info-icon">
-      ${staticallyCompose(options.infoIcon)}
-    </slot>
-  </span>
-  <span class="warning">
-    <slot name="warning-icon">
-      ${staticallyCompose(options.warningIcon)}
-    </slot>
-  </span>
-  <span class="error">
-    <slot name="error-icon">
-      ${staticallyCompose(options.errorIcon)}
-    </span>
-  </span>
-  <span class="success">
-    <slot name="success-icon">
-      ${staticallyCompose(options.successIcon)}</span>
-    </slot>
-  </span>
+  <slot name="icon"></slot>
   <div class="content">
     <slot></slot>
   </div>
-  <div class="actions">
-    <slot name="actions"></slot>
-  </div>
-  <div class="close">
-    <slot name="close"></slot>
-  </div>
+  <slot name="actions"></slot>
+  <slot name="close"></slot>
 </template>
 ```
 
diff --git a/packages/web-components/src/message-bar/message-bar.template.ts b/packages/web-components/src/message-bar/message-bar.template.ts
index 9bd21572725ca..8ae6dd20a3b25 100644
--- a/packages/web-components/src/message-bar/message-bar.template.ts
+++ b/packages/web-components/src/message-bar/message-bar.template.ts
@@ -10,9 +10,7 @@ import type { MessageBar } from './message-bar.js';
 export function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<T> {
   return html<T>`
     <template>
-      <span class="icon">
-        <slot name="icon"></slot>
-      </span>
+      <slot name="icon"></slot>
       <div class="content">
         <slot></slot>
       </div>

From 57ea9b071f267a59c67d448190b54a584ce1324d Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Wed, 19 Jun 2024 16:34:21 -0400
Subject: [PATCH 13/34] Updates MessageBar benchmark template

---
 .../src/message-bar/message-bar.bench.ts      | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/packages/web-components/src/message-bar/message-bar.bench.ts b/packages/web-components/src/message-bar/message-bar.bench.ts
index 9a69d83844a55..faadaffe7bae2 100644
--- a/packages/web-components/src/message-bar/message-bar.bench.ts
+++ b/packages/web-components/src/message-bar/message-bar.bench.ts
@@ -3,9 +3,59 @@ import { definition } from './message-bar.definition.js';
 
 definition.define(FluentDesignSystem.registry);
 
+const dismissed20Regular = `
+  <svg
+    fill="currentColor"
+    aria-hidden="true"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+`;
+
+const infoIcon = `
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18C14.4183 18 18 14.4183 18 10ZM9.50806 8.91012C9.55039 8.67687 9.75454 8.49999 10 8.49999C10.2455 8.49999 10.4496 8.67687 10.4919 8.91012L10.5 8.99999V13.5021L10.4919 13.592C10.4496 13.8253 10.2455 14.0021 10 14.0021C9.75454 14.0021 9.55039 13.8253 9.50806 13.592L9.5 13.5021V8.99999L9.50806 8.91012ZM9.25 6.74999C9.25 6.33578 9.58579 5.99999 10 5.99999C10.4142 5.99999 10.75 6.33578 10.75 6.74999C10.75 7.16421 10.4142 7.49999 10 7.49999C9.58579 7.49999 9.25 7.16421 9.25 6.74999Z"
+      fill="#616161"
+    />
+  </svg>
+`;
+
 const itemRenderer = () => {
   const messageBar = document.createElement('fluent-message-bar');
   messageBar.appendChild(document.createTextNode('message-bar'));
+
+  // Create and append icon slot
+  const icon = document.createElement('span');
+  icon.setAttribute('slot', 'icon');
+  icon.innerHTML = infoIcon;
+  messageBar.appendChild(icon);
+
+  // Create and append content slot
+  const content = document.createElement('span');
+  content.setAttribute('slot', 'content');
+  content.appendChild(document.createTextNode('Accordion item'));
+  messageBar.appendChild(content);
+
+  // Create and append close slot
+  const close = document.createElement('span');
+  close.setAttribute('slot', 'close');
+  close.innerHTML = dismissed20Regular; // replace with your SVG content
+  messageBar.appendChild(close);
+
+  // Create and append actions slot
+  const actions = document.createElement('button');
+  actions.setAttribute('slot', 'actions');
+  actions.textContent = '<fluent-button size="small">Action</fluent-button>';
+  messageBar.appendChild(actions);
+
   return messageBar;
 };
 

From b4061b509bb017e623d4600cc264c5162c8eec9b Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Wed, 19 Jun 2024 18:01:40 -0400
Subject: [PATCH 14/34] Updates states instead of attrs in CSS

---
 .../message-bar.integration.spec.ts           | 141 +++++++++++-------
 .../src/message-bar/message-bar.styles.ts     |  34 ++---
 .../src/message-bar/message-bar.ts            |  74 ++++++---
 .../web-components/src/styles/states/index.ts |  12 ++
 4 files changed, 165 insertions(+), 96 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.integration.spec.ts b/packages/web-components/src/message-bar/message-bar.integration.spec.ts
index 8da9c5d998083..36e9c039e1565 100644
--- a/packages/web-components/src/message-bar/message-bar.integration.spec.ts
+++ b/packages/web-components/src/message-bar/message-bar.integration.spec.ts
@@ -1,69 +1,104 @@
 import { expect, test } from '@playwright/test';
-import type { Locator, Page } from '@playwright/test';
-
-test.describe('MessageBar component', () => {
-  const componentID = 'components-messagebar--message-bar';
-  let page: Page;
-  let element: Locator;
-
-  test.beforeAll(async ({ browser }) => {
-    const context = await browser.newContext();
-    page = await context.newPage();
-    root = page.locator('#root');
-    element = page.locator('fluent-message-bar');
-    await page.goto(`iframe.html?id=${componentID}`);
-  });
+import { fixtureURL } from '../helpers.tests.js';
+import type { MessageBar } from './message-bar.js';
+
+test.describe('Message Bar', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(fixtureURL('components-messagebar--message'));
 
-  test.afterAll(async () => {
-    await page.close();
+    await page.waitForFunction(() => customElements.whenDefined('fluent-message-bar'));
   });
 
-  test('should render with default attributes', async () => {
-    const role = await element.getAttribute('role');
-    const shape = await element.getAttribute('shape');
-    const layout = await element.getAttribute('layout');
-    const intent = await element.getAttribute('intent');
+  test('should include a role of status', async ({ page }) => {
+    const element = page.locator('fluent-message-bar');
 
-    expect(role).toEqual('status');
-    expect(shape).toEqual('rounded');
-    expect(layout).toEqual('singleline');
-    expect(intent).toEqual('info');
+    await expect(element).toHaveJSProperty('elementInternals.role', 'status');
   });
 
-  test('should have correct `aria-labelledby` attribute', async () => {
-    const attribute = await element.getAttribute('aria-labelledby');
-    expect(attribute).toBeNull();
-  });
+  test('should set and retrieve the `intent` property correctly', async ({ page }) => {
+    const element = page.locator('fluent-message-bar');
+
+    await element.evaluate((node: MessageBar) => {
+      node.intent = 'success';
+    });
+
+    await expect(element).toHaveJSProperty('intent', 'success');
+    expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('success'))).toBe(true);
+
+    await element.evaluate((node: MessageBar) => {
+      node.intent = 'warning';
+    });
+
+    await expect(element).toHaveJSProperty('intent', 'warning');
+    expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('success'))).toBe(false);
+    expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('warning'))).toBe(true);
+
+    await element.evaluate((node: MessageBar) => {
+      node.intent = 'error';
+    });
+
+    await expect(element).toHaveJSProperty('intent', 'error');
+    expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('warning'))).toBe(false);
+    expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('error'))).toBe(true);
+
+    await element.evaluate((node: MessageBar) => {
+      node.intent = 'info';
+    });
 
-  test('on dismissing the MessageBar, it should emit `dismiss` event', async () => {
-    const [dismissed] = await Promise.all([
-      element.evaluate(el => {
-        return new Promise(resolve => {
-          el.addEventListener('dismiss', () => resolve(true), {
-            once: true,
-          });
-          (el as any).dismissMessageBar();
-        });
-      }),
-    ]);
-    expect(dismissed).toBeTruthy();
+    await expect(element).toHaveJSProperty('intent', 'info');
+    expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('error'))).toBe(false);
+    expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('info'))).toBe(true);
   });
 
-  test('when the `layout` attribute is changed, it should reflect the new value', async () => {
-    await element.evaluate(el => el.setAttribute('layout', 'multiline'));
-    const layout = await element.getAttribute('layout');
-    expect(layout).toEqual('multiline');
+  test('should set and retrieve the `shape` property correctly', async ({ page }) => {
+    const element = page.locator('fluent-message-bar');
+
+    await element.evaluate((node: MessageBar) => {
+      node.shape = 'square';
+    });
+
+    await expect(element).toHaveJSProperty('shape', 'square');
+    expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('square'))).toBe(true);
+
+    await element.evaluate((node: MessageBar) => {
+      node.shape = 'rounded';
+    });
+
+    await expect(element).toHaveJSProperty('shape', 'rounded');
+    expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('square'))).toBe(false);
+    expect(await element.evaluate((node: MessageBar) => node.elementInternals.states.has('rounded'))).toBe(true);
   });
 
-  test('when the `intent` attribute is changed, it should reflect the new value', async () => {
-    await element.evaluate(el => el.setAttribute('intent', 'warning'));
-    const intent = await element.getAttribute('intent');
-    expect(intent).toEqual('warning');
+  test('should set and retrieve the `layout` property correctly', async ({ page }) => {
+    const element = page.locator('fluent-message-bar');
+
+    await element.evaluate((node: MessageBar) => {
+      node.layout = 'multiline';
+    });
+
+    await expect(element).toHaveJSProperty('layout', 'multiline');
+    expect(await element.evaluate((node: MessageBar) => node.getAttribute('layout'))).toBe('multiline');
+
+    await element.evaluate((node: MessageBar) => {
+      node.layout = 'singleline';
+    });
+
+    await expect(element).toHaveJSProperty('layout', 'singleline');
+    expect(await element.evaluate((node: MessageBar) => node.getAttribute('layout'))).toBe('singleline');
   });
 
-  test('when the `shape` attribute is changed, it should reflect the new value', async () => {
-    await element.evaluate(el => el.setAttribute('shape', 'rectangular'));
-    const shape = await element.getAttribute('shape');
-    expect(shape).toEqual('rectangular');
+  test('should emit dismiss event when dismissMessageBar is called', async ({ page }) => {
+    const element = page.locator('fluent-message-bar');
+    await element.evaluate((node: MessageBar) => {
+      node.addEventListener('dismiss', () => {
+        node.setAttribute('dismissed', 'true');
+      });
+    });
+
+    await element.evaluate((node: MessageBar) => {
+      node.dismissMessageBar();
+    });
+
+    await expect(element).toHaveAttribute('dismissed', 'true');
   });
 });
diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index 0f05da1467170..5fd5fe29ce433 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -22,6 +22,8 @@ import {
   spacingVerticalMNudge,
 } from '../theme/design-tokens.js';
 
+import { errorState, multiLineState, squareState, successState, warningState } from '../styles/states/index.js';
+
 /**
  * Styles for the MessageBar component.
  *
@@ -44,26 +46,26 @@ export const styles: ElementStyles = css`
     grid-template: 'icon body actions close' / auto 1fr auto auto;
   }
 
-  :host([shape='square']) {
+  :host(${squareState}) {
     border-radius: 0;
   }
 
-  :host([intent='success']) {
+  :host(${successState}) {
     background-color: ${colorPaletteGreenBackground1};
     border-color: ${colorPaletteGreenBorder1};
   }
 
-  :host([intent='warning']) {
+  :host(${warningState}) {
     background-color: ${colorPaletteDarkOrangeBackground1};
     border-color: ${colorPaletteDarkOrangeBorder1};
   }
 
-  :host([intent='error']) {
+  :host(${errorState}) {
     background-color: ${colorPaletteRedBackground1};
     border-color: ${colorPaletteRedBorder1};
   }
 
-  :host([layout='multiline']) {
+  :host(${multiLineState}) {
     grid-template-areas:
       'icon body close'
       'actions actions actions';
@@ -72,25 +74,15 @@ export const styles: ElementStyles = css`
     padding: ${spacingVerticalMNudge} ${spacingHorizontalM};
   }
 
-  .icon {
-  }
-
-  :host([intent='info']) .info,
-  :host([intent='warning']) .warning,
-  :host([intent='error']) .error,
-  :host([intent='success']) .success {
-    display: flex;
-  }
-
-  :host([intent='success']) .success {
+  :host(${successState}) .success {
     color: ${colorPaletteGreenForeground1};
   }
 
-  :host([intent='warning']) .warning {
+  :host(${warningState}) .warning {
     color: ${colorPaletteDarkOrangeForeground1};
   }
 
-  :host([intent='error']) .error {
+  :host(${errorState}) .error {
     color: ${colorPaletteRedForeground1};
   }
 
@@ -100,7 +92,7 @@ export const styles: ElementStyles = css`
     padding: ${spacingVerticalMNudge} 0;
   }
 
-  :host([layout='multiline']) .content {
+  :host(${multiLineState}) .content {
     padding: 0;
   }
 
@@ -119,7 +111,7 @@ export const styles: ElementStyles = css`
     justify-content: end;
   }
 
-  :host([layout='multiline']) ::slotted([slot='close']) {
+  :host(:is(${multiLineState})) ::slotted([slot='close']) {
     flex-direction: column;
     justify-content: start;
     align-items: start;
@@ -132,7 +124,7 @@ export const styles: ElementStyles = css`
     margin-right: ${spacingHorizontalS};
   }
 
-  :host([layout='multiline']) ::slotted([slot='actions']) {
+  :host(:is(${multiLineState}) ::slotted([slot='actions']) {
     margin-top: ${spacingVerticalMNudge};
   }
 
diff --git a/packages/web-components/src/message-bar/message-bar.ts b/packages/web-components/src/message-bar/message-bar.ts
index c7dd889116e93..38cb51003c55e 100644
--- a/packages/web-components/src/message-bar/message-bar.ts
+++ b/packages/web-components/src/message-bar/message-bar.ts
@@ -1,21 +1,9 @@
 import { attr, FASTElement } from '@microsoft/fast-element';
-import type { StaticallyComposableHTML } from '../utils/index.js';
 import { StartEnd } from '../patterns/index.js';
-import type { StartEndOptions } from '../patterns/index.js';
 import { applyMixins } from '../utils/apply-mixins.js';
+import { toggleState } from '../utils/element-internals.js';
 import { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
 
-/**
- * MessageBar configuration options
- * @public
- */
-export type MessageBarOptions = StartEndOptions<MessageBar> & {
-  infoIcon?: StaticallyComposableHTML<MessageBar>;
-  errorIcon?: StaticallyComposableHTML<MessageBar>;
-  warningIcon?: StaticallyComposableHTML<MessageBar>;
-  successIcon?: StaticallyComposableHTML<MessageBar>;
-};
-
 /**
  * A Message Bar Custom HTML Element.
  *
@@ -25,6 +13,18 @@ export type MessageBarOptions = StartEndOptions<MessageBar> & {
  * @public
  */
 export class MessageBar extends FASTElement {
+  /**
+   * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+   *
+   * @internal
+   */
+  public elementInternals: ElementInternals = this.attachInternals();
+
+  constructor() {
+    super();
+    this.elementInternals.role = 'status';
+  }
+
   /**
    * Sets the shape of the control.
    *
@@ -33,7 +33,21 @@ export class MessageBar extends FASTElement {
    * HTML Attribute: `shape`
    */
   @attr
-  shape: MessageBarShape = 'rounded';
+  public shape?: MessageBarShape;
+
+  /**
+   * Handles changes to shape attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public shapeChanged(prev: MessageBarShape | undefined, next: MessageBarShape | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
 
   /**
    * Sets the layout of the control.
@@ -45,6 +59,20 @@ export class MessageBar extends FASTElement {
   @attr
   layout: MessageBarLayout = 'singleline';
 
+  /**
+   * Handles changes to the layout attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
+   */
+  public layoutChanged(prev: MessageBarLayout | undefined, next: MessageBarLayout | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
+  }
+
   /**
    * Sets the intent of the control.
    *
@@ -56,15 +84,17 @@ export class MessageBar extends FASTElement {
   intent: MessageBarIntent = 'info';
 
   /**
-   * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-   *
-   * @internal
+   * Handles changes to the intent attribute custom states
+   * @param prev - the previous state
+   * @param next - the next state
    */
-  protected elementInternals: ElementInternals = this.attachInternals();
-
-  constructor() {
-    super();
-    this.elementInternals.role = 'status';
+  public intentChanged(prev: MessageBarIntent | undefined, next: MessageBarIntent | undefined) {
+    if (prev) {
+      toggleState(this.elementInternals, `${prev}`, false);
+    }
+    if (next) {
+      toggleState(this.elementInternals, `${next}`, true);
+    }
   }
 
   /**
diff --git a/packages/web-components/src/styles/states/index.ts b/packages/web-components/src/styles/states/index.ts
index 91006571c258c..ede904220a2e6 100644
--- a/packages/web-components/src/styles/states/index.ts
+++ b/packages/web-components/src/styles/states/index.ts
@@ -209,3 +209,15 @@ export const verticalState = css.partial`:is([state--vertical], :state(vertical)
  * @public
  */
 export const horizontalState = css.partial`:is([state--horizontal], :state(horizontal))`;
+
+/**
+ * Selector for the `singleline` state.
+ * @public
+ */
+export const singleLineState = css.partial`:is([state--singleline], :state(singleline))`;
+
+/**
+ * Selector for the `multiline` state.
+ * @public
+ */
+export const multiLineState = css.partial`:is([state--multiline], :state(multiline))`;

From b07f390451cbb7698b0296cc1dd3a3957970c6d8 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Wed, 19 Jun 2024 18:09:29 -0400
Subject: [PATCH 15/34] Adds info icon to final example

---
 packages/web-components/src/message-bar/message-bar.stories.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
index 476954e57094f..7d5348278d1af 100644
--- a/packages/web-components/src/message-bar/message-bar.stories.ts
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -185,6 +185,7 @@ export const Intent = renderComponent(html<MessageBarStoryArgs>`
 
 export const Assertive = renderComponent(html<MessageBarStoryArgs>`
   <fluent-message-bar aria-live="assertive" intent="info">
+    <span slot="icon">${infoIcon}</span>
     info
     <div class="actions" slot="actions">
       <fluent-button size="small">Action</fluent-button>

From b2226e675fdc87b4698da66dcfc5e1067a4f56b7 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Fri, 21 Jun 2024 13:45:49 -0400
Subject: [PATCH 16/34] Begins to address PR feedback

---
 .../src/message-bar/message-bar.stories.ts    | 42 +++++--------------
 .../src/message-bar/message-bar.styles.ts     | 20 ++-------
 .../src/message-bar/message-bar.template.ts   | 14 +++----
 3 files changed, 21 insertions(+), 55 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
index 7d5348278d1af..4567d2a6cc658 100644
--- a/packages/web-components/src/message-bar/message-bar.stories.ts
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -64,9 +64,7 @@ const storyTemplate = html<MessageBarStoryArgs>`
   <fluent-message-bar shape="${x => x.shape}" layout="${x => x.layout}" intent="${x => x.intent}">
     <span slot="icon">${infoIcon}</span>
     ${x => x.content}
-    <div class="actions" slot="actions">
-      <fluent-button size="small">Action</fluent-button>
-    </div>
+    <fluent-button size="small" slot="actions">Action</fluent-button>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `;
@@ -108,29 +106,23 @@ export const Shape = renderComponent(html<MessageBarStoryArgs>`
   <fluent-message-bar shape="rounded">
     <span slot="icon">${infoIcon}</span>
     rounded
-    <div class="actions" slot="actions">
-      <fluent-button size="small">Action</fluent-button>
-    </div>
+    <fluent-button size="small"  slot="actions">Action</fluent-button>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar shape="square">
     <span slot="icon">${infoIcon}</span>
     square
-    <div class="actions" slot="actions">
-      <fluent-button size="small">Action</fluent-button>
-    </div>
+    <fluent-button size="small" slot="actions">Action</fluent-button>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `);
 
 export const Layout = renderComponent(html<MessageBarStoryArgs>`
-  <fluent-message-bar layout="singleline">
+  <fluent-message-bar>
     <span slot="icon">${infoIcon}</span>
     singleline
-    <div class="actions" slot="actions">
-      <fluent-button size="small">Action</fluent-button>
-    </div>
+    <fluent-button size="small" slot="actions">Action</fluent-button>    
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
   <br />
@@ -138,9 +130,7 @@ export const Layout = renderComponent(html<MessageBarStoryArgs>`
     <span slot="icon">${infoIcon}</span>
     This is a message bar that provides information to the user. This is a message bar that provides information to the
     user.
-    <div class="actions" slot="actions">
-      <fluent-button size="small">Action</fluent-button>
-    </div>
+    <fluent-button size="small" slot="actions">Action</fluent-button>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `);
@@ -149,36 +139,28 @@ export const Intent = renderComponent(html<MessageBarStoryArgs>`
   <fluent-message-bar intent="info">
     <span slot="icon">${infoIcon}</span>
     info
-    <div class="actions" slot="actions">
-      <fluent-button size="small">Action</fluent-button>
-    </div>
+    <fluent-button size="small" slot="actions">Action</fluent-button>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar intent="warning">
     <span slot="icon">${warningIcon}</span>
     warning
-    <div class="actions" slot="actions">
-      <fluent-button size="small">Action</fluent-button>
-    </div>
+    <fluent-button size="small" slot="actions">Action</fluent-button>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar intent="success">
     <span slot="icon">${successIcon}</span>
     success
-    <div class="actions" slot="actions">
-      <fluent-button size="small">Action</fluent-button>
-    </div>
+    <fluent-button size="small" slot="actions">Action</fluent-button>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar intent="error">
     <span slot="icon">${errorIcon}</span>
     error
-    <div class="actions" slot="actions">
-      <fluent-button size="small">Action</fluent-button>
-    </div>
+    <fluent-button size="small" slot="actions">Action</fluent-button>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `);
@@ -187,9 +169,7 @@ export const Assertive = renderComponent(html<MessageBarStoryArgs>`
   <fluent-message-bar aria-live="assertive" intent="info">
     <span slot="icon">${infoIcon}</span>
     info
-    <div class="actions" slot="actions">
-      <fluent-button size="small">Action</fluent-button>
-    </div>
+    <fluent-button size="small" slot="actions">Action</fluent-button>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `);
diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index 5fd5fe29ce433..3c4dcce5d52f1 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -70,22 +70,10 @@ export const styles: ElementStyles = css`
       'icon body close'
       'actions actions actions';
     grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto auto auto;
+    grid-template-rows: auto auto 1fr;
     padding: ${spacingVerticalMNudge} ${spacingHorizontalM};
   }
 
-  :host(${successState}) .success {
-    color: ${colorPaletteGreenForeground1};
-  }
-
-  :host(${warningState}) .warning {
-    color: ${colorPaletteDarkOrangeForeground1};
-  }
-
-  :host(${errorState}) .error {
-    color: ${colorPaletteRedForeground1};
-  }
-
   .content {
     grid-area: body;
     max-width: 520px;
@@ -111,7 +99,7 @@ export const styles: ElementStyles = css`
     justify-content: end;
   }
 
-  :host(:is(${multiLineState})) ::slotted([slot='close']) {
+  :host(${multiLineState}) ::slotted([slot='close']) {
     flex-direction: column;
     justify-content: start;
     align-items: start;
@@ -120,8 +108,8 @@ export const styles: ElementStyles = css`
   ::slotted([slot='actions']) {
     grid-area: actions;
     display: flex;
-    justify-content: end;
     margin-right: ${spacingHorizontalS};
+    justify-self: end;
   }
 
   :host(:is(${multiLineState}) ::slotted([slot='actions']) {
@@ -129,6 +117,6 @@ export const styles: ElementStyles = css`
   }
 
   ::slotted(*) {
-    font-size: unset;
+    font-size: inherit;
   }
 `;
diff --git a/packages/web-components/src/message-bar/message-bar.template.ts b/packages/web-components/src/message-bar/message-bar.template.ts
index 8ae6dd20a3b25..74bc7fbd5c1ed 100644
--- a/packages/web-components/src/message-bar/message-bar.template.ts
+++ b/packages/web-components/src/message-bar/message-bar.template.ts
@@ -9,14 +9,12 @@ import type { MessageBar } from './message-bar.js';
  */
 export function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<T> {
   return html<T>`
-    <template>
-      <slot name="icon"></slot>
-      <div class="content">
-        <slot></slot>
-      </div>
-      <slot name="actions"></slot>
-      <slot name="close"></slot>
-    </template>
+    <slot name="icon"></slot>
+    <div class="content">
+      <slot></slot>
+    </div>
+    <slot name="actions"></slot>
+    <slot name="close"></slot>
   `;
 }
 

From bae9779cbfeab6c3b363de922b78c51ebc7bf950 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Fri, 21 Jun 2024 13:51:55 -0400
Subject: [PATCH 17/34] further PR feedback

---
 .../src/message-bar/message-bar.ts            | 25 ++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.ts b/packages/web-components/src/message-bar/message-bar.ts
index 38cb51003c55e..58c45a4ae5343 100644
--- a/packages/web-components/src/message-bar/message-bar.ts
+++ b/packages/web-components/src/message-bar/message-bar.ts
@@ -42,10 +42,10 @@ export class MessageBar extends FASTElement {
    */
   public shapeChanged(prev: MessageBarShape | undefined, next: MessageBarShape | undefined) {
     if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
+      toggleState(this.elementInternals, prev, false);
     }
     if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
+      toggleState(this.elementInternals, next, true);
     }
   }
 
@@ -57,7 +57,7 @@ export class MessageBar extends FASTElement {
    * HTML Attribute: `layout`
    */
   @attr
-  layout: MessageBarLayout = 'singleline';
+  public layout?: MessageBarLayout = 'singleline';
 
   /**
    * Handles changes to the layout attribute custom states
@@ -66,10 +66,10 @@ export class MessageBar extends FASTElement {
    */
   public layoutChanged(prev: MessageBarLayout | undefined, next: MessageBarLayout | undefined) {
     if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
+      toggleState(this.elementInternals, prev, false);
     }
     if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
+      toggleState(this.elementInternals, next, true);
     }
   }
 
@@ -81,7 +81,7 @@ export class MessageBar extends FASTElement {
    * HTML Attribute: `intent`
    */
   @attr
-  intent: MessageBarIntent = 'info';
+  public intent?: MessageBarIntent = 'info';
 
   /**
    * Handles changes to the intent attribute custom states
@@ -90,10 +90,10 @@ export class MessageBar extends FASTElement {
    */
   public intentChanged(prev: MessageBarIntent | undefined, next: MessageBarIntent | undefined) {
     if (prev) {
-      toggleState(this.elementInternals, `${prev}`, false);
+      toggleState(this.elementInternals, prev, false);
     }
     if (next) {
-      toggleState(this.elementInternals, `${next}`, true);
+      toggleState(this.elementInternals, next, true);
     }
   }
 
@@ -106,12 +106,3 @@ export class MessageBar extends FASTElement {
   };
 }
 
-/**
- * Mark internal because exporting class and interface of the same name
- * confuses API documenter.
- * TODO: https://github.com/microsoft/fast/issues/3317
- * @internal
- */
-/* eslint-disable-next-line @typescript-eslint/no-empty-interface */
-export interface MessageBar extends StartEnd {}
-applyMixins(MessageBar, StartEnd);

From b47a67f35a4c5465a86fd1c6dd9ec215dff97039 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Fri, 21 Jun 2024 14:12:48 -0400
Subject: [PATCH 18/34] Adds LabelledBy example Story

---
 .../src/message-bar/message-bar.stories.ts     | 18 ++++++++++++++++--
 .../src/message-bar/message-bar.styles.ts      |  8 +++++---
 .../src/message-bar/message-bar.ts             |  8 +++-----
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
index 4567d2a6cc658..be1692d32c6b6 100644
--- a/packages/web-components/src/message-bar/message-bar.stories.ts
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -8,6 +8,8 @@ import './define';
 type MessageBarStoryArgs = Args & FluentMessageBar;
 type MessageBarStoryMeta = Meta<MessageBarStoryArgs>;
 
+
+
 const dismissed20Regular = html`
   <svg
     fill="currentColor"
@@ -136,7 +138,7 @@ export const Layout = renderComponent(html<MessageBarStoryArgs>`
 `);
 
 export const Intent = renderComponent(html<MessageBarStoryArgs>`
-  <fluent-message-bar intent="info">
+  <fluent-message-bar >
     <span slot="icon">${infoIcon}</span>
     info
     <fluent-button size="small" slot="actions">Action</fluent-button>
@@ -166,10 +168,22 @@ export const Intent = renderComponent(html<MessageBarStoryArgs>`
 `);
 
 export const Assertive = renderComponent(html<MessageBarStoryArgs>`
-  <fluent-message-bar aria-live="assertive" intent="info">
+  <fluent-message-bar aria-live="assertive" >
     <span slot="icon">${infoIcon}</span>
     info
     <fluent-button size="small" slot="actions">Action</fluent-button>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `);
+
+
+export const LabelledBy = renderComponent(html<MessageBarStoryArgs>`
+  <fluent-label id="message-bar-label">Message Bar</fluent-label>
+  <fluent-message-bar aria-labelledby="message-bar-label">
+    <span slot="icon">${infoIcon}</span>
+    info
+    <fluent-button size="small" slot="actions">Action</fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+  </fluent-message-bar>
+`);
+
diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index 3c4dcce5d52f1..067b7ab4d1d44 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -7,13 +7,10 @@ import {
   colorNeutralStroke1,
   colorPaletteDarkOrangeBackground1,
   colorPaletteDarkOrangeBorder1,
-  colorPaletteDarkOrangeForeground1,
   colorPaletteGreenBackground1,
   colorPaletteGreenBorder1,
-  colorPaletteGreenForeground1,
   colorPaletteRedBackground1,
   colorPaletteRedBorder1,
-  colorPaletteRedForeground1,
   fontFamilyBase,
   fontSizeBase200,
   lineHeightBase200,
@@ -93,6 +90,11 @@ export const styles: ElementStyles = css`
     margin-right: ${spacingHorizontalS};
   }
 
+  :host(${multiLineState}) ::slotted([slot='icon']) {
+    align-items: start;
+    height: 100%;
+  }
+
   ::slotted([slot='close']) {
     grid-area: close;
     display: flex;
diff --git a/packages/web-components/src/message-bar/message-bar.ts b/packages/web-components/src/message-bar/message-bar.ts
index 58c45a4ae5343..93e0cc146067a 100644
--- a/packages/web-components/src/message-bar/message-bar.ts
+++ b/packages/web-components/src/message-bar/message-bar.ts
@@ -1,6 +1,4 @@
 import { attr, FASTElement } from '@microsoft/fast-element';
-import { StartEnd } from '../patterns/index.js';
-import { applyMixins } from '../utils/apply-mixins.js';
 import { toggleState } from '../utils/element-internals.js';
 import { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
 
@@ -26,7 +24,7 @@ export class MessageBar extends FASTElement {
   }
 
   /**
-   * Sets the shape of the control.
+   * Sets the shape of the Message Bar.
    *
    * @public
    * @remarks
@@ -57,7 +55,7 @@ export class MessageBar extends FASTElement {
    * HTML Attribute: `layout`
    */
   @attr
-  public layout?: MessageBarLayout = 'singleline';
+  public layout?: MessageBarLayout;
 
   /**
    * Handles changes to the layout attribute custom states
@@ -81,7 +79,7 @@ export class MessageBar extends FASTElement {
    * HTML Attribute: `intent`
    */
   @attr
-  public intent?: MessageBarIntent = 'info';
+  public intent?: MessageBarIntent;
 
   /**
    * Handles changes to the intent attribute custom states

From 9881e9b9cd89e4404ac7b40c19dd2cd04fb260f4 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Fri, 21 Jun 2024 14:37:38 -0400
Subject: [PATCH 19/34] Add Story example of label with labelledby

---
 .../src/message-bar/message-bar.integration.spec.ts           | 2 +-
 .../web-components/src/message-bar/message-bar.stories.ts     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.integration.spec.ts b/packages/web-components/src/message-bar/message-bar.integration.spec.ts
index 36e9c039e1565..9b8fccee4e7a4 100644
--- a/packages/web-components/src/message-bar/message-bar.integration.spec.ts
+++ b/packages/web-components/src/message-bar/message-bar.integration.spec.ts
@@ -5,11 +5,11 @@ import type { MessageBar } from './message-bar.js';
 test.describe('Message Bar', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(fixtureURL('components-messagebar--message'));
-
     await page.waitForFunction(() => customElements.whenDefined('fluent-message-bar'));
   });
 
   test('should include a role of status', async ({ page }) => {
+
     const element = page.locator('fluent-message-bar');
 
     await expect(element).toHaveJSProperty('elementInternals.role', 'status');
diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
index be1692d32c6b6..52f650b28faad 100644
--- a/packages/web-components/src/message-bar/message-bar.stories.ts
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -178,8 +178,8 @@ export const Assertive = renderComponent(html<MessageBarStoryArgs>`
 
 
 export const LabelledBy = renderComponent(html<MessageBarStoryArgs>`
-  <fluent-label id="message-bar-label">Message Bar</fluent-label>
-  <fluent-message-bar aria-labelledby="message-bar-label">
+  <fluent-label id="message-bar-label">This is a message bar that provides information to the user.</fluent-label>
+  <fluent-message-bar id="message-bar-with-label" aria-labelledby="message-bar-label">
     <span slot="icon">${infoIcon}</span>
     info
     <fluent-button size="small" slot="actions">Action</fluent-button>

From f0461d25721608ae6ca7c1d0ebc9ba8dfd707602 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Mon, 24 Jun 2024 14:12:34 -0400
Subject: [PATCH 20/34] Fixes overlapping actions in MessageBar

---
 .../src/message-bar/message-bar.stories.ts             |  1 +
 .../src/message-bar/message-bar.styles.ts              | 10 ++++++----
 .../src/message-bar/message-bar.template.ts            |  4 +++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
index 52f650b28faad..3a3da5d6b5e8f 100644
--- a/packages/web-components/src/message-bar/message-bar.stories.ts
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -109,6 +109,7 @@ export const Shape = renderComponent(html<MessageBarStoryArgs>`
     <span slot="icon">${infoIcon}</span>
     rounded
     <fluent-button size="small"  slot="actions">Action</fluent-button>
+    <fluent-button size="small" slot="actions">Action 2</fluent-button>
     <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
   <br />
diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index 067b7ab4d1d44..5a4822a81e0bc 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -107,15 +107,17 @@ export const styles: ElementStyles = css`
     align-items: start;
   }
 
-  ::slotted([slot='actions']) {
+
+  .actions {
     grid-area: actions;
-    display: flex;
-    margin-right: ${spacingHorizontalS};
+    display: flex; /* Ensures items are laid out in a row */
     justify-self: end;
+    margin-right: ${spacingHorizontalS};
   }
 
-  :host(:is(${multiLineState}) ::slotted([slot='actions']) {
+  :host(:is(${multiLineState}) .actions) {
     margin-top: ${spacingVerticalMNudge};
+    margin-right: 0;
   }
 
   ::slotted(*) {
diff --git a/packages/web-components/src/message-bar/message-bar.template.ts b/packages/web-components/src/message-bar/message-bar.template.ts
index 74bc7fbd5c1ed..1e3a9a362e028 100644
--- a/packages/web-components/src/message-bar/message-bar.template.ts
+++ b/packages/web-components/src/message-bar/message-bar.template.ts
@@ -13,7 +13,9 @@ export function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<
     <div class="content">
       <slot></slot>
     </div>
-    <slot name="actions"></slot>
+    <div class="actions">
+      <slot name="actions"></slot>
+    </div>
     <slot name="close"></slot>
   `;
 }

From cee8a101b97f0a776f458d4129b1d9ded11b4d70 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Mon, 24 Jun 2024 16:05:40 -0400
Subject: [PATCH 21/34] Adds contain and fixes CSS selector

---
 .../web-components/src/message-bar/message-bar.styles.ts    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index 5a4822a81e0bc..dd5118d75e81d 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -41,6 +41,7 @@ export const styles: ElementStyles = css`
     min-height: 36px;
     align-items: center;
     grid-template: 'icon body actions close' / auto 1fr auto auto;
+    contain: layout style paint;
   }
 
   :host(${squareState}) {
@@ -107,15 +108,14 @@ export const styles: ElementStyles = css`
     align-items: start;
   }
 
-
   .actions {
     grid-area: actions;
-    display: flex; /* Ensures items are laid out in a row */
+    display: flex;
     justify-self: end;
     margin-right: ${spacingHorizontalS};
   }
 
-  :host(:is(${multiLineState}) .actions) {
+  :host(${multiLineState}) .actions {
     margin-top: ${spacingVerticalMNudge};
     margin-right: 0;
   }

From 604d0de87ba8af51f3126723b0cc4697114261af Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Mon, 24 Jun 2024 16:32:25 -0400
Subject: [PATCH 22/34] Changes close -> dismiss in MessageBar

---
 .../web-components/src/message-bar/README.md  | 17 ++++++++------
 .../src/message-bar/message-bar.stories.ts    | 22 +++++++++----------
 .../src/message-bar/message-bar.styles.ts     | 10 ++++-----
 .../src/message-bar/message-bar.template.ts   |  2 +-
 4 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/packages/web-components/src/message-bar/README.md b/packages/web-components/src/message-bar/README.md
index c279f0b8ca220..de804ca5606a7 100644
--- a/packages/web-components/src/message-bar/README.md
+++ b/packages/web-components/src/message-bar/README.md
@@ -20,8 +20,10 @@ The Fabric WC3 MessageBar extends `FASTElement`
   <div class="content">
     <slot></slot>
   </div>
-  <slot name="actions"></slot>
-  <slot name="close"></slot>
+  <div class="actions">
+    <slot name="actions"></slot>
+  </div>
+  <slot name="dismiss"></slot>
 </template>
 ```
 
@@ -55,11 +57,12 @@ The Fabric WC3 MessageBar extends `FASTElement`
 
 ### **Slots**
 
-| Name      | Description                           |
-| --------- | ------------------------------------- |
-|           | The default slot for the main content |
-| `actions` | The slot for optional action buttons  |
-| `close`   | The slot for a custom close icon      |
+| Name      | Description                               |
+| --------- | ----------------------------------------- |
+|           | The default slot for the main content     |
+| `icon`    | The slot for the icon to represent intent |
+| `actions` | The slot for optional action buttons      |
+| `dismiss` | The slot for a custom close icon          |
 
 ## **Accessiblity**
 
diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
index 3a3da5d6b5e8f..47c9b24bc0989 100644
--- a/packages/web-components/src/message-bar/message-bar.stories.ts
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -67,7 +67,7 @@ const storyTemplate = html<MessageBarStoryArgs>`
     <span slot="icon">${infoIcon}</span>
     ${x => x.content}
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `;
 
@@ -110,14 +110,14 @@ export const Shape = renderComponent(html<MessageBarStoryArgs>`
     rounded
     <fluent-button size="small"  slot="actions">Action</fluent-button>
     <fluent-button size="small" slot="actions">Action 2</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar shape="square">
     <span slot="icon">${infoIcon}</span>
     square
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `);
 
@@ -126,7 +126,7 @@ export const Layout = renderComponent(html<MessageBarStoryArgs>`
     <span slot="icon">${infoIcon}</span>
     singleline
     <fluent-button size="small" slot="actions">Action</fluent-button>    
-    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar layout="multiline">
@@ -134,7 +134,7 @@ export const Layout = renderComponent(html<MessageBarStoryArgs>`
     This is a message bar that provides information to the user. This is a message bar that provides information to the
     user.
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `);
 
@@ -143,28 +143,28 @@ export const Intent = renderComponent(html<MessageBarStoryArgs>`
     <span slot="icon">${infoIcon}</span>
     info
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar intent="warning">
     <span slot="icon">${warningIcon}</span>
     warning
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar intent="success">
     <span slot="icon">${successIcon}</span>
     success
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar intent="error">
     <span slot="icon">${errorIcon}</span>
     error
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `);
 
@@ -173,7 +173,7 @@ export const Assertive = renderComponent(html<MessageBarStoryArgs>`
     <span slot="icon">${infoIcon}</span>
     info
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `);
 
@@ -184,7 +184,7 @@ export const LabelledBy = renderComponent(html<MessageBarStoryArgs>`
     <span slot="icon">${infoIcon}</span>
     info
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="close"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
   </fluent-message-bar>
 `);
 
diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index dd5118d75e81d..047b0854a8d29 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -40,7 +40,7 @@ export const styles: ElementStyles = css`
     border-radius: ${borderRadiusMedium};
     min-height: 36px;
     align-items: center;
-    grid-template: 'icon body actions close' / auto 1fr auto auto;
+    grid-template: 'icon body actions dismiss' / auto 1fr auto auto;
     contain: layout style paint;
   }
 
@@ -65,7 +65,7 @@ export const styles: ElementStyles = css`
 
   :host(${multiLineState}) {
     grid-template-areas:
-      'icon body close'
+      'icon body dismiss'
       'actions actions actions';
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto 1fr;
@@ -96,13 +96,13 @@ export const styles: ElementStyles = css`
     height: 100%;
   }
 
-  ::slotted([slot='close']) {
-    grid-area: close;
+  ::slotted([slot='dismiss']) {
+    grid-area: dismiss;
     display: flex;
     justify-content: end;
   }
 
-  :host(${multiLineState}) ::slotted([slot='close']) {
+  :host(${multiLineState}) ::slotted([slot='dismiss']) {
     flex-direction: column;
     justify-content: start;
     align-items: start;
diff --git a/packages/web-components/src/message-bar/message-bar.template.ts b/packages/web-components/src/message-bar/message-bar.template.ts
index 1e3a9a362e028..db049657c4882 100644
--- a/packages/web-components/src/message-bar/message-bar.template.ts
+++ b/packages/web-components/src/message-bar/message-bar.template.ts
@@ -16,7 +16,7 @@ export function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<
     <div class="actions">
       <slot name="actions"></slot>
     </div>
-    <slot name="close"></slot>
+    <slot name="dismiss"></slot>
   `;
 }
 

From a3958dba98d55ee6172374b47b21c27051f26265 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Mon, 24 Jun 2024 16:33:31 -0400
Subject: [PATCH 23/34] One more rename

---
 packages/web-components/src/message-bar/message-bar.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/message-bar/message-bar.ts b/packages/web-components/src/message-bar/message-bar.ts
index 93e0cc146067a..163d902c3313e 100644
--- a/packages/web-components/src/message-bar/message-bar.ts
+++ b/packages/web-components/src/message-bar/message-bar.ts
@@ -6,7 +6,7 @@ import { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-b
  * A Message Bar Custom HTML Element.
  *
  * @slot actions - Content that can be provided for the actions
- * @slot close - Content that can be provided for the close button
+ * @slot dismiss - Content that can be provided for the dismiss button
  * @slot - The default slot for the content
  * @public
  */

From f7a30cc282fee3c8a17e01ee844dbe3e9597408f Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Mon, 24 Jun 2024 16:34:47 -0400
Subject: [PATCH 24/34] Another close -> dismiss

---
 .../src/message-bar/message-bar.bench.ts               | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.bench.ts b/packages/web-components/src/message-bar/message-bar.bench.ts
index faadaffe7bae2..79a85b4171afd 100644
--- a/packages/web-components/src/message-bar/message-bar.bench.ts
+++ b/packages/web-components/src/message-bar/message-bar.bench.ts
@@ -44,11 +44,11 @@ const itemRenderer = () => {
   content.appendChild(document.createTextNode('Accordion item'));
   messageBar.appendChild(content);
 
-  // Create and append close slot
-  const close = document.createElement('span');
-  close.setAttribute('slot', 'close');
-  close.innerHTML = dismissed20Regular; // replace with your SVG content
-  messageBar.appendChild(close);
+  // Create and append dismiss slot
+  const dismiss = document.createElement('span');
+  dismiss.setAttribute('slot', 'dismiss');
+  dismiss.innerHTML = dismissed20Regular; // replace with your SVG content
+  messageBar.appendChild(dismiss);
 
   // Create and append actions slot
   const actions = document.createElement('button');

From 4a0d1cf7704c5c76a4cb6f126a1c0f23dfd5964b Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Tue, 25 Jun 2024 11:42:39 -0400
Subject: [PATCH 25/34] Adds CSS logical propertiy to support
 internationlization

---
 .../src/message-bar/message-bar.styles.ts        | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index 047b0854a8d29..0b94eca2ae95f 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -36,7 +36,7 @@ export const styles: ElementStyles = css`
     width: 100%;
     background: ${colorNeutralBackground3};
     border: 1px solid ${colorNeutralStroke1};
-    padding: 0 ${spacingHorizontalM};
+    padding-inline: ${spacingHorizontalM};
     border-radius: ${borderRadiusMedium};
     min-height: 36px;
     align-items: center;
@@ -69,13 +69,15 @@ export const styles: ElementStyles = css`
       'actions actions actions';
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto auto 1fr;
-    padding: ${spacingVerticalMNudge} ${spacingHorizontalM};
+    padding-block: ${spacingVerticalMNudge};
+    padding-inline: ${spacingHorizontalM};
   }
 
   .content {
     grid-area: body;
     max-width: 520px;
-    padding: ${spacingVerticalMNudge} 0;
+    padding-block: ${spacingVerticalMNudge};
+    padding-inline: 0;
   }
 
   :host(${multiLineState}) .content {
@@ -88,7 +90,7 @@ export const styles: ElementStyles = css`
     flex-direction: column;
     align-items: center;
     color: ${colorNeutralForeground3};
-    margin-right: ${spacingHorizontalS};
+    margin-inline-end: ${spacingHorizontalS};
   }
 
   :host(${multiLineState}) ::slotted([slot='icon']) {
@@ -112,12 +114,12 @@ export const styles: ElementStyles = css`
     grid-area: actions;
     display: flex;
     justify-self: end;
-    margin-right: ${spacingHorizontalS};
+    margin-inline-end: ${spacingHorizontalS};
   }
 
   :host(${multiLineState}) .actions {
-    margin-top: ${spacingVerticalMNudge};
-    margin-right: 0;
+    margin-block-start: ${spacingVerticalMNudge};
+    margin-inline-end: 0;
   }
 
   ::slotted(*) {

From 49b8e4867a8cfc920364fb488c0060026fcbc180 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Tue, 25 Jun 2024 13:01:37 -0400
Subject: [PATCH 26/34] Addresses benchmark comments

---
 .../web-components/src/message-bar/README.md  | 18 +++++-----
 .../src/message-bar/message-bar.bench.ts      | 34 +++++++++++--------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/packages/web-components/src/message-bar/README.md b/packages/web-components/src/message-bar/README.md
index de804ca5606a7..d831d0f61c8a8 100644
--- a/packages/web-components/src/message-bar/README.md
+++ b/packages/web-components/src/message-bar/README.md
@@ -15,16 +15,14 @@ The Fabric WC3 MessageBar extends `FASTElement`
 ### Template
 
 ```html
-<template>
-  <slot name="icon"></slot>
-  <div class="content">
-    <slot></slot>
-  </div>
-  <div class="actions">
-    <slot name="actions"></slot>
-  </div>
-  <slot name="dismiss"></slot>
-</template>
+<slot name="icon"></slot>
+<div class="content">
+  <slot></slot>
+</div>
+<div class="actions">
+  <slot name="actions"></slot>
+</div>
+<slot name="dismiss"></slot>
 ```
 
 ### **Variables**
diff --git a/packages/web-components/src/message-bar/message-bar.bench.ts b/packages/web-components/src/message-bar/message-bar.bench.ts
index 79a85b4171afd..a9c503032a0b7 100644
--- a/packages/web-components/src/message-bar/message-bar.bench.ts
+++ b/packages/web-components/src/message-bar/message-bar.bench.ts
@@ -29,31 +29,35 @@ const infoIcon = `
 `;
 
 const itemRenderer = () => {
+  const parser = new DOMParser();
   const messageBar = document.createElement('fluent-message-bar');
   messageBar.appendChild(document.createTextNode('message-bar'));
 
   // Create and append icon slot
-  const icon = document.createElement('span');
-  icon.setAttribute('slot', 'icon');
-  icon.innerHTML = infoIcon;
-  messageBar.appendChild(icon);
+  const iconSvgDoc = parser.parseFromString(infoIcon, 'image/svg+xml');
+  const iconSvg = iconSvgDoc.querySelector('svg');
+  if (iconSvg) {
+    iconSvg.setAttribute('slot', 'icon');
+    messageBar.appendChild(iconSvg);
+  }
 
-  // Create and append content slot
-  const content = document.createElement('span');
-  content.setAttribute('slot', 'content');
-  content.appendChild(document.createTextNode('Accordion item'));
-  messageBar.appendChild(content);
+  const contentText = document.createTextNode('Sample message bar content.');
+  messageBar.appendChild(contentText);
 
   // Create and append dismiss slot
-  const dismiss = document.createElement('span');
-  dismiss.setAttribute('slot', 'dismiss');
-  dismiss.innerHTML = dismissed20Regular; // replace with your SVG content
-  messageBar.appendChild(dismiss);
+  const dismissSvgDoc = parser.parseFromString(dismissed20Regular, 'image/svg+xml');
+
+  const dismissSvg = dismissSvgDoc.querySelector('svg');
+  if (dismissSvg) {
+    dismissSvg.setAttribute('slot', 'dismiss');
+    dismissSvg.appendChild(dismissSvg);
+  }
 
   // Create and append actions slot
-  const actions = document.createElement('button');
+  const actions = document.createElement('fluent-button');
   actions.setAttribute('slot', 'actions');
-  actions.textContent = '<fluent-button size="small">Action</fluent-button>';
+  actions.setAttribute('size', 'small');
+  actions.textContent = 'Action';
   messageBar.appendChild(actions);
 
   return messageBar;

From 143d154ffbee11eaee771f24c21d2d315fee04f8 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Tue, 25 Jun 2024 16:11:15 -0400
Subject: [PATCH 27/34] Revert "Addresses benchmark comments"

This reverts commit 49b8e4867a8cfc920364fb488c0060026fcbc180.
---
 .../web-components/src/message-bar/README.md  | 18 +++++-----
 .../src/message-bar/message-bar.bench.ts      | 34 ++++++++-----------
 2 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/packages/web-components/src/message-bar/README.md b/packages/web-components/src/message-bar/README.md
index d831d0f61c8a8..de804ca5606a7 100644
--- a/packages/web-components/src/message-bar/README.md
+++ b/packages/web-components/src/message-bar/README.md
@@ -15,14 +15,16 @@ The Fabric WC3 MessageBar extends `FASTElement`
 ### Template
 
 ```html
-<slot name="icon"></slot>
-<div class="content">
-  <slot></slot>
-</div>
-<div class="actions">
-  <slot name="actions"></slot>
-</div>
-<slot name="dismiss"></slot>
+<template>
+  <slot name="icon"></slot>
+  <div class="content">
+    <slot></slot>
+  </div>
+  <div class="actions">
+    <slot name="actions"></slot>
+  </div>
+  <slot name="dismiss"></slot>
+</template>
 ```
 
 ### **Variables**
diff --git a/packages/web-components/src/message-bar/message-bar.bench.ts b/packages/web-components/src/message-bar/message-bar.bench.ts
index a9c503032a0b7..79a85b4171afd 100644
--- a/packages/web-components/src/message-bar/message-bar.bench.ts
+++ b/packages/web-components/src/message-bar/message-bar.bench.ts
@@ -29,35 +29,31 @@ const infoIcon = `
 `;
 
 const itemRenderer = () => {
-  const parser = new DOMParser();
   const messageBar = document.createElement('fluent-message-bar');
   messageBar.appendChild(document.createTextNode('message-bar'));
 
   // Create and append icon slot
-  const iconSvgDoc = parser.parseFromString(infoIcon, 'image/svg+xml');
-  const iconSvg = iconSvgDoc.querySelector('svg');
-  if (iconSvg) {
-    iconSvg.setAttribute('slot', 'icon');
-    messageBar.appendChild(iconSvg);
-  }
+  const icon = document.createElement('span');
+  icon.setAttribute('slot', 'icon');
+  icon.innerHTML = infoIcon;
+  messageBar.appendChild(icon);
 
-  const contentText = document.createTextNode('Sample message bar content.');
-  messageBar.appendChild(contentText);
+  // Create and append content slot
+  const content = document.createElement('span');
+  content.setAttribute('slot', 'content');
+  content.appendChild(document.createTextNode('Accordion item'));
+  messageBar.appendChild(content);
 
   // Create and append dismiss slot
-  const dismissSvgDoc = parser.parseFromString(dismissed20Regular, 'image/svg+xml');
-
-  const dismissSvg = dismissSvgDoc.querySelector('svg');
-  if (dismissSvg) {
-    dismissSvg.setAttribute('slot', 'dismiss');
-    dismissSvg.appendChild(dismissSvg);
-  }
+  const dismiss = document.createElement('span');
+  dismiss.setAttribute('slot', 'dismiss');
+  dismiss.innerHTML = dismissed20Regular; // replace with your SVG content
+  messageBar.appendChild(dismiss);
 
   // Create and append actions slot
-  const actions = document.createElement('fluent-button');
+  const actions = document.createElement('button');
   actions.setAttribute('slot', 'actions');
-  actions.setAttribute('size', 'small');
-  actions.textContent = 'Action';
+  actions.textContent = '<fluent-button size="small">Action</fluent-button>';
   messageBar.appendChild(actions);
 
   return messageBar;

From 0fb85224f330d43c83b22b950442dce76c2748e5 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Tue, 25 Jun 2024 16:12:05 -0400
Subject: [PATCH 28/34] Fixes README template

---
 .../web-components/src/message-bar/README.md   | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/web-components/src/message-bar/README.md b/packages/web-components/src/message-bar/README.md
index de804ca5606a7..d831d0f61c8a8 100644
--- a/packages/web-components/src/message-bar/README.md
+++ b/packages/web-components/src/message-bar/README.md
@@ -15,16 +15,14 @@ The Fabric WC3 MessageBar extends `FASTElement`
 ### Template
 
 ```html
-<template>
-  <slot name="icon"></slot>
-  <div class="content">
-    <slot></slot>
-  </div>
-  <div class="actions">
-    <slot name="actions"></slot>
-  </div>
-  <slot name="dismiss"></slot>
-</template>
+<slot name="icon"></slot>
+<div class="content">
+  <slot></slot>
+</div>
+<div class="actions">
+  <slot name="actions"></slot>
+</div>
+<slot name="dismiss"></slot>
 ```
 
 ### **Variables**

From cd24eaf27684c5e5aa9a8b7980d3c8ba00e84052 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Tue, 25 Jun 2024 16:46:24 -0400
Subject: [PATCH 29/34] Attempts to fix message-bar.bench.ts

---
 .../web-components/src/message-bar/message-bar.bench.ts     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.bench.ts b/packages/web-components/src/message-bar/message-bar.bench.ts
index 79a85b4171afd..06d86d9ca3c2e 100644
--- a/packages/web-components/src/message-bar/message-bar.bench.ts
+++ b/packages/web-components/src/message-bar/message-bar.bench.ts
@@ -1,7 +1,9 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition as buttonDefinition } from '../Button/button.definition.js';
 import { definition } from './message-bar.definition.js';
 
 definition.define(FluentDesignSystem.registry);
+buttonDefinition.define(FluentDesignSystem.registry);
 
 const dismissed20Regular = `
   <svg
@@ -51,9 +53,9 @@ const itemRenderer = () => {
   messageBar.appendChild(dismiss);
 
   // Create and append actions slot
-  const actions = document.createElement('button');
+  const actions = document.createElement('fluent-button');
   actions.setAttribute('slot', 'actions');
-  actions.textContent = '<fluent-button size="small">Action</fluent-button>';
+  actions.appendChild(document.createTextNode('Button'));
   messageBar.appendChild(actions);
 
   return messageBar;

From 3e0dde583f3bba1dfbbac52c43391d6a2e9af942 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Tue, 25 Jun 2024 16:47:42 -0400
Subject: [PATCH 30/34] Fixes capitalization

---
 packages/web-components/src/message-bar/message-bar.bench.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/message-bar/message-bar.bench.ts b/packages/web-components/src/message-bar/message-bar.bench.ts
index 06d86d9ca3c2e..24528469295c4 100644
--- a/packages/web-components/src/message-bar/message-bar.bench.ts
+++ b/packages/web-components/src/message-bar/message-bar.bench.ts
@@ -1,5 +1,5 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition as buttonDefinition } from '../Button/button.definition.js';
+import { definition as buttonDefinition } from '../button/button.definition.js';
 import { definition } from './message-bar.definition.js';
 
 definition.define(FluentDesignSystem.registry);

From 5eec5e0b465dd2323c157c709cbf45f6acf196bf Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Thu, 27 Jun 2024 13:45:12 -0400
Subject: [PATCH 31/34] Adjusts CSS to account for spacing

---
 packages/web-components/docs/api-report.md               | 4 ++++
 .../web-components/src/message-bar/message-bar.styles.ts | 9 +--------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index f790a76793b5a..c07f8dcb169e0 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="web" />
+
 import type { Constructable } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
@@ -3106,6 +3108,8 @@ class Text_2 extends FASTElement {
     block: boolean;
     // (undocumented)
     connectedCallback(): void;
+    // (undocumented)
+    disconnectedCallback(): void;
     // @internal
     elementInternals: ElementInternals;
     font?: TextFont;
diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index 0b94eca2ae95f..8c40efec615b6 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -100,14 +100,6 @@ export const styles: ElementStyles = css`
 
   ::slotted([slot='dismiss']) {
     grid-area: dismiss;
-    display: flex;
-    justify-content: end;
-  }
-
-  :host(${multiLineState}) ::slotted([slot='dismiss']) {
-    flex-direction: column;
-    justify-content: start;
-    align-items: start;
   }
 
   .actions {
@@ -115,6 +107,7 @@ export const styles: ElementStyles = css`
     display: flex;
     justify-self: end;
     margin-inline-end: ${spacingHorizontalS};
+    gap: ${spacingHorizontalS};
   }
 
   :host(${multiLineState}) .actions {

From 904738fb5ef15f0bd0507c82e19de47a1b447631 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Thu, 27 Jun 2024 16:54:51 -0400
Subject: [PATCH 32/34] Fixes misalignment

---
 .../web-components/src/message-bar/message-bar.styles.ts   | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index 8c40efec615b6..e1597ee767811 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -17,6 +17,7 @@ import {
   spacingHorizontalM,
   spacingHorizontalS,
   spacingVerticalMNudge,
+  spacingVerticalS,
 } from '../theme/design-tokens.js';
 
 import { errorState, multiLineState, squareState, successState, warningState } from '../styles/states/index.js';
@@ -115,6 +116,12 @@ export const styles: ElementStyles = css`
     margin-inline-end: 0;
   }
 
+  ::slotted([slot='dismiss']) {
+    align-items: start;
+    height: 100%;
+    padding-block-start: ${spacingVerticalS};
+  }
+
   ::slotted(*) {
     font-size: inherit;
   }

From 76814c1459fcff10958a75c5520658376a6445a2 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Thu, 27 Jun 2024 16:56:36 -0400
Subject: [PATCH 33/34] Applies style to only multiline messaage bars

---
 packages/web-components/src/message-bar/message-bar.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/src/message-bar/message-bar.styles.ts b/packages/web-components/src/message-bar/message-bar.styles.ts
index e1597ee767811..b86de8cf7d3cb 100644
--- a/packages/web-components/src/message-bar/message-bar.styles.ts
+++ b/packages/web-components/src/message-bar/message-bar.styles.ts
@@ -116,7 +116,7 @@ export const styles: ElementStyles = css`
     margin-inline-end: 0;
   }
 
-  ::slotted([slot='dismiss']) {
+  :host(${multiLineState}) ::slotted([slot='dismiss']) {
     align-items: start;
     height: 100%;
     padding-block-start: ${spacingVerticalS};

From 97fc4cfd8839a93fcf9e549d2442e5dec5f16755 Mon Sep 17 00:00:00 2001
From: Ryan Merrill <ryan@ryanmerrill.net>
Date: Thu, 27 Jun 2024 20:34:43 -0400
Subject: [PATCH 34/34] Runs Prettier on files

---
 .../message-bar.integration.spec.ts           |  1 -
 .../src/message-bar/message-bar.stories.ts    | 56 ++++++++++++-------
 .../src/message-bar/message-bar.ts            |  1 -
 3 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/packages/web-components/src/message-bar/message-bar.integration.spec.ts b/packages/web-components/src/message-bar/message-bar.integration.spec.ts
index 9b8fccee4e7a4..34e1a747b5e95 100644
--- a/packages/web-components/src/message-bar/message-bar.integration.spec.ts
+++ b/packages/web-components/src/message-bar/message-bar.integration.spec.ts
@@ -9,7 +9,6 @@ test.describe('Message Bar', () => {
   });
 
   test('should include a role of status', async ({ page }) => {
-
     const element = page.locator('fluent-message-bar');
 
     await expect(element).toHaveJSProperty('elementInternals.role', 'status');
diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
index 47c9b24bc0989..688e4216a5580 100644
--- a/packages/web-components/src/message-bar/message-bar.stories.ts
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -8,8 +8,6 @@ import './define';
 type MessageBarStoryArgs = Args & FluentMessageBar;
 type MessageBarStoryMeta = Meta<MessageBarStoryArgs>;
 
-
-
 const dismissed20Regular = html`
   <svg
     fill="currentColor"
@@ -67,7 +65,9 @@ const storyTemplate = html<MessageBarStoryArgs>`
     <span slot="icon">${infoIcon}</span>
     ${x => x.content}
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss">
+      ${dismissed20Regular}
+    </fluent-button>
   </fluent-message-bar>
 `;
 
@@ -108,16 +108,20 @@ export const Shape = renderComponent(html<MessageBarStoryArgs>`
   <fluent-message-bar shape="rounded">
     <span slot="icon">${infoIcon}</span>
     rounded
-    <fluent-button size="small"  slot="actions">Action</fluent-button>
+    <fluent-button size="small" slot="actions">Action</fluent-button>
     <fluent-button size="small" slot="actions">Action 2</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss">
+      ${dismissed20Regular}
+    </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar shape="square">
     <span slot="icon">${infoIcon}</span>
     square
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss">
+      ${dismissed20Regular}
+    </fluent-button>
   </fluent-message-bar>
 `);
 
@@ -125,8 +129,10 @@ export const Layout = renderComponent(html<MessageBarStoryArgs>`
   <fluent-message-bar>
     <span slot="icon">${infoIcon}</span>
     singleline
-    <fluent-button size="small" slot="actions">Action</fluent-button>    
-    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" slot="actions">Action</fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss">
+      ${dismissed20Regular}
+    </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar layout="multiline">
@@ -134,57 +140,69 @@ export const Layout = renderComponent(html<MessageBarStoryArgs>`
     This is a message bar that provides information to the user. This is a message bar that provides information to the
     user.
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss">
+      ${dismissed20Regular}
+    </fluent-button>
   </fluent-message-bar>
 `);
 
 export const Intent = renderComponent(html<MessageBarStoryArgs>`
-  <fluent-message-bar >
+  <fluent-message-bar>
     <span slot="icon">${infoIcon}</span>
     info
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss">
+      ${dismissed20Regular}
+    </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar intent="warning">
     <span slot="icon">${warningIcon}</span>
     warning
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss">
+      ${dismissed20Regular}
+    </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar intent="success">
     <span slot="icon">${successIcon}</span>
     success
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss">
+      ${dismissed20Regular}
+    </fluent-button>
   </fluent-message-bar>
   <br />
   <fluent-message-bar intent="error">
     <span slot="icon">${errorIcon}</span>
     error
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss">
+      ${dismissed20Regular}
+    </fluent-button>
   </fluent-message-bar>
 `);
 
 export const Assertive = renderComponent(html<MessageBarStoryArgs>`
-  <fluent-message-bar aria-live="assertive" >
+  <fluent-message-bar aria-live="assertive">
     <span slot="icon">${infoIcon}</span>
     info
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss">
+      ${dismissed20Regular}
+    </fluent-button>
   </fluent-message-bar>
 `);
 
-
 export const LabelledBy = renderComponent(html<MessageBarStoryArgs>`
   <fluent-label id="message-bar-label">This is a message bar that provides information to the user.</fluent-label>
   <fluent-message-bar id="message-bar-with-label" aria-labelledby="message-bar-label">
     <span slot="icon">${infoIcon}</span>
     info
     <fluent-button size="small" slot="actions">Action</fluent-button>
-    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss"> ${dismissed20Regular} </fluent-button>
+    <fluent-button size="small" appearance="transparent" icon-only slot="dismiss">
+      ${dismissed20Regular}
+    </fluent-button>
   </fluent-message-bar>
 `);
-
diff --git a/packages/web-components/src/message-bar/message-bar.ts b/packages/web-components/src/message-bar/message-bar.ts
index 163d902c3313e..df2c04b22dc8a 100644
--- a/packages/web-components/src/message-bar/message-bar.ts
+++ b/packages/web-components/src/message-bar/message-bar.ts
@@ -103,4 +103,3 @@ export class MessageBar extends FASTElement {
     this.$emit('dismiss', {});
   };
 }
-