@fluentui/web-components 3.0.0-beta.2 → 3.0.0-beta.21

package/dist/esm/button/button.js

@@ -1,67 +1,288 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { attr } from '@microsoft/fast-element';
-import { FASTButton } from '@microsoft/fast-foundation/button.js';
+import { __decorate } from "tslib";
+import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
+import { StartEnd } from '../patterns/index.js';
+import { applyMixins } from '../utils/apply-mixins.js';
+import { ButtonType } from './button.options.js';
 /**
- * The base class used for constructing a fluent-button custom element
+ * 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 Button extends FASTButton {
+export class Button extends FASTElement {
     constructor() {
-        super(...arguments);
+        super();
         /**
-         * The button has an icon only, no text content
+         * Indicates that the button is focusable while disabled.
          *
          * @public
          * @remarks
-         * HTML Attribute: icon-only
+         * HTML Attribute: `disabled-focusable`
          */
-        this.iconOnly = false;
+        this.disabledFocusable = false;
         /**
-         * The button is disabled but focusable
+         * The internal {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
          *
-         * @public
-         * @remarks
-         * HTML Attribute: disabled-focusable
+         * @internal
          */
-        this.disabledFocusable = false;
+        this.elementInternals = this.attachInternals();
         /**
-         * Prevents disabledFocusable click events
+         * Indicates that the button should only display as an icon with no text content.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `icon-only`
          */
-        this.handleDisabledFocusableClick = (e) => {
-            if (e && this.disabledFocusable) {
-                e.stopImmediatePropagation();
-                return;
-            }
-        };
+        this.iconOnly = false;
+        this.elementInternals.role = 'button';
     }
-    disabledFocusableChanged(prev, next) {
-        if (!this.$fastController.isConnected) {
-            return;
+    /**
+     * 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}`;
         }
-        if (this.disabledFocusable) {
-            this.setAttribute('aria-disabled', 'true');
+    }
+    /**
+     * The associated form element.
+     *
+     * @public
+     */
+    get form() {
+        return this.elementInternals.form;
+    }
+    /**
+     * 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) {
+        var _a, _b, _c;
+        if (next !== ButtonType.submit) {
+            (_a = this.formSubmissionFallbackControl) === null || _a === void 0 ? void 0 : _a.remove();
+            (_c = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="internal"]')) === null || _c === void 0 ? void 0 : _c.remove();
         }
-        else {
-            this.removeAttribute('aria-disabled');
+    }
+    /**
+     * 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.addEventListener('click', this.handleDisabledFocusableClick);
+        this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
+    }
+    /**
+     * 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() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const internalSlot = (_a = this.formSubmissionFallbackControlSlot) !== null && _a !== void 0 ? _a : document.createElement('slot');
+        internalSlot.setAttribute('name', 'internal');
+        (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.appendChild(internalSlot);
+        this.formSubmissionFallbackControlSlot = internalSlot;
+        const fallbackControl = (_c = this.formSubmissionFallbackControl) !== null && _c !== void 0 ? _c : document.createElement('button');
+        fallbackControl.style.display = 'none';
+        fallbackControl.setAttribute('type', 'submit');
+        fallbackControl.setAttribute('slot', 'internal');
+        if (this.formNoValidate) {
+            fallbackControl.toggleAttribute('formnovalidate', true);
+        }
+        if ((_d = this.elementInternals.form) === null || _d === void 0 ? void 0 : _d.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', (_e = this.formAction) !== null && _e !== void 0 ? _e : '');
+        }
+        if (this.formEnctype) {
+            fallbackControl.setAttribute('formenctype', (_f = this.formEnctype) !== null && _f !== void 0 ? _f : '');
+        }
+        if (this.formMethod) {
+            fallbackControl.setAttribute('formmethod', (_g = this.formMethod) !== null && _g !== void 0 ? _g : '');
+        }
+        if (this.formTarget) {
+            fallbackControl.setAttribute('formtarget', (_h = this.formTarget) !== null && _h !== void 0 ? _h : '');
+        }
+        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;
+            }
+        }
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('click', this.handleDisabledFocusableClick);
+    /**
+     * Resets the associated form.
+     *
+     * @public
+     */
+    resetForm() {
+        var _a;
+        (_a = this.elementInternals.form) === null || _a === void 0 ? void 0 : _a.reset();
+    }
+    /**
+     * Submits the associated form.
+     *
+     * @internal
+     */
+    submitForm() {
+        var _a;
+        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.form &&
+            !this.formMethod &&
+            !this.formNoValidate &&
+            !this.formTarget) {
+            this.elementInternals.form.requestSubmit();
+            return;
+        }
+        try {
+            this.elementInternals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : '');
+            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);
+        }
     }
 }
