@fluentui/web-components 3.0.0-beta.26 → 3.0.0-beta.28

package/dist/web-components.d.ts

@@ -252,78 +252,95 @@ export declare const accordionTemplate: ElementViewTemplate<Accordion>;
  */
 export declare class AnchorButton extends FASTElement {
     /**
-     * Prompts the user to save the linked URL. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
-     * @public
-     * @remarks
-     * HTML Attribute: download
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
      */
-    download: string;
+    protected elementInternals: ElementInternals;
     /**
-     * The URL the hyperlink references. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
-     * @public
-     * @remarks
-     * HTML Attribute: href
+     * The proxy anchor element
+     * @internal
      */
-    href: string;
+    private internalProxyAnchor;
     /**
-     * Hints at the language of the referenced resource. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * 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: hreflang
+     * HTML Attribute: `download`
      */
-    hreflang: string;
+    download?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * The URL the hyperlink references.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#href | `href`} attribute
+     *
      * @public
      * @remarks
-     * HTML Attribute: ping
+     * HTML Attribute: `href`
      */
-    ping: string;
+    href?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * 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: referrerpolicy
+     * HTML Attribute: `hreflang`
      */
-    referrerpolicy: string;
+    hreflang?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * The ping attribute.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#ping | `ping`} attribute
+     *
      * @public
      * @remarks
-     * HTML Attribute: rel
+     * HTML Attribute: `ping`
      */
-    rel: string;
+    ping?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * The referrerpolicy attribute.
+     * See The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#referrerpolicy | `referrerpolicy`} attribute
+     *
      * @public
      * @remarks
-     * HTML Attribute: target
+     * HTML Attribute: `referrerpolicy`
      */
-    target: AnchorTarget;
+    referrerpolicy?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * The rel attribute.
+     * See The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#rel | `rel`} attribute
+     *
      * @public
      * @remarks
-     * HTML Attribute: type
+     * HTML Attribute: `rel`
      */
-    type: string;
+    rel: string;
     /**
+     * The target attribute.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#target | `target`} attribute
      *
-     * Default slotted content
-     *
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `target`
      */
-    defaultSlottedContent: HTMLElement[];
+    target?: AnchorTarget;
     /**
-     * References the root element
+     * The type attribute.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#type | `type`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `type`
      */
-    control: HTMLAnchorElement;
+    type?: string;
     /**
      * The appearance the anchor button should have.
      *
      * @public
      * @remarks
-     * HTML Attribute: appearance
+     * HTML Attribute: `appearance`
      */
     appearance?: AnchorButtonAppearance | undefined;
     /**
@@ -331,7 +348,7 @@ export declare class AnchorButton extends FASTElement {
      *
      * @public
      * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: `shape`
      */
     shape?: AnchorButtonShape | undefined;
     /**
@@ -339,7 +356,7 @@ export declare class AnchorButton extends FASTElement {
      *
      * @public
      * @remarks
-     * HTML Attribute: size
+     * HTML Attribute: `size`
      */
     size?: AnchorButtonSize;
     /**
@@ -347,33 +364,42 @@ export declare class AnchorButton extends FASTElement {
      *
      * @public
      * @remarks
-     * HTML Attribute: icon-only
+     * HTML Attribute: `icon-only`
      */
     iconOnly: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
-     * The anchor button is disabled
+     * Handles changes to observable properties
+     * @internal
+     * @param source
+     * @param propertyName
+     */
+    handleChange(source: any, propertyName: string): void;
+    /**
+     * Handles the anchor click event.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: disabled-focusable
+     * @param e - The event object
+     * @internal
      */
-    disabled?: boolean;
-    protected disabledChanged(prev: boolean, next: boolean): void;
+    clickHandler(): boolean;
     /**
-     * The anchor button is disabled but focusable
+     * Handles keypress events for the anchor.
      *
+     * @param e - the keyboard event
+     * @returns - the return value of the click handler
      * @public
-     * @remarks
-     * HTML Attribute: disabled-focusable
      */
-    disabledFocusable?: boolean;
-    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+    keypressHandler(e: KeyboardEvent): boolean | void;
     /**
-     * Prevents disabledFocusable click events
+     * A method for updating proxy attributes when attributes have changed
+     * @internal
+     * @param attribute
+     * @param value
      */
-    private handleDisabledFocusableClick;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    private handleProxyAttributeChange;
+    private createProxyElement;
 }
 
 /**
@@ -382,7 +408,7 @@ export declare class AnchorButton extends FASTElement {
  * TODO: https://github.com/microsoft/fast/issues/3317
  * @internal
  */
