@fluentui/web-components 3.0.0-beta.50 → 3.0.0-beta.52

package/dist/web-components.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="web" />
 
+import { CaptureType } from '@microsoft/fast-element';
 import { CSSDirective } from '@microsoft/fast-element';
 import { Direction } from '@microsoft/fast-web-utilities';
 import { ElementStyles } from '@microsoft/fast-element';
@@ -405,6 +406,65 @@ export declare class Avatar extends BaseAvatar {
      * HTML Attribute: appearance
      */
     appearance?: AvatarAppearance | 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.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     *
+     */
+    size?: AvatarSize | undefined;
+    /**
+     * The color when displaying either an icon or initials.
+     * * neutral (default): gray
+     * * brand: color from the brand palette
+     * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or colorId if provided)
+     * * [AvatarNamedColor]: a specific color from the theme
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    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;
+    /**
+     * 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
+     */
+    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;
 }
 
 /**
@@ -983,21 +1043,6 @@ export declare class BaseAvatar extends FASTElement {
      * HTML Attribute: name
      */
     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.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: size
-     *
-     */
-    size?: AvatarSize | undefined;
     /**
      * Optional activity indicator
      * * active: the avatar will be decorated according to activeAppearance
@@ -1009,51 +1054,7 @@ export declare class BaseAvatar extends FASTElement {
      * HTML Attribute: active
      */
     active?: AvatarActive | undefined;
-    /**
-     * The color when displaying either an icon or initials.
-     * * neutral (default): gray
-     * * brand: color from the brand palette
-     * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or colorId if provided)
-     * * [AvatarNamedColor]: a specific color from the theme
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: color
-     */
-    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;
-    /**
-     * Holds the current color state
-     */
-    private currentColor;
     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;
-    /**
-     * Sets the data-color attribute used for the visual presentation
-     * @internal
-     */
-    generateColor(): void;
-    /**
-     * Generates and sets the initials for the template
-     * @internal
-     */
-    generateInitials(): string | 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")[];
 }
 
 /**
@@ -1633,6 +1634,125 @@ export declare class BaseDivider extends FASTElement {
     orientationChanged(previous: string | null, next: string | null): void;
 }
 
+/**
+ * A Field Custom HTML Element.
+ *
+ * @public
+ */
+export declare class BaseField extends FASTElement {
+    /**
+     * The slotted label elements.
+     *
+     * @internal
+     */
+    labelSlot: Node[];
+    /**
+     * Updates attributes on the slotted label elements.
+     *
+     * @param prev - the previous list of slotted label elements
+     * @param next - the current list of slotted label elements
+     */
+    protected labelSlotChanged(prev: Node[], next: Node[]): void;
+    /**
+     * The slotted message elements. Filtered to only include elements with a `flag` attribute.
+     *
+     * @internal
+     */
+    messageSlot: Element[];
+    /**
+     * Adds or removes the `invalid` event listener based on the presence of slotted message elements.
+     *
+     * @param prev - the previous list of slotted message elements
+     * @param next - the current list of slotted message elements
+     * @internal
+     */
+    messageSlotChanged(prev: Element[], next: Element[]): void;
+    /**
+     * The slotted inputs.
+     *
+     * @internal
+     * @privateRemarks
+     * This field is populated with the `children` directive in the template rather than `slotted`.
+     */
+    slottedInputs: SlottableInput[];
+    /**
+     * Sets the `input` property to the first slotted input.
+     *
+     * @param prev - The previous collection of inputs.
+     * @param next - The current collection of inputs.
+     * @internal
+     */
+    slottedInputsChanged(prev: SlottableInput[] | undefined, next: SlottableInput[] | undefined): void;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * Reference to the first slotted input.
+     *
+     * @public
+     */
+    input: SlottableInput;
+    /**
+     * Updates the field's states and label properties when the assigned input changes.
+     *
+     * @param prev - the previous input
+     * @param next - the current input
+     */
+    inputChanged(prev: SlottableInput | undefined, next: SlottableInput | undefined): void;
+    /**
+     * Calls the `setStates` method when a `change` event is emitted from the slotted input.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    changeHandler(e: Event): boolean | void;
+    /**
+     * Redirects `click` events to the slotted input.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    clickHandler(e: MouseEvent): boolean | void;
+    constructor();
+    /**
+     * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusinHandler(e: FocusEvent): boolean | void;
+    /**
+     * Removes the `focus-visible` state from the field when a slotted input loses focus.
+     *
+     * @param e - the focus event
+     * @internal
+     */
+    focusoutHandler(e: FocusEvent): boolean | void;
+    /**
+     * Toggles validity state flags on the element when the slotted input emits an `invalid` event (if slotted validation messages are present).
+     *
+     * @param e - the event object
+     * @internal
+     */
+    invalidHandler(e: Event): boolean | void;
+    /**
+     * Sets ARIA and form-related attributes on slotted label elements.
+     *
+     * @internal
+     */
+    private setLabelProperties;
+    /**
+     * Toggles the field's states based on the slotted input.
+     *
+     * @internal
+     */
+    setStates(): void;
+    setValidationStates(): void;
+}
+
 /**
  * A Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
@@ -5483,16 +5603,25 @@ export declare const durationUltraSlow = "var(--durationUltraSlow)";
  * End configuration options
  * @public
  */
