From 53a3ef7ff36b3cbb8d30541a08211275a9886968 Mon Sep 17 00:00:00 2001
From: Miroslav Stastny <miroslav.stastny@microsoft.com>
Date: Mon, 27 Feb 2023 13:28:09 +0100
Subject: [PATCH] chore: Enable Typescript strict mode (#26950)

* chore: Enable Typescript strict mode

* change file

* revert unnecessary change

* update api-report after rebase
---
 ...-b348c686-1571-481e-9410-634431e842c9.json |  7 +++
 packages/web-components/docs/api-report.md    | 47 ++++++++++++-------
 .../src/accordion-item/accordion-item.ts      |  4 +-
 packages/web-components/src/badge/badge.ts    |  4 +-
 .../counter-badge/counter-badge.template.ts   |  7 +--
 .../src/counter-badge/counter-badge.ts        |  8 ++--
 .../src/progress-bar/progress-bar.ts          |  6 +--
 .../web-components/src/spinner/spinner.ts     |  4 +-
 packages/web-components/src/text/text.ts      |  8 ++--
 .../web-components/src/theme/design-tokens.ts |  5 ++
 .../web-components/src/theme/set-theme.ts     |  4 +-
 tsconfig.base.wc.json                         |  2 +-
 12 files changed, 67 insertions(+), 39 deletions(-)
 create mode 100644 change/@fluentui-web-components-b348c686-1571-481e-9410-634431e842c9.json

diff --git a/change/@fluentui-web-components-b348c686-1571-481e-9410-634431e842c9.json b/change/@fluentui-web-components-b348c686-1571-481e-9410-634431e842c9.json
new file mode 100644
index 00000000000000..cdc6f2e7925bc6
--- /dev/null
+++ b/change/@fluentui-web-components-b348c686-1571-481e-9410-634431e842c9.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: Enable Typescript strict mode",
+  "packageName": "@fluentui/web-components",
+  "email": "miroslav.stastny@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index 2e81845851dce4..98b44517c142af 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -37,9 +37,9 @@ export class AccordionItem extends FASTAccordionItem {
     // @public
     block: boolean;
     // @public
-    expandIconPosition: AccordionItemExpandIconPosition;
+    expandIconPosition?: AccordionItemExpandIconPosition;
     // @public
-    size: AccordionItemSize;
+    size?: AccordionItemSize;
 }
 
 // Warning: (ae-incompatible-release-tags) The symbol "definition" is marked as @public, but its signature references "AccordionItem" which is marked as @internal
@@ -239,8 +239,8 @@ export const AvatarTemplate: ElementViewTemplate<Avatar>;
 export class Badge extends FASTElement {
     appearance: BadgeAppearance;
     color: BadgeColor;
-    shape: BadgeShape;
-    size: BadgeSize;
+    shape?: BadgeShape;
+    size?: BadgeSize;
 }
 
 // @internal
@@ -648,9 +648,15 @@ export const colorNeutralShadowKeyLighter: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorNeutralStencil1: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorNeutralStencil1Alpha: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorNeutralStencil2: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorNeutralStencil2Alpha: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorNeutralStroke1: CSSDesignToken<string>;
 
@@ -891,6 +897,9 @@ export const colorPaletteGreenForeground2: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorPaletteGreenForeground3: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorPaletteGreenForegroundInverted: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorPaletteLavenderBackground2: CSSDesignToken<string>;
 
@@ -1080,6 +1089,9 @@ export const colorPaletteRedForeground2: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorPaletteRedForeground3: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorPaletteRedForegroundInverted: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorPaletteRoyalBlueBackground2: CSSDesignToken<string>;
 
@@ -1143,6 +1155,9 @@ export const colorPaletteYellowForeground2: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorPaletteYellowForeground3: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorPaletteYellowForegroundInverted: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorScrollbarOverlay: CSSDesignToken<string>;
 
