@vonage/vivid 4.13.0 → 4.14.0

package/lib/tree-view/tree-view.template.d.ts

@@ -1,2 +1,2 @@
 import type { TreeView } from './tree-view';
-export declare const TreeViewTemplate: () => import("@microsoft/fast-element").ViewTemplate<TreeView, any>;
+export declare const TreeViewTemplate: import("@microsoft/fast-element").ViewTemplate<TreeView, any>;

package/lib/video-player/definition.d.ts

@@ -1,3 +1 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const videoPlayerDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-export declare const registerVideoPlayer: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
+export declare const registerVideoPlayer: (prefix?: string) => void;

package/lib/video-player/video-player.d.ts

@@ -1,8 +1,8 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import { MediaSkipBy } from '../enums';
 import { Localized } from '../../shared/patterns';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export declare const DEFAULT_PLAYBACK_RATES = "0.5, 1, 1.5, 2";
-export declare class VideoPlayer extends FoundationElement {
+export declare class VideoPlayer extends VividElement {
     #private;
     poster?: string;
     src?: string;

package/lib/video-player/video-player.template.d.ts

@@ -1,4 +1,2 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { VideoPlayer } from './video-player';
-export declare const VideoPlayerTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<VideoPlayer>;
+export declare const VideoPlayerTemplate: import("@microsoft/fast-element").ViewTemplate<VideoPlayer, any>;

package/listbox/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-const index = require('../shared/index.cjs');
-const definition = require('../shared/definition36.cjs');
-const listbox = require('../shared/listbox.cjs');
+const definition = require('../shared/definition35.cjs');
+const defineVividComponent = require('../shared/defineVividComponent.cjs');
+const listbox = require('../shared/listbox2.cjs');
 const slotted = require('../shared/slotted.cjs');
 const classNames = require('../shared/class-names.cjs');
 
@@ -13,44 +13,42 @@ const getClasses = ({ appearance, shape, disabled, orientation }) => classNames.
   [`shape-${shape}`, Boolean(shape) && orientation === "horizontal"],
   [`orientation-${orientation}`, Boolean(orientation)]
 );
-const ListboxTemplate = () => {
-  return index.html`
-		<template
-			aria-activedescendant="${(x) => x.ariaActiveDescendant}"
-			aria-multiselectable="${(x) => x.ariaMultiSelectable}"
-			aria-orientation="${(x) => x.ariaOrientation}"
-			aria-label="listbox"
-			role="listbox"
-			@click="${(x, c) => x.clickHandler(c.event)}"
-			@focusin="${(x, c) => x.focusinHandler(c.event)}"
-			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
-			tabindex="${(x) => !x.disabled ? "0" : null}"
-		>
-			<div class="${getClasses}">
-				<slot
-					${slotted.slotted({
-    filter: listbox.ListboxElement.slottedOptionFilter,
-    flatten: true,
-    property: "slottedOptions"
-  })}
-				></slot>
-			</div>
-		</template>
-	`;
-};
+const ListboxTemplate = defineVividComponent.html`
+	<template
+		aria-activedescendant="${(x) => x.ariaActiveDescendant}"
+		aria-multiselectable="${(x) => x.ariaMultiSelectable}"
+		aria-orientation="${(x) => x.ariaOrientation}"
+		aria-label="listbox"
+		role="listbox"
+		@click="${(x, c) => x.clickHandler(c.event)}"
+		@focusin="${(x, c) => x.focusinHandler(c.event)}"
+		@keydown="${(x, c) => x.keydownHandler(c.event)}"
+		@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
+		tabindex="${(x) => !x.disabled ? "0" : null}"
+	>
+		<div class="${getClasses}">
+			<slot
+				${slotted.slotted({
+  filter: listbox.ListboxElement.slottedOptionFilter,
+  flatten: true,
+  property: "slottedOptions"
+})}
+			></slot>
+		</div>
+	</template>
+`;
 
 const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .base{--focus-stroke-gap-color: transparent;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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
 
-const listboxDefinition = listbox.Listbox.compose({
-  baseName: "listbox",
-  template: ListboxTemplate,
-  styles
-});
-const listboxRegistries = [
-  listboxDefinition(),
-  ...definition.listboxOptionRegistries
-];
-const registerListbox = index.registerFactory(listboxRegistries);
+const listboxDefinition = defineVividComponent.defineVividComponent(
+  "listbox",
+  listbox.Listbox,
+  ListboxTemplate,
+  [definition.listboxOptionDefinition],
+  {
+    styles
+  }
+);
+const registerListbox = defineVividComponent.createRegisterFunction(listboxDefinition);
 
 registerListbox();

package/listbox/index.js

@@ -1,6 +1,6 @@
-import { h as html, r as registerFactory } from '../shared/index.js';
-import { a as listboxOptionRegistries } from '../shared/definition36.js';
-import { L as ListboxElement, a as Listbox } from '../shared/listbox.js';
+import { l as listboxOptionDefinition } from '../shared/definition35.js';
+import { h as html, f as createRegisterFunction, d as defineVividComponent } from '../shared/defineVividComponent.js';
+import { L as ListboxElement, a as Listbox } from '../shared/listbox2.js';
 import { s as slotted } from '../shared/slotted.js';
 import { c as classNames } from '../shared/class-names.js';
 
@@ -11,44 +11,42 @@ const getClasses = ({ appearance, shape, disabled, orientation }) => classNames(
   [`shape-${shape}`, Boolean(shape) && orientation === "horizontal"],
   [`orientation-${orientation}`, Boolean(orientation)]
 );
-const ListboxTemplate = () => {
-  return html`
-		<template
-			aria-activedescendant="${(x) => x.ariaActiveDescendant}"
-			aria-multiselectable="${(x) => x.ariaMultiSelectable}"
-			aria-orientation="${(x) => x.ariaOrientation}"
-			aria-label="listbox"
-			role="listbox"
-			@click="${(x, c) => x.clickHandler(c.event)}"
-			@focusin="${(x, c) => x.focusinHandler(c.event)}"
-			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
-			tabindex="${(x) => !x.disabled ? "0" : null}"
-		>
-			<div class="${getClasses}">
-				<slot
-					${slotted({
-    filter: ListboxElement.slottedOptionFilter,
-    flatten: true,
-    property: "slottedOptions"
-  })}
-				></slot>
-			</div>
-		</template>
-	`;
-};
+const ListboxTemplate = html`
+	<template
+		aria-activedescendant="${(x) => x.ariaActiveDescendant}"
+		aria-multiselectable="${(x) => x.ariaMultiSelectable}"
+		aria-orientation="${(x) => x.ariaOrientation}"
+		aria-label="listbox"
+		role="listbox"
+		@click="${(x, c) => x.clickHandler(c.event)}"
+		@focusin="${(x, c) => x.focusinHandler(c.event)}"
+		@keydown="${(x, c) => x.keydownHandler(c.event)}"
+		@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
+		tabindex="${(x) => !x.disabled ? "0" : null}"
+	>
+		<div class="${getClasses}">
+			<slot
+				${slotted({
+  filter: ListboxElement.slottedOptionFilter,
+  flatten: true,
+  property: "slottedOptions"
+})}
+			></slot>
+		</div>
+	</template>
+`;
 
 const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .base{--focus-stroke-gap-color: transparent;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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
 
-const listboxDefinition = Listbox.compose({
-  baseName: "listbox",
-  template: ListboxTemplate,
-  styles
-});
-const listboxRegistries = [
-  listboxDefinition(),
-  ...listboxOptionRegistries
-];
-const registerListbox = registerFactory(listboxRegistries);
+const listboxDefinition = defineVividComponent(
+  "listbox",
+  Listbox,
+  ListboxTemplate,
+  [listboxOptionDefinition],
+  {
+    styles
+  }
+);
+const registerListbox = createRegisterFunction(listboxDefinition);
 
 registerListbox();

package/menu/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition30.cjs');
+const definition = require('../shared/definition29.cjs');
 
 definition.registerMenu();

package/menu/index.js

@@ -1,3 +1,3 @@
-import { r as registerMenu } from '../shared/definition30.js';
+import { c as registerMenu } from '../shared/definition29.js';
 
 registerMenu();

package/nav/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition33.cjs');
+const definition = require('../shared/definition32.cjs');
 
 definition.registerNav();

package/nav/index.js

@@ -1,3 +1,3 @@
-import { r as registerNav } from '../shared/definition33.js';
+import { r as registerNav } from '../shared/definition32.js';
 
 registerNav();

package/nav-disclosure/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition31.cjs');
+const definition = require('../shared/definition30.cjs');
 
 definition.registerNavDisclosure();

package/nav-disclosure/index.js

@@ -1,3 +1,3 @@
-import { r as registerNavDisclosure } from '../shared/definition31.js';
+import { r as registerNavDisclosure } from '../shared/definition30.js';
 
 registerNavDisclosure();

package/nav-item/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition32.cjs');
+const definition = require('../shared/definition31.cjs');
 
 definition.registerNavItem();

package/nav-item/index.js

@@ -1,3 +1,3 @@
-import { r as registerNavItem } from '../shared/definition32.js';
+import { r as registerNavItem } from '../shared/definition31.js';
 
 registerNavItem();

package/note/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition34.cjs');
+const definition = require('../shared/definition33.cjs');
 
 definition.registerNote();

package/note/index.js

@@ -1,3 +1,3 @@
-import { r as registerNote } from '../shared/definition34.js';
+import { r as registerNote } from '../shared/definition33.js';
 
 registerNote();

package/number-field/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition35.cjs');
+const definition = require('../shared/definition34.cjs');
 
 definition.registerNumberField();

package/number-field/index.js

@@ -1,3 +1,3 @@
-import { r as registerNumberField } from '../shared/definition35.js';
+import { r as registerNumberField } from '../shared/definition34.js';
 
 registerNumberField();

package/option/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition36.cjs');
+const definition = require('../shared/definition35.cjs');
 
 definition.registerOption();

package/option/index.js

@@ -1,3 +1,3 @@
-import { r as registerOption } from '../shared/definition36.js';
+import { r as registerOption } from '../shared/definition35.js';
 
 registerOption();

package/package.json

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

package/pagination/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition37.cjs');
+const definition = require('../shared/definition36.cjs');
 
 definition.registerPagination();

package/pagination/index.js

@@ -1,3 +1,3 @@
-import { r as registerPagination } from '../shared/definition37.js';
+import { r as registerPagination } from '../shared/definition36.js';
 
 registerPagination();

package/popup/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition64.cjs');
+const definition = require('../shared/definition63.cjs');
 
 definition.registerPopup();

package/popup/index.js

@@ -1,3 +1,3 @@
-import { r as registerPopup } from '../shared/definition64.js';
+import { r as registerPopup } from '../shared/definition63.js';
 
 registerPopup();

package/progress/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition39.cjs');
+const definition = require('../shared/definition38.cjs');
 
 definition.registerProgress();

package/progress/index.js

@@ -1,3 +1,3 @@
-import { r as registerProgress } from '../shared/definition39.js';
+import { r as registerProgress } from '../shared/definition38.js';
 
 registerProgress();

package/progress-ring/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition38.cjs');
+const definition = require('../shared/definition37.cjs');
 
 definition.registerProgressRing();

package/progress-ring/index.js

@@ -1,3 +1,3 @@
-import { r as registerProgressRing } from '../shared/definition38.js';
+import { r as registerProgressRing } from '../shared/definition37.js';
 
 registerProgressRing();

package/radio/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition41.cjs');
+const definition = require('../shared/definition40.cjs');
 
 definition.registerRadio();

package/radio/index.js

@@ -1,3 +1,3 @@
-import { b as registerRadio } from '../shared/definition41.js';
+import { a as registerRadio } from '../shared/definition40.js';
 
 registerRadio();

package/radio-group/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition40.cjs');
+const definition = require('../shared/definition39.cjs');
 
 definition.registerRadioGroup();

package/radio-group/index.js

@@ -1,3 +1,3 @@
-import { b as registerRadioGroup } from '../shared/definition40.js';
+import { a as registerRadioGroup } from '../shared/definition39.js';
 
 registerRadioGroup();

package/range-slider/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition42.cjs');
+const definition = require('../shared/definition41.cjs');
 
 definition.registerRangeSlider();

package/range-slider/index.js

@@ -1,3 +1,3 @@
-import { b as registerRangeSlider } from '../shared/definition42.js';
+import { a as registerRangeSlider } from '../shared/definition41.js';
 
 registerRangeSlider();

package/searchable-select/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition43.cjs');
+const definition = require('../shared/definition42.cjs');
 
 definition.registerSearchableSelect();

package/searchable-select/index.js

@@ -1,3 +1,3 @@
-import { r as registerSearchableSelect } from '../shared/definition43.js';
+import { r as registerSearchableSelect } from '../shared/definition42.js';
 
 registerSearchableSelect();

package/select/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition44.cjs');
+const definition = require('../shared/definition43.cjs');
 
 definition.registerSelect();

package/select/index.js

@@ -1,3 +1,3 @@
-import { r as registerSelect } from '../shared/definition44.js';
+import { r as registerSelect } from '../shared/definition43.js';
 
 registerSelect();

package/selectable-box/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition45.cjs');
+const definition = require('../shared/definition44.cjs');
 
 definition.registerSelectableBox();

package/selectable-box/index.js

@@ -1,3 +1,3 @@
-import { r as registerSelectableBox } from '../shared/definition45.js';
+import { r as registerSelectableBox } from '../shared/definition44.js';
 
 registerSelectableBox();

package/shared/affix.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-const icon = require('./icon.cjs');
-const index = require('./index.cjs');
+const definition = require('./definition27.cjs');
 const slotted = require('./slotted.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,10 +16,10 @@ var __decorateClass = (decorators, target, key, kind) => {
 class AffixIcon {
 }
 __decorateClass([
-  index.attr
+  defineVividComponent.attr
 ], AffixIcon.prototype, "icon");
 __decorateClass([
-  index.attr({ mode: "fromView" })
+  defineVividComponent.attr({ mode: "fromView" })
 ], AffixIcon.prototype, "iconSlottedContent");
 class AffixIconWithTrailing extends AffixIcon {
   constructor() {
@@ -28,7 +28,7 @@ class AffixIconWithTrailing extends AffixIcon {
   }
 }
 __decorateClass([
-  index.attr({
+  defineVividComponent.attr({
     mode: "boolean",
     attribute: "icon-trailing"
   })
@@ -42,10 +42,10 @@ const IconAriaHidden = {
   Visible: "false"
 };
 const affixIconTemplateFactory = (context) => {
-  const iconTag = context.tagFor(icon.Icon);
+  const iconTag = context.tagFor(definition.Icon);
   return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden) => {
     if (!icon && !slottedState) {
-      return index.html`<slot
+      return defineVividComponent.html`<slot
 				name="icon"
 				aria-hidden="${() => ariaHidden}"
 				${slotted.slotted("iconSlottedContent")}
@@ -54,10 +54,10 @@ const affixIconTemplateFactory = (context) => {
     if (!icon && slottedState) {
       return null;
     }
-    const iconTemplate = index.html`<${iconTag} :name="${() => icon}"></${iconTag}>`;
-    return slottedState ? index.html`<span class="icon" aria-hidden="${() => ariaHidden}"
+    const iconTemplate = defineVividComponent.html`<${iconTag} :name="${() => icon}"></${iconTag}>`;
+    return slottedState ? defineVividComponent.html`<span class="icon" aria-hidden="${() => ariaHidden}"
 					>${iconTemplate}</span
-			  >` : index.html`<slot name="icon" aria-hidden="${() => ariaHidden}"
+			  >` : defineVividComponent.html`<slot name="icon" aria-hidden="${() => ariaHidden}"
 					>${iconTemplate}</slot
 			  >`;
   };

package/shared/affix.js

@@ -1,6 +1,6 @@
-import { I as Icon } from './icon.js';
-import { a as attr, h as html } from './index.js';
+import { I as Icon } from './definition27.js';
 import { s as slotted } from './slotted.js';
+import { a as attr, h as html } from './defineVividComponent.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/anchor.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+const ariaGlobal = require('./aria-global.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Anchor {
+}
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  defineVividComponent.attr
+], Anchor.prototype, "download");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  defineVividComponent.attr
+], Anchor.prototype, "href");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  defineVividComponent.attr
+], Anchor.prototype, "hreflang");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  defineVividComponent.attr
+], Anchor.prototype, "ping");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  defineVividComponent.attr
+], Anchor.prototype, "referrerpolicy");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  defineVividComponent.attr
+], Anchor.prototype, "rel");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  defineVividComponent.attr
+], Anchor.prototype, "target");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  defineVividComponent.attr
+], Anchor.prototype, "type");
+class DelegatesARIALink {
+}
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  defineVividComponent.attr({ attribute: "aria-expanded" })
+], DelegatesARIALink.prototype, "ariaExpanded");
+applyMixins.applyMixins(DelegatesARIALink, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(Anchor, DelegatesARIALink);
+
+exports.Anchor = Anchor;