(web-components): add directional stylesheet, css partials, and defau…

…lt slotted content (#18275) * update tooltip background * update height number and direction * update background-color to fill color, add directional stylesheet, update tree item recipes * add default slotted content * update expand collapse button to use css partial * update heightNumber to be css partial * Change files
microsoft · May 24, 2021 · 8e805dc · 8e805dc
1 parent beafe2b
commit 8e805dc
Show file tree

Hide file tree

Showing 32 changed files with 438 additions and 278 deletions.
diff --git a/change/@fluentui-web-components-683a425b-41a0-4f9c-aeb9-641b302ad05f.json b/change/@fluentui-web-components-683a425b-41a0-4f9c-aeb9-641b302ad05f.json
@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "add directional stylesheet, css partials, and default slotted content for vNext components",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -98,8 +98,8 @@
   },
   "dependencies": {
     "@microsoft/fast-colors": "^5.1.0",
-    "@microsoft/fast-element": "^1.0.0",
-    "@microsoft/fast-foundation": "2.0.0-beta.0",
+    "@microsoft/fast-element": "^1.4.0",
+    "@microsoft/fast-foundation": "2.0.0-1",
     "lodash-es": "^4.17.20",
     "tslib": "^1.13.0"
   }

diff --git a/packages/web-components/src/accordion/accordion-item/index.ts b/packages/web-components/src/accordion/accordion-item/index.ts
@@ -1,4 +1,4 @@
-import { AccordionItem, accordionItemTemplate as template } from '@microsoft/fast-foundation';
+import { AccordionItem, AccordionItemOptions, accordionItemTemplate as template } from '@microsoft/fast-foundation';
 import { accordionItemStyles as styles } from './accordion-item.styles';
 
 /**
@@ -10,10 +10,38 @@ import { accordionItemStyles as styles } from './accordion-item.styles';
  * @remarks
  * HTML Element: \<fluent-accordion-item\>
  */