-export declare interface AnchorButton extends StartEnd, DelegatesARIALink {
+export declare interface AnchorButton extends StartEnd {
 }
 
 /**
@@ -473,196 +499,6 @@ export declare const AnchorTarget: {
  */
 export declare type AnchorTarget = ValuesOf<typeof AnchorTarget>;
 
-/**
- * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
- * The following global states and properties are supported by all roles and by all base markup elements.
- * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
- *
- * This is intended to be used as a mixin. Be sure you extend FASTElement.
- *
- * @public
- */
-declare class ARIAGlobalStatesAndProperties {
-    /**
-     * Indicates whether assistive technologies will present all, or only parts of,
-     * the changed region based on the change notifications defined by the aria-relevant attribute.
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-atomic}
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: aria-atomic
-     */
-    ariaAtomic: 'true' | 'false' | string | null;
-    /**
-     * Indicates an element is being modified and that assistive technologies MAY want to wait
-     * until the modifications are complete before exposing them to the user.
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-busy}
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: aria-busy
-     */
-    ariaBusy: 'true' | 'false' | string | null;
-    /**
-     * Identifies the element (or elements) whose contents or presence are controlled by the current element.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-controls}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-controls
-     */
-    ariaControls: string | null;
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-current}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-current
-     */
-    ariaCurrent: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | string | null;
-    /**
-     * Identifies the element (or elements) that describes the object.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-describedby}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-describedby
-     */
-    ariaDescribedby: string | null;
-    /**
-     * Identifies the element that provides a detailed, extended description for the object.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-details}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-details
-     */
-    ariaDetails: string | null;
-    /**
-     * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-disabled}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-disabled
-     */
-    ariaDisabled: 'true' | 'false' | string | null;
-    /**
-     * Identifies the element that provides an error message for the object.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-errormessage}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-errormessage
-     */
-    ariaErrormessage: string | null;
-    /**
-     * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
-     * allows assistive technology to override the general default of reading in document source order.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-flowto}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-flowto
-     */
-    ariaFlowto: string | null;
-    /**
-     * Indicates the availability and type of interactive popup element,
-     * such as menu or dialog, that can be triggered by an element.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-haspopup
-     */
-    ariaHaspopup: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | string | null;
-    /**
-     * Indicates whether the element is exposed to an accessibility API
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-hidden}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-hidden
-     */
-    ariaHidden: 'false' | 'true' | string | null;
-    /**
-     * Indicates the entered value does not conform to the format expected by the application.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-invalid}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-invalid
-     */
-    ariaInvalid: 'false' | 'true' | 'grammar' | 'spelling' | string | null;
-    /**
-     * Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-keyshortcuts
-     */
-    ariaKeyshortcuts: string | null;
-    /**
-     * Defines a string value that labels the current element.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-label}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-label
-     */
-    ariaLabel: string | null;
-    /**
-     * Identifies the element (or elements) that labels the current element.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-labelledby
-     */
-    ariaLabelledby: string | null;
-    /**
-     * Indicates that an element will be updated, and describes the types of updates the user agents,
-     * assistive technologies, and user can expect from the live region.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-live}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-live
-     */
-    ariaLive: 'assertive' | 'off' | 'polite' | string | null;
-    /**
-     * Identifies an element (or elements) in order to define a visual,
-     * functional, or contextual parent/child relationship between DOM elements
-     * where the DOM hierarchy cannot be used to represent the relationship.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-owns}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-owns
-     */
-    ariaOwns: string | null;
-    /**
-     * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-relevant}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-relevant
-     */
-    ariaRelevant: 'additions' | 'additions text' | 'all' | 'removals' | 'text' | string | null;
-    /**
-     * Defines a human-readable, author-localized description for the role of an element.
-     *
-     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription}
-     * @public
-     * @remarks
-     * HTML Attribute: aria-roledescription
-     */
-    ariaRoledescription: string | null;
-}
-
 /**
  * The base class used for constructing a fluent-avatar custom element
  * @public
@@ -1346,47 +1182,6 @@ declare class BaseCheckbox extends FASTElement {
     private toggleChecked;
 }
 
-/**
- * A base class for progress components.
- * @public
- */
-declare class BaseProgress extends FASTElement {
-    /**
-     * The value of the progress
-     * @public
-     * @remarks
-     * HTML Attribute: value
-     */
-    value: number | null;
-    protected valueChanged(): void;
-    /**
-     * The minimum value
-     * @public
-     * @remarks
-     * HTML Attribute: min
-     */
-    min: number;
-    protected minChanged(): void;
-    /**
-     * The maximum value
-     * @public
-     * @remarks
-     * HTML Attribute: max
-     */
-    max: number;
-    protected maxChanged(): void;
-    /**
-     * Indicates progress in %
-     * @internal
-     */
-    percentComplete: number;
-    /**
-     * @internal
-     */
-    connectedCallback(): void;
-    private updatePercentComplete;
-}
-
 /**
  * A Tabs component that wraps a collection of tab and tab panel elements.
  *
@@ -4404,30 +4199,6 @@ export declare const curveLinear = "var(--curveLinear)";
  */
 export declare const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
 
