@fluentui/web-components 3.0.0-beta.6 → 3.0.0-beta.60

package/dist/dts/anchor-button/anchor-button.d.ts

@@ -1,64 +1,223 @@
-import { FASTAnchor } from '@microsoft/fast-foundation/anchor.js';
-import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize } from './anchor-button.options.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { StartEnd } from '../patterns/index.js';
+import type { StartEndOptions } from '../patterns/index.js';
+import { type AnchorButtonAppearance, type AnchorButtonShape, type AnchorButtonSize, type AnchorTarget } from './anchor-button.options.js';
 /**
- * The base class used for constructing a fluent-anchor-button custom element
+ * Anchor configuration options
  * @public
  */
-export declare class AnchorButton extends FASTAnchor {
+export type AnchorOptions = StartEndOptions<AnchorButton>;
+/**
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
+ * @public
+ */
+export declare class BaseAnchor extends FASTElement {
     /**
-     * The appearance the anchor button should have.
+     * Holds a reference to the platform to manage ctrl+click on Windows and cmd+click on Mac
+     * @internal
+     */
+    private readonly isMac;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The proxy anchor element
+     * @internal
+     */
+    private internalProxyAnchor;
+    /**
+     * Prompts the user to save the linked URL.
+     *
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#download | `download`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: appearance
+     * HTML Attribute: `download`
      */
-    appearance?: AnchorButtonAppearance | undefined;
+    download?: string;
     /**
-     * The shape the anchor button should have.
+     * The URL the hyperlink references.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#href | `href`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: `href`
      */
-    shape?: AnchorButtonShape | undefined;
+    href?: string;
     /**
-     * The size the anchor button should have.
+     * Hints at the language of the referenced resource.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#hreflang | `hreflang`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: size
+     * HTML Attribute: `hreflang`
      */
-    size?: AnchorButtonSize;
+    hreflang?: string;
     /**
-     * The anchor button has an icon only, no text content
+     * The ping attribute.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#ping | `ping`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: icon-only
+     * HTML Attribute: `ping`
      */
-    iconOnly: boolean;
+    ping?: string;
+    /**
+     * The referrerpolicy attribute.
+     * See The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#referrerpolicy | `referrerpolicy`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `referrerpolicy`
+     */
+    referrerpolicy?: string;
     /**
-     * The anchor button is disabled
+     * The rel attribute.
+     * See The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#rel | `rel`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: disabled-focusable
+     * HTML Attribute: `rel`
      */
-    disabled?: boolean;
-    protected disabledChanged(prev: boolean, next: boolean): void;
+    rel: string;
     /**
-     * The anchor button is disabled but focusable
+     * The target attribute.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#target | `target`} attribute
      *
      * @public
      * @remarks
-     * HTML Attribute: disabled-focusable
+     * HTML Attribute: `target`
      */
-    disabledFocusable?: boolean;
-    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+    target?: AnchorTarget;
     /**
-     * Prevents disabledFocusable click events
+     * The type attribute.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#type | `type`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `type`
      */
-    private handleDisabledFocusableClick;
+    type?: string;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Handles changes to observable properties
+     * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
+     */
+    handleChange(source: any, propertyName: string): void;
+    /**
+     * Handles the anchor click event.
+     *
+     * @param e - The event object
+     * @internal
+     */
+    clickHandler(e: PointerEvent): boolean;
+    /**
+     * Handles keydown events for the anchor.
+     *
+     * @param e - the keyboard event
+     * @returns - the return value of the click handler
+     * @public
+     */
+    keydownHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Handles navigation based on input
+     * If the metaKey is pressed, opens the href in a new window, if false, uses the click on the proxy
+     * @internal
+     */
+    private handleNavigation;
+    /**
+     * A method for updating proxy attributes when attributes have changed
+     * @internal
+     * @param attribute - an attribute to set/remove
+     * @param value - the value of the attribute
+     */
+    private handleProxyAttributeChange;
+    private createProxyElement;
+}
+/**
+ * An Anchor Custom HTML Element.
+ * Based on BaseAnchor and includes style and layout specific attributes
+ *
+ * @public
+ */
+export declare class AnchorButton extends BaseAnchor {
+    /**
+     * The appearance the anchor button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `appearance`
+     */
+    appearance?: AnchorButtonAppearance | undefined;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: AnchorButtonAppearance | undefined, next: AnchorButtonAppearance | undefined): void;
+    /**
+     * The shape the anchor button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `shape`
+     */
+    shape?: AnchorButtonShape | undefined;
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev: AnchorButtonShape | undefined, next: AnchorButtonShape | undefined): void;
+    /**
+     * The size the anchor button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `size`
+     */
+    size?: AnchorButtonSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: AnchorButtonSize | undefined, next: AnchorButtonSize | undefined): void;
+    /**
+     * The anchor button has an icon only, no text content
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `icon-only`
+     */
+    iconOnly: boolean;
+    /**
+     * Handles changes to icon only custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    iconOnlyChanged(prev: boolean, next: boolean): void;
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ * @internal
+ */
+export interface AnchorButton extends StartEnd {
 }

