@fluentui/web-components 3.0.0-beta.1 → 3.0.0-beta.100

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

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

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

@@ -1,7 +1,76 @@
-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}.
+ *
+ * @tag fluent-accordion
+ *
+ * @slot - The default slot for the accordion items
+ * @fires change - Fires a custom 'change' event when the active item changes
+ *
  * @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[];
+    /**
+     * @internal
+     */
+    protected accordionItems: Element[];
+    /**
+     * @internal
+     */
+    slottedAccordionItemsChanged(oldValue: HTMLElement[], newValue: HTMLElement[]): void;
+    /**
+     * Watch for changes to the slotted accordion items `disabled` and `expanded` attributes
+     * @internal
+     */
+    handleChange(source: any, propertyName: string): void;
+    private activeItemIndex;
+    /**
+     * Find the first expanded item in the accordion
+     * @returns {void}
+     */
+    private findExpandedItem;
+    /**
+     * Resets event listeners and sets the `accordionItems` property
+     * then rebinds event listeners to each non-disabled item
+     * @returns {void}
+     */
+    private setItems;
+    /**
+     * Checks if the accordion is in single expand mode
+     * @returns {boolean}
+     */
+    private isSingleExpandMode;
+    /**
+     * Controls the behavior of the accordion in single expand mode
+     * @param expandedItem The item to expand in single expand mode
+     * @returns {void}
+     */
+    private setSingleExpandMode;
+    /**
+     * Removes event listeners from the previous accordion items
+     * @param oldValue An array of the previous accordion items
+     */
+    private removeItemListeners;
+    /**
+     * Changes the expanded state of the accordion item
+     * @param evt Click event
+     * @returns
+     */
+    private expandedChangedHandler;
 }

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 Accordion}
+ * @public
+ */
+export declare const AccordionExpandMode: {
+    readonly single: "single";
+    readonly multi: "multi";
+};
+/**
+ * Type for the {@link Accordion} Expand Mode
+ * @public
+ */
+export 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 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/index.d.ts

@@ -1,4 +1,5 @@
-export * from './accordion.js';
+export { Accordion } from './accordion.js';
+export { AccordionExpandMode } from './accordion.options.js';
 export { template as accordionTemplate } from './accordion.template.js';
 export { styles as accordionStyles } from './accordion.styles.js';
 export { definition as accordionDefinition } from './accordion.definition.js';

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

@@ -0,0 +1,59 @@
+import { FASTElement } from '@microsoft/fast-element';
+/**
+ *
+ * @slot start - Content positioned before heading in the collapsed state
+ * @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 marker-expanded - The expanded icon
+ * @slot marker-collapsed - The collapsed icon
+ * @csspart heading - Wraps the button
+ * @csspart button - The button which serves to invoke the item
+ * @csspart content - The wrapper for the accordion item content
+ *
+ * @public
+ */
+export declare class BaseAccordionItem extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
+     * heading element.
+     *
+     * @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;
+    /**
+     * @internal
+     */
+    expandbutton: HTMLElement;
+}

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

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

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

@@ -1,33 +1,56 @@
-import { FASTAccordionItem } from '@microsoft/fast-foundation/accordion-item.js';
-import { AccordionItemExpandIconPosition, AccordionItemSize } from './accordion-item.options.js';
+import type { StaticallyComposableHTML } from '../utils/index.js';
+import { StartEnd } from '../patterns/index.js';
+import type { StartEndOptions } from '../patterns/index.js';
+import { BaseAccordionItem } from './accordion-item.base.js';
+import { AccordionItemMarkerPosition, AccordionItemSize } from './accordion-item.options.js';
 /**
- * @internal
+ * Accordion Item configuration options
+ *
+ * @tag fluent-accordion-item
+ *
+ * @public
+ */
+export type AccordionItemOptions = StartEndOptions<AccordionItem> & {
+    expandedIcon?: StaticallyComposableHTML<AccordionItem>;
+    collapsedIcon?: StaticallyComposableHTML<AccordionItem>;
+};
+/**
+ * An Accordion Item Custom HTML Element.
+ * Based on BaseAccordionItem and includes style and layout specific attributes
+ *
+ * @public
  */
