@fluentui/web-components 1.6.3 → 2.1.0

package/dist/esm/text-area/text-area.styles.js

@@ -1,77 +1,32 @@
 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';
+import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
+import { heightNumber, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeOuter, neutralFillHover, neutralFillInputHover, neutralFillInputRest, neutralFillRest, neutralForegroundRest, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { designUnit } from '../design-tokens';
 export const textAreaFilledStyles = (context, definition) => css `
-    :host([appearance='filled']) .control {
-      background: ${neutralFillRest};
-      border-color: transparent;
-    }
-
-    :host([appearance='filled']:hover:not([disabled])) .control {
-      background: ${neutralFillHover};
-      border-color: transparent;
-    }
-
-    :host([appearance='filled']:focus-within:not([disabled])) .control {
-      border-color: transparent;
-      box-shadow: none;
-    }
-    ${fillStateStyles(context, definition)}
+    ${inputFilledStyles(context, definition, '.control')}
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host([appearance='filled']:hover:not([disabled])) .control,
-        :host([appearance='filled']:focus-within:not([disabled])) .control {
-          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};
-        }
+        ${inputFilledForcedColorStyles(context, definition, '.control')}
       `));
 export const textAreaStyles = (context, definition) => css `
-    ${display('inline-flex')} :host {
-      font-family: ${bodyFont};
-      outline: none;
-      user-select: none;
-      position: relative;
+    ${display('inline-flex')}
+
+    ${inputStyles(context, definition, '.control')}
+
+    ${inputStateStyles(context, definition, '.control')}
+
+    :host {
       flex-direction: column;
       vertical-align: bottom;
     }
 
     .control {
-      box-sizing: border-box;
-      position: relative;
-      color: ${neutralForegroundRest};
-      background: ${neutralFillInputRest};
-      border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
-      height: calc(${heightNumber} * 2px);
-      font: inherit;
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
+      height: calc((${heightNumber} * 2) * 1px);
       padding: calc(${designUnit} * 1.5px) calc(${designUnit} * 2px + 1px);
-      width: 100%;
-      resize: none;
-    }
-
-    .control:hover:enabled {
-      background: ${neutralFillInputHover};
-      border-color: ${neutralStrokeHover};
     }
 
-    .control:hover,
-    .control:${focusVisible},
-    .control:disabled,
-    .control:active {
-      outline: none;
-    }
-
-    :host(:focus-within) .control {
-      border-color: ${focusStrokeOuter};
-      box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;
+    :host .control {
+      resize: none;
     }
 
     :host(.resize-both) .control {
@@ -85,41 +40,6 @@ export const textAreaStyles = (context, definition) => css `
     :host(.resize-vertical) .control {
       resize: vertical;
     }
-
-    .label__hidden {
-      display: none;
-      visibility: hidden;
-    }
-
-    .label {
-      display: block;
-      color: ${neutralForegroundRest};
-      cursor: pointer;
-      $font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
-      margin-bottom: 4px;
-    }
-
-    :host([disabled]) .label,
-    :host([readonly]) .label,
-    :host([readonly]) .control,
-    :host([disabled]) .control {
-      cursor: ${disabledCursor};
-    }
-    :host([disabled]) {
-      opacity: ${disabledOpacity};
-    }
   `.withBehaviors(appearanceBehavior('filled', textAreaFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
-        :host([disabled]) {
-          opacity: 1;
-        }
-        ::placeholder,
-        ::-webkit-input-placeholder {
-          color: ${SystemColors.FieldText};
-        }
-        :host([disabled]) ::placeholder,
-        :host([disabled]) ::-webkit-input-placeholder,
-        :host([disabled]) .label {
-          color: ${SystemColors.GrayText};
-        }
+        ${inputForcedColorStyles(context, definition, '.control')}
       `));

package/dist/esm/text-field/text-field.stories.js

