@vonage/vivid 3.32.0 → 3.35.0

package/shared/definition8.js

@@ -1,30 +1,65 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { a as attr, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition24.js';
+import { f as focusRegistries } from './definition55.js';
+import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
+import { t as textAnchorTemplate } from './text-anchor.template.js';
+import { I as Icon } from './icon.js';
+import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-class Elevation extends FoundationElement {}
-__decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
-__decorate([attr({
-  attribute: 'no-shadow',
-  mode: 'boolean'
-}), __metadata("design:type", Boolean)], Elevation.prototype, "noShadow", void 0);
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 
-var css_248z = ":host {\n  display: contents;\n}\n\n.control {\n  display: contents;\n}\n.control.dp-0 {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-4 {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n  --_elevation-fill: var(--vvd-color-surface-16dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n  --_elevation-fill: var(--vvd-color-surface-2dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n  position: relative;\n  isolation: isolate;\n}\n.control ::slotted(*)::before {\n  position: absolute;\n  z-index: -1;\n  background: var(--_elevation-fill);\n  block-size: 100%;\n  border-radius: inherit;\n  content: \"\";\n  filter: var(--_elevation-shadow);\n  inline-size: 100%;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  transition: background-color 0.15s linear, filter 0.15s linear;\n}\n.control.no-shadow ::slotted(*)::before {\n  filter: none;\n}";
+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 BreadcrumbItem extends BreadcrumbItem$1 {
+  constructor() {
+    super();
+  }
+}
+__decorateClass([
+  attr
+], BreadcrumbItem.prototype, "text", 2);
 
-const getClasses = ({
-  dp,
-  noShadow
-}) => classNames('control', [`dp-${dp}`, Boolean(dp)], ['no-shadow', Boolean(noShadow)]);
-const elevationTemplate = () => html`
-        <div class="${getClasses}" part="base">
-			<slot></slot>
-		</div>`;
+const getClasses = (_) => classNames("base");
+const BreadcrumbItemTemplate = (context, definition) => {
+  const iconTag = context.tagFor(Icon);
+  return html`
+	<div role="listitem" class="${getClasses}">
+		${when(
+    (x) => x.text && !x.href,
+    html`${(x) => x.text}`
+  )}
 
-const elevationDefinition = Elevation.compose({
-  baseName: 'elevation',
-  template: elevationTemplate,
-  styles: css_248z
+		${when(
+    (x) => x.text && x.href && x.href.length > 0,
+    html`${textAnchorTemplate(context)}`
+  )}
+
+		${when(
+    (x) => x.separator,
+    html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
+  )}
+	</div>`;
+};
+
+const breadcrumbItemDefinition = BreadcrumbItem.compose({
+  baseName: "breadcrumb-item",
+  template: BreadcrumbItemTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-const elevationRegistries = [elevationDefinition()];
-const registerElevation = registerFactory(elevationRegistries);
+const breadcrumbItemRegistries = [breadcrumbItemDefinition(), ...iconRegistries, ...focusRegistries];
+const registerBreadcrumbItem = registerFactory(breadcrumbItemRegistries);
 
-export { Elevation as E, elevationRegistries as e, registerElevation as r };
+export { breadcrumbItemRegistries as a, breadcrumbItemDefinition as b, registerBreadcrumbItem as r };

package/shared/definition9.js

@@ -1,73 +1,99 @@
-import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { B as BaseProgress } from './base-progress.js';
-import { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
+import { F as FoundationElement, _ as __decorate, o as observable, h as html, r as registerFactory } from './index.js';
+import { e as elements } from './node-observation.js';
+import { s as slotted } from './slotted.js';
+import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n.base {\n  align-items: center;\n  block-size: var(--_size);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\n  outline: none;\n}\n.base.connotation-cta {\n  /* @cssprop [--vvd-progress-ring-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-progress-ring-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500));\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-progress-ring-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500));\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  /* @cssprop [--vvd-progress-ring-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text));\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.size--6 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.size--5 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n.base.size--4 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.size--3 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.size--2 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size--1 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 4));\n}\n.base.size-1 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 4));\n}\n.base.size-2 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-3 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 12));\n}\n.base.size-4 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.base.size-5 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n}\n.base:not(.size--6, .size--5, .size--4, .size--3, .size--2, .size--1, .size-1, .size-2, .size-3, .size-4, .size-5) {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 1px;\n}\n\n.determinate {\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 1px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 1px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
+/**
+ * A Breadcrumb Custom HTML Element.
+ * @slot - The default slot for the breadcrumb items
+ * @csspart list - The element wrapping the slotted items
+ *
+ * @public
+ */
+let Breadcrumb$1 = class Breadcrumb extends FoundationElement {
+    slottedBreadcrumbItemsChanged() {
+        if (this.$fastController.isConnected) {
+            if (this.slottedBreadcrumbItems === undefined ||
+                this.slottedBreadcrumbItems.length === 0) {
+                return;
+            }
+            const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
+            this.slottedBreadcrumbItems.forEach((item) => {
+                const itemIsLastNode = item === lastNode;
+                this.setItemSeparator(item, itemIsLastNode);
+                this.setAriaCurrent(item, itemIsLastNode);
+            });
+        }
+    }
+    setItemSeparator(item, isLastNode) {
+        if (item instanceof BreadcrumbItem$1) {
+            item.separator = !isLastNode;
+        }
+    }
+    /**
+     * Finds href on childnodes in the light DOM or shadow DOM.
+     * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
+     */
+    findChildWithHref(node) {
+        var _a, _b;
+        if (node.childElementCount > 0) {
+            return node.querySelector("a[href]");
+        }
+        else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
+            return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
+        }
+        else
+            return null;
+    }
+    /**
+     *  Sets ARIA Current for the current node
+     * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
+     * otherwise apply aria-current to the host element, with an href
+     */
+    setAriaCurrent(item, isLastNode) {
+        const childNodeWithHref = this.findChildWithHref(item);
+        if (childNodeWithHref === null &&
+            item.hasAttribute("href") &&
+            item instanceof BreadcrumbItem$1) {
+            isLastNode
+                ? item.setAttribute("aria-current", "page")
+                : item.removeAttribute("aria-current");
+        }
+        else if (childNodeWithHref !== null) {
+            isLastNode
+                ? childNodeWithHref.setAttribute("aria-current", "page")
+                : childNodeWithHref.removeAttribute("aria-current");
+        }
+    }
+};
+__decorate([
+    observable
+], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
 
-class ProgressRing extends BaseProgress {}
-__decorate([attr, __metadata("design:type", String)], ProgressRing.prototype, "connotation", void 0);
-__decorate([attr, __metadata("design:type", Number)], ProgressRing.prototype, "size", void 0);
-
-const getClasses = ({
-  connotation,
-  size,
-  paused
-}) => classNames('base', ['disabled', !!paused], [`connotation-${connotation}`, !!connotation], [`size-${size}`, !!size]);
-const progressSegments = 44;
-const ProgressRingTemplate = _ => html`
-<div
-        role="progressbar"
-        aria-valuenow="${x => x.value}"
-        aria-valuemin="${x => x.min}"
-        aria-valuemax="${x => x.max}"
-        class="${x => x.paused ? 'paused' : ''} ${getClasses}"
-    >
-        ${when(x => typeof x.value === 'number', html`
-                <svg
-                    class="progress"
-                    viewBox="0 0 16 16"
-                >
-                    <circle
-                        class="background"
-                        cx="8px"
-                        cy="8px"
-                        r="7px"
-                    ></circle>
-                    <circle
-                        class="determinate"
-                        style="stroke-dasharray: ${x => progressSegments * x.percentComplete / 100}px ${progressSegments}px"
-                        cx="8px"
-                        cy="8px"
-                        r="7px"
-                    ></circle>
-                </svg>
-            `)}
-        ${when(x => typeof x.value !== 'number', html`
-            <svg class="progress" viewBox="0 0 16 16">
-              <circle
-                class="background"
-                cx="8px"
-                cy="8px"
-                r="7px"
-              ></circle>
-              <circle
-                class="indeterminate-indicator-1"
-                cx="8px"
-                cy="8px"
-                r="7px"
-              ></circle>
-            </svg>
-            `)}
+const breadcrumbTemplate = () => html`
+	<nav aria-label="breadcrumbs" class="base">
+    <div role="list" class="list">
+      <slot
+        ${slotted({
+  property: "slottedBreadcrumbItems",
+  filter: elements()
+})}
+      ></slot>
     </div>
+	</nav>
 `;
 
-const progressRingDefinition = ProgressRing.compose({
-  baseName: 'progress-ring',
-  template: ProgressRingTemplate,
-  styles: css_248z
+const styles = ".list {\n  display: flex;\n}";
+
+class Breadcrumb extends Breadcrumb$1 {
+}
+
+const breadcrumbDefinition = Breadcrumb.compose({
+  baseName: "breadcrumb",
+  template: breadcrumbTemplate,
+  styles
 });
-const progressRingRegistries = [progressRingDefinition()];
-const registerProgressRing = registerFactory(progressRingRegistries);
+const breadcrumbRegistries = [breadcrumbDefinition()];
+const registerBreadcrumb = registerFactory(breadcrumbRegistries);
 
-export { ProgressRing as P, progressRingDefinition as a, progressRingRegistries as p, registerProgressRing as r };
+export { breadcrumbRegistries as a, breadcrumbDefinition as b, registerBreadcrumb as r };

package/shared/focus.js

@@ -1,5 +1,6 @@
 import { F as FoundationElement } from './index.js';
 
-class Focus extends FoundationElement {}
+class Focus extends FoundationElement {
+}
 
 export { Focus as F };

package/shared/focus2.js

@@ -1,7 +1,7 @@
 import { F as Focus } from './focus.js';
 import { h as html } from './index.js';
 
-const focusTemplateFactory = context => {
+const focusTemplateFactory = (context) => {
   const focusTag = context.tagFor(Focus);
   return html`<${focusTag} class="focus-indicator"></${focusTag}>`;
 };

package/shared/form-associated.js

@@ -1,5 +1,5 @@
-import { a as attr, o as observable, g as booleanConverter, e as emptyArray, D as DOM } from './index.js';
-import { d as keyEnter } from './key-codes.js';
+import { a as attr, o as observable, e as emptyArray, D as DOM, c as booleanConverter } from './index.js';
+import { k as keyEnter } from './key-codes.js';
 
 const proxySlotName = "form-associated-proxy";
 const ElementInternalsKey = "ElementInternals";

package/shared/icon.js

@@ -1,5 +1,5 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o as observable, v as volatile } from './index.js';
 import { _ as _curry1, a as _curry2, b as _has } from './_has.js';
+import { F as FoundationElement, a as attr, o as observable, v as volatile } from './index.js';
 
 function _arity(n, fn) {
   /* eslint-disable no-unused-vars */
@@ -92,7 +92,7 @@ var identity =
 /*#__PURE__*/
 _curry1(_identity);
 
-var identity$1 = identity;
+const identity$1 = identity;
 
 /**
  * Creates a new function that, when invoked, caches the result of calling `fn`
@@ -140,7 +140,10 @@ _curry2(function memoizeWith(mFn, fn) {
   });
 });
 
-var memoizeWith$1 = memoizeWith;
+const memoizeWith$1 = memoizeWith;
+
+const ICONS_BASE_URL = "https://icon.resources.vonage.com";
+const ICONS_VERSION = "4.3.0";
 
 const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
     <g>
@@ -155,59 +158,77 @@ const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
     </g>
 </svg>`;
 
-const BASE_URL = 'https://icon.resources.vonage.com';
-const ICON_SET_VERSION = '4.2.3';
+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;
+};
 const PLACEHOLDER_DELAY = 500;
-const PLACEHOLDER_TIMEOUT = 2000;
-const baseUrlTemplate = (resource, version) => [BASE_URL, `v${version}`, resource].join('/');
-const assertIsValidResponse = ({
-  ok,
-  headers
-}) => {
-  if (!ok || headers.get('content-type') !== 'image/svg+xml') {
-    throw new Error('Something went wrong');
+const PLACEHOLDER_TIMEOUT = 2e3;
+const baseUrlTemplate = (resource, version) => [ICONS_BASE_URL, `v${version}`, resource].join("/");
+const assertIsValidResponse = ({ ok, headers }) => {
+  if (!ok || headers.get("content-type") !== "image/svg+xml") {
+    throw new Error("Something went wrong");
   }
 };
-const extractSvg = response => {
+const extractSvg = (response) => {
   assertIsValidResponse(response);
   return response.text();
 };
-const loadSvg = iconId => fetch(baseUrlTemplate([iconId, 'svg'].join('.'), ICON_SET_VERSION)).then(extractSvg);
-const resolveIcon = memoizeWith$1(identity$1, (iconId = '') => iconId.trim() ? loadSvg(iconId) : Promise.resolve(''));
+const loadSvg = (iconId) => fetch(baseUrlTemplate([iconId, "svg"].join("."), ICONS_VERSION)).then(extractSvg);
+const resolveIcon = memoizeWith$1(identity$1, (iconId = "") => iconId.trim() ? loadSvg(iconId) : Promise.resolve(""));
 class Icon extends FoundationElement {
   constructor() {
     super(...arguments);
     this.iconLoaded = false;
   }
   get iconUrl() {
-    return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICON_SET_VERSION);
+    return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICONS_VERSION);
   }
   async nameChanged() {
-    this._svg = undefined;
+    this._svg = void 0;
     this.iconLoaded = false;
     let timeout = setTimeout(() => {
       this._svg = PLACEHOLDER_ICON;
       timeout = setTimeout(() => {
         if (this._svg === PLACEHOLDER_ICON) {
-          this._svg = undefined;
+          this._svg = void 0;
         }
       }, PLACEHOLDER_TIMEOUT);
     }, PLACEHOLDER_DELAY);
-    await resolveIcon(this.name).then(svg => {
+    await resolveIcon(this.name).then((svg) => {
       this._svg = svg;
     }).catch(() => {
-      this._svg = undefined;
+      this._svg = void 0;
     }).finally(() => {
       clearTimeout(timeout);
       this.iconLoaded = true;
     });
   }
 }
-__decorate([attr, __metadata("design:type", String)], Icon.prototype, "connotation", void 0);
-__decorate([attr, __metadata("design:type", Number)], Icon.prototype, "size", void 0);
-__decorate([observable, __metadata("design:type", String)], Icon.prototype, "_svg", void 0);
-__decorate([observable, __metadata("design:type", Object)], Icon.prototype, "iconLoaded", void 0);
-__decorate([attr, __metadata("design:type", String)], Icon.prototype, "name", void 0);
-__decorate([volatile, __metadata("design:type", Object), __metadata("design:paramtypes", [])], Icon.prototype, "iconUrl", null);
+__decorateClass([
+  attr
+], Icon.prototype, "connotation", 2);
+__decorateClass([
+  attr
+], Icon.prototype, "size", 2);
+__decorateClass([
+  observable
+], Icon.prototype, "_svg", 2);
+__decorateClass([
+  observable
+], Icon.prototype, "iconLoaded", 2);
+__decorateClass([
+  attr
+], Icon.prototype, "name", 2);
+__decorateClass([
+  volatile
+], Icon.prototype, "iconUrl", 1);
 
 export { Icon as I };

package/shared/index.js

@@ -2533,7 +2533,7 @@ class CSSDirective {
     }
 }
 
-/******************************************************************************
+/*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -2547,35 +2547,15 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise */
+
 
 function __decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
-function __metadata(metadataKey, metadataValue) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
-}
-
-function __classPrivateFieldGet(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-}
-
-function __classPrivateFieldSet(receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
+}
 
 /**
  * Big thanks to https://github.com/fkleuver and the https://github.com/aurelia/aurelia project
@@ -5055,8 +5035,8 @@ class ElementDefinitionEntry {
 }
 /* eslint-enable @typescript-eslint/no-non-null-assertion */
 
-const defaultPrefix = 'vwc';
+const defaultPrefix = "vwc";
 const designSystem = DesignSystem.getOrCreate();
-const registerFactory = registries => (prefix = defaultPrefix) => designSystem.withPrefix(prefix).register(...registries);
+const registerFactory = (registries) => (prefix = defaultPrefix) => designSystem.withPrefix(prefix).register(...registries);
 
-export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, HTMLDirective as H, Observable as O, SubscriberSet as S, __decorate as _, attr as a, __metadata as b, AttributeConfiguration as c, __classPrivateFieldGet as d, emptyArray as e, __classPrivateFieldSet as f, booleanConverter as g, html as h, HTMLView as i, designSystem as j, nullableNumberConverter as n, observable as o, registerFactory as r, volatile as v };
+export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, HTMLDirective as H, Observable as O, SubscriberSet as S, __decorate as _, attr as a, AttributeConfiguration as b, booleanConverter as c, designSystem as d, emptyArray as e, HTMLView as f, html as h, nullableNumberConverter as n, observable as o, registerFactory as r, volatile as v };