+/**
+ * The form-associated flag.
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+ *
+ * @public
+ */
+Button.formAssociated = true;
 __decorate([
     attr
 ], Button.prototype, "appearance", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Button.prototype, "autofocus", void 0);
+__decorate([
+    observable
+], Button.prototype, "defaultSlottedContent", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Button.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: 'disabled-focusable', mode: 'boolean' })
+], Button.prototype, "disabledFocusable", void 0);
+__decorate([
+    attr({ attribute: 'formaction' })
+], Button.prototype, "formAction", void 0);
+__decorate([
+    attr({ attribute: 'form' })
+], Button.prototype, "formAttribute", void 0);
+__decorate([
+    attr({ attribute: 'formenctype' })
+], Button.prototype, "formEnctype", void 0);
+__decorate([
+    attr({ attribute: 'formmethod' })
+], Button.prototype, "formMethod", void 0);
+__decorate([
+    attr({ attribute: 'formnovalidate', mode: 'boolean' })
+], Button.prototype, "formNoValidate", void 0);
+__decorate([
+    attr({ attribute: 'formtarget' })
+], Button.prototype, "formTarget", void 0);
+__decorate([
+    attr({ attribute: 'icon-only', mode: 'boolean' })
+], Button.prototype, "iconOnly", void 0);
+__decorate([
+    attr
+], Button.prototype, "name", void 0);
 __decorate([
     attr
 ], Button.prototype, "shape", void 0);
