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

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

@@ -1,13 +1,7 @@
 import { elements, html, ref, slotted } from '@microsoft/fast-element';
 export function menuTemplate() {
     return html `
-    <template
-      ?open-on-hover="${x => x.openOnHover}"
-      ?open-on-context="${x => x.openOnContext}"
-      ?close-on-scroll="${x => x.closeOnScroll}"
-      ?persist-on-item-click="${x => x.persistOnItemClick}"
-      @keydown="${(x, c) => x.menuKeydownHandler(c.event)}"
-    >
+    <template @keydown="${(x, c) => x.menuKeydownHandler(c.event)}">
       <slot name="primary-action" ${ref('primaryAction')}></slot>
       <slot name="trigger" ${slotted({ property: 'slottedTriggers', filter: elements() })}></slot>
       <slot ${slotted({ property: 'slottedMenuList', filter: elements() })}></slot>

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

@@ -1 +1 @@
-{"version":3,"file":"menu.template.js","sourceRoot":"","sources":["../../../src/menu/menu.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA4B,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGjG,MAAM,UAAU,YAAY;IAC1B,OAAO,IAAI,CAAG;;wBAEQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;0BAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;0BACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;gCACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB;kBACvC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;;oCAEtC,GAAG,CAAC,eAAe,CAAC;6BAC3B,OAAO,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;cAC3E,OAAO,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;;GAEvE,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAA8B,YAAY,EAAE,CAAC"}
+{"version":3,"file":"menu.template.js","sourceRoot":"","sources":["../../../src/menu/menu.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA4B,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGjG,MAAM,UAAU,YAAY;IAC1B,OAAO,IAAI,CAAG;0BACU,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;oCAC9C,GAAG,CAAC,eAAe,CAAC;6BAC3B,OAAO,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;cAC3E,OAAO,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;;GAEvE,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAA8B,YAAY,EAAE,CAAC"}

package/dist/esm/menu-button/define-async.d.ts

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

package/dist/esm/menu-button/define-async.js

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

package/dist/esm/menu-button/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/menu-button/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/menu-button/define.js

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

package/dist/esm/menu-button/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/menu-button/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/menu-button/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/menu-button/index.d.ts

@@ -4,3 +4,4 @@ export { MenuButton } from './menu-button.js';
 export { MenuButtonAppearance, MenuButtonShape, MenuButtonSize } from './menu-button.options.js';
 export type { MenuButtonOptions } from './menu-button.options.js';
 export { template as MenuButtonTemplate } from './menu-button.template.js';
+export { tagName as MenuButtonTagName } from './menu-button.options.js';

package/dist/esm/menu-button/index.js

@@ -3,4 +3,5 @@ export { definition as MenuButtonDefinition } from './menu-button.definition.js'
 export { MenuButton } from './menu-button.js';
 export { MenuButtonAppearance, MenuButtonShape, MenuButtonSize } from './menu-button.options.js';
 export { template as MenuButtonTemplate } from './menu-button.template.js';
+export { tagName as MenuButtonTagName } from './menu-button.options.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/menu-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEjG,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEjG,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/esm/menu-button/menu-button.bench.d.ts

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

package/dist/esm/menu-button/menu-button.bench.js

@@ -1,6 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './menu-button.definition.js';
-definition.define(FluentDesignSystem.registry);
+import './define.js';
 const itemRenderer = () => {
     const btn = document.createElement('fluent-menu-button');
     btn.appendChild(document.createTextNode('Menu button'));

package/dist/esm/menu-button/menu-button.bench.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-button.bench.js","sourceRoot":"","sources":["../../../src/menu-button/menu-button.bench.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;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACzD,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IACxD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"menu-button.bench.js","sourceRoot":"","sources":["../../../src/menu-button/menu-button.bench.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACzD,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IACxD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/menu-button/menu-button.definition-async.d.ts

@@ -0,0 +1,10 @@
+import { type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+/**
+ * The async definition configuration for the `<fluent-menu-button>` 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/menu-button/menu-button.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 './menu-button.options.js';
+/**
+ * The async definition configuration for the `<fluent-menu-button>` 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=menu-button.definition-async.js.map

package/dist/esm/menu-button/menu-button.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button.definition-async.js","sourceRoot":"","sources":["../../../src/menu-button/menu-button.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/menu-button/menu-button.definition.d.ts

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

package/dist/esm/menu-button/menu-button.definition.js

@@ -1,15 +1,16 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { styles } from '../button/button.styles.js';
-import { MenuButton } from './menu-button.js';
+import { tagName } from './menu-button.options.js';
+import { styles } from './menu-button.styles.js';
 import { template } from './menu-button.template.js';
 /**
+ * The definition for the `<fluent-menu-button>` element.
+ *
  * @public
- * @remarks
- * HTML Element: \<fluent-button\>
  */
-export const definition = MenuButton.compose({
-    name: `${FluentDesignSystem.prefix}-menu-button`,
-    template,
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
     styles,
-});
+    template,
+};
 //# sourceMappingURL=menu-button.definition.js.map

package/dist/esm/menu-button/menu-button.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-button.definition.js","sourceRoot":"","sources":["../../../src/menu-button/menu-button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,cAAc;IAChD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"menu-button.definition.js","sourceRoot":"","sources":["../../../src/menu-button/menu-button.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/menu-button/menu-button.options.d.ts

@@ -1,5 +1,5 @@
 import type { ButtonOptions } from '../button/button.options.js';
-import type { ValuesOf } from '../utils/index.js';
+import type { ValuesOf } from '../utils/typings.js';
 /**
  * Menu Button Appearance constants
  * @public
@@ -44,3 +44,9 @@ export declare const MenuButtonSize: {
  */
 export type MenuButtonSize = ValuesOf<typeof MenuButtonSize>;
 export type { ButtonOptions as MenuButtonOptions };
+/**
+ * The tag name for the menu button element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-menu-button";

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

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 import { ButtonAppearance, ButtonShape, ButtonSize } from '../button/button.options.js';
 /**
  * Menu Button Appearance constants
@@ -14,4 +15,10 @@ export const MenuButtonShape = ButtonShape;
  * @public
  */
 export const MenuButtonSize = ButtonSize;
+/**
+ * The tag name for the menu button element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-menu-button`;
 //# sourceMappingURL=menu-button.options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu-button.options.js","sourceRoot":"","sources":["../../../src/menu-button/menu-button.options.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAGxF;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,gBAAgB,CAAC;AAQrD;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC;AAQ3C;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAAC"}
+{"version":3,"file":"menu-button.options.js","sourceRoot":"","sources":["../../../src/menu-button/menu-button.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAGxF;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,gBAAgB,CAAC;AAQrD;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,WAAW,CAAC;AAQ3C;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAAC;AAUzC;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,cAAuB,CAAC"}

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

@@ -0,0 +1,268 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
+
+:host {
+  --icon-spacing: var(--spacingHorizontalSNudge);
+  position: relative;
+  contain: layout style;
+  vertical-align: middle;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+  text-align: center;
+  text-decoration-line: none;
+  margin: 0;
+  min-height: 32px;
+  outline-style: none;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+  padding: 0 var(--spacingHorizontalM);
+  min-width: 96px;
+  border-radius: var(--borderRadiusMedium);
+  font-size: var(--fontSizeBase300);
+  font-family: var(--fontFamilyBase);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightBase300);
+  transition-duration: var(--durationFaster);
+  transition-property: background, border, color;
+  transition-timing-function: var(--curveEasyEase);
+  cursor: pointer;
+  user-select: none;
+}
+
+.content {
+  display: inherit;
+}
+
+:host(:hover) {
+  background-color: var(--colorNeutralBackground1Hover);
+  color: var(--colorNeutralForeground1Hover);
+  border-color: var(--colorNeutralStroke1Hover);
+}
+
+:host(:hover:active) {
+  background-color: var(--colorNeutralBackground1Pressed);
+  border-color: var(--colorNeutralStroke1Pressed);
+  color: var(--colorNeutralForeground1Pressed);
+  outline-style: none;
+}
+
+:host(:focus-visible) {
+  border-color: var(--colorTransparentStroke);
+  outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
+  box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: 0.01ms;
+  }
+}
+
+::slotted(svg) {
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+  fill: currentColor;
+}
+
+::slotted([slot='start']) {
+  margin-inline-end: var(--icon-spacing);
+}
+
+::slotted([slot='end']),
+[slot='end'] {
+  flex-shrink: 0;
+  margin-inline-start: var(--icon-spacing);
+}
+
+:host([icon-only]) {
+  min-width: 32px;
+  max-width: 32px;
+}
+
+:host([size='small']) {
+  --icon-spacing: var(--spacingHorizontalXS);
+  min-height: 24px;
+  min-width: 64px;
+  padding: 0 var(--spacingHorizontalS);
+  border-radius: var(--borderRadiusSmall);
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  font-weight: var(--fontWeightRegular);
+}
+
+:host([size='small'][icon-only]) {
+  min-width: 24px;
+  max-width: 24px;
+}
+
+:host([size='large']) {
+  min-height: 40px;
+  border-radius: var(--borderRadiusLarge);
+  padding: 0 var(--spacingHorizontalL);
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
+
+:host([size='large'][icon-only]) {
+  min-width: 40px;
+  max-width: 40px;
+}
+
+:host([size='large']) ::slotted(svg) {
+  font-size: 24px;
+  height: 24px;
+  width: 24px;
+}
+
+:host(:is([shape='circular'], [shape='circular']:focus-visible)) {
+  border-radius: var(--borderRadiusCircular);
+}
+
+:host(:is([shape='square'], [shape='square']:focus-visible)) {
+  border-radius: var(--borderRadiusNone);
+}
+
+:host([appearance='primary']) {
+  background-color: var(--colorBrandBackground);
+  color: var(--colorNeutralForegroundOnBrand);
+  border-color: transparent;
+}
+
+:host([appearance='primary']:hover) {
+  background-color: var(--colorBrandBackgroundHover);
+}
+
+:host([appearance='primary']:is(:hover, :hover:active):not(:focus-visible)) {
+  border-color: transparent;
+}
+
+:host([appearance='primary']:is(:hover, :hover:active)) {
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([appearance='primary']:hover:active) {
+  background-color: var(--colorBrandBackgroundPressed);
+}
+
+:host([appearance='primary']:focus-visible) {
+  border-color: var(--colorNeutralForegroundOnBrand);
+  box-shadow: var(--shadow2), 0 0 0 2px var(--colorStrokeFocus2);
+}
+
+:host([appearance='outline']) {
+  background-color: var(--colorTransparentBackground);
+}
+
+:host([appearance='outline']:hover) {
+  background-color: var(--colorTransparentBackgroundHover);
+}
+
+:host([appearance='outline']:hover:active) {
+  background-color: var(--colorTransparentBackgroundPressed);
+}
+
+:host([appearance='subtle']) {
+  background-color: var(--colorSubtleBackground);
+  color: var(--colorNeutralForeground2);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']:hover) {
+  background-color: var(--colorSubtleBackgroundHover);
+  color: var(--colorNeutralForeground2Hover);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']:hover:active) {
+  background-color: var(--colorSubtleBackgroundPressed);
+  color: var(--colorNeutralForeground2Pressed);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']:hover) ::slotted(svg) {
+  fill: var(--colorNeutralForeground2BrandHover);
+}
+
+:host([appearance='subtle']:hover:active) ::slotted(svg) {
+  fill: var(--colorNeutralForeground2BrandPressed);
+}
+
+:host([appearance='transparent']) {
+  background-color: var(--colorTransparentBackground);
+  color: var(--colorNeutralForeground2);
+}
+
+:host([appearance='transparent']:hover) {
+  background-color: var(--colorTransparentBackgroundHover);
+  color: var(--colorNeutralForeground2BrandHover);
+}
+
+:host([appearance='transparent']:hover:active) {
+  background-color: var(--colorTransparentBackgroundPressed);
+  color: var(--colorNeutralForeground2BrandPressed);
+}
+
+:host(:is([appearance='transparent'], [appearance='transparent']:is(:hover, :active))) {
+  border-color: transparent;
+}
+
+:host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])),
+:host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable]):hover),
+:host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable]):hover:active) {
+  background-color: var(--colorNeutralBackgroundDisabled);
+  border-color: var(--colorNeutralStrokeDisabled);
+  color: var(--colorNeutralForegroundDisabled);
+  cursor: not-allowed;
+}
+
+:host([appearance='primary']:is(:disabled, [disabled-focusable])),
+:host([appearance='primary']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+  border-color: transparent;
+}
+
+:host([appearance='outline']:is(:disabled, [disabled-focusable])),
+:host([appearance='outline']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+  background-color: var(--colorTransparentBackground);
+}
+
+:host([appearance='subtle']:is(:disabled, [disabled-focusable])),
+:host([appearance='subtle']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+  background-color: var(--colorTransparentBackground);
+  border-color: transparent;
+}
+
+:host([appearance='transparent']:is(:disabled, [disabled-focusable])),
+:host([appearance='transparent']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+  border-color: transparent;
+  background-color: var(--colorTransparentBackground);
+}
+
+@media (forced-colors: active) {
+  :host {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  :host(:is(:hover, :focus-visible)) {
+    border-color: Highlight !important;
+  }
+
+  :host([appearance='primary']:not(:is(:hover, :focus-visible))) {
+    background-color: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+
+  :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])) {
+    background-color: ButtonFace;
+    color: GrayText;
+    border-color: ButtonText;
+  }
+}

