@fluentui/web-components 1.6.3 → 2.1.0

package/dist/esm/styles/patterns/input.styles.js

@@ -0,0 +1,218 @@
+import { css } from '@microsoft/fast-element';
+import { DesignToken, disabledCursor, focusVisible, } from '@microsoft/fast-foundation';
+import { SystemColors } from '@microsoft/fast-web-utilities';
+import { accentFillRest, bodyFont, controlCornerRadius, disabledOpacity, focusStrokeWidth, neutralFillInputFocus, neutralFillInputHover, neutralFillInputRecipe, neutralFillInputRest, neutralFillSecondaryHover, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralForegroundHintRecipe, neutralForegroundRest, neutralStrokeInputHover, neutralStrokeInputRest, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../../design-tokens';
+import { heightNumber } from '../size';
+const placeholderRest = DesignToken.create('input-placeholder-rest').withDefault((target) => {
+    const baseRecipe = neutralFillInputRecipe.getValueFor(target);
+    const hintRecipe = neutralForegroundHintRecipe.getValueFor(target);
+    return hintRecipe.evaluate(target, baseRecipe.evaluate(target).rest);
+});
+const placeholderHover = DesignToken.create('input-placeholder-hover').withDefault((target) => {
+    const baseRecipe = neutralFillInputRecipe.getValueFor(target);
+    const hintRecipe = neutralForegroundHintRecipe.getValueFor(target);
+    return hintRecipe.evaluate(target, baseRecipe.evaluate(target).hover);
+});
+const filledPlaceholderRest = DesignToken.create('input-filled-placeholder-rest').withDefault((target) => {
+    const baseRecipe = neutralFillSecondaryRecipe.getValueFor(target);
+    const hintRecipe = neutralForegroundHintRecipe.getValueFor(target);
+    return hintRecipe.evaluate(target, baseRecipe.evaluate(target).rest);
+});
+const filledPlaceholderHover = DesignToken.create('input-filled-placeholder-hover').withDefault((target) => {
+    const baseRecipe = neutralFillSecondaryRecipe.getValueFor(target);
+    const hintRecipe = neutralForegroundHintRecipe.getValueFor(target);
+    return hintRecipe.evaluate(target, baseRecipe.evaluate(target).hover);
+});
+/**
+ * @internal
+ */
+export const inputStyles = (context, definition, rootSelector) => css `
+  :host {
+    font-family: ${bodyFont};
+    font-size: ${typeRampBaseFontSize};
+    line-height: ${typeRampBaseLineHeight};
+    color: ${neutralForegroundRest};
+    fill: currentcolor;
+    outline: none;
+    user-select: none;
+    position: relative;
+  }
+
+  ${rootSelector} {
+    box-sizing: border-box;
+    position: relative;
+    color: inherit;
+    background: padding-box linear-gradient(${neutralFillInputRest}, ${neutralFillInputRest}),
+      border-box ${neutralStrokeInputRest};
+    border: calc(${strokeWidth} * 1px) solid transparent;
+    border-radius: calc(${controlCornerRadius} * 1px);
+    height: calc(${heightNumber} * 1px);
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  .control {
+    width: 100%;
+  }
+
+  .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;
+  }
+
+  :host(:hover:not([disabled]):not(:focus-within)) ${rootSelector} {
+    background: padding-box linear-gradient(${neutralFillInputHover}, ${neutralFillInputHover}),
+      border-box ${neutralStrokeInputHover};
+  }
+
+  :host(:not([disabled]):focus-within) ${rootSelector} {
+    background: padding-box linear-gradient(${neutralFillInputFocus}, ${neutralFillInputFocus}),
+      border-box ${neutralStrokeInputRest};
+  }
+
+  .control::placeholder {
+    color: ${placeholderRest};
+  }
+
+  :host(:hover:not([disabled]):not(:focus-within)) .control::placeholder {
+    color: ${placeholderHover};
+  }
+
+  :host([disabled]) ${rootSelector}, :host([readonly]) ${rootSelector}, :host([disabled]) .label,
+  :host([readonly]) .label,
+  :host([disabled]) .control,
+  :host([readonly]) .control {
+    cursor: ${disabledCursor};
+  }
+
+  :host([disabled]) {
+    opacity: ${disabledOpacity};
+  }
+
+  :host([disabled]) ${rootSelector} {
+    background: padding-box linear-gradient(${neutralFillInputRest}, ${neutralFillInputRest}),
+      border-box ${neutralStrokeRest};
+  }
+`;
+/**
+ * @internal
+ */
+export const inputStateStyles = (context, definition, rootSelector) => css `
+  :host(:not([disabled]):active)::after {
+    left: 50%;
+    width: 40%;
+    transform: translateX(-50%);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  :host(:not([disabled]):focus-within)::after {
+    left: 0;
+    width: 100%;
+    transform: none;
+  }
+
+  :host(:not([disabled]):active)::after,
+  :host(:not([disabled]):focus-within:not(:active))::after {
+    content: '';
+    position: absolute;
+    height: calc(${focusStrokeWidth} * 1px);
+    bottom: 0;
+    border-bottom: calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};
+    border-bottom-left-radius: calc(${controlCornerRadius} * 1px);
+    border-bottom-right-radius: calc(${controlCornerRadius} * 1px);
+    z-index: 2;
+    transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
+  }
+`;
+/**
+ * @internal
+ */
+export const inputFilledStyles = (context, definition, rootSelector) => css `
+  :host ${rootSelector} {
+    background: ${neutralFillSecondaryRest};
+    border-color: transparent;
+  }
+
+  :host(:hover:not([disabled]):not(:focus-within)) ${rootSelector} {
+    background: ${neutralFillSecondaryHover};
+    border-color: transparent;
+  }
+
+  .control::placeholder {
+    color: ${filledPlaceholderRest};
+  }
+
+  :host(:hover:not([disabled]):not(:focus-within)) .control::placeholder {
+    color: ${filledPlaceholderHover};
+  }
+
+  :host(:focus-within:not([disabled])) ${rootSelector} {
+    border-color: transparent;
+    box-shadow: none;
+  }
+`;
+/**
+ * @internal
+ */
+export const inputForcedColorStyles = (context, definition, rootSelector) => css `
+  :host ${rootSelector} {
+    background: ${SystemColors.Field};
+    border-color: ${SystemColors.FieldText};
+  }
+  :host(:hover:not([disabled]):not(:focus-within)) ${rootSelector} {
+    border-color: ${SystemColors.Highlight};
+  }
+  :host(:not([disabled]):active)::after,
+  :host(:not([disabled]):focus-within:not(:active))::after {
+    border-bottom-color: ${SystemColors.Highlight};
+  }
+  :host([disabled]) {
+    opacity: 1;
+  }
+  :host([disabled]) ${rootSelector} {
+    border-color: ${SystemColors.GrayText};
+  }
+  :host([disabled]) ::placeholder,
+  :host([disabled]) ::-webkit-input-placeholder,
+  :host([disabled]) .label {
+    color: ${SystemColors.GrayText};
+    fill: currentcolor;
+  }
+`;
+/**
+ * @internal
+ */
+export const inputFilledForcedColorStyles = (context, definition, rootSelector) => css `
+  :host ${rootSelector},
+  :host(:hover:not([disabled])) ${rootSelector},
+  :host(:active:not([disabled])) ${rootSelector},
+  :host(:focus-within:not([disabled])) ${rootSelector} {
+    background: ${SystemColors.Field};
+    border-color: ${SystemColors.FieldText};
+  }
+  :host(:not([disabled]):active)::after,
+  :host(:not([disabled]):focus-within:not(:active))::after {
+    border-bottom-color: ${SystemColors.Highlight};
+  }
+  :host([disabled]) ${rootSelector} {
+    border-color: ${SystemColors.GrayText};
+  }
+`;

package/dist/esm/switch/index.js

@@ -14,7 +14,9 @@ export const fluentSwitch = Switch.compose({
     template,
     styles,
     switch: `
-    <span class="checked-indicator" part="checked-indicator"></span>
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+      <rect x="2" y="2" width="12" height="12" rx="6"/>
+    </svg>
   `,
 });
 /**

package/dist/esm/switch/switch.stories.js

@@ -11,18 +11,18 @@ export default {
         },
     },
 };
-const SwitchTemplate = ({ checked, disabled }) => `
+const SwitchTemplate = ({ checked, disabled, label }) => `
 <fluent-switch
   ${checked ? 'checked' : ''}
   ${disabled ? 'disabled' : ''}
->
+>${label}
   <span slot="checked-message">On</span>
   <span slot="unchecked-message">Off</span>
-  <label for="direction-switch">Captions:</label>
 </fluent-switch>
 `;
 export const Switch = SwitchTemplate.bind({});
 Switch.args = {
+    label: 'Label',
     checked: false,
     disabled: false,
 };

package/dist/esm/switch/switch.styles.js

@@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { DirectionalStyleSheetBehavior, heightNumber } from '../styles';
-import { accentFillActive, accentFillHover, accentFillRest, bodyFont, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, bodyFont, designUnit, disabledOpacity, fillColor, focusStrokeOuter, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
 export const switchStyles = (context, definition) => css `
     :host([hidden]) {
       display: none;
@@ -12,7 +12,6 @@ export const switchStyles = (context, definition) => css `
       align-items: center;
       outline: none;
       font-family: ${bodyFont};
-      margin: calc(${designUnit} * 1px) 0;
       ${
 /*
  * Chromium likes to select label text or the default slot when
@@ -26,8 +25,10 @@ export const switchStyles = (context, definition) => css `
 
     :host(.disabled) .label,
     :host(.readonly) .label,
+    :host(.disabled) .switch,
     :host(.readonly) .switch,
-    :host(.disabled) .switch {
+    :host(.disabled) .status-message,
+    :host(.readonly) .status-message {
       cursor: ${disabledCursor};
     }
 
@@ -37,34 +38,48 @@ export const switchStyles = (context, definition) => css `
       box-sizing: border-box;
       width: calc(((${heightNumber} / 2) + ${designUnit}) * 2px);
       height: calc(((${heightNumber} / 2) + ${designUnit}) * 1px);
-      background: ${neutralFillInputRest};
+      background: ${neutralFillInputAltRest};
       border-radius: calc(${heightNumber} * 1px);
       border: calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};
+      cursor: pointer;
     }
 
-    :host(:enabled) .switch:hover {
-      background: ${neutralFillInputHover};
+    :host(:not(.disabled):hover) .switch {
+      background: ${neutralFillInputAltHover};
       border-color: ${neutralStrokeStrongHover};
-      cursor: pointer;
     }
 
-    :host(:enabled) .switch:active {
-      background: ${neutralFillInputActive};
+    :host(:not(.disabled):active) .switch {
+      background: ${neutralFillInputAltActive};
       border-color: ${neutralStrokeStrongActive};
     }
 
     :host(:${focusVisible}) .switch {
-      box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${focusStrokeOuter};
+      box-shadow: 0 0 0 1px ${fillColor}, 0 0 0 3px ${focusStrokeOuter};
+      background: ${neutralFillInputAltFocus};
       border-color: ${focusStrokeOuter};
     }
 
-    .checked-indicator {
+    :host(.checked) .switch {
+      background: ${accentFillRest};
+      border-color: transparent;
+    }
+
+    :host(.checked:not(.disabled):hover) .switch {
+      background: ${accentFillHover};
+      border-color: transparent;
+    }
+
+    :host(.checked:not(.disabled):active) .switch {
+      background: ${accentFillActive};
+      border-color: transparent;
+    }
+
+    slot[name='switch'] {
       position: absolute;
-      height: calc((${heightNumber} - (${designUnit} * 5.5)) * 1px);
-      width: calc((${heightNumber} - (${designUnit} * 5.5)) * 1px);
-      top: calc(${designUnit} * 1px);
-      background: ${neutralForegroundRest};
-      border-radius: 50%;
+      display: flex;
+      border: 1px solid transparent; /* Spacing included in the transform reference box */
+      fill: ${neutralForegroundRest};
       transition: all 0.2s ease-in-out;
     }
 
