@fluentui/web-components 3.0.0-beta.11 → 3.0.0-beta.111

package/dist/esm/button/button.base.d.ts

@@ -0,0 +1,235 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { type ButtonFormTarget, ButtonType } from './button.options.js';
+/**
+ * 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 content - The button content container
+ *
+ * @public
+ */
+export declare class BaseButton extends FASTElement {
+    /**
+     * Indicates the button should be focused when the page is loaded.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#autofocus | `autofocus`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `autofocus`
+     */
+    autofocus: boolean;
+    /**
+     * Default slotted content.
+     *
+     * @public
+     */
+    defaultSlottedContent: HTMLElement[];
+    /**
+     * Sets the element's disabled state.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled | `disabled`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
+     */
+    disabled: boolean;
+    protected disabledChanged(): void;
+    /**
+     * Indicates that the button is focusable while disabled.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled-focusable`
+     */
+    disabledFocusable: boolean;
+    /**
+     * Sets the element's internal disabled state when the element is focusable while disabled.
+     *
+     * @param previous - the previous disabledFocusable value
+     * @param next - the current disabledFocusable value
+     * @internal
+     */
+    disabledFocusableChanged(previous: boolean, next: boolean): void;
+    /**
+     * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The associated form element.
+     *
+     * @public
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * The URL that processes the form submission.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formaction | `formaction`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `formaction`
+     */
+    formAction?: string;
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static readonly formAssociated = true;
+    /**
+     * The id of a form to associate the element to.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form | `form`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `form`
+     */
+    formAttribute?: string;
+    /**
+     * The encoding type for the form submission.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formenctype | `formenctype`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `formenctype`
+     */
+    formEnctype?: string;
+    /**
+     * The HTTP method that the browser uses to submit the form.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formmethod | `formmethod`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `formmethod`
+     */
+    formMethod?: string;
+    /**
+     * Indicates that the form will not be validated when submitted.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formnovalidate | `formnovalidate`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `formnovalidate`
+     */
+    formNoValidate?: boolean;
+    /**
+     * The internal form submission fallback control.
+     *
+     * @internal
+     */
+    private formSubmissionFallbackControl?;
+    /**
+     * The internal slot for the form submission fallback control.
+     *
+     * @internal
+     */
+    private formSubmissionFallbackControlSlot?;
+    /**
+     * The target frame or window to open the form submission in.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#formtarget | `formtarget`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `formtarget`
+     */
+    formTarget?: ButtonFormTarget;
+    /**
+     * A reference to all associated label elements.
+     *
+     * @public
+     */
+    get labels(): ReadonlyArray<Node>;
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name | `name`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
+     */
+    name?: string;
+    /**
+     * The button type.
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type | `type`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `type`
+     */
+    type: ButtonType;
+    /**
+     * Removes the form submission fallback control when the type changes.
+     *
+     * @param previous - the previous type value
+     * @param next - the new type value
+     * @internal
+     */
+    typeChanged(previous: ButtonType, next: ButtonType): void;
+    /**
+     * The value attribute.
+     *
+     * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value | `value`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    value?: string;
+    /**
+     * Handles the button click event.
+     *
+     * @param e - The event object
+     * @internal
+     */
+    clickHandler(e: Event): boolean | void;
+    connectedCallback(): void;
+    constructor();
+    /**
+     * This fallback creates a new slot, then creates a submit button to mirror the custom element's
+     * properties. The submit button is then appended to the slot and the form is submitted.
+     *
+     * @internal
+     * @privateRemarks
+     * This is a workaround until {@link https://github.com/WICG/webcomponents/issues/814 | WICG/webcomponents/issues/814} is resolved.
+     */
+    private createAndInsertFormSubmissionFallbackControl;
+    /**
+     * Invoked when a connected component's form or fieldset has its disabled state changed.
+     *
+     * @param disabled - the disabled value of the form / fieldset
+     *
+     * @internal
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Handles keypress events for the button.
+     *
+     * @param e - the keyboard event
+     * @returns - the return value of the click handler
+     * @public
+     */
+    keypressHandler(e: KeyboardEvent): boolean | void;
+    /**
+     * Presses the button.
+     *
+     * @public
+     */
+    protected press(): void;
+    /**
+     * Resets the associated form.
+     *
+     * @public
+     */
+    resetForm(): void;
+    /**
+     * Submits the associated form.
+     *
+     * @internal
+     */
+    private submitForm;
+}

package/dist/esm/button/button.base.js

