@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.130

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

@@ -1,6 +1,7 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utils/index.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,90 +9,30 @@ export const styles = css `
   ${display('grid')}
 
   :host {
-    grid-template-columns: 20px 20px auto 20px;
+    --indent: 0;
     align-items: center;
-    grid-gap: 4px;
-    height: 32px;
     background: ${colorNeutralBackground1};
-    font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
     border-radius: ${borderRadiusMedium};
     color: ${colorNeutralForeground2};
-    padding: 0 10px;
+    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;
     overflow: visible;
-    contain: layout;
+    padding: 0 10px;
   }
 
   :host(:hover) {
     background: ${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: ${colorNeutralForeground2};
-  }
-
-  .expand-collapse-glyph-container,
-  ::slotted([slot='start']),
-  ::slotted([slot='end']) {
-    height: 32px;
-    font-size: ${fontSizeBase500};
-    width: fit-content;
-  }
-
-  .input-container {
-    width: 20px;
-  }
-
-  ::slotted([slot='end']) {
-    color: ${colorNeutralForeground3};
-    font: ${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${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: ${colorNeutralForeground2Hover};
   }
 
-  :host([icon]:hover) ::slotted([slot='start']) {
-    color: ${colorCompoundBrandForeground1Hover};
-  }
-
   :host(:active) {
     background-color: ${colorNeutralBackground1Selected};
-  }
-
-  :host(:active) .input-container,
-  :host(:active) .expand-collapse-glyph-container,
-  :host(:active) .content {
     color: ${colorNeutralForeground2Pressed};
   }
 
@@ -99,85 +40,120 @@ export const styles = css `
     color: ${colorCompoundBrandForeground1Pressed};
   }
 
-  :host([disabled]) {
+  :host(${disabledState}) {
     background-color: ${colorNeutralBackgroundDisabled};
-  }
-
-  :host([disabled]) .content,
-  :host([disabled]) .expand-collapse-glyph-container,
-  :host([disabled]) ::slotted([slot='end']),
-  :host([disabled]) ::slotted([slot='start']) {
     color: ${colorNeutralForegroundDisabled};
   }
 
-  :host([data-indent]) {
-    display: grid;
-  }
-
-  :host([data-indent='1']) .content {
-    grid-column: 2 / span 1;
-  }
-
-  :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, block-start, block-end;
+      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,mBAAmB,CAAC;AAC5C,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;;;;;;;kBAOD,uBAAuB;YAC7B,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;qBACpE,kBAAkB;aAC1B,uBAAuB;;;;;;;;kBAQlB,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;aAwBjC,uBAAuB;;;;;;;iBAOnB,eAAe;;;;;;;;;aASnB,uBAAuB;YACxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;;;;;;aAc5E,4BAA4B;;;;aAI5B,kCAAkC;;;;wBAIvB,+BAA+B;;;;;;aAM1C,8BAA8B;;;;aAI9B,oCAAoC;;;;wBAIzB,8BAA8B;;;;;;;aAOzC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE1C,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.d.ts

@@ -0,0 +1,4 @@
+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

@@ -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.d.ts

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

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.d.ts

@@ -0,0 +1,80 @@
+import { FASTElement } from '@microsoft/fast-element';
+/**
+ * A Menu Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#menu | ARIA menu }.
+ *
+ * @tag fluent-menu-list
+ *
+ * @slot - The default slot for the menu items
+ *
+ * @public
+ */
+export declare class MenuList extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * @internal
+     */
+    items: HTMLElement[];
+    protected itemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
+    protected menuItems: Element[] | undefined;
+    /**
+     * The index of the focusable element in the items array
+     * defaults to -1
+     */
+    private focusIndex;
+    private static focusableElementRoles;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    readonly isNestedMenu: () => boolean;
+    /**
+     * Focuses the first item in the menu.
+     *
+     * @public
+     */
+    focus(): void;
+    /**
+     * @internal
+     */
+    handleMenuKeyDown(e: KeyboardEvent): void | boolean;
+    /**
+     * if focus is moving out of the menu, reset to a stable initial state
+     * @internal
+     */
+    handleFocusOut: (e: FocusEvent) => void;
+    private handleItemFocus;
+    private removeItemListeners;
+    private static elementIndent;
+    protected setItems(): void;
+    /**
+     * Method for Observable changes to the hidden attribute of child elements
+     */
+    handleChange(source: any, propertyName: string): void;
+    /**
+     * Handle change from child MenuItem element and set radio group behavior
+     */
+    private changedMenuItemHandler;
+    /**
+     * check if the item is a menu item
+     */
+    protected isMenuItemElement: (el: Element) => el is HTMLElement;
+    /**
+     * check if the item is focusable
+     */
+    private isFocusableElement;
+    private setFocus;
+}