@fluentui/web-components 3.0.0-beta.51 → 3.0.0-beta.53

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';
@@ -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;
 }
 
 /**
@@ -7501,8 +7519,18 @@ export declare const roleForMenuItem: {
 };
 
 /**
- * Sets the theme tokens on defaultNode.
- * @param theme - Flat object of theme token values.
+ * Sets the theme tokens as CSS Custom Properties. The Custom Properties are
+ * set in a constructed stylesheet on `document.adoptedStyleSheets` if
+ * supported, and on `document.documentElement.style` as a fallback.
+ *
+ * @param theme - Flat object of theme tokens. Each object entry must follow
+ *     these rules: the key is the name of the token, usually in camel case, it
+ *     must be a valid CSS Custom Property name WITHOUT the starting two dashes
+ *     (`--`), the two dashes are added inside the function; the value must be
+ *     a valid CSS value, e.g. it cannot contain semicolons (`;`).
+ *     Note that this argument is not limited to existing theme objects (from
+ *     `@fluentui/tokens`), you can pass in an arbitrary theme object as long
+ *     as each entry’s value is either a string or a number.
  * @internal
  */
 export declare const setTheme: (theme: Theme) => void;
@@ -8251,7 +8279,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 +8288,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

@@ -6571,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.
@@ -6737,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}))`;