@@ -69,9 +290,10 @@ __decorate([
     attr
 ], Button.prototype, "size", void 0);
 __decorate([
-    attr({ attribute: 'icon-only', mode: 'boolean' })
-], Button.prototype, "iconOnly", void 0);
+    attr
+], Button.prototype, "type", void 0);
 __decorate([
-    attr({ attribute: 'disabled-focusable', mode: 'boolean' })
-], Button.prototype, "disabledFocusable", void 0);
+    attr
+], Button.prototype, "value", void 0);
+applyMixins(Button, StartEnd);
 //# sourceMappingURL=button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAGlE;;;GAGG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QA+BE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,sBAAiB,GAAa,KAAK,CAAC;QAa3C;;WAEG;QACK,iCAA4B,GAAG,CAAC,CAAa,EAAQ,EAAE;YAC7D,IAAI,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAC/B,CAAC,CAAC,wBAAwB,EAAE,CAAC;gBAC7B,OAAO;aACR;QACH,CAAC,CAAC;IAaJ,CAAC;IAjCW,wBAAwB,CAAC,IAAa,EAAE,IAAa;QAC7D,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACrC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE;YACxB,IAAgC,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;SAC1E;aAAM;YACH,IAAgC,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;SACrE;IACH,CAAC;IAYM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAExB,IAAgC,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;IAClG,CAAC;IAEM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE3B,IAAgC,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;IACrG,CAAC;CACF;AA1EC;IADC,IAAI;0CAC4C;AAUjD;IADC,IAAI;qCACkC;AAUvC;IADC,IAAI;oCACoB;AAUzB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACjB;AAUjC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDAChB"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/button/button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;;;;;;;;;GAUG;AACH,MAAM,OAAO,MAAO,SAAQ,WAAW;IAoRrC;QACE,KAAK,EAAE,CAAC;QA5OV;;;;;;WAMG;QAEI,sBAAiB,GAAY,KAAK,CAAC;QAe1C;;;;WAIG;QACO,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAmGtE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAsG/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,QAAQ,CAAC;IACxC,CAAC;IApOD;;;;;;OAMG;IACI,wBAAwB,CAAC,QAAiB,EAAE,IAAa;QAC9D,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACpC,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;SAClD;IACH,CAAC;IASD;;;;OAIG;IACH,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAoGD;;;;OAIG;IACH,IAAW,MAAM;QACf,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC;IACjE,CAAC;IA4CD;;;;;;OAMG;IACI,WAAW,CAAC,QAAoB,EAAE,IAAgB;;QACvD,IAAI,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE;YAC9B,MAAA,IAAI,CAAC,6BAA6B,0CAAE,MAAM,EAAE,CAAC;YAC7C,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,uBAAuB,CAAC,0CAAE,MAAM,EAAE,CAAC;SACnE;IACH,CAAC;IAcD;;;;;OAKG;IACI,YAAY,CAAC,CAAQ;QAC1B,IAAI,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC/B,CAAC,CAAC,wBAAwB,EAAE,CAAC;YAC7B,OAAO;SACR;QAED,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,GAAG,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACrE,CAAC;IAOD;;;;;;;OAOG;IACK,4CAA4C;;QAClD,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,iCAAiC,mCAAI,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC9F,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAC9C,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,YAAY,CAAC,CAAC;QAC3C,IAAI,CAAC,iCAAiC,GAAG,YAAY,CAAC;QAEtD,MAAM,eAAe,GAAG,MAAA,IAAI,CAAC,6BAA6B,mCAAI,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC/F,eAAe,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACvC,eAAe,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAC/C,eAAe,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAEjD,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,eAAe,CAAC,eAAe,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;SACzD;QAED,IAAI,MAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,0CAAE,EAAE,EAAE;YAClC,eAAe,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACrE;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,eAAe,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;SACjD;QAED,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,eAAe,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SACnD;QAED,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,MAAA,IAAI,CAAC,UAAU,mCAAI,EAAE,CAAC,CAAC;SACnE;QAED,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,eAAe,CAAC,YAAY,CAAC,aAAa,EAAE,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE,CAAC,CAAC;SACrE;QAED,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,MAAA,IAAI,CAAC,UAAU,mCAAI,EAAE,CAAC,CAAC;SACnE;QAED,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,MAAA,IAAI,CAAC,UAAU,mCAAI,EAAE,CAAC,CAAC;SACnE;QAED,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAE7B,IAAI,CAAC,6BAA6B,GAAG,eAAe,CAAC;IACvD,CAAC;IAED;;;;;;OAMG;IACI,oBAAoB,CAAC,QAAiB;QAC3C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAED;;;;;;OAMG;IACI,eAAe,CAAC,CAAgB;QACrC,IAAI,CAAC,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC/B,CAAC,CAAC,wBAAwB,EAAE,CAAC;YAC7B,OAAO;SACR;QAED,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC5C,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,OAAO;SACR;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;OAIG;IACO,KAAK;QACb,QAAQ,IAAI,CAAC,IAAI,EAAE;YACjB,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC;gBACrB,IAAI,CAAC,SAAS,EAAE,CAAC;gBACjB,MAAM;aACP;YAED,KAAK,UAAU,CAAC,MAAM,CAAC,CAAC;gBACtB,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,MAAM;aACP;SACF;IACH,CAAC;IAED;;;;OAIG;IACI,SAAS;;QACd,MAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAC;IACtC,CAAC;IAED;;;;OAIG;IACK,UAAU;;QAChB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE;YACnF,OAAO;SACR;QAED,iGAAiG;QACjG,IACE,CAAC,IAAI,CAAC,IAAI;YACV,CAAC,IAAI,CAAC,UAAU;YAChB,CAAC,IAAI,CAAC,WAAW;YACjB,CAAC,IAAI,CAAC,IAAI;YACV,CAAC,IAAI,CAAC,UAAU;YAChB,CAAC,IAAI,CAAC,cAAc;YACpB,CAAC,IAAI,CAAC,UAAU,EAChB;YACA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YAC3C,OAAO;SACR;QAED,IAAI;YACF,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC;YACrD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;SAChD;QAAC,OAAO,CAAC,EAAE;YACV,4FAA4F;YAC5F,gGAAgG;YAChG,wFAAwF;YACxF,IAAI,CAAC,4CAA4C,EAAE,CAAC;YAEpD,kGAAkG;YAClG,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;SAC9E;IACH,CAAC;;AAvVD;;;;;GAKG;AACa,qBAAc,GAAG,IAAI,CAAC;AAxFtC;IADC,IAAI;0CACgC;AAWrC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;yCACC;AAQ3B;IADC,UAAU;qDACkC;AAW7C;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACP;AAUnB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDACjB;AAwC1C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;0CACP;AAmB3B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;6CACE;AAW9B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;2CACP;AAW5B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;0CACP;AAW3B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CACvB;AAyBhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;0CACG;AAUrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACjB;AAoBjC;IADC,IAAI;oCACgB;AAUrB;IADC,IAAI;qCACsB;AAU3B;IADC,IAAI;oCACoB;AAWzB;IADC,IAAI;oCACoB;AA0BzB;IADC,IAAI;qCACiB;AAgMxB,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC"}

