@vonage/vivid 3.50.0 → 3.51.0

package/nav-item/index.cjs

@@ -7,8 +7,6 @@ require('../shared/icon.cjs');
 require('../shared/_has.cjs');
 require('../shared/class-names.cjs');
 require('../shared/when.cjs');
-require('../shared/definition59.cjs');
-require('../shared/focus.cjs');
 require('../shared/affix.cjs');
 require('../shared/slotted.cjs');
 require('../shared/text-anchor.cjs');

package/nav-item/index.js

@@ -5,8 +5,6 @@ import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition59.js';
-import '../shared/focus.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
 import '../shared/text-anchor.js';

package/number-field/index.cjs

@@ -8,8 +8,6 @@ require('../shared/icon.cjs');
 require('../shared/_has.cjs');
 require('../shared/class-names.cjs');
 require('../shared/when.cjs');
-require('../shared/definition59.cjs');
-require('../shared/focus.cjs');
 require('../shared/definition37.cjs');
 require('../shared/base-progress.cjs');
 require('../shared/affix.cjs');
@@ -29,5 +27,6 @@ require('../locales/en-US.cjs');
 require('../shared/localized.cjs');
 require('../shared/text-field2.cjs');
 require('../shared/focus2.cjs');
+require('../shared/focus.cjs');
 
 definition.registerNumberField();

package/number-field/index.js

@@ -6,8 +6,6 @@ import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition59.js';
-import '../shared/focus.js';
 import '../shared/definition37.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
@@ -27,5 +25,6 @@ import '../locales/en-US.js';
 import '../shared/localized.js';
 import '../shared/text-field2.js';
 import '../shared/focus2.js';
+import '../shared/focus.js';
 
 registerNumberField();

package/option/index.cjs

@@ -7,8 +7,6 @@ require('../shared/icon.cjs');
 require('../shared/_has.cjs');
 require('../shared/class-names.cjs');
 require('../shared/when.cjs');
-require('../shared/definition59.cjs');
-require('../shared/focus.cjs');
 require('../shared/affix.cjs');
 require('../shared/slotted.cjs');
 require('../shared/aria-global.cjs');
@@ -16,8 +14,5 @@ require('../shared/start-end.cjs');
 require('../shared/ref.cjs');
 require('../shared/apply-mixins.cjs');
 require('../shared/dom.cjs');
-require('../shared/focus2.cjs');
-require('../shared/index2.cjs');
-require('../locales/en-US.cjs');
 
 definition.registerOption();

package/option/index.js

@@ -5,8 +5,6 @@ import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition59.js';
-import '../shared/focus.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
 import '../shared/aria-global.js';
@@ -14,8 +12,5 @@ import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/apply-mixins.js';
 import '../shared/dom.js';
-import '../shared/focus2.js';
-import '../shared/index2.js';
-import '../locales/en-US.js';
 
 registerOption();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.50.0",
+  "version": "3.51.0",
   "type": "module",
   "module": "./index.js",
   "main": "./index.cjs",

package/pagination/index.cjs

@@ -8,8 +8,6 @@ require('../shared/icon.cjs');
 require('../shared/_has.cjs');
 require('../shared/class-names.cjs');
 require('../shared/when.cjs');
-require('../shared/definition59.cjs');
-require('../shared/focus.cjs');
 require('../shared/definition37.cjs');
 require('../shared/base-progress.cjs');
 require('../shared/affix.cjs');

package/pagination/index.js

@@ -6,8 +6,6 @@ import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition59.js';
-import '../shared/focus.js';
 import '../shared/definition37.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';

package/popup/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const definition = require('../shared/definition61.cjs');
+const definition = require('../shared/definition60.cjs');
 require('../shared/index.cjs');
 require('../shared/definition11.cjs');
 require('../shared/definition26.cjs');
@@ -8,8 +8,6 @@ require('../shared/icon.cjs');
 require('../shared/_has.cjs');
 require('../shared/class-names.cjs');
 require('../shared/when.cjs');
