@fluentui/web-components 3.0.0-beta.10 → 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

@@ -4,8 +4,11 @@ import { AccordionExpandMode } from './accordion.options.js';
  * 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
- * @csspart item - The slot for the accordion items
+ *
  * @public
  */
 export declare class Accordion extends FASTElement {
@@ -23,29 +26,51 @@ export declare class Accordion extends FASTElement {
      * @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 activeid;
     private activeItemIndex;
-    private accordionIds;
-    private change;
+    /**
+     * 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;
-    private activeItemChange;
-    private handleExpandedChange;
-    private getItemIds;
-    private isSingleExpandMode;
-    private handleItemKeyDown;
-    private handleItemFocus;
-    private adjust;
-    private focusItem;
+    /**
+     * Changes the expanded state of the accordion item
+     * @param evt Click event
+     * @returns
+     */
+    private expandedChangedHandler;
 }

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

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

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

@@ -1,4 +1,4 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
+import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { Accordion } from './accordion.js';
 /**
  * @public

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,102 +1,50 @@
-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';
+import { BaseAccordionItem } from './accordion-item.base.js';
+import { AccordionItemMarkerPosition, AccordionItemSize } from './accordion-item.options.js';
 /**
  * Accordion Item configuration options
+ *
+ * @tag fluent-accordion-item
+ *
  * @public
  */
-export declare type AccordionItemOptions = StartEndOptions<AccordionItem> & {
+export 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
+ * An Accordion Item Custom HTML Element.
+ * Based on BaseAccordionItem and includes style and layout specific attributes
  *
  * @public
  */
-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;
+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
-     */
-    expandIconPosition?: AccordionItemExpandIconPosition;
-    /**
-     * @internal
-     */
-    expandbutton: HTMLElement;
-    /**
-     * @internal
+     * HTML Attribute: block
      */
-    clickHandler: (e: MouseEvent) => void;
+    block: boolean;
 }
 /**
  * Mark internal because exporting class and interface of the same name

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

@@ -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,5 @@
-import { ElementViewTemplate } from '@microsoft/fast-element';
-import { AccordionItem, AccordionItemOptions } 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.

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';