@vonage/vivid 3.0.0 → 3.1.0

package/progress/index.js

@@ -1,99 +1,7 @@
-import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
-import '../shared/web.dom-collections.iterator.js';
-import { F as classofRaw, _ as _export, C as functionUncurryThis } from '../shared/object-set-prototype-of.js';
-import { B as BaseProgress } from '../shared/base-progress.js';
-import { w as when } from '../shared/when.js';
-import { c as classNames } from '../shared/class-names.js';
+import { r as registerProgress } from '../shared/definition32.js';
+import '../shared/index.js';
+import '../shared/base-progress.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
 
-var css_248z = ".base {\n  height: 6px;\n  align-items: center;\n  margin: 0;\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.base:not(.connotation-pacific):not(.connotation-cta):not(.connotation-alert):not(.connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.base.connotation-pacific {\n  --connotation: linear-gradient(to right, var(--vvd-color-info-30), var(--vvd-color-cta-70));\n}\n\n.indeterminate {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  border-radius: 3px;\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 100%;\n}\n.progress .indeterminate {\n  background-color: var(--connotation);\n}\n\n.determinate {\n  background-color: var(--connotation);\n  block-size: 100%;\n  border-radius: 3px;\n  transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n  background-image: var(--connotation);\n}\n\n.indeterminate-indicator-1, .indeterminate-indicator-2 {\n  position: absolute;\n  animation: indeterminate-1 2s infinite;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 30%;\n  opacity: 0;\n}\n\n.indeterminate-indicator-2 {\n  animation: indeterminate-2 2s infinite;\n  inline-size: 60%;\n}\n\n.connotation-pacific .indeterminate-indicator-1, .connotation-pacific .indeterminate-indicator-2 {\n  background-image: var(--connotation);\n}\n\n.reverse .indeterminate-indicator-1, .reverse .indeterminate-indicator-2 {\n  animation-direction: reverse;\n}\n.reverse .determinate {\n  position: absolute;\n  right: 0;\n}\n\n.base.shape-sharp .determinate, .base.shape-sharp .indeterminate {\n  border-radius: 0;\n}\n\n.base.paused .indeterminate-indicator-1,\n.base.paused .indeterminate-indicator-2 {\n  animation-play-state: paused;\n  background-color: var(--connotation);\n}\n\n.base.paused .determinate {\n  background-color: var(--vvd-color-neutral-40);\n}\n\n@keyframes indeterminate-1 {\n  0% {\n    opacity: 1;\n    transform: translateX(-100%);\n  }\n  70% {\n    opacity: 1;\n    transform: translateX(300%);\n  }\n  70.01% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(300%);\n  }\n}\n@keyframes indeterminate-2 {\n  0% {\n    opacity: 0;\n    transform: translateX(-150%);\n  }\n  29.99% {\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n    transform: translateX(-150%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(166.66%);\n  }\n}";
-styleInject(css_248z);
-
-var classof = classofRaw;
-
-// `IsArray` abstract operation
-// https://tc39.es/ecma262/#sec-isarray
-// eslint-disable-next-line es/no-array-isarray -- safe
-var isArray$1 = Array.isArray || function isArray(argument) {
-  return classof(argument) == 'Array';
-};
-
-var $ = _export;
-var uncurryThis = functionUncurryThis;
-var isArray = isArray$1;
-
-var un$Reverse = uncurryThis([].reverse);
-var test = [1, 2];
-
-// `Array.prototype.reverse` method
-// https://tc39.es/ecma262/#sec-array.prototype.reverse
-// fix for Safari 12.0 bug
-// https://bugs.webkit.org/show_bug.cgi?id=188794
-$({ target: 'Array', proto: true, forced: String(test) === String(test.reverse()) }, {
-  reverse: function reverse() {
-    // eslint-disable-next-line no-self-assign -- dirty hack
-    if (isArray(this)) this.length = this.length;
-    return un$Reverse(this);
-  }
-});
-
-class Progress extends BaseProgress {
-  constructor() {
-    super(...arguments);
-    this.reverse = false;
-  }
-
-}
-
-__decorate([attr(), __metadata("design:type", String)], Progress.prototype, "shape", void 0);
-
-__decorate([attr(), __metadata("design:type", String)], Progress.prototype, "connotation", void 0);
-
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Progress.prototype, "reverse", void 0);
-
-let _2 = t => t,
-    _t,
-    _t2,
-    _t3;
-
-const getClasses = _ => classNames('base', [`connotation-${_.connotation}`, !!_.connotation], [`shape-${_.shape}`, !!_.shape], ['reverse', _.reverse]);
-
-const ProgressTemplate = _ => {
-  return html(_t || (_t = _2`
-    <div
-      role="progressbar"
-      aria-valuenow="${0}"
-      aria-valuemin="${0}"
-      aria-valuemax="${0}"
-      class="${0} ${0}"
-    >
-      ${0}
-      ${0}
-    </div>
-  `), x => x.value, x => x.min, x => x.max, x => x.paused ? 'paused' : '', getClasses, when(x => typeof x.value === 'number', html(_t2 || (_t2 = _2`
-                  <div class="progress">
-                      <div
-                          class="determinate"
-                          style="width: ${0}%"
-                      ></div>
-                  </div>
-              `), x => x.percentComplete)), when(x => typeof x.value !== 'number', html(_t3 || (_t3 = _2`
-                  <div class="progress indeterminate">
-                      <span class="indeterminate" name="indeterminate">
-                        <span class="indeterminate-indicator-1"></span>
-                        <span class="indeterminate-indicator-2"></span>
-                      </span>
-                  </div>
-              `))));
-};
-
-const vividProgress = Progress.compose({
-  baseName: 'progress',
-  template: ProgressTemplate,
-  styles: css_248z
-});
-designSystem.register(vividProgress());
-
-export { vividProgress };
+registerProgress();