-require('../shared/definition59.cjs');
-require('../shared/focus.cjs');
 require('../shared/definition37.cjs');
 require('../shared/base-progress.cjs');
 require('../shared/affix.cjs');
@@ -22,6 +20,6 @@ require('../shared/aria-global.cjs');
 require('../shared/start-end.cjs');
 require('../shared/ref.cjs');
 require('../shared/enums.cjs');
-require('../shared/definition60.cjs');
+require('../shared/definition59.cjs');
 
 definition.registerPopup();

package/popup/index.js

@@ -1,4 +1,4 @@
-import { r as registerPopup } from '../shared/definition61.js';
+import { r as registerPopup } from '../shared/definition60.js';
 import '../shared/index.js';
 import '../shared/definition11.js';
 import '../shared/definition26.js';
@@ -6,8 +6,6 @@ import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition59.js';
-import '../shared/focus.js';
 import '../shared/definition37.js';
 import '../shared/base-progress.js';
 import '../shared/affix.js';
@@ -20,6 +18,6 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/enums.js';
-import '../shared/definition60.js';
+import '../shared/definition59.js';
 
 registerPopup();

package/radio/index.cjs

@@ -2,8 +2,6 @@
 
 const definition = require('../shared/definition40.cjs');
 require('../shared/index.cjs');
-require('../shared/definition59.cjs');
-require('../shared/focus.cjs');
 require('../shared/radio.cjs');
 require('../shared/form-associated.cjs');
 require('../shared/key-codes.cjs');

package/radio/index.js

@@ -1,7 +1,5 @@
 import { b as registerRadio } from '../shared/definition40.js';
 import '../shared/index.js';
-import '../shared/definition59.js';
-import '../shared/focus.js';
 import '../shared/radio.js';
 import '../shared/form-associated.js';
 import '../shared/key-codes.js';

package/select/index.cjs

@@ -2,9 +2,7 @@
 
 const definition = require('../shared/definition41.cjs');
 require('../shared/index.cjs');
-require('../shared/definition59.cjs');
-require('../shared/focus.cjs');
-require('../shared/definition61.cjs');
+require('../shared/definition60.cjs');
 require('../shared/definition11.cjs');
 require('../shared/definition26.cjs');
 require('../shared/icon.cjs');
@@ -23,10 +21,9 @@ require('../shared/aria-global.cjs');
 require('../shared/start-end.cjs');
 require('../shared/ref.cjs');
 require('../shared/enums.cjs');
-require('../shared/definition60.cjs');
+require('../shared/definition59.cjs');
 require('../shared/definition35.cjs');
 require('../shared/dom.cjs');
-require('../shared/focus2.cjs');
 require('../shared/index2.cjs');
 require('../locales/en-US.cjs');
 require('../shared/listbox.cjs');

package/select/index.js

@@ -1,8 +1,6 @@
 import { r as registerSelect } from '../shared/definition41.js';
 import '../shared/index.js';
-import '../shared/definition59.js';
-import '../shared/focus.js';
-import '../shared/definition61.js';
+import '../shared/definition60.js';
 import '../shared/definition11.js';
 import '../shared/definition26.js';
 import '../shared/icon.js';
@@ -21,10 +19,9 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/enums.js';
-import '../shared/definition60.js';
+import '../shared/definition59.js';
 import '../shared/definition35.js';
 import '../shared/dom.js';
-import '../shared/focus2.js';
 import '../shared/index2.js';
 import '../locales/en-US.js';
 import '../shared/listbox.js';

package/selectable-box/index.cjs

@@ -8,8 +8,6 @@ require('../shared/icon.cjs');
 require('../shared/_has.cjs');
 require('../shared/class-names.cjs');
 require('../shared/when.cjs');
-require('../shared/definition59.cjs');
-require('../shared/focus.cjs');
 require('../shared/affix.cjs');
 require('../shared/slotted.cjs');
 require('../shared/index2.cjs');
