diff --git a/change/@fluentui-web-components-b79350c6-45b4-4047-b3cb-bdd2f3913561.json b/change/@fluentui-web-components-b79350c6-45b4-4047-b3cb-bdd2f3913561.json
new file mode 100644
index 0000000000000..3ae947b76d1f1
--- /dev/null
+++ b/change/@fluentui-web-components-b79350c6-45b4-4047-b3cb-bdd2f3913561.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(web-components): remove all barrell exports with exception of design tokens",
+  "packageName": "@fluentui/web-components",
+  "email": "=",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
index 0c01414777db9..39dce2abc5cc9 100644
--- a/packages/web-components/docs/api-report.md
+++ b/packages/web-components/docs/api-report.md
@@ -5,6 +5,7 @@
 ```ts
 
 import type { Constructable } from '@microsoft/fast-element';
+import { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
@@ -21,7 +22,6 @@ import type { Theme } from '@fluentui/tokens';
 export class Accordion extends FASTElement {
     // (undocumented)
     protected accordionItems: Element[];
-    // Warning: (ae-forgotten-export) The symbol "AccordionExpandMode" needs to be exported by the entry point index.d.ts
     expandmode: AccordionExpandMode;
     // (undocumented)
     expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void;
@@ -36,6 +36,17 @@ export class Accordion extends FASTElement {
 // @public (undocumented)
 export const accordionDefinition: FASTElementDefinition<typeof Accordion>;
 
+// @public
+export const AccordionExpandMode: {
+    readonly single: "single";
+    readonly multi: "multi";
+};
+
+// Warning: (ae-forgotten-export) The symbol "ValuesOf" needs to be exported by the entry point index.d.ts
+//
+// @public
+export type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;
+
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AccordionItem" because one of its declarations is marked as @internal
 //
 // @public
@@ -68,8 +79,6 @@ export const AccordionItemExpandIconPosition: {
     readonly end: "end";
 };
 
-// Warning: (ae-forgotten-export) The symbol "ValuesOf" needs to be exported by the entry point index.d.ts
-//
 // @public
 export type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
 
@@ -135,6 +144,8 @@ export class AnchorButton extends FASTElement {
     type: string;
 }
 
+// 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 {
 }
@@ -154,6 +165,9 @@ export type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearance>;
 // @public (undocumented)
 export const AnchorButtonDefinition: FASTElementDefinition<typeof AnchorButton>;
 
+// @public
+export type AnchorButtonOptions = StartEndOptions<AnchorButton>;
+
 // @public
 export const AnchorButtonShape: {
     readonly circular: "circular";
@@ -177,11 +191,6 @@ export type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
 // @public
 export const AnchorButtonTemplate: ElementViewTemplate<AnchorButton>;
 
-// @public
-type AnchorOptions = StartEndOptions<AnchorButton>;
-export { AnchorOptions as AnchorButtonOptions }
-export { AnchorOptions }
-
 // @public
 export const AnchorTarget: {
     readonly _self: "_self";
@@ -388,13 +397,6 @@ export type BadgeColor = ValuesOf<typeof BadgeColor>;
 // @public (undocumented)
 export const BadgeDefinition: FASTElementDefinition<typeof Badge>;
 
-// Warning: (ae-internal-missing-underscore) The name "BadgeOptions" should be prefixed with an underscore because the declaration is marked as @internal
-//
-// @internal
-export type BadgeOptions = StartEndOptions<Badge> & {
-    defaultContent?: StaticallyComposableHTML;
-};
-
 // @public
 export const BadgeShape: {
     readonly circular: "circular";
@@ -424,29 +426,6 @@ export const BadgeStyles: ElementStyles;
 // @public (undocumented)
 export const BadgeTemplate: ElementViewTemplate<Badge>;
 
-// @public
-export class BaseTabs extends FASTElement {
-    activeid: string;
-    // @internal (undocumented)
-    activeidChanged(oldValue: string, newValue: string): void;
-    activetab: HTMLElement;
-    adjust(adjustment: number): void;
-    // @internal (undocumented)
-    connectedCallback(): void;
-    orientation: TabsOrientation;
-    // @internal (undocumented)
-    orientationChanged(): void;
-    protected setTabs(): void;
-    // @internal (undocumented)
-    tabpanels: HTMLElement[];
-    // @internal (undocumented)
-    tabpanelsChanged(): void;
-    // @internal (undocumented)
-    tabs: HTMLElement[];
-    // @internal (undocumented)
-    tabsChanged(): void;
-}
-
 // @public (undocumented)
 export const borderRadiusCircular = "var(--borderRadiusCircular)";
 
@@ -540,7 +519,6 @@ export type ButtonFormTarget = ValuesOf<typeof ButtonFormTarget>;
 // @public
 type ButtonOptions = StartEndOptions<Button>;
 export { ButtonOptions }
-export { ButtonOptions as CompoundButtonOptions }
 export { ButtonOptions as MenuButtonOptions }
 export { ButtonOptions as ToggleButtonOptions }
 
@@ -1625,11 +1603,6 @@ export type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
 // @public (undocumented)
 export const CounterBadgeDefinition: FASTElementDefinition<typeof CounterBadge>;
 
-// Warning: (ae-incompatible-release-tags) The symbol "CounterBadgeOptions" is marked as @public, but its signature references "BadgeOptions" which is marked as @internal
-//
-// @public
-export type CounterBadgeOptions = BadgeOptions;
-
 // @public
 export const CounterBadgeShape: {
     readonly circular: "circular";
@@ -1658,9 +1631,6 @@ export const CounterBadgeStyles: ElementStyles;
 // @public
 export const CounterBadgeTemplate: ElementViewTemplate<CounterBadge>;
 
-// @public
-export type CSSDisplayPropertyValue = 'block' | 'contents' | 'flex' | 'grid' | 'inherit' | 'initial' | 'inline' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline-table' | 'list-item' | 'none' | 'run-in' | 'table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row' | 'table-row-group';
-
 // @public (undocumented)
 export const curveAccelerateMax = "var(--curveAccelerateMax)";
 
@@ -1691,27 +1661,6 @@ export const curveLinear = "var(--curveLinear)";
 // @public
 export const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
 
-// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "DelegatesARIALink" because one of its declarations is marked as @internal
-//
-// @public
-export class DelegatesARIALink {
-    ariaExpanded: 'true' | 'false' | string | null;
-}
-
-// Warning: (ae-forgotten-export) The symbol "ARIAGlobalStatesAndProperties" needs to be exported by the entry point index.d.ts
-//
-// @internal
-export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
-}
-
-// @public
-export class DelegatesARIATextbox {
-}
-
-// @public (undocumented)
-export interface DelegatesARIATextbox extends ARIAGlobalStatesAndProperties {
-}
-
 // @public
 export class Dialog extends FASTElement {
     ariaDescribedby?: string;
@@ -1724,7 +1673,6 @@ export class Dialog extends FASTElement {
     handleClick(event: Event): boolean;
     handleKeydown: (e: KeyboardEvent) => boolean | void;
     hide(dismissed?: boolean): void;
-    // Warning: (ae-forgotten-export) The symbol "DialogModalType" needs to be exported by the entry point index.d.ts
     modalType: DialogModalType;
     modalTypeChanged(oldValue: DialogModalType, newValue: DialogModalType): void;
     noTitleAction: boolean;
@@ -1739,12 +1687,24 @@ export class Dialog extends FASTElement {
 // @public
 export const DialogDefinition: FASTElementDefinition<typeof Dialog>;
 
+// @public
+export const DialogModalType: {
+    readonly modal: "modal";
+    readonly nonModal: "non-modal";
+    readonly alert: "alert";
+};
+
+// @public (undocumented)
+export type DialogModalType = ValuesOf<typeof DialogModalType>;
+
 // @public
 export const DialogStyles: ElementStyles;
 
 // @public
 export const DialogTemplate: ElementViewTemplate<Dialog>;
 
+// Warning: (ae-forgotten-export) The symbol "CSSDisplayPropertyValue" needs to be exported by the entry point index.d.ts
+//
 // @public
 export function display(displayValue: CSSDisplayPropertyValue): string;
 
@@ -1893,9 +1853,6 @@ export const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMed
 // @public
 export const getDirection: (rootNode: HTMLElement) => Direction;
 
-// @public
-export const hidden = ":host([hidden]){display:none}";
-
 // @public
 class Image_2 extends FASTElement {
     block?: boolean;
@@ -1941,21 +1898,38 @@ export const ImageTemplate: ElementViewTemplate<Image_2>;
 export class Label extends FASTElement {
     disabled: boolean;
     required: boolean;
-    // Warning: (ae-forgotten-export) The symbol "LabelSize" needs to be exported by the entry point index.d.ts
     size?: LabelSize;
-    // Warning: (ae-forgotten-export) The symbol "LabelWeight" needs to be exported by the entry point index.d.ts
     weight?: LabelWeight;
 }
 
 // @public
 export const LabelDefinition: FASTElementDefinition<typeof Label>;
 
+// @public
+export const LabelSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+// @public
+export type LabelSize = ValuesOf<typeof LabelSize>;
+
 // @public
 export const LabelStyles: ElementStyles;
 
 // @public (undocumented)
 export const LabelTemplate: ElementViewTemplate<Label>;
 
+// @public
+export const LabelWeight: {
+    readonly regular: "regular";
+    readonly semibold: "semibold";
+};
+
+// @public
+export type LabelWeight = ValuesOf<typeof LabelWeight>;
+
 // @public
 export const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
 
@@ -2298,7 +2272,6 @@ export class RadioGroup extends FASTElement {
     name: string;
     // (undocumented)
     protected nameChanged(): void;
-    // Warning: (ae-forgotten-export) The symbol "RadioGroupOrientation" needs to be exported by the entry point index.d.ts
     orientation: RadioGroupOrientation;
     readOnly: boolean;
     // @internal (undocumented)
@@ -2314,6 +2287,18 @@ export class RadioGroup extends FASTElement {
 // @public
 export const RadioGroupDefinition: FASTElementDefinition<typeof RadioGroup>;
 
+// @public
+export const RadioGroupOrientation: {
+    readonly horizontal: "horizontal"; /**
+    * Radio Group orientation
+    * @public
+    */
+    readonly vertical: "vertical";
+};
+
+// @public
+export type RadioGroupOrientation = ValuesOf<typeof RadioGroupOrientation>;
+
 // @public
 export const RadioGroupStyles: ElementStyles;
 
@@ -2567,10 +2552,8 @@ export const spacingVerticalXXS = "var(--spacingVerticalXXS)";
 // @public (undocumented)
 export const spacingVerticalXXXL = "var(--spacingVerticalXXXL)";
 
-// Warning: (ae-forgotten-export) The symbol "ProgressRing" needs to be exported by the entry point index.d.ts
-//
 // @public
-export class Spinner extends ProgressRing {
+export class Spinner extends BaseProgress {
     appearance?: SpinnerAppearance;
     size?: SpinnerSize;
 }
@@ -2587,6 +2570,11 @@ export type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
 // @public (undocumented)
 export const SpinnerDefinition: FASTElementDefinition<typeof Spinner>;
 
+// @public
+export type SpinnerOptions = {
+    indeterminateIndicator?: StaticallyComposableHTML<Spinner>;
+};
+
 // @public
 export const SpinnerSize: {
     readonly tiny: "tiny";
@@ -2697,6 +2685,8 @@ export const TabPanelStyles: ElementStyles;
 // @public (undocumented)
 export const TabPanelTemplate: ElementViewTemplate<TabPanel, any>;
 
+// Warning: (ae-forgotten-export) The symbol "BaseTabs" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
 export class Tabs extends BaseTabs {
     // (undocumented)
@@ -2787,21 +2777,6 @@ export type TextAlign = ValuesOf<typeof TextAlign>;
 // @public
 export const TextDefinition: FASTElementDefinition<typeof Text_2>;
 
-// @public (undocumented)
-export type TextFieldOptions = StartEndOptions<TextInput>;
-
-// @public
-export const TextFieldType: {
-    readonly email: "email";
-    readonly password: "password";
-    readonly tel: "tel";
-    readonly text: "text";
-    readonly url: "url";
-};
-
-// @public
-export type TextFieldType = ValuesOf<typeof TextFieldType>;
-
 // @public
 export const TextFont: {
     readonly base: "base";
@@ -2856,13 +2831,15 @@ export class TextInput extends FormAssociatedTextField {
     spellcheck: boolean;
     // (undocumented)
     protected spellcheckChanged(): void;
-    type: TextFieldType;
+    type: TextInputType;
     // Warning: (ae-unresolved-inheritdoc-reference) The @inheritDoc reference could not be resolved: The package "@fluentui/web-components" does not have an export "FormAssociated"
     //
     // (undocumented)
     validate(): void;
 }
 
+// Warning: (ae-forgotten-export) The symbol "DelegatesARIATextbox" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
 export interface TextInput extends StartEnd, DelegatesARIATextbox {
 }
@@ -2891,6 +2868,9 @@ export type TextInputControlSize = ValuesOf<typeof TextInputControlSize>;
 // @public
 export const TextInputDefinition: FASTElementDefinition<typeof TextInput>;
 
+// @public (undocumented)
+export type TextInputOptions = StartEndOptions<TextInput>;
+
 // @public
 export const TextInputStyles: ElementStyles;
 
@@ -2899,6 +2879,18 @@ export const TextInputStyles: ElementStyles;
 // @internal (undocumented)
 export const TextInputTemplate: ElementViewTemplate<TextInput>;
 
+// @public
+export const TextInputType: {
+    readonly email: "email";
+    readonly password: "password";
+    readonly tel: "tel";
+    readonly text: "text";
+    readonly url: "url";
+};
+
+// @public
+export type TextInputType = ValuesOf<typeof TextInputType>;
+
 // @public
 export const TextSize: {
     readonly _100: "100";
@@ -2990,6 +2982,57 @@ export const ToggleButtonStyles: ElementStyles;
 // @public
 export const ToggleButtonTemplate: ElementViewTemplate<ToggleButton>;
 
+// @public (undocumented)
+export const typographyBody1StrongerStyles: CSSDirective;
+
+// @public (undocumented)
+export const typographyBody1StrongStyles: CSSDirective;
+
+// @public (undocumented)
+export const typographyBody1Styles: CSSDirective;
+
+// @public (undocumented)
+export const typographyBody2Styles: CSSDirective;
+
+// @public (undocumented)
+export const typographyCaption1StrongerStyles: CSSDirective;
+
+// @public (undocumented)
+export const typographyCaption1StrongStyles: CSSDirective;
+
+// @public (undocumented)
+export const typographyCaption1Styles: CSSDirective;
+
+// @public (undocumented)
+export const typographyCaption2StrongStyles: CSSDirective;
+
+// @public (undocumented)
+export const typographyCaption2Styles: CSSDirective;
+
+// @public (undocumented)
+export const typographyDisplayStyles: CSSDirective;
+
+// @public (undocumented)
+export const typographyLargeTitleStyles: CSSDirective;
+
+// @public (undocumented)
+export const typographySubtitle1Styles: CSSDirective;
+
+// @public (undocumented)
+export const typographySubtitle2StrongerStyles: CSSDirective;
+
+// @public (undocumented)
+export const typographySubtitle2Styles: CSSDirective;
+
+// @public (undocumented)
+export const typographyTitle1Styles: CSSDirective;
+
+// @public (undocumented)
+export const typographyTitle2Styles: CSSDirective;
+
+// @public (undocumented)
+export const typographyTitle3Styles: CSSDirective;
+
 // Warnings were encountered during analysis:
 //
 // dist/dts/accordion-item/accordion-item.d.ts:11:5 - (ae-forgotten-export) The symbol "StaticallyComposableHTML" needs to be exported by the entry point index.d.ts
diff --git a/packages/web-components/src/accordion-item/index.ts b/packages/web-components/src/accordion-item/index.ts
index 14613c95835a6..0ece099782f06 100644
--- a/packages/web-components/src/accordion-item/index.ts
+++ b/packages/web-components/src/accordion-item/index.ts
@@ -1,5 +1,5 @@
-export * from './accordion-item.js';
-export * from './accordion-item.options.js';
+export { AccordionItem, AccordionItemOptions } from './accordion-item.js';
+export { AccordionItemSize, AccordionItemExpandIconPosition } from './accordion-item.options.js';
 export { styles as accordionItemStyles } from './accordion-item.styles.js';
 export { definition as accordionItemDefinition } from './accordion-item.definition.js';
 export { template as accordionItemTemplate } from './accordion-item.template.js';
diff --git a/packages/web-components/src/accordion/index.ts b/packages/web-components/src/accordion/index.ts
index c6b994bfc7c02..a78691556e302 100644
--- a/packages/web-components/src/accordion/index.ts
+++ b/packages/web-components/src/accordion/index.ts
@@ -1,4 +1,5 @@
-export * from './accordion.js';
+export { Accordion } from './accordion.js';
+export { AccordionExpandMode } from './accordion.options.js';
 export { template as accordionTemplate } from './accordion.template.js';
 export { styles as accordionStyles } from './accordion.styles.js';
 export { definition as accordionDefinition } from './accordion.definition.js';
diff --git a/packages/web-components/src/anchor-button/index.ts b/packages/web-components/src/anchor-button/index.ts
index 0623781e9ad72..5b17e7dcaae22 100644
--- a/packages/web-components/src/anchor-button/index.ts
+++ b/packages/web-components/src/anchor-button/index.ts
@@ -1,4 +1,10 @@
-export * from './anchor-button.js';
-export * from './anchor-button.options.js';
+export { AnchorButton } from './anchor-button.js';
+export {
+  AnchorButtonOptions,
+  AnchorButtonAppearance,
+  AnchorButtonShape,
+  AnchorButtonSize,
+  AnchorTarget,
+} from './anchor-button.options.js';
 export { template as AnchorButtonTemplate } from './anchor-button.template.js';
 export { definition as AnchorButtonDefinition } from './anchor-button.definition.js';
diff --git a/packages/web-components/src/avatar/index.ts b/packages/web-components/src/avatar/index.ts
index 8bb35aee4dc2a..94ffd5f6b086f 100644
--- a/packages/web-components/src/avatar/index.ts
+++ b/packages/web-components/src/avatar/index.ts
@@ -1,5 +1,12 @@
-export * from './avatar.js';
-export * from './avatar.options.js';
+export { Avatar } from './avatar.js';
+export {
+  AvatarActive,
+  AvatarAppearance,
+  AvatarColor,
+  AvatarNamedColor,
+  AvatarShape,
+  AvatarSize,
+} from './avatar.options.js';
 export { template as AvatarTemplate } from './avatar.template.js';
 export { styles as AvatarStyles } from './avatar.styles.js';
 export { definition as AvatarDefinition } from './avatar.definition.js';
diff --git a/packages/web-components/src/badge/index.ts b/packages/web-components/src/badge/index.ts
index 92e3fdcd87214..1213fe39812bf 100644
--- a/packages/web-components/src/badge/index.ts
+++ b/packages/web-components/src/badge/index.ts
@@ -1,5 +1,5 @@
-export * from './badge.js';
-export * from './badge.options.js';
+export { Badge } from './badge.js';
+export { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
 export { template as BadgeTemplate } from './badge.template.js';
 export { styles as BadgeStyles } from './badge.styles.js';
 export { definition as BadgeDefinition } from './badge.definition.js';
diff --git a/packages/web-components/src/button/index.ts b/packages/web-components/src/button/index.ts
index 37df4b2a8edda..a8ea45396709c 100644
--- a/packages/web-components/src/button/index.ts
+++ b/packages/web-components/src/button/index.ts
@@ -1,5 +1,12 @@
-export * from './button.js';
-export * from './button.options.js';
+export { Button } from './button.js';
+export {
+  ButtonAppearance,
+  ButtonFormTarget,
+  ButtonShape,
+  ButtonSize,
+  ButtonType,
+  ButtonOptions,
+} from './button.options.js';
 export { template as ButtonTemplate } from './button.template.js';
 export { styles as ButtonStyles } from './button.styles.js';
 export { definition as ButtonDefinition } from './button.definition.js';
diff --git a/packages/web-components/src/checkbox/index.ts b/packages/web-components/src/checkbox/index.ts
index 2bba4c13d942c..44778771bed54 100644
--- a/packages/web-components/src/checkbox/index.ts
+++ b/packages/web-components/src/checkbox/index.ts
@@ -1,5 +1,5 @@
-export * from './checkbox.js';
-export * from './checkbox.options.js';
+export { Checkbox, CheckboxOptions } from './checkbox.js';
+export { CheckboxLabelPosition, CheckboxShape, CheckboxSize } from './checkbox.options.js';
 export { definition as CheckboxDefinition } from './checkbox.definition.js';
 export { template as CheckboxTemplate } from './checkbox.template.js';
 export { styles as CheckboxStyles } from './checkbox.styles.js';
diff --git a/packages/web-components/src/compound-button/index.ts b/packages/web-components/src/compound-button/index.ts
index e4e0bc601f76e..4628532108a5e 100644
--- a/packages/web-components/src/compound-button/index.ts
+++ b/packages/web-components/src/compound-button/index.ts
@@ -1,5 +1,5 @@
-export * from './compound-button.js';
-export * from './compound-button.options.js';
+export { CompoundButton } from './compound-button.js';
+export { CompoundButtonAppearance, CompoundButtonShape, CompoundButtonSize } from './compound-button.options.js';
 export { template as CompoundButtonTemplate } from './compound-button.template.js';
 export { styles as CompoundButtonStyles } from './compound-button.styles.js';
 export { definition as CompoundButtonDefinition } from './compound-button.definition.js';
diff --git a/packages/web-components/src/counter-badge/index.ts b/packages/web-components/src/counter-badge/index.ts
index 159c31d2e2f94..b13de0fa61286 100644
--- a/packages/web-components/src/counter-badge/index.ts
+++ b/packages/web-components/src/counter-badge/index.ts
@@ -1,5 +1,10 @@
-export * from './counter-badge.js';
-export * from './counter-badge.options.js';
+export { CounterBadge } from './counter-badge.js';
+export {
+  CounterBadgeAppearance,
+  CounterBadgeColor,
+  CounterBadgeShape,
+  CounterBadgeSize,
+} from './counter-badge.options.js';
 export { template as CounterBadgeTemplate } from './counter-badge.template.js';
 export { styles as CounterBadgeStyles } from './counter-badge.styles.js';
 export { definition as CounterBadgeDefinition } from './counter-badge.definition.js';
diff --git a/packages/web-components/src/dialog/index.ts b/packages/web-components/src/dialog/index.ts
index 12f8a223acb9b..cd49aa25da03b 100644
--- a/packages/web-components/src/dialog/index.ts
+++ b/packages/web-components/src/dialog/index.ts
@@ -1,4 +1,5 @@
-export * from './dialog.js';
+export { Dialog } from './dialog.js';
+export { DialogModalType } from './dialog.options.js';
 export { definition as DialogDefinition } from './dialog.definition.js';
 export { template as DialogTemplate } from './dialog.template.js';
 export { styles as DialogStyles } from './dialog.styles.js';
diff --git a/packages/web-components/src/divider/index.ts b/packages/web-components/src/divider/index.ts
index 5ee2dd0fcaf33..c5d945cfa38d0 100644
--- a/packages/web-components/src/divider/index.ts
+++ b/packages/web-components/src/divider/index.ts
@@ -1,5 +1,5 @@
-export * from './divider.js';
-export * from './divider.options.js';
+export { Divider } from './divider.js';
+export { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole } from './divider.options.js';
 export { definition as DividerDefinition } from './divider.definition.js';
 export { template as DividerTemplate } from './divider.template.js';
 export { styles as DividerStyles } from './divider.styles.js';
diff --git a/packages/web-components/src/image/index.ts b/packages/web-components/src/image/index.ts
index 29839a1248865..6ba3fcb6dc11f 100644
--- a/packages/web-components/src/image/index.ts
+++ b/packages/web-components/src/image/index.ts
@@ -1,5 +1,5 @@
-export * from './image.js';
-export * from './image.options.js';
+export { Image } from './image.js';
+export { ImageFit, ImageShape } from './image.options.js';
 export { definition as ImageDefinition } from './image.definition.js';
 export { template as ImageTemplate } from './image.template.js';
 export { styles as ImageStyles } from './image.styles.js';
diff --git a/packages/web-components/src/index-rollup.ts b/packages/web-components/src/index-rollup.ts
index ee01cc9bd3233..47c6b8175e001 100644
--- a/packages/web-components/src/index-rollup.ts
+++ b/packages/web-components/src/index-rollup.ts
@@ -1 +1,203 @@
-export * from './index.js';
+export {
+  Accordion,
+  AccordionExpandMode,
+  accordionTemplate,
+  accordionStyles,
+  accordionDefinition,
+} from './accordion/index.js';
+export {
+  AccordionItem,
+  AccordionItemSize,
+  AccordionItemExpandIconPosition,
+  accordionItemTemplate,
+  accordionItemStyles,
+  accordionItemDefinition,
+} from './accordion-item/index.js';
+export {
+  AnchorButton,
+  AnchorButtonAppearance,
+  AnchorButtonShape,
+  AnchorButtonSize,
+  AnchorTarget,
+  AnchorButtonTemplate,
+  AnchorButtonDefinition,
+} from './anchor-button/index.js';
+export {
+  Avatar,
+  AvatarActive,
+  AvatarAppearance,
+  AvatarColor,
+  AvatarNamedColor,
+  AvatarShape,
+  AvatarSize,
+  AvatarTemplate,
+  AvatarStyles,
+  AvatarDefinition,
+} from './avatar/index.js';
+export {
+  Badge,
+  BadgeAppearance,
+  BadgeColor,
+  BadgeShape,
+  BadgeSize,
+  BadgeTemplate,
+  BadgeStyles,
+  BadgeDefinition,
+} from './badge/index.js';
+export {
+  Button,
+  ButtonAppearance,
+  ButtonShape,
+  ButtonSize,
+  ButtonType,
+  ButtonTemplate,
+  ButtonStyles,
+  ButtonDefinition,
+} from './button/index.js';
+export {
+  Checkbox,
+  CheckboxLabelPosition,
+  CheckboxShape,
+  CheckboxSize,
+  CheckboxDefinition,
+  CheckboxTemplate,
+  CheckboxStyles,
+} from './checkbox/index.js';
+export {
+  CompoundButton,
+  CompoundButtonAppearance,
+  CompoundButtonShape,
+  CompoundButtonSize,
+  CompoundButtonTemplate,
+  CompoundButtonStyles,
+  CompoundButtonDefinition,
+} from './compound-button/index.js';
+export {
+  CounterBadge,
+  CounterBadgeAppearance,
+  CounterBadgeColor,
+  CounterBadgeShape,
+  CounterBadgeSize,
+  CounterBadgeTemplate,
+  CounterBadgeStyles,
+  CounterBadgeDefinition,
+} from './counter-badge/index.js';
+export { Dialog, DialogModalType, DialogDefinition, DialogTemplate, DialogStyles } from './dialog/index.js';
+export {
+  Divider,
+  DividerAlignContent,
+  DividerAppearance,
+  DividerOrientation,
+  DividerRole,
+  DividerDefinition,
+  DividerTemplate,
+  DividerStyles,
+} from './divider/index.js';
+export { Image, ImageFit, ImageShape, ImageDefinition, ImageTemplate, ImageStyles } from './image/index.js';
+export { Label, LabelSize, LabelWeight, LabelDefinition, LabelStyles, LabelTemplate } from './label/index.js';
+export { Menu, MenuTemplate, MenuStyles, MenuDefinition } from './menu/index.js';
+export {
+  MenuButton,
+  MenuButtonAppearance,
+  MenuButtonShape,
+  MenuButtonSize,
+  MenuButtonTemplate,
+  MenuButtonStyles,
+  MenuButtonDefinition,
+} from './menu-button/index.js';
+export {
+  MenuItem,
+  MenuItemRole,
+  roleForMenuItem,
+  MenuItemTemplate,
+  MenuItemStyles,
+  MenuItemDefinition,
+} from './menu-item/index.js';
+export { MenuList, MenuListTemplate, MenuListStyles, MenuListDefinition } from './menu-list/index.js';
+export {
+  ProgressBar,
+  ProgressBarShape,
+  ProgressBarThickness,
+  ProgressBarValidationState,
+  ProgressBarDefinition,
+  ProgressBarStyles,
+  ProgressBarTemplate,
+} from './progress-bar/index.js';
+export { Radio, RadioDefinition, RadioStyles, RadioTemplate } from './radio/index.js';
+export {
+  RadioGroup,
+  RadioGroupOrientation,
+  RadioGroupDefinition,
+  RadioGroupStyles,
+  RadioGroupTemplate,
+} from './radio-group/index.js';
+export {
+  Slider,
+  SliderMode,
+  SliderOrientation,
+  SliderSize,
+  SliderDefinition,
+  SliderStyles,
+  SliderTemplate,
+} from './slider/index.js';
+export {
+  Spinner,
+  SpinnerAppearance,
+  SpinnerSize,
+  SpinnerTemplate,
+  SpinnerStyles,
+  SpinnerDefinition,
+} from './spinner/index.js';
+export { Switch, SwitchLabelPosition, SwitchDefinition, SwitchStyles, SwitchTemplate } from './switch/index.js';
+export { Tab, TabTemplate, TabStyles, TabDefinition } from './tab/index.js';
+export { TabPanel, TabPanelTemplate, TabPanelStyles, TabPanelDefinition } from './tab-panel/index.js';
+export {
+  Tabs,
+  TabsAppearance,
+  TabsOrientation,
+  TabsSize,
+  TabsTemplate,
+  TabsStyles,
+  TabsDefinition,
+} from './tabs/index.js';
+export {
+  Text,
+  TextAlign,
+  TextFont,
+  TextSize,
+  TextWeight,
+  TextTemplate,
+  TextStyles,
+  TextDefinition,
+} from './text/index.js';
+export {
+  TextInput,
+  TextInputType,
+  TextInputAppearance,
+  TextInputControlSize,
+  TextInputTemplate,
+  TextInputStyles,
+  TextInputDefinition,
+} from './text-input/index.js';
+export {
+  ToggleButton,
+  ToggleButtonAppearance,
+  ToggleButtonShape,
+  ToggleButtonSize,
+  ToggleButtonTemplate,
+  ToggleButtonStyles,
+  ToggleButtonDefinition,
+} from './toggle-button/index.js';
+
+export { getDirection } from './utils/direction.js';
+export { display } from './utils/display.js';
+export {
+  forcedColorsStylesheetBehavior,
+  darkModeStylesheetBehavior,
+  lightModeStylesheetBehavior,
+} from './utils/behaviors/match-media-stylesheet-behavior.js';
+
+export { FluentDesignSystem } from './fluent-design-system.js';
+export { setTheme, setThemeFor } from './theme/index.js';
+
+export * from './theme/design-tokens.js';
diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
index 22f633130be87..4d0f88af6df42 100644
--- a/packages/web-components/src/index.ts
+++ b/packages/web-components/src/index.ts
@@ -1,35 +1,215 @@
-export * from './accordion/index.js';
-export * from './accordion-item/index.js';
-export * from './anchor-button/index.js';
-export * from './avatar/index.js';
-export * from './badge/index.js';
-export * from './button/index.js';
-export * from './checkbox/index.js';
-export * from './compound-button/index.js';
-export * from './counter-badge/index.js';
-export * from './dialog/index.js';
-export * from './divider/index.js';
-export * from './image/index.js';
-export * from './label/index.js';
-export * from './menu/index.js';
-export * from './menu-button/index.js';
-export * from './menu-item/index.js';
-export * from './menu-list/index.js';
-export * from './progress-bar/index.js';
-export * from './radio/index.js';
-export * from './radio-group/index.js';
-export * from './slider/index.js';
-export * from './spinner/index.js';
-export * from './switch/index.js';
-export * from './tabs/index.js';
-export * from './tab/index.js';
-export * from './tab-panel/index.js';
-export * from './text/index.js';
-export * from './text-input/index.js';
-export * from './toggle-button/index.js';
-
-export * from './fluent-design-system.js';
-export * from './theme/index.js';
+export {
+  Accordion,
+  AccordionExpandMode,
+  accordionTemplate,
+  accordionStyles,
+  accordionDefinition,
+} from './accordion/index.js';
+export {
+  AccordionItem,
+  AccordionItemOptions,
+  AccordionItemSize,
+  AccordionItemExpandIconPosition,
+  accordionItemTemplate,
+  accordionItemStyles,
+  accordionItemDefinition,
+} from './accordion-item/index.js';
+export {
+  AnchorButton,
+  AnchorButtonOptions,
+  AnchorButtonAppearance,
+  AnchorButtonShape,
+  AnchorButtonSize,
+  AnchorTarget,
+  AnchorButtonTemplate,
+  AnchorButtonDefinition,
+} from './anchor-button/index.js';
+export {
+  Avatar,
+  AvatarActive,
+  AvatarAppearance,
+  AvatarColor,
+  AvatarNamedColor,
+  AvatarShape,
+  AvatarSize,
+  AvatarTemplate,
+  AvatarStyles,
+  AvatarDefinition,
+} from './avatar/index.js';
+export {
+  Badge,
+  BadgeAppearance,
+  BadgeColor,
+  BadgeShape,
+  BadgeSize,
+  BadgeTemplate,
+  BadgeStyles,
+  BadgeDefinition,
+} from './badge/index.js';
+export {
+  Button,
+  ButtonAppearance,
+  ButtonFormTarget,
+  ButtonShape,
+  ButtonSize,
+  ButtonType,
+  ButtonOptions,
+  ButtonTemplate,
+  ButtonStyles,
+  ButtonDefinition,
+} from './button/index.js';
+export {
+  Checkbox,
+  CheckboxOptions,
+  CheckboxLabelPosition,
+  CheckboxShape,
+  CheckboxSize,
+  CheckboxDefinition,
+  CheckboxTemplate,
+  CheckboxStyles,
+} from './checkbox/index.js';
+export {
+  CompoundButton,
+  CompoundButtonAppearance,
+  CompoundButtonShape,
+  CompoundButtonSize,
+  CompoundButtonTemplate,
+  CompoundButtonStyles,
+  CompoundButtonDefinition,
+} from './compound-button/index.js';
+export {
+  CounterBadge,
+  CounterBadgeAppearance,
+  CounterBadgeColor,
+  CounterBadgeShape,
+  CounterBadgeSize,
+  CounterBadgeTemplate,
+  CounterBadgeStyles,
+  CounterBadgeDefinition,
+} from './counter-badge/index.js';
+export { Dialog, DialogModalType, DialogDefinition, DialogTemplate, DialogStyles } from './dialog/index.js';
+export {
+  Divider,
+  DividerAlignContent,
+  DividerAppearance,
+  DividerOrientation,
+  DividerRole,
+  DividerDefinition,
+  DividerTemplate,
+  DividerStyles,
+} from './divider/index.js';
+export { Image, ImageFit, ImageShape, ImageDefinition, ImageTemplate, ImageStyles } from './image/index.js';
+export { Label, LabelSize, LabelWeight, LabelDefinition, LabelStyles, LabelTemplate } from './label/index.js';
+export { Menu, MenuTemplate, MenuStyles, MenuDefinition } from './menu/index.js';
+export {
+  MenuButton,
+  MenuButtonAppearance,
+  MenuButtonShape,
+  MenuButtonSize,
+  MenuButtonOptions,
+  MenuButtonTemplate,
+  MenuButtonStyles,
+  MenuButtonDefinition,
+} from './menu-button/index.js';
+export {
+  MenuItem,
+  MenuItemColumnCount,
+  MenuItemOptions,
+  MenuItemRole,
+  roleForMenuItem,
+  MenuItemTemplate,
+  MenuItemStyles,
+  MenuItemDefinition,
+} from './menu-item/index.js';
+export { MenuList, MenuListTemplate, MenuListStyles, MenuListDefinition } from './menu-list/index.js';
+export {
+  ProgressBar,
+  ProgressOptions,
+  ProgressBarShape,
+  ProgressBarThickness,
+  ProgressBarValidationState,
+  ProgressBarDefinition,
+  ProgressBarStyles,
+  ProgressBarTemplate,
+} from './progress-bar/index.js';
+export { Radio, RadioControl, RadioOptions, RadioDefinition, RadioStyles, RadioTemplate } from './radio/index.js';
+export {
+  RadioGroup,
+  RadioGroupOrientation,
+  RadioGroupDefinition,
+  RadioGroupStyles,
+  RadioGroupTemplate,
+} from './radio-group/index.js';
+export {
+  Slider,
+  SliderConfiguration,
+  SliderMode,
+  SliderOptions,
+  SliderOrientation,
+  SliderSize,
+  SliderDefinition,
+  SliderStyles,
+  SliderTemplate,
+} from './slider/index.js';
+export {
+  Spinner,
+  SpinnerAppearance,
+  SpinnerSize,
+  SpinnerOptions,
+  SpinnerTemplate,
+  SpinnerStyles,
+  SpinnerDefinition,
+} from './spinner/index.js';
+export {
+  Switch,
+  SwitchOptions,
+  SwitchLabelPosition,
+  SwitchDefinition,
+  SwitchStyles,
+  SwitchTemplate,
+} from './switch/index.js';
+export { Tab, TabOptions, TabTemplate, TabStyles, TabDefinition } from './tab/index.js';
+export { TabPanel, TabPanelTemplate, TabPanelStyles, TabPanelDefinition } from './tab-panel/index.js';
+export {
+  Tabs,
+  TabsAppearance,
+  TabsOptions,
+  TabsOrientation,
+  TabsSize,
+  TabsTemplate,
+  TabsStyles,
+  TabsDefinition,
+} from './tabs/index.js';
+export {
+  Text,
+  TextAlign,
+  TextFont,
+  TextSize,
+  TextWeight,
+  TextTemplate,
+  TextStyles,
+  TextDefinition,
+} from './text/index.js';
+export {
+  TextInputOptions,
+  TextInput,
+  TextInputType,
+  TextInputAppearance,
+  TextInputControlSize,
+  TextInputTemplate,
+  TextInputStyles,
+  TextInputDefinition,
+} from './text-input/index.js';
+export {
+  ToggleButton,
+  ToggleButtonAppearance,
+  ToggleButtonOptions,
+  ToggleButtonShape,
+  ToggleButtonSize,
+  ToggleButtonTemplate,
+  ToggleButtonStyles,
+  ToggleButtonDefinition,
+} from './toggle-button/index.js';
 
 export {
   typographyBody1Styles,
@@ -51,6 +231,18 @@ export {
   typographyTitle3Styles,
 } from './styles/partials/typography.partials.js';
 
-export * from './utils/direction.js';
-export * from './utils/display.js';
-export * from './utils/behaviors/match-media-stylesheet-behavior.js';
+export { getDirection } from './utils/direction.js';
+export { display } from './utils/display.js';
+export {
+  forcedColorsStylesheetBehavior,
+  MatchMediaBehavior,
+  MatchMediaStyleSheetBehavior,
+  MediaQueryListListener,
+  darkModeStylesheetBehavior,
+  lightModeStylesheetBehavior,
+} from './utils/behaviors/match-media-stylesheet-behavior.js';
+
+export { FluentDesignSystem } from './fluent-design-system.js';
+export { setTheme, setThemeFor } from './theme/index.js';
+
+export * from './theme/design-tokens.js';
diff --git a/packages/web-components/src/label/index.ts b/packages/web-components/src/label/index.ts
index 0e5f0190ff161..fb926d1220351 100644
--- a/packages/web-components/src/label/index.ts
+++ b/packages/web-components/src/label/index.ts
@@ -1,4 +1,5 @@
-export * from './label.js';
+export { Label } from './label.js';
+export { LabelSize, LabelWeight } from './label.options.js';
 export { definition as LabelDefinition } from './label.definition.js';
 export { styles as LabelStyles } from './label.styles.js';
 export { template as LabelTemplate } from './label.template.js';
diff --git a/packages/web-components/src/menu-button/index.ts b/packages/web-components/src/menu-button/index.ts
index cf17a408fbe99..e3abeee7c48d7 100644
--- a/packages/web-components/src/menu-button/index.ts
+++ b/packages/web-components/src/menu-button/index.ts
@@ -1,5 +1,5 @@
-export * from './menu-button.js';
-export * from './menu-button.options.js';
+export { MenuButton } from './menu-button.js';
+export { MenuButtonAppearance, MenuButtonShape, MenuButtonSize, MenuButtonOptions } from './menu-button.options.js';
 export { template as MenuButtonTemplate } from './menu-button.template.js';
 export { styles as MenuButtonStyles } from '../button/button.styles.js';
 export { definition as MenuButtonDefinition } from './menu-button.definition.js';
diff --git a/packages/web-components/src/menu-button/menu-button.options.ts b/packages/web-components/src/menu-button/menu-button.options.ts
index 802a107e6f5d0..b4036a3e4fd72 100644
--- a/packages/web-components/src/menu-button/menu-button.options.ts
+++ b/packages/web-components/src/menu-button/menu-button.options.ts
@@ -1,4 +1,4 @@
-import type { ButtonOptions } from '../button/index.js';
+import type { ButtonOptions } from '../button/button.options.js';
 import { ButtonAppearance, ButtonShape, ButtonSize } from '../button/button.options.js';
 import type { ValuesOf } from '../utils/index.js';
 
diff --git a/packages/web-components/src/menu-item/index.ts b/packages/web-components/src/menu-item/index.ts
index 9e57815928612..df2b2eb4c6e33 100644
--- a/packages/web-components/src/menu-item/index.ts
+++ b/packages/web-components/src/menu-item/index.ts
@@ -1,4 +1,5 @@
-export * from './menu-item.js';
+export { MenuItem, MenuItemColumnCount, MenuItemOptions } from './menu-item.js';
+export { MenuItemRole, roleForMenuItem } from './menu-item.options.js';
 export { template as MenuItemTemplate } from './menu-item.template.js';
 export { styles as MenuItemStyles } from './menu-item.styles.js';
 export { definition as MenuItemDefinition } from './menu-item.definition.js';
diff --git a/packages/web-components/src/menu-list/index.ts b/packages/web-components/src/menu-list/index.ts
index 3448cf03ccf19..8bf3024cfbae4 100644
--- a/packages/web-components/src/menu-list/index.ts
+++ b/packages/web-components/src/menu-list/index.ts
@@ -1,4 +1,4 @@
-export * from './menu-list.js';
+export { MenuList } from './menu-list.js';
 export { template as MenuListTemplate } from './menu-list.template.js';
 export { styles as MenuListStyles } from './menu-list.styles.js';
 export { definition as MenuListDefinition } from './menu-list.definition.js';
diff --git a/packages/web-components/src/menu/index.ts b/packages/web-components/src/menu/index.ts
index ed356e7171a09..d237bd53b6824 100644
--- a/packages/web-components/src/menu/index.ts
+++ b/packages/web-components/src/menu/index.ts
@@ -1,4 +1,4 @@
-export * from './menu.js';
+export { Menu } from './menu.js';
 export { template as MenuTemplate } from './menu.template.js';
 export { styles as MenuStyles } from './menu.styles.js';
 export { definition as MenuDefinition } from './menu.definition.js';
diff --git a/packages/web-components/src/progress-bar/index.ts b/packages/web-components/src/progress-bar/index.ts
index 8689e08b832e3..922619fc0c3e2 100644
--- a/packages/web-components/src/progress-bar/index.ts
+++ b/packages/web-components/src/progress-bar/index.ts
@@ -1,5 +1,10 @@
-export * from './progress-bar.js';
-export * from './progress-bar.options.js';
+export { ProgressBar } from './progress-bar.js';
+export {
+  ProgressOptions,
+  ProgressBarShape,
+  ProgressBarThickness,
+  ProgressBarValidationState,
+} from './progress-bar.options.js';
 export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
 export { styles as ProgressBarStyles } from './progress-bar.styles.js';
 export { template as ProgressBarTemplate } from './progress-bar.template.js';
diff --git a/packages/web-components/src/progress-ring/progress-ring.options.ts b/packages/web-components/src/progress-ring/progress-ring.options.ts
deleted file mode 100644
index 7f70d78e914b8..0000000000000
--- a/packages/web-components/src/progress-ring/progress-ring.options.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
-import type { ProgressRing } from './progress-ring.js';
-
-/**
- * ProgressRing configuration options
- * @public
- */
-export type ProgressRingOptions = {
-  indeterminateIndicator?: StaticallyComposableHTML<ProgressRing>;
-};
diff --git a/packages/web-components/src/progress-ring/progress-ring.ts b/packages/web-components/src/progress-ring/progress-ring.ts
deleted file mode 100644
index 67b3ff5dc2dde..0000000000000
--- a/packages/web-components/src/progress-ring/progress-ring.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { BaseProgress } from '../progress-bar/base-progress.js';
-
-/**
- * An circular Progress HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
- *
- * @slot indeterminate - The slot for a custom indeterminate indicator
- * @slot determinate - The slot for a custom determinate indicator
- * @csspart progress - Represents the progress element
- * @csspart determinate - The determinate indicator
- * @csspart background - The background
- *
- * @public
- */
-export class ProgressRing extends BaseProgress {}
diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts
index 967f498a393fb..9862557adab43 100644
--- a/packages/web-components/src/radio-group/index.ts
+++ b/packages/web-components/src/radio-group/index.ts
@@ -1,4 +1,5 @@
-export * from './radio-group.js';
+export { RadioGroup } from './radio-group.js';
+export { RadioGroupOrientation } from './radio-group.options.js';
 export { definition as RadioGroupDefinition } from './radio-group.definition.js';
 export { styles as RadioGroupStyles } from './radio-group.styles.js';
 export { template as RadioGroupTemplate } from './radio-group.template.js';
diff --git a/packages/web-components/src/radio/index.ts b/packages/web-components/src/radio/index.ts
index e1af0f69389a1..25f52027363fb 100644
--- a/packages/web-components/src/radio/index.ts
+++ b/packages/web-components/src/radio/index.ts
@@ -1,4 +1,4 @@
-export * from './radio.js';
+export { Radio, RadioControl, RadioOptions } from './radio.js';
 export { definition as RadioDefinition } from './radio.definition.js';
 export { styles as RadioStyles } from './radio.styles.js';
 export { template as RadioTemplate } from './radio.template.js';
diff --git a/packages/web-components/src/slider/index.ts b/packages/web-components/src/slider/index.ts
index f48135c8b6264..6d227167c77fc 100644
--- a/packages/web-components/src/slider/index.ts
+++ b/packages/web-components/src/slider/index.ts
@@ -1,5 +1,5 @@
-export * from './slider.js';
-export * from './slider.options.js';
+export { Slider } from './slider.js';
+export { SliderConfiguration, SliderMode, SliderOptions, SliderOrientation, SliderSize } from './slider.options.js';
 export { definition as SliderDefinition } from './slider.definition.js';
 export { styles as SliderStyles } from './slider.styles.js';
 export { template as SliderTemplate } from './slider.template.js';
diff --git a/packages/web-components/src/spinner/index.ts b/packages/web-components/src/spinner/index.ts
index 2a6c2db892f33..4a41c2def87a1 100644
--- a/packages/web-components/src/spinner/index.ts
+++ b/packages/web-components/src/spinner/index.ts
@@ -1,5 +1,5 @@
-export * from './spinner.js';
-export * from './spinner.options.js';
+export { Spinner, SpinnerOptions } from './spinner.js';
+export { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 export { template as SpinnerTemplate } from './spinner.template.js';
 export { styles as SpinnerStyles } from './spinner.styles.js';
 export { definition as SpinnerDefinition } from './spinner.definition.js';
diff --git a/packages/web-components/src/spinner/spinner.template.ts b/packages/web-components/src/spinner/spinner.template.ts
index 569aeea632f86..32fd8c6865457 100644
--- a/packages/web-components/src/spinner/spinner.template.ts
+++ b/packages/web-components/src/spinner/spinner.template.ts
@@ -1,12 +1,11 @@
 import { html, when } from '@microsoft/fast-element';
 import type { ElementViewTemplate } from '@microsoft/fast-element';
-import { ProgressRingOptions } from '../progress-ring/progress-ring.options.js';
 import { staticallyCompose } from '../utils/index.js';
-import { Spinner } from './spinner.js';
+import { Spinner, SpinnerOptions } from './spinner.js';
 
 const progressSegments: number = 44;
 
-export function progressRingTemplate<T extends Spinner>(options: ProgressRingOptions = {}): ElementViewTemplate<T> {
+export function progressRingTemplate<T extends Spinner>(options: SpinnerOptions = {}): ElementViewTemplate<T> {
   return html<T>`
     <template
       role="progressbar"
