## API Report File for "@fluentui/web-components"

> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).

```ts

import { Accordion } from '@microsoft/fast-foundation';
import { AccordionItem } from '@microsoft/fast-foundation';
import { Anchor } from '@microsoft/fast-foundation';
import { Badge } from '@microsoft/fast-foundation';
import { BaseProgress } from '@microsoft/fast-foundation';
import { Button } from '@microsoft/fast-foundation';
import { Card } from '@microsoft/fast-foundation';
import { Checkbox } from '@microsoft/fast-foundation';
import { ColorRGBA64 } from '@microsoft/fast-colors';
import { CSSCustomPropertyBehavior } from '@microsoft/fast-foundation';
import { DensityOffset } from '@microsoft/fast-components-styles-msft';
import { DesignSystem } from '@microsoft/fast-components-styles-msft';
import { DesignSystemProvider } from '@microsoft/fast-foundation';
import { Dialog } from '@microsoft/fast-foundation';
import { Direction } from '@microsoft/fast-web-utilities';
import { Divider } from '@microsoft/fast-foundation';
import { ElementStyles } from '@microsoft/fast-element';
import { Flipper } from '@microsoft/fast-foundation';
import { Menu } from '@microsoft/fast-foundation';
import { MenuItem } from '@microsoft/fast-foundation';
import { Radio } from '@microsoft/fast-foundation';
import { RadioGroup } from '@microsoft/fast-foundation';
import { Slider } from '@microsoft/fast-foundation';
import { SliderLabel } from '@microsoft/fast-foundation';
import { Switch } from '@microsoft/fast-foundation';
import { Tab } from '@microsoft/fast-foundation';
import { TabPanel } from '@microsoft/fast-foundation';
import { Tabs } from '@microsoft/fast-foundation';
import { TextArea } from '@microsoft/fast-foundation';
import { TextField } from '@microsoft/fast-foundation';
import { TreeItem } from '@microsoft/fast-foundation';
import { TreeView } from '@microsoft/fast-foundation';

// Warning: (ae-internal-missing-underscore) The name "AccentButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
export const AccentButtonStyles: ElementStyles;

// @public
export const accentFillActiveBehavior: CSSCustomPropertyBehavior;

// @public
export const accentFillFocusBehavior: CSSCustomPropertyBehavior;

// @public
export const accentFillHoverBehavior: CSSCustomPropertyBehavior;

// @public
export const accentFillLargeActiveBehavior: CSSCustomPropertyBehavior;

// @public
export const accentFillLargeFocusBehavior: CSSCustomPropertyBehavior;

// @public
export const accentFillLargeHoverBehavior: CSSCustomPropertyBehavior;

// @public
export const accentFillLargeRestBehavior: CSSCustomPropertyBehavior;

// @public
export const accentFillLargeSelectedBehavior: CSSCustomPropertyBehavior;

// @public
export const accentFillRestBehavior: CSSCustomPropertyBehavior;

// @public
export const accentFillSelectedBehavior: CSSCustomPropertyBehavior;

// @public
export const accentForegroundActiveBehavior: CSSCustomPropertyBehavior;

// @public
export const accentForegroundCutRestBehavior: CSSCustomPropertyBehavior;

// @public
export const accentForegroundFocusBehavior: CSSCustomPropertyBehavior;

// @public
export const accentForegroundHoverBehavior: CSSCustomPropertyBehavior;

// @public
export const accentForegroundLargeActiveBehavior: CSSCustomPropertyBehavior;

// @public
export const accentForegroundLargeFocusBehavior: CSSCustomPropertyBehavior;

// @public
export const accentForegroundLargeHoverBehavior: CSSCustomPropertyBehavior;

// @public
export const accentForegroundLargeRestBehavior: CSSCustomPropertyBehavior;

// @public
export const accentForegroundRestBehavior: CSSCustomPropertyBehavior;

// @public
export const AccordionItemStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const AccordionStyles: import("@microsoft/fast-element").ElementStyles;

// Warning: (ae-internal-missing-underscore) The name "ambientShadow" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal
export const ambientShadow = "0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(.11 * (2 - var(--background-luminance, 1))))";

// @public
export type AnchorAppearance = ButtonAppearance | 'hypertext';

// @public
export const AnchorStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | string;

// @public
export const BadgeStyles: import("@microsoft/fast-element").ElementStyles;

// Warning: (ae-internal-missing-underscore) The name "BaseButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
export const BaseButtonStyles: ElementStyles;

// @public
export type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline' | 'stealth';

// @public
export const ButtonStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const CardStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const CheckboxStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const DialogStyles: import("@microsoft/fast-element").ElementStyles;

// Warning: (ae-internal-missing-underscore) The name "directionalShadow" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
export const directionalShadow = "0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(.13 * (2 - var(--background-luminance, 1))))";

// @public
export const DividerStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const elevation: string;

// @public
export const FlipperStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export class FluentAccordion extends Accordion {
}

// @public
export class FluentAccordionItem extends AccordionItem {
}

// @public
export class FluentAnchor extends Anchor {
    appearance: AnchorAppearance;
    // (undocumented)
    appearanceChanged(oldValue: AnchorAppearance, newValue: AnchorAppearance): void;
    // @internal (undocumented)
    connectedCallback(): void;
}

// @public
export class FluentBadge extends Badge {
    // (undocumented)
    appearance: BadgeAppearance;
    }

// @public
export class FluentButton extends Button {
    appearance: ButtonAppearance;
    // (undocumented)
    appearanceChanged(oldValue: ButtonAppearance, newValue: ButtonAppearance): void;
    // @internal (undocumented)
    connectedCallback(): void;
}

// @public
export class FluentCard extends Card {
}

// @public
export class FluentCheckbox extends Checkbox {
}

// @public
export class FluentDesignSystemProvider extends DesignSystemProvider implements Omit<DesignSystem, 'contrast' | 'fontWeight' | 'neutralForegroundDarkIndex' | 'neutralForegroundLightIndex'> {
    // (undocumented)
    accentBaseColor: string;
    // (undocumented)
    accentFillActiveDelta: number;
    // (undocumented)
    accentFillFocusDelta: number;
    // (undocumented)
    accentFillHoverDelta: number;
    // (undocumented)
    accentFillRestDelta: number;
    // (undocumented)
    accentFillSelectedDelta: number;
    // (undocumented)
    accentForegroundActiveDelta: number;
    // (undocumented)
    accentForegroundFocusDelta: number;
    // (undocumented)
    accentForegroundHoverDelta: number;
    // (undocumented)
    accentForegroundRestDelta: number;
    // (undocumented)
    accentPalette: string[];
    backgroundColor: string;
    // (undocumented)
    baseHeightMultiplier: number;
    // (undocumented)
    baseHorizontalSpacingMultiplier: number;
    // (undocumented)
    baseLayerLuminance: number;
    // (undocumented)
    cornerRadius: number;
    // (undocumented)
    density: DensityOffset;
    // (undocumented)
    designUnit: number;
    // (undocumented)
    direction: Direction;
    // (undocumented)
    disabledOpacity: number;
    // (undocumented)
    elevatedCornerRadius: number;
    // (undocumented)
    focusOutlineWidth: number;
    // (undocumented)
    neutralDividerRestDelta: number;
    // (undocumented)
    neutralFillActiveDelta: number;
    // (undocumented)
    neutralFillCardDelta: number;
    // (undocumented)
    neutralFillFocusDelta: number;
    // (undocumented)
    neutralFillHoverDelta: number;
    // (undocumented)
    neutralFillInputActiveDelta: number;
    // (undocumented)
    neutralFillInputFocusDelta: number;
    // (undocumented)
    neutralFillInputHoverDelta: number;
    // (undocumented)
    neutralFillInputRestDelta: number;
    // (undocumented)
    neutralFillInputSelectedDelta: number;
    // (undocumented)
    neutralFillRestDelta: number;
    // (undocumented)
    neutralFillSelectedDelta: number;
    // (undocumented)
    neutralFillStealthActiveDelta: number;
    // (undocumented)
    neutralFillStealthFocusDelta: number;
    // (undocumented)
    neutralFillStealthHoverDelta: number;
    // (undocumented)
    neutralFillStealthRestDelta: number;
    // (undocumented)
    neutralFillStealthSelectedDelta: number;
    // (undocumented)
    neutralFillToggleActiveDelta: number;
    // (undocumented)
    neutralFillToggleFocusDelta: number;
    // (undocumented)
    neutralFillToggleHoverDelta: number;
    // (undocumented)
    neutralForegroundActiveDelta: number;
    // (undocumented)
    neutralForegroundFocusDelta: number;
    // (undocumented)
    neutralForegroundHoverDelta: number;
    // (undocumented)
    neutralOutlineActiveDelta: number;
    // (undocumented)
    neutralOutlineFocusDelta: number;
    // (undocumented)
    neutralOutlineHoverDelta: number;
    // (undocumented)
    neutralOutlineRestDelta: number;
    // (undocumented)
    neutralPalette: string[];
    noPaint: boolean;
    // (undocumented)
    outlineWidth: number;
    // (undocumented)
    typeRampBaseFontSize: string;
    // (undocumented)
    typeRampBaseLineHeight: string;
    // (undocumented)
    typeRampMinus1FontSize: string;
    // (undocumented)
    typeRampMinus1LineHeight: string;
    // (undocumented)
    typeRampMinus2FontSize: string;
    // (undocumented)
    typeRampMinus2LineHeight: string;
    // (undocumented)
    typeRampPlus1FontSize: string;
    // (undocumented)
    typeRampPlus1LineHeight: string;
    // (undocumented)
    typeRampPlus2FontSize: string;
    // (undocumented)
    typeRampPlus2LineHeight: string;
    // (undocumented)
    typeRampPlus3FontSize: string;
    // (undocumented)
    typeRampPlus3LineHeight: string;
    // (undocumented)
    typeRampPlus4FontSize: string;
    // (undocumented)
    typeRampPlus4LineHeight: string;
    // (undocumented)
    typeRampPlus5FontSize: string;
    // (undocumented)
    typeRampPlus5LineHeight: string;
    // (undocumented)
    typeRampPlus6FontSize: string;
    // (undocumented)
    typeRampPlus6LineHeight: string;
}

// @public
export class FluentDialog extends Dialog {
}

// @public
export class FluentDivider extends Divider {
}

// @public
export class FluentFlipper extends Flipper {
}

// @public
export class FluentMenu extends Menu {
}

// @public
export class FluentMenuItem extends MenuItem {
}

// @public
export class FluentProgress extends BaseProgress {
}

// @public
export class FluentProgressRing extends BaseProgress {
}

// @public
export class FluentRadio extends Radio {
}

// @public
export class FluentRadioGroup extends RadioGroup {
}

// @public
export class FluentSlider extends Slider {
}

// @public
export class FluentSliderLabel extends SliderLabel {
}

// @public
export class FluentSwitch extends Switch {
}

// @public
export class FluentTab extends Tab {
}

// @public
export class FluentTabPanel extends TabPanel {
}

// @public
export class FluentTabs extends Tabs {
}

// @public
export class FluentTextArea extends TextArea {
    appearance: TextAreaAppearance;
    // @internal (undocumented)
    appearanceChanged(oldValue: TextAreaAppearance, newValue: TextAreaAppearance): void;
    // @internal (undocumented)
    connectedCallback(): void;
}

// @public
export class FluentTextField extends TextField {
    appearance: TextFieldAppearance;
    // @internal (undocumented)
    appearanceChanged(oldValue: TextFieldAppearance, newValue: TextFieldAppearance): void;
    // @internal (undocumented)
    connectedCallback(): void;
}

// @public
export class FluentTreeItem extends TreeItem {
}

// @public
export class FluentTreeView extends TreeView {
}

// @public
export const heightNumber = "(var(--base-height-multiplier) + var(--density)) * var(--design-unit)";

// Warning: (ae-internal-missing-underscore) The name "HypertextStyles" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
export const HypertextStyles: ElementStyles;

// @public
export const inlineEndBehavior: CSSCustomPropertyBehavior;

// @public
export const inlineStartBehavior: CSSCustomPropertyBehavior;

// Warning: (ae-internal-missing-underscore) The name "LightweightButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
export const LightweightButtonStyles: ElementStyles;

// @public
export const MenuItemStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const MenuStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const neutralDividerRestBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillActiveBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillCardRestBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillFocusBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillHoverBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillInputActiveBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillInputFocusBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillInputHoverBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillInputRestBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillRestBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillSelectedBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillStealthActiveBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillStealthFocusBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillStealthHoverBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillStealthRestBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillStealthSelectedBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillToggleActiveBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillToggleFocusBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillToggleHoverBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFillToggleRestBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFocusBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralFocusInnerAccentBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralForegroundActiveBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralForegroundFocusBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralForegroundHintBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralForegroundHintLargeBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralForegroundHoverBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralForegroundRestBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralForegroundToggleBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralForegroundToggleLargeBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralLayerCardBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralLayerCardContainerBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralLayerFloatingBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralLayerL1AltBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralLayerL1Behavior: CSSCustomPropertyBehavior;

// @public
export const neutralLayerL2Behavior: CSSCustomPropertyBehavior;

// @public
export const neutralLayerL3Behavior: CSSCustomPropertyBehavior;

// @public
export const neutralLayerL4Behavior: CSSCustomPropertyBehavior;

// @public
export const neutralOutlineActiveBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralOutlineFocusBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralOutlineHoverBehavior: CSSCustomPropertyBehavior;

// @public
export const neutralOutlineRestBehavior: CSSCustomPropertyBehavior;

// Warning: (ae-internal-missing-underscore) The name "OutlineButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
export const OutlineButtonStyles: ElementStyles;

// @public
export function parseColorString(color: string): ColorRGBA64;

// @public
export const ProgressRingStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const ProgressStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const RadioGroupStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const RadioStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const SliderLabelStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const SliderStyles: import("@microsoft/fast-element").ElementStyles;

// Warning: (ae-internal-missing-underscore) The name "StealthButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
//
// @internal (undocumented)
export const StealthButtonStyles: ElementStyles;

// @public
export const SwitchStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const TabPanelStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const TabsStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const TabStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export type TextAreaAppearance = 'filled' | 'outline';

// @public
export const TextAreaStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export type TextFieldAppearance = 'filled' | 'outline';

// @public
export const TextFieldStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const TreeItemStyles: import("@microsoft/fast-element").ElementStyles;

// @public
export const TreeViewStyles: import("@microsoft/fast-element").ElementStyles;


// (No @packageDocumentation comment for this package)

```