@@ -19,7 +17,6 @@ require('../shared/key-codes.cjs');
 require('../shared/apply-mixins.cjs');
 require('../shared/definition40.cjs');
 require('../shared/radio.cjs');
-require('../shared/focus2.cjs');
 require('../shared/enums.cjs');
 
 definition.registerSelectableBox();

package/selectable-box/index.js

@@ -6,8 +6,6 @@ import '../shared/icon.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
-import '../shared/definition59.js';
-import '../shared/focus.js';
 import '../shared/affix.js';
 import '../shared/slotted.js';
 import '../shared/index2.js';
@@ -17,7 +15,6 @@ import '../shared/key-codes.js';
 import '../shared/apply-mixins.js';
 import '../shared/definition40.js';
 import '../shared/radio.js';
-import '../shared/focus2.js';
 import '../shared/enums.js';
 
 registerSelectableBox();

package/shared/anchored.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const index = require('./index.cjs');
+const slotted = require('./slotted.cjs');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -24,7 +25,9 @@ function anchored(constructor) {
         }
         this.#cleanupObserverIfNeeded();
         let newAnchor = void 0;
-        if (this.anchor instanceof HTMLElement) {
+        if (this._slottedAnchor && this._slottedAnchor.length > 0) {
+          newAnchor = this._slottedAnchor[0];
+        } else if (this.anchor instanceof HTMLElement) {
           newAnchor = this.anchor;
         } else if (typeof this.anchor === "string") {
           newAnchor = document.getElementById(this.anchor) ?? void 0;
@@ -49,9 +52,20 @@ function anchored(constructor) {
         this.#observer = void 0;
       };
     }
+    /**
+     * @internal
+     */
     anchorChanged() {
       this.#updateAnchorEl();
     }
+    /**
+     * @internal
+     */
+    _slottedAnchorChanged() {
+      const isOccupied = Boolean(this._slottedAnchor && this._slottedAnchor.length > 0);
+      index.DOM.setBooleanAttribute(this, "slotted-anchor", isOccupied);
+      this.#updateAnchorEl();
+    }
     #updateAnchorEl;
     #observer;
     #observeMissingAnchor;
@@ -69,10 +83,15 @@ function anchored(constructor) {
   __decorateClass([
     index.attr
   ], Decorated.prototype, "anchor", 2);
+  __decorateClass([
+    index.observable
+  ], Decorated.prototype, "_slottedAnchor", 2);
   __decorateClass([
     index.observable
   ], Decorated.prototype, "_anchorEl", 2);
   return Decorated;
 }
+const anchorSlotTemplateFactory = () => index.html`<slot name="anchor" ${slotted.slotted("_slottedAnchor")}></slot>`;
 
+exports.anchorSlotTemplateFactory = anchorSlotTemplateFactory;
 exports.anchored = anchored;

package/shared/anchored.js

@@ -1,4 +1,5 @@
-import { a as attr, o as observable } from './index.js';
+import { a as attr, o as observable, h as html, D as DOM } from './index.js';
+import { s as slotted } from './slotted.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -22,7 +23,9 @@ function anchored(constructor) {
         }
         this.#cleanupObserverIfNeeded();
         let newAnchor = void 0;