package/dist/esm/{tab-panel/tab-panel.styles.d.ts → menu-button/menu-button.styles.d.ts}

@@ -1 +1,6 @@
+/**
+ * Styles for the MenuButton component
+ *
+ * @public
+ */
 export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,8 @@
+import { styles as ButtonStyles } from '../button/button.styles.js';
+/**
+ * Styles for the MenuButton component
+ *
+ * @public
+ */
+export const styles = ButtonStyles;
+//# sourceMappingURL=menu-button.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button.styles.js","sourceRoot":"","sources":["../../../src/menu-button/menu-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC"}

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

@@ -0,0 +1,25 @@
+<f-template name="fluent-menu-button" shadowrootmode="open">
+  <template @click="{clickHandler($e)}" @keypress="{keypressHandler($e)}">
+    {{styles}}
+    <slot name="start" f-ref="{start}"></slot>
+    <span class="content" part="content">
+      <slot f-slotted="{defaultSlottedContent}"></slot>
+    </span>
+    <slot name="end" f-ref="{end}">
+      <svg
+        slot="end"
+        fill="currentColor"
+        aria-hidden="true"
+        width="1em"
+        height="1em"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0Z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </slot>
+  </template>
+</f-template>

package/dist/esm/menu-item/define-async.d.ts

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