package/progress-ring/index.js

@@ -1,76 +1,7 @@
-import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
-import { B as BaseProgress } from '../shared/base-progress.js';
-import { w as when } from '../shared/when.js';
-import { c as classNames } from '../shared/class-names.js';
+import { r as registerProgressRing } from '../shared/definition33.js';
+import '../shared/index.js';
+import '../shared/base-progress.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
 
-var css_248z = ".base {\n  width: 36px;\n  height: 36px;\n  align-items: center;\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.base:not(.connotation-cta):not(.connotation-alert):not(.connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.base.base-large {\n  width: 48px;\n  height: 48px;\n}\n\n.base.base-small {\n  width: 24px;\n  height: 24px;\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n  stroke: var(--vvd-color-neutral);\n}\n\n.base.paused .determinate {\n  stroke: var(--vvd-color-neutral);\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
-styleInject(css_248z);
-
-class ProgressRing extends BaseProgress {}
-
-__decorate([attr(), __metadata("design:type", String)], ProgressRing.prototype, "connotation", void 0);
-
-let _2 = t => t,
-    _t,
-    _t2,
-    _t3;
-
-const getClasses = _ => classNames('base', [`connotation-${_.connotation}`, !!_.connotation]);
-
-const progressSegments = 44;
-const ProgressRingTemplate = _ => html(_t || (_t = _2`
-<div
-        role="progressbar"
-        aria-valuenow="${0}"
-        aria-valuemin="${0}"
-        aria-valuemax="${0}"
-        class="${0} ${0}"
-    >
-        ${0}
-        ${0}
-    </div>
-`), x => x.value, x => x.min, x => x.max, x => x.paused ? 'paused' : '', getClasses, when(x => typeof x.value === 'number', html(_t2 || (_t2 = _2`
-                <svg
-                    class="progress"
-                    viewBox="0 0 16 16"
-                >
-                    <circle
-                        class="background"
-                        cx="8px"
-                        cy="8px"
-                        r="7px"
-                    ></circle>
-                    <circle
-                        class="determinate"
-                        style="stroke-dasharray: ${0}px ${0}px"
-                        cx="8px"
-                        cy="8px"
-                        r="7px"
-                    ></circle>
-                </svg>
-            `), x => progressSegments * x.percentComplete / 100, progressSegments)), when(x => typeof x.value !== 'number', html(_t3 || (_t3 = _2`
-            <svg class="progress" viewBox="0 0 16 16">
-              <circle
-                class="background"
-                cx="8px"
-                cy="8px"
-                r="7px"
-              ></circle>
-              <circle
-                class="indeterminate-indicator-1"
-                cx="8px"
-                cy="8px"
-                r="7px"
-              ></circle>
-            </svg>
-            `))));
-
-const vividProgressRing = ProgressRing.compose({
-  baseName: 'progress-ring',
-  template: ProgressRingTemplate,
-  styles: css_248z
-});
-designSystem.register(vividProgressRing());
-
-export { vividProgressRing };
+registerProgressRing();