package/dist/dts/anchor-button/anchor-button.definition.d.ts

@@ -1,8 +1,5 @@
 import { AnchorButton } from './anchor-button.js';
 /**
- * The Fluent Anchor Button Element. Implements {@link @microsoft/fast-foundation#Anchor },
- * {@link @microsoft/fast-foundation#anchorTemplate}
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-anchor-button\>

package/dist/dts/anchor-button/anchor-button.options.d.ts

@@ -1,5 +1,5 @@
-import type { AnchorOptions } from '@microsoft/fast-foundation/anchor.js';
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
+import type { AnchorOptions } from './anchor-button.js';
 /**
  * Anchor Button Appearance constants
  * @public
@@ -8,14 +8,13 @@ export declare const AnchorButtonAppearance: {
     readonly primary: "primary";
     readonly outline: "outline";
     readonly subtle: "subtle";
-    readonly secondary: "secondary";
     readonly transparent: "transparent";
 };
 /**
  * An Anchor Button can be secondary, primary, outline, subtle, transparent
  * @public
  */
-export declare type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearance>;
+export type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppearance>;
 /**
  * An Anchor Button can be square, circular or rounded.
  * @public
@@ -29,7 +28,7 @@ export declare const AnchorButtonShape: {
  * An Anchor Button can be square, circular or rounded
  * @public
  */
-export declare type AnchorButtonShape = ValuesOf<typeof AnchorButtonShape>;
+export type AnchorButtonShape = ValuesOf<typeof AnchorButtonShape>;
 /**
  * An Anchor Button can be a size of small, medium or large.
  * @public
@@ -43,5 +42,43 @@ export declare const AnchorButtonSize: {
  * An Anchor Button can be on of several preset sizes.
  * @public
  */
-export declare type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
+export type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
 export { AnchorOptions as AnchorButtonOptions };
+/**
+ * Anchor target values.
+ *
+ * @public
+ */
+export declare const AnchorTarget: {
+    readonly _self: "_self";
+    readonly _blank: "_blank";
+    readonly _parent: "_parent";
+    readonly _top: "_top";
+};
+/**
+ * Type for anchor target values.
+ *
+ * @public
+ */
+export type AnchorTarget = ValuesOf<typeof AnchorTarget>;
+/**
+ * Reflected anchor attributes.
+ *
+ * @public
+ */
+export declare const AnchorAttributes: {
+    readonly download: "download";
+    readonly href: "href";
+    readonly hreflang: "hreflang";
+    readonly ping: "ping";
+    readonly referrerpolicy: "referrerpolicy";
+    readonly rel: "rel";
+    readonly target: "target";
+    readonly type: "type";
+};
+/**
+ * Type for anchor attributes.
+ *
+ * @public
+ */
+export type AnchorAttributes = ValuesOf<typeof AnchorAttributes>;

package/dist/dts/anchor-button/anchor-button.template.d.ts

