@fluentui/web-components 1.6.3 → 2.1.0

package/dist/esm/dialog/dialog.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { elevation } from '../styles';
+import { elevationShadowDialog } from '../styles';
 import { fillColor, layerCornerRadius, strokeWidth } from '../design-tokens';
 export const dialogStyles = (context, definition) => css `
   :host([hidden]) {
@@ -7,7 +7,6 @@ export const dialogStyles = (context, definition) => css `
   }
 
   :host {
-    --elevation: 14;
     --dialog-height: 480px;
     --dialog-width: 640px;
     display: block;
@@ -35,7 +34,7 @@ export const dialogStyles = (context, definition) => css `
   }
 
   .control {
-    ${elevation}
+    box-shadow: ${elevationShadowDialog};
     margin-top: auto;
     margin-bottom: auto;
     border-radius: calc(${layerCornerRadius} * 1px);

package/dist/esm/divider/divider.styles.js

@@ -1,11 +1,10 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { designUnit, neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
+import { neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
 export const dividerStyles = (context, definition) => css `
     ${display('block')} :host {
       box-sizing: content-box;
       height: 0;
-      margin: calc(${designUnit} * 1px) 0;
       border: none;
       border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
     }

package/dist/esm/flipper/flipper.styles.js

@@ -2,120 +2,83 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles';
-import { disabledOpacity, focusStrokeOuter, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeHover, neutralStrokeRest, strokeWidth, } from '../design-tokens';
+import { controlCornerRadius, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillRest, neutralFillStrongActive, neutralFillStrongHover, neutralFillStrongRest, neutralStrokeControlRest, } from '../design-tokens';
 export const flipperStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
-      width: calc(${heightNumber} * 1px);
-      height: calc(${heightNumber} * 1px);
+      height: calc((${heightNumber} + ${designUnit}) * 1px);
       justify-content: center;
       align-items: center;
-      margin: 0;
-      position: relative;
       fill: currentcolor;
-      color: ${neutralForegroundRest};
-      background: transparent;
-      border: none;
+      color: ${neutralFillStrongRest};
+      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
+        border-box ${neutralStrokeControlRest};
+      box-sizing: border-box;
+      border: calc(${focusStrokeWidth} * 1px) solid transparent;
+      border-radius: calc(${controlCornerRadius} * 1px);
       outline: none;
       padding: 0;
     }
 