@@ -70,7 +70,7 @@ const TextFieldTemplate = ({ appearance, autoFocus, disabled, list, maxlength, n
   ></fluent-text-field>`;
 export const TextField = TextFieldTemplate.bind({});
 TextField.args = {
-    placeholder: '',
+    placeholder: 'placeholder',
     autoFocus: false,
     disabled: false,
     readonly: false,

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

@@ -1,182 +1,54 @@
 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';
+import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
+import { inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeOuter, neutralFillHover, neutralFillInputHover, neutralFillInputRest, neutralFillRest, neutralForegroundRest, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { designUnit } from '../design-tokens';
 export const textFieldFilledStyles = (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 {
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.FieldText};
-        }
-        :host([appearance='filled']:hover:not([disabled])) .root,
-        :host([appearance='filled']:focus-within:not([disabled])) .root {
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.FieldText};
-        }
-        :host([appearance='filled']:active: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};
-        }
+        ${inputFilledForcedColorStyles(context, definition, '.root')}
       `));
 export const textFieldStyles = (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;
+      color: inherit;
       background: transparent;
       border: 0;
       height: calc(100% - 4px);
-      width: 100%;
       margin-top: auto;
       margin-bottom: auto;
-      border: none;
       padding: 0 calc(${designUnit} * 2px + 1px);
-      color: ${neutralForegroundRest};
       font-family: inherit;
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
-    }
-
-    .control:hover,
-    .control:${focusVisible},
-    .control:disabled,
-    .control:active {
-      outline: none;
-    }
-
-    .label {
-      display: block;
-      color: ${neutralForegroundRest};
-      cursor: pointer;
-      font-size: ${typeRampBaseFontSize};
-      line-height: ${typeRampBaseLineHeight};
-      margin-bottom: 4px;
-    }
-
-    .label__hidden {
-      display: none;
-      visibility: hidden;
+      font-size: inherit;
+      line-height: inherit;
     }
 
     .start,
     .end {
       display: flex;
       margin: auto;
-      fill: currentcolor;
-    }
-
-    ::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;
     }
 
     .end {
+      display: flex;
       margin-inline-end: 11px;
     }
-
-    :host(:hover:not(.disabled)) .root {
-      background: ${neutralFillInputHover};
-      border-color: ${neutralStrokeHover};
-    }
-
-    :host(:focus-within:not(.disabled)) .root {
-      border-color: ${focusStrokeOuter};
-      box-shadow: 0 0 0 1px ${focusStrokeOuter} inset;
-    }
-
-    :host(.disabled) .label,
-    :host(.readonly) .label,
-    :host(.readonly) .control,
-    :host(.disabled) .control {
-      cursor: ${disabledCursor};
-    }
-
-    :host(.disabled) {
-      opacity: ${disabledOpacity};
-    }
   `.withBehaviors(appearanceBehavior('filled', textFieldFilledStyles(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};
-        }
-        .start,
-        .end {
-          fill: ${SystemColors.ButtonText};
-        }
-        :host(.disabled) {
-          opacity: 1;
-        }
-        :host(.disabled) .root {
-          border-color: ${SystemColors.GrayText};
-          background: ${SystemColors.Field};
-        }
-        :host(:focus-within:enabled) .root {
-          border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset;
-        }
-        .control {
-          color: ${SystemColors.ButtonText};
-        }
-        ::placeholder,
-        ::-webkit-input-placeholder {
-          color: ${SystemColors.FieldText};
-        }
-        :host(.disabled) ::placeholder,
-        :host(.disabled) ::-webkit-input-placeholder,
-        :host([disabled]) .label {
-          color: ${SystemColors.GrayText};
-        }
+        ${inputForcedColorStyles(context, definition, '.root')}
       `));

package/dist/esm/toolbar/index.js