@@ -0,0 +1,293 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
+import { ButtonType } from './button.options.js';
+/**
+ * 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 content - The button content container
+ *
+ * @public
+ */
+export class BaseButton extends FASTElement {
+    disabledChanged() {
+        if (this.disabled) {
+            this.removeAttribute('tabindex');
+        }
+        else {
+            // If author sets tabindex to a non-positive value, the component should
+            // respect it, otherwise set it to 0 to avoid the anti-pattern of setting
+            // tabindex to a positive number. See details:
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex
+            this.tabIndex = Number(this.getAttribute('tabindex') ?? 0) < 0 ? -1 : 0;
+        }
+    }
+    /**
+     * Sets the element's internal disabled state when the element is focusable while disabled.
+     *
+     * @param previous - the previous disabledFocusable value
+     * @param next - the current disabledFocusable value
+     * @internal
+     */
+    disabledFocusableChanged(previous, next) {
+        if (this.$fastController.isConnected) {
+            this.elementInternals.ariaDisabled = `${!!next}`;
+        }
+    }
+    /**
+     * The associated form element.
+     *
+     * @public
+     */
+    get form() {
+        return this.elementInternals.form;
+    }
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static { this.formAssociated = true; }
+    /**
+     * A reference to all associated label elements.
+     *
+     * @public
+     */
+    get labels() {
+        return Object.freeze(Array.from(this.elementInternals.labels));
+    }
+    /**
+     * Removes the form submission fallback control when the type changes.
+     *
+     * @param previous - the previous type value
+     * @param next - the new type value
+     * @internal
+     */
+    typeChanged(previous, next) {
+        if (next !== ButtonType.submit) {
+            this.formSubmissionFallbackControl?.remove();
+            this.shadowRoot?.querySelector('slot[name="internal"]')?.remove();
+        }
+    }
+    /**
+     * Handles the button click event.
+     *
+     * @param e - The event object
+     * @internal
+     */
+    clickHandler(e) {
+        if (e && this.disabledFocusable) {
+            e.stopImmediatePropagation();
+            return;
+        }
+        this.press();
+        return true;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
+    }
+    constructor() {
+        super();
+        /**
+         * Sets the element's disabled state.
+         * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled | `disabled`} attribute
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `disabled`
+         */
+        this.disabled = false;
+        /**
+         * Indicates that the button is focusable while disabled.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `disabled-focusable`
+         */
+        this.disabledFocusable = false;
+        /**
+         * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        this.elementInternals.role = 'button';
+    }
+    /**
+     * This fallback creates a new slot, then creates a submit button to mirror the custom element's
+     * properties. The submit button is then appended to the slot and the form is submitted.
+     *
+     * @internal
+     * @privateRemarks
+     * This is a workaround until {@link https://github.com/WICG/webcomponents/issues/814 | WICG/webcomponents/issues/814} is resolved.
+     */
+    createAndInsertFormSubmissionFallbackControl() {
+        const internalSlot = this.formSubmissionFallbackControlSlot ?? document.createElement('slot');
+        internalSlot.setAttribute('name', 'internal');
+        this.shadowRoot?.appendChild(internalSlot);
+        this.formSubmissionFallbackControlSlot = internalSlot;
+        const fallbackControl = this.formSubmissionFallbackControl ?? document.createElement('button');
+        fallbackControl.style.display = 'none';
+        fallbackControl.setAttribute('type', 'submit');
+        fallbackControl.setAttribute('slot', 'internal');
+        if (this.formNoValidate) {
+            fallbackControl.toggleAttribute('formnovalidate', true);
+        }
+        if (this.elementInternals.form?.id) {
+            fallbackControl.setAttribute('form', this.elementInternals.form.id);
+        }
+        if (this.name) {
+            fallbackControl.setAttribute('name', this.name);
+        }
+        if (this.value) {
+            fallbackControl.setAttribute('value', this.value);
+        }
+        if (this.formAction) {
+            fallbackControl.setAttribute('formaction', this.formAction ?? '');
+        }
+        if (this.formEnctype) {
+            fallbackControl.setAttribute('formenctype', this.formEnctype ?? '');
+        }
+        if (this.formMethod) {
+            fallbackControl.setAttribute('formmethod', this.formMethod ?? '');
+        }
+        if (this.formTarget) {
+            fallbackControl.setAttribute('formtarget', this.formTarget ?? '');
+        }
+        this.append(fallbackControl);
+        this.formSubmissionFallbackControl = fallbackControl;
+    }
+    /**
+     * Invoked when a connected component's form or fieldset has its disabled state changed.
+     *
+     * @param disabled - the disabled value of the form / fieldset
+     *
+     * @internal
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    /**
+     * Handles keypress events for the button.
+     *
+     * @param e - the keyboard event
+     * @returns - the return value of the click handler
+     * @public
+     */
+    keypressHandler(e) {
+        if (e && this.disabledFocusable) {
+            e.stopImmediatePropagation();
+            return;
+        }
+        if (e.key === keyEnter || e.key === keySpace) {
+            this.click();
+            return;
+        }
+        return true;
+    }
+    /**
+     * Presses the button.
+     *
+     * @public
+     */
+    press() {
+        switch (this.type) {
+            case ButtonType.reset: {
+                this.resetForm();
+                break;
+            }
+            case ButtonType.submit: {
+                this.submitForm();
+                break;
+            }
+        }
+    }
+    /**
+     * Resets the associated form.
+     *
+     * @public
+     */
+    resetForm() {
+        this.elementInternals.form?.reset();
+    }
+    /**
+     * Submits the associated form.
+     *
+     * @internal
+     */
+    submitForm() {
+        if (!this.elementInternals.form || this.disabled || this.type !== ButtonType.submit) {
+            return;
+        }
+        // workaround: if the button doesn't have any form overrides, the form can be submitted directly.
+        if (!this.name &&
+            !this.formAction &&
+            !this.formEnctype &&
+            !this.formAttribute &&
+            !this.formMethod &&
+            !this.formNoValidate &&
+            !this.formTarget) {
+            this.elementInternals.form.requestSubmit();
+            return;
+        }
+        try {
+            this.elementInternals.setFormValue(this.value ?? '');
+            this.elementInternals.form.requestSubmit(this);
+        }
+        catch (e) {
+            // `requestSubmit` throws an error since custom elements may not be able to submit the form.
+            // This fallback creates a new slot, then creates a submit button to mirror the custom element's
+            // properties. The submit button is then appended to the slot and the form is submitted.
+            this.createAndInsertFormSubmissionFallbackControl();
+            // workaround: the form value is reset since the fallback control will handle the form submission.
+            this.elementInternals.setFormValue(null);
+            this.elementInternals.form.requestSubmit(this.formSubmissionFallbackControl);
+        }
+    }
+}
+__decorate([
+    attr({ mode: 'boolean' })
+], BaseButton.prototype, "autofocus", void 0);
+__decorate([
+    observable
+], BaseButton.prototype, "defaultSlottedContent", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], BaseButton.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: 'disabled-focusable', mode: 'boolean' })
+], BaseButton.prototype, "disabledFocusable", void 0);
+__decorate([
+    attr({ attribute: 'formaction' })
+], BaseButton.prototype, "formAction", void 0);
+__decorate([
+    attr({ attribute: 'form' })
+], BaseButton.prototype, "formAttribute", void 0);
+__decorate([
+    attr({ attribute: 'formenctype' })
+], BaseButton.prototype, "formEnctype", void 0);
+__decorate([
+    attr({ attribute: 'formmethod' })
+], BaseButton.prototype, "formMethod", void 0);
+__decorate([
+    attr({ attribute: 'formnovalidate', mode: 'boolean' })
+], BaseButton.prototype, "formNoValidate", void 0);
+__decorate([
+    attr({ attribute: 'formtarget' })
+], BaseButton.prototype, "formTarget", void 0);
+__decorate([
+    attr
+], BaseButton.prototype, "name", void 0);
+__decorate([
+    attr
+], BaseButton.prototype, "type", void 0);
+__decorate([
+    attr
+], BaseButton.prototype, "value", void 0);
+//# sourceMappingURL=button.base.js.map

