@vonage/vivid 3.32.0 → 3.35.0

package/shared/index2.js

@@ -1,45 +1,57 @@
-import { _ as __decorate, a as attr, b as __metadata, o as observable, v as volatile, h as html, d as __classPrivateFieldGet, f as __classPrivateFieldSet } from './index.js';
 import { I as Icon } from './icon.js';
+import { a as attr, o as observable, v as volatile, h as html } from './index.js';
 import { w as when } from './when.js';
 import enUS from '../locales/en-US.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
+const messageStyles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
 
-const ElementInternalsKey = 'ElementInternals';
-const supportsElementInternals = () => ElementInternalsKey in window && 'setFormValue' in window[ElementInternalsKey].prototype;
-class FormElementHelperText {}
-__decorate([attr({
-  attribute: 'helper-text'
-}), __metadata("design:type", String)], FormElementHelperText.prototype, "helperText", void 0);
-class FormElementSuccessText {}
-__decorate([attr({
-  attribute: 'success-text'
-}), __metadata("design:type", String)], FormElementSuccessText.prototype, "successText", void 0);
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$1(target, key, result);
+  return result;
+};
+const ElementInternalsKey = "ElementInternals";
+const supportsElementInternals = () => ElementInternalsKey in window && "setFormValue" in window[ElementInternalsKey].prototype;
+class FormElementHelperText {
+}
+__decorateClass$1([
+  attr({ attribute: "helper-text" })
+], FormElementHelperText.prototype, "helperText", 2);
+class FormElementSuccessText {
+}
+__decorateClass$1([
+  attr({ attribute: "success-text" })
+], FormElementSuccessText.prototype, "successText", 2);
 class FormElementCharCount {
   constructor() {
     this.charCount = false;
   }
 }
