@vonage/vivid 3.0.0-next.3 → 3.0.0-next.30

package/button/index.js

@@ -1,656 +1,28 @@
-import '../shared/index.js';
-import { F as Focus } from '../shared/index3.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/index2.js';
+import '../icon/index.js';
+import '../focus/index.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import '../shared/web.dom-collections.iterator.js';
-import { P as PrefixOrSuffix, p as prefixOrSuffixTemplate } from '../shared/affix.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
+import { B as Button$1 } from '../shared/button.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 { f as focusTemplateFactory } from '../shared/focus2.js';
+import { r as ref } from '../shared/aria-global.js';
 import { c as classNames } from '../shared/class-names.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 Map();
-/**
- * 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", mode: "fromView" })
-], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
-__decorate([
-    attr({ attribute: "aria-pressed", mode: "fromView" })
-], DelegatesARIAButton.prototype, "ariaPressed", void 0);
-applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
-applyMixins(Button$1, StartEnd, DelegatesARIAButton);
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/focus.js';
+import '../shared/object-keys.js';
+import '../shared/form-associated.js';
 
 class Button extends Button$1 {
   constructor() {
     super(...arguments);
-    this.label = '';
+    this.stacked = false;
   }
 
 }
@@ -661,22 +33,26 @@ __decorate([attr, __metadata("design:type", String)], Button.prototype, "shape",
 
 __decorate([attr, __metadata("design:type", String)], Button.prototype, "appearance", void 0);
 
-__decorate([attr, __metadata("design:type", String)], Button.prototype, "size", void 0);
+__decorate([attr, __metadata("design:type", String)], Button.prototype, "density", void 0);
 
-__decorate([attr, __metadata("design:type", Object)], Button.prototype, "label", void 0);
+__decorate([attr({
+  mode: 'boolean',
+  attribute: 'stacked'
+}), __metadata("design:type", Object)], Button.prototype, "stacked", void 0);
 
-applyMixins(Button, PrefixOrSuffix);
+__decorate([attr, __metadata("design:type", String)], Button.prototype, "label", void 0);
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.control.appearance-filled {\n  --appearance-color-fill: var(--connotation);\n  --appearance-color-text: var(--on-connotation);\n}\n\n.control.appearance-outlined {\n  --appearance-color-fill: transparent;\n  --appearance-color-outline: var(--connotation-diverse);\n  --appearance-color-text: var(--connotation-diverse);\n}\n\n.control.appearance-ghost,\n.control:not(.appearance-filled):not(.appearance-filled-idle):not(.appearance-outlined):not(.appearance-outlined-idle):not(.appearance-ghost-idle) {\n  --appearance-color-fill: transparent;\n  --appearance-color-text: var(--connotation-diverse);\n}\n\n.control.appearance-filled-idle {\n  --appearance-color-fill: var(--vvd-color-neutral-10);\n  --appearance-color-text: var(--vvd-color-neutral-30);\n}\n\n.control.appearance-outlined-idle {\n  --appearance-color-fill: transparent;\n  --appearance-color-outline: var(--vvd-color-neutral-30);\n  --appearance-color-text: var(--vvd-color-neutral-30);\n}\n\n.control.appearance-ghost-idle {\n  --appearance-color-fill: transparent;\n  --appearance-color-text: var(--vvd-color-neutral-30);\n}\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  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-diverse: var(--vvd-color-primary);\n}\n\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n  --connotation-diverse: var(--vvd-color-cta-70);\n}\n\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n  --connotation-diverse: var(--vvd-color-success-70);\n}\n\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n  --connotation-diverse: var(--vvd-color-alert-70);\n}\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.icon:not(.icon-trailing) {\n  margin-inline-end: var(--button-icon-gap);\n}\n.icon.icon-trailing {\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}";
+applyMixins(Button, AffixIconWithTrailing);
+
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  margin: 0;\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  gap: var(--_button-icon-gap);\n  vertical-align: middle;\n  white-space: nowrap;\n  /* Size */\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n  --_connotation-color-on-primary: var(--vvd-color-on-cta);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n  --_connotation-color-contrast: var(--vvd-color-cta-90);\n  --_connotation-color-fierce: var(--vvd-color-cta-80);\n  --_connotation-color-firm: var(--vvd-color-cta-70);\n  --_connotation-color-soft: var(--vvd-color-cta-20);\n  --_connotation-color-faint: var(--vvd-color-cta-10);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n  --_connotation-color-on-primary: var(--vvd-color-on-success);\n  --_connotation-color-primary-increment: var(--vvd-color-success-70);\n  --_connotation-color-contrast: var(--vvd-color-success-90);\n  --_connotation-color-fierce: var(--vvd-color-success-80);\n  --_connotation-color-firm: var(--vvd-color-success-70);\n  --_connotation-color-soft: var(--vvd-color-success-20);\n  --_connotation-color-faint: var(--vvd-color-success-10);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n  --_connotation-color-on-primary: var(--vvd-color-on-alert);\n  --_connotation-color-primary-increment: var(--vvd-color-alert-70);\n  --_connotation-color-contrast: var(--vvd-color-alert-90);\n  --_connotation-color-fierce: var(--vvd-color-alert-80);\n  --_connotation-color-firm: var(--vvd-color-alert-70);\n  --_connotation-color-soft: var(--vvd-color-alert-20);\n  --_connotation-color-faint: var(--vvd-color-alert-10);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n  --_connotation-color-contrast: var(--vvd-color-neutral-90);\n  --_connotation-color-fierce: var(--vvd-color-neutral-80);\n  --_connotation-color-firm: var(--vvd-color-on-canvas);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n}\n.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-outlined {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n  --_appearance-color-text: var(--_connotation-color-firm);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control:not(:disabled) {\n  cursor: pointer;\n}\n.control:disabled {\n  cursor: not-allowed;\n}\n.control.icon-only {\n  contain: size;\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.control:not(.stacked).density-condensed {\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:not(.stacked).density-condensed:not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 12px;\n}\n.control:not(.stacked).density-condensed .icon {\n  font-size: 16px;\n}\n.control:not(.stacked).density-extended {\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:not(.stacked).density-extended:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:not(.stacked).density-extended .icon {\n  font-size: 24px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) {\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(.stacked):not(.density-condensed, .density-extended):not(.icon-only) {\n  --_button-icon-gap: 8px;\n  padding-inline: 16px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) .icon {\n  font-size: 20px;\n}\n.control.stacked {\n  flex-direction: column;\n  justify-content: center;\n  --_button-block-size: 68px;\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.stacked:not(.icon-only) {\n  --_button-icon-gap: 10px;\n  padding-inline: 16px;\n}\n.control.stacked .icon {\n  font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill:not(.stacked)) {\n  border-radius: 6px;\n}\n\n.control.shape-pill:not(.stacked):not(.icon-only) {\n  border-radius: 24px;\n}\n.control.shape-pill:not(.stacked).icon-only {\n  border-radius: 50%;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus-visible) > .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;
+    _t;
 
 const getAppearanceClassName = (appearance, disabled) => {
   let className = `appearance-${appearance}`;
-  disabled && (className += '-idle');
+  disabled && (className += ' disabled');
   return className;
 };
 
@@ -684,18 +60,18 @@ const getClasses = ({
   connotation,
   appearance,
   shape,
-  size,
+  density,
+  iconTrailing,
   icon,
   label,
-  disabled
-}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ['icon-only', !label && !!icon]);
-
-const focusTemplate = context => {
-  const focusTag = context.tagFor(Focus);
-  return html(_t || (_t = _`<${0} class="focus-indicator"></${0}>`), focusTag, focusTag);
-};
-
-const buttonTemplate = context => html(_t2 || (_t2 = _`
+  disabled,
+  stacked
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`density-${density}`, Boolean(density)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing], ['stacked', Boolean(stacked)]);
+
+const buttonTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`
     <button
         class="${0}"
         ?autofocus="${0}"
@@ -736,7 +112,8 @@ const buttonTemplate = context => html(_t2 || (_t2 = _`
         ${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), () => prefixOrSuffixTemplate(context), x => x.label);
+`), 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, x => affixIconTemplate(x.icon), x => x.label);
+};
 
 const vividButton = Button.compose({
   baseName: 'button',