@fluentui/web-components 3.0.0-alpha.9 → 3.0.0-beta.2

package/docs/api-report.md

@@ -4,24 +4,43 @@
 
 ```ts
 
-import { CSSDesignToken } from '@microsoft/fast-foundation';
-import { DividerOrientation } from '@microsoft/fast-foundation';
-import { DividerRole } from '@microsoft/fast-foundation';
+import type { AnchorOptions as AnchorButtonOptions } from '@microsoft/fast-foundation/anchor.js';
+import type { ButtonOptions } from '@microsoft/fast-foundation/button.js';
+import { CSSDesignToken } from '@microsoft/fast-foundation/design-token.js';
+import { DividerOrientation } from '@microsoft/fast-foundation/divider.js';
+import { DividerRole } from '@microsoft/fast-foundation/divider.js';
 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 { FASTDivider } from '@microsoft/fast-foundation';
+import { FASTAccordion } from '@microsoft/fast-foundation/accordion.js';
+import { FASTAccordionItem } from '@microsoft/fast-foundation/accordion-item.js';
+import { FASTAnchor } from '@microsoft/fast-foundation/anchor.js';
+import { FASTButton } from '@microsoft/fast-foundation/button.js';
+import { FASTCheckbox } from '@microsoft/fast-foundation/checkbox.js';
+import { FASTDivider } from '@microsoft/fast-foundation/divider.js';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
-import { FASTProgress } from '@microsoft/fast-foundation';
-import { FASTProgressRing } from '@microsoft/fast-foundation';
-import { FASTSwitch } from '@microsoft/fast-foundation';
-import { StartEnd } from '@microsoft/fast-foundation';
-import { StartEndOptions } from '@microsoft/fast-foundation';
-import { StaticallyComposableHTML } from '@microsoft/fast-foundation';
+import { FASTMenu } from '@microsoft/fast-foundation/menu.js';
+import { FASTMenuItem } from '@microsoft/fast-foundation/menu-item.js';
+import { FASTProgress } from '@microsoft/fast-foundation/progress.js';
+import { FASTProgressRing } from '@microsoft/fast-foundation/progress-ring.js';
+import { FASTRadio } from '@microsoft/fast-foundation/radio.js';
+import { FASTRadioGroup } from '@microsoft/fast-foundation/radio-group.js';
+import { FASTSlider } from '@microsoft/fast-foundation/slider.js';
+import { FASTSwitch } from '@microsoft/fast-foundation/switch.js';
+import { FASTTab } from '@microsoft/fast-foundation/tab.js';
+import { FASTTabPanel } from '@microsoft/fast-foundation/tab-panel.js';
+import { FASTTabs } from '@microsoft/fast-foundation/tabs.js';
+import { FASTTextField } from '@microsoft/fast-foundation/text-field.js';
+import { MenuItemRole } from '@microsoft/fast-foundation/menu-item.js';
+import { RadioGroupOrientation } from '@microsoft/fast-foundation/radio-group.js';
+import { SliderOrientation } from '@microsoft/fast-foundation/slider.js';
+import { StartEnd } from '@microsoft/fast-foundation/patterns.js';
+import { StartEndOptions } from '@microsoft/fast-foundation/patterns.js';
+import type { StaticallyComposableHTML } from '@microsoft/fast-foundation/utilities.js';
+import { TabsOrientation } from '@microsoft/fast-foundation/tabs.js';
+import { TextFieldType as TextInputType } from '@microsoft/fast-foundation/text-field.js';
 import type { Theme } from '@fluentui/tokens';
-import { ValuesOf } from '@microsoft/fast-foundation';
+import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
 
 // @public
 export class Accordion extends FASTAccordion {
@@ -81,6 +100,64 @@ 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;
@@ -330,6 +407,107 @@ 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
+export class Checkbox extends FASTCheckbox {
+    labelPosition?: CheckboxLabelPosition;
+    shape?: CheckboxShape;
+    size?: CheckboxSize;
+}
+
+// @public
+export const CheckboxDefinition: FASTElementDefinition<typeof Checkbox>;
+
+// @public
+export const CheckboxLabelPosition: {
+    readonly before: "before";
+    readonly after: "after";
+};
+
+// @public (undocumented)
+export type CheckboxLabelPosition = ValuesOf<typeof CheckboxLabelPosition>;
+
+// @public
+export const CheckboxShape: {
+    readonly circular: "circular";
+    readonly square: "square";
+};
+
+// @public (undocumented)
+export type CheckboxShape = ValuesOf<typeof CheckboxShape>;
+
+// @public
+export const CheckboxSize: {
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+// @public (undocumented)
+export type CheckboxSize = ValuesOf<typeof CheckboxSize>;
+
+// @public
+export const CheckboxStyles: ElementStyles;
+
+// @public
+export const CheckboxTemplate: ElementViewTemplate<Checkbox>;
+
 // @public (undocumented)
 export const colorBackgroundOverlay: CSSDesignToken<string>;
 
@@ -1221,6 +1399,51 @@ 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
@@ -1332,9 +1555,6 @@ 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;
@@ -1397,6 +1617,13 @@ export const durationUltraFast: CSSDesignToken<string>;
 // @public (undocumented)
 export const durationUltraSlow: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const FluentDesignSystem: Readonly<{
+    prefix: "fluent";
+    shadowRootMode: "open";
+    registry: CustomElementRegistry;
+}>;
+
 // @public (undocumented)
 export const fontFamilyBase: CSSDesignToken<string>;
 
@@ -1489,6 +1716,25 @@ 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>;
 
@@ -1519,6 +1765,81 @@ export const lineHeightHero800: CSSDesignToken<string>;
 // @public (undocumented)
 export const lineHeightHero900: CSSDesignToken<string>;
 
+// @public
+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>;
+
+export { MenuItemRole }
+
+// @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;
@@ -1564,9 +1885,41 @@ 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;
 
+// @public (undocumented)
+export const setThemeFor: (element: FASTElement, theme: Theme) => void;
+
 // @public (undocumented)
 export const shadow16: CSSDesignToken<string>;
 
@@ -1603,6 +1956,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>;
 
@@ -1719,11 +2103,19 @@ 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 SwitchDefinition: FASTElementDefinition<typeof Switch>;
+
 // @public
 export const SwitchLabelPosition: {
     readonly above: "above";
@@ -1735,10 +2127,79 @@ export const SwitchLabelPosition: {
 export type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;
 
 // @public (undocumented)
-export const switchStyles: ElementStyles;
+export const SwitchStyles: ElementStyles;
 
 // @public (undocumented)
-export const switchTemplate: ElementViewTemplate<Switch>;
+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 {
@@ -1779,6 +2240,46 @@ export const TextFont: {
 // @public
 export type TextFont = ValuesOf<typeof TextFont>;
 
+// @public
+export class TextInput extends FASTTextField {
+    appearance?: TextInputAppearance;
+    controlSize?: TextInputControlSize;
+}
+
+// @public
+export const TextInputAppearance: {
+    readonly outline: "outline";
+    readonly underline: "underline";
+    readonly filledLighter: "filled-lighter";
+    readonly filledDarker: "filled-darker";
+};
+
+// @public
+export type TextInputAppearance = ValuesOf<typeof TextInputAppearance>;
+
+// @public
+export const TextInputControlSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+// @public
+export type TextInputControlSize = ValuesOf<typeof TextInputControlSize>;
+
+// @public
+export const TextInputDefinition: FASTElementDefinition<typeof TextInput>;
+
+// @public
+export const TextInputStyles: ElementStyles;
+
+// Warning: (ae-internal-missing-underscore) The name "TextInputTemplate" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const TextInputTemplate: ElementViewTemplate<TextInput>;
+
+export { TextInputType }
+
 // @public
 export const TextSize: {
     readonly _100: "100";
@@ -1815,6 +2316,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)
 
 ```