-declare type EndOptions<TSource = any, TParent = any> = {
+export declare type EndOptions<TSource = any, TParent = any> = {
     end?: StaticallyComposableHTML<TSource, TParent>;
 };
 
+/**
+ * The template for the end slot.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export declare function endSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(options: EndOptions<TSource, TParent>): CaptureType<TSource, TParent>;
+
 /**
  * A Field Custom HTML Element.
+ * Based on BaseField and includes style and layout specific attributes
  *
  * @public
  */
-export declare class Field extends FASTElement {
+export declare class Field extends BaseField {
     /**
      * The position of the label relative to the input.
      *
@@ -5501,117 +5630,6 @@ export declare class Field extends FASTElement {
      * HTML Attribute: `label-position`
      */
     labelPosition: FieldLabelPosition;
-    /**
-     * The slotted label elements.
-     *
-     * @internal
-     */
-    labelSlot: Node[];
-    /**
-     * Updates attributes on the slotted label elements.
-     *
-     * @param prev - the previous list of slotted label elements
-     * @param next - the current list of slotted label elements
-     */
-    protected labelSlotChanged(prev: Node[], next: Node[]): void;
-    /**
-     * The slotted message elements. Filtered to only include elements with a `flag` attribute.
-     *
-     * @internal
-     */
-    messageSlot: Element[];
-    /**
-     * Adds or removes the `invalid` event listener based on the presence of slotted message elements.
-     *
-     * @param prev - the previous list of slotted message elements
-     * @param next - the current list of slotted message elements
-     * @internal
-     */
-    messageSlotChanged(prev: Element[], next: Element[]): void;
-    /**
-     * The slotted inputs.
-     *
-     * @internal
-     * @privateRemarks
-     * This field is populated with the `children` directive in the template rather than `slotted`.
-     */
-    slottedInputs: SlottableInput[];
-    /**
-     * Sets the `input` property to the first slotted input.
-     *
-     * @param prev - The previous collection of inputs.
-     * @param next - The current collection of inputs.
-     * @internal
-     */
-    slottedInputsChanged(prev: SlottableInput[] | undefined, next: SlottableInput[] | undefined): void;
-    /**
-     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
-     *
-     * @internal
-     */
-    elementInternals: ElementInternals;
-    /**
-     * Reference to the first slotted input.
-     *
-     * @public
-     */
-    input: SlottableInput;
-    /**
-     * Updates the field's states and label properties when the assigned input changes.
-     *
-     * @param prev - the previous input
-     * @param next - the current input
-     */
-    inputChanged(prev: SlottableInput | undefined, next: SlottableInput | undefined): void;
-    /**
-     * Calls the `setStates` method when a `change` event is emitted from the slotted input.
-     *
-     * @param e - the event object
-     * @internal
-     */
-    changeHandler(e: Event): boolean | void;
-    /**
-     * Redirects `click` events to the slotted input.
-     *
-     * @param e - the event object
-     * @internal
-     */
-    clickHandler(e: MouseEvent): boolean | void;
-    constructor();
-    /**
-     * Applies the `focus-visible` state to the element when the slotted input receives visible focus.
-     *
-     * @param e - the focus event
-     * @internal
-     */
-    focusinHandler(e: FocusEvent): boolean | void;
-    /**
-     * Removes the `focus-visible` state from the field when a slotted input loses focus.
-     *
-     * @param e - the focus event
-     * @internal
-     */
-    focusoutHandler(e: FocusEvent): boolean | void;
-    /**
-     * Toggles validity state flags on the element when the slotted input emits an `invalid` event (if slotted validation messages are present).
-     *
-     * @param e - the event object
-     * @internal
-     */
-    invalidHandler(e: Event): boolean | void;
-    /**
-     * Sets ARIA and form-related attributes on slotted label elements.
-     *
-     * @internal
-     */
-    private setLabelProperties;
-    /**
-     * Toggles the field's states based on the slotted input.
-     *
-     * @internal
-     */
-    setStates(): void;
-    setValidationStates(): void;
 }
 
 /**
@@ -8251,7 +8269,7 @@ export declare const SpinnerTemplate: ViewTemplate<Spinner, any>;
  * These are generally used to decorate text elements with icons or other visual indicators.
  * @public
  */
-declare class StartEnd {
+export declare class StartEnd {
     start: HTMLSlotElement;
     end: HTMLSlotElement;
 }
@@ -8260,16 +8278,24 @@ declare class StartEnd {
  * Start/End configuration options
  * @public
  */
-declare type StartEndOptions<TSource = any, TParent = any> = StartOptions<TSource, TParent> & EndOptions<TSource, TParent>;
+export declare type StartEndOptions<TSource = any, TParent = any> = StartOptions<TSource, TParent> & EndOptions<TSource, TParent>;
 
 /**
  * Start configuration options
  * @public
  */
-declare type StartOptions<TSource = any, TParent = any> = {
+export declare type StartOptions<TSource = any, TParent = any> = {
     start?: StaticallyComposableHTML<TSource, TParent>;
 };
 
+/**
+ * The template for the start slots.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export declare function startSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(options: StartOptions<TSource, TParent>): CaptureType<TSource, TParent>;
+
 /**
  * A value that can be statically composed into a
  * foundation template.

package/dist/web-components.js

@@ -4104,7 +4104,7 @@ class Accordion extends FASTElement {
       children.forEach(child => Observable.getNotifier(child).subscribe(this, "disabled"));
       this.accordionItems = children.filter(child => !child.hasAttribute("disabled"));
       this.accordionItems.forEach((item, index) => {
-        if (item instanceof AccordionItem) {
+        if (item instanceof BaseAccordionItem) {
           item.addEventListener("click", this.expandedChangedHandler);
           Observable.getNotifier(item).subscribe(this, "expanded");
         }
@@ -4132,7 +4132,7 @@ class Accordion extends FASTElement {
      */
     this.expandedChangedHandler = evt => {
       const item = evt.target;
-      if (item instanceof AccordionItem) {
+      if (item instanceof BaseAccordionItem) {
         if (!this.isSingleExpandMode()) {
           item.expanded = !item.expanded;
           this.activeItemIndex = this.accordionItems.indexOf(item);
@@ -4186,7 +4186,7 @@ class Accordion extends FASTElement {
     if (this.accordionItems.length === 0) {
       return null;
     }
-    return this.accordionItems.find(item => item instanceof AccordionItem && item.expanded) ?? this.accordionItems[0];
+    return this.accordionItems.find(item => item instanceof BaseAccordionItem && item.expanded) ?? this.accordionItems[0];
   }
   /**
    * Checks if the accordion is in single expand mode
@@ -4207,7 +4207,7 @@ class Accordion extends FASTElement {
     const currentItems = Array.from(this.accordionItems);
     this.activeItemIndex = currentItems.indexOf(expandedItem);
     currentItems.forEach((item, index) => {
-      if (item instanceof AccordionItem) {
+      if (item instanceof BaseAccordionItem) {
         if (this.activeItemIndex === index) {
           item.expanded = true;
           item.expandbutton.setAttribute("aria-disabled", "true");
@@ -4575,15 +4575,11 @@ class BaseAvatar extends FASTElement {
     this.elementInternals = this.attachInternals();
     this.elementInternals.role = "img";
   }
-  connectedCallback() {
-    super.connectedCallback();
-    Observable.getNotifier(this).subscribe(this);
-    this.generateColor();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    Observable.getNotifier(this).unsubscribe(this);
-  }
+}
+__decorateClass$q([attr], BaseAvatar.prototype, "name", 2);
+__decorateClass$q([attr], BaseAvatar.prototype, "initials", 2);
+__decorateClass$q([attr], BaseAvatar.prototype, "active", 2);
+const _Avatar = class _Avatar extends BaseAvatar {
   /**
    * Handles changes to observable properties
    * @internal
@@ -4598,17 +4594,6 @@ class BaseAvatar extends FASTElement {
         break;
     }
   }
-  /**
-   * Sets the data-color attribute used for the visual presentation
-   * @internal
-   */
-  generateColor() {
-    const colorful = this.color === AvatarColor.colorful;
-    const prev = this.currentColor;
-    toggleState(this.elementInternals, `${prev}`, false);
-    this.currentColor = colorful && this.colorId ? this.colorId : colorful ? Avatar.colors[getHashCode(this.name ?? "") % Avatar.colors.length] : this.color ?? AvatarColor.neutral;
-    toggleState(this.elementInternals, `${this.currentColor}`, true);
-  }
   /**
    * Generates and sets the initials for the template
    * @internal
@@ -4622,24 +4607,41 @@ class BaseAvatar extends FASTElement {
       firstInitialOnly: size <= 16
     });
   }
-}
+  /**
+   * Sets the data-color attribute used for the visual presentation
+   * @internal
+   */
+  generateColor() {
+    const colorful = this.color === AvatarColor.colorful;
+    const prev = this.currentColor;
+    toggleState(this.elementInternals, `${prev}`, false);
+    this.currentColor = colorful && this.colorId ? this.colorId : colorful ? _Avatar.colors[getHashCode(this.name ?? "") % _Avatar.colors.length] : this.color ?? AvatarColor.neutral;
+    toggleState(this.elementInternals, `${this.currentColor}`, true);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    Observable.getNotifier(this).subscribe(this);
+    this.generateColor();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    Observable.getNotifier(this).unsubscribe(this);
+  }
+};
 /**
  * An array of the available Avatar named colors
  */
-BaseAvatar.colors = Object.values(AvatarNamedColor);
-__decorateClass$q([attr], BaseAvatar.prototype, "name", 2);
-__decorateClass$q([attr], BaseAvatar.prototype, "initials", 2);
+_Avatar.colors = Object.values(AvatarNamedColor);
+__decorateClass$q([attr], _Avatar.prototype, "shape", 2);
+__decorateClass$q([attr], _Avatar.prototype, "appearance", 2);
 __decorateClass$q([attr({
   converter: nullableNumberConverter
-})], BaseAvatar.prototype, "size", 2);
-__decorateClass$q([attr], BaseAvatar.prototype, "active", 2);
-__decorateClass$q([attr], BaseAvatar.prototype, "color", 2);
+})], _Avatar.prototype, "size", 2);
+__decorateClass$q([attr], _Avatar.prototype, "color", 2);
 __decorateClass$q([attr({
   attribute: "color-id"
-})], BaseAvatar.prototype, "colorId", 2);
-class Avatar extends BaseAvatar {}
-__decorateClass$q([attr], Avatar.prototype, "shape", 2);
-__decorateClass$q([attr], Avatar.prototype, "appearance", 2);
+})], _Avatar.prototype, "colorId", 2);
+let Avatar = _Avatar;
 const getHashCode = str => {
   let hashCode = 0;
   for (let len = str.length - 1; len >= 0; len--) {
@@ -6569,10 +6571,9 @@ var __decorateClass$h = (decorators, target, key, kind) => {
   if (kind && result) __defProp$h(target, key, result);
   return result;
 };
-class Field extends FASTElement {
+class BaseField extends FASTElement {
   constructor() {
     super();
-    this.labelPosition = LabelPosition.above;
     this.labelSlot = [];
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
@@ -6735,13 +6736,19 @@ class Field extends FASTElement {
     }
   }
 }
+__decorateClass$h([observable], BaseField.prototype, "labelSlot", 2);
+__decorateClass$h([observable], BaseField.prototype, "messageSlot", 2);
+__decorateClass$h([observable], BaseField.prototype, "slottedInputs", 2);
+__decorateClass$h([observable], BaseField.prototype, "input", 2);
+class Field extends BaseField {
+  constructor() {
+    super(...arguments);
+    this.labelPosition = LabelPosition.above;
+  }
+}
 __decorateClass$h([attr({
   attribute: "label-position"
 })], Field.prototype, "labelPosition", 2);
-__decorateClass$h([observable], Field.prototype, "labelSlot", 2);
-__decorateClass$h([observable], Field.prototype, "messageSlot", 2);
-__decorateClass$h([observable], Field.prototype, "slottedInputs", 2);
-__decorateClass$h([observable], Field.prototype, "input", 2);
 
 const focusVisibleState = css.partial`:is([state--focus-visible], :state(focus-visible))`;
 const badInputState = css.partial`:is([state--${ValidationFlags.badInput}], :state(${ValidationFlags.badInput}))`;