docs(web-components): match storybook argTypes to custom element manifest

change/@fluentui-web-components-abaf1559-b67f-4856-be2a-b793a70ad376.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "docs: update storybook and CEM docs\"",
+  "packageName": "@fluentui/web-components",
+  "email": "rupertdavid@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/.storybook/dedent.d.ts

@@ -0,0 +1,6 @@
+declare module 'dedent' {
+  function dedent(strings: TemplateStringsArray, ...values: unknown[]): string;
+  function dedent(value: string): string;
+
+  export = dedent;
+}

packages/web-components/.storybook/docs-root.css

@@ -257,13 +257,28 @@
   border-bottom: 1px solid #edebe9;
 }
 
-#storybook-docs .docblock-argstable-body > tr > td:nth-child(4) {
+#storybook-docs .docblock-argstable-body > tr > td[colspan] {
+  background: var(--colorNeutralBackground2) !important;
+}
+
+/**
+ * Hides the Control column from the ArgsTable
+ * Disabled
+ *
+ */
+/*
+#storybook-docs .docblock-argstable-body>tr>td:nth-child(4) {
   display: none;
 }
 
-#storybook-docs .docblock-argstable-head > tr > th:nth-child(4) {
+#storybook-docs .docblock-argstable-head>tr>th:nth-child(4) {
   display: none;
 }
+*/
+
+#storybook-docs .docblock-argstable-body > tr > td {
+  width: unset !important;
+}
 
 #storybook-docs .docblock-argstable tbody tr {
   border: none;
@@ -371,14 +386,6 @@
   letter-spacing: -0.01em;
 }
 
-#storybook-docs .docblock-argstable tr > :nth-child(1) {
-  width: 4%;
-}
-
-#storybook-docs .docblock-argstable tr > :nth-child(2) {
-  width: 100%;
-}
-
 #storybook-docs .os-padding {
   z-index: 0;
 }

packages/web-components/.storybook/preview.mjs

@@ -2,10 +2,24 @@ import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@f
 import * as prettier from 'prettier';
 import prettierPluginHTML from 'prettier/parser-html.js';
 import webcomponentsTheme from './theme.mjs';
+import { setStorybookHelpersConfig } from './wc-toolkit-helpers.js';
 
 import '../src/index-rollup.js';
 import './docs-root.css';
 
+// Load the Custom Elements Manifest for Storybook helpers
+// @ts-ignore — JSON import attribute not needed in Vite, TS NodeNext is overly strict here
+import customElementsManifest from '../custom-elements.json';
+// @ts-ignore — Storybook global
+window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElementsManifest;
+
+// Configure CEM-based argTypes generation
+setStorybookHelpersConfig({
+  typeRef: 'parsedType',
+  hideArgRef: true,
+  categoryOrder: ['attributes', 'properties', 'slots', 'cssProps', 'cssParts', 'cssStates', 'methods', 'events'],
+});
+
 const FAST_EXPRESSION_COMMENTS = /<!--((fast-\w+)\{.*\}\2)?-->/g; // Matches comments that contain FAST expressions
 
 const themes = {
@@ -77,7 +91,7 @@ export const decorators = [
 
 export const parameters = {
   layout: 'fullscreen',
-  controls: { expanded: true },
+  controls: { expanded: true, sort: 'none' },
   viewMode: 'docs',
   previewTabs: {
     canvas: { hidden: true },

packages/web-components/.storybook/tsconfig.json

@@ -8,5 +8,5 @@
     "noEmit": true,
     "types": ["node"]
   },
-  "include": ["*", "../public", "../src/**/*.stories.*"]
+  "include": ["*", "./*.d.ts", "../public", "../src/**/*.stories.*"]
 }