@vonage/vivid 4.14.0 → 4.14.2

package/shared/definition38.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const baseProgress = require('./base-progress.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -24,16 +24,16 @@ class Progress extends baseProgress.BaseProgress {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], Progress.prototype, "ariaLabel");
 __decorateClass([
-  defineVividComponent.attr()
+  vividElement.attr()
 ], Progress.prototype, "shape");
 __decorateClass([
-  defineVividComponent.attr()
+  vividElement.attr()
 ], Progress.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Progress.prototype, "reverse");
 
 const getClasses = ({ connotation, shape, reverse, paused }) => classNames.classNames(
@@ -44,18 +44,18 @@ const getClasses = ({ connotation, shape, reverse, paused }) => classNames.class
   ["paused", Boolean(paused)]
 );
 function determinate() {
-  return defineVividComponent.html` <span
+  return vividElement.html` <span
 		class="determinate"
 		style="width: ${(x) => x.percentComplete}%"
 	></span>`;
 }
 function indeterminate() {
-  return defineVividComponent.html` <span class="indeterminate" name="indeterminate">
+  return vividElement.html` <span class="indeterminate" name="indeterminate">
 		<span class="indicator-1"></span>
 		<span class="indicator-2"></span>
 	</span>`;
 }
-const ProgressTemplate = defineVividComponent.html`<template
+const ProgressTemplate = vividElement.html`<template
 	role="${(x) => x.ariaLabel ? "presentation" : null}"
 >
 	<div
@@ -73,7 +73,7 @@ const ProgressTemplate = defineVividComponent.html`<template
 	</div>
 </template>`;
 
-const progressDefinition = defineVividComponent.defineVividComponent(
+const progressDefinition = vividElement.defineVividComponent(
   "progress",
   Progress,
   ProgressTemplate,
@@ -82,7 +82,7 @@ const progressDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerProgress = defineVividComponent.createRegisterFunction(progressDefinition);
+const registerProgress = vividElement.createRegisterFunction(progressDefinition);
 
 exports.progressDefinition = progressDefinition;
 exports.registerProgress = registerProgress;

package/shared/definition38.js

@@ -1,4 +1,4 @@
-import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { B as BaseProgress } from './base-progress.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';

package/shared/definition39.cjs

@@ -1,9 +1,8 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const definition = require('./definition40.cjs');
 const keyCodes = require('./key-codes.cjs');
-const vividElement = require('./vivid-element.cjs');
 const aria = require('./aria.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
@@ -227,29 +226,29 @@ class RadioGroup extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], RadioGroup.prototype, "label");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], RadioGroup.prototype, "readOnly");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "disabled", mode: "boolean" })
+  vividElement.attr({ attribute: "disabled", mode: "boolean" })
 ], RadioGroup.prototype, "disabled");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], RadioGroup.prototype, "name");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], RadioGroup.prototype, "value");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], RadioGroup.prototype, "orientation");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], RadioGroup.prototype, "slottedRadioButtons");
 
 const RadioGroupTemplate = (context) => {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<template
 			role="radiogroup"
 			aria-disabled="${(x) => x.disabled}"
@@ -260,7 +259,7 @@ const RadioGroupTemplate = (context) => {
 		>
 			${when.when(
     (x) => x.label,
-    defineVividComponent.html`<label>${(x) => x.label}</label>`
+    vividElement.html`<label>${(x) => x.label}</label>`
   )}
 
 			<div
@@ -277,7 +276,7 @@ const RadioGroupTemplate = (context) => {
 	`;
 };
 
-const radioGroupDefinition = defineVividComponent.defineVividComponent(
+const radioGroupDefinition = vividElement.defineVividComponent(
   "radio-group",
   RadioGroup,
   RadioGroupTemplate,
@@ -286,7 +285,7 @@ const radioGroupDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerRadioGroup = defineVividComponent.createRegisterFunction(radioGroupDefinition);
+const registerRadioGroup = vividElement.createRegisterFunction(radioGroupDefinition);
 
 exports.radioGroupDefinition = radioGroupDefinition;
 exports.registerRadioGroup = registerRadioGroup;

package/shared/definition39.js

@@ -1,7 +1,6 @@
-import { a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { R as Radio, r as radioDefinition } from './definition40.js';
 import { i as keyArrowRight, h as keyArrowLeft, e as keyArrowUp, f as keyArrowDown, k as keyEnter } from './key-codes.js';
-import { V as VividElement } from './vivid-element.js';
 import { O as Orientation } from './aria.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { w as when } from './when.js';

package/shared/definition4.cjs

@@ -2,13 +2,12 @@
 
 const definition$1 = require('./definition11.cjs');
 const definition = require('./definition62.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const definition$2 = require('./definition27.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const index = require('./index.cjs');
-const vividElement = require('./vivid-element.cjs');
 const localized = require('./localized.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -106,37 +105,37 @@ class Alert extends vividElement.VividElement {
   #onTransitionEnd;
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "dismiss-button-aria-label" })
+  vividElement.attr({ attribute: "dismiss-button-aria-label" })
 ], Alert.prototype, "dismissButtonAriaLabel");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Alert.prototype, "removable");
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView" })
+  vividElement.attr({ mode: "fromView" })
 ], Alert.prototype, "placement");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Alert.prototype, "headline");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Alert.prototype, "text");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Alert.prototype, "icon");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "fromView",
-    converter: defineVividComponent.nullableNumberConverter
+    converter: vividElement.nullableNumberConverter
   })
 ], Alert.prototype, "timeoutms");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Alert.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Alert.prototype, "strategy");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Alert.prototype, "open");
 applyMixins.applyMixins(Alert, affix.AffixIcon);
 applyMixins.applyMixins(Alert, localized.Localized);
@@ -150,10 +149,10 @@ const getControlClasses = ({ open, placement, strategy }) => classNames.classNam
 );
 function renderIcon(context) {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return defineVividComponent.html`${(x) => affixIconTemplate(x.conditionedIcon, affix.IconWrapper.Slot)}`;
+  return vividElement.html`${(x) => affixIconTemplate(x.conditionedIcon, affix.IconWrapper.Slot)}`;
 }
 function renderDismissButton(buttonTag) {
-  return defineVividComponent.html`
+  return vividElement.html`
 		<${buttonTag}
 			aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.alert.dismissButtonLabel}"
 			size="condensed"
@@ -165,7 +164,7 @@ function renderDismissButton(buttonTag) {
 const AlertTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
   const buttonTag = context.tagFor(definition$1.Button);
-  return defineVividComponent.html`
+  return vividElement.html`
 	<${elevationTag} class="elevation" dp='8' exportparts="vvd-theme-alternate">
 		<div
 			class="${getControlClasses}"
@@ -177,9 +176,9 @@ const AlertTemplate = (context) => {
 				<div class="alert-text">
 					${when.when(
     (x) => x.headline,
-    defineVividComponent.html`<header class="headline">${(x) => x.headline}</header>`
+    vividElement.html`<header class="headline">${(x) => x.headline}</header>`
   )}
-					${when.when((x) => x.text, defineVividComponent.html`<div class="main-text">${(x) => x.text}</div>`)}
+					${when.when((x) => x.text, vividElement.html`<div class="main-text">${(x) => x.text}</div>`)}
 					<slot name="main"></slot>
 				</div>
 				<slot class="action-items" name="action-items"></slot>
@@ -190,7 +189,7 @@ const AlertTemplate = (context) => {
 	`;
 };
 
-const alertDefinition = defineVividComponent.defineVividComponent(
+const alertDefinition = vividElement.defineVividComponent(
   "alert",
   Alert,
   AlertTemplate,
@@ -199,7 +198,7 @@ const alertDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerAlert = defineVividComponent.createRegisterFunction(alertDefinition);
+const registerAlert = vividElement.createRegisterFunction(alertDefinition);
 
 exports.alertDefinition = alertDefinition;
 exports.registerAlert = registerAlert;

package/shared/definition4.js

@@ -1,12 +1,11 @@
 import { B as Button, b as buttonDefinition } from './definition11.js';
 import { E as Elevation, e as elevationDefinition } from './definition62.js';
-import { a as attr, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, n as nullableNumberConverter, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { i as iconDefinition } from './definition27.js';
 import { C as Connotation } from './enums.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { V as VividElement } from './vivid-element.js';
 import { L as Localized } from './localized.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';

package/shared/definition40.cjs

@@ -1,8 +1,7 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
-const formAssociated = require('./form-associated.cjs');
 const vividElement = require('./vivid-element.cjs');
+const formAssociated = require('./form-associated.cjs');
 const keyCodes = require('./key-codes.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -15,7 +14,45 @@ class FormAssociatedRadio extends formAssociated.CheckableFormAssociated(_Radio)
   constructor() {
     super(...arguments);
     this.proxy = document.createElement("input");
+    this.#validateValueMissingWithSiblings = () => {
+      const siblings = this.#radioSiblings;
+      if (siblings && siblings.length > 1) {
+        const isSiblingChecked = siblings.some((x) => x.checked);
+        if (isSiblingChecked) {
+          this.setValidity({ valueMissing: false });
+        }
+      }
+    };
+    this.#syncSiblingsRequiredValidationStatus = () => {
+      if (this.elementInternals && !this.validity.valueMissing) {
+        const siblings = this.#radioSiblings;
+        if (siblings && siblings.length > 1) {
+          siblings.forEach((x) => {
+            x.elementInternals.setValidity({ valueMissing: false });
+          });
+        }
+      }
+    };
+    this.validate = (anchor) => {
+      super.validate(anchor);
+      if (this.validity.valueMissing) {
+        this.#validateValueMissingWithSiblings();
+      } else {
+        this.#syncSiblingsRequiredValidationStatus();
+      }
+    };
   }
+  get #radioSiblings() {
+    const siblings = this.parentElement?.querySelectorAll(
+      `${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`
+    );
+    if (siblings) {
+      return Array.from(siblings);
+    }
+    return [];
+  }
+  #validateValueMissingWithSiblings;
+  #syncSiblingsRequiredValidationStatus;
 }
 
 var __defProp = Object.defineProperty;
@@ -53,6 +90,7 @@ class Radio extends FormAssociatedRadio {
       return true;
     };
     this.proxy.setAttribute("type", "radio");
+    this.proxy.setAttribute("name", this.name);
   }
   // Map to proxy element
   /**
@@ -74,12 +112,22 @@ class Radio extends FormAssociatedRadio {
       }
     }
   }
+  /**
+   * @internal
+   */
+  nameChanged(previous, next) {
+    if (super.nameChanged) {
+      super.nameChanged(previous, next);
+    }
+    next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
+    vividElement.DOM.queueUpdate(this.validate);
+  }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    this.validate();
+    vividElement.DOM.queueUpdate(this.validate);
     if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
@@ -110,22 +158,22 @@ class Radio extends FormAssociatedRadio {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], Radio.prototype, "ariaLabel");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Radio.prototype, "label");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Radio.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], Radio.prototype, "readOnly");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.attr
 ], Radio.prototype, "name");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Radio.prototype, "defaultSlottedNodes");
 
 const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.classNames(
@@ -135,7 +183,7 @@ const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.
   ["readonly", Boolean(readOnly)],
   ["disabled", Boolean(disabled)]
 );
