refactor(web-components): replace compose() with plain definition objects (#36337)

## Previous Behavior

Component definitions across `@fluentui/web-components` and `@fluentui/chart-web-components` were created with the `Element.compose()` API. Each `define.ts` then registered the element by calling `definition.define(FluentDesignSystem.registry)`, and benchmarks imported the composed `definition` directly to register elements.

## New Behavior

Each component definition is now a plain `PartialFASTElementDefinition` object that includes `name`, `registry`, `styles`, and `template`. Registration happens by calling `Element.define(definition)` in each `define.ts`, and benchmarks import the component's `define.js` side-effect module instead of composing the definition themselves. The generated API report and `tensile.config.js` are updated to match. Behavior is functionally equivalent; this is an internal refactor that removes the `compose()` pattern.

Author: radium-v

apps/vr-tests-web-components/project.json

@@ -3,5 +3,10 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [],
+  "targets": {
+    "build-storybook": {
+      "dependsOn": ["^build"]
+    }
+  },
   "tags": ["web-components"]
 }

apps/vr-tests-web-components/src/stories/accordion/accordion.stories.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { default as parse } from 'html-react-parser';
 import { Steps } 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);
+import '@fluentui/web-components/accordion/define.js';
+import '@fluentui/web-components/accordion-item/define.js';
 
 export default {
   title: 'Accordion',

apps/vr-tests-web-components/src/stories/avatar/avatar.stories.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { default as parse } from 'html-react-parser';
 import { Steps } from 'storywright';
-import { AvatarDefinition, FluentDesignSystem } from '@fluentui/web-components';
 import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
 
-AvatarDefinition.define(FluentDesignSystem.registry);
+import '@fluentui/web-components/avatar/define.js';
 
 export default {
   title: 'Avatar',

apps/vr-tests-web-components/src/stories/badge/badge.stories.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { default as parse } from 'html-react-parser';
 import { Steps } from 'storywright';
-import { BadgeDefinition, FluentDesignSystem } from '@fluentui/web-components';
 import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator.js';
 
-BadgeDefinition.define(FluentDesignSystem.registry);
+import '@fluentui/web-components/badge/define.js';
 
 export default {
   title: 'Badge',

apps/vr-tests-web-components/src/stories/button/button.stories.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { default as parse } from 'html-react-parser';
 import { Steps } from 'storywright';
-import { ButtonDefinition, FluentDesignSystem } from '@fluentui/web-components';
 import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
 
-ButtonDefinition.define(FluentDesignSystem.registry);
+import '@fluentui/web-components/button/define.js';
 
 const buttonId = 'button-id';
 

apps/vr-tests-web-components/src/stories/checkbox/checkbox-indeterminate.stories.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { default as parse } from 'html-react-parser';
 import { Steps, type StoryParameters } from 'storywright';
-import { CheckboxDefinition, FluentDesignSystem } from '@fluentui/web-components';
 import { DARK_MODE, getStoryVariant } from '../../utilities/WCThemeDecorator.js';
 
-CheckboxDefinition.define(FluentDesignSystem.registry);
+import '@fluentui/web-components/checkbox/define.js';
 
 export default {
   title: 'Checkbox',

apps/vr-tests-web-components/src/stories/checkbox/checkbox.stories.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { default as parse } from 'html-react-parser';
 import { Steps } from 'storywright';
-import { CheckboxDefinition, FluentDesignSystem } from '@fluentui/web-components';
 import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
 
-CheckboxDefinition.define(FluentDesignSystem.registry);
+import '@fluentui/web-components/checkbox/define.js';
 
 export default {
   title: 'Checkbox',

apps/vr-tests-web-components/src/stories/divider/divider.stories.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { default as parse } from 'html-react-parser';
 import { Steps } from 'storywright';
-import { DividerDefinition, FluentDesignSystem } from '@fluentui/web-components';
 import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
 
-DividerDefinition.define(FluentDesignSystem.registry);
+import '@fluentui/web-components/divider/define.js';
 
 export default {
   title: 'Divider',

apps/vr-tests-web-components/src/stories/label/label.stories.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { default as parse } from 'html-react-parser';
 import { Steps } from 'storywright';
-import { LabelDefinition, FluentDesignSystem } from '@fluentui/web-components';
 import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
 
-LabelDefinition.define(FluentDesignSystem.registry);
+import '@fluentui/web-components/label/define.js';
 
 export default {
   title: 'Label',

apps/vr-tests-web-components/src/stories/link/link.stories.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { default as parse } from 'html-react-parser';
 import { Steps } from 'storywright';
-import { LinkDefinition, FluentDesignSystem } from '@fluentui/web-components';
 
-LinkDefinition.define(FluentDesignSystem.registry);
+import '@fluentui/web-components/link/define.js';
 
 const linkId = 'link-id';