@@ -88,37 +103,38 @@ export const switchStyles = (context, definition) => css `
       cursor: pointer;
     }
 
-    ::slotted(*) {
-      ${
-/* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ ''} margin-inline-start: calc(${designUnit} * 2px + 2px);
+    ::slotted([slot="checked-message"]),
+    ::slotted([slot="unchecked-message"]) {
+        margin-inline-start: calc(${designUnit} * 2px + 2px);
     }
 
-    :host([aria-checked='true']) .checked-indicator {
-      background: ${foregroundOnAccentRest};
+    :host(.checked) .switch {
+      background: ${accentFillRest};
     }
 
-    :host([aria-checked='true']) .switch {
-      background: ${accentFillRest};
+    :host(.checked) .switch slot[name='switch'] {
+      fill: ${foregroundOnAccentRest};
+      filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15));
     }
 
-    :host([aria-checked='true']:enabled) .switch:hover {
+    :host(.checked:not(.disabled)) .switch:hover {
       background: ${accentFillHover};
     }
 
-    :host([aria-checked='true']:enabled) .switch:hover .checked-indicator {
-      background: ${foregroundOnAccentHover};
+    :host(.checked:not(.disabled)) .switch:hover slot[name='switch'] {
+      fill: ${foregroundOnAccentHover};
     }
 
-    :host([aria-checked='true']:enabled) .switch:active {
+    :host(.checked:not(.disabled)) .switch:active {
       background: ${accentFillActive};
     }
 
-    :host([aria-checked='true']:enabled) .switch:active .checked-indicator {
-      background: ${foregroundOnAccentActive};
+    :host(.checked:not(.disabled)) .switch:active slot[name='switch'] {
+      fill: ${foregroundOnAccentActive};
     }
 
-    :host([aria-checked="true"]:${focusVisible}:enabled) .switch {
-      box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${focusStrokeOuter};
+    :host(.checked:${focusVisible}:not(.disabled)) .switch {
+      box-shadow: 0 0 0 1px ${fillColor}, 0 0 0 3px ${focusStrokeOuter};
       border-color: transparent;
     }
 
@@ -130,71 +146,74 @@ export const switchStyles = (context, definition) => css `
       display: none;
     }
 
