@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.70

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

@@ -1,6 +1,12 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
-import { borderRadiusMedium, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Selected, colorNeutralBackgroundDisabled, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground3, colorNeutralForegroundDisabled, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase500, fontWeightRegular, lineHeightBase200, lineHeightBase300, } from '../theme/design-tokens.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { borderRadiusMedium, colorCompoundBrandForeground1Pressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Selected, colorNeutralBackgroundDisabled, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground3, colorNeutralForegroundDisabled, colorStrokeFocus2, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontWeightRegular, lineHeightBase200, lineHeightBase300, } from '../theme/design-tokens.js';
+import { checkedState, disabledState } from '../styles/states/index.js';
+/**
+ * Selector for the `submenu` state.
+ * @public
+ */
+export const submenuState = css.partial `:is([state--submenu], :state(submenu))`;
 /** MenuItem styles
  * @public
  */
@@ -8,176 +14,151 @@ export const styles = css `
   ${display('grid')}
 
   :host {
-    grid-template-columns: 20px 20px auto 20px;
+    --indent: 0;
     align-items: center;
+    background: ${colorNeutralBackground1};
+    border-radius: ${borderRadiusMedium};
+    color: ${colorNeutralForeground2};
+    contain: layout;
+    cursor: pointer;
+    /* Prevent shrinking of MenuItems when max-height is applied to MenuList */
+    flex-shrink: 0;
+    font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
     grid-gap: 4px;
+    grid-template-columns: 20px 20px auto 20px;
     height: 32px;
-    background: var(${colorNeutralBackground1});
-    font: var(${fontWeightRegular}) var(${fontSizeBase300}) / var(${lineHeightBase300}) var(${fontFamilyBase});
-    border-radius: var(${borderRadiusMedium});
-    color: var(${colorNeutralForeground2});
-    padding: 0 10px;
-    cursor: pointer;
     overflow: visible;
-    contain: layout;
+    padding: 0 10px;
   }
 
   :host(:hover) {
-    background: var(${colorNeutralBackground1Hover});
-  }
-
-  .content {
-    white-space: nowrap;
-    flex-grow: 1;
-    grid-column: auto / span 2;
-    padding: 0 2px;
-  }
-
-  .checkbox,
-  .radio {
-    display: none;
-  }
-
-  .input-container,
-  .expand-collapse-glyph-container,
-  ::slotted([slot='start']),
-  ::slotted([slot='end']),
-  :host([checked]) .checkbox,
-  :host([checked]) .radio {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    color: var(${colorNeutralForeground2});
-  }
-
-  .expand-collapse-glyph-container,
-  ::slotted([slot='start']),
-  ::slotted([slot='end']) {
-    height: 32px;
-    font-size: var(${fontSizeBase500});
-    width: fit-content;
-  }
-
-  .input-container {
-    width: 20px;
-  }
-
-  ::slotted([slot='end']) {
-    color: var(${colorNeutralForeground3});
-    font: var(${fontWeightRegular}) var(${fontSizeBase200}) / var(${lineHeightBase200}) var(${fontFamilyBase});
-    white-space: nowrap;
-    grid-column: 4 / span 1;
-    justify-self: flex-end;
-  }
-
-  .expand-collapse-glyph-container {
-    grid-column: 4 / span 1;
-    justify-self: flex-end;
-  }
-
-  :host(:hover) .input-container,
-  :host(:hover) .expand-collapse-glyph-container,
-  :host(:hover) .content {
-    color: var(${colorNeutralForeground2Hover});
-  }
-
-  :host([icon]:hover) ::slotted([slot='start']) {
-    color: var(${colorCompoundBrandForeground1Hover});
+    background: ${colorNeutralBackground1Hover};
+    color: ${colorNeutralForeground2Hover};
   }
 
   :host(:active) {
-    background-color: var(${colorNeutralBackground1Selected});
-  }
-
-  :host(:active) .input-container,
-  :host(:active) .expand-collapse-glyph-container,
-  :host(:active) .content {
-    color: var(${colorNeutralForeground2Pressed});
+    background-color: ${colorNeutralBackground1Selected};
+    color: ${colorNeutralForeground2Pressed};
   }
 
   :host(:active) ::slotted([slot='start']) {
-    color: var(${colorCompoundBrandForeground1Pressed});
-  }
-
-  :host([disabled]) {
-    background-color: var(${colorNeutralBackgroundDisabled});
-  }
-
-  :host([disabled]) .content,
-  :host([disabled]) .expand-collapse-glyph-container,
-  :host([disabled]) ::slotted([slot='end']),
-  :host([disabled]) ::slotted([slot='start']) {
-    color: var(${colorNeutralForegroundDisabled});
-  }
-
-  :host([data-indent]) {
-    display: grid;
+    color: ${colorCompoundBrandForeground1Pressed};
   }
 
-  :host([data-indent='1']) .content {
-    grid-column: 2 / span 1;
+  :host(${disabledState}) {
+    background-color: ${colorNeutralBackgroundDisabled};
+    color: ${colorNeutralForegroundDisabled};
   }
 
-  :host([data-indent='1'][role='menuitemcheckbox']) {
-    display: grid;
+  :host(${disabledState}) ::slotted([slot='start']),
+  :host(${disabledState}) ::slotted([slot='end']) {
+    color: ${colorNeutralForegroundDisabled};
   }
 
-  :host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']) {
-    grid-column: 4 / span 1;
+  :host(:focus-visible) {
+    border-radius: ${borderRadiusMedium};
+    outline: 2px solid ${colorStrokeFocus2};
   }
 
-  :host([data-indent='2'][aria-haspopup='menu']) .expand-collapse-glyph-container {
-    grid-column: 5 / span 1;
+  .content {
+    white-space: nowrap;
+    flex-grow: 1;
+    grid-column: auto / span 2;
+    padding: 0 2px;
   }
 
-  :host([data-indent='1']) .content {
-    grid-column: 2 / span 1;
+  :host(:not(${checkedState})) .indicator,
+  :host(:not(${checkedState})) ::slotted([slot='indicator']),
+  :host(:not(${submenuState})) .submenu-glyph,
+  :host(:not(${submenuState})) ::slotted([slot='submenu-glyph']) {
+    display: none;
   }
 
-  :host([data-indent='1'][role='menuitemcheckbox']) .content,
-  :host([data-indent='1'][role='menuitemradio']) .content {
-    grid-column: auto / span 1;
+  ::slotted([slot='end']) {
+    color: ${colorNeutralForeground3};
+    font: ${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};
+    white-space: nowrap;
   }
 
-  :host([icon]) ::slotted([slot='end']),
-  :host([data-indent='1']) ::slotted([slot='end']) {
-    grid-column: 4 / span 1;
-    justify-self: flex-end;
+  :host([data-indent='1']) {
+    --indent: 1;
   }
 
   :host([data-indent='2']) {
-    display: grid;
+    --indent: 2;
     grid-template-columns: 20px 20px auto auto;
   }
 
-  :host([data-indent='2']) .content {
-    grid-column: 3 / span 1;
-  }
-
-  :host([data-indent='2']) .input-container {
-    grid-column: 1 / span 1;
+  :host(${submenuState}) {
+    grid-template-columns: 20px auto auto 20px;
   }
 
-  :host([data-indent='2']) ::slotted([slot='start']) {
-    grid-column: 2 / span 1;
+  :host([data-indent='2']${submenuState}) {
+    grid-template-columns: 20px 20px auto auto 20px;
   }
 
-  :host([aria-haspopup='menu']) {
-    grid-template-columns: 20px auto auto 20px;
+  .indicator,
+  ::slotted([slot='indicator']) {
+    grid-column: 1 / span 1;
+    width: 20px;
   }
 
-  :host([data-indent='2'][aria-haspopup='menu']) {
-    grid-template-columns: 20px 20px auto auto 20px;
+  ::slotted([slot='start']) {
+    display: inline-flex;
+    grid-column: calc(var(--indent)) / span 1;
   }
 
-  :host([aria-haspopup='menu']) ::slotted([slot='end']) {
-    grid-column: 3 / span 1;
-    justify-self: flex-end;
+  .content {
+    grid-column: calc(var(--indent) + 1) / span 1;
   }
 
-  :host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']) {
-    grid-column: 4 / span 1;
-    justify-self: flex-end;
-  }
-`;
+  ::slotted([slot='end']) {
+    grid-column: calc(var(--indent) + 2) / span 1;
+    justify-self: end;
+  }
+
+  .submenu-glyph,
+  ::slotted([slot='submenu-glyph']) {
+    grid-column: -2 / span 1;
+    justify-self: end;
+  }
+
+  @layer popover {
+    :host {
+      anchor-name: --menu-trigger;
+      position: relative;
+    }
+
+    ::slotted([popover]) {
+      margin: 0;
+      max-height: var(--menu-max-height, auto);
+      position: absolute;
+      position-anchor: --menu-trigger;
+      position-area: inline-end span-block-end;
+      position-try-fallbacks: flip-inline;
+      z-index: 1;
+    }
+
+    ::slotted([popover]:not(:popover-open)) {
+      display: none;
+    }
+
+    ::slotted([popover]:popover-open) {
+      inset: unset;
+    }
+
+    /* Fallback for no anchor-positioning */
+    @supports not (anchor-name: --menu-trigger) {
+      ::slotted([popover]) {
+        align-self: start;
+      }
+    }
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :host(${disabledState}),
+    :host(${disabledState}) ::slotted([slot='start']),
+    :host(${disabledState}) ::slotted([slot='end']) {
+      color: GrayText;
+    }
+  `));
 //# sourceMappingURL=menu-item.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,kCAAkC,EAClC,oCAAoC,EACpC,uBAAuB,EACvB,4BAA4B,EAC5B,+BAA+B,EAC/B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;sBAOG,uBAAuB;gBAC7B,iBAAiB,SAAS,eAAe,WAAW,iBAAiB,SAAS,cAAc;yBACnF,kBAAkB;iBAC1B,uBAAuB;;;;;;;;sBAQlB,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;iBAwBjC,uBAAuB;;;;;;;qBAOnB,eAAe;;;;;;;;;iBASnB,uBAAuB;gBACxB,iBAAiB,SAAS,eAAe,WAAW,iBAAiB,SAAS,cAAc;;;;;;;;;;;;;;iBAc3F,4BAA4B;;;;iBAI5B,kCAAkC;;;;4BAIvB,+BAA+B;;;;;;iBAM1C,8BAA8B;;;;iBAI9B,oCAAoC;;;;4BAIzB,8BAA8B;;;;;;;iBAOzC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE9C,CAAC"}
+{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,kBAAkB,EAClB,oCAAoC,EACpC,uBAAuB,EACvB,4BAA4B,EAC5B,+BAA+B,EAC/B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAExE;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,OAAO,CAAA,wCAAwC,CAAC;AAEhF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKD,uBAAuB;qBACpB,kBAAkB;aAC1B,uBAAuB;;;;;YAKxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;kBASvE,4BAA4B;aACjC,4BAA4B;;;;wBAIjB,+BAA+B;aAC1C,8BAA8B;;;;aAI9B,oCAAoC;;;UAGvC,aAAa;wBACC,8BAA8B;aACzC,8BAA8B;;;UAGjC,aAAa;UACb,aAAa;aACV,8BAA8B;;;;qBAItB,kBAAkB;yBACd,iBAAiB;;;;;;;;;;eAU3B,YAAY;eACZ,YAAY;eACZ,YAAY;eACZ,YAAY;;;;;aAKd,uBAAuB;YACxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;;;;;UAa/E,YAAY;;;;2BAIK,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;YACxB,aAAa;YACb,aAAa;YACb,aAAa;;;GAGtB,CAAC,CACH,CAAC"}

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

@@ -1,10 +1,33 @@
-import { html } from '@microsoft/fast-element';
-import { menuItemTemplate } from '@microsoft/fast-foundation/menu-item.js';
-const Checkmark16Filled = html.partial(`<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
-const chevronRight16Filled = html.partial(`<svg fill="currentColor" class="___12fm75w f1w7gpdv fez10in fg4l7m0" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
+import { html, slotted } from '@microsoft/fast-element';
+import { staticallyCompose } from '../utils/template-helpers.js';
+import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
+import { menuFilter } from './menu-item.js';
+const Checkmark16Filled = html.partial(`<svg class="indicator" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.05 3.49c.28.3.27.77-.04 1.06l-7.93 7.47A.85.85 0 014.9 12L2.22 9.28a.75.75 0 111.06-1.06l2.24 2.27 7.47-7.04a.75.75 0 011.06.04z" fill="currentColor"></path></svg>`);
+const chevronRight16Filled = html.partial(`<svg class="submenu-glyph" fill="currentColor" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.74 3.2a.75.75 0 00-.04 1.06L9.23 8 5.7 11.74a.75.75 0 101.1 1.02l4-4.25a.75.75 0 000-1.02l-4-4.25a.75.75 0 00-1.06-.04z" fill="currentColor"></path></svg>`);
+export function menuItemTemplate(options = {}) {
+    return html `
+    <template
+      @keydown="${(x, c) => x.handleMenuItemKeyDown(c.event)}"
+      @click="${(x, c) => x.handleMenuItemClick(c.event)}"
+      @mouseover="${(x, c) => x.handleMouseOver(c.event)}"
+      @mouseout="${(x, c) => x.handleMouseOut(c.event)}"
+      @toggle="${(x, c) => 
+    // @ts-expect-error - Baseline 2024
+    x.toggleHandler(c.event)}"
+    >
+      <slot name="indicator"> ${staticallyCompose(options.indicator)} </slot>
+      ${startSlotTemplate(options)}
+      <div part="content" class="content">
+        <slot></slot>
+      </div>
+      ${endSlotTemplate(options)}
+      <slot name="submenu-glyph"> ${staticallyCompose(options.submenuGlyph)} </slot>
+      <slot name="submenu" ${slotted({ property: 'slottedSubmenu', filter: menuFilter() })}></slot>
+    </template>
+  `;
+}
 export const template = menuItemTemplate({
-    checkboxIndicator: Checkmark16Filled,
-    expandCollapseGlyph: chevronRight16Filled,
-    radioIndicator: Checkmark16Filled,
+    indicator: Checkmark16Filled,
+    submenuGlyph: chevronRight16Filled,
 });
 //# sourceMappingURL=menu-item.template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.template.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAG3E,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CACpC,wVAAwV,CACzV,CAAC;AACF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CACvC,8UAA8U,CAC/U,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,CAAC;IACtE,iBAAiB,EAAE,iBAAiB;IACpC,mBAAmB,EAAE,oBAAoB;IACzC,cAAc,EAAE,iBAAiB;CAClC,CAAC,CAAC"}
+{"version":3,"file":"menu-item.template.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAuC,MAAM,gBAAgB,CAAC;AAEjF,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CACpC,8TAA8T,CAC/T,CAAC;AACF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CACvC,wTAAwT,CACzT,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAqB,UAA2B,EAAE;IAChF,OAAO,IAAI,CAAG;;kBAEE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,KAAsB,CAAC;gBAC7D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAmB,CAAC;oBAClD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;mBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;iBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAClB,mCAAmC;IACnC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAoB,CAAC;;gCAEf,iBAAiB,CAAC,OAAO,CAAC,SAAS,CAAC;QAC5D,iBAAiB,CAAC,OAAO,CAAC;;;;QAI1B,eAAe,CAAC,OAAO,CAAC;oCACI,iBAAiB,CAAC,OAAO,CAAC,YAAY,CAAC;6BAC9C,OAAO,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC;;GAEvF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,CAAC;IACtE,SAAS,EAAE,iBAAiB;IAC5B,YAAY,EAAE,oBAAoB;CACnC,CAAC,CAAC"}

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

@@ -1,4 +1,4 @@
-export * from './menu-list.js';
+export { MenuList } from './menu-list.js';
 export { template as MenuListTemplate } from './menu-list.template.js';
 export { styles as MenuListStyles } from './menu-list.styles.js';
 export { definition as MenuListDefinition } from './menu-list.definition.js';

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

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

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

@@ -0,0 +1,21 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition as menuItemDefinition } from '../menu-item/menu-item.definition.js';
+import { definition as menuListDefinition } from './menu-list.definition.js';
+menuListDefinition.define(FluentDesignSystem.registry);
+menuItemDefinition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const menuList = document.createElement('fluent-menu-list');
+    const menuItem = document.createElement('fluent-menu-item');
+    const menuItem2 = document.createElement('fluent-menu-item');
+    const menuItem3 = document.createElement('fluent-menu-item');
+    menuItem.appendChild(document.createTextNode('Menu item 1'));
+    menuItem2.appendChild(document.createTextNode('Menu item 2'));
+    menuItem3.appendChild(document.createTextNode('Menu item 3'));
+    menuList.appendChild(menuItem);
+    menuList.appendChild(menuItem2);
+    menuList.appendChild(menuItem3);
+    return menuList;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=menu-list.bench.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-list.bench.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AACxF,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE7E,kBAAkB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AACvD,kBAAkB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAEvD,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE7D,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC7D,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAC9D,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC,CAAC;IAE9D,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAEhC,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

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

@@ -3,10 +3,6 @@ import { MenuList } from './menu-list.js';
 import { styles } from './menu-list.styles.js';
 import { template } from './menu-list.template.js';
 /**
- * The Fluent MenuList Element. Implements {@link @microsoft/fast-foundation#Menu },
- * {@link @microsoft/fast-foundation#menuTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: <fluent-menu-list>

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

@@ -1 +1 @@
-{"version":3,"file":"menu-list.definition.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,YAAY;IAC9C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"menu-list.definition.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,YAAY;IAC9C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}