@fluentui/web-components 1.6.3 → 2.1.0

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

@@ -1,8 +1,8 @@
 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/index';
-import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeOuter, focusStrokeWidth, neutralFillStealthActive, neutralFillStealthHover, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { DirectionalStyleSheetBehavior, heightNumber } from '../styles/index';
+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;
@@ -11,12 +11,11 @@ export const menuItemStyles = (context, definition) => css `
       outline: none;
       box-sizing: border-box;
       height: calc(${heightNumber} * 1px);
-      grid-template-columns: minmax(42px, auto) 1fr minmax(42px, auto);
+      grid-template-columns: minmax(32px, auto) 1fr minmax(32px, auto);
       grid-template-rows: auto;
       justify-items: center;
       align-items: center;
       padding: 0;
-      margin: 0 calc(${designUnit} * 1px);
       white-space: nowrap;
       color: ${neutralForegroundRest};
       fill: currentcolor;
@@ -28,7 +27,7 @@ export const menuItemStyles = (context, definition) => css `
     }
 
     :host(.indent-0) {
-      grid-template-columns: auto 1fr minmax(42px, auto);
+      grid-template-columns: auto 1fr minmax(32px, auto);
     }
 
     :host(.indent-0) .content {
@@ -37,8 +36,13 @@ export const menuItemStyles = (context, definition) => css `
       margin-inline-start: 10px;
     }
 
+    :host(.indent-0) .expand-collapse-glyph-container {
+      grid-column: 5;
+      grid-row: 1;
+    }
+
     :host(.indent-2) {
-      grid-template-columns: minmax(42px, auto) minmax(42px, auto) 1fr minmax(42px, auto) minmax(42px, auto);
+      grid-template-columns: minmax(32px, auto) minmax(32px, auto) 1fr minmax(32px, auto) minmax(32px, auto);
     }
 
     :host(.indent-2) .content {
@@ -65,12 +69,11 @@ export const menuItemStyles = (context, definition) => css `
       box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
     }
 