@@ -1,5 +1,10 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import type { AnchorButton } from './anchor-button.js';
+import { ElementViewTemplate, ViewTemplate } from '@microsoft/fast-element';
+import type { AnchorButton, AnchorOptions } from './anchor-button.js';
+/**
+ * The template for the Button component.
+ * @public
+ */
+export declare function anchorTemplate<T extends AnchorButton>(options?: AnchorOptions): ViewTemplate<T>;
 /**
  * The template for the Button component.
  * @public

package/dist/dts/anchor-button/index.d.ts

@@ -1,4 +1,5 @@
-export * from './anchor-button.js';
-export * from './anchor-button.options.js';
-export { template as AnchorButtonTemplate } from './anchor-button.template.js';
 export { definition as AnchorButtonDefinition } from './anchor-button.definition.js';
+export { BaseAnchor, AnchorButton } from './anchor-button.js';
+export { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget } from './anchor-button.options.js';
+export type { AnchorButtonOptions } from './anchor-button.options.js';
+export { template as AnchorButtonTemplate } from './anchor-button.template.js';

package/dist/dts/avatar/avatar.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

package/dist/dts/avatar/avatar.d.ts

@@ -4,7 +4,13 @@ import { AvatarActive, AvatarAppearance, AvatarColor, AvatarNamedColor, AvatarSh
  * The base class used for constructing a fluent-avatar custom element
  * @public
  */