package/dist/esm/button/button.options.js

@@ -27,4 +27,24 @@ export const ButtonSize = {
     medium: 'medium',
     large: 'large',
 };
+/**
+ * Button type values.
+ *
+ * @public
+ */
+export const ButtonType = {
+    submit: 'submit',
+    reset: 'reset',
+    button: 'button',
+};
+/**
+ * Button `formtarget` attribute values.
+ * @public
+ */
+export const ButtonFormTarget = {
+    blank: '_blank',
+    self: '_self',
+    parent: '_parent',
+    top: '_top',
+};
 //# sourceMappingURL=button.options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.options.js","sourceRoot":"","sources":["../../../src/button/button.options.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,aAAa;CAClB,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC"}
+{"version":3,"file":"button.options.js","sourceRoot":"","sources":["../../../src/button/button.options.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,aAAa;CAClB,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAeX;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,SAAS;IACjB,GAAG,EAAE,MAAM;CACH,CAAC"}

package/dist/esm/button/button.styles.js

@@ -1,7 +1,11 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { borderRadiusCircular, borderRadiusLarge, borderRadiusMedium, borderRadiusNone, borderRadiusSmall, colorBrandBackground, colorBrandBackgroundHover, colorBrandBackgroundPressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackgroundDisabled, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground1Pressed, colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundOnBrand, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorSubtleBackground, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, colorTransparentBackground, colorTransparentBackgroundHover, colorTransparentBackgroundPressed, colorTransparentStroke, curveEasyEase, durationFaster, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, shadow4, spacingHorizontalL, spacingHorizontalM, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
-// Need to support icon hover styles
+/**
+ * The styles for the Button component.
+ *
+ * @public
+ */
 export const styles = css `
   ${display('inline-flex')}
 
@@ -9,13 +13,10 @@ export const styles = css `
     --icon-spacing: ${spacingHorizontalSNudge};
     contain: layout style;
     vertical-align: middle;
-  }
-
-  :host .control {
-    display: inline-flex;
     align-items: center;
     box-sizing: border-box;
     justify-content: center;
+    text-align: center;
     text-decoration-line: none;
     margin: 0;
     min-height: 32px;
@@ -34,28 +35,29 @@ export const styles = css `
     transition-property: background, border, color;
     transition-timing-function: ${curveEasyEase};
     cursor: pointer;
+    user-select: none;
   }
 
   .content {
     display: inherit;
   }
 
-  :host(:hover) .control {
+  :host(:hover) {
     background-color: ${colorNeutralBackground1Hover};
     color: ${colorNeutralForeground1Hover};
     border-color: ${colorNeutralStroke1Hover};
   }
 
-  :host(:hover:active) .control {
+  :host(:hover:active) {
     background-color: ${colorNeutralBackground1Pressed};
     border-color: ${colorNeutralStroke1Pressed};
     color: ${colorNeutralForeground1Pressed};
     outline-style: none;
   }
 
-  :host .control:focus-visible {
+  :host(:focus-visible) {
     border-color: ${colorTransparentStroke};
-    outline: ${strokeWidthThick} solid ${colorTransparentStroke};
+    outline: ${strokeWidthThick}) solid ${colorTransparentStroke};
     box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
   }
 
@@ -80,16 +82,13 @@ export const styles = css `
     margin-inline-start: var(--icon-spacing);
   }
 
-  :host([icon-only]) .control {
+  :host([icon-only]) {
     min-width: 32px;
     max-width: 32px;
   }
 
   :host([size='small']) {
     --icon-spacing: ${spacingHorizontalXS};
-  }
-
-  :host([size='small']) .control {
     min-height: 24px;
     min-width: 64px;
     padding: 0 ${spacingHorizontalS};
@@ -99,12 +98,12 @@ export const styles = css `
     font-weight: ${fontWeightRegular};
   }
 
-  :host([size='small'][icon-only]) .control {
+  :host([size='small'][icon-only]) {
     min-width: 24px;
     max-width: 24px;
   }
 
-  :host([size='large']) .control {
+  :host([size='large']) {
     min-height: 40px;
     border-radius: ${borderRadiusLarge};
     padding: 0 ${spacingHorizontalL};
@@ -112,7 +111,7 @@ export const styles = css `
     line-height: ${lineHeightBase400};
   }
 
-  :host([size='large'][icon-only]) .control {
+  :host([size='large'][icon-only]) {
     min-width: 40px;
     max-width: 40px;
   }
@@ -123,86 +122,86 @@ export const styles = css `
     width: 24px;
   }
 
-  :host([shape='circular']) .control,
-  :host([shape='circular']) .control:focus-visible {
+  :host([shape='circular']),
+  :host([shape='circular']:focus-visible) {
     border-radius: ${borderRadiusCircular};
   }
 
-  :host([shape='square']) .control,
-  :host([shape='square']) .control:focus-visible {
+  :host([shape='square']),
+  :host([shape='square']:focus-visible) {
     border-radius: ${borderRadiusNone};
   }
 
-  :host([appearance='primary']) .control {
+  :host([appearance='primary']) {
     background-color: ${colorBrandBackground};
     color: ${colorNeutralForegroundOnBrand};
     border-color: transparent;
   }
 
-  :host([appearance='primary']:hover) .control {
+  :host([appearance='primary']:hover) {
     background-color: ${colorBrandBackgroundHover};
   }
 
-  :host([appearance='primary']:hover) .control,
-  :host([appearance='primary']:hover:active) .control {
+  :host([appearance='primary']:hover),
+  :host([appearance='primary']:hover:active) {
     border-color: transparent;
     color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([appearance='primary']:hover:active) .control {
+  :host([appearance='primary']:hover:active) {
     background-color: ${colorBrandBackgroundPressed};
   }
 
-  :host([appearance='primary']) .control:focus-visible {
+  :host([appearance='primary']:focus-visible) {
     border-color: ${colorNeutralForegroundOnBrand};
     box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
   }
 
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"])) .control,
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover) .control,
-  :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"]):hover:active) .control {
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary'])),
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover),
+  :host(:is([disabled][appearance='primary'], [disabled-focusabale][appearance='primary']):hover:active) {
     border-color: transparent;
   }
 
-  :host([appearance='outline']) .control {
+  :host([appearance='outline']) {
     background-color: ${colorTransparentBackground};
   }
 
-  :host([appearance='outline']:hover) .control {
+  :host([appearance='outline']:hover) {
     background-color: ${colorTransparentBackgroundHover};
   }
 
-  :host([appearance='outline']:hover:active) .control {
+  :host([appearance='outline']:hover:active) {
     background-color: ${colorTransparentBackgroundPressed};
   }
 
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"])) .control,
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover) .control,
-  :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover:active) .control {
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline'])),
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover),
+  :host(:is([disabled][appearance='outline'], [disabled-focusabale][appearance='outline']):hover:active) {
     background-color: ${colorTransparentBackground};
   }
 
-  :host([appearance='subtle']) .control {
+  :host([appearance='subtle']) {
     background-color: ${colorSubtleBackground};
     color: ${colorNeutralForeground2};
     border-color: transparent;
   }
 
-  :host([appearance='subtle']:hover) .control {
+  :host([appearance='subtle']:hover) {
     background-color: ${colorSubtleBackgroundHover};
     color: ${colorNeutralForeground2Hover};
     border-color: transparent;
   }
 
-  :host([appearance='subtle']:hover:active) .control {
+  :host([appearance='subtle']:hover:active) {
     background-color: ${colorSubtleBackgroundPressed};
     color: ${colorNeutralForeground2Pressed};
     border-color: transparent;
   }
 
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"])) .control,
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover) .control,
-  :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover:active) .control {
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle'])),
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover),
+  :host(:is([disabled][appearance='subtle'], [disabled-focusabale][appearance='subtle']):hover:active) {
     background-color: ${colorTransparentBackground};
     border-color: transparent;
   }
@@ -215,45 +214,44 @@ export const styles = css `
     fill: ${colorNeutralForeground2BrandPressed};
   }
 
-  :host([appearance='transparent']) .control {
+  :host([appearance='transparent']) {
     background-color: ${colorTransparentBackground};
     color: ${colorNeutralForeground2};
   }
 
-  :host([appearance='transparent']:hover) .control {
+  :host([appearance='transparent']:hover) {
     background-color: ${colorTransparentBackgroundHover};
     color: ${colorNeutralForeground2BrandHover};
   }
 
-  :host([appearance='transparent']:hover:active) .control {
+  :host([appearance='transparent']:hover:active) {
     background-color: ${colorTransparentBackgroundPressed};
     color: ${colorNeutralForeground2BrandPressed};
   }
 
-  :host([appearance='transparent']) .control,
-  :host([appearance='transparent']:hover) .control,
-  :host([appearance='transparent']:hover:active) .control {
+  :host([appearance='transparent']),
+  :host([appearance='transparent']:hover),
+  :host([appearance='transparent']:hover:active) {
     border-color: transparent;
   }
 
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"])) .control,
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover) .control,
-  :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover:active) .control {
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent'])),
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover),
+  :host(:is([disabled][appearance='transparent'], [disabled-focusabale][appearance='transparent']):hover:active) {
     border-color: transparent;
     background-color: ${colorTransparentBackground};
   }
 
-  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable])) .control,
-  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover) .control,
-  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover:active)
-    .control {
+  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable])),
+  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover),
+  :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover:active) {
     background-color: ${colorNeutralBackgroundDisabled};
     border-color: ${colorNeutralStrokeDisabled};
     color: ${colorNeutralForegroundDisabled};
     cursor: not-allowed;
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host([appearance='transparent']:hover) .control {
+    :host([appearance='transparent']:hover) {
       border-color: Highlight;
     }
   `));