@vonage/vivid 3.0.0-next.7 → 3.0.0-test.0

package/button/index.js

@@ -0,0 +1,761 @@
+import '../icon/index.js';
+import { F as Focus } from '../shared/index2.js';
+import { e as emptyArray, D as DOM, a as attr, o as observable, F as FoundationElement, _ as __decorate, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import '../shared/web.dom-collections.iterator.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
+import { a as applyMixins } from '../shared/apply-mixins.js';
+import { A as ARIAGlobalStatesAndProperties, S as StartEnd, r as ref } from '../shared/aria-global.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/icon.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+
+/**
+ * Key Code values
+ * @deprecated - KeyCodes are deprecated, use individual string key exports
+ */
+var KeyCodes;
+(function (KeyCodes) {
+    KeyCodes[KeyCodes["alt"] = 18] = "alt";
+    KeyCodes[KeyCodes["arrowDown"] = 40] = "arrowDown";
+    KeyCodes[KeyCodes["arrowLeft"] = 37] = "arrowLeft";
+    KeyCodes[KeyCodes["arrowRight"] = 39] = "arrowRight";
+    KeyCodes[KeyCodes["arrowUp"] = 38] = "arrowUp";
+    KeyCodes[KeyCodes["back"] = 8] = "back";
+    KeyCodes[KeyCodes["backSlash"] = 220] = "backSlash";
+    KeyCodes[KeyCodes["break"] = 19] = "break";
+    KeyCodes[KeyCodes["capsLock"] = 20] = "capsLock";
+    KeyCodes[KeyCodes["closeBracket"] = 221] = "closeBracket";
+    KeyCodes[KeyCodes["colon"] = 186] = "colon";
+    KeyCodes[KeyCodes["colon2"] = 59] = "colon2";
+    KeyCodes[KeyCodes["comma"] = 188] = "comma";
+    KeyCodes[KeyCodes["ctrl"] = 17] = "ctrl";
+    KeyCodes[KeyCodes["delete"] = 46] = "delete";
+    KeyCodes[KeyCodes["end"] = 35] = "end";
+    KeyCodes[KeyCodes["enter"] = 13] = "enter";
+    KeyCodes[KeyCodes["equals"] = 187] = "equals";
+    KeyCodes[KeyCodes["equals2"] = 61] = "equals2";
+    KeyCodes[KeyCodes["equals3"] = 107] = "equals3";
+    KeyCodes[KeyCodes["escape"] = 27] = "escape";
+    KeyCodes[KeyCodes["forwardSlash"] = 191] = "forwardSlash";
+    KeyCodes[KeyCodes["function1"] = 112] = "function1";
+    KeyCodes[KeyCodes["function10"] = 121] = "function10";
+    KeyCodes[KeyCodes["function11"] = 122] = "function11";
+    KeyCodes[KeyCodes["function12"] = 123] = "function12";
+    KeyCodes[KeyCodes["function2"] = 113] = "function2";
+    KeyCodes[KeyCodes["function3"] = 114] = "function3";
+    KeyCodes[KeyCodes["function4"] = 115] = "function4";
+    KeyCodes[KeyCodes["function5"] = 116] = "function5";
+    KeyCodes[KeyCodes["function6"] = 117] = "function6";
+    KeyCodes[KeyCodes["function7"] = 118] = "function7";
+    KeyCodes[KeyCodes["function8"] = 119] = "function8";
+    KeyCodes[KeyCodes["function9"] = 120] = "function9";
+    KeyCodes[KeyCodes["home"] = 36] = "home";
+    KeyCodes[KeyCodes["insert"] = 45] = "insert";
+    KeyCodes[KeyCodes["menu"] = 93] = "menu";
+    KeyCodes[KeyCodes["minus"] = 189] = "minus";
+    KeyCodes[KeyCodes["minus2"] = 109] = "minus2";
+    KeyCodes[KeyCodes["numLock"] = 144] = "numLock";
+    KeyCodes[KeyCodes["numPad0"] = 96] = "numPad0";
+    KeyCodes[KeyCodes["numPad1"] = 97] = "numPad1";
+    KeyCodes[KeyCodes["numPad2"] = 98] = "numPad2";
+    KeyCodes[KeyCodes["numPad3"] = 99] = "numPad3";
+    KeyCodes[KeyCodes["numPad4"] = 100] = "numPad4";
+    KeyCodes[KeyCodes["numPad5"] = 101] = "numPad5";
+    KeyCodes[KeyCodes["numPad6"] = 102] = "numPad6";
+    KeyCodes[KeyCodes["numPad7"] = 103] = "numPad7";
+    KeyCodes[KeyCodes["numPad8"] = 104] = "numPad8";
+    KeyCodes[KeyCodes["numPad9"] = 105] = "numPad9";
+    KeyCodes[KeyCodes["numPadDivide"] = 111] = "numPadDivide";
+    KeyCodes[KeyCodes["numPadDot"] = 110] = "numPadDot";
+    KeyCodes[KeyCodes["numPadMinus"] = 109] = "numPadMinus";
+    KeyCodes[KeyCodes["numPadMultiply"] = 106] = "numPadMultiply";
+    KeyCodes[KeyCodes["numPadPlus"] = 107] = "numPadPlus";
+    KeyCodes[KeyCodes["openBracket"] = 219] = "openBracket";
+    KeyCodes[KeyCodes["pageDown"] = 34] = "pageDown";
+    KeyCodes[KeyCodes["pageUp"] = 33] = "pageUp";
+    KeyCodes[KeyCodes["period"] = 190] = "period";
+    KeyCodes[KeyCodes["print"] = 44] = "print";
+    KeyCodes[KeyCodes["quote"] = 222] = "quote";
+    KeyCodes[KeyCodes["scrollLock"] = 145] = "scrollLock";
+    KeyCodes[KeyCodes["shift"] = 16] = "shift";
+    KeyCodes[KeyCodes["space"] = 32] = "space";
+    KeyCodes[KeyCodes["tab"] = 9] = "tab";
+    KeyCodes[KeyCodes["tilde"] = 192] = "tilde";
+    KeyCodes[KeyCodes["windowsLeft"] = 91] = "windowsLeft";
+    KeyCodes[KeyCodes["windowsOpera"] = 219] = "windowsOpera";
+    KeyCodes[KeyCodes["windowsRight"] = 92] = "windowsRight";
+})(KeyCodes || (KeyCodes = {}));
+const keyEnter = "Enter";
+
+const proxySlotName = "form-associated-proxy";
+const ElementInternalsKey = "ElementInternals";
+/**
+ * @alpha
+ */
+const supportsElementInternals = ElementInternalsKey in window &&
+    "setFormValue" in window[ElementInternalsKey].prototype;
+const InternalsMap = new WeakMap();
+/**
+ * Base function for providing Custom Element Form Association.
+ *
+ * @alpha
+ */
+function FormAssociated(BaseCtor) {
+    const C = class extends BaseCtor {
+        constructor(...args) {
+            super(...args);
+            /**
+             * Track whether the value has been changed from the initial value
+             */
+            this.dirtyValue = false;
+            /**
+             * Sets the element's disabled state. A disabled element will not be included during form submission.
+             *
+             * @remarks
+             * HTML Attribute: disabled
+             */
+            this.disabled = false;
+            /**
+             * These are events that are still fired by the proxy
+             * element based on user / programmatic interaction.
+             *
+             * The proxy implementation should be transparent to
+             * the app author, so block these events from emitting.
+             */
+            this.proxyEventsToBlock = ["change", "click"];
+            this.proxyInitialized = false;
+            this.required = false;
+            this.initialValue = this.initialValue || "";
+            if (!this.elementInternals) {
+                // When elementInternals is not supported, formResetCallback is
+                // bound to an event listener, so ensure the handler's `this`
+                // context is correct.
+                this.formResetCallback = this.formResetCallback.bind(this);
+            }
+        }
+        /**
+         * Must evaluate to true to enable elementInternals.
+         * Feature detects API support and resolve respectively
+         *
+         * @internal
+         */
+        static get formAssociated() {
+            return supportsElementInternals;
+        }
+        /**
+         * Returns the validity state of the element
+         *
+         * @alpha
+         */
+        get validity() {
+            return this.elementInternals
+                ? this.elementInternals.validity
+                : this.proxy.validity;
+        }
+        /**
+         * Retrieve a reference to the associated form.
+         * Returns null if not associated to any form.
+         *
+         * @alpha
+         */
+        get form() {
+            return this.elementInternals ? this.elementInternals.form : this.proxy.form;
+        }
+        /**
+         * Retrieve the localized validation message,
+         * or custom validation message if set.
+         *
+         * @alpha
+         */
+        get validationMessage() {
+            return this.elementInternals
+                ? this.elementInternals.validationMessage
+                : this.proxy.validationMessage;
+        }
+        /**
+         * Whether the element will be validated when the
+         * form is submitted
+         */
+        get willValidate() {
+            return this.elementInternals
+                ? this.elementInternals.willValidate
+                : this.proxy.willValidate;
+        }
+        /**
+         * A reference to all associated label elements
+         */
+        get labels() {
+            if (this.elementInternals) {
+                return Object.freeze(Array.from(this.elementInternals.labels));
+            }
+            else if (this.proxy instanceof HTMLElement &&
+                this.proxy.ownerDocument &&
+                this.id) {
+                // Labels associated by wrapping the element: <label><custom-element></custom-element></label>
+                const parentLabels = this.proxy.labels;
+                // Labels associated using the `for` attribute
+                const forLabels = Array.from(this.proxy.getRootNode().querySelectorAll(`[for='${this.id}']`));
+                const labels = parentLabels
+                    ? forLabels.concat(Array.from(parentLabels))
+                    : forLabels;
+                return Object.freeze(labels);
+            }
+            else {
+                return emptyArray;
+            }
+        }
+        /**
+         * Invoked when the `value` property changes
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `valueChanged` method
+         * They must be sure to invoke `super.valueChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        valueChanged(previous, next) {
+            this.dirtyValue = true;
+            if (this.proxy instanceof HTMLElement) {
+                this.proxy.value = this.value;
+            }
+            this.currentValue = this.value;
+            this.setFormValue(this.value);
+            this.validate();
+        }
+        currentValueChanged() {
+            this.value = this.currentValue;
+        }
+        /**
+         * Invoked when the `initialValue` property changes
+         *
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `initialValueChanged` method
+         * They must be sure to invoke `super.initialValueChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        initialValueChanged(previous, next) {
+            // If the value is clean and the component is connected to the DOM
+            // then set value equal to the attribute value.
+            if (!this.dirtyValue) {
+                this.value = this.initialValue;
+                this.dirtyValue = false;
+            }
+        }
+        /**
+         * Invoked when the `disabled` property changes
+         *
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `disabledChanged` method
+         * They must be sure to invoke `super.disabledChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        disabledChanged(previous, next) {
+            if (this.proxy instanceof HTMLElement) {
+                this.proxy.disabled = this.disabled;
+            }
+            DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
+        }
+        /**
+         * Invoked when the `name` property changes
+         *
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `nameChanged` method
+         * They must be sure to invoke `super.nameChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        nameChanged(previous, next) {
+            if (this.proxy instanceof HTMLElement) {
+                this.proxy.name = this.name;
+            }
+        }
+        /**
+         * Invoked when the `required` property changes
+         *
+         * @param previous - the previous value
+         * @param next - the new value
+         *
+         * @remarks
+         * If elements extending `FormAssociated` implement a `requiredChanged` method
+         * They must be sure to invoke `super.requiredChanged(previous, next)` to ensure
+         * proper functioning of `FormAssociated`
+         */
+        requiredChanged(prev, next) {
+            if (this.proxy instanceof HTMLElement) {
+                this.proxy.required = this.required;
+            }
+            DOM.queueUpdate(() => this.classList.toggle("required", this.required));
+            this.validate();
+        }
+        /**
+         * The element internals object. Will only exist
+         * in browsers supporting the attachInternals API
+         */
+        get elementInternals() {
+            if (!supportsElementInternals) {
+                return null;
+            }
+            let internals = InternalsMap.get(this);
+            if (!internals) {
+                internals = this.attachInternals();
+                InternalsMap.set(this, internals);
+            }
+            return internals;
+        }
+        /**
+         * @internal
+         */
+        connectedCallback() {
+            super.connectedCallback();
+            this.addEventListener("keypress", this._keypressHandler);
+            if (!this.value) {
+                this.value = this.initialValue;
+                this.dirtyValue = false;
+            }
+            if (!this.elementInternals) {
+                this.attachProxy();
+                if (this.form) {
+                    this.form.addEventListener("reset", this.formResetCallback);
+                }
+            }
+        }
+        /**
+         * @internal
+         */
+        disconnectedCallback() {
+            this.proxyEventsToBlock.forEach(name => this.proxy.removeEventListener(name, this.stopPropagation));
+            if (!this.elementInternals && this.form) {
+                this.form.removeEventListener("reset", this.formResetCallback);
+            }
+        }
+        /**
+         * Return the current validity of the element.
+         */
+        checkValidity() {
+            return this.elementInternals
+                ? this.elementInternals.checkValidity()
+                : this.proxy.checkValidity();
+        }
+        /**
+         * Return the current validity of the element.
+         * If false, fires an invalid event at the element.
+         */
+        reportValidity() {
+            return this.elementInternals
+                ? this.elementInternals.reportValidity()
+                : this.proxy.reportValidity();
+        }
+        /**
+         * Set the validity of the control. In cases when the elementInternals object is not
+         * available (and the proxy element is used to report validity), this function will
+         * do nothing unless a message is provided, at which point the setCustomValidity method
+         * of the proxy element will be invoked with the provided message.
+         * @param flags - Validity flags
+         * @param message - Optional message to supply
+         * @param anchor - Optional element used by UA to display an interactive validation UI
+         */
+        setValidity(flags, message, anchor) {
+            if (this.elementInternals) {
+                this.elementInternals.setValidity(flags, message, anchor);
+            }
+            else if (typeof message === "string") {
+                this.proxy.setCustomValidity(message);
+            }
+        }
+        /**
+         * Invoked when a connected component's form or fieldset has its disabled
+         * state changed.
+         * @param disabled - the disabled value of the form / fieldset
+         */
+        formDisabledCallback(disabled) {
+            this.disabled = disabled;
+        }
+        formResetCallback() {
+            this.value = this.initialValue;
+            this.dirtyValue = false;
+        }
+        /**
+         * Attach the proxy element to the DOM
+         */
+        attachProxy() {
+            var _a;
+            if (!this.proxyInitialized) {
+                this.proxyInitialized = true;
+                this.proxy.style.display = "none";
+                this.proxyEventsToBlock.forEach(name => this.proxy.addEventListener(name, this.stopPropagation));
+                // These are typically mapped to the proxy during
+                // property change callbacks, but during initialization
+                // on the initial call of the callback, the proxy is
+                // still undefined. We should find a better way to address this.
+                this.proxy.disabled = this.disabled;
+                this.proxy.required = this.required;
+                if (typeof this.name === "string") {
+                    this.proxy.name = this.name;
+                }
+                if (typeof this.value === "string") {
+                    this.proxy.value = this.value;
+                }
+                this.proxy.setAttribute("slot", proxySlotName);
+                this.proxySlot = document.createElement("slot");
+                this.proxySlot.setAttribute("name", proxySlotName);
+            }
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(this.proxySlot);
+            this.appendChild(this.proxy);
+        }
+        /**
+         * Detach the proxy element from the DOM
+         */
+        detachProxy() {
+            var _a;
+            this.removeChild(this.proxy);
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.proxySlot);
+        }
+        /**
+         * Sets the validity of the custom element. By default this uses the proxy element to determine
+         * validity, but this can be extended or replaced in implementation.
+         */
+        validate() {
+            if (this.proxy instanceof HTMLElement) {
+                this.setValidity(this.proxy.validity, this.proxy.validationMessage);
+            }
+        }
+        /**
+         * Associates the provided value (and optional state) with the parent form.
+         * @param value - The value to set
+         * @param state - The state object provided to during session restores and when autofilling.
+         */
+        setFormValue(value, state) {
+            if (this.elementInternals) {
+                this.elementInternals.setFormValue(value, state || value);
+            }
+        }
+        _keypressHandler(e) {
+            switch (e.key) {
+                case keyEnter:
+                    if (this.form instanceof HTMLFormElement) {
+                        // Implicit submission
+                        const defaultButton = this.form.querySelector("[type=submit]");
+                        defaultButton === null || defaultButton === void 0 ? void 0 : defaultButton.click();
+                    }
+                    break;
+            }
+        }
+        /**
+         * Used to stop propagation of proxy element events
+         * @param e - Event object
+         */
+        stopPropagation(e) {
+            e.stopPropagation();
+        }
+    };
+    attr({ mode: "boolean" })(C.prototype, "disabled");
+    attr({ mode: "fromView", attribute: "value" })(C.prototype, "initialValue");
+    attr({ attribute: "current-value" })(C.prototype, "currentValue");
+    attr(C.prototype, "name");
+    attr({ mode: "boolean" })(C.prototype, "required");
+    observable(C.prototype, "value");
+    return C;
+}
+
+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 }.
+ *
+ * @public
+ */
+class Button$1 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);
+    }
+    /**
+     * @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$1.prototype, "autofocus", void 0);
+__decorate([
+    attr({ attribute: "form" })
+], Button$1.prototype, "formId", void 0);
+__decorate([
+    attr
+], Button$1.prototype, "formaction", void 0);
+__decorate([
+    attr
+], Button$1.prototype, "formenctype", void 0);
+__decorate([
+    attr
+], Button$1.prototype, "formmethod", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], Button$1.prototype, "formnovalidate", void 0);
+__decorate([
+    attr
+], Button$1.prototype, "formtarget", void 0);
+__decorate([
+    attr
+], Button$1.prototype, "type", void 0);
+__decorate([
+    observable
+], Button$1.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$1, StartEnd, DelegatesARIAButton);
+
+class Button extends Button$1 {
+  constructor() {
+    super(...arguments);
+    this.label = '';
+  }
+
+}
+
+__decorate([attr, __metadata("design:type", String)], Button.prototype, "connotation", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Button.prototype, "shape", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Button.prototype, "appearance", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Button.prototype, "size", void 0);
+
+__decorate([attr({
+  mode: 'fromView'
+}), __metadata("design:type", Object)], Button.prototype, "label", void 0);
+
+applyMixins(Button, AffixIconWithTrailing);
+
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  outline: 0 none;\n}\n\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--button-block-size);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  outline: 0 none;\n  vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n  --connotation-contrast: var(--vvd-color-neutral-90);\n  --connotation-fierce: var(--vvd-color-neutral-80);\n  --connotation-strong: var(--vvd-color-neutral-90);\n  --connotation-soft: var(--vvd-color-neutral-20);\n  --connotation-pale: var(--vvd-color-neutral-10);\n}\n\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n  --connotation-contrast: var(--vvd-color-cta-90);\n  --connotation-fierce: var(--vvd-color-cta-80);\n  --connotation-strong: var(--vvd-color-cta-70);\n  --connotation-soft: var(--vvd-color-cta-20);\n  --connotation-pale: var(--vvd-color-cta-10);\n}\n\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n  --connotation-contrast: var(--vvd-color-success-90);\n  --connotation-fierce: var(--vvd-color-success-80);\n  --connotation-strong: var(--vvd-color-success-70);\n  --connotation-soft: var(--vvd-color-success-20);\n  --connotation-pale: var(--vvd-color-success-10);\n}\n\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n  --connotation-contrast: var(--vvd-color-alert-90);\n  --connotation-fierce: var(--vvd-color-alert-80);\n  --connotation-strong: var(--vvd-color-alert-70);\n  --connotation-soft: var(--vvd-color-alert-20);\n  --connotation-pale: var(--vvd-color-alert-10);\n}\n\n.control.appearance-filled {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation);\n  --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--connotation);\n}\n.control {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled).appearance-filled, .control.hovered:not(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-strong);\n  --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled).appearance-outlined, .control.hovered:not(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: var(--connotation-pale);\n  --_appearance-color-outline: var(--connotation);\n}\n.control:hover:not(:disabled, .disabled), .control.hovered:not(:disabled, .disabled) {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: var(--connotation-pale);\n  --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-filled, .control.disabled.appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-30);\n  --_appearance-color-fill: var(--vvd-color-neutral-10);\n  --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-outlined, .control.disabled.appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-30);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--vvd-color-neutral-30);\n}\n.control:disabled, .control.disabled {\n  --_appearance-color-text: var(--vvd-color-neutral-30);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled).appearance-filled, .control.active:not(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-fierce);\n  --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled).appearance-outlined, .control.active:not(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: var(--connotation-soft);\n  --_appearance-color-outline: var(--connotation);\n}\n.control:active:not(:disabled, .disabled), .control.active:not(:disabled, .disabled) {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: var(--connotation-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control.icon-only {\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--button-block-size);\n  }\n}\n\n/* Size */\n.control.size-base-small {\n  --button-block-size: 32px;\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.size-base-small:not(.icon-only) {\n  --button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control.size-base-small .icon {\n  font-size: 16px;\n}\n\n.control.size-base-large {\n  --button-block-size: 48px;\n  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.size-base-large:not(.icon-only) {\n  --button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control.size-base-large .icon {\n  font-size: 24px;\n}\n\n.control:not(.size-base-small):not(.size-base-large) {\n  --button-block-size: 40px;\n  font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.size-base-small):not(.size-base-large):not(.icon-only) {\n  --button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.size-base-small):not(.size-base-large) .icon {\n  font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.control.shape-pill:not(.icon-only) {\n  border-radius: 24px;\n}\n.control.shape-pill.icon-only {\n  border-radius: 50%;\n}\n\n/* Icon */\n:not(.icon-trailing) .icon {\n  margin-inline-end: var(--button-icon-gap);\n}\n.icon-trailing .icon {\n  order: 1;\n  margin-inline-start: var(--button-icon-gap);\n}\n\n:not(:focus) .focus-indicator {\n  display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}";
+styleInject(css_248z);
+
+let _ = t => t,
+    _t,
+    _t2;
+
+const getAppearanceClassName = (appearance, disabled) => {
+  let className = `appearance-${appearance}`;
+  disabled && (className += ' disabled');
+  return className;
+};
+
+const getClasses = ({
+  connotation,
+  appearance,
+  shape,
+  size,
+  icon,
+  label,
+  disabled,
+  iconTrailing
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing]);
+
+const focusTemplate = context => {
+  const focusTag = context.tagFor(Focus);
+  return html(_t || (_t = _`<${0} class="focus-indicator"></${0}>`), focusTag, focusTag);
+};
+
+const buttonTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html(_t2 || (_t2 = _`
+    <button
+        class="${0}"
+        ?autofocus="${0}"
+        ?disabled="${0}"
+        form="${0}"
+        formaction="${0}"
+        formenctype="${0}"
+        formmethod="${0}"
+        formnovalidate="${0}"
+        formtarget="${0}"
+        name="${0}"
+        type="${0}"
+        value="${0}"
+        aria-atomic="${0}"
+        aria-busy="${0}"
+        aria-controls="${0}"
+        aria-current="${0}"
+        aria-describedby="${0}"
+        aria-details="${0}"
+        aria-disabled="${0}"
+        aria-errormessage="${0}"
+        aria-expanded="${0}"
+        aria-flowto="${0}"
+        aria-haspopup="${0}"
+        aria-hidden="${0}"
+        aria-invalid="${0}"
+        aria-keyshortcuts="${0}"
+        aria-label="${0}"
+        aria-labelledby="${0}"
+        aria-live="${0}"
+        aria-owns="${0}"
+        aria-pressed="${0}"
+        aria-relevant="${0}"
+        aria-roledescription="${0}"
+        ${0}
+    >
+        ${0}
+        ${0}
+        ${0}
+    </button>
+`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate(context), x => affixIconTemplate(x.icon), x => x.label);
+};
+
+const vividButton = Button.compose({
+  baseName: 'button',
+  baseClass: Button$1,
+  template: buttonTemplate,
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+designSystem.register(vividButton());
+
+export { vividButton };