@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.31

package/dist/esm/menu-list/menu-list.options.js

@@ -0,0 +1,8 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+/**
+ * The tag name for the menu list element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-menu-list`;
+//# sourceMappingURL=menu-list.options.js.map

package/dist/esm/menu-list/menu-list.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-list.options.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,YAAqB,CAAC"}

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

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

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

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utils/index.js';
+import { display } from '../utils/display.js';
 import { borderRadiusMedium, colorNeutralBackground1, colorTransparentStroke, shadow16, } from '../theme/design-tokens.js';
 /** MenuList styles
  * @public

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

@@ -1 +1 @@
-{"version":3,"file":"menu-list.styles.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,GACT,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;wBAQK,uBAAuB;wBACvB,sBAAsB;qBACzB,kBAAkB;kBACrB,QAAQ;;;;CAIzB,CAAC"}
+{"version":3,"file":"menu-list.styles.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,GACT,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;wBAQK,uBAAuB;wBACvB,sBAAsB;qBACzB,kBAAkB;kBACrB,QAAQ;;;;CAIzB,CAAC"}

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

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

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

@@ -1,11 +1,7 @@
 import { html, slotted } from '@microsoft/fast-element';
 export function menuTemplate() {
     return html `
-    <template
-      slot="${x => (x.slot ? x.slot : x.isNestedMenu() ? 'submenu' : void 0)}"
-      @keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
-      @focusout="${(x, c) => x.handleFocusOut(c.event)}"
-    >
+    <template focusgroup="menu">
       <slot ${slotted('items')}></slot>
     </template>
   `;

package/dist/esm/menu-list/menu-list.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-list.template.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGlF,MAAM,UAAU,YAAY;IAC1B,OAAO,IAAI,CAAG;;cAEF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;kBAC1D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAsB,CAAC;mBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;;cAEtD,OAAO,CAAC,OAAO,CAAC;;GAE3B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,YAAY,EAAE,CAAC"}
+{"version":3,"file":"menu-list.template.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGlF,MAAM,UAAU,YAAY;IAC1B,OAAO,IAAI,CAAG;;cAEF,OAAO,CAAC,OAAO,CAAC;;GAE3B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,YAAY,EAAE,CAAC"}

package/dist/esm/message-bar/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/message-bar/define-async.js

@@ -0,0 +1,4 @@
+import { declarativeDefinition } from './message-bar.definition-async.js';
+import { MessageBar } from './message-bar.js';
+MessageBar.define(declarativeDefinition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/message-bar/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/message-bar/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,UAAU,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/message-bar/define.js

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
 import { definition } from './message-bar.definition.js';
-definition.define(FluentDesignSystem.registry);
+import { MessageBar } from './message-bar.js';
+MessageBar.define(definition);
 //# sourceMappingURL=define.js.map

package/dist/esm/message-bar/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/message-bar/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/message-bar/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/message-bar/index.d.ts

@@ -3,3 +3,4 @@ export { MessageBar } from './message-bar.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';
+export { tagName as MessageBarTagName } from './message-bar.options.js';

package/dist/esm/message-bar/index.js

@@ -3,4 +3,5 @@ export { MessageBar } from './message-bar.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';
+export { tagName as MessageBarTagName } from './message-bar.options.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/message-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/message-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC/F,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/message-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC/F,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/esm/message-bar/message-bar.bench.d.ts

@@ -1,3 +1,5 @@
+import '../button/define.js';
+import './define.js';
 declare const itemRenderer: () => HTMLElement;
 export default itemRenderer;
 export { tests } from '../utils/benchmark-wrapper.js';

package/dist/esm/message-bar/message-bar.bench.js

@@ -1,8 +1,5 @@
-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);
+import '../button/define.js';
+import './define.js';
 const dismissed20Regular = `
   <svg
     fill="currentColor"

package/dist/esm/message-bar/message-bar.bench.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-bar.bench.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAC/C,gBAAgB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAErD,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;CAc1B,CAAC;AAEF,MAAM,QAAQ,GAAG;;;;;;;CAOhB,CAAC;AAEF,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAChE,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAE/D,8BAA8B;IAC9B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC1B,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAE7B,iCAAiC;IACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC/D,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEhC,iCAAiC;IACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,OAAO,CAAC,SAAS,GAAG,kBAAkB,CAAC,CAAC,gCAAgC;IACxE,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEhC,iCAAiC;IACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACxD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IACvD,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEhC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"message-bar.bench.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.bench.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,aAAa,CAAC;AAErB,MAAM,kBAAkB,GAAG;;;;;;;;;;;;;;CAc1B,CAAC;AAEF,MAAM,QAAQ,GAAG;;;;;;;CAOhB,CAAC;AAEF,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAChE,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAE/D,8BAA8B;IAC9B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC1B,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAE7B,iCAAiC;IACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC/D,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEhC,iCAAiC;IACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,OAAO,CAAC,SAAS,GAAG,kBAAkB,CAAC,CAAC,gCAAgC;IACxE,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEhC,iCAAiC;IACjC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACxD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IACvD,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEhC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/message-bar/message-bar.d.ts

@@ -7,7 +7,9 @@ import { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-b
  *
  * @slot actions - Content that can be provided for the actions
  * @slot dismiss - Content that can be provided for the dismiss button
+ * @slot icon - Content that can be provided for the leading icon
  * @slot - The default slot for the content
+ * @fires { CustomEvent } dismiss - Fired when the message bar is dismissed.
  * @public
  */
 export declare class MessageBar extends FASTElement {
@@ -43,8 +45,9 @@ export declare class MessageBar extends FASTElement {
      */
     intent?: MessageBarIntent;
     /**
-     * @public
      * Method to emit a `dismiss` event when the message bar is dismissed
+     *
+     * @public
      */
     dismissMessageBar: () => void;
 }

package/dist/esm/message-bar/message-bar.definition-async.d.ts

@@ -0,0 +1,10 @@
+import { type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+/**
+ * The async definition configuration for the `<fluent-message-bar>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const declarativeDefinition: PartialFASTElementDefinition;

package/dist/esm/message-bar/message-bar.definition-async.js

@@ -0,0 +1,17 @@
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './message-bar.options.js';
+/**
+ * The async definition configuration for the `<fluent-message-bar>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const declarativeDefinition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
+    template: declarativeTemplate(),
+};
+//# sourceMappingURL=message-bar.definition-async.js.map

package/dist/esm/message-bar/message-bar.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.definition-async.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.definition-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAqC,MAAM,wCAAwC,CAAC;AAChH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiC;IACjE,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,QAAQ,EAAE,mBAAmB,EAAE;CAChC,CAAC"}

package/dist/esm/message-bar/message-bar.definition.d.ts

@@ -1,9 +1,7 @@
-import { MessageBar } from './message-bar.js';
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 /**
- * The Fluent MessageBar Element definition.
+ * The definition for the `<fluent-message-bar>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-message-bar>`
  */
-export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof MessageBar>;
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/message-bar/message-bar.definition.js

@@ -1,20 +1,16 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { MessageBar } from './message-bar.js';
+import { tagName } from './message-bar.options.js';
 import { styles } from './message-bar.styles.js';
 import { template } from './message-bar.template.js';
 /**
- * The Fluent MessageBar Element definition.
+ * The definition for the `<fluent-message-bar>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-message-bar>`
  */
-export const definition = MessageBar.compose({
-    name: `${FluentDesignSystem.prefix}-message-bar`,
-    template,
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
     styles,
-    shadowOptions: {
-        mode: FluentDesignSystem.shadowRootMode,
-    },
-});
+    template,
+};
 //# sourceMappingURL=message-bar.definition.js.map

package/dist/esm/message-bar/message-bar.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-bar.definition.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,cAAc;IAChD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,kBAAkB,CAAC,cAAc;KACxC;CACF,CAAC,CAAC"}
+{"version":3,"file":"message-bar.definition.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,MAAM;IACN,QAAQ;CACT,CAAC"}

package/dist/esm/message-bar/message-bar.js

@@ -7,7 +7,9 @@ import { attr, FASTElement } from '@microsoft/fast-element';
  *
  * @slot actions - Content that can be provided for the actions
  * @slot dismiss - Content that can be provided for the dismiss button
+ * @slot icon - Content that can be provided for the leading icon
  * @slot - The default slot for the content
+ * @fires { CustomEvent } dismiss - Fired when the message bar is dismissed.
  * @public
  */
 export class MessageBar extends FASTElement {
@@ -20,8 +22,9 @@ export class MessageBar extends FASTElement {
          */
         this.elementInternals = this.attachInternals();
         /**
-         * @public
          * Method to emit a `dismiss` event when the message bar is dismissed
+         *
+         * @public
          */
         this.dismissMessageBar = () => {
             this.$emit('dismiss', {});

package/dist/esm/message-bar/message-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-bar.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;;;;;;;GASG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAQzC;QACE,KAAK,EAAE,CAAC;QARV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAqCnE;;;WAGG;QACI,sBAAiB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAC5B,CAAC,CAAC;QAvCA,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,QAAQ,CAAC;IACxC,CAAC;CAuCF;AA7BQ;IADN,IAAI;yCAC0B;AAUxB;IADN,IAAI;0CAC4B;AAU1B;IADN,IAAI;0CAC4B"}
+{"version":3,"file":"message-bar.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAQzC;QACE,KAAK,EAAE,CAAC;QARV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAqCnE;;;;WAIG;QACI,sBAAiB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAC5B,CAAC,CAAC;QAxCA,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,QAAQ,CAAC;IACxC,CAAC;CAwCF;AA9BQ;IADN,IAAI;yCAC0B;AAUxB;IADN,IAAI;0CAC4B;AAU1B;IADN,IAAI;0CAC4B"}

package/dist/esm/message-bar/message-bar.options.d.ts

@@ -1,7 +1,8 @@
 import type { ValuesOf } from '../utils/typings.js';
 /**
- * @public
  * The `layout` variations for the MessageBar component.
+ *
+ * @public
  */
 export declare const MessageBarLayout: {
     readonly multiline: "multiline";
@@ -9,8 +10,9 @@ export declare const MessageBarLayout: {
 };
 export type MessageBarLayout = ValuesOf<typeof MessageBarLayout>;
 /**
- * @public
  * The `shape` variations for the MessageBar component.
+ *
+ * @public
  */
 export declare const MessageBarShape: {
     readonly rounded: "rounded";
@@ -18,8 +20,9 @@ export declare const MessageBarShape: {
 };
 export type MessageBarShape = ValuesOf<typeof MessageBarShape>;
 /**
- * @public
  * The `intent` variations for the MessageBar component.
+ *
+ * @public
  */
 export declare const MessageBarIntent: {
     readonly success: "success";
@@ -28,3 +31,9 @@ export declare const MessageBarIntent: {
     readonly info: "info";
 };
 export type MessageBarIntent = ValuesOf<typeof MessageBarIntent>;
+/**
+ * The tag name for the message bar element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-message-bar";

package/dist/esm/message-bar/message-bar.options.js

@@ -1,22 +1,26 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
- * @public
  * The `layout` variations for the MessageBar component.
+ *
+ * @public
  */
 export const MessageBarLayout = {
     multiline: 'multiline',
     singleline: 'singleline',
 };
 /**
- * @public
  * The `shape` variations for the MessageBar component.
+ *
+ * @public
  */
 export const MessageBarShape = {
     rounded: 'rounded',
     square: 'square',
 };
 /**
- * @public
  * The `intent` variations for the MessageBar component.
+ *
+ * @public
  */
 export const MessageBarIntent = {
     success: 'success',
@@ -24,4 +28,10 @@ export const MessageBarIntent = {
     error: 'error',
     info: 'info',
 };
+/**
+ * The tag name for the message bar element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-message-bar`;
 //# sourceMappingURL=message-bar.options.js.map

package/dist/esm/message-bar/message-bar.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-bar.options.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,YAAY;CAChB,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAIX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACJ,CAAC"}
+{"version":3,"file":"message-bar.options.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,YAAY;CAChB,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;CACJ,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,cAAuB,CAAC"}

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

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

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

@@ -14,6 +14,7 @@ export const styles = css `
     line-height: ${lineHeightBase200};
     width: 100%;
     background: ${colorNeutralBackground3};
+    color: ${colorNeutralForeground3};
     border: 1px solid ${colorNeutralStroke1};
     padding-inline: ${spacingHorizontalM};
     border-radius: ${borderRadiusMedium};

package/dist/esm/message-bar/message-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-bar.styles.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;mBAIrB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;kBAElB,uBAAuB;wBACjB,mBAAmB;sBACrB,kBAAkB;qBACnB,kBAAkB;;;;;;;;;;;;wBAYf,4BAA4B;oBAChC,wBAAwB;;;;wBAIpB,iCAAiC;oBACrC,6BAA6B;;;;wBAIzB,0BAA0B;oBAC9B,sBAAsB;;;;;;;;;qBASrB,qBAAqB;sBACpB,kBAAkB;;;;;;qBAMnB,qBAAqB;;;;;;;;;;;;;aAa7B,uBAAuB;yBACX,kBAAkB;;;;;;;;;;;;;;;;yBAgBlB,kBAAkB;WAChC,kBAAkB;;;;0BAIH,qBAAqB;;;;;;;2BAOpB,gBAAgB;;;;;;CAM1C,CAAC"}
+{"version":3,"file":"message-bar.styles.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;mBAIrB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;kBAElB,uBAAuB;aAC5B,uBAAuB;wBACZ,mBAAmB;sBACrB,kBAAkB;qBACnB,kBAAkB;;;;;;;;;;;;wBAYf,4BAA4B;oBAChC,wBAAwB;;;;wBAIpB,iCAAiC;oBACrC,6BAA6B;;;;wBAIzB,0BAA0B;oBAC9B,sBAAsB;;;;;;;;;qBASrB,qBAAqB;sBACpB,kBAAkB;;;;;;qBAMnB,qBAAqB;;;;;;;;;;;;;aAa7B,uBAAuB;yBACX,kBAAkB;;;;;;;;;;;;;;;;yBAgBlB,kBAAkB;WAChC,kBAAkB;;;;0BAIH,qBAAqB;;;;;;;2BAOpB,gBAAgB;;;;;;CAM1C,CAAC"}

package/dist/esm/message-bar/message-bar.template.d.ts

@@ -3,12 +3,12 @@ import type { MessageBar } from './message-bar.js';
 /**
  * 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.
+ * @param T - The type of the MessageBar.
+ * @returns The template for the MessageBar component.
  */
 export declare function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<T>;
 /**
  * The template for the MessageBar component.
- * @type {ElementViewTemplate<MessageBar>}
+ * @type ElementViewTemplate
  */
 export declare const template: ElementViewTemplate<MessageBar>;

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

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

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

@@ -2,8 +2,8 @@ import { html } from '@microsoft/fast-element';
 /**
  * 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.
+ * @param T - The type of the MessageBar.
+ * @returns The template for the MessageBar component.
  */
 export function messageBarTemplate() {
     return html `
@@ -19,7 +19,7 @@ export function messageBarTemplate() {
 }
 /**
  * The template for the MessageBar component.
- * @type {ElementViewTemplate<MessageBar>}
+ * @type ElementViewTemplate
  */
 export const template = messageBarTemplate();
 //# sourceMappingURL=message-bar.template.js.map

package/dist/esm/option/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/option/define-async.js

@@ -0,0 +1,4 @@
+import { declarativeDefinition } from './option.definition-async.js';
+import { DropdownOption } from './option.js';
+DropdownOption.define(declarativeDefinition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/option/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/option/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,cAAc,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/option/define.js

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
 import { definition } from './option.definition.js';
-definition.define(FluentDesignSystem.registry);
+import { DropdownOption } from './option.js';
+DropdownOption.define(definition);
 //# sourceMappingURL=define.js.map

package/dist/esm/option/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/option/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/option/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/option/index.d.ts

@@ -3,3 +3,4 @@ export { DropdownOption } from './option.js';
 export { isDropdownOption, type DropdownOptionOptions } from './option.options.js';
 export { styles as DropdownOptionStyles } from './option.styles.js';
 export { template as DropdownOptionTemplate } from './option.template.js';
+export { tagName as OptionTagName } from './option.options.js';

package/dist/esm/option/index.js

@@ -3,4 +3,5 @@ export { DropdownOption } from './option.js';
 export { isDropdownOption } from './option.options.js';
 export { styles as DropdownOptionStyles } from './option.styles.js';
 export { template as DropdownOptionTemplate } from './option.template.js';
+export { tagName as OptionTagName } from './option.options.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/option/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/option/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAA8B,MAAM,qBAAqB,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/option/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAA8B,MAAM,qBAAqB,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/option/option.d.ts

@@ -7,8 +7,11 @@ import type { Start } from '../patterns/start-end.js';
  * @tag fluent-dropdown-option
  *
  * @slot - The default slot for the option's content.
+ * @slot start - Optional content shown at the start of the option.
  * @slot checked-indicator - The checked indicator.
  * @slot description - Optional description content.
+ * @csspart content - The wrapper for the option content.
+ * @csspart description - The wrapper for the option description.
  *
  * @remarks
  * To support single and multiple selection modes with the {@link (BaseDropdown:class)} element, the Option element

package/dist/esm/option/option.definition-async.d.ts

@@ -0,0 +1,10 @@
+import { type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+/**
+ * The async definition configuration for the `<fluent-option>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const declarativeDefinition: PartialFASTElementDefinition;

package/dist/esm/option/option.definition-async.js

@@ -0,0 +1,17 @@
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './option.options.js';
+/**
+ * The async definition configuration for the `<fluent-option>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const declarativeDefinition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
+    template: declarativeTemplate(),
+};
+//# sourceMappingURL=option.definition-async.js.map