@fluentui/web-components 3.0.0-beta.8 → 3.0.0-beta.80

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

@@ -1,6 +1,7 @@
 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, submenuState } from '../styles/states/index.js';
 /** MenuItem styles
  * @public
  */
@@ -8,176 +9,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});
+    color: ${colorCompoundBrandForeground1Pressed};
   }
 
-  :host([disabled]) .content,
-  :host([disabled]) .expand-collapse-glyph-container,
-  :host([disabled]) ::slotted([slot='end']),
-  :host([disabled]) ::slotted([slot='start']) {
-    color: var(${colorNeutralForegroundDisabled});
+  :host(${disabledState}) {
+    background-color: ${colorNeutralBackgroundDisabled};
+    color: ${colorNeutralForegroundDisabled};
   }
 
-  :host([data-indent]) {
-    display: grid;
+  :host(${disabledState}) ::slotted([slot='start']),
+  :host(${disabledState}) ::slotted([slot='end']) {
+    color: ${colorNeutralForegroundDisabled};
   }
 
-  :host([data-indent='1']) .content {
-    grid-column: 2 / span 1;
+  :host(:focus-visible) {
+    border-radius: ${borderRadiusMedium};
+    outline: 2px solid ${colorStrokeFocus2};
   }
 
-  :host([data-indent='1'][role='menuitemcheckbox']) {
-    display: grid;
-  }
-
-  :host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']) {
-    grid-column: 4 / span 1;
-  }
-
-  :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,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEtF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKD,uBAAuB;qBACpB,kBAAkB;aAC1B,uBAAuB;;;;;YAKxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;kBASvE,4BAA4B;aACjC,4BAA4B;;;;wBAIjB,+BAA+B;aAC1C,8BAA8B;;;;aAI9B,oCAAoC;;;UAGvC,aAAa;wBACC,8BAA8B;aACzC,8BAA8B;;;UAGjC,aAAa;UACb,aAAa;aACV,8BAA8B;;;;qBAItB,kBAAkB;yBACd,iBAAiB;;;;;;;;;;eAU3B,YAAY;eACZ,YAAY;eACZ,YAAY;eACZ,YAAY;;;;;aAKd,uBAAuB;YACxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;;;;;UAa/E,YAAY;;;;2BAIK,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,65 +1,30 @@
-import { elements, html, ref, slotted, when } from '@microsoft/fast-element';
+import { html, slotted } from '@microsoft/fast-element';
 import { staticallyCompose } from '../utils/template-helpers.js';
 import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
-import { MenuItemRole } from './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>`);
+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
-      aria-haspopup="${x => (x.hasSubmenu ? 'menu' : void 0)}"
-      aria-checked="${x => (x.role !== MenuItemRole.menuitem ? x.checked : void 0)}"
-      aria-disabled="${x => x.disabled}"
-      aria-expanded="${x => x.expanded}"
+    <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)}"
-  >
-          ${when(x => x.role === MenuItemRole.menuitemcheckbox, html `
-              <div part="input-container" class="input-container">
-                <span part="checkbox" class="checkbox">
-                  <slot name="checkbox-indicator"> ${staticallyCompose(options.checkboxIndicator)} </slot>
-                </span>
-              </div>
-            `)}
-          ${when(x => x.role === MenuItemRole.menuitemradio, html `
-              <div part="input-container" class="input-container">
-                <span part="radio" class="radio">
-                  <slot name="radio-indicator"> ${staticallyCompose(options.radioIndicator)} </slot>
-                </span>
-              </div>
-            `)}
-      </div>
+      @toggle="${(x, c) => x.toggleHandler(c.event)}"
+    >
+      <slot name="indicator"> ${staticallyCompose(options.indicator)} </slot>
       ${startSlotTemplate(options)}
-      <span class="content" part="content">
-          <slot></slot>
-      </span>
+      <div part="content" class="content">
+        <slot></slot>
+      </div>
       ${endSlotTemplate(options)}