-        if (this.anchor instanceof HTMLElement) {
+        if (this._slottedAnchor && this._slottedAnchor.length > 0) {
+          newAnchor = this._slottedAnchor[0];
+        } else if (this.anchor instanceof HTMLElement) {
           newAnchor = this.anchor;
         } else if (typeof this.anchor === "string") {
           newAnchor = document.getElementById(this.anchor) ?? void 0;
@@ -47,9 +50,20 @@ function anchored(constructor) {
         this.#observer = void 0;
       };
     }
+    /**
+     * @internal
+     */
     anchorChanged() {
       this.#updateAnchorEl();
     }
+    /**
+     * @internal
+     */
+    _slottedAnchorChanged() {
+      const isOccupied = Boolean(this._slottedAnchor && this._slottedAnchor.length > 0);
+      DOM.setBooleanAttribute(this, "slotted-anchor", isOccupied);
+      this.#updateAnchorEl();
+    }
     #updateAnchorEl;
     #observer;
     #observeMissingAnchor;
@@ -67,10 +81,14 @@ function anchored(constructor) {
   __decorateClass([
     attr
   ], Decorated.prototype, "anchor", 2);
+  __decorateClass([
+    observable
+  ], Decorated.prototype, "_slottedAnchor", 2);
   __decorateClass([
     observable
   ], Decorated.prototype, "_anchorEl", 2);
   return Decorated;
 }
+const anchorSlotTemplateFactory = () => html`<slot name="anchor" ${slotted("_slottedAnchor")}></slot>`;
 
-export { anchored as a };
+export { anchorSlotTemplateFactory as a, anchored as b };

package/shared/definition.cjs

@@ -2,7 +2,6 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition26.cjs');
-const definition$1 = require('./definition59.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const startEnd = require('./start-end.cjs');
@@ -151,12 +150,9 @@ const AccordionItemTemplate = (context) => index.html`
 const accordionItemDefinition = AccordionItem.compose({
   baseName: "accordion-item",
   template: AccordionItemTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+  styles
 });
-const accordionItemRegistries = [accordionItemDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
+const accordionItemRegistries = [accordionItemDefinition(), ...definition.iconRegistries];
 const registerAccordionItem = index.registerFactory(accordionItemRegistries);
 
 exports.AccordionItem = AccordionItem$1;

package/shared/definition.js

@@ -1,6 +1,5 @@
 import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition26.js';
-import { f as focusRegistries } from './definition59.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { S as StartEnd } from './start-end.js';
@@ -149,12 +148,9 @@ const AccordionItemTemplate = (context) => html`
 const accordionItemDefinition = AccordionItem.compose({
   baseName: "accordion-item",
   template: AccordionItemTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+  styles
 });
-const accordionItemRegistries = [accordionItemDefinition(), ...iconRegistries, ...focusRegistries];
+const accordionItemRegistries = [accordionItemDefinition(), ...iconRegistries];
 const registerAccordionItem = registerFactory(accordionItemRegistries);
 
 export { AccordionItem$1 as A, accordionItemDefinition as a, accordionItemRegistries as b, registerAccordionItem as r };

package/shared/definition11.cjs

@@ -2,14 +2,13 @@
 
 const index = require('./index.cjs');
 const definition$1 = require('./definition26.cjs');
-const definition$2 = require('./definition59.cjs');
 const definition = require('./definition37.cjs');
 const affix = require('./affix.cjs');
 const button = require('./button.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const enums = require('./enums.cjs');
-const ref = require('./ref.cjs');
 const when = require('./when.cjs');
+const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
 var __defProp = Object.defineProperty;
@@ -61,9 +60,30 @@ __decorateClass([
 __decorateClass([
   index.attr
 ], Button.prototype, "label", 2);
+__decorateClass([
+  index.attr
+], Button.prototype, "href", 2);
+__decorateClass([
+  index.attr
+], Button.prototype, "download", 2);
+__decorateClass([
+  index.attr
+], Button.prototype, "hreflang", 2);
+__decorateClass([
+  index.attr
+], Button.prototype, "ping", 2);
+__decorateClass([
+  index.attr
+], Button.prototype, "referrerpolicy", 2);
+__decorateClass([
+  index.attr
+], Button.prototype, "rel", 2);
+__decorateClass([
+  index.attr
+], Button.prototype, "target", 2);
 applyMixins.applyMixins(Button, affix.AffixIconWithTrailing);
 
-const styles = ":host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);border-radius:var(--_button-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);vertical-align:middle;--focus-stroke-gap-color: transparent}.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))}.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))}.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))}.control:not(.connotation-cta,.connotation-success,.connotation-alert){--_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))}.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(--_connotation-color-firm)}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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(--_connotation-color-firm)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.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(: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(--_connotation-color-firm)}.control:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.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.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_button-block-size)}}.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)}.control:not(.stacked).size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;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)}.control:not(.stacked).size-condensed:not(.icon-only){--_button-icon-gap: 8px;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)}.control:not(.stacked).size-expanded:not(.icon-only){--_button-icon-gap: 10px;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)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;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){--_button-border-radius: 24px}.control.shape-pill.stacked{--_button-border-radius: 24px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked{flex-direction:column;justify-content:center}.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)}.control.stacked.size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.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)}.control.stacked.size-condensed:not(.icon-only){--_button-icon-gap: 6px;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)}.control.stacked.size-expanded:not(.icon-only){--_button-icon-gap: 10px;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)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;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)}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}\n";
+const styles = ":host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);border-radius:var(--_button-border-radius);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;--focus-stroke-gap-color: transparent}.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))}.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))}.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))}.control:not(.connotation-cta,.connotation-success,.connotation-alert){--_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))}.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(--_connotation-color-firm)}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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(--_connotation-color-firm)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.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(: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(--_connotation-color-firm)}.control:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.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.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_button-block-size)}}.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)}.control:not(.stacked).size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;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)}.control:not(.stacked).size-condensed:not(.icon-only){--_button-icon-gap: 8px;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)}.control:not(.stacked).size-expanded:not(.icon-only){--_button-icon-gap: 10px;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)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;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){--_button-border-radius: 24px}.control.shape-pill.stacked{--_button-border-radius: 24px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked{flex-direction:column;justify-content:center}.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)}.control.stacked.size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.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)}.control.stacked.size-condensed:not(.icon-only){--_button-icon-gap: 6px;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)}.control.stacked.size-expanded:not(.icon-only){--_button-icon-gap: 10px;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)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;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)}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}\n";
 
 const getAppearanceClassName = (appearance, disabled) => {
   let className = `appearance-${appearance}`;
@@ -105,45 +125,79 @@ function renderIconOrPending(context, icon, pending, size = enums.Size.Normal) {
     return affixIconTemplate(icon, affix.IconWrapper.Slot, affix.IconAriaHidden.Hidden);
   }
 }
+function renderButtonContent(context) {
+  return index.html`
+		<button
+			class="${getClasses}"
+			?autofocus="${(x) => x.autofocus}"
+			?disabled="${(x) => x.disabled || x.pending}"
+			form="${(x) => x.formId}"
+			formaction="${(x) => x.formaction}"
+			formenctype="${(x) => x.formenctype}"
+			formmethod="${(x) => x.formmethod}"
+			formnovalidate="${(x) => x.formnovalidate}"
+			formtarget="${(x) => x.formtarget}"
+			name="${(x) => x.name}"
+			type="${(x) => x.type}"
+			value="${(x) => x.value}"
+			aria-atomic="${(x) => x.ariaAtomic}"
+			aria-busy="${(x) => x.ariaBusy}"
+			aria-current="${(x) => x.ariaCurrent}"
+			aria-details="${(x) => x.ariaDetails}"
+			aria-disabled="${(x) => x.ariaDisabled}"
+			aria-expanded="${(x) => x.ariaExpanded}"
+			aria-haspopup="${(x) => x.ariaHaspopup}"
+			aria-hidden="${(x) => x.ariaHidden}"
+			aria-invalid="${(x) => x.ariaInvalid}"
+			aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+			aria-label="${(x) => x.ariaLabel}"
+			aria-live="${(x) => x.ariaLive}"
+			aria-pressed="${(x) => x.ariaPressed}"
+			aria-relevant="${(x) => x.ariaRelevant}"
+			aria-roledescription="${(x) => x.ariaRoledescription}"
+			title="${(x) => x.title}"
+			${ref.ref("control")}>
+		${(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>`)}
+	</button>`;
+}
+function renderAnchorContent(context) {
+  return index.html`<a
+		class="${getClasses}"
+		download="${(x) => x.download}"
+		href="${(x) => x.href}"
+		hreflang="${(x) => x.hreflang}"
+		ping="${(x) => x.ping}"
+		referrerpolicy="${(x) => x.referrerpolicy}"
+		rel="${(x) => x.rel}"
+		target="${(x) => x.target}"
+		type="${(x) => x.type}"
+		aria-atomic="${(x) => x.ariaAtomic}"
+		aria-busy="${(x) => x.ariaBusy}"
+		aria-current="${(x) => x.ariaCurrent}"
+		aria-details="${(x) => x.ariaDetails}"
+		aria-disabled="${(x) => x.ariaDisabled}"
+		aria-errormessage="${(x) => x.ariaErrormessage}"
+		aria-expanded="${(x) => x.ariaExpanded}"
+		aria-haspopup="${(x) => x.ariaHaspopup}"
+		aria-hidden="${(x) => x.ariaHidden}"
+		aria-invalid="${(x) => x.ariaInvalid}"
+		aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-live="${(x) => x.ariaLive}"
+		aria-relevant="${(x) => x.ariaRelevant}"
+		aria-roledescription="${(x) => x.ariaRoledescription}"
+		${ref.ref("control")}>
+	${(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>`)}
+	</a>`;
+}
 const buttonTemplate = (context) => {
   return index.html`
 		<template role="presentation">
-			<button
-				class="${getClasses}"
-				?autofocus="${(x) => x.autofocus}"
-				?disabled="${(x) => x.disabled || x.pending}"
-				form="${(x) => x.formId}"
-				formaction="${(x) => x.formaction}"
-				formenctype="${(x) => x.formenctype}"
-				formmethod="${(x) => x.formmethod}"
-				formnovalidate="${(x) => x.formnovalidate}"
-				formtarget="${(x) => x.formtarget}"
-				name="${(x) => x.name}"
-				type="${(x) => x.type}"
-				value="${(x) => x.value}"
-				aria-atomic="${(x) => x.ariaAtomic}"
-				aria-busy="${(x) => x.ariaBusy}"
-				aria-current="${(x) => x.ariaCurrent}"
-				aria-details="${(x) => x.ariaDetails}"
-				aria-disabled="${(x) => x.ariaDisabled}"
-				aria-expanded="${(x) => x.ariaExpanded}"
-				aria-haspopup="${(x) => x.ariaHaspopup}"
-				aria-hidden="${(x) => x.ariaHidden}"
-				aria-invalid="${(x) => x.ariaInvalid}"
-				aria-keyshortcuts="${(x) => x.ariaKeyshortcuts}"
-				aria-label="${(x) => x.ariaLabel}"
-				aria-live="${(x) => x.ariaLive}"
-				aria-pressed="${(x) => x.ariaPressed}"
-				aria-relevant="${(x) => x.ariaRelevant}"
-				aria-roledescription="${(x) => x.ariaRoledescription}"
-				title="${(x) => x.title}"
-				${ref.ref("control")}
-			>
-				${(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>`)}
-			</button>
-		</template>
-`;
+			${when.when((x) => !x.href, index.html`${renderButtonContent(context)}`)}
+			${when.when((x) => x.href, index.html`${renderAnchorContent(context)}`)}
+		</template>`;
 };
 
 const buttonDefinition = Button.compose({
@@ -155,7 +209,7 @@ const buttonDefinition = Button.compose({
     delegatesFocus: true
   }
 });
-const buttonRegistries = [buttonDefinition(), ...definition$1.iconRegistries, ...definition$2.focusRegistries, ...definition.progressRingRegistries];
+const buttonRegistries = [buttonDefinition(), ...definition$1.iconRegistries, ...definition.progressRingRegistries];
 const registerButton = index.registerFactory(buttonRegistries);
 
 exports.Button = Button;