microsoft · Victor Genaev (mainframev) · Aug 19, 2026
@@ -47,6 +47,8 @@ $RECYCLE.BIN/
 dist.stats.json
 bower_components
 node_modules
+!packages/react-components/react-storybook-addon/src/preset/__fixtures__/**/node_modules
+!packages/react-components/react-storybook-addon/src/preset/__fixtures__/**/node_modules/**
 
 # Yarn (ignore everything except patches, plugins, and releases)
 .yarn/*

@@ -5,22 +5,81 @@
   "implicitDependencies": ["react-headless-components-preview-stories"],
   "tags": ["platform:web", "vNext"],
   "targets": {
+    "storybook": {
+      "dependsOn": [
+        {
+          "projects": [
+            "react-headless-components-preview",
+            "react-storybook-addon",
+            "react-storybook-addon-export-to-sandbox"
+          ],
+          "target": "build"
+        }
+      ]
+    },
+    "storybook:docs": {
+      "dependsOn": [
+        {
+          "projects": [
+            "react-headless-components-preview",
+            "react-storybook-addon",
+            "react-storybook-addon-export-to-sandbox"
+          ],
+          "target": "build"
+        }
+      ]
+    },
+    "start": {
+      "dependsOn": [
+        {
+          "projects": [
+            "react-headless-components-preview",
+            "react-storybook-addon",
+            "react-storybook-addon-export-to-sandbox"
+          ],
+          "target": "build"
+        }
+      ]
+    },
     "build-storybook": {
+      "inputs": [
+        "default",
+        "^production",
+        "{workspaceRoot}/.storybook/**",
+        "{projectRoot}/.storybook/**",
+        "{workspaceRoot}/packages/react-components/react-headless-components-preview/stories/.storybook/**"
+      ],
       "dependsOn": [
         {
-          "projects": ["react-storybook-addon", "react-storybook-addon-export-to-sandbox", "storybook-llms-extractor"],
+          "projects": [
+            "react-headless-components-preview",
+            "react-storybook-addon",
+            "react-storybook-addon-export-to-sandbox",
+            "storybook-llms-extractor"
+          ],
           "target": "build"
         }
       ]
     },
     "build-storybook:docsite": {
       "dependsOn": [
         {
-          "projects": ["react-storybook-addon", "react-storybook-addon-export-to-sandbox", "storybook-llms-extractor"],
+          "projects": [
+            "react-headless-components-preview",
+            "react-storybook-addon",
+            "react-storybook-addon-export-to-sandbox",
+            "storybook-llms-extractor"
+          ],
           "target": "build"
         }
       ],
-      "inputs": ["default", "{workspaceRoot}/.storybook/**", "{projectRoot}/.storybook/**"]
+      "inputs": [
+        "default",
+        "^production",
+        "{workspaceRoot}/.storybook/**",
+        "{projectRoot}/.storybook/**",
+        "{workspaceRoot}/packages/react-components/react-headless-components-preview/stories/.storybook/**"
+      ]
     }
   }
 }
diff --git a/change/@fluentui-react-headless-components-preview-c6f83c30-ba64-4639-a5e8-1d6d1560e9bc.json b/change/@fluentui-react-headless-components-preview-c6f83c30-ba64-4639-a5e8-1d6d1560e9bc.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "docs: clarify presence-only data attribute semantics",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-storybook-addon-7438d397-3d01-4a9f-9e4d-879e2ca08aed.json b/change/@fluentui-react-storybook-addon-7438d397-3d01-4a9f-9e4d-879e2ca08aed.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add opt-in state data attribute documentation for Storybook ArgTypes.",
+  "packageName": "@fluentui/react-storybook-addon",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}
@@ -7,11 +7,11 @@ export type AccordionProps = AccordionBaseProps;
 export type AccordionState = AccordionBaseState & {
   root: {
     /**
-     * Data attribute set to indicate whether the accordion allows multiple items to be expanded at once.
+     * Present when the accordion allows all items to be collapsed; omitted when one item must remain open.
      */
     'data-collapsible'?: string;
     /**
-     * Data attribute set to indicate whether the accordion allows multiple items to be expanded at once.
+     * Present when the accordion allows multiple items to be expanded at once; omitted when only one item may be expanded.
      */
     'data-multiple'?: string;
   };

