@fluentui/web-components 2.0.0 → 2.1.1

package/dist/esm/calendar/index.js

@@ -0,0 +1,31 @@
+import { __decorate } from "tslib";
+import { attr, booleanConverter } from '@microsoft/fast-element';
+import { CalendarTitleTemplate, Calendar as FoundationCalendar, calendarTemplate as template, } from '@microsoft/fast-foundation';
+import { calendarStyles as styles } from './calendar.styles';
+/**
+ * Updated Calendar class that is readonly by default
+ */
+export class Calendar extends FoundationCalendar {
+    constructor() {
+        super(...arguments);
+        this.readonly = true;
+    }
+}
+__decorate([
+    attr({ converter: booleanConverter })
+], Calendar.prototype, "readonly", void 0);
+/**
+ * The Fluent Calendar Element. Implements {@link @microsoft/fast-foundation#Calendar},
+ * {@link @microsoft/fast-foundation#calendarTemplate}
+ *
+ * @public
+ * @remarks
+ * HTML Element \<fluent-calendar\>
+ */
+export const fluentCalendar = Calendar.compose({
+    baseName: 'calendar',
+    template,
+    styles,
+    title: CalendarTitleTemplate,
+});
+export { styles as calendarStyles };

package/dist/esm/card/card.styles.js

@@ -22,8 +22,7 @@ export const cardStyles = (context, definition) => css `
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
         :host {
-          forced-color-adjust: none;
           background: ${SystemColors.Canvas};
-          box-shadow: 0 0 0 1px ${SystemColors.CanvasText};
+          color: ${SystemColors.CanvasText};
         }
       `));

package/dist/esm/checkbox/checkbox.styles.js

@@ -7,7 +7,6 @@ export const checkboxStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       align-items: center;
       outline: none;