-    :host([aria-checked='true']) .unchecked-message {
+    :host(.checked) .unchecked-message {
       display: none;
     }
 
-    :host([aria-checked='true']) .checked-message {
+    :host(.checked) .checked-message {
       display: block;
     }
   `.withBehaviors(new DirectionalStyleSheetBehavior(css `
-        .checked-indicator {
-          left: calc(${designUnit} * 1px);
+        slot[name='switch'] {
+          left: 0;
         }
 
-        :host([aria-checked='true']) .checked-indicator {
-          left: calc((((${heightNumber} / 2) + ${designUnit}) + ${designUnit}) * 1px);
+        :host(.checked) slot[name='switch'] {
+          left: 100%;
+          transform: translateX(-100%);
         }
       `, css `
-        .checked-indicator {
-          right: calc(${designUnit} * 1px);
+        slot[name='switch'] {
+          right: 0;
         }
 
-        :host([aria-checked='true']) .checked-indicator {
-          right: calc((((${heightNumber} / 2) + ${designUnit}) + ${designUnit}) * 1px);
+        :host(.checked) slot[name='switch'] {
+          right: 100%;
+          transform: translateX(100%);
         }
       `), forcedColorsStylesheetBehavior(css `
-        .checked-indicator,
-        :host(:enabled) .switch:active .checked-indicator {
+        :host(:not(.disabled)) .switch slot[name='switch'] {
           forced-color-adjust: none;
-          background: ${SystemColors.FieldText};
+          fill: ${SystemColors.FieldText};
         }
         .switch {
-          forced-color-adjust: none;
           background: ${SystemColors.Field};
           border-color: ${SystemColors.FieldText};
         }
-        :host(:enabled) .switch:hover {
-          background: ${SystemColors.HighlightText};
-          border-color: ${SystemColors.Highlight};
-        }
         :host(.checked) .switch {
           background: ${SystemColors.Highlight};
           border-color: ${SystemColors.Highlight};
         }
-        :host(.checked:enabled) .switch:hover,
-        :host(:enabled) .switch:active {
+        :host(:not(.disabled):hover) .switch ,
+        :host(:not(.disabled):active) .switch,
+        :host(.checked:not(.disabled):hover) .switch {
           background: ${SystemColors.HighlightText};
           border-color: ${SystemColors.Highlight};
         }
-        :host(.checked) .checked-indicator {
-          background: ${SystemColors.HighlightText};
+        :host(.checked:not(.disabled)) .switch slot[name="switch"] {
+          fill: ${SystemColors.HighlightText};
         }
-        :host(.checked:enabled) .switch:hover .checked-indicator {
-          background: ${SystemColors.Highlight};
+        :host(.checked:not(.disabled):hover) .switch slot[name='switch'] {
+          fill: ${SystemColors.Highlight};
         }
         :host(:${focusVisible}) .switch {
+          forced-color-adjust: none;
+          background: ${SystemColors.Field};
           border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
+          box-shadow: 0 0 0 1px ${SystemColors.Highlight}, 0 0 0 3px ${SystemColors.FieldText};
         }
-        :host(.checked:${focusVisible}:enabled) .switch {
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
+        :host(.checked:${focusVisible}:not(.disabled)) .switch {
+          forced-color-adjust: none;
+          background: ${SystemColors.Highlight};
+          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
+          border-color: ${SystemColors.Field};
         }
         :host(.disabled) {
           opacity: 1;
         }
-        :host(.disabled) .checked-indicator {
-          background: ${SystemColors.GrayText};
+        :host(.disabled) slot[name='switch'] {
+          forced-color-adjust: none;
+          fill: ${SystemColors.GrayText};
         }
         :host(.disabled) .switch {
           background: ${SystemColors.Field};

package/dist/esm/tabs/tab/tab.styles.js

@@ -10,15 +10,16 @@ export const tabStyles = (context, definition) => css `
         font-size: ${typeRampBaseFontSize};
         font-weight: 400;
         line-height: ${typeRampBaseLineHeight};
-        height: calc(${heightNumber} * 1px);
+        height: calc((${heightNumber} + (${designUnit} * 2)) * 1px);
         padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
         color: ${neutralForegroundRest};
         border-radius: calc(${controlCornerRadius} * 1px);
         border: calc(${strokeWidth} * 1px) solid transparent;
         align-items: center;
         justify-content: center;
-        grid-row: 1;
+        grid-row: 1 / 3;
         cursor: pointer;
+        outline: none;
       }
 
       :host([aria-selected='true']) {
@@ -31,18 +32,13 @@ export const tabStyles = (context, definition) => css `
       }
 
       :host(:${focusVisible}) {
-        outline: none;
-        border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
-        box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter};
-      }
-
-      :host(:focus) {
-        outline: none;
+        border-color: ${focusStrokeOuter};
+        box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset;
       }
 
       :host(.vertical) {
-        justify-content: end;
-        grid-column: 2;
+        justify-content: start;
+        grid-column: 1 / 3;
       }
 
       :host(.vertical[aria-selected='true']) {
@@ -66,16 +62,17 @@ export const tabStyles = (context, definition) => css `
           :host(:hover),
           :host(.vertical:hover),
           :host([aria-selected='true']:hover) {
-            background: ${SystemColors.Highlight};
-            color: ${SystemColors.HighlightText};
+            background: transparent;
+            color: ${SystemColors.Highlight};
             fill: currentcolor;
           }
           :host([aria-selected='true']) {
-            background: ${SystemColors.HighlightText};
+            background: transparent;
             color: ${SystemColors.Highlight};
             fill: currentcolor;
           }
           :host(:${focusVisible}) {
+            background: transparent;
             border-color: ${SystemColors.ButtonText};
             box-shadow: none;
           }

package/dist/esm/tabs/tabs.styles.js

@@ -1,7 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { accentFillRest, bodyFont, controlCornerRadius, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { accentFillRest, bodyFont, controlCornerRadius, focusStrokeWidth, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { heightNumber } from '../styles';
 export const tabsStyles = (context, definition) => css `
       ${display('grid')} :host {
         box-sizing: border-box;
@@ -15,7 +16,7 @@ export const tabsStyles = (context, definition) => css `
 
       .tablist {
         display: grid;
-        grid-template-rows: auto auto;
+        grid-template-rows: calc(${heightNumber} * 1px); auto;
         grid-template-columns: auto;
         position: relative;
         width: max-content;
@@ -80,6 +81,7 @@ export const tabsStyles = (context, definition) => css `
         grid-row: 1;
         width: 3px;
         height: 20px;
+        margin-inline-start: calc(${focusStrokeWidth} * 1px);
         border-radius: calc(${controlCornerRadius} * 1px);
         align-self: center;
         background: ${accentFillRest};
@@ -89,9 +91,8 @@ export const tabsStyles = (context, definition) => css `
         transition: transform 0.2s linear;
       }
     `.withBehaviors(forcedColorsStylesheetBehavior(css `
-          .activeIndicator,
-          :host(.vertical) .activeIndicator {
-            forced-color-adjust: none;
-            background: ${SystemColors.Highlight};
-          }
-        `));
+        .activeIndicator,
+        :host(.vertical) .activeIndicator {
+          background: ${SystemColors.Highlight};
+        }
+      `));

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

@@ -4,8 +4,8 @@ export default {
     component: fluentTextArea,
     argTypes: {
         appearance: {
-            options: ['filled', 'outline'],
-            defaultValue: 'outline',
+            defaultValue: 'outlined',
+            options: ['filled', 'outlined'],
             control: { type: 'radio' },
         },
         autoFocus: {