[web-components] add 'menuitemcheckbox' and 'menuitemradio' styles to…

… fluent-menu-item (#17305) * add menuitemcheckbox and menuitemradio styling to menu-item * Change files * add high contrast styles
microsoft · Mar 6, 2021 · a8552af · a8552af
1 parent 7101008
commit a8552af
Show file tree

Hide file tree

Showing 6 changed files with 198 additions and 11 deletions.
diff --git a/change/@fluentui-web-components-145a1159-7798-42e8-acf2-7987549c79f3.json b/change/@fluentui-web-components-145a1159-7798-42e8-acf2-7987549c79f3.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add menuitemcheckbox and menuitemradio styling to menu-item",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -98,8 +98,8 @@
   "dependencies": {
     "lodash-es": "^4.17.20",
     "@microsoft/fast-colors": "^5.1.0",
-    "@microsoft/fast-element": "^0.22.2",
-    "@microsoft/fast-foundation": "^1.14.0",
+    "@microsoft/fast-element": "^1.0.0",
+    "@microsoft/fast-foundation": "^1.15.1",
     "tslib": "^1.13.0"
   }
 }
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -83,6 +83,96 @@ export const MenuItemStyles = css`
     :host(:active)::slotted(svg) {
         fill: ${neutralForegroundRestBehavior.var};
     }
+
+
+    :host([role="menuitemcheckbox"]),
+    :host([role="menuitemradio"]) {
+        display: grid;
+        grid-template-columns: auto auto 1fr minmax(42px, auto);
+        align-items: center;
+        min-height: 32px;
+    }
+
+    :host .input-container {
+        display: none;
+    }
+
+    :host([role="menuitemcheckbox"]) .input-container,
+    :host([role="menuitemradio"]) .input-container {
+        display: grid;
+        margin-inline-end: 10px;
+    }
+
+    :host([role="menuitemcheckbox"]) .start,
+    :host([role="menuitemradio"]) .start {
+        grid-column-start: 2;
+        margin-inline-end: 10px;
+    }
+
+    :host([role="menuitemcheckbox"]) .content,
+    :host([role="menuitemradio"]) .content {
+        grid-column-start: 3;
+    }
+
+    :host([role="menuitemcheckbox"]) .end,
+    :host([role="menuitemradio"]) .end {
+        grid-column-start: 4;
+    }
+
+    :host .checkbox,
+    :host .radio {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        width: 20px;
+        height: 20px;
+        box-sizing: border-box;
+        border: calc(var(--outline-width) * 1px) solid ${neutralForegroundRestBehavior.var};
+        outline: none;
+        margin-inline-start: 10px;
+    }
+
+    :host .checkbox {
+        border-radius: calc(var(--corner-radius) * 1px);
+    }
+
+    :host .radio {
+        border-radius: 999px;
+    }
+
+    :host .checkbox-indicator,
+    :host .radio-indicator,
+    ::slotted([slot="checkbox-indicator"]),
+    ::slotted([slot="radio-indicator"]) {
+        display: none;
+    }
+
+    :host([aria-checked="true"]) .checkbox-indicator,
+    :host([aria-checked="true"]) ::slotted([slot="checkbox-indicator"]) {
+        width: 100%;
+        height: 100%;
+        display: block;
+        fill: ${neutralForegroundRestBehavior.var};
+        pointer-events: none;
+    }
+
+    :host([aria-checked="true"]) .radio-indicator {
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        right: 4px;
+        bottom: 4px;
+        border-radius: 999px;
+        display: block;
+        background: ${neutralForegroundRestBehavior.var};
+        pointer-events: none;
+    }
+
+    :host([aria-checked="true"]) ::slotted([slot="radio-indicator"]) {
+        display: block;
+        pointer-events: none;
+    }
 `.withBehaviors(
   neutralFillStealthActiveBehavior,
   neutralFillStealthHoverBehavior,
@@ -126,6 +216,44 @@ export const MenuItemStyles = css`
                 fill: currentcolor;
                 opacity: 1;
             }
+
+            :host .checkbox,
+            :host .radio{
+                border-color: ${SystemColors.ButtonText};
+                background: ${SystemColors.HighlightText};
+            }
+
+            :host([checked="true"]) .checkbox,
+            :host([checked="true"]) .radio {
+                background: ${SystemColors.HighlightText};
+                border-color: ${SystemColors.HighlightText};
+            }
+
+            :host(:hover) .checkbox,
+            :host(:hover) .radio,
+            :host(:${focusVisible}) .checkbox,
+            :host(:${focusVisible}) .radio,
+            :host([checked="true"]:hover) .checkbox,
+            :host([checked="true"]:hover) .radio,
+            :host([checked="true"]:${focusVisible}) .checkbox,
+            :host([checked="true"]:${focusVisible}) .radio {
+                border-color: ${SystemColors.HighlightText};
+            }
+
+            :host([aria-checked="true"]) {
+                background: ${SystemColors.Highlight};
+                color: ${SystemColors.HighlightText};
+            }
+
+            :host([aria-checked="true"]) .checkbox-indicator,
+            :host([aria-checked="true"]) ::slotted([slot="checkbox-indicator"]),
+            :host([aria-checked="true"]) ::slotted([slot="radio-indicator"]) {
+                fill: ${SystemColors.Highlight};
+            }
+
+            :host([aria-checked="true"]) .radio-indicator {
+                background: ${SystemColors.Highlight};
+            }
         `,
   ),
 );
