@vonage/vivid 4.14.4 → 4.15.0

package/lib/combobox/combobox.d.ts

@@ -1,6 +1,6 @@
 import type { Popup } from '../popup/popup';
 import type { Appearance, Shape, Size } from '../enums';
-import { AffixIcon, type FormElement } from '../../shared/patterns';
+import { AffixIcon, type ErrorText, type FormElement, FormElementHelperText, FormElementSuccessText } from '../../shared/patterns';
 import type { ListboxOption } from '../option/option';
 import { FormAssociatedCombobox } from './combobox.form-associated';
 import { ComboboxAutocomplete } from './combobox.options';
@@ -31,5 +31,5 @@ export declare class Combobox extends FormAssociatedCombobox {
     connectedCallback(): void;
     filterOptions(): void;
 }
-export interface Combobox extends AffixIcon, FormElement {
+export interface Combobox extends AffixIcon, FormElement, FormElementHelperText, ErrorText, FormElementSuccessText, FormElement {
 }

package/package.json

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

package/shared/definition11.cjs

@@ -157,6 +157,11 @@ function renderIconOrPending(context, icon, pending, size = enums.Size.Normal) {
     return affixIconTemplate(icon, affix.IconWrapper.Slot);
   }
 }
+const getButtonType = (type) => {
+  const types = ["submit", "button", "reset"];
+  if (types.indexOf(type) > -1) return type;
+  return "submit";
+};
 const buttonContent = (context) => {
   const chevronTemplate = chevronTemplateFactory(context);
   return vividElement.html`<span class="content">
@@ -180,7 +185,7 @@ function renderButtonContent(context) {
 		formnovalidate="${(x) => x.formnovalidate}"
 		formtarget="${(x) => x.formtarget}"
 		name="${(x) => x.name}"
-		type="${(x) => x.type ?? "submit"}"
+		type="${(x) => getButtonType(x.type)}"
 		value="${(x) => x.value}"
 		aria-atomic="${(x) => x.ariaAtomic}"
 		aria-busy="${(x) => x.ariaBusy}"

package/shared/definition11.js

@@ -155,6 +155,11 @@ function renderIconOrPending(context, icon, pending, size = Size.Normal) {
     return affixIconTemplate(icon, IconWrapper.Slot);
   }
 }
+const getButtonType = (type) => {
+  const types = ["submit", "button", "reset"];
+  if (types.indexOf(type) > -1) return type;
+  return "submit";
+};
 const buttonContent = (context) => {
   const chevronTemplate = chevronTemplateFactory(context);
   return html`<span class="content">
@@ -178,7 +183,7 @@ function renderButtonContent(context) {
 		formnovalidate="${(x) => x.formnovalidate}"
 		formtarget="${(x) => x.formtarget}"
 		name="${(x) => x.name}"
-		type="${(x) => x.type ?? "submit"}"
+		type="${(x) => getButtonType(x.type)}"
 		value="${(x) => x.value}"
 		aria-atomic="${(x) => x.ariaAtomic}"
 		aria-busy="${(x) => x.ariaBusy}"

package/shared/definition16.cjs

@@ -5,7 +5,7 @@ const definition = require('./definition63.cjs');
 const definition$3 = require('./definition35.cjs');
 const textField = require('./text-field.cjs');
 const vividElement = require('./vivid-element.cjs');
-const applyMixins = require('./apply-mixins.cjs');
+const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const listbox = require('./listbox.cjs');
 const formAssociated = require('./form-associated.cjs');
 const affix = require('./affix.cjs');
@@ -19,7 +19,7 @@ const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{position:relative}.base{--_text-field-gutter-end: 8px}.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(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_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:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px}.base{--_text-field-gutter-end: 8px}.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(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_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:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
 
 class _Combobox extends listbox.Listbox {
 }
@@ -542,14 +542,22 @@ __decorateClass([
   vividElement.attr
 ], Combobox.prototype, "placeholder", 2);
 Combobox = __decorateClass([
+  formElements.errorText,
   formElements.formElements
 ], Combobox);
-applyMixins.applyMixins(Combobox, affix.AffixIcon);
+applyMixinsWithObservables.applyMixinsWithObservables(
+  Combobox,
+  affix.AffixIcon,
+  formElements.FormElementHelperText,
+  formElements.FormElementSuccessText
+);
 
 const getStateClasses = ({
   icon,
   iconSlottedContent,
   metaSlottedContent,
+  errorValidationMessage,
+  successText,
   shape,
   scale,
   disabled,
@@ -565,7 +573,9 @@ const getStateClasses = ({
   [`appearance-${appearance}`, Boolean(appearance)],
   ["no-label", !label],
   ["has-icon", !!icon || Boolean(iconSlottedContent?.length)],
-  ["has-meta", Boolean(metaSlottedContent?.length)]
+  ["has-meta", Boolean(metaSlottedContent?.length)],
+  ["error", Boolean(errorValidationMessage)],
+  ["success", !!successText]
 );
 function renderLabel() {
   return vividElement.html` <label for="control" class="label">
@@ -645,6 +655,9 @@ const comboboxTemplate = (context) => {
 					</slot>
 				</div>
 			</${popupTag}>
+					<div class="feedback-wrapper" @click="${(_, c) => c.event.stopPropagation()}">
+						${formElements.getFeedbackTemplate(context)}
+					</div>
         </template>
 		`;
 };

package/shared/definition16.js

@@ -3,13 +3,13 @@ import { P as Popup, p as popupDefinition } from './definition63.js';
 import { l as listboxOptionDefinition } from './definition35.js';
 import { s as styles$1 } from './text-field.js';
 import { D as DOM, O as Observable, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
-import { a as applyMixins } from './apply-mixins.js';
+import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { L as Listbox } from './listbox.js';
 import { F as FormAssociated } from './form-associated.js';
 import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { u as uniqueId } from './strings.js';
 import { l as limit } from './numbers.js';
-import { f as formElements } from './form-elements.js';
+import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { c as chevronTemplateFactory } from './definition11.js';
 import { r as ref } from './ref.js';
@@ -17,7 +17,7 @@ import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{position:relative}.base{--_text-field-gutter-end: 8px}.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(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_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:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px}.base{--_text-field-gutter-end: 8px}.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(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_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:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
 
 class _Combobox extends Listbox {
 }
@@ -540,14 +540,22 @@ __decorateClass([
   attr
 ], Combobox.prototype, "placeholder", 2);
 Combobox = __decorateClass([
+  errorText,
   formElements
 ], Combobox);
-applyMixins(Combobox, AffixIcon);
+applyMixinsWithObservables(
+  Combobox,
+  AffixIcon,
+  FormElementHelperText,
+  FormElementSuccessText
+);
 
 const getStateClasses = ({
   icon,
   iconSlottedContent,
   metaSlottedContent,
+  errorValidationMessage,
+  successText,
   shape,
   scale,
   disabled,
@@ -563,7 +571,9 @@ const getStateClasses = ({
   [`appearance-${appearance}`, Boolean(appearance)],
   ["no-label", !label],
   ["has-icon", !!icon || Boolean(iconSlottedContent?.length)],
-  ["has-meta", Boolean(metaSlottedContent?.length)]
+  ["has-meta", Boolean(metaSlottedContent?.length)],
+  ["error", Boolean(errorValidationMessage)],
+  ["success", !!successText]
 );
 function renderLabel() {
   return html` <label for="control" class="label">
@@ -643,6 +653,9 @@ const comboboxTemplate = (context) => {
 					</slot>
 				</div>
 			</${popupTag}>
+					<div class="feedback-wrapper" @click="${(_, c) => c.event.stopPropagation()}">
+						${getFeedbackTemplate(context)}
+					</div>
         </template>
 		`;
 };

package/shared/definition17.cjs

@@ -536,11 +536,8 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
       this.generatedHeader.columnDefinitions = this.columnDefinitions;
       this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
       this.generatedHeader.rowType = this.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : DataGridRowTypes.header;
-      if (this.firstChild !== null || this.rowsPlaceholder !== null) {
-        this.insertBefore(
-          generatedHeaderElement,
-          this.firstChild !== null ? this.firstChild : this.rowsPlaceholder
-        );
+      if (this.firstChild !== null) {
+        this.insertBefore(generatedHeaderElement, this.firstChild);
       }
       return;
     }

package/shared/definition17.js

@@ -534,11 +534,8 @@ const _DataGrid = class _DataGrid extends VividElement {
       this.generatedHeader.columnDefinitions = this.columnDefinitions;
       this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
       this.generatedHeader.rowType = this.generateHeader === GenerateHeaderOptions.sticky ? DataGridRowTypes.stickyHeader : DataGridRowTypes.header;
-      if (this.firstChild !== null || this.rowsPlaceholder !== null) {
-        this.insertBefore(
-          generatedHeaderElement,
-          this.firstChild !== null ? this.firstChild : this.rowsPlaceholder
-        );
+      if (this.firstChild !== null) {
+        this.insertBefore(generatedHeaderElement, this.firstChild);
       }
       return;
     }

package/shared/definition27.cjs

@@ -145,7 +145,7 @@ _has._curry2(function memoizeWith(mFn, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.6.3";
+const ICONS_VERSION = "4.6.4";
 
 const numberConverter = {
   toView(value) {

package/shared/definition27.js

@@ -143,7 +143,7 @@ _curry2(function memoizeWith(mFn, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.6.3";
+const ICONS_VERSION = "4.6.4";
 
 const numberConverter = {
   toView(value) {

package/shared/definition30.cjs

@@ -75,6 +75,7 @@ const NavDisclosureTemplate = (context) => {
   const iconTag = context.tagFor(definition.Icon);
   return vividElement.html`<details class="base" ${ref.ref("details")} ?open=${(x) => x.open}>
         <summary class="${getClasses}"
+			aria-label=${(x) => x.label ? x.label : "Toggle"}
             role="button"
             aria-controls="disclosure-content"
 			aria-expanded="${(x) => x.open}"

package/shared/definition30.js

@@ -73,6 +73,7 @@ const NavDisclosureTemplate = (context) => {
   const iconTag = context.tagFor(Icon);
   return html`<details class="base" ${ref("details")} ?open=${(x) => x.open}>
         <summary class="${getClasses}"
+			aria-label=${(x) => x.label ? x.label : "Toggle"}
             role="button"
             aria-controls="disclosure-content"
 			aria-expanded="${(x) => x.open}"

package/shared/definition51.cjs

@@ -95,6 +95,7 @@ class Tabs extends vividElement.VividElement {
         tab.style[gridProperty] = `${index + 1}`;
         !this.#isHorizontal() ? tab.classList.add("vertical") : tab.classList.remove("vertical");
       });
+      this.#updateTabsConnotation();
     };
     this.setTabPanels = () => {
       this.tabpanels.forEach((tabpanel, index) => {
@@ -196,7 +197,6 @@ class Tabs extends vividElement.VividElement {
       this.#handleActiveIndicatorPosition();
     }
     this.#patchIndicatorStyleTransition();
-    this.#updateTabsConnotation();
     this.#scrollToIndex(this.activeTabIndex);
   }
   #isLastTabSelectedAfterRemove;

package/shared/definition51.js

@@ -93,6 +93,7 @@ class Tabs extends VividElement {
         tab.style[gridProperty] = `${index + 1}`;
         !this.#isHorizontal() ? tab.classList.add("vertical") : tab.classList.remove("vertical");
       });
+      this.#updateTabsConnotation();
     };
     this.setTabPanels = () => {
       this.tabpanels.forEach((tabpanel, index) => {
@@ -194,7 +195,6 @@ class Tabs extends VividElement {
       this.#handleActiveIndicatorPosition();
     }
     this.#patchIndicatorStyleTransition();
-    this.#updateTabsConnotation();
     this.#scrollToIndex(this.activeTabIndex);
   }
   #isLastTabSelectedAfterRemove;

package/shared/definition63.cjs

@@ -1105,7 +1105,8 @@ function isContainingBlock(elementOrCss) {
   const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -1663,6 +1664,10 @@ const platform = {
   isRTL
 };
 
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
 // https://samthor.au/2021/observing-dom/
 function observeMove(element, onMove) {
   let io = null;
@@ -1682,12 +1687,13 @@ function observeMove(element, onMove) {
       threshold = 1;
     }
     cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
     const {
       left,
       top,
       width,
       height
-    } = element.getBoundingClientRect();
+    } = elementRectForRootMargin;
     if (!skip) {
       onMove();
     }
@@ -1720,6 +1726,16 @@ function observeMove(element, onMove) {
           refresh(false, ratio);
         }
       }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        // It's possible that even though the ratio is reported as 1, the
+        // element is not actually fully within the IntersectionObserver's root
+        // area anymore. This can happen under performance constraints. This may
+        // be a bug in the browser's IntersectionObserver implementation. To
+        // work around this, we compare the element's bounding rect now with
+        // what it was at the time we created the IntersectionObserver. If they
+        // are not equal then the element moved, so we refresh.
+        refresh();
+      }
       isFirstUpdate = false;
     }
 
@@ -1797,7 +1813,7 @@ function autoUpdate(reference, floating, update, options) {
   }
   function frameLoop() {
     const nextRefRect = getBoundingClientRect(reference);
-    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
       update();
     }
     prevRefRect = nextRefRect;

package/shared/definition63.js

@@ -1103,7 +1103,8 @@ function isContainingBlock(elementOrCss) {
   const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
+  return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -1661,6 +1662,10 @@ const platform = {
   isRTL
 };
 
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
 // https://samthor.au/2021/observing-dom/
 function observeMove(element, onMove) {
   let io = null;
@@ -1680,12 +1685,13 @@ function observeMove(element, onMove) {
       threshold = 1;
     }
     cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
     const {
       left,
       top,
       width,
       height
-    } = element.getBoundingClientRect();
+    } = elementRectForRootMargin;
     if (!skip) {
       onMove();
     }
@@ -1718,6 +1724,16 @@ function observeMove(element, onMove) {
           refresh(false, ratio);
         }
       }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        // It's possible that even though the ratio is reported as 1, the
+        // element is not actually fully within the IntersectionObserver's root
+        // area anymore. This can happen under performance constraints. This may
+        // be a bug in the browser's IntersectionObserver implementation. To
+        // work around this, we compare the element's bounding rect now with
+        // what it was at the time we created the IntersectionObserver. If they
+        // are not equal then the element moved, so we refresh.
+        refresh();
+      }
       isFirstUpdate = false;
     }
 
@@ -1795,7 +1811,7 @@ function autoUpdate(reference, floating, update, options) {
   }
   function frameLoop() {
     const nextRefRect = getBoundingClientRect(reference);
-    if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
       update();
     }
     prevRefRect = nextRefRect;

package/shared/presentationDate.cjs

@@ -6172,10 +6172,11 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     } else {
       this.#openPopupIfPossible();
       vividElement.DOM.processUpdates();
-      const tabbableDate = this.shadowRoot.querySelector(
-        `[data-date="${this._tabbableDate}"]`
-      );
-      tabbableDate.focus();
+      const tabbableDate = this._tabbableDate;
+      if (tabbableDate)
+        this.shadowRoot.querySelector(
+          `[data-date="${tabbableDate}"]`
+        ).focus();
     }
   }
   // --- Dialog header ---

package/shared/presentationDate.js

@@ -6170,10 +6170,11 @@ class DatePickerBase extends FormAssociatedDatePickerBase {
     } else {
       this.#openPopupIfPossible();
       DOM.processUpdates();
-      const tabbableDate = this.shadowRoot.querySelector(
-        `[data-date="${this._tabbableDate}"]`
-      );
-      tabbableDate.focus();
+      const tabbableDate = this._tabbableDate;
+      if (tabbableDate)
+        this.shadowRoot.querySelector(
+          `[data-date="${tabbableDate}"]`
+        ).focus();
     }
   }
   // --- Dialog header ---

package/shared/text-field2.cjs

@@ -56,7 +56,10 @@ function v4(options, buf, offset) {
         return native.randomUUID();
     }
     options = options || {};
-    const rnds = options.random || (options.rng || rng)();
+    const rnds = options.random ?? options.rng?.() ?? rng();
+    if (rnds.length < 16) {
+        throw new Error('Random bytes length must be >= 16');
+    }
     rnds[6] = (rnds[6] & 0x0f) | 0x40;
     rnds[8] = (rnds[8] & 0x3f) | 0x80;
     return unsafeStringify(rnds);

package/shared/text-field2.js

@@ -54,7 +54,10 @@ function v4(options, buf, offset) {
         return native.randomUUID();
     }
     options = options || {};
-    const rnds = options.random || (options.rng || rng)();
+    const rnds = options.random ?? options.rng?.() ?? rng();
+    if (rnds.length < 16) {
+        throw new Error('Random bytes length must be >= 16');
+    }
     rnds[6] = (rnds[6] & 0x0f) | 0x40;
     rnds[8] = (rnds[8] & 0x3f) | 0x80;
     return unsafeStringify(rnds);

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 16:43:13 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:16 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 16:43:13 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:16 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 16:43:13 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:16 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 16:43:13 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 16:43:13 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:16 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 16:43:13 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 16:43:13 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:17 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 16:43:13 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:16 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 16:43:13 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 16:43:13 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 16:43:13 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:17 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 16:43:13 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:16 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/vivid.api.json

@@ -1,7 +1,7 @@
 {
   "metadata": {
     "toolPackage": "@microsoft/api-extractor",
-    "toolVersion": "7.48.0",
+    "toolVersion": "7.50.0",
     "schemaVersion": 1011,
     "oldestForwardsCompatibleVersion": 1001,
     "tsdocConfig": {