@vonage/vivid 4.14.3 → 4.15.0

package/custom-elements.json

@@ -10,9 +10,9 @@
           "kind": "variable",
           "name": "AccordionExpandMode",
           "type": {
-            "text": "{\n\t/**\n\t * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.\n\t */\n\tsingle: 'single',\n\n\t/**\n\t * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.\n\t */\n\tmulti: 'multi',\n}"
+            "text": "{\n\t/**\n\t * Designates only a single AccordionItem can be open a time.\n\t */\n\tsingle: 'single',\n\n\t/**\n\t * Designates multiple AccordionItems can be open simultaneously.\n\t */\n\tmulti: 'multi',\n}"
           },
-          "default": "{\n\t/**\n\t * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.\n\t */\n\tsingle: 'single',\n\n\t/**\n\t * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.\n\t */\n\tmulti: 'multi',\n}",
+          "default": "{\n\t/**\n\t * Designates only a single AccordionItem can be open a time.\n\t */\n\tsingle: 'single',\n\n\t/**\n\t * Designates multiple AccordionItems can be open simultaneously.\n\t */\n\tmulti: 'multi',\n}",
           "description": "Expand mode for Accordion",
           "privacy": "public"
         },
@@ -4630,6 +4630,18 @@
             {
               "description": "Default slot.",
               "name": ""
+            },
+            {
+              "description": "Slot to add an icon to the combobox control.",
+              "name": "icon"
+            },
+            {
+              "description": "Slot to add meta content to the combobox control.",
+              "name": "meta"
+            },
+            {
+              "description": "Describes how to use the combobox. Alternative to the `helper-text` attribute.",
+              "name": "helper-text"
             }
           ],
           "members": [
@@ -16626,7 +16638,7 @@
             "text": "{\n\tsingleValue: 'single-value',\n}"
           },
           "default": "{\n\tsingleValue: 'single-value',\n}",