-export declare class Avatar extends FASTElement {
+export declare class BaseAvatar extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
      *
@@ -22,20 +28,25 @@ export declare class Avatar extends FASTElement {
      */
     initials?: string | undefined;
     /**
-     * Size of the avatar in pixels.
-     *
-     * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
-     * based on design guidelines for the Avatar control.
-     *
-     * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`
-     * to override the rendered size.
+     * Optional activity indicator
+     * * active: the avatar will be decorated according to activeAppearance
+     * * inactive: the avatar will be reduced in size and partially transparent
+     * * undefined: normal display
      *
      * @public
      * @remarks
-     * HTML Attribute: size
-     *
+     * HTML Attribute: active
      */
-    size?: AvatarSize | undefined;
+    active?: AvatarActive | undefined;
+    constructor();
+}
+/**
+ * An Avatar Custom HTML Element.
+ * Based on BaseAvatar and includes style and layout specific attributes
+ *
+ * @public
+ */
+export declare class Avatar extends BaseAvatar {
     /**
      * The avatar can have a circular or square shape.
      *
@@ -45,24 +56,28 @@ export declare class Avatar extends FASTElement {
      */
     shape?: AvatarShape | undefined;
     /**
-     * Optional activity indicator
-     * * active: the avatar will be decorated according to activeAppearance
-     * * inactive: the avatar will be reduced in size and partially transparent
-     * * undefined: normal display
+     * The appearance when `active="active"`
      *
      * @public
      * @remarks
-     * HTML Attribute: active
+     * HTML Attribute: appearance
      */
-    active?: AvatarActive | undefined;
+    appearance?: AvatarAppearance | undefined;
     /**
-     * The appearance when `active="active"`
+     * Size of the avatar in pixels.
+     *
+     * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
+     * based on design guidelines for the Avatar control.
+     *
+     * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`
+     * to override the rendered size.
      *
      * @public
      * @remarks
-     * HTML Attribute: appearance
+     * HTML Attribute: size
+     *
      */
-    appearance?: AvatarAppearance | undefined;
+    size?: AvatarSize | undefined;
     /**
      * The color when displaying either an icon or initials.
      * * neutral (default): gray
@@ -74,24 +89,37 @@ export declare class Avatar extends FASTElement {
      * @remarks
      * HTML Attribute: color
      */
-    color?: AvatarColor;
+    color?: AvatarColor | undefined;
     /**
      * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
      * Use this when a name is not available, but there is another unique identifier that can be used instead.
      */
     colorId?: AvatarNamedColor | undefined;
     /**
-     * Sets the data-color attribute used for the visual presentation
+     * Holds the current color state
+     */
+    private currentColor;
+    /**
+     * Handles changes to observable properties
      * @internal
+     * @param source - the source of the change
+     * @param propertyName - the property name being changed
      */
-    generateColor(): AvatarColor | void;
+    handleChange(source: any, propertyName: string): void;
     /**
      * Generates and sets the initials for the template
      * @internal
      */
     generateInitials(): string | void;
+    /**
+     * Sets the data-color attribute used for the visual presentation
+     * @internal
+     */
+    generateColor(): void;
     /**
      * An array of the available Avatar named colors
      */
     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")[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
 }

package/dist/dts/avatar/avatar.options.d.ts

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * The Avatar "active" state
  */
@@ -9,7 +9,7 @@ export declare const AvatarActive: {
 /**
  * The types of Avatar active state
  */
-export declare type AvatarActive = ValuesOf<typeof AvatarActive>;
+export type AvatarActive = ValuesOf<typeof AvatarActive>;
 /**
  * The Avatar Shape
  */
@@ -20,7 +20,7 @@ export declare const AvatarShape: {
 /**
  * The types of Avatar Shape
  */
-export declare type AvatarShape = ValuesOf<typeof AvatarShape>;
+export type AvatarShape = ValuesOf<typeof AvatarShape>;
 /**
  * The Avatar Appearance when "active"
  */
@@ -32,7 +32,7 @@ export declare const AvatarAppearance: {
 /**
  * The appearance when "active"
  */
-export declare type AvatarAppearance = ValuesOf<typeof AvatarAppearance>;
+export type AvatarAppearance = ValuesOf<typeof AvatarAppearance>;
 /**
  * A specific named color for the Avatar
  */
@@ -72,7 +72,7 @@ export declare const AvatarNamedColor: {
  * An avatar can be one of named colors
  * @public
  */
-export declare type AvatarNamedColor = ValuesOf<typeof AvatarNamedColor>;
+export type AvatarNamedColor = ValuesOf<typeof AvatarNamedColor>;
 /**
  * Supported Avatar colors
  */
@@ -114,7 +114,7 @@ export declare const AvatarColor: {
 /**
  * The Avatar Color
  */
-export declare type AvatarColor = ValuesOf<typeof AvatarColor>;
+export type AvatarColor = ValuesOf<typeof AvatarColor>;
 /**
  * The Avatar Sizes
  * @public
@@ -139,4 +139,4 @@ export declare const AvatarSize: {
  * A Avatar can be on of several preset sizes.
  * @public
  */
-export declare type AvatarSize = ValuesOf<typeof AvatarSize>;
+export type AvatarSize = ValuesOf<typeof AvatarSize>;

package/dist/dts/avatar/index.d.ts

@@ -1,5 +1,5 @@
-export * from './avatar.js';
-export * from './avatar.options.js';
+export { BaseAvatar, 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';

package/dist/dts/badge/badge.bench.d.ts

@@ -0,0 +1,3 @@
+declare const itemRenderer: () => HTMLElement;
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';

package/dist/dts/badge/badge.d.ts

@@ -1,11 +1,17 @@
 import { FASTElement } from '@microsoft/fast-element';
-import { StartEnd } from '@microsoft/fast-foundation/patterns.js';
+import { StartEnd } from '../patterns/index.js';
 import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
 /**
  * The base class used for constructing a fluent-badge custom element
  * @public
  */
 export declare class Badge extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The appearance the badge should have.
      *
@@ -14,6 +20,12 @@ export declare class Badge extends FASTElement {
      * HTML Attribute: appearance
      */
     appearance: BadgeAppearance;
+    /**
+     * Handles changes to appearance attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    appearanceChanged(prev: BadgeAppearance | undefined, next: BadgeAppearance | undefined): void;
     /**
      * The color the badge should have.
      *
@@ -22,6 +34,12 @@ export declare class Badge extends FASTElement {
      * HTML Attribute: color
      */
     color: BadgeColor;
+    /**
+     * Handles changes to color attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    colorChanged(prev: BadgeColor | undefined, next: BadgeColor | undefined): void;
     /**
      * The shape the badge should have.
      *
@@ -30,6 +48,12 @@ export declare class Badge extends FASTElement {
      * HTML Attribute: shape
      */
     shape?: BadgeShape;
+    /**
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    shapeChanged(prev: BadgeShape | undefined, next: BadgeShape | undefined): void;
     /**
      * The size the badge should have.
      *
@@ -38,6 +62,12 @@ export declare class Badge extends FASTElement {
      * HTML Attribute: size
      */
     size?: BadgeSize;
+    /**
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
+     */
+    sizeChanged(prev: BadgeSize | undefined, next: BadgeSize | undefined): void;
 }
 /**
  * Mark internal because exporting class and interface of the same name

package/dist/dts/badge/badge.definition.d.ts

@@ -1,8 +1,5 @@
 import { Badge } from './badge.js';
 /**
- * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge },
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
  *
  * @public
  * @remarks