diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index d481ee82423b9..c77082ac1b8be 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -121,6 +121,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build
apps/ts-minbar-test-react-components @microsoft/fluentui-react-build
apps/vr-tests @microsoft/fluentui-react
apps/vr-tests-react-components @microsoft/fluentui-react
+apps/vr-tests-web-components @microsoft/fui-wc
apps/ssr-tests @microsoft/fluentui-react
apps/pr-deploy-site @microsoft/fluentui-react-build
apps/public-docsite-v9 @microsoft/cxe-red @microsoft/fluentui-react-build
diff --git a/.github/workflows/azure-static-web-apps-deploy.yml b/.github/workflows/azure-static-web-apps-deploy.yml
new file mode 100644
index 0000000000000..1e049feb7b0b2
--- /dev/null
+++ b/.github/workflows/azure-static-web-apps-deploy.yml
@@ -0,0 +1,30 @@
+name: Azure Static Web Apps web components
+
+on:
+ push:
+ branches:
+ - master
+ paths:
+ - packages/web-components/**
+ workflow_dispatch:
+
+permissions:
+ contents: read
+
+jobs:
+ build_and_deploy:
+ runs-on: ubuntu-latest
+ name: Build and Deploy Job
+ steps:
+ - uses: actions/checkout@v2
+
+ - name: Build and Deploy Job
+ id: builddeploy
+ uses: Azure/static-web-apps-deploy@v1
+ with:
+ azure_static_web_apps_api_token: ${{ secrets.WEB_COMPONENTS_AZURE_STATIC_WEB_APPS_API_TOKEN }}
+ repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
+ action: 'upload'
+ app_build_command: 'yarn workspace @fluentui/web-components build-storybook'
+ output_location: 'packages/web-components/dist/storybook' # Built app content directory, relative to app_location - optional
+ skip_api_build: true
diff --git a/.gitignore b/.gitignore
index 37ca26594019f..e21a9250a9997 100644
--- a/.gitignore
+++ b/.gitignore
@@ -155,6 +155,9 @@ rush.json
# tsdoc
tsdoc-metadata.json
+# benchmarking
+.tensile/
+
# tools cache
gulp-cache
.cache
diff --git a/.prettierignore b/.prettierignore
index 095b5614af383..419dcb381abc6 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -35,9 +35,6 @@ packages/fluentui/docs/src/behaviorMenu.json
packages/fluentui/docs/src/exampleMenus
packages/fluentui/docs/src/exampleSources
packages/fluentui/ability-attributes/src/schema.ts
-packages/web-components/src/**/*.styles.ts
-packages/web-components/**/*.spec.ts
-packages/web-components/src/default-palette.ts
# template files which actually follow a different language's formatting
*.hbs
diff --git a/apps/vr-tests-web-components/.eslintrc.json b/apps/vr-tests-web-components/.eslintrc.json
new file mode 100644
index 0000000000000..006c4cb41f035
--- /dev/null
+++ b/apps/vr-tests-web-components/.eslintrc.json
@@ -0,0 +1,14 @@
+{
+ "root": true,
+ "parser": "@typescript-eslint/parser",
+ "plugins": ["@typescript-eslint", "import"],
+ "extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/eslint-recommended",
+ "plugin:@typescript-eslint/recommended",
+ "prettier"
+ ],
+ "rules": {
+ "@typescript-eslint/explicit-module-boundary-types": "off"
+ }
+}
diff --git a/apps/vr-tests-web-components/.storybook/main.cjs b/apps/vr-tests-web-components/.storybook/main.cjs
new file mode 100644
index 0000000000000..87666047a40aa
--- /dev/null
+++ b/apps/vr-tests-web-components/.storybook/main.cjs
@@ -0,0 +1,90 @@
+const path = require('path');
+const CircularDependencyPlugin = require('circular-dependency-plugin');
+const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
+
+const tsBin = require.resolve('typescript');
+const tsConfigPath = path.resolve(__dirname, '../../../tsconfig.base.wc.json');
+
+const tsPaths = new TsconfigPathsPlugin({
+ configFile: tsConfigPath,
+});
+
+// TODO - these types are copied from root ./storybook/main.js as if we would like to use those as is, it will force us to add our custom storybook plugins as devDeps to WC
+// - refactor this to be shared
+
+/** @typedef {import('@storybook/core-common').StorybookConfig} StorybookBaseConfig */
+
+module.exports = /** @type {StorybookBaseConfig} */ ({
+ addons: [
+ {
+ name: '@storybook/addon-docs',
+ },
+ {
+ name: '@storybook/addon-essentials',
+ options: {
+ backgrounds: false,
+ viewport: false,
+ toolbars: false,
+ actions: false,
+ },
+ },
+ ],
+
+ stories: ['../src/**/*.stories.tsx'],
+ core: {
+ builder: 'webpack5',
+ disableTelemetry: true,
+ },
+ babel: {},
+ typescript: {
+ // disable react-docgen-typescript (totally not needed here, slows things down a lot)
+ reactDocgen: false,
+ },
+ webpackFinal: async config => {
+ config.resolve = config.resolve ?? {};
+ config.resolve.extensions = config.resolve.extensions ?? [];
+ config.resolve.plugins = config.resolve.plugins ?? [];
+ config.module = config.module ?? {};
+ config.plugins = config.plugins ?? [];
+
+ config.resolve.extensionAlias = {
+ '.js': ['.js', '.ts', '.tsx'],
+ '.mjs': ['.mjs', '.mts'],
+ };
+ config.resolve.extensions.push(...['.ts', '.js']);
+ config.resolve.plugins.push(tsPaths);
+ config.module.rules = config.module.rules ?? [];
+ config.module.rules.push(
+ {
+ test: /\.([cm]?ts|tsx)$/,
+ loader: 'ts-loader',
+ sideEffects: true,
+ options: {
+ transpileOnly: true,
+ compiler: tsBin,
+ },
+ },
+ // Following config is needed to be able to resolve @storybook packages imported in specified files that don't ship valid ESM
+ // It also enables importing other packages without proper ESM extensions, but that should be avoided !
+ // @see https://webpack.js.org/configuration/module/#resolvefullyspecified
+ {
+ test: /\.m?js/,
+ resolve: { fullySpecified: false },
+ },
+ );
+
+ config.plugins.push(
+ new CircularDependencyPlugin({
+ exclude: /node_modules/,
+ failOnError: process.env.NODE_ENV === 'production',
+ }),
+ );
+
+ // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
+ if (process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) {
+ config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
+ }
+
+ return config;
+ },
+});
diff --git a/apps/vr-tests-web-components/.storybook/manager.mjs b/apps/vr-tests-web-components/.storybook/manager.mjs
new file mode 100644
index 0000000000000..87192fa503710
--- /dev/null
+++ b/apps/vr-tests-web-components/.storybook/manager.mjs
@@ -0,0 +1,11 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+ previewTabs: {
+ canvas: { hidden: true },
+ },
+ enableShortcuts: false,
+ sidebar: {
+ showRoots: true,
+ },
+});
diff --git a/apps/vr-tests-web-components/.storybook/preview.mjs b/apps/vr-tests-web-components/.storybook/preview.mjs
new file mode 100644
index 0000000000000..9184ac05fff1e
--- /dev/null
+++ b/apps/vr-tests-web-components/.storybook/preview.mjs
@@ -0,0 +1,17 @@
+import { WCThemeDecorator } from '../src/utilities/WCThemeDecorator';
+
+export const parameters = {
+ layout: 'fullscreen',
+ controls: { expanded: true },
+ viewMode: 'docs',
+ previewTabs: {
+ canvas: { hidden: true },
+ },
+ options: {
+ storySort: {
+ method: 'alphabetical',
+ },
+ },
+};
+
+export const decorators = [WCThemeDecorator];
diff --git a/apps/vr-tests-web-components/package.json b/apps/vr-tests-web-components/package.json
new file mode 100644
index 0000000000000..bc3202d612510
--- /dev/null
+++ b/apps/vr-tests-web-components/package.json
@@ -0,0 +1,28 @@
+{
+ "name": "@fluentui/vr-tests-web-components",
+ "version": "0.0.1",
+ "private": true,
+ "description": "Visual regression tests for @fluentui/web-components",
+ "type": "module",
+ "scripts": {
+ "build": "build-storybook -o dist/storybook",
+ "format": "prettier . -w --ignore-path ../../.prettierignore",
+ "lint": "eslint src --ext .ts,.tsx",
+ "start": "start-storybook",
+ "type-check": "echo 'TODO'",
+ "vr:build": "yarn build",
+ "vr:test": "storywright --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true"
+ },
+ "devDependencies": {
+ "@fluentui/eslint-plugin": "*",
+ "@fluentui/scripts-tasks": "*",
+ "html-react-parser": "4.0.0",
+ "typescript": "4.7.4"
+ },
+ "dependencies": {
+ "@fluentui/react-button": "*",
+ "@fluentui/react-storybook-addon": "*",
+ "@fluentui/web-components": ">=3.0.0-alpha",
+ "tslib": "^2.1.0"
+ }
+}
diff --git a/apps/vr-tests-web-components/project.json b/apps/vr-tests-web-components/project.json
new file mode 100644
index 0000000000000..650583456867d
--- /dev/null
+++ b/apps/vr-tests-web-components/project.json
@@ -0,0 +1,6 @@
+{
+ "name": "@fluentui/vr-tests-web-components",
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "implicitDependencies": []
+}
diff --git a/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx b/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx
new file mode 100644
index 0000000000000..b5fb7e3154268
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { accordionDefinition, accordionItemDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+accordionDefinition.define(FluentDesignSystem.registry);
+accordionItemDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'Accordion',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+const add20Filled = ``;
+const subtract20Filled = ``;
+
+export const Size = () =>
+ parse(`
+
+
+ Small
+ Small Panel
+
+
+ Medium
+ Medium Panel
+
+
+ Large
+ Large Panel
+
+
+ Extra Large
+ Extra Large Panel
+
+
+ `);
+
+export const SizeRTL = getStoryVariant(Size, RTL);
+export const SizeDarkMode = getStoryVariant(Size, DARK_MODE);
+
+export const ExpandIconPositionEnd = () =>
+ parse(`
+
+
+ Opened
+ Visible Panel
+
+
+ Closed
+ Hidden Panel
+
+
+`);
+
+export const ExpandIconPositionEndRTL = getStoryVariant(ExpandIconPositionEnd, RTL);
+export const ExpandIconPositionEndDarkMode = getStoryVariant(ExpandIconPositionEnd, DARK_MODE);
+
+export const AccordionWithCustomIcons = () =>
+ parse(`
+
+
+ ${add20Filled}
+ ${subtract20Filled}
+ Accordion Header 1
+ Accordion Panel 1
+
+
+ ${add20Filled}
+ ${subtract20Filled}
+ Accordion Header 2
+ Accordion Panel 1
+
+
+ ${add20Filled}
+ ${subtract20Filled}
+ Accordion Header 3
+ Accordion Panel 1
+
+
+`);
+
+export const AccordionWithCustomIconsRTL = getStoryVariant(AccordionWithCustomIcons, RTL);
+export const AccordionWithCustomIconsDarkMode = getStoryVariant(AccordionWithCustomIcons, DARK_MODE);
+
+export const Disabled = () =>
+ parse(`
+
+
+ Disabled Item Opened
+ Disabled Item Opened Panel
+
+
+ Disabled Item Closed
+ Disabled Item Closed Panel
+
+
+`);
+
+export const DisabledRTL = getStoryVariant(Disabled, RTL);
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
diff --git a/apps/vr-tests-web-components/src/stories/avatar/avatar.stories.tsx b/apps/vr-tests-web-components/src/stories/avatar/avatar.stories.tsx
new file mode 100644
index 0000000000000..7b3498de172c4
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/avatar/avatar.stories.tsx
@@ -0,0 +1,177 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { AvatarDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+AvatarDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'Avatar',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
+ parse(`
+
+ `);
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const Image = () =>
+ parse(`
+
+`);
+
+export const Icon = () =>
+ parse(`
+
+`);
+
+export const IconDarkMode = getStoryVariant(Icon, DARK_MODE);
+
+export const Color = () =>
+ parse(`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`);
+
+export const ColorRTL = getStoryVariant(Color, RTL);
+export const ColorDarkMode = getStoryVariant(Color, DARK_MODE);
+
+export const Colorful = () =>
+ parse(`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`);
+
+export const ColorfulRTL = getStoryVariant(Colorful, RTL);
+export const ColorfulDarkMode = getStoryVariant(Colorful, DARK_MODE);
+
+export const Shape = () =>
+ parse(`
+
+
+`);
+
+export const Active = () =>
+ parse(`
+
+`);
+
+export const ActiveDarkMode = getStoryVariant(Active, DARK_MODE);
+
+export const ActiveAppearance = () =>
+ parse(`
+
+ R
+ S
+ RS
+
+`);
+
+export const ActiveAppearanceDarkMode = getStoryVariant(ActiveAppearance, DARK_MODE);
+
+export const CustomInitials = () =>
+ parse(`
+
+`);
+
+export const CustomInitialsRTL = getStoryVariant(CustomInitials, RTL);
+
+export const Size = () =>
+ parse(`
+
+ 16
+ 20
+ 24
+ 28
+ 32
+ 36
+ 40
+ 48
+ 56
+ 64
+ 72
+ 96
+ 120
+ 128
+
+`);
diff --git a/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx b/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx
new file mode 100644
index 0000000000000..0e8e36331e7e5
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { BadgeDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator.js';
+
+BadgeDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'Badge',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
+ parse(`
+
+ `);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const Appearance = () =>
+ parse(`
+ filled
+ ghost
+ outline
+ tint
+`);
+
+export const AppearanceDarkMode = getStoryVariant(Appearance, DARK_MODE);
+
+export const Color = () =>
+ parse(`
+ brand
+ danger
+ important
+ informative
+ severe
+ subtle
+ success
+ warning
+`);
+
+export const ColorDarkMode = getStoryVariant(Color, DARK_MODE);
+
+export const Shape = () =>
+ parse(`
+
+
+
+`);
+
+export const ShapeDarkMode = getStoryVariant(Shape, DARK_MODE);
+
+export const Size = () =>
+ parse(`
+
+
+
+
+
+
+`);
+
+export const SizeDarkMode = getStoryVariant(Size, DARK_MODE);
diff --git a/apps/vr-tests-web-components/src/stories/button/button.stories.tsx b/apps/vr-tests-web-components/src/stories/button/button.stories.tsx
new file mode 100644
index 0000000000000..bce8193a5d94d
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/button/button.stories.tsx
@@ -0,0 +1,147 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { ButtonDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+ButtonDefinition.define(FluentDesignSystem.registry);
+
+const buttonId = 'button-id';
+
+const steps = new Steps()
+ .snapshot('default', { cropTo: '.testWrapper' })
+ .hover(`#${buttonId}`)
+ .snapshot('hover', { cropTo: '.testWrapper' })
+ .mouseDown(`#${buttonId}`)
+ .snapshot('pressed', { cropTo: '.testWrapper' })
+ .end();
+
+export default {
+ title: 'Button',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () => parse(`Default`);
+
+export const Primary = () =>
+ parse(`Primary`);
+export const PrimaryDarkMode = getStoryVariant(Primary, DARK_MODE);
+export const PrimaryDisabled = () =>
+ parse(`Primary`);
+export const PrimaryDisabledDarkMode = getStoryVariant(PrimaryDisabled, DARK_MODE);
+export const PrimaryDisabledFocusable = () =>
+ parse(
+ `Primary`,
+ );
+export const PrimaryDisabledFocusableDarkMode = getStoryVariant(PrimaryDisabledFocusable, DARK_MODE);
+
+export const Outline = () =>
+ parse(`Outline`);
+export const OutlineDarkMode = getStoryVariant(Outline, DARK_MODE);
+export const OutlineDisabled = () =>
+ parse(`Outline`);
+export const OutlineDisabledDarkMode = getStoryVariant(OutlineDisabled, DARK_MODE);
+export const OutlineDisabledFocusable = () =>
+ parse(
+ `Outline`,
+ );
+export const OutlineDisabledFocusableDarkMode = getStoryVariant(OutlineDisabledFocusable, DARK_MODE);
+
+export const Subtle = () =>
+ parse(`Subtle`);
+export const SubtleDarkMode = getStoryVariant(Subtle, DARK_MODE);
+export const SubtleDisabled = () =>
+ parse(`Subtle`);
+export const SubtleDisabledDarkMode = getStoryVariant(SubtleDisabled, DARK_MODE);
+export const SubtleDisabledFocusable = () =>
+ parse(
+ `Subtle`,
+ );
+export const SubtleDisabledFocusableDarkMode = getStoryVariant(SubtleDisabledFocusable, DARK_MODE);
+
+export const Transparent = () =>
+ parse(`Transparent`);
+export const TransparentDarkMode = getStoryVariant(Transparent, DARK_MODE);
+export const TransparentDisabled = () =>
+ parse(
+ `Transparent`,
+ );
+export const TransparentDisabledDarkMode = getStoryVariant(TransparentDisabled, DARK_MODE);
+export const TransparentDisabledFocusable = () =>
+ parse(
+ `Transparent`,
+ );
+export const TransparentDisabledFocusableDarkMode = getStoryVariant(TransparentDisabledFocusable, DARK_MODE);
+
+export const Rounded = () => parse(`Rounded`);
+export const Circular = () => parse(`Circular`);
+export const Square = () => parse(`Square`);
+
+const icon: (slot?: 'start' | undefined) => string = slot => ``;
+
+export const Small = () => parse(`Small`);
+export const SmallWithIcon = () =>
+ parse(`${icon('start')} Small with calendar icon`);
+export const SmallWithIconDarkMode = getStoryVariant(SmallWithIcon, DARK_MODE);
+export const SmallWithIconRTL = getStoryVariant(SmallWithIcon, RTL);
+
+export const SmallIconOnly = () =>
+ parse(`${icon()}`);
+export const SmallIconOnlyDarkMode = getStoryVariant(SmallIconOnly, DARK_MODE);
+
+export const Medium = () => parse(`Medium`);
+export const MediumWithIcon = () =>
+ parse(
+ `${icon('start')} Medium with calendar icon`,
+ );
+export const MediumWithIconDarkMode = getStoryVariant(MediumWithIcon, DARK_MODE);
+export const MediumWithIconRTL = getStoryVariant(MediumWithIcon, RTL);
+
+export const MediumIconOnly = () =>
+ parse(`${icon()}`);
+export const MediumIconOnlyDarkMode = getStoryVariant(MediumIconOnly, DARK_MODE);
+
+export const Large = () => parse(`Large`);
+export const LargeWithIcon = () =>
+ parse(`${icon('start')} Large with calendar icon`);
+export const LargeWithIconDarkMode = getStoryVariant(LargeWithIcon, DARK_MODE);
+export const LargeWithIconRTL = getStoryVariant(LargeWithIcon, RTL);
+
+export const LargeIconOnly = () =>
+ parse(`${icon()}`);
+export const LargeIconOnlyDarkMode = getStoryVariant(LargeIconOnly, DARK_MODE);
+
+export const WithLongText = () =>
+ parse(`
+
+ Long text wraps after it hits the max width of the component
+`);
+
+export const WithLongTextRTL = getStoryVariant(WithLongText, RTL);
diff --git a/apps/vr-tests-web-components/src/stories/checkbox/checkbox-indeterminate.stories.tsx b/apps/vr-tests-web-components/src/stories/checkbox/checkbox-indeterminate.stories.tsx
new file mode 100644
index 0000000000000..fa103fcc772d3
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/checkbox/checkbox-indeterminate.stories.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { CheckboxDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator.js';
+
+CheckboxDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'Checkbox',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+ checkbox.indeterminate = true)',
+ )
+ .snapshot('indeterminate', { cropTo: '.testWrapper' })
+ .end()}
+ >
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Indeterminate = () =>
+ parse(`
+ Indeterminate
+ `);
+
+export const IndeterminateDarkMode = getStoryVariant(Indeterminate, DARK_MODE);
+
+export const CircularIndeterminate = () =>
+ parse(`
+ CircularIndeterminate
+ `);
+
+export const CircularIndeterminateDarkMode = getStoryVariant(CircularIndeterminate, DARK_MODE);
diff --git a/apps/vr-tests-web-components/src/stories/checkbox/checkbox.stories.tsx b/apps/vr-tests-web-components/src/stories/checkbox/checkbox.stories.tsx
new file mode 100644
index 0000000000000..041cf50e9df7f
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/checkbox/checkbox.stories.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { CheckboxDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+CheckboxDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'Checkbox',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
+ parse(`
+ Default
+ `);
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const Checked = () =>
+ parse(`
+ Checked
+ `);
+export const CheckedDarkMode = getStoryVariant(Checked, DARK_MODE);
+
+export const Disabled = () =>
+ parse(`
+ Disabled
+ `);
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const DisabledChecked = () =>
+ parse(`
+ Disabled checked
+ `);
+export const DisabledCheckedDarkMode = getStoryVariant(DisabledChecked, DARK_MODE);
+
+export const Circular = () =>
+ parse(`
+ Circular
+ `);
+
+export const CircularRTL = getStoryVariant(Circular, RTL);
+export const CircularDarkMode = getStoryVariant(Circular, DARK_MODE);
+
+export const CircularChecked = () =>
+ parse(`
+ CircularChecked
+ `);
+export const CircularCheckedDarkMode = getStoryVariant(CircularChecked, DARK_MODE);
+
+export const CircularDisabled = () =>
+ parse(`
+ CircularDisabled
+ `);
+export const CircularDisabledDarkMode = getStoryVariant(CircularDisabled, DARK_MODE);
+
+export const CircularDisabledChecked = () =>
+ parse(`
+ CircularDisabled checked
+ `);
+export const CircularDisabledCheckedDarkMode = getStoryVariant(CircularDisabledChecked, DARK_MODE);
diff --git a/apps/vr-tests-web-components/src/stories/divider/divider.stories.tsx b/apps/vr-tests-web-components/src/stories/divider/divider.stories.tsx
new file mode 100644
index 0000000000000..d87100beefffd
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/divider/divider.stories.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { DividerDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+DividerDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'Divider',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
+ parse(`
+
+ `);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const AlignContentCenter = () =>
+ parse(`Center
`);
+export const AlignContentStart = () => parse(`Start
`);
+export const AlignContentStartRTL = getStoryVariant(AlignContentStart, RTL);
+export const AlignContentEnd = () => parse(`End
`);
+export const AlignContentEndRTL = getStoryVariant(AlignContentEnd, RTL);
+
+export const AppearanceStrong = () => parse(`Strong
`);
+export const AppearanceStrongDarkMode = getStoryVariant(AppearanceStrong, DARK_MODE);
+export const AppearanceBrand = () => parse(`Brand
`);
+export const AppearanceBrandDarkMode = getStoryVariant(AppearanceBrand, DARK_MODE);
+export const AppearanceSubtle = () => parse(`Subtle
`);
+export const AppearanceSubtleDarkMode = getStoryVariant(AppearanceSubtle, DARK_MODE);
+export const AppearanceDefault = () =>
+ parse(`Default
`);
+export const AppearanceDefaultDarkMode = getStoryVariant(AppearanceDefault, DARK_MODE);
+
+export const Inset = () => parse(`Inset
`);
+
+export const Vertical = () => parse(`vertical
`);
+
+export const WithSvg = () =>
+ parse(`
+
+
+
+`);
+
+export const WithSvgRtl = getStoryVariant(WithSvg, RTL);
+
+export const VerticalWithSvg = () =>
+ parse(`
+
+
+
+`);
diff --git a/apps/vr-tests-web-components/src/stories/label/label.stories.tsx b/apps/vr-tests-web-components/src/stories/label/label.stories.tsx
new file mode 100644
index 0000000000000..c648ee9683b2e
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/label/label.stories.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { LabelDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+LabelDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'Label',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () => parse(`Default`);
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const SizeSmall = () => parse(`Small`);
+export const SizeMedium = () => parse(`Medium`);
+export const SizeLarge = () => parse(`Large`);
+
+export const WeightRegular = () => parse(`Regular`);
+export const WeightSemibold = () => parse(`Semibold`);
+
+export const Required = () => parse(`Required`);
+export const RequiredDarkMode = getStoryVariant(Required, DARK_MODE);
+export const RequiredRTL = getStoryVariant(Required, RTL);
+
+export const Disabled = () => parse(`Disabled`);
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
diff --git a/apps/vr-tests-web-components/src/stories/menu-list/menu-list.stories.tsx b/apps/vr-tests-web-components/src/stories/menu-list/menu-list.stories.tsx
new file mode 100644
index 0000000000000..a7fee71efe250
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/menu-list/menu-list.stories.tsx
@@ -0,0 +1,194 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { MenuListDefinition, MenuItemDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+MenuListDefinition.define(FluentDesignSystem.registry);
+MenuItemDefinition.define(FluentDesignSystem.registry);
+
+const createDecorator =
+ (steps: unknown[], wrapperStyle: React.CSSProperties = { width: '320px' }) =>
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ };
+
+const defaultSteps = new Steps()
+ .snapshot('normal', { cropTo: '.testWrapper' })
+ .hover('[role="menuitem"]')
+ .snapshot('hover menuitem', { cropTo: '.testWrapper' })
+ .end();
+
+const checkboxSteps = new Steps()
+ .snapshot('normal', { cropTo: '.testWrapper' })
+ .click('[role="menuitemcheckbox"]')
+ .snapshot('1st selected', { cropTo: '.testWrapper' })
+ .click('[role="menuitemcheckbox"]:nth-of-type(2)')
+ .snapshot('2nd selected', { cropTo: '.testWrapper' })
+ .end();
+
+const radioSteps = new Steps()
+ .snapshot('normal', { cropTo: '.testWrapper' })
+ .click('[role="menuitemradio"]')
+ .snapshot('1st selected', { cropTo: '.testWrapper' })
+ .click('[role="menuitemradio"]:nth-of-type(2)')
+ .snapshot('2nd selected', { cropTo: '.testWrapper' })
+ .end();
+
+const submenuSteps = new Steps()
+ .snapshot('normal', { cropTo: '.testWrapper' })
+ .click('[aria-haspopup="menu"]')
+ .snapshot('1st selected', { cropTo: '.testWrapper' })
+ .click('[aria-haspopup="menu"]:nth-of-type(2)')
+ .snapshot('2nd selected', { cropTo: '.testWrapper' })
+ .end();
+
+export default {
+ title: 'MenuList',
+};
+
+const Cut20Filled = ``;
+
+const Edit20Filled = ``;
+
+export const Default = () =>
+ parse(`
+
+ Cut
+ Edit
+ Paste
+
+`);
+Default.decorators = [createDecorator(defaultSteps)];
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const Checkbox = () =>
+ parse(`
+
+ Item 1
+ Item 2
+ Item 3
+
+ `);
+Checkbox.decorators = [createDecorator(checkboxSteps)];
+export const CheckboxDarkMode = getStoryVariant(Checkbox, DARK_MODE);
+export const CheckboxRTL = getStoryVariant(Checkbox, RTL);
+
+export const Radio = () =>
+ parse(`
+
+ Item 1
+ Item 2
+ Item 3
+
+ `);
+Radio.decorators = [createDecorator(radioSteps)];
+export const RadioDarkMode = getStoryVariant(Radio, DARK_MODE);
+export const RadioRTL = getStoryVariant(Radio, RTL);
+
+export const WithIcons = () =>
+ parse(`
+
+ Item 1
+
+ Edit
+ ${Edit20Filled}
+
+
+ ${Cut20Filled}
+ Cut
+
+
+`);
+WithIcons.decorators = [createDecorator(defaultSteps)];
+
+export const CheckboxWithIcons = () =>
+ parse(`
+
+ Item 1
+
+ Edit
+ ${Edit20Filled}
+
+
+ ${Cut20Filled}
+ Cut
+
+
+`);
+CheckboxWithIcons.decorators = [createDecorator(checkboxSteps)];
+export const CheckboxWithIconsRTL = getStoryVariant(CheckboxWithIcons, RTL);
+
+export const RadioWithIcons = () =>
+ parse(`
+
+ Item 1
+
+ Edit
+ ${Edit20Filled}
+
+
+ ${Cut20Filled}
+ Cut
+
+
+`);
+RadioWithIcons.decorators = [createDecorator(radioSteps)];
+export const RadioWithIconsRTL = getStoryVariant(RadioWithIcons, RTL);
+
+export const WithSubmenu = () =>
+ parse(`
+
+
+ Item 1
+
+ Subitem 1.1
+ Subitem 1.2
+
+
+
+ Item 2
+
+ Subitem 2.1
+ Subitem 2.2
+
+
+ Item 3
+
+`);
+WithSubmenu.decorators = [createDecorator(submenuSteps, { width: '500px', padding: '20px 0' })];
+
+export const WithSubmenuDarkMode = getStoryVariant(WithSubmenu, DARK_MODE);
+export const WithSubmenuRLT = getStoryVariant(WithSubmenu, RTL);
diff --git a/apps/vr-tests-web-components/src/stories/progress-bar/progress-bar.stories.tsx b/apps/vr-tests-web-components/src/stories/progress-bar/progress-bar.stories.tsx
new file mode 100644
index 0000000000000..a56059deb2205
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/progress-bar/progress-bar.stories.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { ProgressBarDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+ProgressBarDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'ProgressBar',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
+ parse(
+ `3/10
`,
+ );
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const Value0 = () =>
+ parse(`0
`);
+export const Value25 = () =>
+ parse(`25
`);
+export const Value50 = () =>
+ parse(`50
`);
+export const Value75 = () =>
+ parse(`75
`);
+export const Value100 = () =>
+ parse(`100
`);
+
+export const ThicknessMedium = () =>
+ parse(``);
+export const ThicknessLarge = () =>
+ parse(``);
+
+export const ShapeRounded = () =>
+ parse(``);
+export const ShapeSquare = () =>
+ parse(``);
+
+export const ValidationStateSuccess = () =>
+ parse(``);
+export const ValidationStateSuccessDarkMode = getStoryVariant(ValidationStateSuccess, DARK_MODE);
+
+export const ValidationStateWarning = () =>
+ parse(``);
+export const ValidationStateWarningDarkMode = getStoryVariant(ValidationStateWarning, DARK_MODE);
+
+export const ValidationStateError = () =>
+ parse(``);
+export const ValidationStateErrorDarkMode = getStoryVariant(ValidationStateError, DARK_MODE);
diff --git a/apps/vr-tests-web-components/src/stories/radio-group/radio-group.stories.tsx b/apps/vr-tests-web-components/src/stories/radio-group/radio-group.stories.tsx
new file mode 100644
index 0000000000000..eb72023e28e5b
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/radio-group/radio-group.stories.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { RadioDefinition, RadioGroupDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+RadioDefinition.define(FluentDesignSystem.registry);
+RadioGroupDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'RadioGroup',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
+ parse(`
+
+ Pear
+ Banana
+ Orange
+`);
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const Vertical = () =>
+ parse(`
+
+ Pear
+ Banana
+ Orange
+`);
+
+export const VerticalRTL = getStoryVariant(Vertical, RTL);
+
+export const Horizontal = () =>
+ parse(`
+
+ Pear
+ Banana
+ Orange
+`);
+
+export const HorizontalStacked = () =>
+ parse(`
+
+ Pear
+ Banana
+ Orange
+`);
+
+export const HorizontalStackedRTL = getStoryVariant(HorizontalStacked, RTL);
+
+export const DefaultChecked = () =>
+ parse(`
+
+ Pear
+ Banana
+ Orange
+`);
+
+export const Disabled = () =>
+ parse(`
+
+ Pear
+ Banana
+ Orange
+`);
+
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const DisabledItem = () =>
+ parse(`
+
+ Pear
+ Banana
+ Orange
+`);
+
+export const DisabledItemDarkMode = getStoryVariant(DisabledItem, DARK_MODE);
diff --git a/apps/vr-tests-web-components/src/stories/radio/radio.stories.tsx b/apps/vr-tests-web-components/src/stories/radio/radio.stories.tsx
new file mode 100644
index 0000000000000..0ef3401bc2ec3
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/radio/radio.stories.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { RadioDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator.js';
+
+RadioDefinition.define(FluentDesignSystem.registry);
+export default {
+ title: 'Radio',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
+ parse(`
+ Pear
+`);
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const Checked = () =>
+ parse(`
+ Pear
+`);
+
+export const CheckedDarkMode = getStoryVariant(Checked, DARK_MODE);
+
+export const Disabled = () =>
+ parse(`
+ Pear
+`);
+
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const DisabledChecked = () =>
+ parse(`
+ Pear
+`);
+
+export const DisabledCheckedDarkMode = getStoryVariant(DisabledChecked, DARK_MODE);
diff --git a/apps/vr-tests-web-components/src/stories/slider/slider.stories.tsx b/apps/vr-tests-web-components/src/stories/slider/slider.stories.tsx
new file mode 100644
index 0000000000000..e48f82e7654f9
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/slider/slider.stories.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright, Keys } from 'storywright';
+import { SliderDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+SliderDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'Slider',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
+ parse(`
+
+`);
+
+export const DefaultRTL = getStoryVariant(Default, RTL);
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+
+export const Vertical = () =>
+ parse(`
+
+`);
+
+export const SizeSmall = () =>
+ parse(`
+
+`);
+
+export const SizeMedium = () =>
+ parse(`
+
+`);
+
+export const SliderSteps = () =>
+ parse(`
+
+`);
+
+export const SliderStepsVertical = () =>
+ parse(`
+
+`);
+
+export const Disabled = () =>
+ parse(`
+
+`);
+
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
diff --git a/apps/vr-tests-web-components/src/stories/switch/switch.stories.tsx b/apps/vr-tests-web-components/src/stories/switch/switch.stories.tsx
new file mode 100644
index 0000000000000..a3605ba4bcdab
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/switch/switch.stories.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { SwitchDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+SwitchDefinition.define(FluentDesignSystem.registry);
+
+const controlId = 'switch-id';
+
+export default {
+ title: 'Switch',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
+ parse(`
+ Default
+ `);
+
+export const DefaultDark = getStoryVariant(Default, DARK_MODE);
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const Checked = () =>
+ parse(`
+ Checked
+ `);
+
+export const CheckedDark = getStoryVariant(Checked, DARK_MODE);
+export const CheckedRTL = getStoryVariant(Checked, RTL);
+
+export const Disabled = () =>
+ parse(`
+ Disabled
+ `);
+
+export const DisabledDark = getStoryVariant(Disabled, DARK_MODE);
+export const DisabledRTL = getStoryVariant(Disabled, RTL);
+
+export const DisabledChecked = () =>
+ parse(`
+ Disabled checked
+ `);
+
+export const DisabledCheckedDark = getStoryVariant(DisabledChecked, DARK_MODE);
+
+export const LabelBefore = () =>
+ parse(`
+ Label before
+ `);
+
+export const LabelBeforeRTL = getStoryVariant(LabelBefore, RTL);
+
+export const LabelAbove = () =>
+ parse(`
+ Label above
+ `);
+
+export const LabelAboveRTL = getStoryVariant(LabelAbove, RTL);
+
+export const LabelAfter = () =>
+ parse(`
+ Label after
+ `);
+
+export const LabelAfterRTL = getStoryVariant(LabelAfter, RTL);
diff --git a/apps/vr-tests-web-components/src/stories/tabs/tabs-interactive.stories.tsx b/apps/vr-tests-web-components/src/stories/tabs/tabs-interactive.stories.tsx
new file mode 100644
index 0000000000000..782981a46422e
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/tabs/tabs-interactive.stories.tsx
@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { TabDefinition, TabsDefinition, TabPanelDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+TabDefinition.define(FluentDesignSystem.registry);
+TabsDefinition.define(FluentDesignSystem.registry);
+TabPanelDefinition.define(FluentDesignSystem.registry);
+
+const secondTabId = 'second-tab-id';
+
+const createDecorator =
+ (steps: unknown[], wrapperStyle: React.CSSProperties = { width: '380px' }) =>
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ };
+
+const horizontalSteps = new Steps()
+ .snapshot('normal', { cropTo: '.testWrapper' })
+ .hover(`#${secondTabId}`)
+ .snapshot('hover', { cropTo: '.testWrapper' })
+ .click(`#${secondTabId}`)
+ .snapshot('2nd tab click', { cropTo: '.testWrapper' })
+ .keys(`#${secondTabId}`, 'ArrowRight')
+ .snapshot('right arrow', { cropTo: '.testWrapper' })
+ .end();
+
+const verticalSteps = new Steps()
+ .snapshot('normal', { cropTo: '.testWrapper' })
+ .hover(`#${secondTabId}`)
+ .snapshot('hover', { cropTo: '.testWrapper' })
+ .click(`#${secondTabId}`)
+ .snapshot('2nd tab click', { cropTo: '.testWrapper' })
+ .keys(`#${secondTabId}`, 'ArrowDown')
+ .snapshot('down arrow', { cropTo: '.testWrapper' })
+ .end();
+
+const appearanceSteps = new Steps()
+ .snapshot('normal', { cropTo: '.testWrapper' })
+ .hover(`#${secondTabId}`)
+ .snapshot('hover', { cropTo: '.testWrapper' })
+ .end();
+
+export default {
+ title: 'Tabs',
+};
+
+export const Navigation = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+Navigation.decorators = [createDecorator(horizontalSteps)];
+
+export const NavigationRTL = getStoryVariant(Navigation, RTL);
+
+export const NavigationVertical = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+
+Navigation.decorators = [createDecorator(verticalSteps)];
+
+export const NavigationOverDisabledItem = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+NavigationOverDisabledItem.decorators = [createDecorator(horizontalSteps)];
+
+export const AppearanceTransparent = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+AppearanceTransparent.decorators = [createDecorator(appearanceSteps)];
+
+export const AppearanceSubtle = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+AppearanceSubtle.decorators = [createDecorator(appearanceSteps)];
diff --git a/apps/vr-tests-web-components/src/stories/tabs/tabs.stories.tsx b/apps/vr-tests-web-components/src/stories/tabs/tabs.stories.tsx
new file mode 100644
index 0000000000000..02d9bba98ce88
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/tabs/tabs.stories.tsx
@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { TabDefinition, TabsDefinition, TabPanelDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+TabDefinition.define(FluentDesignSystem.registry);
+TabsDefinition.define(FluentDesignSystem.registry);
+TabPanelDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'Tabs',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+
+export const DefaultDarkMode = getStoryVariant(Default, DARK_MODE);
+export const DefaultRTL = getStoryVariant(Default, RTL);
+
+export const Horizontal = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+
+export const Vertical = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+
+export const Disabled = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const SizeSmall = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+export const SizeSmallDarkMode = getStoryVariant(SizeSmall, DARK_MODE);
+
+export const SizeSmallVertical = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+export const SizeSmallVerticalDarkMode = getStoryVariant(SizeSmallVertical, DARK_MODE);
+
+export const SizeMedium = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+export const SizeMediumDarkMode = getStoryVariant(SizeMedium, DARK_MODE);
+
+export const SizeMediumVertical = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+export const SizeMediumVerticalDarkMode = getStoryVariant(SizeMediumVertical, DARK_MODE);
+
+export const SizeLarge = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+export const SizeLargeDarkMode = getStoryVariant(SizeLarge, DARK_MODE);
+
+export const SizeLargeVertical = () =>
+ parse(`
+
+ First Tab
+ Second Tab
+ Third Tab
+ Fourth Tab
+
+ First Panel
+ Second Panel
+ Third Panel
+ Fourth Panel
+
+ `);
+export const SizeLargeVerticalDarkMode = getStoryVariant(SizeLargeVertical, DARK_MODE);
diff --git a/apps/vr-tests-web-components/src/stories/text-input/text-input.stories.tsx b/apps/vr-tests-web-components/src/stories/text-input/text-input.stories.tsx
new file mode 100644
index 0000000000000..e33c85d3642d2
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/text-input/text-input.stories.tsx
@@ -0,0 +1,179 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { TextInputDefinition, LabelDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { tokens } from '@fluentui/tokens';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+TextInputDefinition.define(FluentDesignSystem.registry);
+LabelDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'TextInput',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+const Person20Regular = ``;
+
+export const Default = () =>
+ parse(`
+ Sample Input
+ `);
+
+export const ContentStart = () =>
+ parse(`
+
+ ${Person20Regular}
+ Content Start
+
+`);
+export const ContentStartDarkMode = getStoryVariant(ContentStart, DARK_MODE);
+export const ContentStartRTL = getStoryVariant(ContentStart, RTL);
+
+export const ContentEnd = () =>
+ parse(`
+
+ ${Person20Regular}
+ Content End
+
+`);
+export const ContentEndDarkMode = getStoryVariant(ContentEnd, DARK_MODE);
+export const ContentEndRTL = getStoryVariant(ContentEnd, RTL);
+
+export const ContentStartEnd = () =>
+ parse(`
+
+ $
+ .00
+ Content Before + After
+
+`);
+export const ContentStartEndDarkMode = getStoryVariant(ContentStartEnd, DARK_MODE);
+export const ContentStartEndRTL = getStoryVariant(ContentStartEnd, RTL);
+
+export const Placeholder = () =>
+ parse(`
+
+ ${Person20Regular}
+ Input with a placeholder
+
+`);
+export const PlaceholderDarkMode = getStoryVariant(Placeholder, DARK_MODE);
+
+export const Disabled = () =>
+ parse(`
+
+ ${Person20Regular}
+ Disabled Input
+
+`);
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const Required = () =>
+ parse(`
+
+ ${Person20Regular}
+ Required Input
+
+`);
+export const RequiredDarkMode = getStoryVariant(Required, DARK_MODE);
+
+export const AppearanceOutline = () =>
+ parse(`
+
+ ${Person20Regular}
+ Outline (default) Input
+
+`);
+
+export const AppearanceOutlineDarkMode = getStoryVariant(AppearanceOutline, DARK_MODE);
+
+export const AppearanceUnderline = () =>
+ parse(`
+
+ ${Person20Regular}
+ Underlined Input
+
+`);
+
+export const AppearanceUnderlineDarkMode = getStoryVariant(AppearanceUnderline, DARK_MODE);
+
+export const AppearanceFilledLighter = () =>
+ parse(`
+
+
+ ${Person20Regular}
+ Filled Lighter Input
+
+
+`);
+
+export const AppearanceFilledLighterDarkMode = getStoryVariant(AppearanceFilledLighter, DARK_MODE);
+
+export const AppearanceFilledDarker = () =>
+ parse(`
+
+
+ ${Person20Regular}
+ Filled Darker Input
+
+
+`);
+
+export const AppearanceFilledDarkerDarkMode = getStoryVariant(AppearanceFilledDarker, DARK_MODE);
+
+export const SizeSmall = () =>
+ parse(`
+
+ ${Person20Regular}
+ Small Input
+
+`);
+
+export const SizeMedium = () =>
+ parse(`
+
+ ${Person20Regular}
+ Medium (default) Input
+
+`);
+
+export const SizeLarge = () =>
+ parse(`
+
+ ${Person20Regular}
+ Large Input
+
+`);
+
+export const Inline = () =>
+ parse(`
+This is
+
+with a paragraph of text.
+`);
diff --git a/apps/vr-tests-web-components/src/stories/text/text.stories.tsx b/apps/vr-tests-web-components/src/stories/text/text.stories.tsx
new file mode 100644
index 0000000000000..a019e1dab8c34
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/text/text.stories.tsx
@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { TextDefinition, FluentDesignSystem, colorNeutralBackground6 } from '@fluentui/web-components';
+
+TextDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'Text',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+
+export const Default = () =>
+ parse(`
+ Default
+ `);
+
+export const Nowrap = () =>
+ parse(`
+
+
+ This text will not wrap lines when it overflows the container.
+
+
+`);
+
+export const Truncate = () =>
+ parse(`
+
+
+ Setting truncate
and nowrap
will truncate when it overflows the container.
+
+
+`);
+
+export const Italic = () =>
+ parse(`
+
+ Italics are emphasized text.
+
+`);
+
+export const Underline = () =>
+ parse(`
+
+ Underlined text draws the reader's attention to the words.
+
+`);
+
+export const Strikethrough = () =>
+ parse(`
+
+ Strikethrough text is used to indicate something that is no longer relevant.
+
+`);
+
+export const Block = () =>
+ parse(`
+
+ Fluent text is inline by default. Setting
+ block
+ will make it behave as a block element.
+
+`);
+
+export const Size = () =>
+ parse(`
+
+ 100
+ 200
+ 300
+ 400
+ 500
+ 600
+ 700
+ 800
+ 900
+ 1000
+
+`);
+
+export const Weight = () =>
+ parse(`
+
+ This text is regular.
+ This text is medium.
+ This text is semibold.
+ This text is bold.
+
+`);
+
+export const Align = () =>
+ parse(`
+
+
+ Start aligned block.
+
+
+ End aligned block.
+
+
+ Center aligned block.
+
+
+ Justify aligned block text stretches wrapped lines to meet container edges.
+
+
+`);
+
+export const Font = () =>
+ parse(`
+
+ Font base.
+ Font numeric 0123456789.
+ Font monospace.
+
+`);
diff --git a/apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx b/apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx
new file mode 100644
index 0000000000000..88d1cfb77653e
--- /dev/null
+++ b/apps/vr-tests-web-components/src/utilities/WCThemeDecorator.tsx
@@ -0,0 +1,80 @@
+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 { teamsLightTheme, teamsDarkTheme, webLightTheme, webDarkTheme } from '@fluentui/tokens';
+import { setThemeFor } from '@fluentui/web-components';
+
+const themes = [
+ { id: 'web-light', label: 'Web Light', theme: webLightTheme },
+ { id: 'web-dark', label: 'Web Dark', theme: webDarkTheme },
+ { id: 'teams-light', label: 'Teams Light', theme: teamsLightTheme },
+ { id: 'teams-dark', label: 'Teams Dark', theme: teamsDarkTheme },
+] as const;
+
+const defaultTheme = themes[0];
+
+type ThemeId = (typeof themes)[number]['id'];
+
+interface WCStoryContext extends StoryContext {
+ parameters: {
+ dir?: 'ltr' | 'rtl';
+ fluentTheme?: ThemeId;
+ };
+}
+
+@customElement({
+ name: 'fast-theme-decorator',
+ template: html``,
+ styles: `
+ :host {
+ display: block;
+ color: var(--colorNeutralForeground2);
+ background-color: var(--colorNeutralBackground2);
+ font-family: var(--fontFamilyBase);
+ }
+ `,
+})
+export class FASTThemeDecorator extends FASTElement {
+ @attr({
+ attribute: 'fluent-theme',
+ })
+ public fluentTheme: ThemeId = defaultTheme.id;
+
+ connectedCallback() {
+ super.connectedCallback();
+ const theme = themes.find(value => value.id === this.fluentTheme)?.theme ?? defaultTheme.theme;
+ setThemeFor(this, theme);
+ }
+}
+
+export const WCThemeDecorator = (StoryFn: () => JSX.Element, context: WCStoryContext) => {
+ const { dir = 'ltr', fluentTheme = defaultTheme.id } = context.parameters;
+
+ return React.createElement('fast-theme-decorator', { dir, 'fluent-theme': fluentTheme }, StoryFn());
+};
+
+export const DARK_MODE = 'Dark Mode';
+export const RTL = 'RTL';
+
+type Variant = typeof DARK_MODE | typeof RTL;
+
+function getStoryName(story: ComponentStory) {
+ if (story.storyName) {
+ return story.storyName;
+ }
+
+ return story.name.replace(/([a-z])([A-Z])/g, '$1 $2');
+}
+
+export const getStoryVariant = (story: () => string | JSX.Element | JSX.Element[], variant: Variant) => {
+ return {
+ ...story,
+ render: story,
+ storyName: `${getStoryName(story as ComponentStory)} - ${variant}`,
+ parameters: {
+ ...(variant === DARK_MODE && { fluentTheme: 'teams-dark' }),
+ ...(variant === RTL && { dir: 'rtl' }),
+ },
+ };
+};
diff --git a/apps/vr-tests-web-components/tsconfig.json b/apps/vr-tests-web-components/tsconfig.json
new file mode 100644
index 0000000000000..952413d9104a8
--- /dev/null
+++ b/apps/vr-tests-web-components/tsconfig.json
@@ -0,0 +1,13 @@
+{
+ "extends": "../../tsconfig.base.wc.json",
+ "compilerOptions": {
+ "target": "ES2019",
+ "module": "ESNext",
+ "noEmit": true,
+ "experimentalDecorators": true,
+ "resolveJsonModule": true,
+ "allowJs": true,
+ "jsx": "react"
+ },
+ "include": ["./src", "./.storybook/*"]
+}
diff --git a/azure-pipelines.release.web-components.yml b/azure-pipelines.release.web-components.yml
new file mode 100644
index 0000000000000..7a41f66b0b2d3
--- /dev/null
+++ b/azure-pipelines.release.web-components.yml
@@ -0,0 +1,86 @@
+pr: none
+trigger: none
+
+# Customize build number to include major version
+# Example: web-components_20201022.1
+name: 'web-components_$(Date:yyyyMMdd)$(Rev:.r)'
+
+variables:
+ - group: 'Github and NPM secrets'
+ - template: .devops/templates/variables.yml
+ parameters:
+ skipComponentGovernanceDetection: false
+ - name: release.web_components # Used to scope beachball to release only vnext packages
+ value: true
+ - name: tags
+ value: production,externalfacing
+
+resources:
+ repositories:
+ - repository: 1esPipelines
+ type: git
+ name: 1ESPipelineTemplates/1ESPipelineTemplates
+ ref: refs/tags/release
+
+schedules:
+ # Triggers the nightly release
+ # minute 0, hour 4 in UTC (5am in UTC+1), any day of month, any month, days 1-5 of week (M-F)
+ # https://docs.microsoft.com/en-us/azure/devops/pipelines/build/triggers?tabs=yaml&view=azure-devops#supported-cron-syntax
+ - cron: '0 4 * * 1-5'
+ displayName: 'Daily release (M-F at 5am UTC+1)'
+ branches:
+ include:
+ - master
+
+extends:
+ template: v1/1ES.Official.PipelineTemplate.yml@1esPipelines
+ parameters:
+ pool:
+ name: Azure-Pipelines-1ESPT-ExDShared
+ image: windows-latest
+ os: windows # We need windows because compliance task only run on windows.
+ stages:
+ - stage: main
+ jobs:
+ - job: Release
+ pool:
+ name: '1ES-Host-Ubuntu'
+ image: '1ES-PT-Ubuntu-20.04'
+ os: linux
+ workspace:
+ clean: all
+ templateContext:
+ outputs:
+ - output: pipelineArtifact
+ targetPath: $(System.DefaultWorkingDirectory)
+ artifactName: output
+ steps:
+ - template: .devops/templates/tools.yml@self
+
+ - script: |
+ git config user.name "Fluent UI Build"
+ git config user.email "fluentui-internal@service.microsoft.com"
+ git remote set-url origin https://$(githubUser):$(githubPAT)@github.com/microsoft/fluentui.git
+ displayName: Authenticate git for pushes
+
+ - task: Bash@3
+ inputs:
+ filePath: yarn-ci.sh
+ displayName: yarn
+
+ # --only makes it only run tests (otherwise due to the missing --production arg, lage would re-run the build)
+ # https://github.com/microsoft/fluentui/issues/21686
+ - script: |
+ yarn lage format:check lint test build --to @fluentui/web-components
+ displayName: Build, [test], Lint
+
+ - script: |
+ yarn publish:beachball -n $(npmToken) --config scripts/beachball/release-web-components.config.js
+ git reset --hard origin/master
+ env:
+ GITHUB_PAT: $(githubPAT)
+ displayName: Publish changes and bump versions
+
+ - template: .devops/templates/cleanup.yml@self
+ parameters:
+ checkForModifiedFiles: false
diff --git a/azure-pipelines.vrt-baseline.yml b/azure-pipelines.vrt-baseline.yml
index a700eb47d7796..ee714ed304f52 100644
--- a/azure-pipelines.vrt-baseline.yml
+++ b/azure-pipelines.vrt-baseline.yml
@@ -15,6 +15,32 @@ variables:
pool: '1ES-Host-Ubuntu'
jobs:
+ # TODO: When web-components-v3 branch is merged with master, this file can be deleted and everything below this comment
+ # can be moved to azure-pipelines.vrt-baseline.yml. The corresponding pipeline on ADO can be deleted as well.
+ - job: VRToolUpdateBaseline_WebComponents
+ variables:
+ pipelineId: '315'
+ workspace:
+ clean: all
+ steps:
+ - template: .devops/templates/tools.yml
+ - template: download-vr-cli.yml
+ - template: .devops/templates/runpublishvrscreenshot.yml
+ parameters:
+ fluentVersion: webcomponents
+ vrTestPackageName: '@fluentui/vr-tests-web-components'
+ vrTestPackagePath: 'apps/vr-tests-web-components'
+
+ - bash: vr-app run-diff --buildType release --screenshotsDirectory ./screenshots --clientType "FLUENTUI" --locationPrefix 'FluentUI-web-components' --locationPostfix 'vrscreenshotwebcomponents' --pipelineId $(pipelineId)
+ displayName: 'Run Screenshotdiff update baseline'
+ env:
+ API_TOKEN: $(fabric-public-pipeline-access-PAT)
+ GITHUB_API_TOKEN: $(githubRepoStatusPAT)
+ STORAGE_CONNECTION_STRING: $(BLOB-CONNECTION-STRING)
+ VR_APP_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET)
+ VR_APP_CLIENT_ID: $(VR_APP_CLIENT_ID)
+ VR_APP_API_URL: $(VR_APP_API_URL)
+
- job: VRToolUpdateBaseline_V9
variables:
pipelineId: '311'
diff --git a/azure-pipelines.vrt-pr.yml b/azure-pipelines.vrt-pr.yml
index 5f37beaf3c0e2..d542831ed1551 100644
--- a/azure-pipelines.vrt-pr.yml
+++ b/azure-pipelines.vrt-pr.yml
@@ -15,6 +15,85 @@ variables:
pool: '1ES-Host-Ubuntu'
jobs:
+ - job: VisualRegressionTest_WebComponents
+ variables:
+ pipelineId: '315'
+ pipelineName: 'fluent-ui_VRT_Pipeline_web-components'
+ workspace:
+ clean: all
+ steps:
+ - checkout: self
+ fetchDepth: 0
+
+ - template: .devops/templates/tools.yml
+ - template: download-vr-cli.yml
+
+ - bash: |
+ postPolicy="true";
+ response=$(curl --request POST ${VR_APP_CLIENT_URL} --header 'Content-Type: application/x-www-form-urlencoded' --data-urlencode 'grant_type=client_credentials' --data-urlencode 'client_id='${VR_APP_CLIENT_ID} --data-urlencode 'client_secret='${VR_APPROVAL_CLIENT_SECRET} )
+ parsedResponse=${response/*"access_token"/}
+ token=${parsedResponse:3:${#parsedResponse}-5}
+ curl --location --request POST 'https://vrapprovalfunction-prod.azurewebsites.net/api/policyStateV2' \
+ --header 'Authorization: Bearer '"$token" \
+ --header 'Content-Type: application/json' \
+ --data-raw ' {
+ "organization": "uifabric",
+ "projectName": "fabricpublic",
+ "prId": $(System.PullRequest.PullRequestNumber),
+ "commitId": "$(Build.SourceVersion)",
+ "generate":true,
+ "clientType":"FLUENTUI",
+ "blockingPipeline":{
+ },
+ "nonBlockingPipeline":{
+ "$(pipelineId)": {
+ "pipelineStatus": "PENDING",
+ "pipelineName": "$(pipelineName)"
+ }
+ },
+ "postPolicy": '${postPolicy}',
+ "policyType": "OPTIONAL"
+ }'
+ displayName: 'Call policy State Api'
+ env:
+ VR_APPROVAL_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET)
+ VR_APPROVAL_HOST: $(VR_APPROVAL_HOST)
+ VR_APP_CLIENT_ID: $(VR_APP_CLIENT_ID)
+ VR_APP_CLIENT_URL: $(VR_APP_CLIENT_URL)
+
+ - template: .devops/templates/runpublishvrscreenshot.yml
+ parameters:
+ fluentVersion: webcomponents
+ vrTestPackageName: '@fluentui/vr-tests-web-components'
+ vrTestPackagePath: 'apps/vr-tests-web-components'
+
+ - powershell: |
+ $url = "https://dev.azure.com/uifabric/fabricpublic/_apis/build/builds?definitions=$env:BASELINE_PIPELINE_ID&statusFilter=completed&resultFilter=succeeded&queryOrder=finishTimeDescending&`$top=1"
+ Write-Host "Looking up latest official build via url: $url"
+ $pipelineBuildInfo = Invoke-RestMethod -Uri $url -Headers @{Authorization = "Bearer $env:SYSTEM_ACCESSTOKEN"}
+ Write-Host "Response: $pipelineBuildInfo"
+ [int]$latestBuildId = $pipelineBuildInfo.value.id
+ Write-Host "Setting variable LatestBuildId=$latestBuildId"
+ Write-Host "##vso[task.setvariable variable=LatestBuildId]$latestBuildId"
+ name: GetLatestGreenCIBuild
+ env:
+ SYSTEM_ACCESSTOKEN: $(System.AccessToken)
+ # TODO: When web-components-v3 branch is merged with master,
+ # BASELINE-PIPELINE-ID-WEBCOMPONENTS should be changed to simply BASELINE-PIPELINE-ID.
+ BASELINE_PIPELINE_ID: $(BASELINE-PIPELINE-ID-WEBCOMPONENTS)
+ condition: eq(variables['vrTestSkip'], 'no')
+
+ - bash: vr-app run-diff --screenshotsDirectory ./screenshots --buildType pr --clientType "FLUENTUI" --ciDefinitionId 214 --groupName $(pipelineName) --locationPrefix 'FluentUI-web-components' --locationPostfix 'vrscreenshotwebcomponents' --pipelineId $(pipelineId) --clientName 'fluentui-web-components-v3' --threshold '0.04' --cumThreshold '1'
+ displayName: 'Run fluentui-screenshotdiff'
+ env:
+ API_TOKEN: $(fabric-public-pipeline-access-PAT)
+ GITHUB_API_TOKEN: $(githubRepoStatusPAT)
+ STORAGE_CONNECTION_STRING: $(BLOB-CONNECTION-STRING)
+ VR_APP_CLIENT_SECRET: $(VR-APPROVAL-CLIENT-SECRET)
+ VR_APP_CLIENT_ID: $(VR_APP_CLIENT_ID)
+ VR_APP_API_URL: $(VR_APP_API_URL)
+ condition: eq(variables['vrTestSkip'], 'no')
+
- job: VisualRegressionTest_V9
variables:
pipelineId: '311'
diff --git a/change/@fluentui-web-components-db28c4c9-e1dd-4dd0-a4fe-c7fed393995e.json b/change/@fluentui-web-components-db28c4c9-e1dd-4dd0-a4fe-c7fed393995e.json
new file mode 100644
index 0000000000000..c0bb1939edff0
--- /dev/null
+++ b/change/@fluentui-web-components-db28c4c9-e1dd-4dd0-a4fe-c7fed393995e.json
@@ -0,0 +1,7 @@
+{
+ "type": "none",
+ "comment": "chore: merge wc-3 to master - avoiding any library bumps",
+ "packageName": "@fluentui/web-components",
+ "email": "martinhochel@microsoft.com",
+ "dependentChangeType": "none"
+}
diff --git a/package.json b/package.json
index 4afdbd55a9112..9faa52523c288 100644
--- a/package.json
+++ b/package.json
@@ -102,6 +102,8 @@
"@nx/workspace": "17.3.2",
"@octokit/rest": "18.12.0",
"@phenomnomnominal/tsquery": "6.1.3",
+ "@playwright/test": "1.28.1",
+ "@rollup/plugin-node-resolve": "13.3.0",
"@storybook/addon-a11y": "6.5.15",
"@storybook/addon-actions": "6.5.15",
"@storybook/addon-docs": "6.5.15",
@@ -229,6 +231,7 @@
"eslint-plugin-jest": "23.20.0",
"eslint-plugin-jsdoc": "48.2.0",
"eslint-plugin-jsx-a11y": "6.4.1",
+ "eslint-plugin-playwright": "0.15.3",
"eslint-plugin-react": "7.26.0",
"eslint-plugin-react-hooks": "4.2.0",
"express": "4.19.2",
@@ -276,6 +279,7 @@
"p-queue": "6.6.2",
"parse-diff": "0.7.1",
"path-browserify": "1.0.1",
+ "playwright": "1.28.1",
"plop": "2.6.0",
"portfinder": "1.0.28",
"postcss": "8.4.31",
@@ -299,13 +303,12 @@
"request-promise-native": "1.0.9",
"resolve": "1.22.8",
"riceburn": "1.3.1",
- "rollup": "2.45.2",
+ "rollup": "2.71.0",
"rollup-plugin-commonjs": "10.1.0",
- "rollup-plugin-filesize": "8.0.2",
+ "rollup-plugin-esbuild": "6.1.1",
"rollup-plugin-node-resolve": "5.2.0",
"rollup-plugin-terser": "5.3.1",
"rollup-plugin-transform-tagged-template": "0.0.3",
- "rollup-plugin-typescript2": "0.27.1",
"sass": "1.49.11",
"sass-loader": "12.4.0",
"satisfied": "^1.1.1",
@@ -326,7 +329,7 @@
"through2": "4.0.2",
"tmp": "0.2.1",
"ts-jest": "29.1.1",
- "ts-loader": "9.3.1",
+ "ts-loader": "9.4.2",
"ts-node": "10.9.1",
"tsconfig-paths": "4.2.0",
"tsconfig-paths-webpack-plugin": "4.1.0",
diff --git a/packages/web-components/.eslintignore b/packages/web-components/.eslintignore
index 5b214b4625e54..ba38ef5432888 100644
--- a/packages/web-components/.eslintignore
+++ b/packages/web-components/.eslintignore
@@ -6,5 +6,3 @@ dist
coverage
# don't lint storybook
.storybook
-# don't lint tests
-*.spec.*
\ No newline at end of file
diff --git a/packages/web-components/.eslintrc.js b/packages/web-components/.eslintrc.js
deleted file mode 100644
index d3118d7db8188..0000000000000
--- a/packages/web-components/.eslintrc.js
+++ /dev/null
@@ -1,57 +0,0 @@
-module.exports = {
- root: true,
- parser: '@typescript-eslint/parser',
- plugins: ['@typescript-eslint', 'import'],
- extends: [
- 'eslint:recommended',
- 'plugin:@typescript-eslint/eslint-recommended',
- 'plugin:@typescript-eslint/recommended',
- 'prettier',
- ],
- settings: {
- react: {
- version: 'latest',
- },
- },
- rules: {
- 'no-extra-boolean-cast': 'off',
- 'no-prototype-builtins': 'off',
- 'no-fallthrough': 'off',
- 'no-unexpected-multiline': 'off',
- 'import/order': 'error',
- 'sort-imports': [
- 'error',
- {
- ignoreCase: true,
- ignoreDeclarationSort: true,
- },
- ],
- 'comma-dangle': 'off',
- '@typescript-eslint/no-non-null-assertion': 'off',
- '@typescript-eslint/no-use-before-define': 'off',
- '@typescript-eslint/explicit-module-boundary-types': 'off',
- '@typescript-eslint/explicit-function-return-type': 'off',
- '@typescript-eslint/camelcase': 'off',
- '@typescript-eslint/no-inferrable-types': 'off',
- '@typescript-eslint/no-unused-vars': ['warn', { args: 'none' }],
- '@typescript-eslint/no-explicit-any': 'off',
- '@typescript-eslint/naming-convention': [
- 'error',
- {
- selector: 'default',
- format: ['UPPER_CASE', 'camelCase', 'PascalCase'],
- leadingUnderscore: 'allow',
- },
- {
- selector: 'property',
- format: null, // disable for property names because of our foo__expanded convention for JSS
- // TODO: I think we can come up with a regex that ignores variables with __ in them
- },
- {
- selector: 'variable',
- format: null, // disable for variable names because of our foo__expanded convention for JSS
- // TODO: I think we can come up with a regex that ignores variables with __ in them
- },
- ],
- },
-};
diff --git a/packages/web-components/.eslintrc.json b/packages/web-components/.eslintrc.json
new file mode 100644
index 0000000000000..0b1511be1817a
--- /dev/null
+++ b/packages/web-components/.eslintrc.json
@@ -0,0 +1,64 @@
+{
+ "root": true,
+ "parser": "@typescript-eslint/parser",
+ "plugins": ["@typescript-eslint", "import"],
+ "extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/eslint-recommended",
+ "plugin:@typescript-eslint/recommended",
+ "prettier",
+ "plugin:playwright/recommended"
+ ],
+ "settings": {
+ "react": {
+ "version": "latest"
+ }
+ },
+ "rules": {
+ "no-extra-boolean-cast": "off",
+ "no-prototype-builtins": "off",
+ "no-fallthrough": "off",
+ "no-unexpected-multiline": "off",
+ "no-useless-escape": "off",
+ "import/order": "error",
+ "sort-imports": [
+ "error",
+ {
+ "ignoreCase": true,
+ "ignoreDeclarationSort": true
+ }
+ ],
+ "comma-dangle": "off",
+ "@typescript-eslint/no-non-null-assertion": "off",
+ "@typescript-eslint/no-use-before-define": "off",
+ "@typescript-eslint/explicit-module-boundary-types": "off",
+ "@typescript-eslint/explicit-function-return-type": "off",
+ "@typescript-eslint/camelcase": "off",
+ "@typescript-eslint/no-inferrable-types": "off",
+ "@typescript-eslint/no-unused-vars": [
+ "warn",
+ {
+ "args": "none"
+ }
+ ],
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/naming-convention": [
+ "error",
+ {
+ "selector": "default",
+ "format": ["UPPER_CASE", "camelCase", "PascalCase"],
+ "leadingUnderscore": "allow"
+ },
+ {
+ "selector": "property",
+ "format": null // disable for property names because of our foo__expanded convention for JSS
+ // TODO: I think we can come up with a regex that ignores variables with __ in them
+ },
+ {
+ "selector": "variable",
+ "format": null // disable for variable names because of our foo__expanded convention for JSS
+ // TODO: I think we can come up with a regex that ignores variables with __ in them
+ }
+ ]
+ }
+}
diff --git a/packages/web-components/.mocharc.json b/packages/web-components/.mocharc.json
deleted file mode 100644
index ad84c86f3814c..0000000000000
--- a/packages/web-components/.mocharc.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "colors": true,
- "recursive": true,
- "timeout": 5000,
- "require": ["esm", "jsdom-global/register"]
-}
diff --git a/packages/web-components/.npmignore b/packages/web-components/.npmignore
index db6d6409bd971..3bcf3dd7ff879 100644
--- a/packages/web-components/.npmignore
+++ b/packages/web-components/.npmignore
@@ -1,30 +1,42 @@
+.vscode/
+
# Tests
-dist/dts/__test__/
-dist/esm/__test__/
*.spec.*
+*.test.*
+*.bench.*
coverage/
+__fixtures__
+__mocks__
+__tests__
# images
images/
# Source files
src/
+scripts/
# config files
.eslintignore
.eslintrc.js
+.eslintrc.json
.prettierignore
-.storybook
tsconfig.json
-tsconfig.build.json
+tsconfig.*.json
rollup.config.json
+rollup.config.js
karma.conf.cjs
api-extractor.json
.mocharc.json
-# Storybook static site
+# Storybook
+.storybook
+*.stories.*
+public/
dist/storybook-static/
# cache
.rollupcache
-temp
+temp/
+etc/
+CHANGELOG.json
diff --git a/packages/web-components/.storybook/docs-root.css b/packages/web-components/.storybook/docs-root.css
new file mode 100644
index 0000000000000..6262526a64895
--- /dev/null
+++ b/packages/web-components/.storybook/docs-root.css
@@ -0,0 +1,473 @@
+/*
+ * Heads Up!
+ * This file should be kept in sync with the `docs-root.css` file for the React v9 Storybook.
+ */
+
+/* remove the docs wrapper bg to let page bg show through */
+#docs-root .sbdocs-wrapper {
+ background: transparent !important;
+}
+
+/* sb-show-main is missing during page transitions causing a page shift */
+/* todo: cleanup once we no longer inherit docs-root */
+.sb-show-main.sb-main-fullscreen,
+.sb-main-fullscreen {
+ margin: 0;
+ padding: 0;
+ display: block;
+}
+
+#docs-root .sbdocs-content {
+ font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+ sans-serif;
+ max-width: 1200px;
+}
+
+#docs-root h1.sbdocs-title {
+ font-size: 44px;
+ line-height: 60px;
+ /* identical to box height, or 143% */
+ letter-spacing: -0.04em;
+ color: #000000;
+}
+
+#docs-root details {
+ position: relative;
+ z-index: 99;
+}
+
+#docs-root .sbdocs-p {
+ font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+ sans-serif;
+ font-size: 18px;
+ line-height: 27px;
+ letter-spacing: -0.01em;
+ color: #000000;
+ margin-top: 24px;
+}
+
+#docs-root .sbdocs-img.featured-image {
+ max-width: 100%;
+ margin: 48px 0;
+ display: block;
+}
+
+#docs-root .sbdocs-img {
+ border-radius: 24px;
+}
+
+#docs-root .sbdocs-hr {
+ margin: 48px 0;
+ height: 0;
+ border-top: 1px solid #ebebeb;
+}
+
+#docs-root .sbdocs-h2 {
+ font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+ sans-serif;
+ font-size: 24px;
+ line-height: 28px;
+ letter-spacing: -0.04em;
+ color: black;
+ border-top: 1px solid #ebebeb;
+ border-bottom: none;
+ margin: 48px 0 15px 0;
+ padding: 48px 0 0 0;
+}
+
+#docs-root .sbdocs-h2 code {
+ border-radius: 4px;
+ font-size: 20px;
+}
+
+#docs-root .sbdocs-h3 {
+ font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+ sans-serif;
+ font-size: 18px;
+ line-height: 24px;
+ margin: 25px 0 0 0 !important;
+ letter-spacing: -0.01em;
+ color: #000000;
+}
+
+#docs-root .sbdocs-h3 code {
+ border-radius: 3px;
+ font-size: 16px;
+}
+
+/* Only apply to H3s inside of stories which have a parent with an ID */
+#docs-root [id] > .sbdocs-h3:before {
+ content: '';
+ display: block;
+ height: 40px;
+ margin: -40px 0 0;
+}
+
+#docs-root .sbdocs-li {
+ font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+ sans-serif;
+ font-size: 16px;
+ line-height: 150%;
+ letter-spacing: -0.01em;
+
+ /* Neutrals / Web / Gray 200 #1B1A19 */
+ color: #1b1a19;
+ margin-top: 8px;
+}
+
+#docs-root .sbdocs-ul {
+ margin: 12px 0;
+}
+
+#docs-root .sbdocs-ul .sbdocs-li {
+ list-style: none;
+ position: relative;
+}
+
+#docs-root .sbdocs-ul .sbdocs-li::before {
+ position: absolute;
+ content: '•';
+ color: #8d8d8d;
+ top: 0;
+ left: -15px;
+}
+
+#docs-root .sbdocs-ol .sbdocs-li::marker {
+ color: #8d8d8d;
+}
+
+#docs-root .sbdocs-preview {
+ border-radius: 16px;
+ background: #fff; /* --colorBrandBackgroundInverted */
+ padding: 0;
+ box-shadow: none;
+ border: 1px solid #d1d1d1; /* --colorNeutralStroke1 */
+}
+
+/* Apply the currently selected Fluent UI theme to the relevant areas of the docs */
+#docs-root .innerZoomElementWrapper > div {
+ padding: 30px;
+ box-sizing: border-box;
+}
+
+/* fix mouse interactions for toolbar on first story */
+#docs-root .sbdocs-preview > .os-host {
+ /* The toolbar sits within the story content area and is position: absolute by default. */
+ /* The story content overlays the toolbar making it non-interactive */
+ /* We don't use z-index because the toolbar can still sometimes overlay story content (flyout menu) */
+ /* The best solution is to use a static toolbar that is always outside the story content and interactive */
+ position: static;
+}
+
+#docs-root span + .sbdocs .docblock-argstable tbody tr td button {
+ color: #0078d4;
+ color: red;
+}
+
+#docs-root .docs-story + div {
+ background: #11100f;
+}
+
+#docs-root .sbdocs-content > div:last-child {
+ margin-bottom: 96px;
+}
+
+#docs-root .docs-story > div {
+ padding: 0;
+ background: none;
+}
+
+#docs-root .docs-story > div:last-child {
+ right: 31px;
+ border-radius: 24px;
+}
+
+.docs-story + div > div:last-child {
+ background: #000000;
+ box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+ border-radius: 5px 5px 0px 0px;
+ right: 31px;
+}
+
+.docs-story + div > div:last-child > button {
+ color: white;
+ font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+ sans-serif;
+ font-size: 14px;
+ line-height: 150%;
+ text-align: center;
+ letter-spacing: -0.01em;
+}
+
+#docs-root a.sbdocs-a {
+ color: #0078d4;
+ text-decoration: underline;
+}
+
+/* */
+/* Args Table */
+/* */
+
+#docs-root .docblock-argstable tbody {
+ box-shadow: none;
+ border-left: none;
+ border-right: none;
+}
+
+#docs-root .docblock-argstable-head th {
+ letter-spacing: -0.01em;
+ color: black;
+ font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+ sans-serif;
+ font-size: 16px;
+ line-height: 150%;
+ font-weight: 600;
+}
+
+#docs-root thead.docblock-argstable-head {
+ border-bottom: 1px solid #edebe9;
+}
+
+#docs-root .docblock-argstable tbody tr {
+ border: none;
+}
+
+#docs-root table.docblock-argstable tbody.docblock-argstable-body td,
+#docs-root .docblock-argstable th {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ padding-left: 16px;
+}
+
+#docs-root .docblock-argstable tbody tr td:nth-child(1) span {
+ font-weight: normal;
+ font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+ sans-serif;
+ font-size: 16px;
+ line-height: 130%;
+ letter-spacing: -0.01em;
+ color: #616161;
+}
+
+#docs-root .docblock-argstable tbody tr td {
+ vertical-align: top;
+}
+
+#docs-root .docblock-argstable-body > tr > td > div > div > button {
+ color: #0078d4;
+ line-height: 21px;
+}
+
+#docs-root code,
+#docs-root .docblock-argstable tbody tr td:nth-child(3) > div > span,
+#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
+#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
+#docs-root .css-16d4d7t {
+ font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 14px;
+ line-height: 130%;
+ letter-spacing: -0.2px;
+ box-decoration-break: clone;
+ -webkit-box-decoration-break: clone;
+}
+
+#docs-root code.sbdocs-code,
+#docs-root .sbdocs-p code,
+#docs-root .sbdocs-li code,
+#docs-root .docblock-argstable code,
+#docs-root .docblock-argstable tbody tr td:nth-child(3) > div > span,
+#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(2) span,
+#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > div > span,
+#docs-root .css-16d4d7t {
+ font-size: 14px;
+ background: #f0f0f0;
+ border-radius: 4px;
+ padding: 1px 4px;
+ margin: 0 3px 0 3px;
+ color: black;
+ border: none;
+ line-height: 1.5;
+}
+
+#docs-root .docblock-argstable code {
+ white-space: normal;
+}
+
+#docs-root code {
+ padding: 0.1em 0.2em;
+ display: inline-block;
+ background-color: rgba(17, 16, 15, 0.1);
+ border-radius: 2px;
+ width: fit-content; /* prevent wrapping kebab-case words when they'll fit on one line */
+}
+
+.os-content-glue {
+ width: auto !important;
+}
+
+#docs-root .sbdocs-preview .prismjs {
+ overflow: hidden;
+}
+
+#docs-root .os-content .prismjs * {
+ font-family: 'Cascadia Code', Menlo, 'Courier New', Courier, monospace;
+ font-size: 14px;
+ line-height: 1.4em;
+}
+
+#docs-root .sbdocs-preview .prismjs code {
+ color: white;
+ background: #11100f;
+ margin: 0;
+ overflow-x: auto;
+}
+
+#docs-root .docblock-argstable-body td > div > p,
+#docs-root .docblock-argstable-body > tr > td:nth-child(2) p,
+#docs-root .docblock-argstable-body > tr > td:nth-child(2) > div:nth-child(1) > span {
+ font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
+ sans-serif;
+ font-size: 16px;
+ line-height: 130%;
+ color: black;
+ letter-spacing: -0.01em;
+}
+
+#docs-root .docblock-argstable tr > :nth-child(1) {
+ width: 4%;
+}
+
+#docs-root .docblock-argstable tr > :nth-child(2) {
+ width: 100%;
+}
+
+#docs-root .os-padding {
+ z-index: 0;
+}
+
+@font-face {
+ font-family: 'Segoe UI';
+ src: local('Segoe UI Light'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format('woff2'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format('woff'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format('truetype');
+ font-weight: 100;
+}
+
+@font-face {
+ font-family: 'Segoe UI';
+ src: local('Segoe UI Semilight'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format('woff2'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format('woff'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format('truetype');
+ font-weight: 200;
+}
+
+@font-face {
+ font-family: 'Segoe UI';
+ src: local('Segoe UI'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format('woff2'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format('woff'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format('truetype');
+ font-weight: 400;
+}
+
+@font-face {
+ font-family: 'Segoe UI';
+ src: local('Segoe UI Semibold'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format('truetype');
+ font-weight: 600;
+}
+
+@font-face {
+ font-family: 'Segoe UI';
+ src: local('Segoe UI Bold'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff'),
+ url(https://c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format('truetype');
+ font-weight: 700;
+}
+
+body,
+body p,
+body ul,
+body ul li {
+ font-family: 'Segoe UI' !important;
+}
+
+h1.fluent {
+ font-weight: 700;
+ font-size: 40px;
+ font-family: 'Segoe UI';
+ line-height: 60px;
+ letter-spacing: -0.16px;
+}
+
+h1 .fluent-version {
+ display: block;
+ font-size: 24px; /* --font-size-base-600 */
+ line-height: 32px;
+ color: #707070; /* --color-neutral-foreground-3 */
+}
+
+h2.fluent {
+ font-weight: 600;
+ font-size: 24px;
+ font-family: 'Segoe UI';
+ line-height: 36px;
+ letter-spacing: -0.16px;
+}
+
+/* Mimic React v9 Provider styles:
+ * - apply font, background, and foreground colors
+ * - apply padding for story content
+ */
+#docs-root .innerZoomElementWrapper > div > div {
+ padding: 48px 24px;
+ font-family: var(--fontFamilyBase);
+ background: var(--colorNeutralBackground2);
+ color: var(--colorNeutralForeground2);
+}
+
+/*
+ * Theme Switcher
+ */
+#switches-container {
+ position: sticky;
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ padding: 12px;
+ width: 100%;
+ top: 0;
+ box-sizing: border-box; /* keep from overflowing body making x scroll bar*/
+ background: #fff;
+ box-shadow: 0 0 3px rgb(0 0 0 / 22%);
+ z-index: 10;
+}
+
+#switches-container select {
+ padding: 5px var(--spacingHorizontalM);
+ border: var(--strokeWidthThin) solid #d1d1d1 /* --colorNeutralStroke1, without theme switching */;
+ border-radius: var(--borderRadiusMedium);
+ font-size: var(--fontSizeBase300);
+ font-weight: var(--fontWeightSemibold);
+ line-height: var(--lineHeightBase300);
+ width: 140px;
+}
+
+.custom-fullscreen #switches-container {
+ display: none;
+}
+
+.custom-fullscreen .sbdocs-wrapper {
+ padding: 20px;
+}
+
+.custom-fullscreen .sbdocs-content {
+ max-width: unset;
+}
diff --git a/packages/web-components/.storybook/main.cjs b/packages/web-components/.storybook/main.cjs
new file mode 100644
index 0000000000000..64a2437390d08
--- /dev/null
+++ b/packages/web-components/.storybook/main.cjs
@@ -0,0 +1,97 @@
+const path = require('path');
+const CircularDependencyPlugin = require('circular-dependency-plugin');
+const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin');
+
+const tsBin = require.resolve('typescript');
+const tsConfigPath = path.resolve(__dirname, '../../../tsconfig.base.wc.json');
+
+const tsPaths = new TsconfigPathsPlugin({
+ configFile: tsConfigPath,
+});
+
+// TODO - these types are copied from root ./storybook/main.js as if we would like to use those as is, it will force us to add our custom storybook plugins as devDeps to WC
+// - refactor this to be shared
+
+/**
+ * @typedef {import('@storybook/core-common').StorybookConfig} StorybookBaseConfig
+ *
+ * @typedef {{
+ * babel: (options: Record) => Promise>;
+ * previewHead: (head: string) => string;
+ * }} StorybookExtraConfig
+ *
+ * @typedef {StorybookBaseConfig &
+ * Required> &
+ * StorybookExtraConfig
+ * } StorybookConfig
+ */
+
+module.exports = /** @type {Omit} */ ({
+ stories: ['../src/**/*.stories.@(ts|mdx)'],
+ staticDirs: ['../public'],
+ core: {
+ builder: 'webpack5',
+ disableTelemetry: true,
+ },
+ addons: [
+ {
+ name: '@storybook/addon-docs',
+ },
+ {
+ name: '@storybook/addon-essentials',
+ options: {
+ backgrounds: false,
+ viewport: false,
+ toolbars: false,
+ actions: true,
+ },
+ },
+ ],
+ webpackFinal: async config => {
+ config.resolve = config.resolve ?? {};
+ config.resolve.extensions = config.resolve.extensions ?? [];
+ config.resolve.plugins = config.resolve.plugins ?? [];
+ config.module = config.module ?? {};
+ config.plugins = config.plugins ?? [];
+
+ config.resolve.extensionAlias = {
+ '.js': ['.js', '.ts'],
+ '.mjs': ['.mjs', '.mts'],
+ };
+ config.resolve.extensions.push(...['.ts', '.js']);
+ config.resolve.plugins.push(tsPaths);
+ config.module.rules = config.module.rules ?? [];
+ config.module.rules.push(
+ {
+ test: /\.([cm]?ts|tsx)$/,
+ loader: 'ts-loader',
+ sideEffects: true,
+ options: {
+ transpileOnly: true,
+ compiler: tsBin,
+ },
+ },
+ // Following config is needed to be able to resolve @storybook packages imported in specified files that don't ship valid ESM
+ // It also enables importing other packages without proper ESM extensions, but that should be avoided !
+ // @see https://webpack.js.org/configuration/module/#resolvefullyspecified
+ {
+ test: /\.m?js/,
+ resolve: { fullySpecified: false },
+ },
+ );
+
+ config.plugins.push(
+ new CircularDependencyPlugin({
+ exclude: /node_modules/,
+ failOnError: process.env.NODE_ENV === 'production',
+ }),
+ );
+
+ // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
+ if (process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) {
+ config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
+ }
+
+ return config;
+ },
+});
diff --git a/packages/web-components/.storybook/main.js b/packages/web-components/.storybook/main.js
deleted file mode 100644
index 352a8ec7d0084..0000000000000
--- a/packages/web-components/.storybook/main.js
+++ /dev/null
@@ -1,49 +0,0 @@
-const CircularDependencyPlugin = require('circular-dependency-plugin');
-
-module.exports = {
- stories: ['../src/**/*.stories.@(ts|mdx)'],
- staticDirs: ['../public'],
- core: {
- builder: 'webpack5',
- disableTelemetry: true,
- },
- addons: [
- {
- name: '@storybook/addon-docs',
- },
- {
- name: '@storybook/addon-essentials',
- options: {
- backgrounds: false,
- viewport: false,
- toolbars: false,
- actions: false,
- },
- },
- ],
- webpackFinal: async config => {
- config.module.rules.push({
- test: /\.ts$/,
- use: [
- {
- loader: 'ts-loader',
- },
- ],
- });
- config.resolve.extensions.push('.ts');
- config.resolve.extensions.push('.js');
- config.plugins.push(
- new CircularDependencyPlugin({
- exclude: /node_modules/,
- failOnError: process.env.NODE_ENV === 'production',
- }),
- );
-
- // Disable ProgressPlugin which logs verbose webpack build progress. Warnings and Errors are still logged.
- if (process.env.TF_BUILD || process.env.LAGE_PACKAGE_NAME) {
- config.plugins = config.plugins.filter(({ constructor }) => constructor.name !== 'ProgressPlugin');
- }
-
- return config;
- },
-};
diff --git a/packages/web-components/.storybook/manager-head.html b/packages/web-components/.storybook/manager-head.html
index 66e56d53aabeb..d2af1fb450b82 100644
--- a/packages/web-components/.storybook/manager-head.html
+++ b/packages/web-components/.storybook/manager-head.html
@@ -1,16 +1,85 @@
-
-
-
-
+
+
+
+
-
diff --git a/packages/web-components/.storybook/manager.js b/packages/web-components/.storybook/manager.mjs
similarity index 85%
rename from packages/web-components/.storybook/manager.js
rename to packages/web-components/.storybook/manager.mjs
index a46a132161789..5dcaa431bdecd 100644
--- a/packages/web-components/.storybook/manager.js
+++ b/packages/web-components/.storybook/manager.mjs
@@ -1,5 +1,5 @@
import { addons } from '@storybook/addons';
-import webcomponentsTheme from './theme';
+import webcomponentsTheme from './theme.mjs';
addons.setConfig({
previewTabs: {
diff --git a/packages/web-components/.storybook/preview-body.html b/packages/web-components/.storybook/preview-body.html
index 996c666f92e71..93e32a40560db 100644
--- a/packages/web-components/.storybook/preview-body.html
+++ b/packages/web-components/.storybook/preview-body.html
@@ -1,12 +1,9 @@
-
- Direction
- RTL
- LTR
-
-
- Luminance
- Dark
- Light
-
+
+
diff --git a/packages/web-components/.storybook/preview-head.html b/packages/web-components/.storybook/preview-head.html
deleted file mode 100644
index 9f3c89bc6e1ef..0000000000000
--- a/packages/web-components/.storybook/preview-head.html
+++ /dev/null
@@ -1,67 +0,0 @@
-
diff --git a/packages/web-components/.storybook/preview.js b/packages/web-components/.storybook/preview.js
deleted file mode 100644
index 95d4b56fba6ff..0000000000000
--- a/packages/web-components/.storybook/preview.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import { addons } from '@storybook/addons';
-import { DOCS_RENDERED } from '@storybook/core-events';
-import * as Fluent from '../src/index-rollup';
-import { fillColor, neutralLayer1, neutralLayer2 } from '../src/design-tokens';
-import webcomponentsTheme from './theme';
-import { toggleBgMode, toggleLtr } from '../public/switches';
-
-Fluent;
-
-document.getElementById('luminance-switch').addEventListener('change', toggleBgMode, false);
-document.getElementById('direction-switch').addEventListener('change', toggleLtr, false);
-
-export const parameters = {
- layout: 'fullscreen',
- controls: { expanded: true },
- viewMode: 'docs',
- previewTabs: {
- canvas: { hidden: true },
- },
- options: {
- storySort: {
- order: [
- 'Getting Started',
- ['Overview', 'Installation', 'Styling'],
- 'Components',
- 'Integrations',
- ['Introduction'],
- 'Design System',
- ['Design Tokens', 'Color Explorer', 'High Contrast'],
- 'Resources',
- ['Browser Support', 'FAQ', 'License', 'Security'],
- '*',
- ],
- method: 'alphabetical',
- },
- },
- docs: {
- theme: webcomponentsTheme, // override the default Storybook theme with a custom fluent theme
- },
-};
-
-addons.getChannel().addListener(DOCS_RENDERED, name => {
- if (name.toLowerCase().includes('accordion') || name.toLowerCase().includes('card')) {
- fillColor.setValueFor(document.body, neutralLayer2);
- } else {
- fillColor.setValueFor(document.body, neutralLayer1);
- }
-
- if (name.toLowerCase().includes('color-explorer')) {
- document.body.classList.add('custom-fullscreen');
- } else {
- document.body.classList.remove('custom-fullscreen');
- }
-});
diff --git a/packages/web-components/.storybook/preview.mjs b/packages/web-components/.storybook/preview.mjs
new file mode 100644
index 0000000000000..de53eeeb8dc96
--- /dev/null
+++ b/packages/web-components/.storybook/preview.mjs
@@ -0,0 +1,30 @@
+import { switchTheme } from '../public/theme-switch.js';
+import webcomponentsTheme from './theme.mjs';
+
+import '../src/index-rollup.js';
+import './docs-root.css';
+
+function changeTheme(e) {
+ switchTheme(e.target.value);
+}
+
+document.getElementById('theme-switch')?.addEventListener('change', changeTheme, false);
+switchTheme('web-light');
+
+export const parameters = {
+ layout: 'fullscreen',
+ controls: { expanded: true },
+ viewMode: 'docs',
+ previewTabs: {
+ canvas: { hidden: true },
+ },
+ options: {
+ storySort: {
+ method: 'alphabetical',
+ order: ['Concepts', ['Introduction'], 'Components', 'Theme'],
+ },
+ },
+ docs: {
+ theme: webcomponentsTheme, // override the default Storybook theme with a custom fluent theme
+ },
+};
diff --git a/packages/web-components/.storybook/theme.js b/packages/web-components/.storybook/theme.mjs
similarity index 58%
rename from packages/web-components/.storybook/theme.js
rename to packages/web-components/.storybook/theme.mjs
index 57947533b5c3a..16836fbf5589d 100644
--- a/packages/web-components/.storybook/theme.js
+++ b/packages/web-components/.storybook/theme.mjs
@@ -2,7 +2,7 @@ import { create } from '@storybook/theming';
export default create({
base: 'light',
- brandTitle: 'Fluent Web Components',
+ brandTitle: 'Fluent UI\nWeb Components',
brandUrl: 'https://github.com/microsoft/fluentui',
// Toolbar default and active colors
@@ -13,20 +13,23 @@ export default create({
colorSecondary: 'deepskyblue',
// UI
- // appBg: '#0ff',
- // appContentBg: '--fill',
+ appBg: '#ffffff',
+ appContentBg: '#ffffff',
+ appBorderColor: '#e0e0e0', // use msft gray
appBorderRadius: 4,
// Typography
- // fontBase: '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
+ fontBase:
+ '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;',
fontCode: 'monospace',
// Text colors
- textColor: '#222',
- textInverseColor: 'rgba(255,255,255,0.9)',
+ textColor: '#11100f',
+ textInverseColor: '#0078d4', // use msft primary blue default
// Form colors
inputBg: 'white',
inputTextColor: 'black',
inputBorderRadius: 4,
});
+
diff --git a/packages/web-components/.storybook/tsconfig.json b/packages/web-components/.storybook/tsconfig.json
new file mode 100644
index 0000000000000..78905f4f65971
--- /dev/null
+++ b/packages/web-components/.storybook/tsconfig.json
@@ -0,0 +1,10 @@
+{
+ "extends": "../tsconfig.json",
+ "compilerOptions": {
+ "allowJs": true,
+ "checkJs": true,
+ "noEmit": true,
+ "types": ["node"]
+ },
+ "include": ["*", "../public", "../src/**/*.stories.*"]
+}
diff --git a/packages/web-components/CHANGELOG.json b/packages/web-components/CHANGELOG.json
index 5ec4f66b5f724..2fcfbcc47e4ed 100644
--- a/packages/web-components/CHANGELOG.json
+++ b/packages/web-components/CHANGELOG.json
@@ -1,6 +1,1032 @@
{
"name": "@fluentui/web-components",
"entries": [
+ {
+ "date": "Wed, 01 May 2024 04:09:09 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.15",
+ "version": "3.0.0-beta.15",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "=",
+ "package": "@fluentui/web-components",
+ "commit": "dc5cd66206e6fd01b6849fdfe9b02bcb86121aec",
+ "comment": "fix(web-components): remove all barrell exports with exception of design tokens"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Fri, 26 Apr 2024 04:07:24 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.14",
+ "version": "3.0.0-beta.14",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "13071055+chrisdholt@users.noreply.github.com",
+ "package": "@fluentui/web-components",
+ "commit": "8eb247555918987d33171c6a932cc4218d36727d",
+ "comment": "create CSS partials for named typography styles"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Thu, 25 Apr 2024 04:09:24 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.13",
+ "version": "3.0.0-beta.13",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "=",
+ "package": "@fluentui/web-components",
+ "commit": "ee42c7c3871b4f7cb97cf7868e12772d1bfe2b06",
+ "comment": "ensure buttons with long text maintain center alignment"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Tue, 23 Apr 2024 04:09:06 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.12",
+ "version": "3.0.0-beta.12",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "863023+radium-v@users.noreply.github.com",
+ "package": "@fluentui/web-components",
+ "commit": "2eab460e1fbb6dbc68008bcd5963279761c64460",
+ "comment": "Use ElementInternals for Button components"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Mon, 15 Apr 2024 04:09:34 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.11",
+ "version": "3.0.0-beta.11",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "=",
+ "package": "@fluentui/web-components",
+ "commit": "0d4cc99c6174fc0e9320cb448aa7ae136ce1fae3",
+ "comment": "fix(web-components): remove final dependencies on fast-foundation"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Tue, 09 Apr 2024 04:08:05 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.10",
+ "version": "3.0.0-beta.10",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "=",
+ "package": "@fluentui/web-components",
+ "commit": "0bdcbe7aedc829f039ed48cd9ef546709429e5fb",
+ "comment": "revert design token syntax change for DX"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Mon, 08 Apr 2024 04:08:59 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.9",
+ "version": "3.0.0-beta.9",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "=",
+ "package": "@fluentui/web-components",
+ "commit": "9ac84d348585fbbb214b18be076c566ec60f9d99",
+ "comment": "chore: setup perf benchmarking in web components"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/web-components",
+ "comment": "Bump @fluentui/tokens to v1.0.0-alpha.2",
+ "commit": "9ac84d348585fbbb214b18be076c566ec60f9d99"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Mon, 12 Feb 2024 04:08:06 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.8",
+ "version": "3.0.0-beta.8",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "jes@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "8fd063a5c1c6b7c0b77cf2c51436d564b5b1c1f0",
+ "comment": "Removes dependancy on fast-foundation classes and templates"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Fri, 09 Feb 2024 04:08:43 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.7",
+ "version": "3.0.0-beta.7",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "4909fe2c8e9fb9029b5e7fa4d5aa73d299cf089f",
+ "comment": "feat: remove JS design token implementation in favor of platform css variables"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Fri, 01 Dec 2023 04:08:50 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.6",
+ "version": "3.0.0-beta.6",
+ "comments": {
+ "none": [
+ {
+ "author": "mibaraka@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "ebe7e4837a07b1218f9f7196b5c3043c0ad4cbb3",
+ "comment": "Updating disclaimer on storybook"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Thu, 26 Oct 2023 04:16:51 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.6",
+ "version": "3.0.0-beta.6",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "brian.christopher.brady@gmail.com",
+ "package": "@fluentui/web-components",
+ "commit": "dd16c56adf42b8f2771907749d3f8fde8eb52f4e",
+ "comment": "feat(dialog): add dialog web component"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Thu, 19 Oct 2023 04:18:07 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.5",
+ "version": "3.0.0-beta.5",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "hale.rankin@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "ef39b5c4329868b9426612c188e31496b26d75e5",
+ "comment": "Updates package with Menu component sideEffect."
+ }
+ ]
+ }
+ },
+ {
+ "date": "Fri, 13 Oct 2023 04:17:27 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.4",
+ "version": "3.0.0-beta.4",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "af42938529ee2284a933a9f64db163c3bf283400",
+ "comment": "fix: update switch to use margin instead of transform for the checked state to support RTL"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Thu, 28 Sep 2023 04:18:49 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.3",
+ "version": "3.0.0-beta.3",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "brian.christopher.brady@gmail.com",
+ "package": "@fluentui/web-components",
+ "commit": "980b0d394322fd6a11ea85d57721e928ca4803a5",
+ "comment": "feat(menu): adds menu web component"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Mon, 28 Aug 2023 04:19:02 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.2",
+ "version": "3.0.0-beta.2",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "mmansour@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "9d4c07c582596b55ceea4b68677fd74dd9236ae7",
+ "comment": "Fixed pathing to types for package exports"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Fri, 25 Aug 2023 04:19:39 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-beta.1",
+ "version": "3.0.0-beta.1",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "miroslav.stastny@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "c271ab35c7160288de81b27a31627aa199a9afe3",
+ "comment": "Bump version to beta"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Wed, 23 Aug 2023 04:18:01 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.31",
+ "version": "3.0.0-alpha.31",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "913d17528272d230a1c6f72652271faaebeb1a12",
+ "comment": "feat(web-components): add explicit named exports for design tokens and package export path for theme utils"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Tue, 22 Aug 2023 04:17:13 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.30",
+ "version": "3.0.0-alpha.30",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "2f59582504dca05054a49aa2d47a483356fb6a69",
+ "comment": "feat(web-components): update core component files to use foundation export paths and update package exports to include extensions"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Mon, 21 Aug 2023 04:16:01 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.29",
+ "version": "3.0.0-alpha.29",
+ "comments": {
+ "none": [
+ {
+ "author": "miroslav.stastny@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "a6baaca2a79e39bd1ef616ddb757d7505d6b0adf",
+ "comment": "chore: Enable lint for unit tests"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Tue, 15 Aug 2023 04:16:11 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.29",
+ "version": "3.0.0-alpha.29",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "8c3c3b2fbc9cf08609ae30d5f9fd2dddfaef3b0c",
+ "comment": "fix(web-components): update latest versions of fast packages and fix unallowed attributes issue for fluent-divider"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Thu, 10 Aug 2023 04:18:05 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.28",
+ "version": "3.0.0-alpha.28",
+ "comments": {
+ "none": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "c83bfec16fd0d93b1305e5f5aec5d8a62c8f7cb7",
+ "comment": "add playwright testing to the web component package"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Wed, 09 Aug 2023 04:16:56 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.28",
+ "version": "3.0.0-alpha.28",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "a00e814aa5a1641754d4b7fb6f05c0ac2aa4e060",
+ "comment": "fix(web-components): enumerate side-effects for package export paths"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Tue, 08 Aug 2023 04:18:02 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.27",
+ "version": "3.0.0-alpha.27",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "brian.christopher.brady@gmail.com",
+ "package": "@fluentui/web-components",
+ "commit": "54df8d3a425019ac593089e57225e624247aeb2e",
+ "comment": "(accessibility): high contrast fixes"
+ },
+ {
+ "author": "ryan@ryanmerrill.net",
+ "package": "@fluentui/web-components",
+ "commit": "5e205bc242bef175275d73d3ca5c52243782f589",
+ "comment": "Fixes low contrast in dark mode for web component badge"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Mon, 07 Aug 2023 04:17:07 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.26",
+ "version": "3.0.0-alpha.26",
+ "comments": {
+ "none": [
+ {
+ "author": "miroslav.stastny@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "c41d572219c127e1c042ce847b9e867c150b230c",
+ "comment": "dummy change to trigger CI"
+ }
+ ],
+ "prerelease": [
+ {
+ "author": "miroslav.stastny@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "67cb8d06db5c7f17da4c6116729925705c0f7d3e",
+ "comment": "feat: Add support for scoped theming"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Fri, 28 Jul 2023 04:14:52 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.25",
+ "version": "3.0.0-alpha.25",
+ "comments": {
+ "none": [
+ {
+ "author": "me@levithomason.com",
+ "package": "@fluentui/web-components",
+ "commit": "b1dae68db2d16f214923fd188872d5cbe485e01a",
+ "comment": "Documentation style updates"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Wed, 19 Jul 2023 04:18:54 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.25",
+ "version": "3.0.0-alpha.25",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "ee984a5df76329a1da80fbe2cb6b20394d26eb7c",
+ "comment": "fix(web-components): check if component is connected before calling setAttribute in attribute changed callback"
+ },
+ {
+ "author": "brianbrady@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "44328d34af5ce81c8b66b87a02a6082c2e967fc5",
+ "comment": "feat(checkbox): Add checkbox web component"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Mon, 12 Jun 2023 04:17:30 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.24",
+ "version": "3.0.0-alpha.24",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "7d890d73560b1fec4e8d1d280ce5417529a0530f",
+ "comment": "export fluent design system from web-components package"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Thu, 08 Jun 2023 04:18:00 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.23",
+ "version": "3.0.0-alpha.23",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "brianbrady@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "ac7f17ec809a50b1b709e5fd66e8566b4181f08e",
+ "comment": "feat(text-input): add TextInput as a new web component"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Wed, 24 May 2023 04:19:34 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.22",
+ "version": "3.0.0-alpha.22",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "harankin@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "60b51196b1939782da61b7ff578c17fa510ef864",
+ "comment": "feat(menu-item): export MenuItemRole constants"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Mon, 15 May 2023 04:19:56 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.21",
+ "version": "3.0.0-alpha.21",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "ryan@ryanmerrill.net",
+ "package": "@fluentui/web-components",
+ "commit": "cad93648a2ce28e99935d4ab36089d770fa06a53",
+ "comment": "Fixes exports in Switch"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Mon, 08 May 2023 04:19:58 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.20",
+ "version": "3.0.0-alpha.20",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "brianbrady@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "1dddc623661d1b2667a866a1f779363d91a759e4",
+ "comment": "feat(radio): add radio and radio-group web components"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Fri, 21 Apr 2023 04:19:22 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.19",
+ "version": "3.0.0-alpha.19",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "brianbrady@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "f801e34cdc25ba01ccf3b2baa9fac1080d987e9b",
+ "comment": "feat(menu-list): Add menu-list and menu-item web components"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Thu, 20 Apr 2023 04:20:30 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.18",
+ "version": "3.0.0-alpha.18",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "harankin@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "9cd641f4d38d6889ee50afeedca54f77617cd1a5",
+ "comment": "Image component style updates"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Wed, 19 Apr 2023 04:23:30 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.17",
+ "version": "3.0.0-alpha.17",
+ "comments": {
+ "none": [
+ {
+ "author": "ryan@ryanmerrill.net",
+ "package": "@fluentui/web-components",
+ "commit": "e5ff319c5354a9f47d6f5b990441673e32998b7c",
+ "comment": "Adds Select spec"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Wed, 12 Apr 2023 04:19:35 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.17",
+ "version": "3.0.0-alpha.17",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "cc0a6678ff55f657b13b70cff02645fe3772c84e",
+ "comment": "feat(toggle-button): add toggle button web component"
+ },
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "37195a34b36538ab0cc7c765824691bab796502e",
+ "comment": "feat(compound-button): add compound button as new web component"
+ },
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "5ab8f95663fcac978d98dccc65626196679a2ae2",
+ "comment": "feat(anchor-button): add anchor button to web components"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Tue, 11 Apr 2023 04:24:57 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.16",
+ "version": "3.0.0-alpha.16",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "mibaraka@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "30b72e9804a37880b4b90c0bcd400635506f300e",
+ "comment": "Adding Tabs, Tab and Tab-Panel"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Fri, 07 Apr 2023 04:17:30 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.15",
+ "version": "3.0.0-alpha.15",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "brianbrady@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "48980fef03e94733a686deea7dc9454eba6dd8c4",
+ "comment": "feat(label): adds label as a new web component"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Thu, 06 Apr 2023 04:22:08 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.14",
+ "version": "3.0.0-alpha.14",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "mibaraka@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "55024b9a8799834f6d102445218ffd724a125913",
+ "comment": "Adding TabList, Tab, and TabPanel web components"
+ },
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "2a1f8f60205b064140fab122cced18b06177546d",
+ "comment": "feat(menu-button): add menu button as new component"
+ }
+ ],
+ "none": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "ca6e4dd7ed8476810a51384f0e44b54989cc0b66",
+ "comment": "chore(web-components): fixes the alphabetical order of package exports"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Fri, 31 Mar 2023 04:19:43 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.13",
+ "version": "3.0.0-alpha.13",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "7f5a5e507a3902a9703d5198a13cc96335c82eaa",
+ "comment": "update fast-element and fast-foundation dependencies"
+ },
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "d901fa95e8f90c1b5dabda8602a72ecb77288f0c",
+ "comment": "feat(button): add button web component"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Tue, 28 Mar 2023 04:20:01 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.12",
+ "version": "3.0.0-alpha.12",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "ryan@ryanmerrill.net",
+ "package": "@fluentui/web-components",
+ "commit": "d63779409cf8b7565b415fdac51e09cf4dbc6e08",
+ "comment": "Adds Slider as a web component"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Tue, 14 Mar 2023 04:21:22 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.11",
+ "version": "3.0.0-alpha.11",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "6e51be008ee479451431421eaf2e3e63744b6d5c",
+ "comment": "update FAST dependencies to latest package versions"
+ },
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "fc86569d1d96d6deff9188fa0702d173150dd5dd",
+ "comment": "Adds css containment to implemented web components"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Thu, 09 Mar 2023 04:19:45 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.10",
+ "version": "3.0.0-alpha.10",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "jes@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "443b8d8e35429ffbabda35cbe7d4704adaaf8ab4",
+ "comment": "fix: [text] block breaks the style attribute"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Tue, 07 Mar 2023 04:24:51 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.9",
+ "version": "3.0.0-alpha.9",
+ "comments": {
+ "none": [
+ {
+ "author": "ryan@ryanmerrill.net",
+ "package": "@fluentui/web-components",
+ "commit": "07c70c3cb2253817e70e9b1c4615aee7e69a1816",
+ "comment": "Adds SliderLabel spec and folder"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Fri, 03 Mar 2023 04:23:00 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.9",
+ "version": "3.0.0-alpha.9",
+ "comments": {
+ "none": [
+ {
+ "author": "brianbrady@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "9ae245574502f15ed372dc37b0374883f45ccdf2",
+ "comment": "adds radio and radio group spec"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Wed, 01 Mar 2023 04:20:20 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.9",
+ "version": "3.0.0-alpha.9",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "ryan@ryanmerrill.net",
+ "package": "@fluentui/web-components",
+ "commit": "d87331975f16754f9debb4e11c6dd4f2b516f130",
+ "comment": "Redo of PR of Slider spec after merge error"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Tue, 28 Feb 2023 04:25:15 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.8",
+ "version": "3.0.0-alpha.8",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "brianbrady@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "c0d4b0def168396e9139672146bbadbe408ea4d4",
+ "comment": "updates wc3 accordion and accordion item docs"
+ }
+ ],
+ "none": [
+ {
+ "author": "miroslav.stastny@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "237267b5ad816d090011c93f2922476c1abfe87f",
+ "comment": "chore: Enable Typescript strict mode"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Mon, 27 Feb 2023 04:27:02 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.7",
+ "version": "3.0.0-alpha.7",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "4309a0d5afbe56dab0b1204922a37873fe832c8b",
+ "comment": "feat(avatar): add Avatar web component"
+ },
+ {
+ "author": "harankin@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "7d9573d73b4be010c2b07540fa0c23c27aba2821",
+ "comment": "feat(divider): Add divider web component"
+ },
+ {
+ "author": "harankin@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "e793ad8a7f7ae0239a808439d121cf012dd414e5",
+ "comment": "feat(image): Add image web component"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Fri, 24 Feb 2023 04:20:32 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.6",
+ "version": "3.0.0-alpha.6",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "brianbrady@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "2de60aec984eb2802da76c6c67849da358c0db49",
+ "comment": "feat(switch): Add switch web component"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Wed, 22 Feb 2023 04:22:43 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.5",
+ "version": "3.0.0-alpha.5",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "brianbrady@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "1ad2597f744bf7c3e2eada7720eea793fcee660e",
+ "comment": "feat(accordion): Add accordion web component"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Tue, 21 Feb 2023 04:21:36 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.4",
+ "version": "3.0.0-alpha.4",
+ "comments": {
+ "none": [
+ {
+ "author": "miroslav.stastny@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "57f2ea7f8389f1409fba6fb0697708ddf8fb05d9",
+ "comment": "docs: Add landing page"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Fri, 17 Feb 2023 04:19:53 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.4",
+ "version": "3.0.0-alpha.4",
+ "comments": {
+ "none": [
+ {
+ "author": "jslone@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "b79b33d10cbd6015531fa943e0e6dbe7f84b9b42",
+ "comment": "chore: run manually to bump wc to fix failed CI release"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Thu, 16 Feb 2023 16:51:48 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.4",
+ "version": "3.0.0-alpha.4",
+ "comments": {
+ "none": [
+ {
+ "author": "martinhochel@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "ae03f3eec389aca7e15fde295868aacd51eb1822",
+ "comment": "chore(web-components): introduce ts-solution configs and monorepo setup/DX"
+ }
+ ],
+ "prerelease": [
+ {
+ "author": "martinhochel@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "226b7af089cea03d27ec722cabc73d018f263fd1",
+ "comment": "fix(web-components): dont ship non production assets to npm registry"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Wed, 15 Feb 2023 04:24:51 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.3",
+ "version": "3.0.0-alpha.3",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "ryan@ryanmerrill.net",
+ "package": "@fluentui/web-components",
+ "commit": "4d959c01c7b282136e669b7c0ac0d038b9deeafe",
+ "comment": "Adds Spinner as a web component"
+ },
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "09b44a73d3d225044af4e114d210176f7f38001a",
+ "comment": "update fast element and foundation versions"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Mon, 13 Feb 2023 04:21:38 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.2",
+ "version": "3.0.0-alpha.2",
+ "comments": {
+ "none": [
+ {
+ "author": "martinhochel@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "5745de0ab6ab860f905c33d4430b857b8a72f27f",
+ "comment": "style: fix formatting in files that were silently passed previously"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Mon, 06 Feb 2023 04:20:29 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.2",
+ "version": "3.0.0-alpha.2",
+ "comments": {
+ "none": [
+ {
+ "author": "martinhochel@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "dcf643c51586968fa700b83eb1982866e6cfe946",
+ "comment": "ci: setup web-components docsite CI/CD"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Thu, 26 Jan 2023 04:18:59 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.2",
+ "version": "3.0.0-alpha.2",
+ "comments": {
+ "none": [
+ {
+ "author": "martinhochel@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "1949a66866dca51e82530efdedbb3d455880d614",
+ "comment": "chore(web-components): run manually bump to fix failed CI release"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Wed, 25 Jan 2023 17:42:30 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.2",
+ "version": "3.0.0-alpha.2",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "miroslav.stastny@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "68de783e80c71173a717c758680a63bf9c7e8c78",
+ "comment": "feat: export theme"
+ }
+ ],
+ "none": [
+ {
+ "author": "martinhochel@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "c5b3031ada2f788ef0a36185024f4c10c16143d6",
+ "comment": "chore: run manually bump to fix failed CI release"
+ }
+ ]
+ }
+ },
+ {
+ "date": "Wed, 25 Jan 2023 14:49:08 GMT",
+ "tag": "@fluentui/web-components_v3.0.0-alpha.1",
+ "version": "3.0.0-alpha.1",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "ryan@ryanmerrill.net",
+ "package": "@fluentui/web-components",
+ "commit": "1322f3f962e8a850fe104cc2ba9b12b2bc2f2842",
+ "comment": "add progressbar as new component"
+ },
+ {
+ "author": "miroslav.stastny@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "6de62a46eafd74b968ec913901729b3f7284dc7a",
+ "comment": "Add initial theme"
+ },
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "eead74fee07339f998615fe34d8f847d0f63af6e",
+ "comment": "add badge and counter badge as new components"
+ },
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "5e3ba35835c0a5487b574ea58a51cccd67b5fa8c",
+ "comment": "add text as a new component"
+ }
+ ],
+ "none": [
+ {
+ "author": "martinhochel@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "7c94cbd46051ea57bba4e8885c86e89967bb412c",
+ "comment": "chore: setup typescript 4.7 for web-components package"
+ },
+ {
+ "author": "miroslav.stastny@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "cd42ab4f8aa11c7ac134538193dc8dc4a01ca0f3",
+ "comment": "Reset web-components for v3 development"
+ },
+ {
+ "author": "martinhochel@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "7f15428e8fb2c3cfbfe8e555978bfa66f74f8fd8",
+ "comment": "chore: bump web-components to 3.0.0-alpha.0"
+ },
+ {
+ "author": "martinhochel@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "9b29aada3dba8f929530ddc1b4b64e869d5fffd4",
+ "comment": "chore(web-components): resolve invalid webpack test regex on windows"
+ },
+ {
+ "author": "chhol@microsoft.com",
+ "package": "@fluentui/web-components",
+ "commit": "be3d30fcbe222be34b02a554e948d14bb2d730df",
+ "comment": "update clean file to .cjs and ensure rimraf is in dependency tree"
+ }
+ ]
+ }
+ },
{
"date": "Wed, 10 Apr 2024 07:28:55 GMT",
"tag": "@fluentui/web-components_v2.6.1",
diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md
index aed229c328106..fab7f221e8347 100644
--- a/packages/web-components/CHANGELOG.md
+++ b/packages/web-components/CHANGELOG.md
@@ -1,9 +1,437 @@
# Change Log - @fluentui/web-components
-This log was last generated on Wed, 10 Apr 2024 07:28:55 GMT and should not be manually modified.
+This log was last generated on Wed, 01 May 2024 04:09:09 GMT and should not be manually modified.
+## [3.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.15)
+
+Wed, 01 May 2024 04:09:09 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.14..@fluentui/web-components_v3.0.0-beta.15)
+
+### Changes
+
+- fix(web-components): remove all barrell exports with exception of design tokens ([PR #31069](https://github.com/microsoft/fluentui/pull/31069) by =)
+
+## [3.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.14)
+
+Fri, 26 Apr 2024 04:07:24 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.13..@fluentui/web-components_v3.0.0-beta.14)
+
+### Changes
+
+- create CSS partials for named typography styles ([PR #31164](https://github.com/microsoft/fluentui/pull/31164) by 13071055+chrisdholt@users.noreply.github.com)
+
+## [3.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.13)
+
+Thu, 25 Apr 2024 04:09:24 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.12..@fluentui/web-components_v3.0.0-beta.13)
+
+### Changes
+
+- ensure buttons with long text maintain center alignment ([PR #31179](https://github.com/microsoft/fluentui/pull/31179) by =)
+
+## [3.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.12)
+
+Tue, 23 Apr 2024 04:09:06 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.11..@fluentui/web-components_v3.0.0-beta.12)
+
+### Changes
+
+- Use ElementInternals for Button components ([PR #30999](https://github.com/microsoft/fluentui/pull/30999) by 863023+radium-v@users.noreply.github.com)
+
+## [3.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.11)
+
+Mon, 15 Apr 2024 04:09:34 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.10..@fluentui/web-components_v3.0.0-beta.11)
+
+### Changes
+
+- fix(web-components): remove final dependencies on fast-foundation ([PR #31009](https://github.com/microsoft/fluentui/pull/31009) by =)
+
+## [3.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.10)
+
+Tue, 09 Apr 2024 04:08:05 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.9..@fluentui/web-components_v3.0.0-beta.10)
+
+### Changes
+
+- revert design token syntax change for DX ([PR #30819](https://github.com/microsoft/fluentui/pull/30819) by =)
+
+## [3.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.9)
+
+Mon, 08 Apr 2024 04:08:59 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.8..@fluentui/web-components_v3.0.0-beta.9)
+
+### Changes
+
+- chore: setup perf benchmarking in web components ([PR #30972](https://github.com/microsoft/fluentui/pull/30972) by =)
+- Bump @fluentui/tokens to v1.0.0-alpha.2 ([PR #30972](https://github.com/microsoft/fluentui/pull/30972) by beachball)
+
+## [3.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.8)
+
+Mon, 12 Feb 2024 04:08:06 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.7..@fluentui/web-components_v3.0.0-beta.8)
+
+### Changes
+
+- Removes dependancy on fast-foundation classes and templates ([PR #30090](https://github.com/microsoft/fluentui/pull/30090) by jes@microsoft.com)
+
+## [3.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.7)
+
+Fri, 09 Feb 2024 04:08:43 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.6..@fluentui/web-components_v3.0.0-beta.7)
+
+### Changes
+
+- feat: remove JS design token implementation in favor of platform css variables ([PR #30002](https://github.com/microsoft/fluentui/pull/30002) by chhol@microsoft.com)
+
+## [3.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.6)
+
+Thu, 26 Oct 2023 04:16:51 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.5..@fluentui/web-components_v3.0.0-beta.6)
+
+### Changes
+
+- feat(dialog): add dialog web component ([PR #28569](https://github.com/microsoft/fluentui/pull/28569) by brian.christopher.brady@gmail.com)
+
+## [3.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.5)
+
+Thu, 19 Oct 2023 04:18:07 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.4..@fluentui/web-components_v3.0.0-beta.5)
+
+### Changes
+
+- Updates package with Menu component sideEffect. ([PR #29581](https://github.com/microsoft/fluentui/pull/29581) by hale.rankin@microsoft.com)
+
+## [3.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.4)
+
+Fri, 13 Oct 2023 04:17:27 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.3..@fluentui/web-components_v3.0.0-beta.4)
+
+### Changes
+
+- fix: update switch to use margin instead of transform for the checked state to support RTL ([PR #29505](https://github.com/microsoft/fluentui/pull/29505) by chhol@microsoft.com)
+
+## [3.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.3)
+
+Thu, 28 Sep 2023 04:18:49 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.2..@fluentui/web-components_v3.0.0-beta.3)
+
+### Changes
+
+- feat(menu): adds menu web component ([PR #27906](https://github.com/microsoft/fluentui/pull/27906) by brian.christopher.brady@gmail.com)
+
+## [3.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.2)
+
+Mon, 28 Aug 2023 04:19:02 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.1..@fluentui/web-components_v3.0.0-beta.2)
+
+### Changes
+
+- Fixed pathing to types for package exports ([PR #28986](https://github.com/microsoft/fluentui/pull/28986) by mmansour@microsoft.com)
+
+## [3.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.1)
+
+Fri, 25 Aug 2023 04:19:39 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.31..@fluentui/web-components_v3.0.0-beta.1)
+
+### Changes
+
+- Bump version to beta ([PR #28976](https://github.com/microsoft/fluentui/pull/28976) by miroslav.stastny@microsoft.com)
+
+## [3.0.0-alpha.31](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.31)
+
+Wed, 23 Aug 2023 04:18:01 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.30..@fluentui/web-components_v3.0.0-alpha.31)
+
+### Changes
+
+- feat(web-components): add explicit named exports for design tokens and package export path for theme utils ([PR #28952](https://github.com/microsoft/fluentui/pull/28952) by chhol@microsoft.com)
+
+## [3.0.0-alpha.30](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.30)
+
+Tue, 22 Aug 2023 04:17:13 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.29..@fluentui/web-components_v3.0.0-alpha.30)
+
+### Changes
+
+- feat(web-components): update core component files to use foundation export paths and update package exports to include extensions ([PR #28912](https://github.com/microsoft/fluentui/pull/28912) by chhol@microsoft.com)
+
+## [3.0.0-alpha.29](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.29)
+
+Tue, 15 Aug 2023 04:16:11 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.28..@fluentui/web-components_v3.0.0-alpha.29)
+
+### Changes
+
+- fix(web-components): update latest versions of fast packages and fix unallowed attributes issue for fluent-divider ([PR #28837](https://github.com/microsoft/fluentui/pull/28837) by chhol@microsoft.com)
+
+## [3.0.0-alpha.28](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.28)
+
+Wed, 09 Aug 2023 04:16:56 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.27..@fluentui/web-components_v3.0.0-alpha.28)
+
+### Changes
+
+- fix(web-components): enumerate side-effects for package export paths ([PR #28748](https://github.com/microsoft/fluentui/pull/28748) by chhol@microsoft.com)
+
+## [3.0.0-alpha.27](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.27)
+
+Tue, 08 Aug 2023 04:18:02 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.26..@fluentui/web-components_v3.0.0-alpha.27)
+
+### Changes
+
+- (accessibility): high contrast fixes ([PR #28717](https://github.com/microsoft/fluentui/pull/28717) by brian.christopher.brady@gmail.com)
+- Fixes low contrast in dark mode for web component badge ([PR #28766](https://github.com/microsoft/fluentui/pull/28766) by ryan@ryanmerrill.net)
+
+## [3.0.0-alpha.26](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.26)
+
+Mon, 07 Aug 2023 04:17:07 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.25..@fluentui/web-components_v3.0.0-alpha.26)
+
+### Changes
+
+- feat: Add support for scoped theming ([PR #28441](https://github.com/microsoft/fluentui/pull/28441) by miroslav.stastny@microsoft.com)
+
+## [3.0.0-alpha.25](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.25)
+
+Wed, 19 Jul 2023 04:18:54 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.24..@fluentui/web-components_v3.0.0-alpha.25)
+
+### Changes
+
+- fix(web-components): check if component is connected before calling setAttribute in attribute changed callback ([PR #28500](https://github.com/microsoft/fluentui/pull/28500) by chhol@microsoft.com)
+- feat(checkbox): Add checkbox web component ([PR #27450](https://github.com/microsoft/fluentui/pull/27450) by brianbrady@microsoft.com)
+
+## [3.0.0-alpha.24](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.24)
+
+Mon, 12 Jun 2023 04:17:30 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.23..@fluentui/web-components_v3.0.0-alpha.24)
+
+### Changes
+
+- export fluent design system from web-components package ([PR #27905](https://github.com/microsoft/fluentui/pull/27905) by chhol@microsoft.com)
+
+## [3.0.0-alpha.23](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.23)
+
+Thu, 08 Jun 2023 04:18:00 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.22..@fluentui/web-components_v3.0.0-alpha.23)
+
+### Changes
+
+- feat(text-input): add TextInput as a new web component ([PR #27348](https://github.com/microsoft/fluentui/pull/27348) by brianbrady@microsoft.com)
+
+## [3.0.0-alpha.22](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.22)
+
+Wed, 24 May 2023 04:19:34 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.21..@fluentui/web-components_v3.0.0-alpha.22)
+
+### Changes
+
+- feat(menu-item): export MenuItemRole constants ([PR #27941](https://github.com/microsoft/fluentui/pull/27941) by harankin@microsoft.com)
+
+## [3.0.0-alpha.21](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.21)
+
+Mon, 15 May 2023 04:19:56 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.20..@fluentui/web-components_v3.0.0-alpha.21)
+
+### Changes
+
+- Fixes exports in Switch ([PR #27821](https://github.com/microsoft/fluentui/pull/27821) by ryan@ryanmerrill.net)
+
+## [3.0.0-alpha.20](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.20)
+
+Mon, 08 May 2023 04:19:58 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.19..@fluentui/web-components_v3.0.0-alpha.20)
+
+### Changes
+
+- feat(radio): add radio and radio-group web components ([PR #27113](https://github.com/microsoft/fluentui/pull/27113) by brianbrady@microsoft.com)
+
+## [3.0.0-alpha.19](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.19)
+
+Fri, 21 Apr 2023 04:19:22 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.18..@fluentui/web-components_v3.0.0-alpha.19)
+
+### Changes
+
+- feat(menu-list): Add menu-list and menu-item web components ([PR #26765](https://github.com/microsoft/fluentui/pull/26765) by brianbrady@microsoft.com)
+
+## [3.0.0-alpha.18](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.18)
+
+Thu, 20 Apr 2023 04:20:30 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.17..@fluentui/web-components_v3.0.0-alpha.18)
+
+### Changes
+
+- Image component style updates ([PR #27567](https://github.com/microsoft/fluentui/pull/27567) by harankin@microsoft.com)
+
+## [3.0.0-alpha.17](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.17)
+
+Wed, 12 Apr 2023 04:19:35 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.16..@fluentui/web-components_v3.0.0-alpha.17)
+
+### Changes
+
+- feat(toggle-button): add toggle button web component ([PR #27405](https://github.com/microsoft/fluentui/pull/27405) by chhol@microsoft.com)
+- feat(compound-button): add compound button as new web component ([PR #27407](https://github.com/microsoft/fluentui/pull/27407) by chhol@microsoft.com)
+- feat(anchor-button): add anchor button to web components ([PR #27395](https://github.com/microsoft/fluentui/pull/27395) by chhol@microsoft.com)
+
+## [3.0.0-alpha.16](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.16)
+
+Tue, 11 Apr 2023 04:24:57 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.15..@fluentui/web-components_v3.0.0-alpha.16)
+
+### Changes
+
+- Adding Tabs, Tab and Tab-Panel ([PR #27505](https://github.com/microsoft/fluentui/pull/27505) by mibaraka@microsoft.com)
+
+## [3.0.0-alpha.15](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.15)
+
+Fri, 07 Apr 2023 04:17:30 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.14..@fluentui/web-components_v3.0.0-alpha.15)
+
+### Changes
+
+- feat(label): adds label as a new web component ([PR #27344](https://github.com/microsoft/fluentui/pull/27344) by brianbrady@microsoft.com)
+
+## [3.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.14)
+
+Thu, 06 Apr 2023 04:22:08 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.13..@fluentui/web-components_v3.0.0-alpha.14)
+
+### Changes
+
+- Adding TabList, Tab, and TabPanel web components ([PR #27167](https://github.com/microsoft/fluentui/pull/27167) by mibaraka@microsoft.com)
+- feat(menu-button): add menu button as new component ([PR #27396](https://github.com/microsoft/fluentui/pull/27396) by chhol@microsoft.com)
+
+## [3.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.13)
+
+Fri, 31 Mar 2023 04:19:43 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.12..@fluentui/web-components_v3.0.0-alpha.13)
+
+### Changes
+
+- update fast-element and fast-foundation dependencies ([PR #27392](https://github.com/microsoft/fluentui/pull/27392) by chhol@microsoft.com)
+- feat(button): add button web component ([PR #27278](https://github.com/microsoft/fluentui/pull/27278) by chhol@microsoft.com)
+
+## [3.0.0-alpha.12](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.12)
+
+Tue, 28 Mar 2023 04:20:01 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.11..@fluentui/web-components_v3.0.0-alpha.12)
+
+### Changes
+
+- Adds Slider as a web component ([PR #27165](https://github.com/microsoft/fluentui/pull/27165) by ryan@ryanmerrill.net)
+
+## [3.0.0-alpha.11](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.11)
+
+Tue, 14 Mar 2023 04:21:22 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.10..@fluentui/web-components_v3.0.0-alpha.11)
+
+### Changes
+
+- update FAST dependencies to latest package versions ([PR #27187](https://github.com/microsoft/fluentui/pull/27187) by chhol@microsoft.com)
+- Adds css containment to implemented web components ([PR #27190](https://github.com/microsoft/fluentui/pull/27190) by chhol@microsoft.com)
+
+## [3.0.0-alpha.10](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.10)
+
+Thu, 09 Mar 2023 04:19:45 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.9..@fluentui/web-components_v3.0.0-alpha.10)
+
+### Changes
+
+- fix: [text] block breaks the style attribute ([PR #27129](https://github.com/microsoft/fluentui/pull/27129) by jes@microsoft.com)
+
+## [3.0.0-alpha.9](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.9)
+
+Wed, 01 Mar 2023 04:20:20 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.8..@fluentui/web-components_v3.0.0-alpha.9)
+
+### Changes
+
+- Redo of PR of Slider spec after merge error ([PR #26981](https://github.com/microsoft/fluentui/pull/26981) by ryan@ryanmerrill.net)
+
+## [3.0.0-alpha.8](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.8)
+
+Tue, 28 Feb 2023 04:25:15 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.7..@fluentui/web-components_v3.0.0-alpha.8)
+
+### Changes
+
+- updates wc3 accordion and accordion item docs ([PR #26938](https://github.com/microsoft/fluentui/pull/26938) by brianbrady@microsoft.com)
+
+## [3.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.7)
+
+Mon, 27 Feb 2023 04:27:02 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.6..@fluentui/web-components_v3.0.0-alpha.7)
+
+### Changes
+
+- feat(avatar): add Avatar web component ([PR #26729](https://github.com/microsoft/fluentui/pull/26729) by chhol@microsoft.com)
+- feat(divider): Add divider web component ([PR #26901](https://github.com/microsoft/fluentui/pull/26901) by harankin@microsoft.com)
+- feat(image): Add image web component ([PR #26936](https://github.com/microsoft/fluentui/pull/26936) by harankin@microsoft.com)
+
+## [3.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.6)
+
+Fri, 24 Feb 2023 04:20:32 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.5..@fluentui/web-components_v3.0.0-alpha.6)
+
+### Changes
+
+- feat(switch): Add switch web component ([PR #26517](https://github.com/microsoft/fluentui/pull/26517) by brianbrady@microsoft.com)
+
+## [3.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.5)
+
+Wed, 22 Feb 2023 04:22:43 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.4..@fluentui/web-components_v3.0.0-alpha.5)
+
+### Changes
+
+- feat(accordion): Add accordion web component ([PR #26547](https://github.com/microsoft/fluentui/pull/26547) by brianbrady@microsoft.com)
+
+## [3.0.0-alpha.4](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.4)
+
+Thu, 16 Feb 2023 16:51:48 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.3..@fluentui/web-components_v3.0.0-alpha.4)
+
+### Changes
+
+- fix(web-components): dont ship non production assets to npm registry ([PR #26854](https://github.com/microsoft/fluentui/pull/26854) by martinhochel@microsoft.com)
+
+## [3.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.3)
+
+Wed, 15 Feb 2023 04:24:51 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.2..@fluentui/web-components_v3.0.0-alpha.3)
+
+### Changes
+
+- Adds Spinner as a web component ([PR #26392](https://github.com/microsoft/fluentui/pull/26392) by ryan@ryanmerrill.net)
+- update fast element and foundation versions ([PR #26844](https://github.com/microsoft/fluentui/pull/26844) by chhol@microsoft.com)
+
+## [3.0.0-alpha.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.2)
+
+Wed, 25 Jan 2023 17:42:30 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.1..@fluentui/web-components_v3.0.0-alpha.2)
+
+### Changes
+
+- feat: export theme ([PR #26500](https://github.com/microsoft/fluentui/pull/26500) by miroslav.stastny@microsoft.com)
+
+## [3.0.0-alpha.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.1)
+
+Wed, 25 Jan 2023 14:49:08 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.8..@fluentui/web-components_v3.0.0-alpha.1)
+
+### Changes
+
+- add progressbar as new component ([PR #26329](https://github.com/microsoft/fluentui/pull/26329) by ryan@ryanmerrill.net)
+- Add initial theme ([PR #25660](https://github.com/microsoft/fluentui/pull/25660) by miroslav.stastny@microsoft.com)
+- add badge and counter badge as new components ([PR #26357](https://github.com/microsoft/fluentui/pull/26357) by chhol@microsoft.com)
+- add text as a new component ([PR #26090](https://github.com/microsoft/fluentui/pull/26090) by chhol@microsoft.com)
+
## [2.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.6.1)
Wed, 10 Apr 2024 07:28:55 GMT
diff --git a/packages/web-components/README.md b/packages/web-components/README.md
index fb89d85fb778c..c38c40c5b02c1 100644
--- a/packages/web-components/README.md
+++ b/packages/web-components/README.md
@@ -55,3 +55,7 @@ Storybook will watch modules for changes and hot-reload the module when necessar
`Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry`
This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.
+
+## Testing
+
+When testing locally, start the dev server and in a separate terminal window, run `yarn test:dev` within the web-components folder.
diff --git a/packages/web-components/api-extractor.json b/packages/web-components/api-extractor.json
index be1ce05429583..d73335a50e28e 100644
--- a/packages/web-components/api-extractor.json
+++ b/packages/web-components/api-extractor.json
@@ -16,5 +16,8 @@
"dtsRollup": {
"enabled": true
+ },
+ "compiler": {
+ "tsconfigFilePath": "./tsconfig.api-extractor.json"
}
}
diff --git a/packages/web-components/build/clean.js b/packages/web-components/build/clean.js
deleted file mode 100644
index 75af0dc75b5a8..0000000000000
--- a/packages/web-components/build/clean.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Utility for cleaning directories.
- * Usage: node build/clean.js %path%
- */
-const path = require('path');
-const rimraf = require('rimraf');
-const argv = require('yargs').argv;
-
-/**
- * All paths passed to the clean script
- */
-const paths = argv._;
-
-/**
- * Function to remove a given path
- */
-function cleanPath(cleanPath) {
- const removePath = path.resolve(process.cwd(), cleanPath);
- rimraf(removePath, () => {
- console.log(removePath, 'cleaned');
- });
-}
-
-/**
- * Clean all paths
- */
-if (Array.isArray(paths)) {
- paths.forEach(cleanPath);
-}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index 8609a999c7d84..39dce2abc5cc9 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -4,1730 +4,3038 @@
```ts
-import { Accordion } from '@microsoft/fast-foundation';
-import { AccordionItem } from '@microsoft/fast-foundation';
-import { AccordionItemOptions } from '@microsoft/fast-foundation';
-import { Anchor as Anchor_2 } from '@microsoft/fast-foundation';
-import { AnchoredRegion } from '@microsoft/fast-foundation';
-import { Badge as Badge_2 } from '@microsoft/fast-foundation';
-import { BaseProgress } from '@microsoft/fast-foundation';
-import { Behavior } from '@microsoft/fast-element';
-import { Breadcrumb } from '@microsoft/fast-foundation';
-import { BreadcrumbItem } from '@microsoft/fast-foundation';
-import { BreadcrumbItemOptions } from '@microsoft/fast-foundation';
-import { Button as Button_2 } from '@microsoft/fast-foundation';
-import { CalendarOptions } from '@microsoft/fast-foundation';
-import { Card as Card_2 } from '@microsoft/fast-foundation';
-import { CheckboxOptions } from '@microsoft/fast-foundation';
-import { Combobox as Combobox_2 } from '@microsoft/fast-foundation';
-import { ComboboxOptions } from '@microsoft/fast-foundation';
-import { Constructable } from '@microsoft/fast-element';
-import type { Container } from '@microsoft/fast-foundation';
-import { CSSDesignToken } from '@microsoft/fast-foundation';
+import type { Constructable } from '@microsoft/fast-element';
import { CSSDirective } from '@microsoft/fast-element';
-import { DataGrid } from '@microsoft/fast-foundation';
-import { DataGridCell } from '@microsoft/fast-foundation';
-import { DataGridRow } from '@microsoft/fast-foundation';
-import { DesignSystem } from '@microsoft/fast-foundation';
-import { DesignToken } from '@microsoft/fast-foundation';
-import { Dialog } from '@microsoft/fast-foundation';
import { Direction } from '@microsoft/fast-web-utilities';
-import { Divider } from '@microsoft/fast-foundation';
-import { ElementDefinitionContext } from '@microsoft/fast-foundation';
import { ElementStyles } from '@microsoft/fast-element';
+import { ElementViewTemplate } from '@microsoft/fast-element';
import { FASTElement } from '@microsoft/fast-element';
-import { Flipper } from '@microsoft/fast-foundation';
-import { FlipperOptions } from '@microsoft/fast-foundation';
-import { FoundationElement } from '@microsoft/fast-foundation';
-import { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { FoundationElementRegistry } from '@microsoft/fast-foundation';
-import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation';
-import { HorizontalScrollOptions } from '@microsoft/fast-foundation';
-import { Listbox as Listbox_2 } from '@microsoft/fast-foundation';
-import { ListboxOption } from '@microsoft/fast-foundation';
-import { Menu as Menu_2 } from '@microsoft/fast-foundation';
-import { MenuItem } from '@microsoft/fast-foundation';
-import { MenuItemOptions } from '@microsoft/fast-foundation';
-import { NumberField as NumberField_2 } from '@microsoft/fast-foundation';
-import { NumberFieldOptions } from '@microsoft/fast-foundation';
-import { OverrideFoundationElementDefinition } from '@microsoft/fast-foundation';
-import { ProgressOptions } from '@microsoft/fast-foundation';
-import { ProgressRingOptions } from '@microsoft/fast-foundation';
-import { Radio } from '@microsoft/fast-foundation';
-import { RadioGroup } from '@microsoft/fast-foundation';
-import { RadioOptions } from '@microsoft/fast-foundation';
-import { Search as Search_2 } from '@microsoft/fast-foundation';
-import { SearchOptions } from '@microsoft/fast-foundation';
-import { Select as Select_2 } from '@microsoft/fast-foundation';
-import { SelectOptions } from '@microsoft/fast-foundation';
-import { Skeleton } from '@microsoft/fast-foundation';
-import { Slider } from '@microsoft/fast-foundation';
-import { SliderLabel } from '@microsoft/fast-foundation';
-import { SliderOptions } from '@microsoft/fast-foundation';
-import { Switch } from '@microsoft/fast-foundation';
-import { SwitchOptions } from '@microsoft/fast-foundation';
-import { Tab } from '@microsoft/fast-foundation';
-import { TabPanel } from '@microsoft/fast-foundation';
-import { Tabs } from '@microsoft/fast-foundation';
-import { TextArea as TextArea_2 } from '@microsoft/fast-foundation';
-import { TextField as TextField_2 } from '@microsoft/fast-foundation';
-import { Toolbar as Toolbar_2 } from '@microsoft/fast-foundation';
-import { Tooltip as Tooltip_2 } from '@microsoft/fast-foundation';
-import { TreeItem } from '@microsoft/fast-foundation';
-import { TreeItemOptions } from '@microsoft/fast-foundation';
-import { TreeView } from '@microsoft/fast-foundation';
-import { ViewTemplate } from '@microsoft/fast-element';
-
-// @public (undocumented)
-export const accentBaseColor: CSSDesignToken;
-
-// Warning: (ae-internal-missing-underscore) The name "AccentButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal (undocumented)
-export const AccentButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
-
-// @public (undocumented)
-export const accentFillActive: CSSDesignToken;
+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';
+import type { Theme } from '@fluentui/tokens';
-// @public (undocumented)
-export const accentFillActiveDelta: DesignToken;
+// @public
+export class Accordion extends FASTElement {
+ // (undocumented)
+ protected accordionItems: Element[];
+ expandmode: AccordionExpandMode;
+ // (undocumented)
+ expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void;
+ // @internal (undocumented)
+ handleChange(source: any, propertyName: string): void;
+ // @internal (undocumented)
+ slottedAccordionItems: HTMLElement[];
+ // @internal (undocumented)
+ slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
+}
// @public (undocumented)
-export const accentFillFocus: CSSDesignToken;
+export const accordionDefinition: FASTElementDefinition;
-// @public (undocumented)
-export const accentFillFocusDelta: DesignToken;
+// @public
+export const AccordionExpandMode: {
+ readonly single: "single";
+ readonly multi: "multi";
+};
-// @public (undocumented)
-export const accentFillHover: CSSDesignToken;
+// Warning: (ae-forgotten-export) The symbol "ValuesOf" needs to be exported by the entry point index.d.ts
+//
+// @public
+export type AccordionExpandMode = ValuesOf;
-// @public (undocumented)
-export const accentFillHoverDelta: DesignToken;
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AccordionItem" because one of its declarations is marked as @internal
+//
+// @public
+export class AccordionItem extends FASTElement {
+ block: boolean;
+ // @internal (undocumented)
+ clickHandler: (e: MouseEvent) => void;
+ disabled: boolean;
+ // @internal (undocumented)
+ expandbutton: HTMLElement;
+ expanded: boolean;
+ expandIconPosition?: AccordionItemExpandIconPosition;
+ headinglevel: 1 | 2 | 3 | 4 | 5 | 6;
+ id: string;
+ size?: AccordionItemSize;
+}
-// @public (undocumented)
-export const accentFillRecipe: DesignToken;
+// Warning: (ae-forgotten-export) The symbol "StartEnd" needs to be exported by the entry point index.d.ts
+//
+// @internal
+export interface AccordionItem extends StartEnd {
+}
// @public (undocumented)
-export const accentFillRest: CSSDesignToken;
+export const accordionItemDefinition: FASTElementDefinition;
-// @public (undocumented)
-export const accentFillRestDelta: DesignToken;
+// @public
+export const AccordionItemExpandIconPosition: {
+ readonly start: "start";
+ readonly end: "end";
+};
-// @public (undocumented)
-export const accentForegroundActive: CSSDesignToken;
+// @public
+export type AccordionItemExpandIconPosition = ValuesOf;
-// @public (undocumented)
-export const accentForegroundActiveDelta: DesignToken;
+// Warning: (ae-forgotten-export) The symbol "StartEndOptions" needs to be exported by the entry point index.d.ts
+//
+// @public
+export type AccordionItemOptions = StartEndOptions & {
+ expandedIcon?: StaticallyComposableHTML;
+ collapsedIcon?: StaticallyComposableHTML;
+};
-// @public @deprecated (undocumented)
-export const accentForegroundCut: CSSDesignToken;
+// @public
+export const AccordionItemSize: {
+ readonly small: "small";
+ readonly medium: "medium";
+ readonly large: "large";
+ readonly extraLarge: "extra-large";
+};
-// @public @deprecated (undocumented)
-export const accentForegroundCutLarge: CSSDesignToken;
+// @public
+export type AccordionItemSize = ValuesOf;
// @public (undocumented)
-export const accentForegroundFocus: CSSDesignToken;
+export const accordionItemStyles: ElementStyles;
-// @public (undocumented)
-export const accentForegroundFocusDelta: DesignToken;
+// @public
+export const accordionItemTemplate: ElementViewTemplate;
// @public (undocumented)
-export const accentForegroundHover: CSSDesignToken;
+export const accordionStyles: ElementStyles;
// @public (undocumented)
-export const accentForegroundHoverDelta: DesignToken;
+export const accordionTemplate: ElementViewTemplate;
-// @public (undocumented)
-export const accentForegroundRecipe: DesignToken;
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AnchorButton" because one of its declarations is marked as @internal
+//
+// @public
+export class AnchorButton extends FASTElement {
+ appearance?: AnchorButtonAppearance | undefined;
+ // (undocumented)
+ connectedCallback(): void;
+ control: HTMLAnchorElement;
+ // @internal
+ defaultSlottedContent: HTMLElement[];
+ disabled?: boolean;
+ // (undocumented)
+ protected disabledChanged(prev: boolean, next: boolean): void;
+ disabledFocusable?: boolean;
+ // (undocumented)
+ protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+ // (undocumented)
+ disconnectedCallback(): void;
+ download: string;
+ href: string;
+ hreflang: string;
+ iconOnly: boolean;
+ ping: string;
+ referrerpolicy: string;
+ rel: string;
+ shape?: AnchorButtonShape | undefined;
+ size?: AnchorButtonSize;
+ target: AnchorTarget;
+ type: string;
+}
-// @public (undocumented)
-export const accentForegroundRest: CSSDesignToken;
+// Warning: (ae-forgotten-export) The symbol "DelegatesARIALink" needs to be exported by the entry point index.d.ts
+//
+// @internal
+export interface AnchorButton extends StartEnd, DelegatesARIALink {
+}
-// @public (undocumented)
-export const accentForegroundRestDelta: DesignToken;
+// @public
+export const AnchorButtonAppearance: {
+ readonly primary: "primary";
+ readonly outline: "outline";
+ readonly subtle: "subtle";
+ readonly secondary: "secondary";
+ readonly transparent: "transparent";
+};
-// @public (undocumented)
-export const accentPalette: DesignToken>;
+// @public
+export type AnchorButtonAppearance = ValuesOf;
// @public (undocumented)
-export const accentStrokeControlActive: CSSDesignToken;
+export const AnchorButtonDefinition: FASTElementDefinition;
-// @public (undocumented)
-export const accentStrokeControlFocus: CSSDesignToken;
+// @public
+export type AnchorButtonOptions = StartEndOptions;
-// @public (undocumented)
-export const accentStrokeControlHover: CSSDesignToken;
+// @public
+export const AnchorButtonShape: {
+ readonly circular: "circular";
+ readonly rounded: "rounded";
+ readonly square: "square";
+};
-// @public (undocumented)
-export const accentStrokeControlRecipe: DesignToken;
+// @public
+export type AnchorButtonShape = ValuesOf;
-// @public (undocumented)
-export const accentStrokeControlRest: CSSDesignToken;
+// @public
+export const AnchorButtonSize: {
+ readonly small: "small";
+ readonly medium: "medium";
+ readonly large: "large";
+};
+
+// @public
+export type AnchorButtonSize = ValuesOf;
-export { Accordion }
+// @public
+export const AnchorButtonTemplate: ElementViewTemplate;
-export { AccordionItem }
+// @public
+export const AnchorTarget: {
+ readonly _self: "_self";
+ readonly _blank: "_blank";
+ readonly _parent: "_parent";
+ readonly _top: "_top";
+};
// @public
-export const accordionItemStyles: (context: ElementDefinitionContext, definition: AccordionItemOptions) => ElementStyles;
+export type AnchorTarget = ValuesOf;
// @public
-export const accordionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export class Avatar extends FASTElement {
+ active?: AvatarActive | undefined;
+ appearance?: AvatarAppearance | undefined;
+ color?: AvatarColor;
+ colorId?: AvatarNamedColor | undefined;
+ static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[];
+ // @internal
+ generateColor(): AvatarColor | void;
+ // @internal
+ generateInitials(): string | void;
+ initials?: string | undefined;
+ name?: string | undefined;
+ shape?: AvatarShape | undefined;
+ size?: AvatarSize | undefined;
+}
// @public
-export const allComponents: {
- fluentAccordion: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentAccordionItem: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentAnchor: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentAnchoredRegion: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentBadge: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentBreadcrumb: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentBreadcrumbItem: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentButton: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentCalendar: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentCard: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentCheckbox: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentCombobox: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentDataGrid: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentDataGridCell: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentDataGridRow: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentDesignSystemProvider: (overrideDefinition?: OverrideFoundationElementDefinition< {
- baseName: string;
- template: ViewTemplate;
- styles: ElementStyles;
- }> | undefined) => FoundationElementRegistry< {
- baseName: string;
- template: ViewTemplate;
- styles: ElementStyles;
- }, DesignSystemProvider>;
- fluentDialog: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentDivider: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentFlipper: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentHorizontalScroll: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentListbox: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentOption: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentMenu: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentMenuItem: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentNumberField: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentProgress: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentProgressRing: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentRadio: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentRadioGroup: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentSearch: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentSelect: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentSkeleton: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentSlider: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentSliderLabel: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentSwitch: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- fluentTabs: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentTab: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentTabPanel: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentTextArea: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentTextField: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentToolbar: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentTooltip: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentTreeView: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry;
- fluentTreeItem: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>;
- register(container?: Container, ...rest: any[]): void;
+export const AvatarActive: {
+ readonly active: "active";
+ readonly inactive: "inactive";
};
-// Warning: (ae-internal-missing-underscore) The name "ambientShadow" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal @deprecated
-export const ambientShadow = "0 0 2px rgba(0, 0, 0, 0.14)";
+// @public
+export type AvatarActive = ValuesOf;
-// Warning: (ae-internal-missing-underscore) The name "Anchor" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
-export class Anchor extends Anchor_2 {
- // @public
- appearance?: AnchorAppearance;
- // (undocumented)
- appearanceChanged(oldValue: AnchorAppearance, newValue: AnchorAppearance): void;
- // (undocumented)
- connectedCallback(): void;
- defaultSlottedContentChanged(): void;
-}
+// @public
+export const AvatarAppearance: {
+ readonly ring: "ring";
+ readonly shadow: "shadow";
+ readonly ringShadow: "ring-shadow";
+};
+
+// @public
+export type AvatarAppearance = ValuesOf;
+
+// @public
+export const AvatarColor: {
+ readonly darkRed: "dark-red";
+ readonly cranberry: "cranberry";
+ readonly red: "red";
+ readonly pumpkin: "pumpkin";
+ readonly peach: "peach";
+ readonly marigold: "marigold";
+ readonly gold: "gold";
+ readonly brass: "brass";
+ readonly brown: "brown";
+ readonly forest: "forest";
+ readonly seafoam: "seafoam";
+ readonly darkGreen: "dark-green";
+ readonly lightTeal: "light-teal";
+ readonly teal: "teal";
+ readonly steel: "steel";
+ readonly blue: "blue";
+ readonly royalBlue: "royal-blue";
+ readonly cornflower: "cornflower";
+ readonly navy: "navy";
+ readonly lavender: "lavender";
+ readonly purple: "purple";
+ readonly grape: "grape";
+ readonly lilac: "lilac";
+ readonly pink: "pink";
+ readonly magenta: "magenta";
+ readonly plum: "plum";
+ readonly beige: "beige";
+ readonly mink: "mink";
+ readonly platinum: "platinum";
+ readonly anchor: "anchor";
+ readonly neutral: "neutral";
+ readonly brand: "brand";
+ readonly colorful: "colorful";
+};
+
+// @public
+export type AvatarColor = ValuesOf;
+
+// @public
+export const AvatarDefinition: FASTElementDefinition;
+
+// @public
+export const AvatarNamedColor: {
+ readonly darkRed: "dark-red";
+ readonly cranberry: "cranberry";
+ readonly red: "red";
+ readonly pumpkin: "pumpkin";
+ readonly peach: "peach";
+ readonly marigold: "marigold";
+ readonly gold: "gold";
+ readonly brass: "brass";
+ readonly brown: "brown";
+ readonly forest: "forest";
+ readonly seafoam: "seafoam";
+ readonly darkGreen: "dark-green";
+ readonly lightTeal: "light-teal";
+ readonly teal: "teal";
+ readonly steel: "steel";
+ readonly blue: "blue";
+ readonly royalBlue: "royal-blue";
+ readonly cornflower: "cornflower";
+ readonly navy: "navy";
+ readonly lavender: "lavender";
+ readonly purple: "purple";
+ readonly grape: "grape";
+ readonly lilac: "lilac";
+ readonly pink: "pink";
+ readonly magenta: "magenta";
+ readonly plum: "plum";
+ readonly beige: "beige";
+ readonly mink: "mink";
+ readonly platinum: "platinum";
+ readonly anchor: "anchor";
+};
+
+// @public
+export type AvatarNamedColor = ValuesOf;
// @public
-export type AnchorAppearance = ButtonAppearance | 'hypertext';
+export const AvatarShape: {
+ readonly circular: "circular";
+ readonly square: "square";
+};
-export { AnchoredRegion }
+// @public
+export type AvatarShape = ValuesOf;
+
+// @public
+export const AvatarSize: {
+ readonly _16: 16;
+ readonly _20: 20;
+ readonly _24: 24;
+ readonly _28: 28;
+ readonly _32: 32;
+ readonly _36: 36;
+ readonly _40: 40;
+ readonly _48: 48;
+ readonly _56: 56;
+ readonly _64: 64;
+ readonly _72: 72;
+ readonly _96: 96;
+ readonly _120: 120;
+ readonly _128: 128;
+};
// @public
-export const anchoredRegionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export type AvatarSize = ValuesOf;
// @public
-export const anchorStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export const AvatarStyles: ElementStyles;
+
+// @public (undocumented)
+export const AvatarTemplate: ElementViewTemplate;
-// Warning: (ae-internal-missing-underscore) The name "Badge" should be prefixed with an underscore because the declaration is marked as @internal
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Badge" because one of its declarations is marked as @internal
//
-// @internal
-export class Badge extends Badge_2 {
- // (undocumented)
+// @public
+export class Badge extends FASTElement {
appearance: BadgeAppearance;
+ color: BadgeColor;
+ shape?: BadgeShape;
+ size?: BadgeSize;
+}
+
+// @internal
+export interface Badge extends StartEnd {
}
// @public
-export type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | string;
+export const BadgeAppearance: {
+ readonly filled: "filled";
+ readonly ghost: "ghost";
+ readonly outline: "outline";
+ readonly tint: "tint";
+};
// @public
-export const badgeStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export type BadgeAppearance = ValuesOf;
-// Warning: (ae-internal-missing-underscore) The name "baseButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
-export const baseButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector: string, nonInteractivitySelector?: string) => ElementStyles;
+// @public
+export const BadgeColor: {
+ readonly brand: "brand";
+ readonly danger: "danger";
+ readonly important: "important";
+ readonly informative: "informative";
+ readonly severe: "severe";
+ readonly subtle: "subtle";
+ readonly success: "success";
+ readonly warning: "warning";
+};
-// @public (undocumented)
-export const baseHeightMultiplier: CSSDesignToken;
+// @public
+export type BadgeColor = ValuesOf;
// @public (undocumented)
-export const baseHorizontalSpacingMultiplier: CSSDesignToken;
+export const BadgeDefinition: FASTElementDefinition;
-// Warning: (ae-internal-missing-underscore) The name "baseInputStyles" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
-export const baseInputStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, logicalControlSelector: string) => ElementStyles;
+// @public
+export const BadgeShape: {
+ readonly circular: "circular";
+ readonly rounded: "rounded";
+ readonly square: "square";
+};
+
+// @public
+export type BadgeShape = ValuesOf;
+
+// @public
+export const BadgeSize: {
+ readonly tiny: "tiny";
+ readonly extraSmall: "extra-small";
+ readonly small: "small";
+ readonly medium: "medium";
+ readonly large: "large";
+ readonly extraLarge: "extra-large";
+};
+
+// @public
+export type BadgeSize = ValuesOf;
+
+// @public
+export const BadgeStyles: ElementStyles;
+
+// @public (undocumented)
+export const BadgeTemplate: ElementViewTemplate;
// @public (undocumented)
-export const baseLayerLuminance: CSSDesignToken;
+export const borderRadiusCircular = "var(--borderRadiusCircular)";
// @public (undocumented)
-export const bodyFont: CSSDesignToken;
+export const borderRadiusLarge = "var(--borderRadiusLarge)";
-export { Breadcrumb }
+// @public (undocumented)
+export const borderRadiusMedium = "var(--borderRadiusMedium)";
-export { BreadcrumbItem }
+// @public (undocumented)
+export const borderRadiusNone = "var(--borderRadiusNone)";
-// @public
-export const breadcrumbItemStyles: (context: ElementDefinitionContext, definition: BreadcrumbItemOptions) => ElementStyles;
+// @public (undocumented)
+export const borderRadiusSmall = "var(--borderRadiusSmall)";
-// @public
-export const breadcrumbStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+// @public (undocumented)
+export const borderRadiusXLarge = "var(--borderRadiusXLarge)";
-// Warning: (ae-internal-missing-underscore) The name "Button" should be prefixed with an underscore because the declaration is marked as @internal
+// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Button" because one of its declarations is marked as @internal
//
-// @internal
-export class Button extends Button_2 {
- // @public
- appearance: ButtonAppearance;
- // (undocumented)
- appearanceChanged(oldValue: ButtonAppearance, newValue: ButtonAppearance): void;
+// @public
+export class Button extends FASTElement {
+ constructor();
+ appearance?: ButtonAppearance;
+ autofocus: boolean;
+ // @internal
+ clickHandler(e: Event): boolean | void;
// (undocumented)
connectedCallback(): void;
- defaultSlottedContentChanged(): void;
+ defaultSlottedContent: HTMLElement[];
+ disabled?: boolean;
+ disabledFocusable: boolean;
+ // @internal
+ disabledFocusableChanged(previous: boolean, next: boolean): void;
+ // @internal
+ protected elementInternals: ElementInternals;
+ get form(): HTMLFormElement | null;
+ formAction?: string;
+ static readonly formAssociated = true;
+ formAttribute?: string;
+ // @internal
+ formDisabledCallback(disabled: boolean): void;
+ formEnctype?: string;
+ formMethod?: string;
+ formNoValidate?: boolean;
+ formTarget?: ButtonFormTarget;
+ iconOnly: boolean;
+ keypressHandler(e: KeyboardEvent): boolean | void;
+ get labels(): ReadonlyArray;
+ name?: string;
+ protected press(): void;
+ resetForm(): void;
+ shape?: ButtonShape;
+ size?: ButtonSize;
+ type: ButtonType;
+ // @internal
+ typeChanged(previous: ButtonType, next: ButtonType): void;
+ value?: string;
+}
+
+// @internal (undocumented)
+export interface Button extends StartEnd {
}
// @public
-export type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline' | 'stealth';
+export const ButtonAppearance: {
+ readonly primary: "primary";
+ readonly outline: "outline";
+ readonly subtle: "subtle";
+ readonly secondary: "secondary";
+ readonly transparent: "transparent";
+};
// @public
-export const buttonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export type ButtonAppearance = ValuesOf;
-// @public (undocumented)
-export class Card extends Card_2 {
- cardFillColor: string;
- // (undocumented)
- connectedCallback(): void;
- // @internal (undocumented)
- handleChange(source: any, propertyName: string): void;
- neutralPaletteSource: string;
-}
+// @public
+export const ButtonDefinition: FASTElementDefinition;
// @public
-export const cardStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export const ButtonFormTarget: {
+ readonly blank: "_blank";
+ readonly self: "_self";
+ readonly parent: "_parent";
+ readonly top: "_top";
+};
// @public
-export const checkboxStyles: (context: ElementDefinitionContext, definition: CheckboxOptions) => ElementStyles;
+export type ButtonFormTarget = ValuesOf;
-// @public (undocumented)
-export interface ColorRecipe {
- // (undocumented)
- evaluate(element: HTMLElement, reference?: Swatch): Swatch;
-}
+// @public
+type ButtonOptions = StartEndOptions