-export const fluentAccordionItem = AccordionItem.compose({
+export const fluentAccordionItem = AccordionItem.compose<AccordionItemOptions>({
   baseName: 'accordion-item',
   template,
   styles,
+  collapsedIcon: `
+    <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M16.22 3H3.78a.78.78 0 00-.78.78v12.44c0 .43.35.78.78.78h12.44c.43 0 .78-.35.78-.78V3.78a.78.78 0 00-.78-.78zM3.78 2h12.44C17.2 2 18 2.8 18 3.78v12.44c0 .98-.8 1.78-1.78 1.78H3.78C2.8 18 2 17.2 2 16.22V3.78C2 2.8 2.8 2 3.78 2zM11 9h3v2h-3v3H9v-3H6V9h3V6h2v3z"
+        />
+    </svg>
+  `,
+  expandedIcon: `
+    <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M3.78 3h12.44c.43 0 .78.35.78.78v12.44c0 .43-.35.78-.78.78H3.78a.78.78 0 01-.78-.78V3.78c0-.43.35-.78.78-.78zm12.44-1H3.78C2.8 2 2 2.8 2 3.78v12.44C2 17.2 2.8 18 3.78 18h12.44c.98 0 1.78-.8 1.78-1.78V3.78C18 2.8 17.2 2 16.22 2zM14 9H6v2h8V9z"
+        />
+    </svg>
+  `,
 });
 
 /**

diff --git a/packages/web-components/src/breadcrumb-item/fixtures/breadcrumb-item.html b/packages/web-components/src/breadcrumb-item/fixtures/breadcrumb-item.html
@@ -8,21 +8,11 @@ <h4>Default</h4>
 <h4>Default with custom separator</h4>
 <fluent-breadcrumb-item href="#">
   Breadcrumb item
-  <svg slot="separator" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg%22%3E">
-    <path
-      d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 01-.7-.7L12.8 10 7.65 4.85a.5.5 0 010-.7z"
-    />
-  </svg>
 </fluent-breadcrumb-item>
 
 <h4>With start</h4>
 <fluent-breadcrumb-item href="#">
   Breadcrumb item
-  <svg slot="separator" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg%22%3E">
-    <path
-      d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 01-.7-.7L12.8 10 7.65 4.85a.5.5 0 010-.7z"
-    />
-  </svg>
   <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"
@@ -33,11 +23,6 @@ <h4>With start</h4>
 <h4>With end</h4>
 <fluent-breadcrumb-item href="#">
   Breadcrumb item
-  <svg slot="separator" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg%22%3E">
-    <path
-      d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 01-.7-.7L12.8 10 7.65 4.85a.5.5 0 010-.7z"
-    />
-  </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"

diff --git a/packages/web-components/src/breadcrumb-item/index.ts b/packages/web-components/src/breadcrumb-item/index.ts
@@ -1,4 +1,4 @@
-import { BreadcrumbItem, breadcrumbItemTemplate as template } from '@microsoft/fast-foundation';
+import { BreadcrumbItem, BreadcrumbItemOptions, breadcrumbItemTemplate as template } from '@microsoft/fast-foundation';
 import { breadcrumbItemStyles as styles } from './breadcrumb-item.styles';
 
 /**
@@ -10,13 +10,20 @@ import { breadcrumbItemStyles as styles } from './breadcrumb-item.styles';
  * @remarks
  * HTML Element: \<fluent-breadcrumb-item\>
  */
-export const fluentBreadcrumbItem = BreadcrumbItem.compose({
+export const fluentBreadcrumbItem = BreadcrumbItem.compose<BreadcrumbItemOptions>({
   baseName: 'breadcrumb-item',
   template,
   styles,
   shadowOptions: {
     delegatesFocus: true,
   },
+  separator: `
+    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg%22%3E">
+      <path
+        d="M7.65 4.15c.2-.2.5-.2.7 0l5.49 5.46c.21.22.21.57 0 .78l-5.49 5.46a.5.5 0 01-.7-.7L12.8 10 7.65 4.85a.5.5 0 010-.7z"
+      />
+    </svg>
+  `,
 });
 
 /**

diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts
@@ -18,6 +18,7 @@ import {
   neutralOutlineActive,
   neutralFocus,
   disabledOpacity,
+  fillColor,
 } from '../design-tokens';
 
 export const checkboxStyles = (context, definition) =>
@@ -73,7 +74,7 @@ export const checkboxStyles = (context, definition) =>
     }
 
     .indeterminate-indicator {
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc((${cornerRadius} / 2) * 1px);
         background: ${neutralForegroundRest};
         position: absolute;
         top: 50%;
@@ -95,7 +96,7 @@ export const checkboxStyles = (context, definition) =>
     }
 
     :host(:${focusVisible}) .control {
-        box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px ${neutralFocus};
+        box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${neutralFocus};
         border-color: ${neutralFocus};
     }
 

diff --git a/packages/web-components/src/checkbox/index.ts b/packages/web-components/src/checkbox/index.ts
@@ -1,4 +1,4 @@
-import { Checkbox, checkboxTemplate as template } from '@microsoft/fast-foundation';
+import { Checkbox, CheckboxOptions, checkboxTemplate as template } from '@microsoft/fast-foundation';
 import { checkboxStyles as styles } from './checkbox.styles';
 
 /**
@@ -10,10 +10,28 @@ import { checkboxStyles as styles } from './checkbox.styles';
  * @remarks
  * HTML Element: \<fluent-checkbox\>
  */
-export const fluentCheckbox = Checkbox.compose({
+export const fluentCheckbox = Checkbox.compose<CheckboxOptions>({
   baseName: 'checkbox',
   template,
   styles,
+  checkedIndicator: `
+    <svg
+        aria-hidden="true"
+        part="checked-indicator"
+        class="checked-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>
+  `,
+  indeterminateIndicator: `
+    <div part="indeterminate-indicator" class="indeterminate-indicator"></div>
+  `,
 });
 
 /**

diff --git a/packages/web-components/src/combobox/index.ts b/packages/web-components/src/combobox/index.ts
@@ -1,5 +1,9 @@
 import { attr } from '@microsoft/fast-element';
-import { Combobox as FoundationCombobox, comboboxTemplate as template } from '@microsoft/fast-foundation';
+import {
+  ComboboxOptions,
+  Combobox as FoundationCombobox,
+  comboboxTemplate as template,
+} from '@microsoft/fast-foundation';
 import { SelectAppearance } from '../select';
 import { comboboxStyles as styles } from './combobox.styles';
 
@@ -55,10 +59,22 @@ export class Combobox extends FoundationCombobox {
  * HTML Element: \<fluent-combobox\>
  *
  */
-export const fluentCombobox = Combobox.compose({
+export const fluentCombobox = Combobox.compose<ComboboxOptions>({
   baseName: 'combobox',
   template,
   styles,
+  indicator: `
+    <svg
+        class="select-indicator"
+        part="select-indicator"
+        viewBox="0 0 12 7"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M11.85.65c.2.2.2.5 0 .7L6.4 6.84a.55.55 0 01-.78 0L.14 1.35a.5.5 0 11.71-.7L6 5.8 11.15.65c.2-.2.5-.2.7 0z"
+        />
+    </svg>
+  `,
 });
 
 /**

diff --git a/packages/web-components/src/design-tokens.ts b/packages/web-components/src/design-tokens.ts
@@ -409,7 +409,7 @@ export const neutralFillSelected = create<SwatchRGB>('neutral-fill-selected').wi
 // Neutral Focus
 export const NeutralFocus = DI.createInterface<(element: HTMLElement) => SwatchRGB>('neutral-focus', builder =>
   builder.instance((element: HTMLElement) =>
-    neutralFocusAlgorithm(accentPalette.getValueFor(element), fillColor.getValueFor(element)),
+    neutralFocusAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)),
   ),
 );
 export const neutralFocus = create<SwatchRGB>('neutral-focus').withDefault((element: HTMLElement) =>

diff --git a/packages/web-components/src/dialog/dialog.styles.ts b/packages/web-components/src/dialog/dialog.styles.ts
@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { elevation } from '../styles';
-import { elevatedCornerRadius, outlineWidth } from '../design-tokens';
+import { elevatedCornerRadius, fillColor, outlineWidth } from '../design-tokens';
 
 export const dialogStyles = (context, definition) => css`
   :host([hidden]) {
@@ -42,7 +42,7 @@ export const dialogStyles = (context, definition) => css`
     border-radius: calc(${elevatedCornerRadius} * 1px);
     width: var(--dialog-width);
     height: var(--dialog-height);
-    background: var(--background-color);
+    background: ${fillColor};
     z-index: 1;
     border: calc(${outlineWidth} * 1px) solid transparent;
   }

diff --git a/packages/web-components/src/flipper/index.ts b/packages/web-components/src/flipper/index.ts
@@ -1,4 +1,4 @@
-import { Flipper, flipperTemplate as template } from '@microsoft/fast-foundation';
+import { Flipper, FlipperOptions, flipperTemplate as template } from '@microsoft/fast-foundation';
 import { flipperStyles as styles } from './flipper.styles';
 
 /**
@@ -10,10 +10,24 @@ import { flipperStyles as styles } from './flipper.styles';
  * @remarks
  * HTML Element: \<fluent-flipper\>
  */
-export const fluentFlipper = Flipper.compose({
+export const fluentFlipper = Flipper.compose<FlipperOptions>({
   baseName: 'flipper',
   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>
+  `,
+  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>
+  `,
 });
 
 /**

diff --git a/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts b/packages/web-components/src/horizontal-scroll/horizontal-scroll.styles.ts
@@ -1,5 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { DirectionalStyleSheetBehavior, display } from '@microsoft/fast-foundation';
+import { display } from '@microsoft/fast-foundation';
+import { DirectionalStyleSheetBehavior } from '../styles';
 
 const ltrActionsStyles = css`
   .scroll-prev {

diff --git a/packages/web-components/src/menu-item/index.ts b/packages/web-components/src/menu-item/index.ts
@@ -1,4 +1,4 @@
-import { MenuItem, menuItemTemplate as template } from '@microsoft/fast-foundation';
+import { MenuItem, MenuItemOptions, menuItemTemplate as template } from '@microsoft/fast-foundation';
 import { menuItemStyles as styles } from './menu-item.styles';
 
 /**
@@ -10,10 +10,52 @@ import { menuItemStyles as styles } from './menu-item.styles';
  * @remarks
  * HTML Element: \<fluent-menu-item\>
  */
-export const fluentMenuItem = MenuItem.compose({
+export const fluentMenuItem = MenuItem.compose<MenuItemOptions>({
   baseName: 'menu-item',
   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>
+  `,
+  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>
+  `,
+  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>
+  `,
 });
 
 /**

diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -15,6 +15,7 @@ import {
   neutralFillStealthHover,
   neutralFillStealthActive,
   disabledOpacity,
+  focusOutlineWidth,
 } from '../design-tokens';
 
 export const menuItemStyles = (context, definition) =>
@@ -77,7 +78,7 @@ export const menuItemStyles = (context, definition) =>
 
     :host(:${focusVisible}) {
         border: calc(${outlineWidth} * 1px) solid ${neutralFocus};
-        box-shadow: 0 0 0 calc((${outlineWidth} - ${outlineWidth}) * 1px) ${neutralFocus};
+        box-shadow: 0 0 0 calc((${focusOutlineWidth} - ${outlineWidth}) * 1px) ${neutralFocus};
     }
 
     :host(:hover) {
@@ -184,11 +185,6 @@ export const menuItemStyles = (context, definition) =>
         margin-inline-start: 10px;
     }
 
-    :host .checkbox,
-    :host .radio {
-        border: calc(${outlineWidth} * 1px) solid ${neutralForegroundRest};
-    }
-
     :host .checkbox {
         border-radius: calc(${cornerRadius} * 1px);
     }
@@ -219,14 +215,7 @@ export const menuItemStyles = (context, definition) =>
     }
 
     :host([aria-checked="true"]) .radio-indicator {
-        position: absolute;
-        top: 4px;
-        left: 4px;
-        right: 4px;
-        bottom: 4px;
-        border-radius: 999px;
         display: block;
-        background: ${neutralForegroundRest};
         pointer-events: none;
     }