-      ${when(x => x.hasSubmenu, html `
-          <div part="expand-collapse-glyph-container" class="expand-collapse-glyph-container">
-            <span part="expand-collapse" class="expand-collapse">
-              <slot name="expand-collapse-indicator"> ${staticallyCompose(options.expandCollapseGlyph)} </slot>
-            </span>
-          </div>
-        `)}
-      <span
-          ?hidden="${x => !x.expanded}"
-          class="submenu-container"
-          part="submenu-container"
-          ${ref('submenuContainer')}
-      >
-          <slot name="submenu" ${slotted({
-        property: 'slottedSubmenu',
-        filter: elements("[role='menu']"),
-    })}></slot>
-      </span>
-  </template>
+      <slot name="submenu-glyph"> ${staticallyCompose(options.submenuGlyph)} </slot>
+      <slot name="submenu" ${slotted({ property: 'slottedSubmenu' })}></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,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CACpC,wVAAwV,CACzV,CAAC;AACF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CACvC,8UAA8U,CAC/U,CAAC;AAEF,MAAM,UAAU,gBAAgB,CAAqB,UAA2B,EAAE;IAChF,OAAO,IAAI,CAAG;;uBAEO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;sBACtC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;uBAC3D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACpB,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;;YAExD,IAAI,CACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,gBAAgB,EAC7C,IAAI,CAAU;;;qDAG2B,iBAAiB,CAAC,OAAO,CAAC,iBAAiB,CAAC;;;aAGpF,CACF;YACC,IAAI,CACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,aAAa,EAC1C,IAAI,CAAU;;;kDAGwB,iBAAiB,CAAC,OAAO,CAAC,cAAc,CAAC;;;aAG9E,CACF;;QAEH,iBAAiB,CAAC,OAAO,CAAC;;;;QAI1B,eAAe,CAAC,OAAO,CAAC;QACxB,IAAI,CACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EACjB,IAAI,CAAG;;;wDAGyC,iBAAiB,CAAC,OAAO,CAAC,mBAAmB,CAAC;;;SAG7F,CACF;;qBAEc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ;;;YAGzB,GAAG,CAAC,kBAAkB,CAAC;;iCAEF,OAAO,CAAC;QAC7B,QAAQ,EAAE,gBAAgB;QAC1B,MAAM,EAAE,QAAQ,CAAC,eAAe,CAAC;KAClC,CAAC;;;GAGT,CAAC;AACJ,CAAC;AAED,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;AAG1E,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,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAoB,CAAC;;gCAElC,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,CAAC;;GAEjE,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.js

@@ -1,12 +1,8 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
 import { isHTMLElement, keyArrowDown, keyArrowUp, keyEnd, keyHome } from '@microsoft/fast-web-utilities';