@@ -17,6 +17,7 @@ export class Toolbar extends FoundationToolbar {
  */
 export const fluentToolbar = Toolbar.compose({
     baseName: 'toolbar',
+    baseClass: FoundationToolbar,
     template,
     styles,
 });

package/dist/esm/toolbar/toolbar.styles.js

@@ -1,72 +1,72 @@
 import { css } from '@microsoft/fast-element';
 import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from "@microsoft/fast-web-utilities";
-import { designUnit, fillColor, focusStrokeWidth, neutralStrokeFocus, strokeWidth, } from '../design-tokens';
+import { SystemColors } from '@microsoft/fast-web-utilities';
+import { designUnit, fillColor, focusStrokeWidth, neutralStrokeFocus, strokeWidth } from '../design-tokens';
 export const toolbarStyles = (context, definition) => css `
-      ${display("inline-flex")} :host {
-          --toolbar-item-gap: calc(${designUnit} * 1px);
-          background: ${fillColor};
-          fill: currentcolor;
-          padding: var(--toolbar-item-gap);
-          box-sizing: border-box;
-          align-items: center;
-      }
+    ${display('inline-flex')} :host {
+      --toolbar-item-gap: calc(${designUnit} * 1px);
+      background: ${fillColor};
+      fill: currentcolor;
+      padding: var(--toolbar-item-gap);
+      box-sizing: border-box;
+      align-items: center;
+    }
 
-      :host(${focusVisible}) {
-          outline: calc(${strokeWidth} * 1px) solid ${neutralStrokeFocus};
-      }
+    :host(${focusVisible}) {
+      outline: calc(${strokeWidth} * 1px) solid ${neutralStrokeFocus};
+    }
 
-      .positioning-region {
-          align-items: center;
-          display: inline-flex;
-          flex-flow: row wrap;
-          justify-content: flex-start;
-          flex-grow: 1;
-      }
+    .positioning-region {
+      align-items: center;
+      display: inline-flex;
+      flex-flow: row wrap;
+      justify-content: flex-start;
+      flex-grow: 1;
+    }
 
-      :host([orientation="vertical"]) .positioning-region {
-          flex-direction: column;
-          align-items: start;
-      }
+    :host([orientation='vertical']) .positioning-region {
+      flex-direction: column;
+      align-items: start;
+    }
 
-      ::slotted(:not([slot])) {
-          flex: 0 0 auto;
-          margin: 0 var(--toolbar-item-gap);
-      }
+    ::slotted(:not([slot])) {
+      flex: 0 0 auto;
+      margin: 0 var(--toolbar-item-gap);
+    }
 
-      :host([orientation="vertical"]) ::slotted(:not([slot])) {
-          margin: var(--toolbar-item-gap) 0;
-      }
+    :host([orientation='vertical']) ::slotted(:not([slot])) {
+      margin: var(--toolbar-item-gap) 0;
+    }
 
-      :host([orientation="vertical"]) {
-        display: inline-flex;
-        flex-direction: column;
+    :host([orientation='vertical']) {
+      display: inline-flex;
+      flex-direction: column;
     }
 
-      .start,
-      .end {
-          display: flex;
-          align-items: center;
-      }
+    .start,
+    .end {
+      display: flex;
+      align-items: center;
+    }
 
-      .end {
-        margin-inline-start: auto;
-      }
+    .end {
+      margin-inline-start: auto;
+    }
 
-      .start__hidden,
-      .end__hidden {
-          display: none;
-      }
+    .start__hidden,
+    .end__hidden {
+      display: none;
+    }
 
-      ::slotted(svg) {
-          ${ /* Glyph size is temporary - replace when adaptive typography is figured out */""}
-          width: 16px;
-          height: 16px;
-      }
+    ::slotted(svg) {
+      ${ /* Glyph size is temporary - replace when adaptive typography is figured out */''}
+      width: 16px;
+      height: 16px;
+    }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
-          :host(:${focusVisible}) {
-              box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.Highlight};
-              color: ${SystemColors.ButtonText};
-              forced-color-adjust: none;
-          }
+        :host(:${focusVisible}) {
+          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.Highlight};
+          color: ${SystemColors.ButtonText};
+          forced-color-adjust: none;
+        }
       `));

package/dist/esm/tooltip/index.js

@@ -1,5 +1,5 @@
 import { Tooltip as FoundationTooltip, tooltipTemplate as template } from '@microsoft/fast-foundation';