package/radio/index.js

@@ -0,0 +1,12 @@
+import { r as registerRadio } from '../shared/definition34.js';
+import '../shared/index.js';
+import '../shared/definition4.js';
+import '../shared/focus.js';
+import '../shared/radio.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
+import '../shared/focus2.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+
+registerRadio();

package/radio-group/index.js

@@ -0,0 +1,11 @@
+import { r as registerRadioGroup } from '../shared/definition35.js';
+import '../shared/index.js';
+import '../shared/direction.js';
+import '../shared/key-codes.js';
+import '../shared/aria.js';
+import '../shared/radio.js';
+import '../shared/form-associated.js';
+import '../shared/slotted.js';
+import '../shared/when.js';
+
+registerRadioGroup();

package/select/index.js

@@ -0,0 +1,34 @@
+import { r as registerSelect } from '../shared/definition36.js';
+import '../shared/index.js';
+import '../shared/definition4.js';
+import '../shared/focus.js';
+import '../shared/definition18.js';
+import '../shared/definition9.js';
+import '../shared/definition3.js';
+import '../shared/icon.js';
+import '../shared/to-string.js';
+import '../shared/string-trim.js';
+import '../shared/_has.js';
+import '../shared/class-names.js';
+import '../shared/when.js';
+import '../shared/affix.js';
+import '../shared/button.js';
+import '../shared/apply-mixins.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
+import '../shared/aria-global.js';
+import '../shared/start-end.js';
+import '../shared/ref.js';
+import '../shared/focus2.js';
+import '../shared/definition15.js';
+import '../shared/es.object.assign.js';
+import '../shared/definition19.js';
+import '../shared/dom.js';
+import '../shared/form-elements.js';
+import '../shared/listbox.js';
+import '../shared/strings.js';
+import '../shared/numbers.js';
+import '../shared/select.options.js';
+import '../shared/slotted.js';
+
+registerSelect();

package/shared/affix.js

@@ -1,29 +1,23 @@
-import './web.dom-collections.iterator.js';
 import { _ as __decorate, a as attr, b as __metadata, h as html } from './index.js';
 import { I as Icon } from './icon.js';
 
 let _ = t => t,
-    _t;
+  _t;
 class AffixIcon {}
-
 __decorate([attr, __metadata("design:type", String)], AffixIcon.prototype, "icon", void 0);
-
 class AffixIconWithTrailing extends AffixIcon {
   constructor() {
     super(...arguments);
     this.iconTrailing = false;
   }
-
 }
-
 __decorate([attr({
   mode: 'boolean',
   attribute: 'icon-trailing'
 }), __metadata("design:type", Object)], AffixIconWithTrailing.prototype, "iconTrailing", void 0);
-
 const affixIconTemplateFactory = context => {
   const iconTag = context.tagFor(Icon);
-  return icon => icon ? html(_t || (_t = _`<span class="icon"><${0} :type="${0}"></${0}></span>`), iconTag, () => icon, iconTag) : null;
+  return icon => icon ? html(_t || (_t = _`<span class="${0}"><${0} :name="${0}"></${0}></span>`), 'icon', iconTag, () => icon, iconTag) : null;
 };
 
 export { AffixIconWithTrailing as A, affixIconTemplateFactory as a, AffixIcon as b };

package/shared/anchor.js