-const RadioTemplate = defineVividComponent.html`<template
+const RadioTemplate = vividElement.html`<template
 	role="${(x) => x.ariaLabel ? "presentation" : null}"
 >
 	<div
@@ -151,12 +199,12 @@ const RadioTemplate = defineVividComponent.html`<template
 		<div class="control"></div>
 		${when.when(
   (x) => x.label,
-  defineVividComponent.html`<label class="label">${(x) => x.label}</label>`
+  vividElement.html`<label class="label">${(x) => x.label}</label>`
 )}
 	</div>
 </template>`;
 
-const radioDefinition = defineVividComponent.defineVividComponent(
+const radioDefinition = vividElement.defineVividComponent(
   "radio",
   Radio,
   RadioTemplate,
@@ -165,7 +213,7 @@ const radioDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerRadio = defineVividComponent.createRegisterFunction(radioDefinition);
+const registerRadio = vividElement.createRegisterFunction(radioDefinition);
 
 exports.Radio = Radio;
 exports.radioDefinition = radioDefinition;

package/shared/definition40.js

@@ -1,6 +1,5 @@
-import { a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, D as DOM, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { C as CheckableFormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { a as keySpace } from './key-codes.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
@@ -13,7 +12,45 @@ class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
   constructor() {
     super(...arguments);
     this.proxy = document.createElement("input");
+    this.#validateValueMissingWithSiblings = () => {
+      const siblings = this.#radioSiblings;
+      if (siblings && siblings.length > 1) {
+        const isSiblingChecked = siblings.some((x) => x.checked);
+        if (isSiblingChecked) {
+          this.setValidity({ valueMissing: false });
+        }
+      }
+    };
+    this.#syncSiblingsRequiredValidationStatus = () => {
+      if (this.elementInternals && !this.validity.valueMissing) {
+        const siblings = this.#radioSiblings;
+        if (siblings && siblings.length > 1) {
+          siblings.forEach((x) => {
+            x.elementInternals.setValidity({ valueMissing: false });
+          });
+        }
+      }
+    };
+    this.validate = (anchor) => {
+      super.validate(anchor);
+      if (this.validity.valueMissing) {
+        this.#validateValueMissingWithSiblings();
+      } else {
+        this.#syncSiblingsRequiredValidationStatus();
+      }
+    };
+  }
+  get #radioSiblings() {
+    const siblings = this.parentElement?.querySelectorAll(
+      `${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`
+    );
+    if (siblings) {
+      return Array.from(siblings);
+    }
+    return [];
   }
+  #validateValueMissingWithSiblings;
+  #syncSiblingsRequiredValidationStatus;
 }
 
 var __defProp = Object.defineProperty;
@@ -51,6 +88,7 @@ class Radio extends FormAssociatedRadio {
       return true;
     };
     this.proxy.setAttribute("type", "radio");
+    this.proxy.setAttribute("name", this.name);
   }
   // Map to proxy element
   /**
@@ -72,12 +110,22 @@ class Radio extends FormAssociatedRadio {
       }
     }
   }
+  /**
+   * @internal
+   */
+  nameChanged(previous, next) {
+    if (super.nameChanged) {
+      super.nameChanged(previous, next);
+    }
+    next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
+    DOM.queueUpdate(this.validate);
+  }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    this.validate();
+    DOM.queueUpdate(this.validate);
     if (this.parentElement.getAttribute("role") !== "radiogroup" && this.getAttribute("tabindex") === null) {
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
@@ -120,7 +168,7 @@ __decorateClass([
   attr({ attribute: "readonly", mode: "boolean" })
 ], Radio.prototype, "readOnly");
 __decorateClass([
-  observable
+  attr
 ], Radio.prototype, "name");
 __decorateClass([
   observable