-__decorate([attr({
-  attribute: 'char-count',
-  mode: 'boolean'
-}), __metadata("design:type", Object)], FormElementCharCount.prototype, "charCount", void 0);
+__decorateClass$1([
+  attr({
+    attribute: "char-count",
+    mode: "boolean"
+  })
+], FormElementCharCount.prototype, "charCount", 2);
 function formElements(constructor) {
-  var _Decorated_blurred, _Decorated_handleInvalidEvent;
   class Decorated extends constructor {
-    get errorValidationMessage() {
-      return this.userValid ? '' : this.validationMessage;
-    }
     constructor(...args) {
       super(...args);
       this.userValid = true;
-      _Decorated_blurred.set(this, false);
-      _Decorated_handleInvalidEvent.set(this, () => {
-        if (__classPrivateFieldGet(this, _Decorated_blurred, "f") && this.dirtyValue) return;
-        __classPrivateFieldSet(this, _Decorated_blurred, true, "f");
+      this.#blurred = false;
+      this.#handleInvalidEvent = () => {
+        if (this.#blurred && this.dirtyValue)
+          return;
+        this.#blurred = true;
         this.dirtyValue = true;
         this.validate();
-      });
+      };
       this.validate = () => {
         if (supportsElementInternals() && this.proxy instanceof HTMLElement) {
           this.setValidity(this.proxy.validity, this.proxy.validationMessage, this.control);
@@ -48,53 +60,61 @@ function formElements(constructor) {
         }
         this.userValid = !this.userValid;
         if (this.proxy instanceof HTMLElement) {
-          this.userValid = __classPrivateFieldGet(this, _Decorated_blurred, "f") && this.dirtyValue ? !this.validationMessage : true;
+          this.userValid = this.#blurred && this.dirtyValue ? !this.validationMessage : true;
         }
       };
-      this.addEventListener('blur', () => {
-        __classPrivateFieldSet(this, _Decorated_blurred, true, "f");
+      this.addEventListener("blur", () => {
+        this.#blurred = true;
         this.validate();
       });
-      this.addEventListener('focus', () => {
-        __classPrivateFieldSet(this, _Decorated_blurred, false, "f");
+      this.addEventListener("focus", () => {
+        this.#blurred = false;
       });
-      this.addEventListener('invalid', () => {
-        this.proxy.dispatchEvent(new Event('invalid'));
+      this.addEventListener("invalid", () => {
+        this.proxy.dispatchEvent(new Event("invalid"));
       });
     }
+    #blurred;
+    get errorValidationMessage() {
+      return this.userValid ? "" : this.validationMessage;
+    }
     connectedCallback() {
-      var _a;
-      (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-      this.proxy.addEventListener('invalid', __classPrivateFieldGet(this, _Decorated_handleInvalidEvent, "f"));
+      super.connectedCallback?.();
+      this.proxy.addEventListener("invalid", this.#handleInvalidEvent);
     }
+    #handleInvalidEvent;
     disconnectedCallback() {
-      var _a;
-      (_a = super.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
-      this.proxy.removeEventListener('invalid', __classPrivateFieldGet(this, _Decorated_handleInvalidEvent, "f"));
+      super.disconnectedCallback?.();
+      this.proxy.removeEventListener("invalid", this.#handleInvalidEvent);
     }
   }
-  _Decorated_blurred = new WeakMap(), _Decorated_handleInvalidEvent = new WeakMap();
-  __decorate([attr, __metadata("design:type", String)], Decorated.prototype, "label", void 0);
-  __decorate([observable, __metadata("design:type", Object)], Decorated.prototype, "userValid", void 0);
-  __decorate([volatile, __metadata("design:type", Object), __metadata("design:paramtypes", [])], Decorated.prototype, "errorValidationMessage", null);
+  __decorateClass$1([
+    attr
+  ], Decorated.prototype, "label", 2);
+  __decorateClass$1([
+    observable
+  ], Decorated.prototype, "userValid", 2);
+  __decorateClass$1([
+    volatile
+  ], Decorated.prototype, "errorValidationMessage", 1);
   return Decorated;
 }
 function getFeedbackTemplate(messageType, context) {
   const MessageTypeMap = {
-    'helper': {
-      'messageProperty': 'helperText',
-      'className': 'helper',
-      'iconType': ''
+    "helper": {
+      "messageProperty": "helperText",
+      "className": "helper",
+      "iconType": ""
     },
-    'error': {
-      'messageProperty': 'errorValidationMessage',
-      'className': 'error',
-      'iconType': 'info-line'
+    "error": {
+      "messageProperty": "errorValidationMessage",
+      "className": "error",
+      "iconType": "info-line"
     },
-    'success': {
-      'messageProperty': 'successText',
-      'className': 'success',
-      'iconType': 'check-circle-line'
+    "success": {
+      "messageProperty": "successText",
+      "className": "success",
+      "iconType": "check-circle-line"
     }
   };
   const iconTag = context.tagFor(Icon);
@@ -102,7 +122,7 @@ function getFeedbackTemplate(messageType, context) {
   const iconType = messageTypeConfig.iconType;
   return html`
 			<style>
-				${css_248z}
+				${messageStyles}
 
 			</style>
 			<div class="message ${MessageTypeMap[messageType].className}-message">
@@ -113,61 +133,69 @@ function getFeedbackTemplate(messageType, context) {
   })}
 			</div>`;
 }
-function feedbackMessage({
-  messageProperty
-}) {
+function feedbackMessage({ messageProperty }) {
   return html`
-	  <span class="message-text">${x => x[messageProperty]}</span>
+	  <span class="message-text">${(x) => x[messageProperty]}</span>
 	`;
 }
 function errorText(constructor) {
-  var _Decorated_shouldValidate, _Decorated_prevSuccessText;
   class Decorated extends constructor {
     constructor(...args) {
       super(...args);
-      _Decorated_shouldValidate.set(this, true);
-      _Decorated_prevSuccessText.set(this, '');
+      this.#shouldValidate = true;
+      this.#prevSuccessText = "";
       this._validate = this.validate;
       this.validate = () => {
-        if (__classPrivateFieldGet(this, _Decorated_shouldValidate, "f")) this._validate();
+        if (this.#shouldValidate)
+          this._validate();
       };
     }
+    #shouldValidate;
+    #prevSuccessText;
     errorTextChanged(_, newmsg) {
       if (newmsg) {
-        this.setValidity({
-          customError: true
-        }, newmsg, this.control);
-        __classPrivateFieldSet(this, _Decorated_prevSuccessText, this.successText, "f");
-        this.successText = '';
+        this.setValidity({ customError: true }, newmsg, this.control);
+        this.#prevSuccessText = this.successText;
+        this.successText = "";
         this.userValid = !this.userValid;
         this.userValid = false;
-        __classPrivateFieldSet(this, _Decorated_shouldValidate, false, "f");
+        this.#shouldValidate = false;
       } else {
-        this.setValidity({
-          customError: false
-        }, '', this.control);
-        this.successText = __classPrivateFieldGet(this, _Decorated_prevSuccessText, "f");
+        this.setValidity({ customError: false }, "", this.control);
+        this.successText = this.#prevSuccessText;
         this.userValid = true;
-        __classPrivateFieldSet(this, _Decorated_shouldValidate, true, "f");
+        this.#shouldValidate = true;
         this._validate();
       }
     }
   }
-  _Decorated_shouldValidate = new WeakMap(), _Decorated_prevSuccessText = new WeakMap();
-  __decorate([attr({
-    attribute: 'error-text'
-  }), __metadata("design:type", String)], Decorated.prototype, "errorText", void 0);
+  __decorateClass$1([
+    attr({ attribute: "error-text" })
+  ], Decorated.prototype, "errorText", 2);
   return Decorated;
 }
 
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
 class CurrentLocale {
   constructor() {
     this.locale = enUS;
   }
 }
-__decorate([observable, __metadata("design:type", Object)], CurrentLocale.prototype, "locale", void 0);
+__decorateClass([
+  observable
+], CurrentLocale.prototype, "locale", 2);
 const currentLocale = new CurrentLocale();
-const setLocale = locale => {
+const setLocale = (locale) => {
   currentLocale.locale = locale;
 };
 

package/shared/key-codes.js

@@ -97,4 +97,4 @@ const ArrowKeys = {
     ArrowUp: keyArrowUp,
 };
 
-export { ArrowKeys as A, keyHome as a, keyArrowDown as b, keyArrowUp as c, keyEnter as d, keySpace as e, keyEscape as f, keyTab as g, keyArrowRight as h, keyArrowLeft as i, keyPageDown as j, keyEnd as k, keyPageUp as l, keyFunction2 as m };
+export { ArrowKeys as A, keySpace as a, keyEnd as b, keyHome as c, keyArrowDown as d, keyArrowUp as e, keyEscape as f, keyTab as g, keyArrowRight as h, keyArrowLeft as i, keyPageDown as j, keyEnter as k, keyPageUp as l, keyFunction2 as m };

package/shared/listbox.js

@@ -1,8 +1,8 @@
-import { F as FoundationElement, O as Observable, _ as __decorate, a as attr, o as observable, D as DOM, n as nullableNumberConverter, b as __metadata } from './index.js';
-import { i as isListboxOption } from './definition21.js';
+import { F as FoundationElement, O as Observable, _ as __decorate, a as attr, o as observable, D as DOM, n as nullableNumberConverter } from './index.js';
+import { i as isListboxOption } from './definition33.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { e as keySpace, f as keyEscape, d as keyEnter, g as keyTab, k as keyEnd, c as keyArrowUp, b as keyArrowDown, a as keyHome } from './key-codes.js';
+import { a as keySpace, f as keyEscape, k as keyEnter, g as keyTab, b as keyEnd, e as keyArrowUp, d as keyArrowDown, c as keyHome } from './key-codes.js';
 import { u as uniqueId } from './strings.js';
 import { i as inRange } from './numbers.js';
 
@@ -30,7 +30,7 @@ function findLastIndex(array, predicate) {
  *
  * @public
  */
-class Listbox$1 extends FoundationElement {
+let Listbox$1 = class Listbox extends FoundationElement {
     constructor() {
         super(...arguments);
         /**
@@ -226,7 +226,7 @@ class Listbox$1 extends FoundationElement {
     handleChange(source, propertyName) {
         switch (propertyName) {
             case "selected": {
-                if (Listbox$1.slottedOptionFilter(source)) {
+                if (Listbox.slottedOptionFilter(source)) {
                     this.selectedIndex = this.options.indexOf(source);
                 }
                 this.setSelectedOptions();
@@ -248,7 +248,7 @@ class Listbox$1 extends FoundationElement {
         if (this.typeaheadTimeout) {
             window.clearTimeout(this.typeaheadTimeout);
         }
-        this.typeaheadTimeout = window.setTimeout(() => (this.typeaheadExpired = true), Listbox$1.TYPE_AHEAD_TIMEOUT_MS);
+        this.typeaheadTimeout = window.setTimeout(() => (this.typeaheadExpired = true), Listbox.TYPE_AHEAD_TIMEOUT_MS);
         if (key.length > 1) {
             return;
         }
@@ -374,7 +374,7 @@ class Listbox$1 extends FoundationElement {
      */
     selectedOptionsChanged(prev, next) {
         var _a;
-        const filteredNext = next.filter(Listbox$1.slottedOptionFilter);
+        const filteredNext = next.filter(Listbox.slottedOptionFilter);
         (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
             const notifier = Observable.getNotifier(o);
             notifier.unsubscribe(this, "selected");
@@ -493,7 +493,7 @@ class Listbox$1 extends FoundationElement {
             this.typeaheadExpired = false;
         }
     }
-}
+};
 /**
  * A static filter to include only selectable options.
  *
@@ -989,7 +989,84 @@ __decorate([
     attr({ converter: nullableNumberConverter })
 ], ListboxElement.prototype, "size", void 0);
 
-class Listbox extends ListboxElement {}
-__decorate([attr, __metadata("design:type", String)], Listbox.prototype, "appearance", void 0);
+/**
+ * String values for use with KeyboardEvent.key
+ */
+const keyArrowLeft = "ArrowLeft";
+const keyArrowRight = "ArrowRight";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Listbox extends ListboxElement {
+  orientationChanged() {
+    if (this.orientation === "horizontal") {
+      this.addEventListener("keydown", this.#horizontalKeydownHandler);
+    } else {
+      this.removeEventListener("keydown", this.#horizontalKeydownHandler);
+    }
+  }
+  /**
+   * Handles `keydown` actions for horizontal listbox navigation and typeahead.
+   *
+   * @internal
+   */
+  #horizontalKeydownHandler(e) {
+    if (this.disabled) {
+      return true;
+    }
+    const key = e.key;
+    switch (key) {
+      case keyArrowRight: {
+        if (!e.shiftKey) {
+          e.preventDefault();
+          this.selectNextOption();
+        }
+        break;
+      }
+      case keyArrowLeft: {
+        if (!e.shiftKey) {
+          e.preventDefault();
+          this.selectPreviousOption();
+        }
+        break;
+      }
+    }
+  }
+  slottedOptionsChanged(prev, next) {
+    super.slottedOptionsChanged(prev, next);
+    this.#disableSlottedChildren();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if (name === "disabled") {
+      this.#disableSlottedChildren();
+    }
+  }
+  #disableSlottedChildren() {
+    this.options.forEach((optionElement) => {
+      if (!optionElement.disabled) {
+        optionElement.disabled = this.disabled;
+      }
+    });
+  }
+}
+__decorateClass([
+  attr
+], Listbox.prototype, "appearance", 2);
+__decorateClass([
+  attr
+], Listbox.prototype, "orientation", 2);
+__decorateClass([
+  attr
+], Listbox.prototype, "shape", 2);
 
-export { DelegatesARIAListbox as D, Listbox$1 as L, Listbox as a, ListboxElement as b };
+export { DelegatesARIAListbox as D, ListboxElement as L, Listbox as a, Listbox$1 as b };

package/shared/patterns/form-elements/form-elements.d.ts

@@ -33,10 +33,10 @@ export declare function formElements<T extends {
         [x: string]: any;
         label?: string | undefined;
         userValid: boolean;
-        "__#10090@#blurred": boolean;
+        "__#2@#blurred": boolean;
         readonly errorValidationMessage: any;
         connectedCallback(): void;
-        "__#10090@#handleInvalidEvent": () => void;
+        "__#2@#handleInvalidEvent": () => void;
         disconnectedCallback(): void;
         validate: () => void;
     };
@@ -49,8 +49,8 @@ export declare function errorText<T extends {
     new (...args: any[]): {
         [x: string]: any;
         errorText?: string | undefined;
-        "__#10091@#shouldValidate": boolean;
-        "__#10091@#prevSuccessText": string;
+        "__#3@#shouldValidate": boolean;
+        "__#3@#prevSuccessText": string;
         errorTextChanged(_: string, newmsg: string | undefined): void;
     };
 } & T;

package/shared/radio.js

@@ -1,6 +1,6 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata } from './index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
 import { C as CheckableFormAssociated } from './form-associated.js';
-import { e as keySpace } from './key-codes.js';
+import { a as keySpace } from './key-codes.js';
 
 class _Radio extends FoundationElement {
 }
@@ -28,7 +28,7 @@ class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
  *
  * @public
  */
-class Radio$1 extends FormAssociatedRadio {
+let Radio$1 = class Radio extends FormAssociatedRadio {
     constructor() {
         super();
         /**
@@ -110,7 +110,7 @@ class Radio$1 extends FormAssociatedRadio {
             this.checked = true;
         }
     }
-}
+};
 __decorate([
     attr({ attribute: "readonly", mode: "boolean" })
 ], Radio$1.prototype, "readOnly", void 0);
@@ -121,8 +121,24 @@ __decorate([
     observable
 ], Radio$1.prototype, "defaultSlottedNodes", void 0);
 
-class Radio extends Radio$1 {}
-__decorate([attr, __metadata("design:type", String)], Radio.prototype, "label", void 0);
-__decorate([attr, __metadata("design:type", String)], Radio.prototype, "connotation", void 0);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Radio extends Radio$1 {
+}
+__decorateClass([
+  attr
+], Radio.prototype, "label", 2);
+__decorateClass([
+  attr
+], Radio.prototype, "connotation", 2);
 
 export { Radio as R };

package/shared/repeat.js

@@ -1,4 +1,4 @@
-import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, i as HTMLView } from './index.js';
+import { e as emptyArray, O as Observable, S as SubscriberSet, D as DOM, H as HTMLDirective, f as HTMLView } from './index.js';
 
 /** @internal */
 function newSplice(index, removed, addedCount) {

package/shared/text-anchor.js

@@ -1,14 +1,31 @@
-import { _ as __decorate, a as attr, b as __metadata } from './index.js';
-import { b as AffixIcon } from './affix.js';
+import { A as AffixIcon } from './affix.js';
 import { A as Anchor } from './anchor.js';
 import { a as applyMixins } from './apply-mixins.js';
+import { a as attr } from './index.js';
 
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
 class TextAnchor extends Anchor {
+  /**
+   * Allows subclasses to provide a body template that will be rendered inside the anchor.
+   * @internal
+   */
   getBodyTemplate() {
-    return undefined;
+    return void 0;
   }
 }
-__decorate([attr, __metadata("design:type", String)], TextAnchor.prototype, "text", void 0);
+__decorateClass([
+  attr
+], TextAnchor.prototype, "text", 2);
 applyMixins(TextAnchor, AffixIcon);
 
 export { TextAnchor as T };

package/shared/text-anchor.template.js

@@ -4,52 +4,49 @@ import { h as html } from './index.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const getClasses = ({
-  text,
-  icon
-}) => classNames('control', ['icon-only', !text && !!icon]);
-const textAnchorTemplate = context => {
+const getClasses = ({ text, icon }) => classNames(
+  "control",
+  ["icon-only", !text && !!icon]
+);
+const textAnchorTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   const focusTemplate = focusTemplateFactory(context);
   return 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-controls="${x => x.ariaControls}"
-        aria-current="${x => x.ariaCurrent}"
-        aria-describedby="${x => x.ariaDescribedby}"
-        aria-details="${x => x.ariaDetails}"
-        aria-disabled="${x => x.ariaDisabled}"
-        aria-errormessage="${x => x.ariaErrormessage}"
-        aria-expanded="${x => x.ariaExpanded}"
-        aria-flowto="${x => x.ariaFlowto}"
-        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-labelledby="${x => x.ariaLabelledby}"
-        aria-live="${x => x.ariaLive}"
-        aria-owns="${x => x.ariaOwns}"
-        aria-relevant="${x => x.ariaRelevant}"
-        aria-roledescription="${x => x.ariaRoledescription}"
-        ${ref('control')}
+        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-controls="${(x) => x.ariaControls}"
+        aria-current="${(x) => x.ariaCurrent}"
+        aria-describedby="${(x) => x.ariaDescribedby}"
+        aria-details="${(x) => x.ariaDetails}"
+        aria-disabled="${(x) => x.ariaDisabled}"
+        aria-errormessage="${(x) => x.ariaErrormessage}"
+        aria-expanded="${(x) => x.ariaExpanded}"
+        aria-flowto="${(x) => x.ariaFlowto}"
+        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-labelledby="${(x) => x.ariaLabelledby}"
+        aria-live="${(x) => x.ariaLive}"
+        aria-owns="${(x) => x.ariaOwns}"
+        aria-relevant="${(x) => x.ariaRelevant}"
+        aria-roledescription="${(x) => x.ariaRoledescription}"
+        ${ref("control")}
     >
       ${() => focusTemplate}
-      ${x => affixIconTemplate(x.icon)}
-      ${x => x.text}
-			${x => {
-    var _a, _b;
-    return (_b = (_a = x.getBodyTemplate) === null || _a === void 0 ? void 0 : _a.call(x)) !== null && _b !== void 0 ? _b : '';
-  }}
+      ${(x) => affixIconTemplate(x.icon)}
+      ${(x) => x.text}
+			${(x) => x.getBodyTemplate?.() ?? ""}
     </a>
 `;
 };