diff --git a/packages/web-components/src/menu/fixtures/menu.html b/packages/web-components/src/menu/fixtures/menu.html
@@ -29,6 +29,53 @@ <h4>With Separator</h4>
     </fluent-menu-item>
   </fluent-menu>
 
+  <h2>With radio buttons and checkboxes</h2>
+  <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 3</fluent-menu-item>
+    <fluent-divider></fluent-divider>
+    <fluent-menu-item role="menuitemcheckbox">Checkbox 1</fluent-menu-item>
+    <fluent-menu-item role="menuitemcheckbox">
+      Checkbox 2
+      <svg slot="checkbox-indicator" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
+        />
+      </svg>
+    </fluent-menu-item>
+    <fluent-divider></fluent-divider>
+    <fluent-menu-item role="menuitemradio">Radio 1.1</fluent-menu-item>
+    <fluent-menu-item role="menuitemradio">Radio 1.2</fluent-menu-item>
+    <fluent-divider></fluent-divider>
+    <fluent-menu-item role="menuitemradio">
+      Radio 2.1
+      <svg slot="start" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
+        />
+      </svg>
+      <svg slot="radio-indicator" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
+        />
+      </svg>
+    </fluent-menu-item>
+    <fluent-menu-item role="menuitemradio">
+      Radio 2.2
+      <svg slot="radio-indicator" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
+        />
+      </svg>
+      <svg slot="end" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
+        />
+      </svg>
+    </fluent-menu-item>
+  </fluent-menu>
+
   <h4>With standard elements</h4>
   <fluent-menu>
     <div role="menuitem">Menu item 1</div>

diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts
@@ -16,6 +16,11 @@ export const MenuStyles = css`
     min-width: 64px;
   }
 
+  :host([slot='submenu']) {
+    width: max-content;
+    margin: 0 calc(var(--design-unit) * 1px);
+  }
+
   ::slotted(hr) {
     box-sizing: content-box;
     height: 0;

diff --git a/yarn.lock b/yarn.lock
@@ -2615,17 +2615,17 @@
   resolved "https://registry.yarnpkg.com/@microsoft/fast-colors/-/fast-colors-5.1.0.tgz#f62ce25a800e6b413d3aa562e8416cdc1ed9131c"
   integrity sha512-u4R/sfF4SoKSAyDWJaBSDuVo4aGf1BXntlEWukC+1ubH36C6JmmdLSyyip5TQZiTqjQIy3uctcbepPi7oGI0Rw==
 
-"@microsoft/fast-element@^0.22.2":
-  version "0.22.2"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.22.2.tgz#69fca858e707e916d626e854677d5a813d20372c"
-  integrity sha512-CG5ZrCGz7PoNA1LJY2QisnQGybTXphsu+SaP3jcPxPUtQSNYqM0jSbny8RslaWDw/MrwjDy6dchZWq2113WgfQ==
+"@microsoft/fast-element@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.0.0.tgz#514d5d41e938e5fb93f32bad5a1411bd905ec978"
+  integrity sha512-MyO3QRyxK0Yrtn9vpuGP9lf1jM5fSOOcOI72KfRhYURuk+XP3F3phCzdByVKTnlAY0V6ojbMdwaRdm3uLr9NZg==
 
-"@microsoft/fast-foundation@^1.14.0":
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.14.0.tgz#f3806fbf3d817516e891f185ef5189fc789f5c1e"
-  integrity sha512-7RpNkG9jJhgs9ZEOmpXgKrCJy6iN2dNFQkPkYrA+p1VV5/xKAZm5Ag0vS8FrHtkmB4OWLhhmWqvUtQpI0qjJYA==
+"@microsoft/fast-foundation@^1.15.1":
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.15.1.tgz#3e4e9ac20f8563e29ef397195f2b1e0afdcc7b22"
+  integrity sha512-Ez3UMFOQkk/7OwsSPrK9720/+Wx/4hsakAPiStW1RB41BVfyyy9XUw4oi4iNOZnl1vLq72e13wawc5iRWbW1nA==
   dependencies:
-    "@microsoft/fast-element" "^0.22.2"
+    "@microsoft/fast-element" "^1.0.0"
     "@microsoft/fast-web-utilities" "^4.7.3"
     "@microsoft/tsdoc-config" "^0.13.4"
     tabbable "^4.0.0"