-import { fillColor, neutralFillInverseRecipe } from '../design-tokens';
+import { fillColor, neutralLayerFloating } from '../design-tokens';
 import { tooltipStyles as styles } from './tooltip.styles';
 /**
  * The Fluent tooltip class
@@ -11,9 +11,7 @@ export class Tooltip extends FoundationTooltip {
      */
     connectedCallback() {
         super.connectedCallback();
-        const recipe = neutralFillInverseRecipe.getValueFor(this);
-        const parentFill = fillColor.getValueFor(this.parentElement);
-        fillColor.setValueFor(this, (target) => recipe.evaluate(target, parentFill).rest);
+        fillColor.setValueFor(this, neutralLayerFloating);
     }
 }
 /**

package/dist/esm/tooltip/tooltip.styles.js

@@ -1,10 +1,9 @@
 import { css } from '@microsoft/fast-element';
 import { forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { elevation } from '../styles/index';
-import { bodyFont, controlCornerRadius, fillColor, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { elevationShadowTooltip } from '../styles/index';
+import { bodyFont, controlCornerRadius, fillColor, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
 export const tooltipStyles = (context, definition) => css `
     :host {
-      --elevation: 11;
       position: relative;
       contain: layout;
       overflow: visible;
@@ -16,7 +15,7 @@ export const tooltipStyles = (context, definition) => css `
     .tooltip {
       box-sizing: border-box;
       border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${strokeWidth} * 1px) solid transparent;
+      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
       background: ${fillColor};
       color: ${neutralForegroundRest};
       padding: 4px 12px;
@@ -26,7 +25,7 @@ export const tooltipStyles = (context, definition) => css `
       font-size: ${typeRampBaseFontSize};
       line-height: ${typeRampBaseLineHeight};
       white-space: nowrap;
-      ${elevation}
+      box-shadow: ${elevationShadowTooltip};
     }
 
     fluent-anchored-region {
@@ -50,13 +49,14 @@ export const tooltipStyles = (context, definition) => css `
       width: 12px;
       height: 12px;
       background: ${fillColor};
-      border-radius: calc(${controlCornerRadius} * 1px);
+      border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
+      border-left: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
       position: absolute;
     }
 
     fluent-anchored-region.top .tooltip::after {
-      transform: rotate(45deg) translateX(-50%);
-      bottom: 4px;
+      transform: translateX(-50%) rotate(225deg);
+      bottom: 5px;
       left: 50%;
     }
 
@@ -65,8 +65,8 @@ export const tooltipStyles = (context, definition) => css `
     }
 
     fluent-anchored-region.bottom .tooltip::after {
-      transform: rotate(45deg) translateX(-50%);
-      top: 12px;
+      transform: translateX(-50%) rotate(45deg);
+      top: 5px;
       left: 50%;
     }
 
@@ -75,9 +75,9 @@ export const tooltipStyles = (context, definition) => css `
     }
 
     fluent-anchored-region.left .tooltip::after {
-      transform: rotate(45deg) translateY(-50%);
+      transform: translateY(-50%) rotate(135deg);
       top: 50%;
-      right: 12px;
+      right: 5px;
     }
 
     fluent-anchored-region.left .tooltip {
@@ -85,9 +85,9 @@ export const tooltipStyles = (context, definition) => css `
     }
 
     fluent-anchored-region.right .tooltip::after {
-      transform: rotate(45deg) translateY(-50%);
+      transform: translateY(-50%) rotate(-45deg);
       top: 50%;
-      left: 4px;
+      left: 5px;
     }
 
     fluent-anchored-region.right .tooltip {

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

@@ -15,14 +15,8 @@ export const fluentTreeItem = TreeItem.compose({
     template,
     styles,
     expandCollapseGlyph: `
-    <svg
-        viewBox="0 0 16 16"
-        xmlns="http://www.w3.org/2000/svg"
-        class="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="12" height="12" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"/>
     </svg>
   `,
 });