feat(react-headless-components-preview): add headless Tag, InteractionTag, InteractionTagPrimary, InteractionTagSecondary, TagGroup

Add five headless Tag-family components that delegate behaviour to the
canonical base hooks in @fluentui/react-tags. The headless flavour:

- Strips icons - InteractionTagSecondary does NOT inject a default
  DismissRegular icon (consumers supply children).
- Strips Tabster - the headless useTagGroup omits the canonical
  arrowNavigationProps / onAfterTagDismiss options, so the group renders
  without data-tabster and without post-dismiss focus restoration; consumers
  wire those behaviours up themselves.
- Strips styles - no Griffel hooks; the public root slot is decorated with
  data-disabled / data-dismissible / data-selected / data-has-secondary-action
  attributes for downstream styling.

Each component exposes the standard {Component, useComponent, renderComponent,
ComponentProps, ComponentState, ComponentSlots} surface plus context-value
helpers where the canonical render contract requires them. Each is reachable
through a kebab-case subpath export (./tag, ./interaction-tag,
./interaction-tag-primary, ./interaction-tag-secondary, ./tag-group).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: mainframev

packages/react-components/react-headless-components-preview/library/etc/interaction-tag-primary.api.md

@@ -0,0 +1,47 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { InteractionTagPrimaryBaseProps } from '@fluentui/react-tags';
+import { InteractionTagPrimaryBaseState } from '@fluentui/react-tags';
+import { InteractionTagPrimaryContextValues as InteractionTagPrimaryContextValues_2 } from '@fluentui/react-tags';
+import type { InteractionTagPrimarySlots as InteractionTagPrimarySlots_2 } from '@fluentui/react-tags';
+import { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+
+// @public
+export const InteractionTagPrimary: ForwardRefComponent<InteractionTagPrimaryProps>;
+
+// @public (undocumented)
+export type InteractionTagPrimaryContextValues = InteractionTagPrimaryContextValues_2;
+
+// @public (undocumented)
+export type InteractionTagPrimaryProps = InteractionTagPrimaryBaseProps;
+
+// @public (undocumented)
+export type InteractionTagPrimarySlots = InteractionTagPrimarySlots_2;
+
+// @public (undocumented)
+export type InteractionTagPrimaryState = InteractionTagPrimaryBaseState & {
+    root: {
+        'data-disabled'?: string;
+        'data-selected'?: string;
+        'data-has-secondary-action'?: string;
+    };
+};
+
+// @public
+export const renderInteractionTagPrimary: (state: InteractionTagPrimaryBaseState, contextValues: InteractionTagPrimaryContextValues_2) => JSXElement;
+
+// @public
+export const useInteractionTagPrimary: (props: InteractionTagPrimaryProps, ref: React_2.Ref<HTMLButtonElement>) => InteractionTagPrimaryState;
+
+// @public
+export const useInteractionTagPrimaryContextValues: (_state: InteractionTagPrimaryState) => InteractionTagPrimaryContextValues;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/etc/interaction-tag-secondary.api.md

@@ -0,0 +1,39 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { InteractionTagSecondaryBaseProps } from '@fluentui/react-tags';
+import { InteractionTagSecondaryBaseState } from '@fluentui/react-tags';
+import type { InteractionTagSecondarySlots as InteractionTagSecondarySlots_2 } from '@fluentui/react-tags';
+import { JSXElement } from '@fluentui/react-utilities';
+import type * as React_2 from 'react';
+
+// @public
+export const InteractionTagSecondary: ForwardRefComponent<InteractionTagSecondaryProps>;
+
+// @public (undocumented)
+export type InteractionTagSecondaryProps = InteractionTagSecondaryBaseProps;
+
+// @public (undocumented)
+export type InteractionTagSecondarySlots = InteractionTagSecondarySlots_2;
+
+// @public (undocumented)
+export type InteractionTagSecondaryState = InteractionTagSecondaryBaseState & {
+    root: {
+        'data-disabled'?: string;
+        'data-selected'?: string;
+    };
+};
+
+// @public
+export const renderInteractionTagSecondary: (state: InteractionTagSecondaryBaseState) => JSXElement;
+
+// @public
+export const useInteractionTagSecondary: (props: InteractionTagSecondaryProps, ref: React_2.Ref<HTMLButtonElement>) => InteractionTagSecondaryState;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/etc/interaction-tag.api.md

@@ -0,0 +1,50 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { InteractionTagBaseProps } from '@fluentui/react-tags';
+import { InteractionTagBaseState } from '@fluentui/react-tags';
+import { InteractionTagContextValue } from '@fluentui/react-tags';
+import type { InteractionTagSlots as InteractionTagSlots_2 } from '@fluentui/react-tags';
+import { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+
+// @public
+export const InteractionTag: ForwardRefComponent<InteractionTagProps>;
+
+// @public (undocumented)
+export type InteractionTagContextValues = {
+    interactionTag: InteractionTagContextValue;
+};
+
+// @public (undocumented)
+export type InteractionTagProps = InteractionTagBaseProps;
+
+// @public (undocumented)
+export type InteractionTagSlots = InteractionTagSlots_2;
+
+// @public (undocumented)
+export type InteractionTagState = InteractionTagBaseState & {
+    root: {
+        'data-disabled'?: string;
+        'data-selected'?: string;
+    };
+};
+
+// @public
+export const renderInteractionTag: (state: InteractionTagBaseState, contextValues: {
+    interactionTag: InteractionTagContextValue;
+}) => JSXElement;
+
+// @public
+export const useInteractionTag: (props: InteractionTagProps, ref: React_2.Ref<HTMLDivElement>) => InteractionTagState;
+
+// @public
+export const useInteractionTagContextValues: (state: InteractionTagState) => InteractionTagContextValues;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/etc/tag-group.api.md

@@ -0,0 +1,49 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { TagGroupBaseProps } from '@fluentui/react-tags';
+import { TagGroupBaseState } from '@fluentui/react-tags';
+import type { TagGroupContextValue } from '@fluentui/react-tags';
+import { TagGroupContextValues as TagGroupContextValues_2 } from '@fluentui/react-tags';
+import type { TagGroupSlots as TagGroupSlots_2 } from '@fluentui/react-tags';
+
+// @public
+export const renderTagGroup: (state: TagGroupBaseState, contextValue: TagGroupContextValues_2) => JSXElement;
+
+// @public
+export const TagGroup: ForwardRefComponent<TagGroupProps>;
+
+// @public (undocumented)
+export type TagGroupContextValues = {
+    tagGroup: TagGroupContextValue;
+};
+
+// @public (undocumented)
+export type TagGroupProps = TagGroupBaseProps;
+
+// @public (undocumented)
+export type TagGroupSlots = TagGroupSlots_2;
+
+// @public (undocumented)
+export type TagGroupState = TagGroupBaseState & {
+    root: {
+        'data-disabled'?: string;
+        'data-dismissible'?: string;
+    };
+};
+
+// @public
+export const useTagGroup: (props: TagGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagGroupState;
+
+// @public
+export const useTagGroupContextValues: (state: TagGroupState) => TagGroupContextValues;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/etc/tag.api.md

@@ -0,0 +1,47 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { TagBaseProps } from '@fluentui/react-tags';
+import { TagBaseState } from '@fluentui/react-tags';
+import { TagContextValues as TagContextValues_2 } from '@fluentui/react-tags';
+import type { TagSlots as TagSlots_2 } from '@fluentui/react-tags';
+
+// @public
+export const renderTag: (state: TagBaseState, contextValues: TagContextValues_2) => JSXElement;
+
+// @public
+export const Tag: ForwardRefComponent<TagProps>;
+
+// @public (undocumented)
+export type TagContextValues = TagContextValues_2;
+
+// @public (undocumented)
+export type TagProps = TagBaseProps;
+
+// @public (undocumented)
+export type TagSlots = TagSlots_2;
+
+// @public (undocumented)
+export type TagState = TagBaseState & {
+    root: {
+        'data-disabled'?: string;
+        'data-dismissible'?: string;
+        'data-selected'?: string;
+    };
+};
+
+// @public
+export const useTag: (props: TagProps, ref: React_2.Ref<HTMLSpanElement | HTMLButtonElement>) => TagState;
+
+// @public
+export const useTagContextValues: (_state: TagState) => TagContextValues;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/package.json

@@ -160,6 +160,24 @@
       "import": "./lib/input.js",
       "require": "./lib-commonjs/input.js"
     },
+    "./interaction-tag": {
+      "types": "./dist/interaction-tag.d.ts",
+      "node": "./lib-commonjs/interaction-tag.js",
+      "import": "./lib/interaction-tag.js",
+      "require": "./lib-commonjs/interaction-tag.js"
+    },
+    "./interaction-tag-primary": {
+      "types": "./dist/interaction-tag-primary.d.ts",
+      "node": "./lib-commonjs/interaction-tag-primary.js",
+      "import": "./lib/interaction-tag-primary.js",
+      "require": "./lib-commonjs/interaction-tag-primary.js"
+    },
+    "./interaction-tag-secondary": {
+      "types": "./dist/interaction-tag-secondary.d.ts",
+      "node": "./lib-commonjs/interaction-tag-secondary.js",
+      "import": "./lib/interaction-tag-secondary.js",
+      "require": "./lib-commonjs/interaction-tag-secondary.js"
+    },
     "./label": {
       "types": "./dist/label.d.ts",
       "node": "./lib-commonjs/label.js",
@@ -274,6 +292,18 @@
       "import": "./lib/tab-list.js",
       "require": "./lib-commonjs/tab-list.js"
     },
+    "./tag": {
+      "types": "./dist/tag.d.ts",
+      "node": "./lib-commonjs/tag.js",
+      "import": "./lib/tag.js",
+      "require": "./lib-commonjs/tag.js"
+    },
+    "./tag-group": {
+      "types": "./dist/tag-group.d.ts",
+      "node": "./lib-commonjs/tag-group.js",
+      "import": "./lib/tag-group.js",
+      "require": "./lib-commonjs/tag-group.js"
+    },
     "./textarea": {
       "types": "./dist/textarea.d.ts",
       "node": "./lib-commonjs/textarea.js",

packages/react-components/react-headless-components-preview/library/src/components/InteractionTag/InteractionTag.test.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../testing/isConformant';
+import { InteractionTag } from './InteractionTag';
+import { InteractionTagPrimary } from '../InteractionTagPrimary';
+
+const requiredProps = { children: <InteractionTagPrimary>tag</InteractionTagPrimary> };
+
+describe('InteractionTag', () => {
+  isConformant({
+    Component: InteractionTag,
+    displayName: 'InteractionTag',
+    requiredProps,
+  });
+
+  it('provides a child InteractionTagPrimary with an aria-pressed when handleTagSelect is wired', () => {
+    const result = render(<InteractionTag {...requiredProps} />);
+    expect(result.getByRole('button')).toBeInTheDocument();
+  });
+});

packages/react-components/react-headless-components-preview/library/src/components/InteractionTag/InteractionTag.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+import type { InteractionTagProps } from './InteractionTag.types';
+import { useInteractionTag, useInteractionTagContextValues } from './useInteractionTag';
+import { renderInteractionTag } from './renderInteractionTag';
+
+/**
+ * A visual representation of an attribute that can have primary and/or secondary actions.
+ * Composed with `InteractionTagPrimary` and optionally `InteractionTagSecondary` children.
+ */
+export const InteractionTag: ForwardRefComponent<InteractionTagProps> = React.forwardRef((props, ref) => {
+  const state = useInteractionTag(props, ref);
+  const contextValues = useInteractionTagContextValues(state);
+  return renderInteractionTag(state, contextValues);
+});
+
+InteractionTag.displayName = 'InteractionTag';

packages/react-components/react-headless-components-preview/library/src/components/InteractionTag/InteractionTag.types.ts

@@ -0,0 +1,28 @@
+import type {
+  InteractionTagSlots as InteractionTagBaseSlots,
+  InteractionTagBaseProps,
+  InteractionTagBaseState,
+} from '@fluentui/react-tags';
+import type { InteractionTagContextValue } from '@fluentui/react-tags';
+
+export type InteractionTagSlots = InteractionTagBaseSlots;
+
+export type InteractionTagProps = InteractionTagBaseProps;
+
+export type InteractionTagState = InteractionTagBaseState & {
+  root: {
+    /**
+     * Data attribute set when the interaction tag is disabled.
+     */
+    'data-disabled'?: string;
+
+    /**
+     * Data attribute set when the interaction tag is selected.
+     */
+    'data-selected'?: string;
+  };
+};
+
+export type InteractionTagContextValues = {
+  interactionTag: InteractionTagContextValue;
+};

packages/react-components/react-headless-components-preview/library/src/components/InteractionTag/index.ts

@@ -0,0 +1,9 @@
+export { InteractionTag } from './InteractionTag';
+export { renderInteractionTag } from './renderInteractionTag';
+export { useInteractionTag, useInteractionTagContextValues } from './useInteractionTag';
+export type {
+  InteractionTagSlots,
+  InteractionTagProps,
+  InteractionTagState,
+  InteractionTagContextValues,
+} from './InteractionTag.types';