-    :host(:hover) {
+    :host(:not([disabled]):hover) {
       background: ${neutralFillStealthHover};
     }
 
-    :host([aria-checked='true']),
-    :host(:active),
+    :host(:not([disabled]):active),
     :host(.expanded) {
       background: ${neutralFillStealthActive};
       color: ${neutralForegroundRest};
@@ -81,12 +84,6 @@ export const menuItemStyles = (context, definition) => css `
       opacity: ${disabledOpacity};
     }
 
-    :host([disabled]:hover) .start,
-    :host([disabled]:hover) .end,
-    :host([disabled]:hover)::slotted(svg) {
-      fill: currentcolor;
-    }
-
     .content {
       grid-column-start: 2;
       justify-self: start;
@@ -100,28 +97,18 @@ export const menuItemStyles = (context, definition) => css `
       justify-content: center;
     }
 
-    ::slotted(svg) {
-      ${
-/* Glyph size and margin-left is temporary -
-    replace when adaptive typography is figured out */ ''} width: 16px;
-      height: 16px;
-      display: flex;
-    }
-
-    :host(:hover) .start,
-    :host(:hover) .end,
-    :host(:hover)::slotted(svg),
-    :host(:active) .start,
-    :host(:active) .end,
-    :host(:active)::slotted(svg) {
-      fill: ${neutralForegroundRest};
+    :host(.indent-0[aria-haspopup='menu']) {
+      display: grid;
+      grid-template-columns: minmax(32px, auto) auto 1fr minmax(32px, auto) minmax(32px, auto);
+      align-items: center;
+      min-height: 32px;
     }
 
     :host(.indent-1[aria-haspopup='menu']),
     :host(.indent-1[role='menuitemcheckbox']),
     :host(.indent-1[role='menuitemradio']) {
       display: grid;
-      grid-template-columns: minmax(42px, auto) auto 1fr minmax(42px, auto) minmax(42px, auto);
+      grid-template-columns: minmax(32px, auto) auto 1fr minmax(32px, auto) minmax(32px, auto);
       align-items: center;
       min-height: 32px;
     }
@@ -139,7 +126,6 @@ export const menuItemStyles = (context, definition) => css `
     :host([role='menuitemcheckbox']) .input-container,
     :host([role='menuitemradio']) .input-container {
       display: grid;
-      margin-inline-end: 10px;
     }
 
     :host([aria-haspopup='menu']) .content,
@@ -148,6 +134,10 @@ export const menuItemStyles = (context, definition) => css `
       grid-column-start: 3;
     }
 
+    :host([aria-haspopup='menu'].indent-0) .content {
+      grid-column-start: 1;
+    }
+
     :host([aria-haspopup='menu']) .end,
     :host([role='menuitemcheckbox']) .end,
     :host([role='menuitemradio']) .end {
@@ -161,25 +151,14 @@ export const menuItemStyles = (context, definition) => css `
       align-items: center;
       justify-content: center;
       position: relative;
-      width: 20px;
-      height: 20px;
       box-sizing: border-box;
       outline: none;
-      margin-inline-start: 10px;
-    }
-
-    :host .checkbox {
-      border-radius: calc(${controlCornerRadius} * 1px);
-    }
-
-    :host .radio {
-      border-radius: 999px;
     }
 
     :host .checkbox-indicator,
     :host .radio-indicator,
-    ::slotted([slot='checkbox-indicator']),
-    ::slotted([slot='radio-indicator']) {
+    slot[name='checkbox-indicator'],
+    slot[name='radio-indicator'] {
       display: none;
     }
 
@@ -189,49 +168,39 @@ export const menuItemStyles = (context, definition) => css `
     }
 
     :host([aria-checked='true']) .checkbox-indicator,
-    :host([aria-checked='true']) ::slotted([slot='checkbox-indicator']) {
-      width: 100%;
-      height: 100%;
-      display: block;
-      fill: ${neutralForegroundRest};
-      pointer-events: none;
-    }
-
-    :host([aria-checked='true']) .radio-indicator {
-      display: block;
-      pointer-events: none;
-    }
-
-    :host([aria-checked='true']) ::slotted([slot='radio-indicator']) {
-      display: block;
-      pointer-events: none;
+    :host([aria-checked='true']) slot[name='checkbox-indicator'],
+    :host([aria-checked='true']) .radio-indicator,
+    :host([aria-checked='true']) slot[name='radio-indicator'] {
+      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};
@@ -239,56 +208,61 @@ 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='true']) .checkbox,
-        :host([checked='true']) .radio {
+        :host([checked]) .checkbox,
+        :host([checked]) .radio {
           background: ${SystemColors.HighlightText};
           border-color: ${SystemColors.HighlightText};
         }
-
         :host(:hover) .expanded-toggle,
             :host(:hover) .checkbox,
             :host(:hover) .radio,
             :host(:${focusVisible}) .expanded-toggle,
             :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 {
+            :host([checked]:hover) .checkbox,
+            :host([checked]:hover) .radio,
+            :host([checked]:${focusVisible}) .checkbox,
+            :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};
         }
+      `), new DirectionalStyleSheetBehavior(css `
+        .expand-collapse-glyph-container {
+          transform: rotate(0deg);
+        }
+      `, css `
+        .expand-collapse-glyph-container {
+          transform: rotate(180deg);
+        }
       `));

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

@@ -45,9 +45,13 @@ export const fluentNumberField = NumberField.compose({
         delegatesFocus: true,
     },
     stepDownGlyph: `
-    <span class="step-down-glyph" part="step-down-glyph"></span>
+    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>
+    </svg>
   `,
     stepUpGlyph: `
-    <span class="step-up-glyph" part="step-up-glyph"></span>
-  `,
+    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.15 7.35c.2.2.5.2.7 0L6 4.21l3.15 3.14a.5.5 0 10.7-.7l-3.5-3.5a.5.5 0 00-.7 0l-3.5 3.5a.5.5 0 000 .7z"/>
+    </svg>
+`,
 });

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

@@ -1,108 +1,38 @@
 import { css } from '@microsoft/fast-element';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { fillStateStyles, heightNumber } from '../styles/index';