diff --git a/packages/web-components/src/spinner/spinner.ts b/packages/web-components/src/spinner/spinner.ts
index 05a6fe7633c47..2820bd4834b2e 100644
--- a/packages/web-components/src/spinner/spinner.ts
+++ b/packages/web-components/src/spinner/spinner.ts
@@ -1,12 +1,21 @@
 import { attr } from '@microsoft/fast-element';
-import { ProgressRing } from '../progress-ring/progress-ring.js';
+import { BaseProgress } from '../progress-bar/base-progress.js';
+import { StaticallyComposableHTML } from '../utils/template-helpers.js';
 import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 
+/**
+ * Progress configuration options
+ * @public
+ */
+export type SpinnerOptions = {
+  indeterminateIndicator?: StaticallyComposableHTML<Spinner>;
+};
+
 /**
  * The base class used for constructing a fluent-spinner custom element
  * @public
  */
-export class Spinner extends ProgressRing {
+export class Spinner extends BaseProgress {
   /**
    * The size of the spinner
    *
diff --git a/packages/web-components/src/switch/index.ts b/packages/web-components/src/switch/index.ts
index 4f1e312e63122..1db8bc64b2dc8 100644
--- a/packages/web-components/src/switch/index.ts
+++ b/packages/web-components/src/switch/index.ts
@@ -1,5 +1,5 @@
-export * from './switch.js';
-export * from './switch.options.js';
+export { Switch, SwitchOptions } from './switch.js';
+export { SwitchLabelPosition } from './switch.options.js';
 export { definition as SwitchDefinition } from './switch.definition.js';
 export { styles as SwitchStyles } from './switch.styles.js';
 export { template as SwitchTemplate } from './switch.template.js';
diff --git a/packages/web-components/src/tab-panel/index.ts b/packages/web-components/src/tab-panel/index.ts
index a207477eac76d..ae9dc3fd1028f 100644
--- a/packages/web-components/src/tab-panel/index.ts
+++ b/packages/web-components/src/tab-panel/index.ts
@@ -1,4 +1,4 @@
-export * from './tab-panel.js';
+export { TabPanel } from './tab-panel.js';
 export { template as TabPanelTemplate } from './tab-panel.template.js';
 export { styles as TabPanelStyles } from './tab-panel.styles.js';
 export { definition as TabPanelDefinition } from './tab-panel.definition.js';
diff --git a/packages/web-components/src/tab/index.ts b/packages/web-components/src/tab/index.ts
index 08f46e1c8d896..ca2b080e332a0 100644
--- a/packages/web-components/src/tab/index.ts
+++ b/packages/web-components/src/tab/index.ts
@@ -1,4 +1,4 @@
-export * from './tab.js';
+export { Tab, TabOptions } from './tab.js';
 export { template as TabTemplate } from './tab.template.js';
 export { styles as TabStyles } from './tab.styles.js';
 export { definition as TabDefinition } from './tab.definition.js';
diff --git a/packages/web-components/src/tabs/index.ts b/packages/web-components/src/tabs/index.ts
index 14c0fbd3d9550..47086ab80ad21 100644
--- a/packages/web-components/src/tabs/index.ts
+++ b/packages/web-components/src/tabs/index.ts
@@ -1,5 +1,5 @@
-export * from './tabs.js';
-export * from './tabs.options.js';
+export { Tabs } from './tabs.js';
+export { TabsAppearance, TabsOptions, TabsOrientation, TabsSize } from './tabs.options.js';
 export { template as TabsTemplate } from './tabs.template.js';
 export { styles as TabsStyles } from './tabs.styles.js';
 export { definition as TabsDefinition } from './tabs.definition.js';
diff --git a/packages/web-components/src/text-input/index.ts b/packages/web-components/src/text-input/index.ts
index f6c3255d59653..12da2cc5f2777 100644
--- a/packages/web-components/src/text-input/index.ts
+++ b/packages/web-components/src/text-input/index.ts
@@ -1,5 +1,5 @@
-export * from './text-input.js';
-export * from './text-input.options.js';
+export { TextInputOptions, TextInput } from './text-input.js';
+export { TextInputType, TextInputAppearance, TextInputControlSize } from './text-input.options.js';
 export { template as TextInputTemplate } from './text-input.template.js';
 export { styles as TextInputStyles } from './text-input.styles.js';
 export { definition as TextInputDefinition } from './text-input.definition.js';
diff --git a/packages/web-components/src/text-input/text-input.options.ts b/packages/web-components/src/text-input/text-input.options.ts
index 0a161029c3119..9e9de9cbe7a21 100644
--- a/packages/web-components/src/text-input/text-input.options.ts
+++ b/packages/web-components/src/text-input/text-input.options.ts
@@ -37,29 +37,29 @@ export type TextInputAppearance = ValuesOf<typeof TextInputAppearance>;
  * Text field sub-types
  * @public
  */
-export const TextFieldType = {
+export const TextInputType = {
   /**
-   * An email TextField
+   * An email TextInput
    */
   email: 'email',
 
   /**
-   * A password TextField
+   * A password TextInput
    */
   password: 'password',
 
   /**
-   * A telephone TextField
+   * A telephone TextInput
    */
   tel: 'tel',
 
   /**
-   * A text TextField
+   * A text TextInput
    */
   text: 'text',
 
   /**
-   * A URL TextField
+   * A URL TextInput
    */
   url: 'url',
 } as const;
@@ -68,4 +68,4 @@ export const TextFieldType = {
  * Types for the text field sub-types
  * @public
  */
-export type TextFieldType = ValuesOf<typeof TextFieldType>;
+export type TextInputType = ValuesOf<typeof TextInputType>;
diff --git a/packages/web-components/src/text-input/text-input.template.ts b/packages/web-components/src/text-input/text-input.template.ts
index 0c7034d32068f..8050dea155f97 100644
--- a/packages/web-components/src/text-input/text-input.template.ts
+++ b/packages/web-components/src/text-input/text-input.template.ts
@@ -1,9 +1,9 @@
 import { ElementViewTemplate, html, ref, slotted } from '@microsoft/fast-element';
 import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
 import { whitespaceFilter } from '../utils/index.js';
-import type { TextFieldOptions, TextInput } from './text-input.js';
+import type { TextInput, TextInputOptions } from './text-input.js';
 
-export function textFieldTemplate<T extends TextInput>(options: TextFieldOptions = {}): ElementViewTemplate<T> {
+export function textFieldTemplate<T extends TextInput>(options: TextInputOptions = {}): ElementViewTemplate<T> {
   return html<T>`
     <label
       part="label"
diff --git a/packages/web-components/src/text-input/text-input.ts b/packages/web-components/src/text-input/text-input.ts
index db25c013c0661..2a41bfbb8cdfa 100644
--- a/packages/web-components/src/text-input/text-input.ts
+++ b/packages/web-components/src/text-input/text-input.ts
@@ -2,12 +2,12 @@ import { attr, nullableNumberConverter, observable, Updates } from '@microsoft/f
 import { ARIAGlobalStatesAndProperties, StartEnd, StartEndOptions } from '../patterns/index.js';
 import { applyMixins } from '../utils/apply-mixins.js';
 import { TextInputAppearance, TextInputControlSize } from './text-input.options.js';
-import { TextFieldType } from './text-input.options.js';
+import { TextInputType } from './text-input.options.js';
 import { FormAssociatedTextField } from './text-field.form-associated.js';
 
-export { TextFieldType };
+export { TextInputType };
 
-export type TextFieldOptions = StartEndOptions<TextInput>;
+export type TextInputOptions = StartEndOptions<TextInput>;
 
 export class TextInput extends FormAssociatedTextField {
   /**
@@ -84,7 +84,7 @@ export class TextInput extends FormAssociatedTextField {
    * HTML Attribute: type
    */
   @attr
-  public type: TextFieldType = TextFieldType.text;
+  public type: TextInputType = TextInputType.text;
   private typeChanged(): void {
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.type = this.type;
diff --git a/packages/web-components/src/text/index.ts b/packages/web-components/src/text/index.ts
index 663cf3ebbf645..72ba6d87272b8 100644
--- a/packages/web-components/src/text/index.ts
+++ b/packages/web-components/src/text/index.ts
@@ -1,5 +1,5 @@
-export * from './text.js';
-export * from './text.options.js';
+export { Text } from './text.js';
+export { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js';
 export { template as TextTemplate } from './text.template.js';
 export { styles as TextStyles } from './text.styles.js';
 export { definition as TextDefinition } from './text.definition.js';
diff --git a/packages/web-components/src/toggle-button/index.ts b/packages/web-components/src/toggle-button/index.ts
index 004c061cfd624..5ed2bfa2367d4 100644
--- a/packages/web-components/src/toggle-button/index.ts
+++ b/packages/web-components/src/toggle-button/index.ts
@@ -1,5 +1,10 @@
-export * from './toggle-button.js';
-export * from './toggle-button.options.js';
+export { ToggleButton } from './toggle-button.js';
+export {
+  ToggleButtonAppearance,
+  ToggleButtonOptions,
+  ToggleButtonShape,
+  ToggleButtonSize,
+} from './toggle-button.options.js';
 export { template as ToggleButtonTemplate } from './toggle-button.template.js';
 export { styles as ToggleButtonStyles } from './toggle-button.styles.js';
 export { definition as ToggleButtonDefinition } from './toggle-button.definition.js';