-import { MenuItem, MenuItemRole } from '../menu-item/index.js';
+import { MenuItem } from '../menu-item/menu-item.js';
+import { MenuItemRole } from '../menu-item/menu-item.options.js';
 /**
  * A Menu Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
@@ -16,9 +12,23 @@ import { MenuItem, MenuItemRole } from '../menu-item/index.js';
  * @public
  */
 export class MenuList extends FASTElement {
+    itemsChanged(oldValue, newValue) {
+        // only update children after the component is connected and
+        // the setItems has run on connectedCallback
+        // (menuItems is undefined until then)
+        if (this.$fastController.isConnected && this.menuItems !== undefined) {
+            this.setItems();
+        }
+    }
+    static { this.focusableElementRoles = MenuItemRole; }
     constructor() {
-        super(...arguments);
-        this.expandedItem = null;
+        super();
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
         /**
          * The index of the focusable element in the items array
          * defaults to -1
@@ -38,7 +48,6 @@ export class MenuList extends FASTElement {
          */
         this.handleFocusOut = (e) => {
             if (!this.contains(e.relatedTarget) && this.menuItems !== undefined) {
-                this.collapseExpandedItem();
                 // find our first focusable element
                 const focusIndex = this.menuItems.findIndex(this.isFocusableElement);
                 // set the current focus index's tabindex to -1
@@ -57,34 +66,10 @@ export class MenuList extends FASTElement {
                 targetItem.setAttribute('tabindex', '0');
             }
         };
-        this.handleExpandedChanged = (e) => {
-            if (e.defaultPrevented ||
-                e.target === null ||
-                this.menuItems === undefined ||
-                this.menuItems.indexOf(e.target) < 0) {
-                return;
-            }
-            e.preventDefault();
-            const changedItem = e.target;
-            // closing an expanded item without opening another
-            if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) {
-                this.expandedItem = null;
-                return;
-            }
-            if (changedItem.expanded) {
-                if (this.expandedItem !== null && this.expandedItem !== changedItem) {
-                    this.expandedItem.expanded = false;
-                }
-                this.menuItems[this.focusIndex].setAttribute('tabindex', '-1');
-                this.expandedItem = changedItem;
-                this.focusIndex = this.menuItems.indexOf(changedItem);
-                changedItem.setAttribute('tabindex', '0');
-            }
-        };
         /**
-         * handle change from child element
+         * Handle change from child MenuItem element and set radio group behavior
          */
-        this.changeHandler = (e) => {
+        this.changedMenuItemHandler = (e) => {
             if (this.menuItems === undefined) {
                 return;
             }
@@ -130,14 +115,7 @@ export class MenuList extends FASTElement {
         this.isFocusableElement = (el) => {
             return this.isMenuItemElement(el);
         };
-    }
-    itemsChanged(oldValue, newValue) {
-        // only update children after the component is connected and
-        // the setItems has run on connectedCallback
-        // (menuItems is undefined until then)
-        if (this.$fastController.isConnected && this.menuItems !== undefined) {
-            this.setItems();
-        }
+        this.elementInternals.role = 'menu';
     }
     /**
      * @internal
@@ -149,7 +127,7 @@ export class MenuList extends FASTElement {
             // connect before setting/checking their props/attributes
             this.setItems();
         });
-        this.addEventListener('change', this.changeHandler);
+        this.addEventListener('change', this.changedMenuItemHandler);
     }
     /**
      * @internal
@@ -158,7 +136,7 @@ export class MenuList extends FASTElement {
         super.disconnectedCallback();
         this.removeItemListeners();
         this.menuItems = undefined;
-        this.removeEventListener('change', this.changeHandler);
+        this.removeEventListener('change', this.changedMenuItemHandler);
     }
     /**
      * Focuses the first item in the menu.
@@ -168,17 +146,6 @@ export class MenuList extends FASTElement {
     focus() {
         this.setFocus(0, 1);
     }
-    /**
-     * Collapses any expanded menu items.
-     *
-     * @public
-     */
-    collapseExpandedItem() {
-        if (this.expandedItem !== null) {
-            this.expandedItem.expanded = false;
-            this.expandedItem = null;
-        }
-    }
     /**
      * @internal
      */
@@ -211,7 +178,6 @@ export class MenuList extends FASTElement {
     removeItemListeners(items = this.items) {
         items.forEach(item => {
             item.removeEventListener('focus', this.handleItemFocus);
-            item.removeEventListener('expanded-changed', this.handleExpandedChanged);
             Observable.getNotifier(item).unsubscribe(this, 'hidden');
         });
     }
@@ -224,7 +190,6 @@ export class MenuList extends FASTElement {
         return startSlot ? 1 : 0;
     }
     setItems() {
-        var _a;
         const children = Array.from(this.children);
         this.removeItemListeners(children);
         children.forEach((child) => Observable.getNotifier(child).subscribe(this, 'hidden'));
@@ -237,7 +202,6 @@ export class MenuList extends FASTElement {
         }
         menuItems.forEach((item, index) => {
             item.setAttribute('tabindex', index === 0 ? '0' : '-1');
-            item.addEventListener('expanded-change', this.handleExpandedChanged);
             item.addEventListener('focus', this.handleItemFocus);
         });
         /**
@@ -245,17 +209,20 @@ export class MenuList extends FASTElement {
          * position in the MenuList. Each MenuItem element has a data-indent attribute that is
          * used to set the indent of the element's start slot content.
          */
-        const filteredMenuListItems = (_a = this.menuItems) === null || _a === void 0 ? void 0 : _a.filter(this.isMenuItemElement);
-        filteredMenuListItems === null || filteredMenuListItems === void 0 ? void 0 : filteredMenuListItems.forEach((item, index) => {
-            const indent = filteredMenuListItems === null || filteredMenuListItems === void 0 ? void 0 : filteredMenuListItems.reduce((accum, current) => {
-                const elementValue = MenuList.elementIndent(current);
-                return Math.max(accum, elementValue);
-            }, 0);
+        const filteredMenuListItems = this.menuItems?.filter(this.isMenuItemElement);
+        const indent = filteredMenuListItems?.reduce((accum, current) => {
+            const elementValue = MenuList.elementIndent(current);
+            return Math.max(accum, elementValue);
+        }, 0);
+        filteredMenuListItems?.forEach((item) => {
             if (item instanceof MenuItem) {
                 item.setAttribute('data-indent', `${indent}`);
             }
         });
     }
+    /**
+     * Method for Observable changes to the hidden attribute of child elements
+     */
     handleChange(source, propertyName) {
         if (propertyName === 'hidden') {
             this.setItems();
@@ -284,7 +251,6 @@ export class MenuList extends FASTElement {
         }
     }
 }
-MenuList.focusableElementRoles = MenuItemRole;
 __decorate([
     observable
 ], MenuList.prototype, "items", void 0);