@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.9

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Fri, 09 Feb 2024 04:08:36 GMT and should not be manually modified.
+This log was last generated on Mon, 08 Apr 2024 04:08:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.9)
+
+Mon, 08 Apr 2024 04:08:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.8..@fluentui/web-components_v3.0.0-beta.9)
+
+### Changes
+
+- chore: setup perf benchmarking in web components ([PR #30972](https://github.com/microsoft/fluentui/pull/30972) by =)
+- Bump @fluentui/tokens to v1.0.0-alpha.2 ([PR #30972](https://github.com/microsoft/fluentui/pull/30972) by beachball)
+
+## [3.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.8)
+
+Mon, 12 Feb 2024 04:08:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.7..@fluentui/web-components_v3.0.0-beta.8)
+
+### Changes
+
+- Removes dependancy on fast-foundation classes and templates ([PR #30090](https://github.com/microsoft/fluentui/pull/30090) by jes@microsoft.com)
+
 ## [3.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.7)
 
-Fri, 09 Feb 2024 04:08:36 GMT 
+Fri, 09 Feb 2024 04:08:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.6..@fluentui/web-components_v3.0.0-beta.7)
 
 ### Changes

package/dist/dts/accordion/accordion.d.ts

@@ -1,7 +1,51 @@
-import { FASTAccordion } from '@microsoft/fast-foundation/accordion.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { AccordionExpandMode } from './accordion.options.js';
 /**
- * The base class used for constructing a fluent-accordion custom element
+ * An Accordion Custom HTML Element
+ * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
+ *
+ * @fires change - Fires a custom 'change' event when the active item changes
+ * @csspart item - The slot for the accordion items
  * @public
  */
-export declare class Accordion extends FASTAccordion {
+export declare class Accordion extends FASTElement {
+    /**
+     * Controls the expand mode of the Accordion, either allowing
+     * single or multiple item expansion.
+     * @public
+     *
+     * @remarks
+     * HTML attribute: expand-mode
+     */
+    expandmode: AccordionExpandMode;
+    expandmodeChanged(prev: AccordionExpandMode, next: AccordionExpandMode): void;
+    /**
+     * @internal
+     */
+    slottedAccordionItems: HTMLElement[];
+    protected accordionItems: Element[];
+    /**
+     * @internal
+     */
+    slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
+    /**
+     * @internal
+     */
+    handleChange(source: any, propertyName: string): void;
+    private activeid;
+    private activeItemIndex;
+    private accordionIds;
+    private change;
+    private findExpandedItem;
+    private setItems;
+    private setSingleExpandMode;
+    private removeItemListeners;
+    private activeItemChange;
+    private handleExpandedChange;
+    private getItemIds;
+    private isSingleExpandMode;
+    private handleItemKeyDown;
+    private handleItemFocus;
+    private adjust;
+    private focusItem;
 }

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

@@ -1,9 +1,5 @@
 import { Accordion } from './accordion.js';
 /**
- * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion },
- * {@link @microsoft/fast-foundation#accordionTemplate}
- *
- *
  * @public
  * @remarks
  * HTML Element: \<fluent-accordion\>

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

@@ -0,0 +1,14 @@
+import type { ValuesOf } from '../utils/index.js';
+/**
+ * Expand mode for {@link FASTAccordion}
+ * @public
+ */
+export declare const AccordionExpandMode: {
+    readonly single: "single";
+    readonly multi: "multi";
+};
+/**
+ * Type for the {@link FASTAccordion} Expand Mode
+ * @public
+ */
+export declare type AccordionExpandMode = ValuesOf<typeof AccordionExpandMode>;

package/dist/dts/accordion/accordion.template.d.ts

@@ -1,3 +1,7 @@
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import type { Accordion } from './accordion.js';
+/**
+ * @public
+ */
+export declare function accordionTemplate<T extends Accordion>(): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<Accordion>;

package/dist/dts/accordion-item/accordion-item.d.ts

@@ -1,9 +1,68 @@
-import { FASTAccordionItem } from '@microsoft/fast-foundation/accordion-item.js';
+import { FASTElement } from '@microsoft/fast-element';
+import type { StaticallyComposableHTML } from '../utils/index.js';
+import { StartEnd } from '../patterns/index.js';
+import type { StartEndOptions } from '../patterns/index.js';
 import { AccordionItemExpandIconPosition, AccordionItemSize } from './accordion-item.options.js';
 /**
- * @internal
+ * Accordion Item configuration options
+ * @public
+ */
+export declare type AccordionItemOptions = StartEndOptions<AccordionItem> & {
+    expandedIcon?: StaticallyComposableHTML<AccordionItem>;
+    collapsedIcon?: StaticallyComposableHTML<AccordionItem>;
+};
+/**
+ *
+ * @slot start - Content which can be provided between the heading and the icon
+ * @slot end - Content which can be provided between the start slot and icon
+ * @slot heading - Content which serves as the accordion item heading and text of the expand button
+ * @slot - The default slot for accordion item content
+ * @slot expanded-icon - The expanded icon
+ * @slot collapsed-icon - The collapsed icon
+ * @fires change - Fires a custom 'change' event when the button is invoked
+ * @csspart heading - Wraps the button
+ * @csspart button - The button which serves to invoke the item
+ * @csspart heading-content - Wraps the slot for the heading content within the button
+ * @csspart icon - The icon container
+ * @csspart region - The wrapper for the accordion item content
+ *
+ * @public
  */
-export declare class AccordionItem extends FASTAccordionItem {
+export declare class AccordionItem extends FASTElement {
+    /**
+     * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
+     * heading element.
+     *
+     * @defaultValue 2
+     * @public
+     * @remarks
+     * HTML attribute: heading-level
+     */
+    headinglevel: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Expands or collapses the item.
+     *
+     * @public
+     * @remarks
+     * HTML attribute: expanded
+     */
+    expanded: boolean;
+    /**
+     * Disables an accordion item
+     *
+     * @public
+     * @remarks
+     * HTML attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * The item ID
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: id
+     */
+    id: string;
     /**
      * Defines accordion header font size.
      *
@@ -30,4 +89,20 @@ export declare class AccordionItem extends FASTAccordionItem {
      * HTML Attribute: expandIconPosition
      */
     expandIconPosition?: AccordionItemExpandIconPosition;
+    /**
+     * @internal
+     */
+    expandbutton: HTMLElement;
+    /**
+     * @internal
+     */
+    clickHandler: (e: MouseEvent) => 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 AccordionItem extends StartEnd {
 }

package/dist/dts/accordion-item/accordion-item.definition.d.ts

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

package/dist/dts/accordion-item/accordion-item.options.d.ts

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * An Accordion Item header font size can be small, medium, large, and extra-large
  */

package/dist/dts/accordion-item/accordion-item.template.d.ts

@@ -1,5 +1,6 @@
 import { ElementViewTemplate } from '@microsoft/fast-element';
-import { AccordionItem } from './accordion-item.js';
+import { AccordionItem, AccordionItemOptions } from './accordion-item.js';
+export declare function accordionItemTemplate<T extends AccordionItem>(options?: AccordionItemOptions): ElementViewTemplate<T>;
 /**
  * The template for the fluent-accordion component.
  * @public

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

@@ -1,10 +1,92 @@
-import { FASTAnchor } from '@microsoft/fast-foundation/anchor.js';
-import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize } from './anchor-button.options.js';
+import { FASTElement } from '@microsoft/fast-element';
+import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
+import type { StartEndOptions } from '../patterns/index.js';
+import type { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, 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 declare 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 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
+     */
+    download: string;
+    /**
+     * 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
+     */
+    href: string;
+    /**
+     * 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.
+     * @public
+     * @remarks
+     * HTML Attribute: hreflang
+     */
+    hreflang: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: ping
+     */
+    ping: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: referrerpolicy
+     */
+    referrerpolicy: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: rel
+     */
+    rel: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: target
+     */
+    target: AnchorTarget;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: type
+     */
+    type: string;
+    /**
+     *
+     * Default slotted content
+     *
+     * @internal
+     */
+    defaultSlottedContent: HTMLElement[];
+    /**
+     * References the root element
+     */
+    control: HTMLAnchorElement;
     /**
      * The appearance the anchor button should have.
      *
@@ -62,3 +144,33 @@ export declare class AnchorButton extends FASTAnchor {
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+export 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
+ */
+export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
+}
+/**
+ * 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, DelegatesARIALink {
+}

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
@@ -45,3 +45,20 @@ export declare const AnchorButtonSize: {
  */
 export declare 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 declare type AnchorTarget = ValuesOf<typeof AnchorTarget>;

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/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
  */

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

@@ -1,5 +1,5 @@
 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

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

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

@@ -1,5 +1,5 @@
-import { StartEndOptions } from '@microsoft/fast-foundation/patterns.js';
-import type { StaticallyComposableHTML, ValuesOf } from '@microsoft/fast-foundation/utilities.js';
+import { StartEndOptions } from '../patterns/index.js';
+import type { StaticallyComposableHTML, ValuesOf } from '../utils/index.js';
 import type { Badge } from './badge.js';
 /**
  * @internal - marking as internal update when Badge PR for start/end is in

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

@@ -1,10 +1,89 @@
-import { FASTButton } from '@microsoft/fast-foundation/button.js';
-import { ButtonAppearance, ButtonShape, ButtonSize } from './button.options.js';
+import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
+import { FormAssociatedButton } from './button.form-associated.js';
+import { ButtonAppearance, ButtonShape, ButtonSize, ButtonType } from './button.options.js';
 /**
- * The base class used for constructing a fluent-button custom element
+ * A Button Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element }.
+ *
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot - The default slot for button content
+ * @csspart control - The button element
+ * @csspart content - The element wrapping button content
+ *
  * @public
  */
-export declare class Button extends FASTButton {
+export declare class Button extends FormAssociatedButton {
+    /**
+     * Determines if the element should receive document focus on page load.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: autofocus
+     */
+    autofocus: boolean;
+    /**
+     * The id of a form to associate the element to.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: form
+     */
+    formId: string;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formaction
+     */
+    formaction: string;
+    protected formactionChanged(): void;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formenctype
+     */
+    formenctype: string;
+    protected formenctypeChanged(): void;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formmethod
+     */
+    formmethod: string;
+    protected formmethodChanged(): void;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formnovalidate
+     */
+    formnovalidate: boolean;
+    protected formnovalidateChanged(): void;
+    /**
+     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element} for more details.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: formtarget
+     */
+    formtarget: '_self' | '_blank' | '_parent' | '_top';
+    protected formtargetChanged(): void;
+    /**
+     * The button type.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: type
+     */
+    type: ButtonType;
+    protected typeChanged(previous: ButtonType | undefined, next: ButtonType): void;
     /**
      * The appearance the button should have.
      *
@@ -50,6 +129,65 @@ export declare class Button extends FASTButton {
      * Prevents disabledFocusable click events
      */
     private handleDisabledFocusableClick;
+    /**
+     *
+     * Default slotted content
+     *
+     * @public
+     * @remarks
+     */
+    defaultSlottedContent: HTMLElement[];
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate(): void;
+    /**
+     * @internal
+     */
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Submits the parent form
+     */
+    private handleSubmission;
+    /**
+     * Resets the parent form
+     */
+    private handleFormReset;
+    control: HTMLButtonElement;
+}
+/**
+ * Includes ARIA states and properties relating to the ARIA button role
+ *
+ * @public
+ */
+export declare class DelegatesARIAButton {
+    /**
+     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
+     * @public
+     * @remarks
+     * HTML Attribute: aria-expanded
+     */
+    ariaExpanded: 'true' | 'false' | string | null;
+    /**
+     * See {@link https://www.w3.org/WAI/PF/aria/roles#button} for more information
+     * @public
+     * @remarks
+     * HTML Attribute: aria-pressed
+     */
+    ariaPressed: 'true' | 'false' | 'mixed' | 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
+ */
+export interface DelegatesARIAButton extends ARIAGlobalStatesAndProperties {
+}
+/**
+ * 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 Button extends StartEnd, DelegatesARIAButton {
 }

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

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

package/dist/dts/button/button.form-associated.d.ts

@@ -0,0 +1,14 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { FormAssociated } from '../form-associated/form-associated.js';
+declare class _Button extends FASTElement {
+}
+interface _Button extends FormAssociated {
+}
+declare const FormAssociatedButton_base: typeof _Button;
+/**
+ * @beta
+ */
+export declare class FormAssociatedButton extends FormAssociatedButton_base {
+    proxy: HTMLInputElement;
+}
+export {};