-          "description": "The selection modes of a @microsoft/fast-foundation#(Slider:class).",
+          "description": "The selection modes of a Slider.",
           "privacy": "public"
         },
         {

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/lib/option/option.d.ts

@@ -1,3 +1,5 @@
+import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+import { ARIAGlobalStatesAndProperties } from '../../shared/foundation/patterns/aria-global';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export declare function isListboxOption(el: Element): el is ListboxOption;
 export declare class ListboxOption extends VividElement {
@@ -31,3 +33,7 @@ export declare class DelegatesARIAListboxOption {
     ariaSelected: 'true' | 'false' | string | null;
     ariaSetSize: string | null;
 }
+export interface DelegatesARIAListboxOption extends ARIAGlobalStatesAndProperties {
+}
+export interface ListboxOption extends DelegatesARIAListboxOption, AffixIconWithTrailing {
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.14.3",
+	"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

@@ -2,10 +2,10 @@
 
 const definition = require('./definition27.cjs');
 const vividElement = require('./vivid-element.cjs');
-const keyCodes = require('./key-codes.cjs');
 const repeat = require('./repeat.cjs');
-const slotted = require('./slotted.cjs');
+const keyCodes = require('./key-codes.cjs');
 const children = require('./children.cjs');
+const slotted = require('./slotted.cjs');
 const when = require('./when.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

@@ -1,9 +1,9 @@
 import { I as Icon, i as iconDefinition } from './definition27.js';
 import { a as attr, o as observable, V as VividElement, D as DOM, O as Observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
-import { d as keyEnd, g as keyHome, j as keyPageDown, l as keyPageUp, f as keyArrowDown, e as keyArrowUp, i as keyArrowRight, h as keyArrowLeft, b as keyEscape, m as keyFunction2, k as keyEnter, a as keySpace } from './key-codes.js';
 import { R as RepeatDirective } from './repeat.js';
-import { s as slotted, e as elements } from './slotted.js';
+import { d as keyEnd, g as keyHome, j as keyPageDown, l as keyPageUp, f as keyArrowDown, e as keyArrowUp, i as keyArrowRight, h as keyArrowLeft, b as keyEscape, m as keyFunction2, k as keyEnter, a as keySpace } from './key-codes.js';
 import { c as children } from './children.js';
+import { s as slotted, e as elements } from './slotted.js';
 import { w as when } from './when.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/definition2.cjs

@@ -20,11 +20,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const AccordionExpandMode$1 = {
   /**
-   * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
+   * Designates only a single AccordionItem can be open a time.
    */
   single: "single",
   /**
-   * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
+   * Designates multiple AccordionItems can be open simultaneously.
    */
   multi: "multi"
 };

package/shared/definition2.js

@@ -18,11 +18,11 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const AccordionExpandMode$1 = {
   /**
-   * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
+   * Designates only a single AccordionItem can be open a time.
    */
   single: "single",
   /**
-   * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
+   * Designates multiple AccordionItems can be open simultaneously.
    */
   multi: "multi"
 };

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/definition29.cjs

@@ -570,9 +570,6 @@ __decorateClass([
 __decorateClass([
   vividElement.attr({ mode: "boolean" })
 ], MenuItem.prototype, "checked");
-__decorateClass([
-  vividElement.observable
-], MenuItem.prototype, "submenuRegion");
 __decorateClass([
   vividElement.observable
 ], MenuItem.prototype, "hasSubmenu");

package/shared/definition29.js

@@ -568,9 +568,6 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "boolean" })
 ], MenuItem.prototype, "checked");
-__decorateClass([
-  observable
-], MenuItem.prototype, "submenuRegion");
 __decorateClass([
   observable
 ], MenuItem.prototype, "hasSubmenu");

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/definition5.cjs

@@ -8,8 +8,8 @@ const enums = require('./enums.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const localized = require('./localized.cjs');
 const playbackRates = require('./playbackRates.cjs');
-const when = require('./when.cjs');
 const repeat = require('./repeat.cjs');
+const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
 const styles = ":host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";

package/shared/definition5.js

@@ -6,8 +6,8 @@ import { M as MediaSkipBy } from './enums.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { L as Localized } from './localized.js';
 import { g as getPlaybackRatesArray } from './playbackRates.js';
-import { w as when } from './when.js';
 import { r as repeat } from './repeat.js';
+import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ":host{display:block}.wrapper{container-type:inline-size}.base{display:inline-flex;box-sizing:border-box;align-items:center;padding:8px;color:var(--vvd-color-canvas-text);gap:8px;inline-size:100%;user-select:none}.base.disabled{color:var(--vvd-color-neutral-300)}.base .slider{flex:1;grid-area:slider}.base .controls{display:flex;align-items:center;justify-content:center;gap:8px;grid-area:controls}.base .time-stamp{display:inline-flex}.base .time-stamp .current-time,.base .time-stamp .total-time{margin-inline:6px;min-inline-size:32px}.base .playback-button{grid-area:playback}@container (max-width: 500px){.base.two-lines{display:inline-grid;grid-template:auto auto/1fr;grid-template-areas:\"slider\" \"controls\";inline-size:100%;row-gap:4px}.base.two-lines .time-stamp{margin-inline:auto 2px}.base.two-lines.playback{grid-template-areas:\"slider slider\" \"controls playback\";grid-template-columns:1fr auto}.base.two-lines.playback .time-stamp{margin-inline:auto}.base .slider{box-sizing:border-box;min-inline-size:auto;padding-inline:2px}}";

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/listbox.cjs

@@ -2,6 +2,7 @@
 
 const option = require('./option.cjs');
 const vividElement = require('./vivid-element.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 const keyCodes = require('./key-codes.cjs');
 const strings = require('./strings.cjs');
 const ariaGlobal = require('./aria-global.cjs');
@@ -22,26 +23,6 @@ function findLastIndex(array, predicate) {
     return -1;
 }
 
-/**
- * Apply mixins to a constructor.
- * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
- * @public
- */
-function applyMixins(derivedCtor, ...baseCtors) {
-    const derivedAttributes = vividElement.AttributeConfiguration.locate(derivedCtor);
-    baseCtors.forEach(baseCtor => {
-        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
-            if (name !== "constructor") {
-                Object.defineProperty(derivedCtor.prototype, name, 
-                /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-                Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
-            }
-        });
-        const baseAttributes = vividElement.AttributeConfiguration.locate(baseCtor);
-        baseAttributes.forEach(x => derivedAttributes.push(x));
-    });
-}
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -509,7 +490,7 @@ __decorateClass([
 __decorateClass([
   vividElement.observable
 ], DelegatesARIAListbox.prototype, "ariaMultiSelectable");
-applyMixins(DelegatesARIAListbox, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins(Listbox, DelegatesARIAListbox);
+applyMixins.applyMixins(DelegatesARIAListbox, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(Listbox, DelegatesARIAListbox);
 
 exports.Listbox = Listbox;

package/shared/listbox.js

@@ -1,5 +1,6 @@
 import { i as isListboxOption } from './option.js';
-import { A as AttributeConfiguration, V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.js';
+import { V as VividElement, O as Observable, a as attr, o as observable } from './vivid-element.js';
+import { a as applyMixins } from './apply-mixins.js';
 import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
 import { u as uniqueId } from './strings.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
@@ -20,26 +21,6 @@ function findLastIndex(array, predicate) {
     return -1;
 }
 
-/**
- * Apply mixins to a constructor.
- * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
- * @public
- */
-function applyMixins(derivedCtor, ...baseCtors) {
-    const derivedAttributes = AttributeConfiguration.locate(derivedCtor);
-    baseCtors.forEach(baseCtor => {
-        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
-            if (name !== "constructor") {
-                Object.defineProperty(derivedCtor.prototype, name, 
-                /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-                Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
-            }
-        });
-        const baseAttributes = AttributeConfiguration.locate(baseCtor);
-        baseAttributes.forEach(x => derivedAttributes.push(x));
-    });
-}
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;

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 08:59:25 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 08:59:25 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 08:59:25 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 08:59:25 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:16 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 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 08:59:25 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:16 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 GMT
+ * Generated on Thu, 13 Feb 2025 13:39:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 04 Feb 2025 08:59:25 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 08:59:25 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": {