-export declare class AccordionItem extends FASTAccordionItem {
+export declare class AccordionItem extends BaseAccordionItem {
     /**
      * Defines accordion header font size.
      *
      * @public
-     * @default 'medium'
      * @remarks
      * HTML Attribute: size
      */
     size?: AccordionItemSize;
     /**
-     * Sets the width of the focus state.
+     * Sets expand and collapsed icon position.
      *
      * @public
      * @remarks
-     * HTML Attribute: block
+     * HTML Attribute: marker-position
      */
-    block: boolean;
+    markerPosition?: AccordionItemMarkerPosition;
     /**
-     * Sets expand and collapsed icon position.
+     * Sets the width of the focus state.
      *
      * @public
-     * @default 'start'
      * @remarks
-     * HTML Attribute: expandIconPosition
+     * HTML Attribute: block
      */
-    expandIconPosition?: AccordionItemExpandIconPosition;
+    block: boolean;
+}
+/**
+ * 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
  */
@@ -12,11 +12,11 @@ export declare const AccordionItemSize: {
  * Applies font size to accordion header
  * @public
  */
-export declare type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
+export type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
 /**
  * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
  */
-export declare const AccordionItemExpandIconPosition: {
+export declare const AccordionItemMarkerPosition: {
     readonly start: "start";
     readonly end: "end";
 };
@@ -24,4 +24,4 @@ export declare const AccordionItemExpandIconPosition: {
  * Applies expand/collapse icon position
  * @public
  */
-export declare type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;
+export type AccordionItemMarkerPosition = ValuesOf<typeof AccordionItemMarkerPosition>;

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 { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { 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/accordion-item/index.d.ts

@@ -1,5 +1,7 @@
-export * from './accordion-item.js';
-export * from './accordion-item.options.js';
+export { BaseAccordionItem } from './accordion-item.base.js';
+export { AccordionItem } from './accordion-item.js';
+export type { AccordionItemOptions } from './accordion-item.js';
+export { AccordionItemSize, AccordionItemMarkerPosition } from './accordion-item.options.js';
 export { styles as accordionItemStyles } from './accordion-item.styles.js';
 export { definition as accordionItemDefinition } from './accordion-item.definition.js';
 export { template as accordionItemTemplate } from './accordion-item.template.js';

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

@@ -0,0 +1,144 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { type AnchorTarget } from './anchor-button.options.js';
+/**
+ * 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 {
+    /**
+     * 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: `download`
+     */
+    download?: string;
+    /**
+     * The URL the hyperlink references.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#href | `href`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `href`
+     */
+    href?: string;
+    /**
+     * 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: `hreflang`
+     */
+    hreflang?: string;
+    /**
+     * The ping attribute.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#ping | `ping`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `ping`
+     */
+    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 rel attribute.
+     * See The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#rel | `rel`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `rel`
+     */
+    rel: string;
+    /**
+     * The target attribute.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#target | `target`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `target`
+     */
+    target?: AnchorTarget;
+    /**
+     * The type attribute.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#type | `type`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `type`
+     */
+    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;
+}

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

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

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

@@ -1,64 +1,84 @@
-import { FASTAnchor } from '@microsoft/fast-foundation/anchor.js';
+import type { StartEndOptions } from '../patterns/index.js';
+import { StartEnd } from '../patterns/index.js';
+import { BaseAnchor } from './anchor-button.base.js';
 import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize } from './anchor-button.options.js';
 /**
- * The base class used for constructing a fluent-anchor-button custom element
+ * Anchor configuration options
+ *
+ * @tag fluent-anchor-button
+ *
  * @public
  */
-export declare class AnchorButton extends FASTAnchor {
+export type AnchorOptions = StartEndOptions<AnchorButton>;
+/**
+ * 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
+     * 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
+     * HTML Attribute: `shape`
      */
     shape?: AnchorButtonShape | undefined;
     /**
-     * The size the anchor button should have.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: size
+     * Handles changes to shape attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    size?: AnchorButtonSize;
+    shapeChanged(prev: AnchorButtonShape | undefined, next: AnchorButtonShape | undefined): void;
     /**
-     * The anchor button has an icon only, no text content
+     * The size the anchor button should have.
      *
      * @public
      * @remarks
-     * HTML Attribute: icon-only
+     * HTML Attribute: `size`
      */
-    iconOnly: boolean;
+    size?: AnchorButtonSize;
     /**
-     * The anchor button is disabled
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: disabled-focusable
+     * Handles changes to size attribute custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    disabled?: boolean;
-    protected disabledChanged(prev: boolean, next: boolean): void;
+    sizeChanged(prev: AnchorButtonSize | undefined, next: AnchorButtonSize | undefined): void;
     /**
-     * The anchor button is disabled but focusable
+     * The anchor button has an icon only, no text content
      *
      * @public
      * @remarks
-     * HTML Attribute: disabled-focusable
+     * HTML Attribute: `icon-only`
      */
-    disabledFocusable?: boolean;
-    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+    iconOnly: boolean;
     /**
-     * Prevents disabledFocusable click events
+     * Handles changes to icon only custom states
+     * @param prev - the previous state
+     * @param next - the next state
      */
-    private handleDisabledFocusableClick;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    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 { AnchorOptions as AnchorButtonOptions };
+export type AnchorButtonSize = ValuesOf<typeof AnchorButtonSize>;
+export type { 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>;