@vonage/vivid 4.13.0 → 4.14.0

package/shared/definition11.cjs

@@ -1,212 +1,16 @@
 'use strict';
 
-const index = require('./index.cjs');
-const definition$1 = require('./definition27.cjs');
-const definition = require('./definition38.cjs');
+const definition = require('./definition27.cjs');
+const definition$1 = require('./definition37.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 const affix = require('./affix.cjs');
+const button = require('./button.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const formAssociated = require('./form-associated.cjs');
-const ariaGlobal = require('./aria-global.cjs');
-const startEnd = require('./start-end.cjs');
 const enums = require('./enums.cjs');
-const icon = require('./icon.cjs');
 const when = require('./when.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-class _Button extends index.FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Button:class)} component.
- *
- * @internal
- */
-class FormAssociatedButton extends formAssociated.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
- */
-let Button$1 = 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);
-            });
-        }
-    }
-};
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], Button$1.prototype, "autofocus", void 0);
-index.__decorate([
-    index.attr({ attribute: "form" })
-], Button$1.prototype, "formId", void 0);
-index.__decorate([
-    index.attr
-], Button$1.prototype, "formaction", void 0);
-index.__decorate([
-    index.attr
-], Button$1.prototype, "formenctype", void 0);
-index.__decorate([
-    index.attr
-], Button$1.prototype, "formmethod", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], Button$1.prototype, "formnovalidate", void 0);
-index.__decorate([
-    index.attr
-], Button$1.prototype, "formtarget", void 0);
-index.__decorate([
-    index.attr
-], Button$1.prototype, "type", void 0);
-index.__decorate([
-    index.observable
-], Button$1.prototype, "defaultSlottedContent", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA button role
- *
- * @public
- */
-class DelegatesARIAButton {
-}
-index.__decorate([
-    index.attr({ attribute: "aria-expanded" })
-], DelegatesARIAButton.prototype, "ariaExpanded", void 0);
-index.__decorate([
-    index.attr({ attribute: "aria-pressed" })
-], DelegatesARIAButton.prototype, "ariaPressed", void 0);
-applyMixins.applyMixins(DelegatesARIAButton, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(Button$1, startEnd.StartEnd, DelegatesARIAButton);
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -216,7 +20,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Button extends Button$1 {
+class Button extends button.VividFoundationButton {
   constructor() {
     super();
     this.stacked = false;
@@ -227,7 +31,7 @@ class Button extends Button$1 {
   }
 }
 __decorateClass([
-  index.attr({
+  defineVividComponent.attr({
     converter: {
       fromView: (value) => value || null,
       toView: (value) => value || null
@@ -235,72 +39,72 @@ __decorateClass([
   })
 ], Button.prototype, "title");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Button.prototype, "connotation");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Button.prototype, "shape");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Button.prototype, "appearance");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Button.prototype, "size");
 __decorateClass([
-  index.attr({
+  defineVividComponent.attr({
     mode: "boolean",
     attribute: "stacked"
   })
 ], Button.prototype, "stacked");
 __decorateClass([
-  index.attr({
+  defineVividComponent.attr({
     mode: "boolean",
     attribute: "pending"
   })
 ], Button.prototype, "pending");
 __decorateClass([
-  index.attr({
+  defineVividComponent.attr({
     mode: "boolean",
     attribute: "dropdown-indicator"
   })
 ], Button.prototype, "dropdownIndicator");
 __decorateClass([
-  index.attr({
+  defineVividComponent.attr({
     mode: "boolean",
     attribute: "active"
   })
 ], Button.prototype, "active");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Button.prototype, "label");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Button.prototype, "href");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Button.prototype, "download");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Button.prototype, "hreflang");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Button.prototype, "ping");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Button.prototype, "referrerpolicy");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Button.prototype, "rel");
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], Button.prototype, "target");
 applyMixins.applyMixins(Button, affix.AffixIconWithTrailing);
 
 const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper: var( --vvd-button-accent-firm );--_vvd-button-cta-firm-wrapper: var( --vvd-button-cta-firm );--_vvd-button-success-firm-wrapper: var( --vvd-button-success-firm );--_vvd-button-alert-firm-wrapper: var( --vvd-button-alert-firm );--_vvd-button-announcement-firm-wrapper: var( --vvd-button-announcement-firm )}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm: var( --_vvd-button-accent-firm-wrapper, var(--vvd-button-accent-primary) );--vvd-button-cta-firm: var( --_vvd-button-cta-firm-wrapper, var(--vvd-button-cta-primary) );--vvd-button-success-firm: var( --_vvd-button-success-firm-wrapper, var(--vvd-button-success-primary) );--vvd-button-alert-firm: var( --_vvd-button-alert-firm-wrapper, var(--vvd-button-alert-primary) );--vvd-button-announcement-firm: var( --_vvd-button-announcement-firm-wrapper, var(--vvd-button-announcement-primary) )}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-button-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce-primary: var(--vvd-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:space-between;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control:not(.stacked).size-super-condensed{--_button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 8px;--_button-chevron-size: 12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius: 24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius: 16px}.control.shape-pill.stacked.size-normal{--_button-border-radius: 20px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked.size-super-condensed{--stacked-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 4px;--_button-chevron-size: 10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap: 6px;--_button-chevron-size: 12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap: 10px;--_button-chevron-size: 16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap: 8px;--_button-chevron-size: 16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{display:flex;overflow:hidden;flex:1;align-items:center;justify-content:center;gap:var(--_button-icon-gap)}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment, flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment, flex-start);justify-content:center}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}";
 
 const chevronTemplateFactory = (context) => {
-  const iconTag = context.tagFor(icon.Icon);
-  return index.html`<${iconTag} class="chevron" aria-hidden="true" name="chevron-down-line"></${iconTag}>`;
+  const iconTag = context.tagFor(definition.Icon);
+  return defineVividComponent.html`<${iconTag} class="chevron" aria-hidden="true" name="chevron-down-line"></${iconTag}>`;
 };
 
 const getAppearanceClassName = (appearance, disabled) => {
@@ -320,7 +124,8 @@ const getClasses = ({
   size,
   iconSlottedContent,
   ariaExpanded,
-  active
+  active,
+  dropdownIndicator
 }) => classNames.classNames(
   "control",
   [`connotation-${connotation}`, Boolean(connotation)],
@@ -330,20 +135,23 @@ const getClasses = ({
   ],
   [`shape-${shape}`, Boolean(shape)],
   [`size-${size}`, Boolean(size)],
-  ["icon-only", !label && !!(icon || iconSlottedContent?.length)],
+  [
+    "icon-only",
+    !label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator
+  ],
   ["icon-trailing", iconTrailing],
   ["stacked", Boolean(stacked)],
   ["active", ariaExpanded === "true" || active]
 );
 function renderIconOrPending(context, icon, pending, size = enums.Size.Normal) {
   if (pending && size != enums.Size.SuperCondensed) {
-    const progressTag = context.tagFor(definition.ProgressRing);
+    const progressTag = context.tagFor(definition$1.ProgressRing);
     const progressSize = {
       [enums.Size.Condensed]: "-6",
       [enums.Size.Normal]: "-5",
       [enums.Size.Expanded]: "-4"
     };
-    return index.html`<span class="icon pending"><${progressTag} size="${progressSize[size]}"></${progressTag}></span>`;
+    return defineVividComponent.html`<span class="icon pending"><${progressTag} size="${progressSize[size]}"></${progressTag}></span>`;
   } else {
     const affixIconTemplate = affix.affixIconTemplateFactory(context);
     return affixIconTemplate(icon, affix.IconWrapper.Slot);
@@ -351,17 +159,17 @@ function renderIconOrPending(context, icon, pending, size = enums.Size.Normal) {
 }
 const buttonContent = (context) => {
   const chevronTemplate = chevronTemplateFactory(context);
-  return index.html`<span class="content">
+  return defineVividComponent.html`<span class="content">
 			${(x) => renderIconOrPending(context, x.icon, x.pending, x.size)}
 			${when.when(
     (x) => x.label,
-    index.html`<span class="text" role="presentation">${(x) => x.label}</span>`
+    defineVividComponent.html`<span class="text" role="presentation">${(x) => x.label}</span>`
   )}
 		</span>
 		${when.when((x) => x.dropdownIndicator, chevronTemplate)}`;
 };
 function renderButtonContent(context) {
-  return index.html` <button
+  return defineVividComponent.html` <button
 		class="${getClasses}"
 		?autofocus="${(x) => x.autofocus}"
 		?disabled="${(x) => x.disabled || x.pending}"
@@ -396,7 +204,7 @@ function renderButtonContent(context) {
 	</button>`;
 }
 function renderAnchorContent(context) {
-  return index.html`<a
+  return defineVividComponent.html`<a
 		class="${getClasses}"
 		download="${(x) => x.download}"
 		href="${(x) => x.href}"
@@ -427,31 +235,27 @@ function renderAnchorContent(context) {
 	</a>`;
 }
 const buttonTemplate = (context) => {
-  return index.html` <template role="presentation">
-		${when.when((x) => !x.href, index.html`${renderButtonContent(context)}`)}
-		${when.when((x) => x.href, index.html`${renderAnchorContent(context)}`)}
+  return defineVividComponent.html` <template role="presentation">
+		${when.when((x) => !x.href, defineVividComponent.html`${renderButtonContent(context)}`)}
+		${when.when((x) => x.href, defineVividComponent.html`${renderAnchorContent(context)}`)}
 	</template>`;
 };
 
-const buttonDefinition = Button.compose({
-  baseName: "button",
-  baseClass: Button$1,
-  template: buttonTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const buttonDefinition = defineVividComponent.defineVividComponent(
+  "button",
+  Button,
+  buttonTemplate,
+  [definition.iconDefinition, definition$1.progressRingDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const buttonRegistries = [
-  buttonDefinition(),
-  ...definition$1.iconRegistries,
-  ...definition.progressRingRegistries
-];
-const registerButton = index.registerFactory(buttonRegistries);
+);
+const registerButton = defineVividComponent.createRegisterFunction(buttonDefinition);
 
-exports.Button = Button$1;
-exports.Button$1 = Button;
+exports.Button = Button;
 exports.buttonDefinition = buttonDefinition;
-exports.buttonRegistries = buttonRegistries;
 exports.chevronTemplateFactory = chevronTemplateFactory;
 exports.registerButton = registerButton;