-/**
- * Includes ARIA states and properties relating to the ARIA link role
- *
- * @public
- */
-declare class DelegatesARIALink {
-    /**
-     * See {@link https://www.w3.org/WAI/PF/aria/roles#link} for more information
-     * @public
-     * @remarks
-     * HTML Attribute: aria-expanded
-     */
-    ariaExpanded: 'true' | 'false' | string | null;
-}
-
-/**
- * Mark internal because exporting class and interface of the same name
- * confuses API documenter.
- * TODO: https://github.com/microsoft/fast/issues/3317
- * @internal
- */
-declare interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
-}
-
 /**
  * A Dialog Custom HTML Element.
  *
@@ -4566,6 +4337,12 @@ export declare function display(displayValue: CSSDisplayPropertyValue): string;
  * A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
  */
 export declare class Divider extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The role of the element.
      *
@@ -4581,7 +4358,7 @@ export declare class Divider extends FASTElement {
      * @remarks
      * HTML Attribute: orientation
      */
-    orientation: DividerOrientation;
+    orientation?: DividerOrientation;
     /**
      * @public
      * @remarks
@@ -4600,6 +4377,23 @@ export declare class Divider extends FASTElement {
      * Adds padding to the beginning and end of the divider.
      */
     inset?: boolean;
+    connectedCallback(): void;
+    /**
+     * Sets the element's internal role when the role attribute changes.
+     *
+     * @param previous - the previous role value
+     * @param next - the current role value
+     * @internal
+     */
+    roleChanged(previous: string | null, next: string | null): void;
+    /**
+     * Sets the element's internal orientation when the orientation attribute changes.
+     *
+     * @param previous - the previous orientation value
+     * @param next - the current orientation value
+     * @internal
+     */
+    orientationChanged(previous: string | null, next: string | null): void;
 }
 
 /**
@@ -6006,36 +5800,79 @@ export declare const MenuTemplate: ElementViewTemplate<Menu>;
  * An Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
- * @slot indeterminate - The slot for a custom indeterminate indicator
- * @csspart progress - Represents the progress element
- * @csspart determinate - The determinate indicator
- * @csspart indeterminate - The indeterminate indicator
- *
  * @public
  */
-export declare class ProgressBar extends BaseProgress {
+export declare class ProgressBar extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The thickness of the progress bar
      *
      * @public
-     * @remarks
-     * HTML Attribute: thickness
+     * HTML Attribute: `thickness`
      */
     thickness?: ProgressBarThickness;
     /**
      * The shape of the progress bar
      * @public
-     * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: `shape`
      */
     shape?: ProgressBarShape;
     /**
      * The validation state of the progress bar
      * @public
-     * @remarks
-     * HTML Attribute: validation-state
+     * HTML Attribute: `validation-state`
      */
     validationState: ProgressBarValidationState | null;
+    /**
+     * The value of the progress
+     * @internal
+     * HTML Attribute: `value`
+     */
+    value?: number;
+    /**
+     * Updates the percent complete when the `value` property changes.
+     *
+     * @internal
+     */
+    protected valueChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * The minimum value
+     * @internal
+     * HTML Attribute: `min`
+     */
+    min?: number;
+    /**
+     * Updates the percent complete when the `min` property changes.
+     *
+     * @param prev - The previous min value
+     * @param next - The current min value
+     */
+    protected minChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * The maximum value
+     * @internal
+     * HTML Attribute: `max`
+     */
+    max?: number;
+    /**
+     * Updates the percent complete when the `max` property changes.
+     *
+     * @param prev - The previous max value
+     * @param next - The current max value
+     * @internal
+     */
+    protected maxChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * Indicates progress in %
+     * @internal
+     */
+    get percentComplete(): number;
+    constructor();
 }
 
 /**
@@ -6101,15 +5938,6 @@ export declare const ProgressBarValidationState: {
  */
 export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
 
-/**
- * Progress configuration options
- * @public
- */
-export declare type ProgressOptions = {
-    indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar>;
-    indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar>;
-};
-
 /**
  * A Radio Custom HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.