+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 { bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeOuter, neutralFillHover, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralFillRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { designUnit } from '../design-tokens';
 export const numberFieldFilledStyles = (context, definition) => css `
-    :host([appearance='filled']) .root {
-      background: ${neutralFillRest};
-      border-color: transparent;
-    }
-
-    :host([appearance='filled']:hover:not([disabled])) .root {
-      background: ${neutralFillHover};
-      border-color: transparent;
-    }
-
-    :host([appearance='filled']:focus-within:not([disabled])) .root {
-      border-color: transparent;
-      box-shadow: none;
-    }
-    ${fillStateStyles(context, definition)}
+    ${inputFilledStyles(context, definition, '.root')}
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host([appearance='filled']) .root,
-        :host([appearance='filled']:hover:not([disabled])) .root {
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.FieldText};
-        }
-        :host([appearance='filled']:active:not([disabled])) .root,
-        :host([appearance='filled']:focus-within:not([disabled])) .root {
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.FieldText};
-        }
-        :host([appearance='filled']:not([disabled]):active)::after,
-        :host([appearance='filled']:not([disabled]):focus-within:not(:active))::after {
-          border-bottom-color: ${SystemColors.Highlight};
-        }
-        :host([appearance='filled'][disabled]) .root {
-          border-color: ${SystemColors.GrayText};
-          background: ${SystemColors.Field};
-        }
-        :host([appearance='filled'][disabled]) .root {
-          border-color: ${SystemColors.GrayText};
-          background: ${SystemColors.Field};
-        }
+        ${inputFilledForcedColorStyles(context, definition, '.root')}
       `));
 export const numberFieldStyles = (context, definition) => css `
-    ${display('inline-block')} :host {
-      font-family: ${bodyFont};
-      outline: none;
-      user-select: none;
-      position: relative;
-    }
+    ${display('inline-block')}
+
+    ${inputStyles(context, definition, '.root')}
+
+    ${inputStateStyles(context, definition, '.root')}
 
     .root {
-      box-sizing: border-box;
-      position: relative;
       display: flex;
       flex-direction: row;
-      color: ${neutralForegroundRest};
-      background: ${neutralFillInputRest};
-      border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
-      height: calc(${heightNumber} * 1px);
     }
 
     .control {
       -webkit-appearance: none;
-      font: inherit;
+      color: inherit;
       background: transparent;
       border: 0;
-      color: inherit;
       height: calc(100% - 4px);
-      width: 100%;
       margin-top: auto;
       margin-bottom: auto;
-      border: none;
       padding: 0 calc(${designUnit} * 2px + 1px);
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
-    }
-
-    .control:hover,
-    .control:${focusVisible},
-    .control:disabled,
-    .control:active {
-      outline: none;
-    }
-
-    .controls {
-      opacity: 0;
-    }
-
-    .label {
-      display: block;
-      color: ${neutralForegroundRest};
-      cursor: pointer;
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
-      margin-bottom: 4px;
-    }
-
-    .label__hidden {
-      display: none;
-      visibility: hidden;
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
     }
 
     .start,
@@ -111,34 +41,6 @@ export const numberFieldStyles = (context, definition) => css `
       fill: currentcolor;
     }
 
-    .step-up,
-    .step-down {
-      padding: 2px 10px;
-      cursor: pointer;
-    }
-
-    .step-up:before,
-    .step-down:before {
-      content: '';
-      display: block;
-      border: solid transparent 6px;
-    }
-
-    .step-up:before {
-      border-bottom-color: ${neutralForegroundRest};
-    }
-
-    .step-down:before {
-      border-top-color: ${neutralForegroundRest};
-    }
-
-    ::slotted(svg) {
-      ${
-/* Glyph size and margin-left is temporary -
-    replace when adaptive typography is figured out */ ''} width: 16px;
-      height: 16px;
-    }
-
     .start {
       display: flex;
       margin-inline-start: 11px;
@@ -149,19 +51,11 @@ export const numberFieldStyles = (context, definition) => css `
       margin-inline-end: 11px;
     }
 
-    :host(:hover:not([disabled])) .root {
-      background: ${neutralFillInputHover};
-      border-color: ${neutralStrokeHover};
-    }
-
-    :host(:active:not([disabled])) .root {
-      background: ${neutralFillInputActive};
-      border-color: ${neutralStrokeActive};
-    }
-
-    :host(:focus-within:not([disabled])) .root {
-      border-color: ${focusStrokeOuter};
-      box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;
+    .controls {
+      opacity: 0;
+      position: relative;
+      top: -1px;
+      z-index: 3;
     }
 
     :host(:hover:not([disabled])) .controls,
@@ -169,59 +63,20 @@ export const numberFieldStyles = (context, definition) => css `
       opacity: 1;
     }
 