@@ -1,11 +1,18 @@
 import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { A as ARIAGlobalStatesAndProperties, S as StartEnd } from './aria-global.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { S as StartEnd } from './start-end.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
  */
 class Anchor extends FoundationElement {
@@ -20,7 +27,8 @@ class Anchor extends FoundationElement {
             var _a;
             // Check to see if delegatesFocus is supported
             if (window.ShadowRoot &&
-                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
                 this.focus = () => {
                     this.control.focus();
                 };

package/shared/apply-mixins.js

@@ -1,9 +1,12 @@
+import { S as AttributeConfiguration } from './index.js';
+
 /**
  * Apply mixins to a constructor.
  * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
  * @public
  */
 function applyMixins(derivedCtor, ...baseCtors) {
+    const derivedAttributes = AttributeConfiguration.locate(derivedCtor);
     baseCtors.forEach(baseCtor => {
         Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
             if (name !== "constructor") {
@@ -12,10 +15,8 @@ function applyMixins(derivedCtor, ...baseCtors) {
                 Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
             }
         });
-        if (baseCtor.attributes) {
-            const existing = derivedCtor.attributes || [];
-            derivedCtor.attributes = existing.concat(baseCtor.attributes);
-        }
+        const baseAttributes = AttributeConfiguration.locate(baseCtor);
+        baseAttributes.forEach(x => derivedAttributes.push(x));
     });
 }
 

package/shared/aria-global.js

@@ -1,88 +1,4 @@
-import { A as AttachedBehaviorHTMLDirective, h as html, _ as __decorate, a as attr } from './index.js';
-
-/**
- * The runtime behavior for template references.
- * @public
- */
-class RefBehavior {
-    /**
-     * Creates an instance of RefBehavior.
-     * @param target - The element to reference.
-     * @param propertyName - The name of the property to assign the reference to.
-     */
-    constructor(target, propertyName) {
-        this.target = target;
-        this.propertyName = propertyName;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     */
-    bind(source) {
-        source[this.propertyName] = this.target;
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     */
-    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
-    unbind() { }
-}
-/**
- * A directive that observes the updates a property with a reference to the element.
- * @param propertyName - The name of the property to assign the reference to.
- * @public
- */
-function ref(propertyName) {
-    return new AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
-}
-
-/**
- * A mixin class implementing start and end elements.
- * These are generally used to decorate text elements with icons or other visual indicators.
- * @public
- */
-class StartEnd {
-    handleStartContentChange() {
-        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
-    }
-    handleEndContentChange() {
-        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
-    }
-}
-/**
- * The template for the end element.
- * For use with {@link StartEnd}
- *
- * @public
- * @deprecated - use endSlotTemplate
- */
-html `
-    <span part="end" ${ref("endContainer")}>
-        <slot
-            name="end"
-            ${ref("end")}
-            @slotchange="${x => x.handleEndContentChange()}"
-        ></slot>
-    </span>
-`;
-/**
- * The template for the start element.
- * For use with {@link StartEnd}
- *
- * @public
- * @deprecated - use startSlotTemplate
- */
-html `
-    <span part="start" ${ref("startContainer")}>
-        <slot
-            name="start"
-            ${ref("start")}
-            @slotchange="${x => x.handleStartContentChange()}"
-        ></slot>
-    </span>
-`;
+import { _ as __decorate, a as attr } from './index.js';
 
 /**
  * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
@@ -153,4 +69,4 @@ __decorate([
     attr({ attribute: "aria-roledescription" })
 ], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
 
-export { ARIAGlobalStatesAndProperties as A, StartEnd as S, ref as r };
+export { ARIAGlobalStatesAndProperties as A };

package/shared/aria.js

@@ -0,0 +1,9 @@
+/**
+ * Standard orientation values
+ */
+const Orientation = {
+    horizontal: "horizontal",
+    vertical: "vertical",
+};
+
+export { Orientation as O };

package/shared/base-progress.js

@@ -4,6 +4,11 @@ import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumber
  * An Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
  * @public
  */
 class BaseProgress extends FoundationElement {

package/shared/breadcrumb-item.js

@@ -1,7 +1,7 @@
 import { _ as __decorate, o as observable } from './index.js';
 import { A as Anchor, D as DelegatesARIALink } from './anchor.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { S as StartEnd } from './aria-global.js';
+import { S as StartEnd } from './start-end.js';
 
 /**
  * A Breadcrumb Item Custom HTML Element.

package/shared/button.js

@@ -0,0 +1,200 @@
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { F as FormAssociated } from './form-associated.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { S as StartEnd } from './start-end.js';
+
+class _Button extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedButton extends FormAssociated(_Button) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
+
+/**
+ * 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 control - The button element
+ * @csspart content - The element wrapping button content
+ *
+ * @public
+ */
+class Button extends FormAssociatedButton {
+    constructor() {
+        super(...arguments);
+        /**
+         * Prevent events to propagate if disabled and has no slotted content wrapped in HTML elements
+         * @internal
+         */
+        this.handleClick = (e) => {
+            var _a;
+            if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
+                e.stopPropagation();
+            }
+        };
+        /**
+         * Submits the parent form
+         */
+        this.handleSubmission = () => {
+            if (!this.form) {
+                return;
+            }
+            const attached = this.proxy.isConnected;
+            if (!attached) {
+                this.attachProxy();
+            }
+            // Browser support for requestSubmit is not comprehensive
+            // so click the proxy if it isn't supported
+            typeof this.form.requestSubmit === "function"
+                ? this.form.requestSubmit(this.proxy)
+                : this.proxy.click();
+            if (!attached) {
+                this.detachProxy();
+            }
+        };
+        /**
+         * Resets the parent form
+         */
+        this.handleFormReset = () => {
+            var _a;
+            (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
+        };
+        /**
+         * Overrides the focus call for where delegatesFocus is unsupported.
+         * This check works for Chrome, Edge Chromium, FireFox, and Safari
+         * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
+         */
+        this.handleUnsupportedDelegatesFocus = () => {
+            var _a;
+            // Check to see if delegatesFocus is supported
+            if (window.ShadowRoot &&
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                this.focus = () => {
+                    this.control.focus();
+                };
+            }
+        };
+    }
+    formactionChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formAction = this.formaction;
+        }
+    }
+    formenctypeChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formEnctype = this.formenctype;
+        }
+    }
+    formmethodChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formMethod = this.formmethod;
+        }
+    }
+    formnovalidateChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formNoValidate = this.formnovalidate;
+        }
+    }
+    formtargetChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.formTarget = this.formtarget;
+        }
+    }
+    typeChanged(previous, next) {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.type = this.type;
+        }
+        next === "submit" && this.addEventListener("click", this.handleSubmission);
+        previous === "submit" && this.removeEventListener("click", this.handleSubmission);
+        next === "reset" && this.addEventListener("click", this.handleFormReset);
+        previous === "reset" && this.removeEventListener("click", this.handleFormReset);
+    }
+    /** {@inheritDoc (FormAssociated:interface).validate} */
+    validate() {
+        super.validate(this.control);
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this.proxy.setAttribute("type", this.type);
+        this.handleUnsupportedDelegatesFocus();
+        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+        if (elements) {
+            elements.forEach((span) => {
+                span.addEventListener("click", this.handleClick);
+            });
+        }
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+        if (elements) {
+            elements.forEach((span) => {
+                span.removeEventListener("click", this.handleClick);
+            });
+        }
+    }
+}
+__decorate([
+    attr({ mode: "boolean" })
+], Button.prototype, "autofocus", void 0);
+__decorate([
+    attr({ attribute: "form" })
+], Button.prototype, "formId", void 0);
+__decorate([
+    attr
+], Button.prototype, "formaction", void 0);
+__decorate([
+    attr
+], Button.prototype, "formenctype", void 0);
+__decorate([
+    attr
+], Button.prototype, "formmethod", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], Button.prototype, "formnovalidate", void 0);
+__decorate([
+    attr
+], Button.prototype, "formtarget", void 0);
+__decorate([
+    attr
+], Button.prototype, "type", void 0);
+__decorate([
+    observable
+], Button.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA button role
+ *
+ * @public
+ */
+class DelegatesARIAButton {
+}
+__decorate([
+    attr({ attribute: "aria-expanded" })
+], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
+__decorate([
+    attr({ attribute: "aria-pressed" })
+], DelegatesARIAButton.prototype, "ariaPressed", void 0);
+applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
+applyMixins(Button, StartEnd, DelegatesARIAButton);
+
+export { Button as B };