@fluentui/web-components 3.0.0-alpha.16 → 3.0.0-alpha.18

package/docs/api-report.md

@@ -4,6 +4,7 @@
 
 ```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';
@@ -12,6 +13,7 @@ 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';
@@ -89,6 +91,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;
@@ -369,7 +429,9 @@ export type ButtonAppearance = ValuesOf<typeof ButtonAppearance>;
 export const ButtonDefinition: FASTElementDefinition<typeof Button>;
 
 export { ButtonOptions }
+export { ButtonOptions as CompoundButtonOptions }
 export { ButtonOptions as MenuButtonOptions }
+export { ButtonOptions as ToggleButtonOptions }
 
 // @public
 export const ButtonShape: {
@@ -1285,6 +1347,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
@@ -2045,6 +2152,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)
 
 ```

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
   "sideEffects": false,
-  "version": "3.0.0-alpha.16",
+  "version": "3.0.0-alpha.18",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -32,6 +32,10 @@
       "types": "./dist/esm/accordion-item/define.d.ts",
       "default": "./dist/esm/accordion-item/define.js"
     },
+    "./anchor-button": {
+      "types": "./dist/esm/anchor-button/define.d.ts",
+      "default": "./dist/esm/anchor-button/define.js"
+    },
     "./avatar": {
       "types": "./dist/esm/avatar/define.d.ts",
       "default": "./dist/esm/avatar/define.js"
@@ -44,6 +48,10 @@
       "types": "./dist/esm/button/define.d.ts",
       "default": "./dist/esm/button/define.js"
     },
+    "./compound-button": {
+      "types": "./dist/esm/compound-button/define.d.ts",
+      "default": "./dist/esm/compound-button/define.js"
+    },
     "./counter-badge": {
       "types": "./dist/esm/counter-badge/define.d.ts",
       "default": "./dist/esm/counter-badge/define.js"
@@ -95,6 +103,10 @@
     "./text": {
       "types": "./dist/esm/text/define.d.ts",
       "default": "./dist/esm/text/define.js"
+    },
+    "./toggle-button": {
+      "types": "./dist/esm/toggle-button/define.d.ts",
+      "default": "./dist/esm/toggle-button/define.js"
     }
   },
   "scripts": {