From d4c6b4bc7dc512c997a0513427a730d5def99fd4 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Fri, 12 Apr 2024 11:14:09 -0700
Subject: [PATCH] fix(web-components): remove final dependencies on
 fast-foundation (#31009)

Co-authored-by: Christopher Holt <=>
---
 .../src/utilities/WCThemeDecorator.tsx        |   3 -
 ...-86d45358-8f3e-454f-92b1-96b3ea94e9a0.json |   7 +
 packages/web-components/docs/api-report.md    |  46 +++++
 packages/web-components/package.json          |   2 +-
 .../accordion-item/accordion-item.styles.ts   |   2 +-
 .../src/accordion/accordion.styles.ts         |   2 +-
 .../src/avatar/avatar.styles.ts               |   2 +-
 .../src/button/button.styles.ts               |   2 +-
 .../src/checkbox/checkbox.styles.ts           |   2 +-
 .../src/dialog/dialog.styles.ts               |   2 +-
 .../src/divider/divider.styles.ts             |   2 +-
 packages/web-components/src/index.ts          |   4 +
 .../web-components/src/label/label.styles.ts  |   2 +-
 .../src/menu-item/menu-item.styles.ts         |   2 +-
 .../src/menu-list/menu-list.styles.ts         |   2 +-
 .../src/progress-bar/progress-bar.styles.ts   |   2 +-
 .../src/radio-group/radio-group.styles.ts     |   2 +-
 .../web-components/src/radio/radio.styles.ts  |   2 +-
 .../src/slider/slider.styles.ts               |   2 +-
 .../src/spinner/spinner.styles.ts             |   2 +-
 .../src/styles/partials/badge.partials.ts     |   2 +-
 .../src/switch/switch.styles.ts               |   2 +-
 .../src/tab-panel/tab-panel.styles.ts         |   2 +-
 packages/web-components/src/tab/tab.styles.ts |   2 +-
 .../web-components/src/tabs/tabs.styles.ts    |   2 +-
 .../src/text-input/text-input.styles.ts       |   2 +-
 .../web-components/src/text/text.styles.ts    |   2 +-
 .../web-components/src/theme/theme.stories.ts |  17 +-
 .../src/toggle-button/toggle-button.styles.ts |   2 +-
 .../match-media-stylesheet-behavior.ts        | 187 ++++++++++++++++++
 packages/web-components/src/utils/display.ts  |  44 +++++
 packages/web-components/src/utils/index.ts    |   2 +
 packages/web-components/tensile.config.js     |   2 -
 yarn.lock                                     |  21 +-
 34 files changed, 326 insertions(+), 55 deletions(-)
 create mode 100644 change/@fluentui-web-components-86d45358-8f3e-454f-92b1-96b3ea94e9a0.json
 create mode 100644 packages/web-components/src/utils/behaviors/match-media-stylesheet-behavior.ts
 create mode 100644 packages/web-components/src/utils/display.ts

diff --git a/apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx b/apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx
index 88e5f2b1760fb2..78568e7404cc9b 100644
--- a/apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx
+++ b/apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx
@@ -2,12 +2,9 @@ import * as React from 'react';
 import { StoryContext } from '@storybook/addons';
 import { ComponentStory } from '@storybook/react';
 import { FASTElement, customElement, html, attr } from '@microsoft/fast-element';
-import { DesignToken } from '@microsoft/fast-foundation';
 import { teamsLightTheme, teamsDarkTheme, webLightTheme, webDarkTheme } from '@fluentui/tokens';
 import { setThemeFor } from '@fluentui/web-components';
 
-DesignToken.registerDefaultStyleTarget();
-
 const themes = [
   { id: 'web-light', label: 'Web Light', theme: webLightTheme },
   { id: 'web-dark', label: 'Web Dark', theme: webDarkTheme },
diff --git a/change/@fluentui-web-components-86d45358-8f3e-454f-92b1-96b3ea94e9a0.json b/change/@fluentui-web-components-86d45358-8f3e-454f-92b1-96b3ea94e9a0.json
new file mode 100644
index 00000000000000..31e903961f35a4
--- /dev/null
+++ b/change/@fluentui-web-components-86d45358-8f3e-454f-92b1-96b3ea94e9a0.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(web-components): remove final dependencies on fast-foundation",
+  "packageName": "@fluentui/web-components",
+  "email": "=",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index a072cf353e83ef..9930c47e615f96 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -10,6 +10,8 @@ import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
+import type { HostBehavior } from '@microsoft/fast-element';
+import type { HostController } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import type { SyntheticViewTemplate } from '@microsoft/fast-element';
@@ -1648,6 +1650,9 @@ export const CounterBadgeStyles: ElementStyles;
 // @public
 export const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
 
+// @public
+export type CSSDisplayPropertyValue = 'block' | 'contents' | 'flex' | 'grid' | 'inherit' | 'initial' | 'inline' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline-table' | 'list-item' | 'none' | 'run-in' | 'table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row' | 'table-row-group';
+
 // @public (undocumented)
 export const curveAccelerateMax = "var(--curveAccelerateMax)";
 
@@ -1675,6 +1680,9 @@ export const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 // @public (undocumented)
 export const curveLinear = "var(--curveLinear)";
 
+// @public
+export const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "DelegatesARIAButton" because one of its declarations is marked as @internal
 //
 // @public
@@ -1741,6 +1749,9 @@ export const DialogStyles: ElementStyles;
 // @public
 export const DialogTemplate: ElementViewTemplate<Dialog>;
 
+// @public
+export function display(displayValue: CSSDisplayPropertyValue): string;
+
 // @public
 export class Divider extends FASTElement {
     alignContent?: DividerAlignContent;
@@ -1880,6 +1891,15 @@ export const fontWeightRegular = "var(--fontWeightRegular)";
 // @public (undocumented)
 export const fontWeightSemibold = "var(--fontWeightSemibold)";
 
+// @public
+export const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+
+// @public
+export const getDirection: (rootNode: HTMLElement) => Direction;
+
+// @public
+export const hidden = ":host([hidden]){display:none}";
+
 // @public
 class Image_2 extends FASTElement {
     block?: boolean;
@@ -1940,6 +1960,9 @@ export const LabelStyles: ElementStyles;
 // @public (undocumented)
 export const LabelTemplate: ElementViewTemplate<Label>;
 
+// @public
+export const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+
 // @public (undocumented)
 export const lineHeightBase100 = "var(--lineHeightBase100)";
 
@@ -1970,6 +1993,29 @@ export const lineHeightHero800 = "var(--lineHeightHero800)";
 // @public (undocumented)
 export const lineHeightHero900 = "var(--lineHeightHero900)";
 
+// @public
+export abstract class MatchMediaBehavior implements HostBehavior {
+    constructor(query: MediaQueryList);
+    connectedCallback(controller: HostController): void;
+    protected abstract constructListener(controller: HostController): MediaQueryListListener;
+    disconnectedCallback(controller: HostController): void;
+    readonly query: MediaQueryList;
+}
+
+// @public
+export class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+    constructor(query: MediaQueryList, styles: ElementStyles);
+    protected constructListener(controller: HostController): MediaQueryListListener;
+    readonly query: MediaQueryList;
+    // @internal
+    removedCallback(controller: HostController<any>): void;
+    readonly styles: ElementStyles;
+    static with(query: MediaQueryList): (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
+}
+
+// @public
+export type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
+
 // @public
 export class Menu extends FASTElement {
     cleanup?: () => void;
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index fa7e9cee49fc60..0fea5c2f8dc2e5 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -205,9 +205,9 @@
   },
   "dependencies": {
     "@microsoft/fast-element": "2.0.0-beta.26",
-    "@microsoft/fast-foundation": "3.0.0-alpha.31",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "@fluentui/tokens": "1.0.0-alpha.2",
+    "tabbable": "^6.2.0",
     "tslib": "^2.1.0"
   },
   "beachball": {
diff --git a/packages/web-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion-item/accordion-item.styles.ts
index 3c409014ee82e3..d686a73903c318 100644
--- a/packages/web-components/src/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusMedium,
   borderRadiusSmall,
diff --git a/packages/web-components/src/accordion/accordion.styles.ts b/packages/web-components/src/accordion/accordion.styles.ts
index e05e6fff9754b4..02bbb6c060ad01 100644
--- a/packages/web-components/src/accordion/accordion.styles.ts
+++ b/packages/web-components/src/accordion/accordion.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 
 export const styles = css`
   ${display('flex')}
diff --git a/packages/web-components/src/avatar/avatar.styles.ts b/packages/web-components/src/avatar/avatar.styles.ts
index a477a762b3e75b..c5167287d04dcc 100644
--- a/packages/web-components/src/avatar/avatar.styles.ts
+++ b/packages/web-components/src/avatar/avatar.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusLarge,
diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts
index 418c579b1cc1be..d5932813308066 100644
--- a/packages/web-components/src/button/button.styles.ts
+++ b/packages/web-components/src/button/button.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusLarge,
diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts
index a54bc229505877..6af71e7d6571d1 100644
--- a/packages/web-components/src/checkbox/checkbox.styles.ts
+++ b/packages/web-components/src/checkbox/checkbox.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusMedium,
diff --git a/packages/web-components/src/dialog/dialog.styles.ts b/packages/web-components/src/dialog/dialog.styles.ts
index 5185d9468f0222..a2165df424447d 100644
--- a/packages/web-components/src/dialog/dialog.styles.ts
+++ b/packages/web-components/src/dialog/dialog.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
+import { display } from '../utils/index.js';
 import {
   borderRadiusXLarge,
   colorBackgroundOverlay,
diff --git a/packages/web-components/src/divider/divider.styles.ts b/packages/web-components/src/divider/divider.styles.ts
index b7d6fe788b7f5d..2180ab78111ba7 100644
--- a/packages/web-components/src/divider/divider.styles.ts
+++ b/packages/web-components/src/divider/divider.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   colorBrandForeground1,
   colorBrandStroke1,
diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
index a5d24a242b792c..f7cbc87bde5f58 100644
--- a/packages/web-components/src/index.ts
+++ b/packages/web-components/src/index.ts
@@ -30,3 +30,7 @@ export * from './toggle-button/index.js';
 
 export * from './fluent-design-system.js';
 export * from './theme/index.js';
+
+export * from './utils/direction.js';
+export * from './utils/display.js';
+export * from './utils/behaviors/match-media-stylesheet-behavior.js';
diff --git a/packages/web-components/src/label/label.styles.ts b/packages/web-components/src/label/label.styles.ts
index 0d22439dbf9d9b..fb78186d2780ce 100644
--- a/packages/web-components/src/label/label.styles.ts
+++ b/packages/web-components/src/label/label.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   colorNeutralForeground1,
   colorNeutralForegroundDisabled,
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
index 6dca44664b28e9..983c0447d056e3 100644
--- a/packages/web-components/src/menu-item/menu-item.styles.ts
+++ b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusMedium,
   colorCompoundBrandForeground1Hover,
diff --git a/packages/web-components/src/menu-list/menu-list.styles.ts b/packages/web-components/src/menu-list/menu-list.styles.ts
index 444418aa0af746..ee14d2346b1e5a 100644
--- a/packages/web-components/src/menu-list/menu-list.styles.ts
+++ b/packages/web-components/src/menu-list/menu-list.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusMedium,
   colorNeutralBackground1,
diff --git a/packages/web-components/src/progress-bar/progress-bar.styles.ts b/packages/web-components/src/progress-bar/progress-bar.styles.ts
index c5c266870f51fd..3898d93b1b9869 100644
--- a/packages/web-components/src/progress-bar/progress-bar.styles.ts
+++ b/packages/web-components/src/progress-bar/progress-bar.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusMedium,
   colorBrandBackground2,
diff --git a/packages/web-components/src/radio-group/radio-group.styles.ts b/packages/web-components/src/radio-group/radio-group.styles.ts
index cf22bfa8f064e0..7c7ab91caf656a 100644
--- a/packages/web-components/src/radio-group/radio-group.styles.ts
+++ b/packages/web-components/src/radio-group/radio-group.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   colorNeutralForeground1,
   colorNeutralForegroundDisabled,
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index bb9ea56fc2c030..1651a33fae3e90 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusSmall,
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
index 15be14428b1644..6174f55c2e8dd6 100644
--- a/packages/web-components/src/slider/slider.styles.ts
+++ b/packages/web-components/src/slider/slider.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusMedium,
diff --git a/packages/web-components/src/spinner/spinner.styles.ts b/packages/web-components/src/spinner/spinner.styles.ts
index c1d58b76137077..63fc6272e8173f 100644
--- a/packages/web-components/src/spinner/spinner.styles.ts
+++ b/packages/web-components/src/spinner/spinner.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import { colorBrandStroke1, colorBrandStroke2, colorNeutralStrokeOnBrand2 } from '../theme/design-tokens.js';
 
 export const styles = css`
diff --git a/packages/web-components/src/styles/partials/badge.partials.ts b/packages/web-components/src/styles/partials/badge.partials.ts
index 22e8062c33a7d2..eed1326e4d7cba 100644
--- a/packages/web-components/src/styles/partials/badge.partials.ts
+++ b/packages/web-components/src/styles/partials/badge.partials.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../../utils/index.js';
 import {
   borderRadiusCircular,
   colorBrandBackground,
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
index bb0f14dc84a4f1..4677c871802a17 100644
--- a/packages/web-components/src/switch/switch.styles.ts
+++ b/packages/web-components/src/switch/switch.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusCircular,
   colorCompoundBrandBackground,
diff --git a/packages/web-components/src/tab-panel/tab-panel.styles.ts b/packages/web-components/src/tab-panel/tab-panel.styles.ts
index 1440583a4ef325..15358fe626ef15 100644
--- a/packages/web-components/src/tab-panel/tab-panel.styles.ts
+++ b/packages/web-components/src/tab-panel/tab-panel.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import { spacingHorizontalM, spacingHorizontalMNudge } from '../theme/design-tokens.js';
 
 export const styles = css`
diff --git a/packages/web-components/src/tab/tab.styles.ts b/packages/web-components/src/tab/tab.styles.ts
index bff8d2f170d582..3af6ce1ef304b0 100644
--- a/packages/web-components/src/tab/tab.styles.ts
+++ b/packages/web-components/src/tab/tab.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusMedium,
diff --git a/packages/web-components/src/tabs/tabs.styles.ts b/packages/web-components/src/tabs/tabs.styles.ts
index a37d97c349c5d4..f07b356ddcfb43 100644
--- a/packages/web-components/src/tabs/tabs.styles.ts
+++ b/packages/web-components/src/tabs/tabs.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusMedium,
diff --git a/packages/web-components/src/text-input/text-input.styles.ts b/packages/web-components/src/text-input/text-input.styles.ts
index 5ff9ef6cc41c73..208bb63ee3e412 100644
--- a/packages/web-components/src/text-input/text-input.styles.ts
+++ b/packages/web-components/src/text-input/text-input.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusMedium,
   colorCompoundBrandStroke,
diff --git a/packages/web-components/src/text/text.styles.ts b/packages/web-components/src/text/text.styles.ts
index bbb9afbbea4709..8ab86f9be6b204 100644
--- a/packages/web-components/src/text/text.styles.ts
+++ b/packages/web-components/src/text/text.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import {
   fontFamilyBase,
   fontFamilyMonospace,
diff --git a/packages/web-components/src/theme/theme.stories.ts b/packages/web-components/src/theme/theme.stories.ts
index 4641348903aad9..5ffb48746219c5 100644
--- a/packages/web-components/src/theme/theme.stories.ts
+++ b/packages/web-components/src/theme/theme.stories.ts
@@ -1,8 +1,5 @@
-import { DesignToken } from '@microsoft/fast-foundation/design-token.js';
 import * as tokens from '../theme/design-tokens.js';
 
-DesignToken.registerDefaultStyleTarget();
-
 export default {
   title: 'Theme/Tokens',
 };
@@ -12,13 +9,13 @@ export const Tokens = () => `
   <h3>Theme Tokens</h3>
   <p>Debug story which uses theme tokens to style the element below.</p>
   <div style="
-    font-family: var(${tokens.fontFamilyBase});
-    font-size: var(${tokens.fontSizeBase300});
-    background: var(${tokens.colorBrandBackground});
-    color: var(${tokens.colorNeutralForegroundOnBrand});
-    border: var(${tokens.strokeWidthThicker}) solid var(${tokens.colorNeutralStroke1});
-    padding: var(${tokens.spacingVerticalS}) var(${tokens.spacingHorizontalM});
-    box-shadow: var(${tokens.shadow28});
+    font-family: ${tokens.fontFamilyBase};
+    font-size: ${tokens.fontSizeBase300};
+    background: ${tokens.colorBrandBackground};
+    color: ${tokens.colorNeutralForegroundOnBrand};
+    border: ${tokens.strokeWidthThicker} solid ${tokens.colorNeutralStroke1};
+    padding: ${tokens.spacingVerticalS} ${tokens.spacingHorizontalM};
+    box-shadow: ${tokens.shadow28};
   ">colorNeutralForegroundOnBrand on colorBrandBackground with shadow28</div>
 </div>
 `;
diff --git a/packages/web-components/src/toggle-button/toggle-button.styles.ts b/packages/web-components/src/toggle-button/toggle-button.styles.ts
index 2de84d4416a84d..bc2f76fb68019a 100644
--- a/packages/web-components/src/toggle-button/toggle-button.styles.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { styles as ButtonStyles } from '../button/button.styles.js';
 import {
   colorBrandBackgroundHover,
diff --git a/packages/web-components/src/utils/behaviors/match-media-stylesheet-behavior.ts b/packages/web-components/src/utils/behaviors/match-media-stylesheet-behavior.ts
new file mode 100644
index 00000000000000..42f46e7494a716
--- /dev/null
+++ b/packages/web-components/src/utils/behaviors/match-media-stylesheet-behavior.ts
@@ -0,0 +1,187 @@
+import type { ElementStyles, HostBehavior, HostController } from '@microsoft/fast-element';
+
+/**
+ * An event listener fired by a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList | MediaQueryList }.
+ * @public
+ */
+export type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
+
+/**
+ * An abstract behavior to react to media queries. Implementations should implement
+ * the `constructListener` method to perform some action based on media query changes.
+ *
+ * @public
+ */
+export abstract class MatchMediaBehavior implements HostBehavior {
+  /**
+   * The behavior needs to operate on element instances but elements might share a behavior instance.
+   * To ensure proper attachment / detachment per instance, we construct a listener for
+   * each bind invocation and cache the listeners by element reference.
+   */
+  private listenerCache = new WeakMap<HostController, MediaQueryListListener>();
+
+  /**
+   * The media query that the behavior operates on.
+   */
+  public readonly query: MediaQueryList;
+
+  /**
+   *
+   * @param query - The media query to operate from.
+   */
+  constructor(query: MediaQueryList) {
+    this.query = query;
+  }
+
+  /**
+   * Constructs a function that will be invoked with the MediaQueryList context
+   * @param controller - The host controller orchestrating this behavior.
+   */
+  protected abstract constructListener(controller: HostController): MediaQueryListListener;
+
+  /**
+   * Binds the behavior to the element.
+   * @param controller - The host controller orchestrating this behavior.
+   */
+  connectedCallback(controller: HostController) {
+    const { query } = this;
+    let listener = this.listenerCache.get(controller);
+
+    if (!listener) {
+      listener = this.constructListener(controller);
+      this.listenerCache.set(controller, listener);
+    }
+
+    // Invoke immediately to add if the query currently matches
+    listener.bind(query)();
+    query.addEventListener('change', listener);
+  }
+
+  /**
+   * Unbinds the behavior from the element.
+   * @param controller - The host controller orchestrating this behavior.
+   */
+  disconnectedCallback(controller: HostController) {
+    const listener = this.listenerCache.get(controller);
+    if (listener) {
+      this.query.removeEventListener('change', listener);
+    }
+  }
+}
+
+/**
+ * A behavior to add or remove a stylesheet from an element based on a media query. The behavior ensures that
+ * styles are applied while the a query matches the environment and that styles are not applied if the query does
+ * not match the environment.
+ *
+ * @public
+ */
+export class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
+  /**
+   * The media query that the behavior operates on.
+   */
+  public readonly query!: MediaQueryList;
+
+  /**
+   * The styles object to be managed by the behavior.
+   */
+  public readonly styles: ElementStyles;
+
+  /**
+   * Constructs a {@link MatchMediaStyleSheetBehavior} instance.
+   * @param query - The media query to operate from.
+   * @param styles - The styles to coordinate with the query.
+   */
+  constructor(query: MediaQueryList, styles: ElementStyles) {
+    super(query);
+    this.styles = styles;
+  }
+
+  /**
+   * Defines a function to construct {@link MatchMediaStyleSheetBehavior | MatchMediaStyleSheetBehaviors} for
+   * a provided query.
+   * @param query - The media query to operate from.
+   *
+   * @public
+   * @example
+   *
+   * ```ts
+   * import { css } from "@microsoft/fast-element";
+   * import { MatchMediaStyleSheetBehavior } from "@fluentui/web-components";
+   *
+   * const landscapeBehavior = MatchMediaStyleSheetBehavior.with(
+   *   window.matchMedia("(orientation: landscape)")
+   * );
+   *
+   * const styles = css`
+   *   :host {
+   *     width: 200px;
+   *     height: 400px;
+   *   }
+   * `
+   * .withBehaviors(landscapeBehavior(css`
+   *   :host {
+   *     width: 400px;
+   *     height: 200px;
+   *   }
+   * `))
+   * ```
+   */
+  public static with(query: MediaQueryList) {
+    return (styles: ElementStyles) => {
+      return new MatchMediaStyleSheetBehavior(query, styles);
+    };
+  }
+
+  /**
+   * Constructs a match-media listener for a provided element.
+   * @param source - the element for which to attach or detach styles.
+   */
+  protected constructListener(controller: HostController): MediaQueryListListener {
+    let attached = false;
+    const styles = this.styles;
+
+    return function listener(this: { matches: boolean }) {
+      const { matches } = this;
+
+      if (matches && !attached) {
+        controller.addStyles(styles);
+        attached = matches;
+      } else if (!matches && attached) {
+        controller.removeStyles(styles);
+        attached = matches;
+      }
+    };
+  }
+
+  /**
+   * Unbinds the behavior from the element.
+   * @param controller - The host controller orchestrating this behavior.
+   * @internal
+   */
+  public removedCallback(controller: HostController<any>): void {
+    controller.removeStyles(this.styles);
+  }
+}
+
+/**
+ * This can be used to construct a behavior to apply a forced-colors only stylesheet.
+ * @public
+ */
+export const forcedColorsStylesheetBehavior = MatchMediaStyleSheetBehavior.with(window.matchMedia('(forced-colors)'));
+
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: dark only stylesheet.
+ * @public
+ */
+export const darkModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(
+  window.matchMedia('(prefers-color-scheme: dark)'),
+);
+
+/**
+ * This can be used to construct a behavior to apply a prefers color scheme: light only stylesheet.
+ * @public
+ */
+export const lightModeStylesheetBehavior = MatchMediaStyleSheetBehavior.with(
+  window.matchMedia('(prefers-color-scheme: light)'),
+);
diff --git a/packages/web-components/src/utils/display.ts b/packages/web-components/src/utils/display.ts
new file mode 100644
index 00000000000000..a015f23f8aea22
--- /dev/null
+++ b/packages/web-components/src/utils/display.ts
@@ -0,0 +1,44 @@
+/**
+ * Define all possible CSS display values.
+ * @public
+ */
+export type CSSDisplayPropertyValue =
+  | 'block'
+  | 'contents'
+  | 'flex'
+  | 'grid'
+  | 'inherit'
+  | 'initial'
+  | 'inline'
+  | 'inline-block'
+  | 'inline-flex'
+  | 'inline-grid'
+  | 'inline-table'
+  | 'list-item'
+  | 'none'
+  | 'run-in'
+  | 'table'
+  | 'table-caption'
+  | 'table-cell'
+  | 'table-column'
+  | 'table-column-group'
+  | 'table-footer-group'
+  | 'table-header-group'
+  | 'table-row'
+  | 'table-row-group';
+
+/**
+ * A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.
+ * @public
+ */
+export const hidden = `:host([hidden]){display:none}`;
+
+/**
+ * Applies a CSS display property.
+ * Also adds CSS rules to not display the element when the [hidden] attribute is applied to the element.
+ * @param display - The CSS display property value
+ * @public
+ */
+export function display(displayValue: CSSDisplayPropertyValue): string {
+  return `${hidden}:host{display:${displayValue}}`;
+}
diff --git a/packages/web-components/src/utils/index.ts b/packages/web-components/src/utils/index.ts
index dda8c5a4db5d8c..1c85c7ab89b4e9 100644
--- a/packages/web-components/src/utils/index.ts
+++ b/packages/web-components/src/utils/index.ts
@@ -2,3 +2,5 @@ export * from './direction.js';
 export * from './typings.js';
 export * from './template-helpers.js';
 export * from './whitespace-filter.js';
+export * from './display.js';
+export * from './behaviors/match-media-stylesheet-behavior.js';
diff --git a/packages/web-components/tensile.config.js b/packages/web-components/tensile.config.js
index f03881e2d7048a..22c3e0ea066c8f 100644
--- a/packages/web-components/tensile.config.js
+++ b/packages/web-components/tensile.config.js
@@ -8,8 +8,6 @@ const config = {
     '@tensile-perf/web-components': '/node_modules/@tensile-perf/web-components/lib/index.js',
     '@microsoft/fast-element': '/node_modules/@microsoft/fast-element/dist/fast-element.min.js',
     '@microsoft/fast-element/utilities.js': '/node_modules/@microsoft/fast-element/dist/esm/utilities.js',
-    '@microsoft/fast-foundation': '/node_modules/@microsoft/fast-foundation/dist/esm/index.js',
-    '@microsoft/fast-foundation/utilities.js': '/node_modules/@microsoft/fast-foundation/dist/esm/utilities/index.js',
     '@microsoft/fast-web-utilities': '/node_modules/@microsoft/fast-web-utilities/dist/index.js',
     '@fluentui/tokens': '/tensile-assets/benchmark-dependencies/tokens.js',
     '@fluentui/web-components': '/node_modules/@fluentui/web-components/dist/esm/index.js',
diff --git a/yarn.lock b/yarn.lock
index 06e1ffff5b27c3..aa167f706b3314 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1954,7 +1954,7 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/devtools/-/devtools-0.2.1.tgz#3e8023e09ede273a7aa426e7911f3dac630024c5"
   integrity sha512-8PHJLbD6VhBh+LJ1uty/Bz30qs02NXCE5u8WpOhSewlYXUWl03GNXknr9AS2yaAWJEQaY27x7eByJs44gODBcw==
 
-"@floating-ui/dom@^1.0.3", "@floating-ui/dom@^1.2.0":
+"@floating-ui/dom@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.0.tgz#a60212069cc58961c478037c30eba4b191c75316"
   integrity sha512-QXzg57o1cjLz3cGETzKXjI3kx1xyS49DW9l7kV2jw2c8Yftd434t2hllX0sVGn2Q8MtcW/4pNm8bfE1/4n6mng==
@@ -2684,17 +2684,6 @@
   resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.13.0.tgz#d390ff13697064a48dc6ad6bb332a5f5489f73f8"
   integrity sha512-iFhzKbbD0cFRo9cEzLS3Tdo9BYuatdxmCEKCpZs1Cro/93zNMpZ/Y9/Z7SknmW6fhDZbpBvtO8lLh9TFEcNVAQ==
 
-"@microsoft/fast-foundation@3.0.0-alpha.31":
-  version "3.0.0-alpha.31"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-3.0.0-alpha.31.tgz#096b143d3f513801899d3a1eac00b09913064c4c"
-  integrity sha512-266JfAlmiz1uGQ0cnGIPtahZZ3WVNS8+6vrjsHmEg46sJTzb+9WfhgFan40y+MzgvWzZGr1Y1mh6GVpwVmKFJA==
-  dependencies:
-    "@floating-ui/dom" "^1.0.3"
-    "@microsoft/fast-element" "2.0.0-beta.26"
-    "@microsoft/fast-web-utilities" "^6.0.0"
-    tabbable "^5.2.0"
-    tslib "^2.4.0"
-
 "@microsoft/fast-web-utilities@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-6.0.0.tgz#7678c2b2cd12aeef785f4e2288da93a4db9e38a6"
@@ -22792,10 +22781,10 @@ systeminformation@^5.3.3:
   resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-5.21.8.tgz#18395187e5983698619ed07ca8640ae48ec232b2"
   integrity sha512-Xf1KDMUTQHLOT9Z7MjpSpsbaICOHcm4OZ9c9qqpkCoXuxq5MoyDrgu5GIQYpoiralXNPrqxDz3ND8MdllpXeQA==
 
-tabbable@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.0.tgz#4fba60991d8bb89d06e5d9455c92b453acf88fb2"
-  integrity sha512-0uyt8wbP0P3T4rrsfYg/5Rg3cIJ8Shl1RJ54QMqYxm1TLdWqJD1u6+RQjr2Lor3wmfT7JRHkirIwy99ydBsyPg==
+tabbable@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
 table-layout@^1.0.2:
   version "1.0.2"