@@ -1210,8 +1225,8 @@ export const colorTransparentStrokeInteractive: CSSDesignToken<string>;
 //
 // @public
 export class CounterBadge extends FASTElement {
-    appearance: CounterBadgeAppearance;
-    color: CounterBadgeColor;
+    appearance?: CounterBadgeAppearance;
+    color?: CounterBadgeColor;
     count: number;
     // (undocumented)
     protected countChanged(): void;
@@ -1221,9 +1236,9 @@ export class CounterBadge extends FASTElement {
     protected overflowCountChanged(): void;
     // @internal
     setCount(): string | void;
-    shape: CounterBadgeShape;
+    shape?: CounterBadgeShape;
     showZero: boolean;
-    size: CounterBadgeSize;
+    size?: CounterBadgeSize;
 }
 
 // @internal
@@ -1506,8 +1521,8 @@ export const lineHeightHero900: CSSDesignToken<string>;
 
 // @public
 class ProgressBar_2 extends FASTProgress {
-    shape: ProgressBarShape;
-    thickness: ProgressBarThickness;
+    shape?: ProgressBarShape;
+    thickness?: ProgressBarThickness;
     validationState: ProgressBarValidationState | null;
 }
 export { ProgressBar_2 as ProgressBar }
@@ -1656,8 +1671,8 @@ export const spacingVerticalXXXL: CSSDesignToken<string>;
 
 // @public
 export class Spinner extends FASTProgressRing {
-    appearance: SpinnerAppearance;
-    size: SpinnerSize;
+    appearance?: SpinnerAppearance;
+    size?: SpinnerSize;
 }
 
 // @public
@@ -1727,16 +1742,16 @@ export const switchTemplate: ElementViewTemplate<Switch>;
 
 // @public
 class Text_2 extends FASTElement {
-    align: TextAlign;
+    align?: TextAlign;
     block: boolean;
-    font: TextFont;
+    font?: TextFont;
     italic: boolean;
     nowrap: boolean;
-    size: TextSize;
+    size?: TextSize;
     strikethrough: boolean;
     truncate: boolean;
     underline: boolean;
-    weight: TextWeight;
+    weight?: TextWeight;
 }
 export { Text_2 as Text }
 
diff --git a/packages/web-components/src/accordion-item/accordion-item.ts b/packages/web-components/src/accordion-item/accordion-item.ts
index 0e3411cc40ae99..95c25a1435f417 100644
--- a/packages/web-components/src/accordion-item/accordion-item.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.ts
@@ -15,7 +15,7 @@ export class AccordionItem extends FASTAccordionItem {
    * HTML Attribute: size
    */
   @attr
-  public size: AccordionItemSize;
+  public size?: AccordionItemSize;
 
   /**
    * Sets the width of the focus state.
@@ -36,5 +36,5 @@ export class AccordionItem extends FASTAccordionItem {
    * HTML Attribute: expandIconPosition
    */
   @attr({ attribute: 'expand-icon-position' })
-  public expandIconPosition: AccordionItemExpandIconPosition;
+  public expandIconPosition?: AccordionItemExpandIconPosition;
 }
diff --git a/packages/web-components/src/badge/badge.ts b/packages/web-components/src/badge/badge.ts
index 25481e08d57a56..ab0366a84d021c 100644
--- a/packages/web-components/src/badge/badge.ts
+++ b/packages/web-components/src/badge/badge.ts
@@ -34,7 +34,7 @@ export class Badge extends FASTElement {
    * HTML Attribute: shape
    */
   @attr
-  public shape: BadgeShape;
+  public shape?: BadgeShape;
 
   /**
    * The size the badge should have.
@@ -44,7 +44,7 @@ export class Badge extends FASTElement {
    * HTML Attribute: size
    */
   @attr
-  public size: BadgeSize;
+  public size?: BadgeSize;
 }
 
 /**
diff --git a/packages/web-components/src/counter-badge/counter-badge.template.ts b/packages/web-components/src/counter-badge/counter-badge.template.ts
index f0049a3abc5280..338fab4220c0b2 100644
--- a/packages/web-components/src/counter-badge/counter-badge.template.ts
+++ b/packages/web-components/src/counter-badge/counter-badge.template.ts
@@ -1,10 +1,11 @@
 import { ElementViewTemplate, html } from '@microsoft/fast-element';
 import { badgeTemplate } from '../badge/badge.template.js';
+import { Badge } from '../badge/badge.js';
 import { CounterBadge } from './counter-badge.js';
 import { CounterBadgeOptions } from './counter-badge.options.js';
 
-function composeTemplate<T extends CounterBadge>(options: CounterBadgeOptions = {}): ElementViewTemplate<T> {
-  return badgeTemplate({
+function composeTemplate<T extends CounterBadge & Badge>(options: CounterBadgeOptions = {}): ElementViewTemplate<T> {
+  return badgeTemplate<T>({
     defaultContent: html<T>`${x => x.setCount()}`,
   });
 }
@@ -13,4 +14,4 @@ function composeTemplate<T extends CounterBadge>(options: CounterBadgeOptions =
  * The template for the Counter Badge component.
  * @public
  */
-export const template: ElementViewTemplate<CounterBadge> = composeTemplate<CounterBadge>();
+export const template: ElementViewTemplate<CounterBadge> = composeTemplate<CounterBadge & Badge>();
diff --git a/packages/web-components/src/counter-badge/counter-badge.ts b/packages/web-components/src/counter-badge/counter-badge.ts
index 38ca98713df4be..0794b2f9d853db 100644
--- a/packages/web-components/src/counter-badge/counter-badge.ts
+++ b/packages/web-components/src/counter-badge/counter-badge.ts
@@ -20,7 +20,7 @@ export class CounterBadge extends FASTElement {
    * HTML Attribute: appearance
    */
   @attr
-  public appearance: CounterBadgeAppearance;
+  public appearance?: CounterBadgeAppearance;
 
   /**
    * The color the badge should have.
@@ -30,7 +30,7 @@ export class CounterBadge extends FASTElement {
    * HTML Attribute: color
    */
   @attr
-  public color: CounterBadgeColor;
+  public color?: CounterBadgeColor;
   /**
    * The shape the badge should have.
    *
@@ -39,7 +39,7 @@ export class CounterBadge extends FASTElement {
    * HTML Attribute: shape
    */
   @attr
-  public shape: CounterBadgeShape;
+  public shape?: CounterBadgeShape;
 
   /**
    * The size the badge should have.
@@ -49,7 +49,7 @@ export class CounterBadge extends FASTElement {
    * HTML Attribute: size
    */
   @attr
-  public size: CounterBadgeSize;
+  public size?: CounterBadgeSize;
 
   /**
    * The count the badge should have.
diff --git a/packages/web-components/src/progress-bar/progress-bar.ts b/packages/web-components/src/progress-bar/progress-bar.ts
index aff1a3e153638a..7fdd92ee869d2a 100644
--- a/packages/web-components/src/progress-bar/progress-bar.ts
+++ b/packages/web-components/src/progress-bar/progress-bar.ts
@@ -15,7 +15,7 @@ export class ProgressBar extends FASTProgress {
    * HTML Attribute: thickness
    */
   @attr
-  public thickness: ProgressBarThickness;
+  public thickness?: ProgressBarThickness;
 
   /**
    * The shape of the progress bar
@@ -24,7 +24,7 @@ export class ProgressBar extends FASTProgress {
    * HTML Attribute: shape
    */
   @attr
-  public shape: ProgressBarShape;
+  public shape?: ProgressBarShape;
 
   /**
    * The validation state of the progress bar
@@ -33,5 +33,5 @@ export class ProgressBar extends FASTProgress {
    * HTML Attribute: validation-state
    */
   @attr({ attribute: 'validation-state' })
-  public validationState: ProgressBarValidationState | null;
+  public validationState: ProgressBarValidationState | null = null;
 }
diff --git a/packages/web-components/src/spinner/spinner.ts b/packages/web-components/src/spinner/spinner.ts
index 75a70af5f8949b..e1b1b4c925b9fa 100644
--- a/packages/web-components/src/spinner/spinner.ts
+++ b/packages/web-components/src/spinner/spinner.ts
@@ -16,7 +16,7 @@ export class Spinner extends FASTProgressRing {
    * HTML Attribute: size
    */
   @attr
-  public size: SpinnerSize;
+  public size?: SpinnerSize;
 
   /**
    * The appearance of the spinner
@@ -26,5 +26,5 @@ export class Spinner extends FASTProgressRing {
    * HTML Attribute: appearance
    */
   @attr
-  public appearance: SpinnerAppearance;
+  public appearance?: SpinnerAppearance;
 }
diff --git a/packages/web-components/src/text/text.ts b/packages/web-components/src/text/text.ts
index a666fb09508220..c0cd166a45557d 100644
--- a/packages/web-components/src/text/text.ts
+++ b/packages/web-components/src/text/text.ts
@@ -77,7 +77,7 @@ export class Text extends FASTElement {
    *
    */
   @attr
-  size: TextSize;
+  size?: TextSize;
 
   /**
    * THe Text font
@@ -87,7 +87,7 @@ export class Text extends FASTElement {
    * HTML Attribute: font
    */
   @attr
-  font: TextFont;
+  font?: TextFont;
 
   /**
    * THe Text weight
@@ -97,7 +97,7 @@ export class Text extends FASTElement {
    * HTML Attribute: weight
    */
   @attr
-  weight: TextWeight;
+  weight?: TextWeight;
 
   /**
    * THe Text align
@@ -107,5 +107,5 @@ export class Text extends FASTElement {
    * HTML Attribute: align
    */
   @attr
-  align: TextAlign;
+  align?: TextAlign;
 }
diff --git a/packages/web-components/src/theme/design-tokens.ts b/packages/web-components/src/theme/design-tokens.ts
index aaed69106d57f3..98e4c5fafd305e 100644
--- a/packages/web-components/src/theme/design-tokens.ts
+++ b/packages/web-components/src/theme/design-tokens.ts
@@ -172,6 +172,8 @@ export const colorNeutralBackgroundDisabled = create<string>('colorNeutralBackgr
 export const colorNeutralBackgroundInvertedDisabled = create<string>('colorNeutralBackgroundInvertedDisabled');
 export const colorNeutralStencil1 = create<string>('colorNeutralStencil1');
 export const colorNeutralStencil2 = create<string>('colorNeutralStencil2');
+export const colorNeutralStencil1Alpha = create<string>('colorNeutralStencil1Alpha');
+export const colorNeutralStencil2Alpha = create<string>('colorNeutralStencil2Alpha');
 export const colorBackgroundOverlay = create<string>('colorBackgroundOverlay');
 export const colorScrollbarOverlay = create<string>('colorScrollbarOverlay');
 export const colorBrandBackground = create<string>('colorBrandBackground');
@@ -369,6 +371,9 @@ export const colorPalettePlatinumBorderActive = create<string>('colorPalettePlat
 export const colorPaletteAnchorBackground2 = create<string>('colorPaletteAnchorBackground2');
 export const colorPaletteAnchorForeground2 = create<string>('colorPaletteAnchorForeground2');
 export const colorPaletteAnchorBorderActive = create<string>('colorPaletteAnchorBorderActive');
+export const colorPaletteRedForegroundInverted = create<string>('colorPaletteRedForegroundInverted');
+export const colorPaletteGreenForegroundInverted = create<string>('colorPaletteGreenForegroundInverted');
+export const colorPaletteYellowForegroundInverted = create<string>('colorPaletteYellowForegroundInverted');
 export const shadow2 = create<string>('shadow2');
 export const shadow4 = create<string>('shadow4');
 export const shadow8 = create<string>('shadow8');
diff --git a/packages/web-components/src/theme/set-theme.ts b/packages/web-components/src/theme/set-theme.ts
index ea0aa8cd110656..06529c40de2162 100644
--- a/packages/web-components/src/theme/set-theme.ts
+++ b/packages/web-components/src/theme/set-theme.ts
@@ -1,7 +1,7 @@
 import type { Theme } from '@fluentui/tokens';
 import * as tokens from './design-tokens.js';
 
-const tokenNames = Object.keys(tokens);
+const tokenNames = Object.keys(tokens) as (keyof Theme)[];
 
 /**
  * Sets the theme tokens on defaultNode.
@@ -9,6 +9,6 @@ const tokenNames = Object.keys(tokens);
  */
 export const setTheme = (theme: Theme) => {
   for (const t of tokenNames) {
-    tokens[t].withDefault(theme[t]);
+    tokens[t].withDefault(theme[t] as string);
   }
 };
diff --git a/tsconfig.base.wc.json b/tsconfig.base.wc.json
index e209b3fa7f7f6a..90ce34646525c4 100644
--- a/tsconfig.base.wc.json
+++ b/tsconfig.base.wc.json
@@ -5,7 +5,7 @@
     "moduleResolution": "Node16",
     "esModuleInterop": true,
     "sourceMap": true,
-    "strictNullChecks": true,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true,
     "pretty": true,