@@ -9,12 +9,12 @@ export type {
 export type AccordionHeaderState = AccordionHeaderBaseState & {
   root: {
     /**
-     * Data attribute set when the accordion item is open.
+     * Present when the accordion item is open; omitted when the accordion item is closed.
      */
     'data-open'?: string;
 
     /**
-     * Data attribute set when the accordion header is disabled.
+     * Present when the accordion header is disabled; omitted when enabled.
      */
     'data-disabled'?: string;
 

@@ -9,11 +9,11 @@ export type {
 export type AccordionItemState = AccordionItemBaseState & {
   root: {
     /**
-     * Data attribute set to indicate whether the accordion item is disabled.
+     * Present when the accordion item is disabled; omitted when enabled.
      */
     'data-disabled'?: string;
     /**
-     * Data attribute set to indicate whether the accordion item is open.
+     * Present when the accordion item is open; omitted when the accordion item is closed.
      */
     'data-open'?: string;
   };

@@ -5,7 +5,7 @@ export type { AccordionPanelSlots, AccordionPanelBaseProps as AccordionPanelProp
 export type AccordionPanelState = AccordionPanelBaseState & {
   root: {
     /**
-     * Data attribute set when the accordion panel is open.
+     * Present when the accordion panel is open; omitted when the accordion panel is closed.
      */
     'data-open'?: string;
   };

@@ -11,7 +11,7 @@ export type {
 export type BreadcrumbButtonState = BreadcrumbButtonBaseState & {
   root: {
     /**
-     * Data attribute set to indicate that this button represents the current page in the breadcrumb.
+     * Present when this button represents the current page in the breadcrumb; omitted otherwise.
      */
     'data-current'?: string;
   };

@@ -8,17 +8,17 @@ export type { ButtonSlots, ButtonBaseProps as ButtonProps } from '@fluentui/reac
 export type ButtonState = ButtonBaseState & {
   root: {
     /**
-     * Data attribute set when the button is disabled.
+     * Present when disabled; omitted otherwise.
      */
     'data-disabled'?: string;
 
     /**
-     * Data attribute set when the button is disabled but still focusable.
+     * Present when disabled but still focusable; omitted otherwise.
      */
     'data-disabled-focusable'?: string;
 
     /**
-     * Data attribute set when the button renders only an icon.
+     * Present when the button renders only an icon; omitted otherwise.
      */
     'data-icon-only'?: string;
 

@@ -18,6 +18,9 @@ export type CardProps = Omit<CardBaseProps, 'focusMode'>;
  */
 export type CardState = CardBaseState & {
   root: {
+    /**
+     * Present when selected; omitted otherwise.
+     */
     'data-selected'?: string;
     'data-disabled'?: string;
   };

@@ -8,12 +8,12 @@ export type { CheckboxSlots, CheckboxBaseProps as CheckboxProps } from '@fluentu
 export type CheckboxState = CheckboxBaseState & {
   root: {
     /**
-     * Data attribute set when the checkbox is disabled.
+     * Present when disabled; omitted otherwise.
      */
     'data-disabled'?: string;
 
     /**
-     * Data attribute set when the checkbox is checked. Value is 'mixed' when in the indeterminate state.
+     * Present when checked; omitted when unchecked. The value is "mixed" when indeterminate.
      */
     'data-checked'?: string;
 

@@ -16,11 +16,11 @@ export type ComboboxState = BaseComboboxState & {
      */
     'data-open'?: string;
     /**
-     * Whether the trigger element is currently disabled.
+     * Present when the input is disabled; omitted otherwise.
      */
     'data-disabled'?: string;
     /**
-     * Whether the trigger element is currently displaying a placeholder.
+     * Present when a placeholder is displayed; omitted when a value is present.
      */
     'data-placeholder'?: string;
     /**

@@ -5,7 +5,7 @@ export type { InlineDrawerSlots, InlineDrawerBaseProps as InlineDrawerProps } fr
 export type InlineDrawerState = InlineDrawerBaseState & {
   root: {
     /**
-     * Indicates whether the drawer is open, used for styling purposes.
+     * Present when the drawer is open; omitted when it is closed.
      */
     'data-open'?: string;
     /**

@@ -16,11 +16,11 @@ export type DropdownState = DropdownBaseHookState & {
      */
     'data-open'?: string;
     /**
-     * Whether the trigger element is currently disabled.
+     * Present when the trigger is disabled; omitted otherwise.
      */
     'data-disabled'?: string;
     /**
-     * Whether the trigger element is currently displaying a placeholder.
+     * Present when a placeholder is displayed; omitted when a value is present.
      */
     'data-placeholder'?: string;
     /**

@@ -8,11 +8,11 @@ export type { OptionSlots, OptionProps } from '@fluentui/react-combobox';
 export type OptionState = OptionBaseState & {
   root: {
     /**
-     * Whether the option is currently disabled.
+     * Present when the option is disabled; omitted otherwise.
      */
     'data-disabled'?: string;
     /**
-     * Whether the option is currently selected.
+     * Present when the option is selected; omitted otherwise.
      */
     'data-selected'?: string;
     /**

@@ -8,7 +8,7 @@ export type { InputSlots, InputBaseProps as InputProps } from '@fluentui/react-i
 export type InputState = InputBaseState & {
   root: {
     /**
-     * Data attribute set when the input is disabled.
+     * Present when disabled; omitted otherwise.
      */
     'data-disabled'?: string;
 

@@ -5,12 +5,12 @@ export type { InteractionTagSlots, InteractionTagBaseProps as InteractionTagProp
 export type InteractionTagState = InteractionTagBaseState & {
   root: {
     /**
-     * Data attribute set when the interaction tag is disabled.
+     * Present when the interaction tag is disabled; omitted otherwise.
      */
     'data-disabled'?: string;
 
     /**
-     * Data attribute set when the interaction tag is selected.
+     * Present when the interaction tag is selected; omitted otherwise.
      */
     'data-selected'?: string;
   };

@@ -9,17 +9,17 @@ export type {
 export type InteractionTagPrimaryState = InteractionTagPrimaryBaseState & {
   root: {
     /**
-     * Data attribute set when the primary action is disabled.
+     * Present when the primary action is disabled; omitted otherwise.
      */
     'data-disabled'?: string;
 
     /**
-     * Data attribute set when the interaction tag is selected.
+     * Present when the interaction tag is selected; omitted otherwise.
      */
     'data-selected'?: string;
 
     /**
-     * Data attribute set when the interaction tag has a secondary action.
+     * Present when the interaction tag has a secondary action; omitted otherwise.
      */
     'data-has-secondary-action'?: string;
   };

@@ -8,12 +8,12 @@ export type {
 export type InteractionTagSecondaryState = InteractionTagSecondaryBaseState & {
   root: {
     /**
-     * Data attribute set when the secondary action is disabled.
+     * Present when the secondary action is disabled; omitted otherwise.
      */
     'data-disabled'?: string;
 
     /**
-     * Data attribute set when the interaction tag is selected.
+     * Present when the interaction tag is selected; omitted otherwise.
      */
     'data-selected'?: string;
   };

@@ -8,7 +8,7 @@ export type { LabelSlots, LabelBaseProps as LabelProps } from '@fluentui/react-l
 export type LabelState = LabelBaseState & {
   root: {
     /**
-     * Data attribute set when the label is disabled.
+     * Present when disabled; omitted otherwise.
      */
     'data-disabled'?: string;
 

@@ -8,12 +8,12 @@ export type { LinkSlots, LinkBaseProps as LinkProps } from '@fluentui/react-link
 export type LinkState = LinkBaseState & {
   root: {
     /**
-     * Data attribute set when the link is disabled.
+     * Present when disabled; omitted otherwise.
      */
     'data-disabled'?: string;
 
     /**
-     * Data attribute set when the link is disabled but still focusable.
+     * Present when disabled but still focusable; omitted otherwise.
      */
     'data-disabled-focusable'?: string;
   };

@@ -8,17 +8,17 @@ export type { MenuButtonBaseProps as MenuButtonProps, MenuButtonSlots } from '@f
 export type MenuButtonState = MenuButtonBaseState & {
   root: {
     /**
-     * Data attribute set when the button is disabled.
+     * Present when the button is disabled; omitted otherwise.
      */
     'data-disabled'?: string;
 
     /**
-     * Data attribute set when the button is disabled but still focusable.
+     * Present when the button is disabled but still focusable; omitted otherwise.
      */
     'data-disabled-focusable'?: string;
 
     /**
-     * Data attribute set when the button renders only an icon.
+     * Present when the button renders only an icon; omitted otherwise.
      */
     'data-icon-only'?: string;
 

@@ -14,7 +14,7 @@ export type MessageBarActionsState = MessageBarActionsBaseState & {
     'data-layout'?: string;
 
     /**
-     * Data attribute set when actions content is present.
+     * Present when actions content is present; omitted otherwise.
      */
     'data-has-actions'?: string;
   };

@@ -8,7 +8,7 @@ export type { RadioSlots, RadioBaseProps as RadioProps } from '@fluentui/react-r
 export type RadioState = RadioBaseState & {
   root: {
     /**
-     * Data attribute set when the radio is disabled.
+     * Present when disabled; omitted otherwise.
      */
     'data-disabled'?: string;