-    :host::before {
-      content: '';
-      opacity: 0.8;
-      background: ${neutralFillStealthRest};
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
-      border-radius: 50%;
-      position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-      bottom: 0;
-      transition: all 0.1s ease-in-out;
+    :host(.disabled) {
+      opacity: ${disabledOpacity};
+      cursor: ${disabledCursor};
     }
 
     .next,
     .previous {
-      position: relative;
-      ${
-/* Glyph size and margin-left is temporary -
-    replace when adaptive typography is figured out */ ''} width: 16px;
-      height: 16px;
+      display: flex;
     }
 
-    :host(.disabled) {
-      opacity: ${disabledOpacity};
-      cursor: ${disabledCursor};
-    }
-
-    :host(:hover) {
+    :host(:not(.disabled):hover) {
       cursor: pointer;
     }
 
-    :host(:hover)::before {
-      background: ${neutralFillStealthHover};
-      border-color: ${neutralStrokeHover};
+    :host(:not(.disabled):hover) {
+      color: ${neutralFillStrongHover};
     }
 
-    :host(:${focusVisible}) {
-      outline: none;
+    :host(:not(.disabled):active) {
+      color: ${neutralFillStrongActive};
     }
 
-    :host(:${focusVisible})::before {
-      box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;
+    :host(:${focusVisible}) {
       border-color: ${focusStrokeOuter};
     }
 
-    :host(:active)::before {
-      background: ${neutralFillStealthActive};
-      border-color: ${neutralStrokeActive};
-    }
-
     :host::-moz-focus-inner {
       border: 0;
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
         :host {
-          background: ${SystemColors.Canvas};
+          background: ${SystemColors.ButtonFace};
+          border-color: ${SystemColors.ButtonText};
         }
         :host .next,
         :host .previous {
           color: ${SystemColors.ButtonText};
           fill: currentcolor;
         }
-        :host::before {
-          background: ${SystemColors.Canvas};
-          border-color: ${SystemColors.ButtonText};
-        }
-        :host(:hover)::before {
-          forced-color-adjust: none;
+        :host(:not(.disabled):hover) {
           background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.ButtonText};
-          opacity: 1;
         }
-        :host(:hover) .next,
-        :host(:hover) .previous {
-          forced-color-adjust: none;
+        :host(:not(.disabled):hover) .next,
+        :host(:not(.disabled):hover) .previous {
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }
         :host(.disabled) {
           opacity: 1;
         }
-        :host(.disabled)::before,
-        :host(.disabled:hover)::before,
+        :host(.disabled),
         :host(.disabled) .next,
-        :host(.disabled) .previous,
-        :host(.disabled:hover) .next,
-        :host(.disabled:hover) .previous {
-          forced-color-adjust: none;
-          background: ${SystemColors.Canvas};
+        :host(.disabled) .previous {
           border-color: ${SystemColors.GrayText};
           color: ${SystemColors.GrayText};
-          fill: ${SystemColors.GrayText};
+          fill: currentcolor;
         }
-        :host(:${focusVisible})::before {
+        :host(:${focusVisible}) {
           forced-color-adjust: none;
           border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
+          box-shadow: 0 0 0 2px ${SystemColors.ButtonFace}, 0 0 0 4px ${SystemColors.ButtonText};
         }
       `));

package/dist/esm/flipper/index.js

@@ -14,17 +14,13 @@ export const fluentFlipper = Flipper.compose({
     template,
     styles,
     next: `
-    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M4.023 15.273L11.29 8 4.023.727l.704-.704L12.71 8l-7.984 7.977-.704-.704z"
-        />
+    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+      <path d="M7.57 11.84A1 1 0 016 11.02V4.98a1 1 0 011.57-.82l3.79 2.62c.85.59.85 1.85 0 2.44l-3.79 2.62z"/>
     </svg>
   `,
     previous: `
-    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-        <path
-            d="M11.273 15.977L3.29 8 11.273.023l.704.704L4.71 8l7.266 7.273-.704.704z"
-        />
+    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9.43 11.84a1 1 0 001.57-.82V4.98a1 1 0 00-1.57-.82L5.64 6.78c-.85.59-.85 1.85 0 2.44l3.79 2.62z"/>
     </svg>
   `,
 });

package/dist/esm/listbox/listbox.styles.js

@@ -1,43 +1,22 @@
 import { css } from '@microsoft/fast-element';
-import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, neutralLayerFloating, neutralStrokeRest, strokeWidth, } from '../design-tokens';
+import { display, ListboxOption } from '@microsoft/fast-foundation';
+import { controlCornerRadius, designUnit, focusStrokeOuter, neutralStrokeRest, strokeWidth, } from '../design-tokens';
 export const listboxStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
-      background: ${neutralLayerFloating};
       border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
       border-radius: calc(${controlCornerRadius} * 1px);
       box-sizing: border-box;
       flex-direction: column;
       padding: calc(${designUnit} * 1px) 0;
+      outline: none;
+    }
+
+    ::slotted(${context.tagFor(ListboxOption)}) {
+      margin: 0 calc(${designUnit} * 1px);
     }
 
     :host(:focus-within:not([disabled])) {
       border-color: ${focusStrokeOuter};
       box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;
     }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]) {
-          background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-
-        :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]) {
-          background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-
-        ::slotted([role='option']:not([aria-selected='true']):not([disabled]):hover) {
-          forced-color-adjust: none;
-          color: ${SystemColors.ButtonText};
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.Highlight};
-          box-shadow: none;
-        }
-      `));
+  `;

package/dist/esm/listbox-option/listbox-option.styles.js

@@ -2,10 +2,12 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles/size';
-import { accentFillActive, accentFillFocus, accentFillHover, accentFillRest, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeInner, focusStrokeOuter, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentFocus, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillRest, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthFocus, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
 export const optionStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
+      position: relative;
       font-family: ${bodyFont};
+      background: ${neutralFillStealthRest};
       border-radius: calc(${controlCornerRadius} * 1px);
       border: calc(${focusStrokeWidth} * 1px) solid transparent;
       box-sizing: border-box;
@@ -15,7 +17,6 @@ export const optionStyles = (context, definition) => css `
       font-size: ${typeRampBaseFontSize};
       height: calc(${heightNumber} * 1px);
       line-height: ${typeRampBaseLineHeight};
-      margin: 0 calc(${designUnit} * 1px);
       outline: none;
       overflow: hidden;
       align-items: center;
@@ -24,36 +25,58 @@ export const optionStyles = (context, definition) => css `
       white-space: nowrap;
     }
 
+    :host::before {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      top: calc((${heightNumber} / 4) - ${focusStrokeWidth} * 1px);
+      width: 3px;
+      height: calc((${heightNumber} / 2) * 1px);
+      background: transparent;
+      border-radius: calc(${controlCornerRadius} * 1px);
+    }
+
+    :host(:not([disabled]):hover) {
+      background: ${neutralFillStealthHover};
+    }
+
+    :host(:not([disabled]):active) {
+      background: ${neutralFillStealthActive};
+    }
+
+    :host(:not([disabled]):active)::before {
+      background: ${accentFillRest};
+      height: calc(((${heightNumber} / 2) - 6) * 1px);
+    }
+
+    :host([aria-selected='true'])::before {
+      background: ${accentFillRest};
+    }
+
     :host(:${focusVisible}) {
-      box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${focusStrokeInner};
       border-color: ${focusStrokeOuter};
-      background: ${accentFillFocus};
-      color: ${foregroundOnAccentFocus};
+      background: ${neutralFillStealthFocus};
     }
 
     :host([aria-selected='true']) {
-      background: ${accentFillRest};
-      color: ${foregroundOnAccentRest};
+      background: ${neutralFillSecondaryRest};
     }
 
-    :host(:hover) {
-      background: ${accentFillHover};
-      color: ${foregroundOnAccentHover};
+    :host(:not([disabled])[aria-selected='true']:hover) {
+      background: ${neutralFillSecondaryHover};
     }
 
-    :host(:active) {
-      background: ${accentFillActive};
-      color: ${foregroundOnAccentActive};
+    :host(:not([disabled])[aria-selected='true']:active) {
+      background: ${neutralFillSecondaryActive};
     }
 
-    :host(:not([aria-selected='true']):hover) {
-      background: ${neutralFillHover};
-      color: ${neutralForegroundRest};
+    :host(:not([disabled]):not([aria-selected='true']):hover) {
+      background: ${neutralFillStealthHover};
     }
 
-    :host(:not([aria-selected='true']):active) {
-      background: ${neutralFillActive};
-      color: ${neutralForegroundRest};
+    :host(:not([disabled]):not([aria-selected='true']):active) {
+      background: ${neutralFillStealthActive};
     }
 
     :host([disabled]) {
@@ -61,10 +84,6 @@ export const optionStyles = (context, definition) => css `
       opacity: ${disabledOpacity};
     }
 
-    :host([disabled]:hover) {
-      background-color: inherit;
-    }
-
     .content {
       grid-column-start: 2;
       justify-self: start;
@@ -78,12 +97,6 @@ export const optionStyles = (context, definition) => css `
       display: flex;
     }
 
-    ::slotted(svg) {
-      ${ /* Glyph size and margin-left is temporary - replace when adaptive typography is figured out */''}
-      height: calc(${designUnit} * 4px);
-      width: calc(${designUnit} * 4px);
-    }
-
     ::slotted([slot='end']) {
       margin-inline-start: 1ch;
     }
@@ -93,17 +106,21 @@ export const optionStyles = (context, definition) => css `
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
         :host {
-          border-color: transparent;
+          background: ${SystemColors.ButtonFace};
+          border-color: ${SystemColors.ButtonFace};
           color: ${SystemColors.ButtonText};
-          forced-color-adjust: none;
         }
-
-        :host(:not([aria-selected='true']):hover),
-        :host([aria-selected='true']) {
+        :host(:not([disabled]):not([aria-selected="true"]):hover),
+        :host(:not([disabled])[aria-selected="true"]:hover),
+        :host([aria-selected="true"]) {
+          forced-color-adjust: none;
           background: ${SystemColors.Highlight};
           color: ${SystemColors.HighlightText};
         }
-
+        :host(:not([disabled]):active)::before,
+        :host([aria-selected='true'])::before {
+          background: ${SystemColors.HighlightText};
+        }
         :host([disabled]),
         :host([disabled]:not([aria-selected='true']):hover) {
           background: ${SystemColors.Canvas};

package/dist/esm/menu/index.js

@@ -1,5 +1,19 @@
-import { Menu, menuTemplate as template } from '@microsoft/fast-foundation';
+import { Menu as FoundationMenu, menuTemplate as template } from '@microsoft/fast-foundation';
+import { fillColor, neutralLayerFloating } from '../design-tokens';
 import { menuStyles as styles } from './menu.styles';
+/**
+ * The Fluent menu class
+ * @public
+ */
+export class Menu extends FoundationMenu {
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        fillColor.setValueFor(this, neutralLayerFloating);
+    }
+}
 /**
  * The Fluent Menu Element. Implements {@link @microsoft/fast-foundation#Menu},
  * {@link @microsoft/fast-foundation#menuTemplate}
@@ -11,6 +25,7 @@ import { menuStyles as styles } from './menu.styles';
  */
 export const fluentMenu = Menu.compose({
     baseName: 'menu',
+    baseClass: FoundationMenu,
     template,
     styles,
 });
@@ -19,8 +34,3 @@ export const fluentMenu = Menu.compose({
  * @public
  */
 export const menuStyles = styles;
-/**
- * Base class for Menu
- * @public
- */
-export { Menu };

package/dist/esm/menu/menu.stories.js

@@ -6,7 +6,14 @@ export default {
 const MenuTemplate = () => `
   <fluent-menu>
     <fluent-menu-item>Menu item 1</fluent-menu-item>
-    <fluent-menu-item>Menu item 2</fluent-menu-item>
+    <fluent-menu-item>
+      Menu item 2
+      <fluent-menu>
+        <fluent-menu-item>Nested Menu item 2.1</fluent-menu-item>
+        <fluent-menu-item>Nested Menu item 2.2</fluent-menu-item>
+        <fluent-menu-item>Nested Menu item 2.3</fluent-menu-item>
+      </fluent-menu>
+    </fluent-menu-item>
     <fluent-menu-item disabled="true">Menu item 3</fluent-menu-item>
     <fluent-menu-item>
       Menu item 4
@@ -18,7 +25,14 @@ export const Menu = MenuTemplate.bind({});
 const example = `
 <fluent-menu>
   <fluent-menu-item>Menu item 1</fluent-menu-item>
-  <fluent-menu-item>Menu item 2</fluent-menu-item>
+  <fluent-menu-item>
+    Menu item 2
+    <fluent-menu>
+      <fluent-menu-item>Nested Menu item 2.1</fluent-menu-item>
+      <fluent-menu-item>Nested Menu item 2.2</fluent-menu-item>
+      <fluent-menu-item>Nested Menu item 2.3</fluent-menu-item>
+    </fluent-menu>
+  </fluent-menu-item>
   <fluent-menu-item disabled="true">Menu item 3</fluent-menu-item>
   <fluent-menu-item>
     Menu item 4

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

@@ -1,31 +1,42 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { elevation } from '../styles/index';
-import { controlCornerRadius, designUnit, layerCornerRadius, neutralLayerFloating, neutralStrokeDividerRest, strokeWidth, } from '../design-tokens';
+import { display, Divider, forcedColorsStylesheetBehavior, MenuItem } from '@microsoft/fast-foundation';
+import { SystemColors } from "@microsoft/fast-web-utilities";
+import { elevationShadowFlyout } from '../styles/index';
+import { designUnit, layerCornerRadius, neutralLayerFloating, neutralStrokeDividerRest, strokeWidth, } from '../design-tokens';
 export const menuStyles = (context, definition) => css `
-      ${display('block')} :host {
-        --elevation: 11;
-        background: ${neutralLayerFloating};
-        border: calc(${strokeWidth} * 1px) solid transparent;
-        border-radius: ${layerCornerRadius};
-        ${elevation}
-        margin: 0;
-        border-radius: calc(${controlCornerRadius} * 1px);
-        padding: calc(${designUnit} * 1px) 0;
-        max-width: 368px;
-        min-width: 64px;
-      }
+    ${display('block')} :host {
+      background: ${neutralLayerFloating};
+      border: calc(${strokeWidth} * 1px) solid transparent;
+      border-radius: calc(${layerCornerRadius} * 1px);
+      box-shadow: ${elevationShadowFlyout};
+      padding: calc(${designUnit} * 1px) 0;
+      max-width: 368px;
+      min-width: 64px;
+    }
 
-      :host([slot='submenu']) {
-        width: max-content;
-        margin: 0 calc(${designUnit} * 1px);
-      }
+    :host([slot='submenu']) {
+      width: max-content;
+      margin: 0 calc(${designUnit} * 2px);
+    }
 
-      ::slotted(hr) {
-        box-sizing: content-box;
-        height: 0;
-        margin: 0;
-        border: none;
-        border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
-      }
-    `;
+    ::slotted(${context.tagFor(MenuItem)}) {
+      margin: 0 calc(${designUnit} * 1px);
+    }
+
+    ::slotted(${context.tagFor(Divider)}) {
+      margin: calc(${designUnit} * 1px) 0;
+    }
+
+    ::slotted(hr) {
+      box-sizing: content-box;
+      height: 0;
+      margin: calc(${designUnit} * 1px) 0;
+      border: none;
+      border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
+    }
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+        :host([slot='submenu']) {
+          background: ${SystemColors.Canvas};
+          border-color: ${SystemColors.CanvasText};
+        }
+      `));

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

@@ -14,45 +14,18 @@ export const fluentMenuItem = MenuItem.compose({
     template,
     styles,
     checkboxIndicator: `
-    <svg
-        aria-hidden="true"
-        part="checkbox-indicator"
-        class="checkbox-indicator"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M8.143 12.6697L15.235 4.5L16.8 5.90363L8.23812 15.7667L3.80005 11.2556L5.27591 9.7555L8.143 12.6697Z"
-        />
+    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+      <path d="M13.86 3.66a.5.5 0 01-.02.7l-7.93 7.48a.6.6 0 01-.84-.02L2.4 9.1a.5.5 0 01.72-.7l2.4 2.44 7.65-7.2a.5.5 0 01.7.02z"/>
     </svg>
   `,
     expandCollapseGlyph: `
-    <svg
-        viewBox="0 0 16 16"
-        xmlns="http://www.w3.org/2000/svg"
-        class="expand-collapse-glyph"
-        part="expand-collapse-glyph"
-    >
-        <path
-            d="M5.00001 12.3263C5.00124 12.5147 5.05566 12.699 5.15699 12.8578C5.25831 13.0167 5.40243 13.1437 5.57273 13.2242C5.74304 13.3047 5.9326 13.3354 6.11959 13.3128C6.30659 13.2902 6.4834 13.2152 6.62967 13.0965L10.8988 8.83532C11.0739 8.69473 11.2153 8.51658 11.3124 8.31402C11.4096 8.11146 11.46 7.88966 11.46 7.66499C11.46 7.44033 11.4096 7.21853 11.3124 7.01597C11.2153 6.81341 11.0739 6.63526 10.8988 6.49467L6.62967 2.22347C6.48274 2.10422 6.30501 2.02912 6.11712 2.00691C5.92923 1.9847 5.73889 2.01628 5.56823 2.09799C5.39757 2.17969 5.25358 2.30817 5.153 2.46849C5.05241 2.62882 4.99936 2.8144 5.00001 3.00369V12.3263Z"
-        />
+    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5.65 3.15a.5.5 0 000 .7L9.79 8l-4.14 4.15a.5.5 0 00.7.7l4.5-4.5a.5.5 0 000-.7l-4.5-4.5a.5.5 0 00-.7 0z"/>
     </svg>
   `,
     radioIndicator: `
-    <svg
-      aria-hidden="true"
-      part="radio-indicator"
-      class="radio-indicator"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M8.143 12.6697L15.235 4.5L16.8 5.90363L8.23812 15.7667L3.80005 11.2556L5.27591 9.7555L8.143 12.6697Z"
-      />
+    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="8" cy="8" r="2"/>
     </svg>
   `,
 });

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

@@ -13,7 +13,7 @@ export default {
 };
 const MenuItemTemplate = ({ checked, disabled }) => `
   <fluent-menu-item
-    ${checked ? `checked="${checked}"` : ''}
+    ${checked ? 'checked role="menuitemcheckbox"' : ''}
     ${disabled ? 'disabled' : ''}
   >Menu item 1</fluent-menu-item>
 `;