-    :host([disabled]) .label,
-    :host([readonly]) .label,
-    :host([readonly]) .control,
-    :host([disabled]) .control {
-      cursor: ${disabledCursor};
-    }
-
-    :host([disabled]) {
-      opacity: ${disabledOpacity};
+    .step-up,
+    .step-down {
+      display: flex;
+      padding: 0 8px;
+      cursor: pointer;
     }
 
-    :host([disabled]) .control {
-      border-color: ${neutralStrokeRest};
+    .step-up {
+      padding-top: 3px;
     }
   `.withBehaviors(appearanceBehavior('filled', numberFieldFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
-        .root {
-          forced-color-adjust: none;
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.FieldText};
-        }
-        :host(:hover:not([disabled])) .root {
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.Highlight};
-        }
-        :host(:focus-within:enabled) .root {
-          border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset;
-        }
-        .control,
-        ::placeholder,
-        ::-webkit-input-placeholder {
-          color: ${SystemColors.FieldText};
-        }
-        .step-up:before {
-          border-bottom-color: ${SystemColors.FieldText};
-        }
-        .step-down:before {
-          border-top-color: ${SystemColors.FieldText};
-        }
-        .start,
-        .end {
+        ${inputForcedColorStyles(context, definition, '.root')}
+        .step-up,
+        .step-down {
           fill: ${SystemColors.FieldText};
         }
-        :host([disabled]) {
-          opacity: 1;
-        }
-        :host([disabled]) .root {
-          border-color: ${SystemColors.GrayText};
-          background: ${SystemColors.Field};
-        }
-        :host([disabled]) ::placeholder,
-        :host([disabled]) ::-webkit-input-placeholder,
-        :host([disabled]) .label {
-          color: ${SystemColors.GrayText};
-        }
       `));

package/dist/esm/progress/progress/index.js

@@ -23,7 +23,7 @@ export const fluentProgress = Progress.compose({
     <span class="indeterminate-indicator-1" part="indeterminate-indicator-1"></span>
   `,
     indeterminateIndicator2: `
-    <span class="indeterminate-indicator-1" part="indeterminate-indicator-1"></span>
+    <span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>
   `,
 });
 /**

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

@@ -1,20 +1,19 @@
 import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { accentFillRest, designUnit, neutralFillRest, neutralForegroundHint, strokeWidth, } from '../../design-tokens';
+import { accentFillRest, designUnit, neutralForegroundHint, neutralStrokeStrongRest, strokeWidth, } from '../../design-tokens';
 export const progressStyles = (context, definition) => css `
     ${display('flex')} :host {
       align-items: center;
       outline: none;
-      height: calc(${designUnit} * 1px);
-      margin: calc(${designUnit} * 1px) 0;
+      height: calc((${strokeWidth} * 3) * 1px);
     }
 
     .progress {
-      background-color: ${neutralFillRest};
+      background-color: ${neutralStrokeStrongRest};
       border-radius: calc(${designUnit} * 1px);
       width: 100%;
-      height: 100%;
+      height: calc(${strokeWidth} * 1px);
       display: flex;
       align-items: center;
       position: relative;
@@ -23,13 +22,13 @@ export const progressStyles = (context, definition) => css `
     .determinate {
       background-color: ${accentFillRest};
       border-radius: calc(${designUnit} * 1px);
-      height: 100%;
+      height: calc((${strokeWidth} * 3) * 1px);
       transition: all 0.2s ease-in-out;
       display: flex;
     }
 
     .indeterminate {
-      height: 100%;
+      height: calc((${strokeWidth} * 3) * 1px);
       border-radius: calc(${designUnit} * 1px);
       display: flex;
       width: 100%;
@@ -61,8 +60,10 @@ export const progressStyles = (context, definition) => css `
 
     :host(.paused) .indeterminate-indicator-1,
     :host(.paused) .indeterminate-indicator-2 {
-      animation-play-state: paused;
-      background-color: ${neutralFillRest};
+      animation: none;
+      background-color: ${neutralForegroundHint};
+      width: 100%;
+      opacity: 1;
     }
 
     :host(.paused) .determinate {
@@ -107,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};
         }