@fluentui/web-components 3.0.0-alpha.2 → 3.0.0-alpha.20

package/docs/api-report.md

@@ -4,26 +4,316 @@
 
 ```ts
 
+import { AnchorOptions as AnchorButtonOptions } from '@microsoft/fast-foundation';
+import { ButtonOptions } from '@microsoft/fast-foundation';
 import { CSSDesignToken } from '@microsoft/fast-foundation';
+import { DividerOrientation } from '@microsoft/fast-foundation';
+import { DividerRole } from '@microsoft/fast-foundation';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
+import { FASTAccordion } from '@microsoft/fast-foundation';
+import { FASTAccordionItem } from '@microsoft/fast-foundation';
+import { FASTAnchor } from '@microsoft/fast-foundation';
+import { FASTButton } from '@microsoft/fast-foundation';
+import { FASTDivider } from '@microsoft/fast-foundation';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
+import { FASTMenu } from '@microsoft/fast-foundation';
+import { FASTMenuItem } from '@microsoft/fast-foundation';
 import { FASTProgress } from '@microsoft/fast-foundation';
+import { FASTProgressRing } from '@microsoft/fast-foundation';
+import { FASTRadio } from '@microsoft/fast-foundation';
+import { FASTRadioGroup } from '@microsoft/fast-foundation';
+import { FASTSlider } from '@microsoft/fast-foundation';
+import { FASTSwitch } from '@microsoft/fast-foundation';
+import { FASTTab } from '@microsoft/fast-foundation';
+import { FASTTabPanel } from '@microsoft/fast-foundation';
+import { FASTTabs } from '@microsoft/fast-foundation';
+import { RadioGroupOrientation } from '@microsoft/fast-foundation';
+import { SliderOrientation } from '@microsoft/fast-foundation';
 import { StartEnd } from '@microsoft/fast-foundation';
 import { StartEndOptions } from '@microsoft/fast-foundation';
 import { StaticallyComposableHTML } from '@microsoft/fast-foundation';
+import { TabsOrientation } from '@microsoft/fast-foundation';
 import type { Theme } from '@fluentui/tokens';
 import { ValuesOf } from '@microsoft/fast-foundation';
 
+// @public
+export class Accordion extends FASTAccordion {
+}
+
+// @public
+export const accordionDefinition: FASTElementDefinition<typeof Accordion>;
+
+// Warning: (ae-internal-missing-underscore) The name "AccordionItem" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export class AccordionItem extends FASTAccordionItem {
+    // @public
+    block: boolean;
+    // @public
+    expandIconPosition?: AccordionItemExpandIconPosition;
+    // @public
+    size?: AccordionItemSize;
+}
+
+// Warning: (ae-incompatible-release-tags) The symbol "definition" is marked as @public, but its signature references "AccordionItem" which is marked as @internal
+//
+// @public
+export const accordionItemDefinition: FASTElementDefinition<typeof AccordionItem>;
+
+// @public
+export const AccordionItemExpandIconPosition: {
+    readonly start: "start";
+    readonly end: "end";
+};
+
+// @public
+export type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
+
+// @public
+export const AccordionItemSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+
+// @public
+export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
+
+// @public (undocumented)
+export const accordionItemStyles: ElementStyles;
+
+// Warning: (ae-incompatible-release-tags) The symbol "template" is marked as @public, but its signature references "AccordionItem" which is marked as @internal
+//
+// @public
+export const accordionItemTemplate: ElementViewTemplate<AccordionItem>;
+
+// @public (undocumented)
+export const accordionStyles: ElementStyles;
+
+// @public (undocumented)
+export const accordionTemplate: ElementViewTemplate<Accordion>;
+
+// @public
+export class AnchorButton extends FASTAnchor {
+    appearance?: AnchorButtonAppearance | undefined;
+    // (undocumented)
+    connectedCallback(): void;
+    disabled?: boolean;
+    // (undocumented)
+    protected disabledChanged(prev: boolean, next: boolean): void;
+    disabledFocusable?: boolean;
+    // (undocumented)
+    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+    // (undocumented)
+    disconnectedCallback(): void;
+    iconOnly: boolean;
+    shape?: AnchorButtonShape | undefined;
+    size?: AnchorButtonSize;
+}
+
+// @public
+export const AnchorButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+// @public
+export type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearance>;
+
+// @public
+export const AnchorButtonDefinition: FASTElementDefinition<typeof AnchorButton>;
+
+export { AnchorButtonOptions }
+
+// @public
+export const AnchorButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+// @public
+export type AnchorButtonShape = ValuesOf<typeof AnchorButtonShape>;
+
+// @public
+export const AnchorButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+// @public
+export type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
+
+// @public
+export const AnchorButtonTemplate: ElementViewTemplate<AnchorButton>;
+
+// @public
+export class Avatar extends FASTElement {
+    active?: AvatarActive | undefined;
+    appearance?: AvatarAppearance | undefined;
+    color?: AvatarColor;
+    colorId?: AvatarNamedColor | undefined;
+    static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[];
+    // @internal
+    generateColor(): AvatarColor | void;
+    // @internal
+    generateInitials(): string | void;
+    initials?: string | undefined;
+    name?: string | undefined;
+    shape?: AvatarShape | undefined;
+    size?: AvatarSize | undefined;
+}
+
+// @public
+export const AvatarActive: {
+    readonly active: "active";
+    readonly inactive: "inactive";
+};
+
+// @public
+export type AvatarActive = ValuesOf<typeof AvatarActive>;
+
+// @public
+export const AvatarAppearance: {
+    readonly ring: "ring";
+    readonly shadow: "shadow";
+    readonly ringShadow: "ring-shadow";
+};
+
+// @public
+export type AvatarAppearance = ValuesOf<typeof AvatarAppearance>;
+
+// @public
+export const AvatarColor: {
+    readonly darkRed: "dark-red";
+    readonly cranberry: "cranberry";
+    readonly red: "red";
+    readonly pumpkin: "pumpkin";
+    readonly peach: "peach";
+    readonly marigold: "marigold";
+    readonly gold: "gold";
+    readonly brass: "brass";
+    readonly brown: "brown";
+    readonly forest: "forest";
+    readonly seafoam: "seafoam";
+    readonly darkGreen: "dark-green";
+    readonly lightTeal: "light-teal";
+    readonly teal: "teal";
+    readonly steel: "steel";
+    readonly blue: "blue";
+    readonly royalBlue: "royal-blue";
+    readonly cornflower: "cornflower";
+    readonly navy: "navy";
+    readonly lavender: "lavender";
+    readonly purple: "purple";
+    readonly grape: "grape";
+    readonly lilac: "lilac";
+    readonly pink: "pink";
+    readonly magenta: "magenta";
+    readonly plum: "plum";
+    readonly beige: "beige";
+    readonly mink: "mink";
+    readonly platinum: "platinum";
+    readonly anchor: "anchor";
+    readonly neutral: "neutral";
+    readonly brand: "brand";
+    readonly colorful: "colorful";
+};
+
+// @public
+export type AvatarColor = ValuesOf<typeof AvatarColor>;
+
+// @public
+export const AvatarDefinition: FASTElementDefinition<typeof Avatar>;
+
+// @public
+export const AvatarNamedColor: {
+    readonly darkRed: "dark-red";
+    readonly cranberry: "cranberry";
+    readonly red: "red";
+    readonly pumpkin: "pumpkin";
+    readonly peach: "peach";
+    readonly marigold: "marigold";
+    readonly gold: "gold";
+    readonly brass: "brass";
+    readonly brown: "brown";
+    readonly forest: "forest";
+    readonly seafoam: "seafoam";
+    readonly darkGreen: "dark-green";
+    readonly lightTeal: "light-teal";
+    readonly teal: "teal";
+    readonly steel: "steel";
+    readonly blue: "blue";
+    readonly royalBlue: "royal-blue";
+    readonly cornflower: "cornflower";
+    readonly navy: "navy";
+    readonly lavender: "lavender";
+    readonly purple: "purple";
+    readonly grape: "grape";
+    readonly lilac: "lilac";
+    readonly pink: "pink";
+    readonly magenta: "magenta";
+    readonly plum: "plum";
+    readonly beige: "beige";
+    readonly mink: "mink";
+    readonly platinum: "platinum";
+    readonly anchor: "anchor";
+};
+
+// @public
+export type AvatarNamedColor = ValuesOf<typeof AvatarNamedColor>;
+
+// @public
+export const AvatarShape: {
+    readonly circular: "circular";
+    readonly square: "square";
+};
+
+// @public
+export type AvatarShape = ValuesOf<typeof AvatarShape>;
+
+// @public
+export const AvatarSize: {
+    readonly _16: 16;
+    readonly _20: 20;
+    readonly _24: 24;
+    readonly _28: 28;
+    readonly _32: 32;
+    readonly _36: 36;
+    readonly _40: 40;
+    readonly _48: 48;
+    readonly _56: 56;
+    readonly _64: 64;
+    readonly _72: 72;
+    readonly _96: 96;
+    readonly _120: 120;
+    readonly _128: 128;
+};
+
+// @public
+export type AvatarSize = ValuesOf<typeof AvatarSize>;
+
+// @public
+export const AvatarStyles: ElementStyles;
+
+// @public (undocumented)
+export const AvatarTemplate: ElementViewTemplate<Avatar>;
+
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Badge" because one of its declarations is marked as @internal
 //
 // @public
 export class Badge extends FASTElement {
     appearance: BadgeAppearance;
     color: BadgeColor;
-    shape: BadgeShape;
-    size: BadgeSize;
+    shape?: BadgeShape;
+    size?: BadgeSize;
 }
 
 // @internal
@@ -113,6 +403,64 @@ export const borderRadiusSmall: CSSDesignToken<string>;
 // @public (undocumented)
 export const borderRadiusXLarge: CSSDesignToken<string>;
 
+// @public
+export class Button extends FASTButton {
+    appearance?: ButtonAppearance | undefined;
+    // (undocumented)
+    connectedCallback(): void;
+    disabledFocusable?: boolean;
+    // (undocumented)
+    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+    // (undocumented)
+    disconnectedCallback(): void;
+    iconOnly: boolean;
+    shape?: ButtonShape | undefined;
+    size?: ButtonSize;
+}
+
+// @public
+export const ButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+// @public
+export type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
+
+// @public
+export const ButtonDefinition: FASTElementDefinition<typeof Button>;
+
+export { ButtonOptions }
+export { ButtonOptions as CompoundButtonOptions }
+export { ButtonOptions as MenuButtonOptions }
+export { ButtonOptions as ToggleButtonOptions }
+
+// @public
+export const ButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+// @public
+export type ButtonShape = ValuesOf<typeof ButtonShape>;
+
+// @public
+export const ButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+// @public
+export type ButtonSize = ValuesOf<typeof ButtonSize>;
+
+// @public
+export const ButtonTemplate: ElementViewTemplate<Button>;
+
 // @public (undocumented)
 export const colorBackgroundOverlay: CSSDesignToken<string>;
 
@@ -431,9 +779,15 @@ export const colorNeutralShadowKeyLighter: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorNeutralStencil1: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorNeutralStencil1Alpha: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorNeutralStencil2: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorNeutralStencil2Alpha: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorNeutralStroke1: CSSDesignToken<string>;
 
@@ -674,6 +1028,9 @@ export const colorPaletteGreenForeground2: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorPaletteGreenForeground3: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorPaletteGreenForegroundInverted: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorPaletteLavenderBackground2: CSSDesignToken<string>;
 
@@ -863,6 +1220,9 @@ export const colorPaletteRedForeground2: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorPaletteRedForeground3: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorPaletteRedForegroundInverted: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorPaletteRoyalBlueBackground2: CSSDesignToken<string>;
 
@@ -926,6 +1286,9 @@ export const colorPaletteYellowForeground2: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorPaletteYellowForeground3: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorPaletteYellowForegroundInverted: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorScrollbarOverlay: CSSDesignToken<string>;
 
@@ -989,12 +1352,57 @@ export const colorTransparentStrokeDisabled: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorTransparentStrokeInteractive: CSSDesignToken<string>;
 
+// @public
+export class CompoundButton extends Button {
+}
+
+// @public
+export const CompoundButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+// @public
+export type CompoundButtonAppearance = ValuesOf<typeof CompoundButtonAppearance>;
+
+// @public
+export const CompoundButtonDefinition: FASTElementDefinition<typeof CompoundButton>;
+
+// @public
+export const CompoundButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+// @public
+export type CompoundButtonShape = ValuesOf<typeof CompoundButtonShape>;
+
+// @public
+export const CompoundButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+// @public
+export type CompoundButtonSize = ValuesOf<typeof CompoundButtonSize>;
+
+// @public (undocumented)
+export const CompoundButtonStyles: ElementStyles;
+
+// @public
+export const CompoundButtonTemplate: ElementViewTemplate<CompoundButton>;
+
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "CounterBadge" because one of its declarations is marked as @internal
 //
 // @public
 export class CounterBadge extends FASTElement {
-    appearance: CounterBadgeAppearance;
-    color: CounterBadgeColor;
+    appearance?: CounterBadgeAppearance;
+    color?: CounterBadgeColor;
     count: number;
     // (undocumented)
     protected countChanged(): void;
@@ -1004,9 +1412,9 @@ export class CounterBadge extends FASTElement {
     protected overflowCountChanged(): void;
     // @internal
     setCount(): string | void;
-    shape: CounterBadgeShape;
+    shape?: CounterBadgeShape;
     showZero: boolean;
-    size: CounterBadgeSize;
+    size?: CounterBadgeSize;
 }
 
 // @internal
@@ -1100,6 +1508,50 @@ export const curveEasyEaseMax: CSSDesignToken<string>;
 // @public (undocumented)
 export const curveLinear: CSSDesignToken<string>;
 
+// @public
+export const definition: FASTElementDefinition<typeof Switch>;
+
+// @public
+export class Divider extends FASTDivider {
+    alignContent?: DividerAlignContent;
+    appearance?: DividerAppearance;
+    inset?: boolean;
+}
+
+// @public
+export const DividerAlignContent: {
+    readonly center: "center";
+    readonly start: "start";
+    readonly end: "end";
+};
+
+// @public
+export type DividerAlignContent = ValuesOf<typeof DividerAlignContent>;
+
+// @public
+export const DividerAppearance: {
+    readonly strong: "strong";
+    readonly brand: "brand";
+    readonly subtle: "subtle";
+    readonly default: "default";
+};
+
+// @public
+export type DividerAppearance = ValuesOf<typeof DividerAppearance>;
+
+// @public
+export const DividerDefinition: FASTElementDefinition<typeof Divider>;
+
+export { DividerOrientation }
+
+export { DividerRole }
+
+// @public
+export const DividerStyles: ElementStyles;
+
+// @public
+export const DividerTemplate: ElementViewTemplate<Divider>;
+
 // @public (undocumented)
 export const durationFast: CSSDesignToken<string>;
 
@@ -1172,6 +1624,66 @@ export const fontWeightRegular: CSSDesignToken<string>;
 // @public (undocumented)
 export const fontWeightSemibold: CSSDesignToken<string>;
 
+// @public
+class Image_2 extends FASTElement {
+    block?: boolean;
+    bordered?: boolean;
+    fit?: ImageFit;
+    shadow?: boolean;
+    shape?: ImageShape;
+}
+export { Image_2 as Image }
+
+// @public
+export const ImageDefinition: FASTElementDefinition<typeof Image_2>;
+
+// @public
+export const ImageFit: {
+    readonly none: "none";
+    readonly center: "center";
+    readonly contain: "contain";
+    readonly cover: "cover";
+    readonly default: "default";
+};
+
+// @public
+export type ImageFit = ValuesOf<typeof ImageFit>;
+
+// @public
+export const ImageShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+// @public (undocumented)
+export type ImageShape = ValuesOf<typeof ImageShape>;
+
+// @public
+export const ImageStyles: ElementStyles;
+
+// @public
+export const ImageTemplate: ElementViewTemplate<Image_2>;
+
+// @public
+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 LabelStyles: ElementStyles;
+
+// @public (undocumented)
+export const LabelTemplate: ElementViewTemplate<Label>;
+
 // @public (undocumented)
 export const lineHeightBase100: CSSDesignToken<string>;
 
@@ -1203,14 +1715,88 @@ export const lineHeightHero800: CSSDesignToken<string>;
 export const lineHeightHero900: CSSDesignToken<string>;
 
 // @public
-export class ProgressBar extends FASTProgress {
-    shape: ProgressBarShape;
-    thickness: ProgressBarThickness;
+export class MenuButton extends Button {
+}
+
+// @public
+export const MenuButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+// @public
+export type MenuButtonAppearance = ValuesOf<typeof MenuButtonAppearance>;
+
+// @public
+export const MenuButtonDefinition: FASTElementDefinition<typeof MenuButton>;
+
+// @public
+export const MenuButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+// @public
+export type MenuButtonShape = ValuesOf<typeof MenuButtonShape>;
+
+// @public
+export const MenuButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+// @public
+export type MenuButtonSize = ValuesOf<typeof MenuButtonSize>;
+
+// @public
+export const MenuButtonTemplate: ElementViewTemplate<MenuButton>;
+
+// @public
+export class MenuItem extends FASTMenuItem {
+}
+
+// @public (undocumented)
+export type MenuItemColumnCount = 0 | 1 | 2;
+
+// @public
+export const MenuItemDefinition: FASTElementDefinition<typeof MenuItem>;
+
+// @public
+export const MenuItemStyles: ElementStyles;
+
+// @public (undocumented)
+export const MenuItemTemplate: ElementViewTemplate<MenuItem>;
+
+// @public
+export class MenuList extends FASTMenu {
+    // (undocumented)
+    protected setItems(): void;
+}
+
+// @public
+export const MenuListDefinition: FASTElementDefinition<typeof MenuList>;
+
+// @public
+export const MenuListStyles: ElementStyles;
+
+// @public (undocumented)
+export const MenuListTemplate: ElementViewTemplate<MenuList>;
+
+// @public
+class ProgressBar_2 extends FASTProgress {
+    shape?: ProgressBarShape;
+    thickness?: ProgressBarThickness;
     validationState: ProgressBarValidationState | null;
 }
+export { ProgressBar_2 as ProgressBar }
 
 // @public
-export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar>;
+export const ProgressBarDefinition: FASTElementDefinition<typeof ProgressBar_2>;
 
 // @public
 export const ProgressBarShape: {
@@ -1225,7 +1811,7 @@ export type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
 export const ProgressBarStyles: ElementStyles;
 
 // @public (undocumented)
-export const ProgressBarTemplate: ElementViewTemplate<ProgressBar>;
+export const ProgressBarTemplate: ElementViewTemplate<ProgressBar_2>;
 
 // @public
 export const ProgressBarThickness: {
@@ -1246,6 +1832,35 @@ export const ProgressBarValidationState: {
 // @public
 export type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
 
+// @public
+export class Radio extends FASTRadio {
+}
+
+// @public
+export const RadioDefinition: FASTElementDefinition<typeof Radio>;
+
+// @public
+export class RadioGroup extends FASTRadioGroup {
+    stacked: boolean;
+}
+
+// @public
+export const RadioGroupDefinition: FASTElementDefinition<typeof RadioGroup>;
+
+export { RadioGroupOrientation }
+
+// @public
+export const RadioGroupStyles: ElementStyles;
+
+// @public (undocumented)
+export const RadioGroupTemplate: ElementViewTemplate<RadioGroup>;
+
+// @public
+export const RadioStyles: ElementStyles;
+
+// @public (undocumented)
+export const RadioTemplate: ElementViewTemplate<Radio>;
+
 // @public
 export const setTheme: (theme: Theme) => void;
 
@@ -1285,6 +1900,37 @@ export const shadow8: CSSDesignToken<string>;
 // @public (undocumented)
 export const shadow8Brand: CSSDesignToken<string>;
 
+// @public
+export class Slider extends FASTSlider {
+    // (undocumented)
+    connectedCallback(): void;
+    // (undocumented)
+    disconnectedCallback(): void;
+    // (undocumented)
+    handleChange(source: any, propertyName: string): void;
+    size?: SliderSize;
+}
+
+// @public
+export const SliderDefinition: FASTElementDefinition<typeof Slider>;
+
+export { SliderOrientation }
+
+// @public
+export const SliderSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+};
+
+// @public
+export type SliderSize = ValuesOf<typeof SliderSize>;
+
+// @public
+export const SliderStyles: ElementStyles;
+
+// @public (undocumented)
+export const SliderTemplate: ElementViewTemplate<FASTSlider>;
+
 // @public (undocumented)
 export const spacingHorizontalL: CSSDesignToken<string>;
 
@@ -1351,6 +1997,44 @@ export const spacingVerticalXXS: CSSDesignToken<string>;
 // @public (undocumented)
 export const spacingVerticalXXXL: CSSDesignToken<string>;
 
+// @public
+export class Spinner extends FASTProgressRing {
+    appearance?: SpinnerAppearance;
+    size?: SpinnerSize;
+}
+
+// @public
+export const SpinnerAppearance: {
+    readonly primary: "primary";
+    readonly inverted: "inverted";
+};
+
+// @public
+export type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
+
+// @public
+export const SpinnerDefinition: FASTElementDefinition<typeof Spinner>;
+
+// @public
+export const SpinnerSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+    readonly huge: "huge";
+};
+
+// @public
+export type SpinnerSize = ValuesOf<typeof SpinnerSize>;
+
+// @public (undocumented)
+export const SpinnerStyles: ElementStyles;
+
+// @public (undocumented)
+export const SpinnerTemplate: ElementViewTemplate<Spinner>;
+
 // @public (undocumented)
 export const strokeWidthThick: CSSDesignToken<string>;
 
@@ -1363,18 +2047,113 @@ export const strokeWidthThickest: CSSDesignToken<string>;
 // @public (undocumented)
 export const strokeWidthThin: CSSDesignToken<string>;
 
+// @public (undocumented)
+const styles: ElementStyles;
+export { styles as ButtonStyles }
+export { styles as MenuButtonStyles }
+
+// @public (undocumented)
+export class Switch extends FASTSwitch {
+    labelPosition: SwitchLabelPosition | undefined;
+}
+
+// @public
+export const SwitchLabelPosition: {
+    readonly above: "above";
+    readonly after: "after";
+    readonly before: "before";
+};
+
+// @public
+export type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;
+
+// @public (undocumented)
+export const switchStyles: ElementStyles;
+
+// @public (undocumented)
+export const switchTemplate: ElementViewTemplate<Switch>;
+
+// @public
+export class Tab extends FASTTab {
+    // (undocumented)
+    connectedCallback(): void;
+}
+
+// @public (undocumented)
+export const TabDefinition: FASTElementDefinition<typeof Tab>;
+
+// @public (undocumented)
+export class TabPanel extends FASTTabPanel {
+}
+
+// @public (undocumented)
+export const TabPanelDefinition: FASTElementDefinition<typeof TabPanel>;
+
+// @public (undocumented)
+export const TabPanelStyles: ElementStyles;
+
+// @public (undocumented)
+export const TabPanelTemplate: ElementViewTemplate<FASTTabPanel, any>;
+
+// @public
+export class Tabs extends FASTTabs {
+    // (undocumented)
+    activeidChanged(oldValue: string, newValue: string): void;
+    appearance?: TabsAppearance;
+    disabled?: boolean;
+    size?: TabsSize;
+    // (undocumented)
+    tabsChanged(): void;
+}
+
+// @public (undocumented)
+export const TabsAppearance: {
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+
+// @public (undocumented)
+export type TabsAppearance = ValuesOf<typeof TabsAppearance>;
+
+// @public (undocumented)
+export const TabsDefinition: FASTElementDefinition<typeof Tabs>;
+
+export { TabsOrientation }
+
+// @public (undocumented)
+export const TabsSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+// @public (undocumented)
+export type TabsSize = ValuesOf<typeof TabsSize>;
+
+// @public (undocumented)
+export const TabsStyles: ElementStyles;
+
+// @public (undocumented)
+export const TabsTemplate: ElementViewTemplate<FASTTabs, any>;
+
+// @public (undocumented)
+export const TabStyles: ElementStyles;
+
+// @public (undocumented)
+export const TabTemplate: ElementViewTemplate<FASTTab, any>;
+
 // @public
 class Text_2 extends FASTElement {
-    align: TextAlign;
+    align?: TextAlign;
     block: boolean;
-    font: TextFont;
+    font?: TextFont;
     italic: boolean;
     nowrap: boolean;
-    size: TextSize;
+    size?: TextSize;
     strikethrough: boolean;
     truncate: boolean;
     underline: boolean;
-    weight: TextWeight;
+    weight?: TextWeight;
 }
 export { Text_2 as Text }
 
@@ -1438,6 +2217,72 @@ export const TextWeight: {
 // @public
 export type TextWeight = ValuesOf<typeof TextWeight>;
 
+// @public
+export class ToggleButton extends Button {
+    constructor();
+    checked: boolean;
+    checkedAttribute: boolean;
+    // (undocumented)
+    protected checkedAttributeChanged(): void;
+    // (undocumented)
+    protected checkedChanged(prev: boolean | undefined, next: boolean): void;
+    // (undocumented)
+    connectedCallback(): void;
+    currentChecked: boolean;
+    // (undocumented)
+    currentCheckedChanged(prev: boolean | undefined, next: boolean): void;
+    // (undocumented)
+    defaultChecked: boolean;
+    // (undocumented)
+    protected defaultCheckedChanged(): void;
+    protected dirtyChecked: boolean;
+    // (undocumented)
+    disconnectedCallback(): void;
+    // @internal (undocumented)
+    protected handleToggleButtonClick: (e: MouseEvent) => void;
+}
+
+// @public
+export const ToggleButtonAppearance: {
+    readonly primary: "primary";
+    readonly outline: "outline";
+    readonly subtle: "subtle";
+    readonly secondary: "secondary";
+    readonly transparent: "transparent";
+};
+
+// @public
+export type ToggleButtonAppearance = ValuesOf<typeof ToggleButtonAppearance>;
+
+// @public
+export const ToggleButtonDefinition: FASTElementDefinition<typeof ToggleButton>;
+
+// @public
+export const ToggleButtonShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+// @public
+export type ToggleButtonShape = ValuesOf<typeof ToggleButtonShape>;
+
+// @public
+export const ToggleButtonSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+// @public
+export type ToggleButtonSize = ValuesOf<typeof ToggleButtonSize>;
+
+// @public (undocumented)
+export const ToggleButtonStyles: ElementStyles;
+
+// @public
+export const ToggleButtonTemplate: ElementViewTemplate<ToggleButton>;
+
 // (No @packageDocumentation comment for this package)
 
 ```