-      margin: calc(${designUnit} * 1px) 0;
       ${
 /*
  * Chromium likes to select label text or the default slot when
@@ -113,64 +112,55 @@ export const checkboxStyles = (context, definition) => css `
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
         .control {
-          forced-color-adjust: none;
           border-color: ${SystemColors.FieldText};
           background: ${SystemColors.Field};
         }
-        :host(:not(.disabled)) .control:hover,
-        .control:active {
+        :host(:not(.disabled):hover) .control,
+        :host(:not(.disabled):active) .control {
           border-color: ${SystemColors.Highlight};
           background: ${SystemColors.Field};
         }
-        slot[name='checked-indicator'] {
-          fill: ${SystemColors.FieldText};
-        }
+        slot[name='checked-indicator'],
         slot[name='indeterminate-indicator'] {
           fill: ${SystemColors.FieldText};
         }
         :host(:${focusVisible}) .control {
+          forced-color-adjust: none;
+          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
+          background: ${SystemColors.Field};
           border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
-        }
-        :host(.checked:${focusVisible}:not(.disabled)) .control {
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
         }
         :host(.checked) .control {
           background: ${SystemColors.Highlight};
           border-color: ${SystemColors.Highlight};
         }
-        :host(.checked) .control:hover,
-        .control:active {
+        :host(.checked:not(.disabled):hover) .control,
+        :host(.checked:not(.disabled):active) .control {
           background: ${SystemColors.HighlightText};
+          border-color: ${SystemColors.Highlight};
         }
-        :host(.checked) slot[name='checked-indicator'] {
-          fill: ${SystemColors.HighlightText};
-        }
-        :host(.checked) .control:hover slot[name='checked-indicator'] {
-          fill: ${SystemColors.Highlight};
+        :host(.checked:${focusVisible}) .control {
+          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
         }
+        :host(.checked) slot[name='checked-indicator'],
         :host(.checked) slot[name='indeterminate-indicator'] {
           fill: ${SystemColors.HighlightText};
         }
-        :host(.checked) .control:hover slot[name='indeterminate-indicator'] {
+        :host(.checked:hover ) .control slot[name='checked-indicator'],
+        :host(.checked:hover ) .control slot[name='indeterminate-indicator'] {
           fill: ${SystemColors.Highlight};
         }
         :host(.disabled) {
           opacity: 1;
         }
         :host(.disabled) .control {
-          forced-color-adjust: none;
           border-color: ${SystemColors.GrayText};
           background: ${SystemColors.Field};
         }
-        :host(.disabled) slot[name='indeterminate-indicator'],
-        :host(.checked.disabled) .control:hover slot[name='indeterminate-indicator'] {
-          forced-color-adjust: none;
-          fill: ${SystemColors.GrayText};
-        }
         :host(.disabled) slot[name='checked-indicator'],
-        :host(.checked.disabled) .control:hover slot[name='checked-indicator'] {
-          forced-color-adjust: none;
+        :host(.checked.disabled:hover) .control slot[name='checked-indicator'],
+        :host(.disabled) slot[name='indeterminate-indicator'],
+        :host(.checked.disabled:hover) .control slot[name='indeterminate-indicator'] {
           fill: ${SystemColors.GrayText};
         }
       `));

package/dist/esm/custom-elements.js

@@ -5,6 +5,7 @@ import { fluentBadge } from './badge/index';
 import { fluentBreadcrumb } from './breadcrumb/index';
 import { fluentBreadcrumbItem } from './breadcrumb-item/index';
 import { fluentButton } from './button/index';
+import { fluentCalendar } from './calendar/index';
 import { fluentCard } from './card/index';
 import { fluentCheckbox } from './checkbox/index';
 import { fluentCombobox } from './combobox/index';
@@ -34,7 +35,7 @@ import { fluentToolbar } from './toolbar/index';
 import { fluentTooltip } from './tooltip/index';
 import { fluentTreeView } from './tree-view/index';
 import { fluentTreeItem } from './tree-item/index';
-export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
+export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCalendar, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
 /**
  * All Fluent UI Web Components
  * @public
@@ -48,6 +49,7 @@ export const allComponents = {
     fluentBreadcrumb,
     fluentBreadcrumbItem,
     fluentButton,
+    fluentCalendar,
     fluentCard,
     fluentCheckbox,
     fluentCombobox,

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

@@ -8,7 +8,6 @@ export const flipperStyles = (context, definition) => css `
       height: calc((${heightNumber} + ${designUnit}) * 1px);
       justify-content: center;
       align-items: center;
-      margin: 0;
       fill: currentcolor;
       color: ${neutralFillStrongRest};
       background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
@@ -51,26 +50,19 @@ export const flipperStyles = (context, definition) => css `
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
         :host {
-          background: ${SystemColors.Canvas};
+          background: ${SystemColors.ButtonFace};
+          border-color: ${SystemColors.ButtonText};
         }
         :host .next,
         :host .previous {
           color: ${SystemColors.ButtonText};
           fill: currentcolor;
         }
-        :host {
-          background: ${SystemColors.Canvas};
-          border-color: ${SystemColors.ButtonText};
-        }
         :host(:not(.disabled):hover) {
-          forced-color-adjust: none;
           background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.ButtonText};
-          opacity: 1;
         }
         :host(:not(.disabled):hover) .next,
         :host(:not(.disabled):hover) .previous {
-          forced-color-adjust: none;
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }
@@ -78,20 +70,15 @@ export const flipperStyles = (context, definition) => css `
           opacity: 1;
         }
         :host(.disabled),
-        :host(.disabled:hover),
         :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}) {
           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/listbox/listbox.styles.js

@@ -1,7 +1,6 @@
 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, 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 {
       border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
@@ -12,32 +11,12 @@ export const listboxStyles = (context, definition) => css `
       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

@@ -17,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;
@@ -107,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/menu.styles.js

@@ -1,5 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+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 `
@@ -8,7 +9,6 @@ export const menuStyles = (context, definition) => css `
       border: calc(${strokeWidth} * 1px) solid transparent;
       border-radius: calc(${layerCornerRadius} * 1px);
       box-shadow: ${elevationShadowFlyout};
-      margin: 0;
       padding: calc(${designUnit} * 1px) 0;
       max-width: 368px;
       min-width: 64px;
@@ -19,6 +19,14 @@ export const menuStyles = (context, definition) => css `
       margin: 0 calc(${designUnit} * 2px);
     }
 
+    ::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;
@@ -26,4 +34,9 @@ export const menuStyles = (context, definition) => css `
       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/menu-item.styles.js

@@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
-import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillStealthActive, neutralFillStealthHover, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { bodyFont, controlCornerRadius, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillStealthActive, neutralFillStealthHover, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
 export const menuItemStyles = (context, definition) => css `
     ${display('grid')} :host {
       contain: layout;
@@ -16,7 +16,6 @@ export const menuItemStyles = (context, definition) => css `
       justify-items: center;
       align-items: center;
       padding: 0;
-      margin: 0 calc(${designUnit} * 1px);
       white-space: nowrap;
       color: ${neutralForegroundRest};
       fill: currentcolor;
@@ -175,31 +174,33 @@ export const menuItemStyles = (context, definition) => css `
       display: flex;
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host {
+        :host,
+        ::slotted([slot='end']:not(svg)) {
           forced-color-adjust: none;
-          border-color: transparent;
           color: ${SystemColors.ButtonText};
-          fill: ${SystemColors.ButtonText};
+          fill: currentcolor;
         }
-        :host(:hover) {
+        :host(:not([disabled]):hover) {
           background: ${SystemColors.Highlight};
           color: ${SystemColors.HighlightText};
+          fill: currentcolor;
         }
         :host(:hover) .start,
         :host(:hover) .end,
         :host(:hover)::slotted(svg),
         :host(:active) .start,
         :host(:active) .end,
-        :host(:active)::slotted(svg) {
-          fill: ${SystemColors.HighlightText};
+        :host(:active)::slotted(svg),
+        :host(:hover) ::slotted([slot='end']:not(svg)),
+        :host(:${focusVisible}) ::slotted([slot='end']:not(svg)) {
+          color: ${SystemColors.HighlightText};
+          fill: currentcolor;
         }
-
         :host(.expanded) {
           background: ${SystemColors.Highlight};
           border-color: ${SystemColors.Highlight};
           color: ${SystemColors.HighlightText};
         }
-
         :host(:${focusVisible}) {
           background: ${SystemColors.Highlight};
           border-color: ${SystemColors.ButtonText};
@@ -207,31 +208,31 @@ export const menuItemStyles = (context, definition) => css `
           color: ${SystemColors.HighlightText};
           fill: currentcolor;
         }
-
         :host([disabled]),
         :host([disabled]:hover),
         :host([disabled]:hover) .start,
         :host([disabled]:hover) .end,
-        :host([disabled]:hover)::slotted(svg) {
-          background: ${SystemColors.Canvas};
+        :host([disabled]:hover)::slotted(svg),
+        :host([disabled]:${focusVisible}) {
+          background: ${SystemColors.ButtonFace};
           color: ${SystemColors.GrayText};
           fill: currentcolor;
           opacity: 1;
         }
-
+        :host([disabled]:${focusVisible}) {
+          border-color: ${SystemColors.GrayText};
+        }
         :host .expanded-toggle,
         :host .checkbox,
         :host .radio {
           border-color: ${SystemColors.ButtonText};
           background: ${SystemColors.HighlightText};
         }
-
         :host([checked]) .checkbox,
         :host([checked]) .radio {
           background: ${SystemColors.HighlightText};
           border-color: ${SystemColors.HighlightText};
         }
-
         :host(:hover) .expanded-toggle,
             :host(:hover) .checkbox,
             :host(:hover) .radio,
@@ -244,18 +245,15 @@ export const menuItemStyles = (context, definition) => css `
             :host([checked]:${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};
         }

package/dist/esm/number-field/number-field.styles.js

@@ -1,5 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
+import { SystemColors } from "@microsoft/fast-web-utilities";
 import { inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles/index';
 import { appearanceBehavior } from '../utilities/behaviors';
 import { designUnit } from '../design-tokens';
@@ -74,4 +75,8 @@ export const numberFieldStyles = (context, definition) => css `
     }
   `.withBehaviors(appearanceBehavior('filled', numberFieldFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
         ${inputForcedColorStyles(context, definition, '.root')}
+        .step-up,
+        .step-down {
+          fill: ${SystemColors.FieldText};
+        }
       `));

package/dist/esm/progress/progress/progress.styles.js

@@ -7,7 +7,6 @@ export const progressStyles = (context, definition) => css `
       align-items: center;
       outline: none;
       height: calc((${strokeWidth} * 3) * 1px);
-      margin: calc(${designUnit} * 1px) 0;
     }
 
     .progress {
@@ -109,18 +108,12 @@ export const progressStyles = (context, definition) => css `
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
         .indeterminate-indicator-1,
         .indeterminate-indicator-2,
-        .determinate {
-          forced-color-adjust: none;
-          background-color: ${SystemColors.FieldText};
-        }
+        .determinate,
         .progress {
-          background-color: ${SystemColors.Field};
-          border: calc(${strokeWidth} * 1px) solid ${SystemColors.FieldText};
+          background-color: ${SystemColors.ButtonText};
         }
         :host(.paused) .indeterminate-indicator-1,
-        .indeterminate-indicator-2 {
-          background-color: ${SystemColors.Field};
-        }
+        :host(.paused) .indeterminate-indicator-2,
         :host(.paused) .determinate {
           background-color: ${SystemColors.GrayText};
         }

package/dist/esm/progress/progress-ring/progress-ring.styles.js

@@ -9,7 +9,6 @@ export const progressRingStyles = (context, definition) => css `
       outline: none;
       height: calc(${heightNumber} * 1px);
       width: calc(${heightNumber} * 1px);
-      margin: calc(${heightNumber} * 1px) 0;
     }
 
     .progress {
@@ -67,17 +66,15 @@ export const progressRingStyles = (context, definition) => css `
       }
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .indeterminate-indicator-1,
-        .determinate {
-          stroke: ${SystemColors.FieldText};
-        }
         .background {
           stroke: ${SystemColors.Field};
         }
-        :host(.paused) .indeterminate-indicator-1 {
-          stroke: ${SystemColors.Field};
+        .determinate,
+        .indeterminate-indicator-1 {
+          stroke: ${SystemColors.ButtonText};
         }
-        :host(.paused) .determinate {
+        :host(.paused) .determinate,
+        :host(.paused) .indeterminate-indicator-1 {
           stroke: ${SystemColors.GrayText};
         }
       `));

package/dist/esm/radio/radio.styles.js

@@ -8,7 +8,6 @@ export const radioStyles = (context, definition) => css `
       --input-size: calc((${heightNumber} / 2) + ${designUnit});
       align-items: center;
       outline: none;
-      margin: calc(${designUnit} * 1px) 0;
       ${
 /*
  * Chromium likes to select label text or the default slot when
@@ -114,49 +113,46 @@ export const radioStyles = (context, definition) => css `
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
         .control {
-          forced-color-adjust: none;
-          border-color: ${SystemColors.FieldText};
           background: ${SystemColors.Field};
+          border-color: ${SystemColors.FieldText};
         }
-        :host(:not(.disabled)) .control:hover,
-        .control:active {
+        :host(:not(.disabled):hover) .control,
+        :host(:not(.disabled):active) .control {
           border-color: ${SystemColors.Highlight};
-          background: ${SystemColors.Field};
         }
         :host(:${focusVisible}) .control {
+          forced-color-adjust: none;
+          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
+          background: ${SystemColors.Field};
           border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
-        }
-        :host(.checked:${focusVisible}:not(.disabled)) .control {
-          border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
         }
-        :host(.checked:not(.disabled)) .control:hover,
-        .control:active {
+        :host(.checked:not(.disabled):hover) .control,
+        :host(.checked:not(.disabled):active) .control {
           border-color: ${SystemColors.Highlight};
           background: ${SystemColors.Highlight};
         }
+        :host(.checked:${focusVisible}) .control {
+          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
+        }
         :host(.checked) slot[name='checked-indicator'] {
           fill: ${SystemColors.Highlight};
         }
-        :host(.checked) .control:hover slot[name='checked-indicator'] {
+        :host(.checked:hover) .control slot[name='checked-indicator'] {
           fill: ${SystemColors.HighlightText};
         }
         :host(.disabled) {
-          forced-color-adjust: none;
           opacity: 1;
         }
         :host(.disabled) .label {
           color: ${SystemColors.GrayText};
         }
         :host(.disabled) .control,
-        :host(.checked.disabled) .control:hover,
-        .control:active {
+        :host(.checked.disabled) .control {
           background: ${SystemColors.Field};
           border-color: ${SystemColors.GrayText};
         }
         :host(.disabled) slot[name='checked-indicator'],
-        :host(.checked.disabled) .control:hover slot[name='checked-indicator'] {
+        :host(.checked.disabled) slot[name='checked-indicator'] {
           fill: ${SystemColors.GrayText};
         }
       `));

package/dist/esm/radio-group/radio-group.styles.js

@@ -1,10 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { designUnit } from '../design-tokens';
 export const radioGroupStyles = (context, definition) => css `
   ${display('flex')} :host {
     align-items: flex-start;
-    margin: calc(${designUnit} * 1px) 0;
     flex-direction: column;
   }