@fluentui/web-components 1.6.3 → 2.1.0

package/dist/dts/design-system-provider/index.d.ts

@@ -1,6 +1,5 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { Direction } from '@microsoft/fast-web-utilities';
-import { Palette } from '../color/palette';
 import { Swatch } from '../color/swatch';
 /**
  * The Fluent DesignSystemProvider Element.
@@ -8,6 +7,7 @@ import { Swatch } from '../color/swatch';
  */
 export declare class DesignSystemProvider extends FoundationElement {
     constructor();
+    connectedCallback(): void;
     /**
      * Used to instruct the FluentDesignSystemProvider
      * that it should not set the CSS
@@ -32,36 +32,12 @@ export declare class DesignSystemProvider extends FoundationElement {
      * HTML attribute: accent-base-color
      */
     accentBaseColor: Swatch;
-    /**
-     * @internal
-     */
-    private accentBaseColorChanged;
     /**
      * A convenience to recreate the neutralPalette
      * @remarks
      * HTML attribute: neutral-base-color
      */
     neutralBaseColor: Swatch;
-    /**
-     * @internal
-     */
-    private neutralBaseColorChanged;
-    /**
-     * Defines the palette that all neutral color recipes are derived from.
-     * This is an array for hexadecimal color strings ordered from light to dark.
-     *
-     * @remarks
-     * HTML attribute: N/A
-     */
-    neutralPalette: Palette;
-    /**
-     * Defines the palette that all accent color recipes are derived from.
-     * This is an array for hexadecimal color strings ordered from light to dark.
-     *
-     * @remarks
-     * HTML attribute: N/A
-     */
-    accentPalette: Palette;
     /**
      *
      * The density offset, used with designUnit to calculate height and spacing.
@@ -112,11 +88,20 @@ export declare class DesignSystemProvider extends FoundationElement {
      * The corner radius applied to controls.
      *
      * @remarks
-     * HTML attribute: corner-radius
+     * HTML attribute: control-corner-radius
      *
-     * CSS custom property: --corner-radius
+     * CSS custom property: --control-corner-radius
      */
     controlCornerRadius: number;
+    /**
+     * The corner radius applied to layers.
+     *
+     * @remarks
+     * HTML attribute: layer-corner-radius
+     *
+     * CSS custom property: --layer-corner-radius
+     */
+    layerCornerRadius: number;
     /**
      * The width of the standard stroke applied to stroke components in pixels.
      *
@@ -534,10 +519,10 @@ export declare class DesignSystemProvider extends FoundationElement {
      */
     baseLayerLuminance: number;
     /**
-     * The distance from the resolved neutral divider color for the rest state of the neutral-foreground recipe.
+     * The distance from the resolved divider color for the rest state of the neutral-stroke-divider recipe.
      *
      * @remarks
-     * HTML attribute: neutral-divider-rest-delta
+     * HTML attribute: neutral-stroke-divider-rest-delta
      *
      * CSS custom property: N/A
      */

package/dist/dts/design-tokens.d.ts

@@ -3,14 +3,18 @@ import { Direction } from '@microsoft/fast-web-utilities';
 import { Palette } from './color/palette';
 import { Swatch } from './color/swatch';
 import { InteractiveSwatchSet } from './color/recipe';
-/** @public */
+/** @public @deprecated Use ColorRecipe instead */
 export interface Recipe<T> {
     evaluate(element: HTMLElement, reference?: Swatch): T;
 }
 /** @public */
-export declare type ColorRecipe = Recipe<Swatch>;
+export interface ColorRecipe {
+    evaluate(element: HTMLElement, reference?: Swatch): Swatch;
+}
 /** @public */
-export declare type InteractiveColorRecipe = Recipe<InteractiveSwatchSet>;
+export interface InteractiveColorRecipe {
+    evaluate(element: HTMLElement, reference?: Swatch): InteractiveSwatchSet;
+}
 /** @public */
 export declare const direction: import("@microsoft/fast-foundation").CSSDesignToken<Direction>;
 /** @public */
@@ -72,82 +76,114 @@ export declare const typeRampPlus6LineHeight: import("@microsoft/fast-foundation
 /** @public */
 export declare const baseLayerLuminance: import("@microsoft/fast-foundation").CSSDesignToken<number>;
 /** @public */
-export declare const accentFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const accentFillRestDelta: DesignToken<number>;
 /** @public */
-export declare const accentFillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const accentFillHoverDelta: DesignToken<number>;
 /** @public */
-export declare const accentFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const accentFillActiveDelta: DesignToken<number>;
 /** @public */
-export declare const accentFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const accentFillFocusDelta: DesignToken<number>;
 /** @public */
-export declare const accentForegroundRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const accentForegroundRestDelta: DesignToken<number>;
 /** @public */
-export declare const accentForegroundHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const accentForegroundHoverDelta: DesignToken<number>;
 /** @public */
-export declare const accentForegroundActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const accentForegroundActiveDelta: DesignToken<number>;
 /** @public */
-export declare const accentForegroundFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const accentForegroundFocusDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillRestDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillHoverDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillActiveDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillFocusDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillInputRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillInputRestDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillInputHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillInputHoverDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillInputActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillInputActiveDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillInputFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillInputFocusDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillInverseRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillInputAltRestDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillInverseHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillInputAltHoverDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillInverseActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillInputAltActiveDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillInverseFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillInputAltFocusDelta: DesignToken<number>;
+/** @public */
+export declare const neutralFillLayerRestDelta: DesignToken<number>;
+/** @public */
+export declare const neutralFillLayerHoverDelta: DesignToken<number>;
+/** @public */
+export declare const neutralFillLayerActiveDelta: DesignToken<number>;
+/** @public */
+export declare const neutralFillLayerAltRestDelta: DesignToken<number>;
+/** @public */
+export declare const neutralFillSecondaryRestDelta: DesignToken<number>;
+/** @public */
+export declare const neutralFillSecondaryHoverDelta: DesignToken<number>;
+/** @public */
+export declare const neutralFillSecondaryActiveDelta: DesignToken<number>;
+/** @public */
+export declare const neutralFillSecondaryFocusDelta: DesignToken<number>;
+/** @public */
+export declare const neutralFillStealthRestDelta: DesignToken<number>;
+/** @public */
+export declare const neutralFillStealthHoverDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillLayerRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillStealthActiveDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillStealthRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillStealthFocusDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillStealthHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillStrongRestDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillStealthActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillStrongHoverDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillStealthFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillStrongActiveDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillStrongRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralFillStrongFocusDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillStrongHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralStrokeRestDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillStrongActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralStrokeHoverDelta: DesignToken<number>;
 /** @public */
-export declare const neutralFillStrongFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralStrokeActiveDelta: DesignToken<number>;
 /** @public */
-export declare const neutralStrokeRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralStrokeFocusDelta: DesignToken<number>;
 /** @public */
-export declare const neutralStrokeHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralStrokeControlRestDelta: DesignToken<number>;
 /** @public */
-export declare const neutralStrokeActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralStrokeControlHoverDelta: DesignToken<number>;
 /** @public */
-export declare const neutralStrokeFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralStrokeControlActiveDelta: DesignToken<number>;
 /** @public */
-export declare const neutralStrokeDividerRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralStrokeControlFocusDelta: DesignToken<number>;
 /** @public */
-export declare const neutralStrokeStrongHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralStrokeDividerRestDelta: DesignToken<number>;
 /** @public */
-export declare const neutralStrokeStrongActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralStrokeLayerRestDelta: DesignToken<number>;
 /** @public */
-export declare const neutralStrokeStrongFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralStrokeLayerHoverDelta: DesignToken<number>;
+/** @public */
+export declare const neutralStrokeLayerActiveDelta: DesignToken<number>;
+/** @public */
+export declare const neutralStrokeStrongHoverDelta: DesignToken<number>;
+/** @public */
+export declare const neutralStrokeStrongActiveDelta: DesignToken<number>;
+/** @public */
+export declare const neutralStrokeStrongFocusDelta: DesignToken<number>;
+/** @public */
+export declare const neutralBaseColor: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public */
 export declare const neutralPalette: DesignToken<Palette<Swatch>>;
 /** @public */
+export declare const accentBaseColor: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
 export declare const accentPalette: DesignToken<Palette<Swatch>>;
 /** @public */
 export declare const neutralLayerCardContainerRecipe: DesignToken<ColorRecipe>;
@@ -186,7 +222,7 @@ export declare const accentFillActive: import("@microsoft/fast-foundation").CSSD
 /** @public */
 export declare const accentFillFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public */
-export declare const foregroundOnAccentRecipe: DesignToken<ColorRecipe>;
+export declare const foregroundOnAccentRecipe: DesignToken<InteractiveColorRecipe>;
 /** @public */
 export declare const foregroundOnAccentRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public */
@@ -195,16 +231,6 @@ export declare const foregroundOnAccentHover: import("@microsoft/fast-foundation
 export declare const foregroundOnAccentActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public */
 export declare const foregroundOnAccentFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
-/** @public @deprecated Not used */
-export declare const foregroundOnAccentLargeRecipe: DesignToken<ColorRecipe>;
-/** @public @deprecated Not used */
-export declare const foregroundOnAccentRestLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
-/** @public @deprecated Not used */
-export declare const foregroundOnAccentHoverLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
-/** @public @deprecated Not used */
-export declare const foregroundOnAccentActiveLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
-/** @public @deprecated Not used */
-export declare const foregroundOnAccentFocusLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public */
 export declare const accentForegroundRecipe: DesignToken<InteractiveColorRecipe>;
 /** @public */
@@ -216,6 +242,16 @@ export declare const accentForegroundActive: import("@microsoft/fast-foundation"
 /** @public */
 export declare const accentForegroundFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public */
+export declare const accentStrokeControlRecipe: DesignToken<InteractiveColorRecipe>;
+/** @public */
+export declare const accentStrokeControlRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const accentStrokeControlHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const accentStrokeControlActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const accentStrokeControlFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
 export declare const neutralFillRecipe: DesignToken<InteractiveColorRecipe>;
 /** @public */
 export declare const neutralFillRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
@@ -232,24 +268,42 @@ export declare const neutralFillInputRest: import("@microsoft/fast-foundation").
 /** @public */
 export declare const neutralFillInputHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public */
+export declare const neutralFillInputActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
 export declare const neutralFillInputFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public */
-export declare const neutralFillInputActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
-/** @public @deprecated Not used */
-export declare const neutralFillInverseRecipe: DesignToken<InteractiveColorRecipe>;
-/** @public @deprecated Not used */
-export declare const neutralFillInverseRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
-/** @public @deprecated Not used */
-export declare const neutralFillInverseHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
-/** @public @deprecated Not used */
-export declare const neutralFillInverseActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
-/** @public @deprecated Not used */
-export declare const neutralFillInverseFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+export declare const neutralFillInputAltRecipe: DesignToken<InteractiveColorRecipe>;
 /** @public */
-export declare const neutralFillLayerRecipe: DesignToken<ColorRecipe>;
+export declare const neutralFillInputAltRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralFillInputAltHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralFillInputAltActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralFillInputAltFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralFillLayerRecipe: DesignToken<InteractiveColorRecipe>;
 /** @public */
 export declare const neutralFillLayerRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public */
+export declare const neutralFillLayerHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralFillLayerActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralFillLayerAltRecipe: DesignToken<InteractiveColorRecipe>;
+/** @public */
+export declare const neutralFillLayerAltRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralFillSecondaryRecipe: DesignToken<InteractiveColorRecipe>;
+/** @public */
+export declare const neutralFillSecondaryRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralFillSecondaryHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralFillSecondaryActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralFillSecondaryFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
 export declare const neutralFillStealthRecipe: DesignToken<InteractiveColorRecipe>;
 /** @public */
 export declare const neutralFillStealthRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
@@ -270,6 +324,20 @@ export declare const neutralFillStrongActive: import("@microsoft/fast-foundation
 /** @public */
 export declare const neutralFillStrongFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public */
+export declare const neutralForegroundRecipe: DesignToken<InteractiveColorRecipe>;
+/** @public */
+export declare const neutralForegroundRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralForegroundHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralForegroundActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralForegroundFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralForegroundHintRecipe: DesignToken<ColorRecipe>;
+/** @public */
+export declare const neutralForegroundHint: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
 export declare const neutralStrokeRecipe: DesignToken<InteractiveColorRecipe>;
 /** @public */
 export declare const neutralStrokeRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
@@ -280,10 +348,38 @@ export declare const neutralStrokeActive: import("@microsoft/fast-foundation").C
 /** @public */
 export declare const neutralStrokeFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public */
+export declare const neutralStrokeControlRecipe: DesignToken<InteractiveColorRecipe>;
+/** @public */
+export declare const neutralStrokeControlRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralStrokeControlHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralStrokeControlActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralStrokeControlFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
 export declare const neutralStrokeDividerRecipe: DesignToken<ColorRecipe>;
 /** @public */
 export declare const neutralStrokeDividerRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public */
+export declare const neutralStrokeInputRecipe: DesignToken<InteractiveColorRecipe>;
+/** @public */
+export declare const neutralStrokeInputRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralStrokeInputHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralStrokeInputActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralStrokeInputFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralStrokeLayerRecipe: DesignToken<InteractiveColorRecipe>;
+/** @public */
+export declare const neutralStrokeLayerRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralStrokeLayerHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
+export declare const neutralStrokeLayerActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public */
 export declare const neutralStrokeStrongRecipe: DesignToken<InteractiveColorRecipe>;
 /** @public */
 export declare const neutralStrokeStrongRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
@@ -301,14 +397,34 @@ export declare const focusStrokeOuter: import("@microsoft/fast-foundation").CSSD
 export declare const focusStrokeInnerRecipe: DesignToken<ColorRecipe>;
 /** @public */
 export declare const focusStrokeInner: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
-/** @public */
-export declare const neutralForegroundRecipe: DesignToken<ColorRecipe>;
-/** @public */
-export declare const neutralForegroundRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
-/** @public */
-export declare const neutralForegroundHintRecipe: DesignToken<ColorRecipe>;
-/** @public */
-export declare const neutralForegroundHint: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public @deprecated Not used */
+export declare const foregroundOnAccentLargeRecipe: DesignToken<InteractiveColorRecipe>;
+/** @public @deprecated Not used */
+export declare const foregroundOnAccentRestLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public @deprecated Not used */
+export declare const foregroundOnAccentHoverLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public @deprecated Not used */
+export declare const foregroundOnAccentActiveLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public @deprecated Not used */
+export declare const foregroundOnAccentFocusLarge: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public @deprecated Not used */
+export declare const neutralFillInverseRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public @deprecated Not used */
+export declare const neutralFillInverseHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public @deprecated Not used */
+export declare const neutralFillInverseActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public @deprecated Not used */
+export declare const neutralFillInverseFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public @deprecated Not used */
+export declare const neutralFillInverseRecipe: DesignToken<InteractiveColorRecipe>;
+/** @public @deprecated Not used */
+export declare const neutralFillInverseRest: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public @deprecated Not used */
+export declare const neutralFillInverseHover: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public @deprecated Not used */
+export declare const neutralFillInverseActive: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
+/** @public @deprecated Not used */
+export declare const neutralFillInverseFocus: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public @deprecated Use controlCornerRadius */
 export declare const cornerRadius: import("@microsoft/fast-foundation").CSSDesignToken<number>;
 /** @public @deprecated Use layerCornerRadius */
@@ -317,16 +433,6 @@ export declare const elevatedCornerRadius: import("@microsoft/fast-foundation").
 export declare const outlineWidth: import("@microsoft/fast-foundation").CSSDesignToken<number>;
 /** @public @deprecated Use focusStrokeWidth */
 export declare const focusOutlineWidth: import("@microsoft/fast-foundation").CSSDesignToken<number>;
-/** @public @deprecated Use neutralFillLayerRestDelta */
-export declare const neutralFillCardDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
-/** @public @deprecated Use neutralFillStrongRestDelta */
-export declare const neutralFillToggleRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
-/** @public @deprecated Use neutralFillStrongHoverDelta */
-export declare const neutralFillToggleHoverDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
-/** @public @deprecated Use neutralFillStrongActiveDelta */
-export declare const neutralFillToggleActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
-/** @public @deprecated Use neutralFillStrongFocusDelta */
-export declare const neutralFillToggleFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
 /** @public @deprecated Use neutralFillInverseRestDelta */
 export declare const neutralContrastFillRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
 /** @public @deprecated Use neutralFillInverseHoverDelta */
@@ -335,8 +441,18 @@ export declare const neutralContrastFillHoverDelta: import("@microsoft/fast-foun
 export declare const neutralContrastFillActiveDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
 /** @public @deprecated Use neutralFillInverseFocusDelta */
 export declare const neutralContrastFillFocusDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+/** @public @deprecated Use neutralFillLayerRestDelta */
+export declare const neutralFillCardDelta: DesignToken<number>;
+/** @public @deprecated Use neutralFillStrongRestDelta */
+export declare const neutralFillToggleRestDelta: DesignToken<number>;
+/** @public @deprecated Use neutralFillStrongHoverDelta */
+export declare const neutralFillToggleHoverDelta: DesignToken<number>;
+/** @public @deprecated Use neutralFillStrongActiveDelta */
+export declare const neutralFillToggleActiveDelta: DesignToken<number>;
+/** @public @deprecated Use neutralFillStrongFocusDelta */
+export declare const neutralFillToggleFocusDelta: DesignToken<number>;
 /** @public @deprecated Use neutralStrokeDividerRestDelta */
-export declare const neutralDividerRestDelta: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const neutralDividerRestDelta: DesignToken<number>;
 /** @public @deprecated Use neutralLayer1 */
 export declare const neutralLayerL1: import("@microsoft/fast-foundation").CSSDesignToken<Swatch>;
 /** @public @deprecated Use neutralLayer2 */

package/dist/dts/menu/index.d.ts

@@ -1,4 +1,14 @@
-import { Menu } from '@microsoft/fast-foundation';
+import { Menu as FoundationMenu } from '@microsoft/fast-foundation';
+/**
+ * The Fluent menu class
+ * @public
+ */
+export declare class Menu extends FoundationMenu {
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+}
 /**
  * The Fluent Menu Element. Implements {@link @microsoft/fast-foundation#Menu},
  * {@link @microsoft/fast-foundation#menuTemplate}
@@ -14,8 +24,3 @@ export declare const fluentMenu: (overrideDefinition?: import("@microsoft/fast-f
  * @public
  */
 export declare const menuStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles;
-/**
- * Base class for Menu
- * @public
- */
-export { Menu };

package/dist/dts/menu/menu.stories.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Menu>;
+    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import(".").Menu>;
 };
 export default _default;
 export declare const Menu: any;

package/dist/dts/select/index.d.ts

@@ -3,7 +3,7 @@ import { Select as FoundationSelect, SelectOptions } from '@microsoft/fast-found
  * Select appearances
  * @public
  */
-export declare type SelectAppearance = 'filled' | 'outline';
+export declare type SelectAppearance = 'filled' | 'outline' | 'stealth';
 /**
  * The Fluent select class
  * @internal

package/dist/dts/select/select.stories.d.ts

@@ -3,6 +3,13 @@ declare const _default: {
     title: string;
     component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").SelectOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").SelectOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     argTypes: {
+        appearance: {
+            options: string[];
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+        };
         disabled: {
             control: {
                 type: string;
@@ -13,6 +20,7 @@ declare const _default: {
             control: {
                 type: string;
             };
+            defaultValue: string;
         };
     };
 };

package/dist/dts/select/select.styles.d.ts

@@ -1,4 +1,5 @@
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementDefinitionContext, SelectOptions } from '@microsoft/fast-foundation';
 export declare const selectFilledStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles;
+export declare const selectStealthStyles: (context: ElementDefinitionContext, definition: SelectOptions) => ElementStyles;
 export declare const selectStyles: (context: any, definition: any) => ElementStyles;

package/dist/dts/skeleton/skeleton.stories.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
     component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Skeleton>;
     argTypes: {
         shape: {
+            defaultValue: string;
             options: string[];
             control: {
                 type: string;