package/dist/esm/button/button.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.base.js","sourceRoot":"","sources":["../../../src/button/button.base.ts"],"names":[],"mappings":"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"}

package/dist/esm/button/button.bench.d.ts

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

package/dist/esm/button/button.bench.js

@@ -0,0 +1,11 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './button.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const button = document.createElement('fluent-button');
+    button.appendChild(document.createTextNode('Button'));
+    return button;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=button.bench.js.map

package/dist/esm/button/button.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.bench.js","sourceRoot":"","sources":["../../../src/button/button.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACvD,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;IACtD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/button/button.d.ts

@@ -0,0 +1,53 @@
+import { StartEnd } from '../patterns/index.js';
+import { BaseButton } from './button.base.js';
+import { ButtonAppearance, ButtonShape, ButtonSize } from './button.options.js';
+/**
+ * A Button Custom HTML Element.
+ * Based on BaseButton and includes style and layout specific attributes
+ *
+ * @tag fluent-button
+ *
+ * @public
+ */
+export declare class Button extends BaseButton {
+    /**
+     * Indicates the styled appearance of the button.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `appearance`
+     */
+    appearance?: ButtonAppearance;
+    /**
+     * The shape of the button.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `shape`
+     */
+    shape?: ButtonShape;
+    /**
+     * The size of the button.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `size`
+     */
+    size?: ButtonSize;
+    /**
+     * Indicates that the button should only display as an icon with no text content.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `icon-only`
+     */
+    iconOnly: boolean;
+}
+/**
+ * @internal
+ * @privateRemarks
+ * Mark internal because exporting class and interface of the same name confuses API documenter.
+ * TODO: https://github.com/microsoft/fast/issues/3317
+ */
+export interface Button extends StartEnd {
+}

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

@@ -0,0 +1,9 @@
+import { Button } from './button.js';
+/**
+ * The definition for the Fluent Button component.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-button>`
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Button>;

package/dist/esm/button/button.definition.js

@@ -3,16 +3,15 @@ import { Button } from './button.js';
 import { styles } from './button.styles.js';
 import { template } from './button.template.js';
 /**
+ * The definition for the Fluent Button component.
+ *
  * @public
  * @remarks
- * HTML Element: \<fluent-button\>
+ * HTML Element: `<fluent-button>`
  */
 export const definition = Button.compose({
     name: `${FluentDesignSystem.prefix}-button`,
     template,
     styles,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
 });
 //# sourceMappingURL=button.definition.js.map

package/dist/esm/button/button.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.definition.js","sourceRoot":"","sources":["../../../src/button/button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"button.definition.js","sourceRoot":"","sources":["../../../src/button/button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}