package/dist/esm/menu-item/define-async.js

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

package/dist/esm/menu-item/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/menu-item/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,QAAQ,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/menu-item/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/menu-item/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/menu-item/index.d.ts

@@ -4,3 +4,4 @@ export type { MenuItemColumnCount, MenuItemOptions } from './menu-item.js';
 export { MenuItemRole, roleForMenuItem } from './menu-item.options.js';
 export { styles as MenuItemStyles } from './menu-item.styles.js';
 export { template as MenuItemTemplate } from './menu-item.template.js';
+export { tagName as MenuItemTagName } from './menu-item.options.js';

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

@@ -3,4 +3,5 @@ export { MenuItem } from './menu-item.js';
 export { MenuItemRole, roleForMenuItem } from './menu-item.options.js';
 export { styles as MenuItemStyles } from './menu-item.styles.js';
 export { template as MenuItemTemplate } from './menu-item.template.js';
+export { tagName as MenuItemTagName } from './menu-item.options.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/esm/menu-item/menu-item.bench.d.ts

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

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

@@ -1,6 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './menu-item.definition.js';
-definition.define(FluentDesignSystem.registry);
+import './define.js';
 const itemRenderer = () => {
     const menuItem = document.createElement('fluent-menu-item');
     menuItem.appendChild(document.createTextNode('Menu item'));

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.bench.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;IAC3D,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"menu-item.bench.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.bench.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;IAC3D,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/menu-item/menu-item.d.ts

@@ -26,7 +26,7 @@ export type MenuItemOptions = StartEndOptions<MenuItem> & {
  * @slot submenu-glyph - The submenu expand/collapse indicator
  * @slot submenu - Used to nest menu's within menu items
  * @csspart content - The element wrapping the menu item content
- * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+ * @fires { Event } change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
  *
  * @public
  */
@@ -124,7 +124,9 @@ export declare class MenuItem extends FASTElement {
      * Setup required ARIA on open/close
      * @internal
      */
-    toggleHandler: (e: Event) => void;
+    handleToggle: (e: Event) => void;
+    /** @internal */
+    handleSubmenuFocusOut: (e: FocusEvent) => void;
     /**
      * @internal
      */

package/dist/esm/menu-item/menu-item.definition-async.d.ts

@@ -0,0 +1,10 @@
+import { type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+/**
+ * The async definition configuration for the `<fluent-menu-item>` 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/menu-item/menu-item.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 './menu-item.options.js';
+/**
+ * The async definition configuration for the `<fluent-menu-item>` 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=menu-item.definition-async.js.map

package/dist/esm/menu-item/menu-item.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.definition-async.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.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,wBAAwB,CAAC;AAEjD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiC;IACjE,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,QAAQ,EAAE,mBAAmB,EAAE;CAChC,CAAC"}