@vonage/vivid 5.3.0 → 5.4.0

package/menu/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const menuItem_definition = require('../unbundled/definition2.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
@@ -251,7 +251,7 @@ class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.Vi
   /**
    * @internal
    */
-  _onChange(e) {
+  _onBodyChange(e) {
     if (this.menuItems === void 0 || !(e.target instanceof Element)) {
       return;
     }
@@ -341,8 +341,7 @@ const MenuTemplate = (context) => {
     x.open = state;
   }
   return fastElement.html`
-		<template @change="${(x, c) => x._onChange(c.event)}"
-							@focusout="${(x, c) => x._onFocusout(c.event)}">
+		<template @focusout="${(x, c) => x._onFocusout(c.event)}">
 			${anchorSlotTemplate}
 			<${popupTag}
 				${fastElement.ref("_popupEl")}
@@ -364,6 +363,7 @@ const MenuTemplate = (context) => {
 					${delegatesAria.delegateAria({
     role: "menu"
   })}
+					@change="${(x, c) => x._onBodyChange(c.event)}"
 					@keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
 					@focusout="${(x, c) => x.handleFocusOut(c.event)}"
 				>

package/menu/definition.js

@@ -1,4 +1,4 @@
-import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition5.js';
 import { M as MenuItem, a as MenuItemRole, m as menuItemDefinition, b as menuName } from '../unbundled/definition2.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { Updates, attr, nullableNumberConverter, observable, ref, slotted, html } from '@microsoft/fast-element';
@@ -247,7 +247,7 @@ class Menu extends Anchored(DelegatesAria(VividElement)) {
   /**
    * @internal
    */
-  _onChange(e) {
+  _onBodyChange(e) {
     if (this.menuItems === void 0 || !(e.target instanceof Element)) {
       return;
     }
@@ -337,8 +337,7 @@ const MenuTemplate = (context) => {
     x.open = state;
   }
   return html`
-		<template @change="${(x, c) => x._onChange(c.event)}"
-							@focusout="${(x, c) => x._onFocusout(c.event)}">
+		<template @focusout="${(x, c) => x._onFocusout(c.event)}">
 			${anchorSlotTemplate}
 			<${popupTag}
 				${ref("_popupEl")}
@@ -360,6 +359,7 @@ const MenuTemplate = (context) => {
 					${delegateAria({
     role: "menu"
   })}
+					@change="${(x, c) => x._onBodyChange(c.event)}"
 					@keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
 					@focusout="${(x, c) => x.handleFocusOut(c.event)}"
 				>

package/nav-disclosure/definition.js

@@ -1,7 +1,7 @@
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
 import { V as VividElement, r as replaces, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, ref, html } from '@microsoft/fast-element';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 

package/nav-item/definition.js

@@ -1,7 +1,7 @@
 import { iconDefinition } from '../icon/definition.js';
 import { V as VividElement, r as replaces, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, html } from '@microsoft/fast-element';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { L as Linkable } from '../unbundled/linkable.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 

package/note/definition.js

@@ -1,7 +1,7 @@
 import { iconDefinition } from '../icon/definition.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, when, html } from '@microsoft/fast-element';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 
 const styles = ".base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-announcement{--_connotation-color-intermediate: var(--vvd-note-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-faint: var(--vvd-note-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce: var(--vvd-note-announcement-fierce, var(--vvd-color-announcement-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";

package/number-field/definition.js

@@ -13,7 +13,7 @@ import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
 import { W as WithErrorText } from '../unbundled/with-error-text.js';
 import { W as WithSuccessText } from '../unbundled/with-success-text.js';
 import { F as FormElement } from '../unbundled/form-element.js';
-import { b as AffixIcon } from '../unbundled/affix.js';
+import { A as AffixIcon } from '../unbundled/affix.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { S as Shape } from '../unbundled/enums.js';
 import { D as Divider } from '../unbundled/divider.js';

package/option/definition.cjs

@@ -2,83 +2,12 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const icon_definition = require('../icon/definition.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const option = require('../unbundled/option.cjs');
-const fastElement = require('@microsoft/fast-element');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const affix = require('../unbundled/affix.cjs');
-const hostSemantics = require('../unbundled/host-semantics.cjs');
+require('../icon/definition.cjs');
+require('../unbundled/vivid-element.cjs');
+const option_definition = require('../unbundled/definition3.cjs');
 
-const getClasses = (x) => fastWebUtilities.classNames(
-  "base",
-  ["disabled", x.disabled],
-  ["selected", Boolean(x.selected)],
-  ["hover", Boolean(x._highlighted)],
-  ["active", Boolean(x.checked)],
-  ["icon", Boolean(x.icon)],
-  ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]
-);
-function text() {
-  return fastElement.html`${fastElement.when(
-    (x) => x.text || x.textSecondary,
-    fastElement.html`<span class="text">
-			${fastElement.when(
-      (x) => x.text,
-      fastElement.html`<span class="text-primary">
-					${fastElement.when(
-        (x) => x._hasMatchedText,
-        fastElement.html`${(x) => x.text.slice(0, x._matchedRange.from)}<span class="match"
-								>${(x) => x.text.slice(x._matchedRange.from, x._matchedRange.to)}</span
-							>`
-      )}${(x) => x.text.slice(x._matchedRange.to)}
-				</span>`
-    )}
-			${fastElement.when(
-      (x) => x.textSecondary,
-      fastElement.html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
-    )}
-		</span>`
-  )}`;
-}
-const ListboxOptionTemplate = (context) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(icon_definition.VwcIconElement);
-  return fastElement.html`
-		<template
-			${hostSemantics.applyHostSemantics({
-    role: "option",
-    ariaChecked: (x) => x.checked,
-    ariaSelected: (x) => x.selected,
-    ariaDisabled: (x) => x.disabled
-  })}
-			style="${(x) => x._isNotMatching ? "display: none" : ""}"
-		>
-			<div class="${getClasses}">
-				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${text()}
-				<slot name="trailing-meta"></slot>
-				${fastElement.when(
-    (x) => x._displayCheckmark && x.selected,
-    fastElement.html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
-  )}
-			</div>
-		</template>
-	`;
-};
 
-const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}";
 
-const listboxOptionDefinition = vividElement.defineVividComponent(
-  "option",
-  option.ListboxOption,
-  ListboxOptionTemplate,
-  [icon_definition.iconDefinition],
-  {
-    styles
-  }
-);
-const registerOption = vividElement.createRegisterFunction(listboxOptionDefinition);
-
-exports.VwcOptionElement = option.ListboxOption;
-exports.listboxOptionDefinition = listboxOptionDefinition;
-exports.registerOption = registerOption;
+exports.VwcOptionElement = option_definition.ListboxOption;
+exports.listboxOptionDefinition = option_definition.listboxOptionDefinition;
+exports.registerOption = option_definition.registerOption;

package/option/definition.js

@@ -1,78 +1,3 @@
-import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { L as ListboxOption } from '../unbundled/option.js';
-import { when, html } from '@microsoft/fast-element';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
-import { a as applyHostSemantics } from '../unbundled/host-semantics.js';
-
-const getClasses = (x) => classNames(
-  "base",
-  ["disabled", x.disabled],
-  ["selected", Boolean(x.selected)],
-  ["hover", Boolean(x._highlighted)],
-  ["active", Boolean(x.checked)],
-  ["icon", Boolean(x.icon)],
-  ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]
-);
-function text() {
-  return html`${when(
-    (x) => x.text || x.textSecondary,
-    html`<span class="text">
-			${when(
-      (x) => x.text,
-      html`<span class="text-primary">
-					${when(
-        (x) => x._hasMatchedText,
-        html`${(x) => x.text.slice(0, x._matchedRange.from)}<span class="match"
-								>${(x) => x.text.slice(x._matchedRange.from, x._matchedRange.to)}</span
-							>`
-      )}${(x) => x.text.slice(x._matchedRange.to)}
-				</span>`
-    )}
-			${when(
-      (x) => x.textSecondary,
-      html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
-    )}
-		</span>`
-  )}`;
-}
-const ListboxOptionTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(Icon);
-  return html`
-		<template
-			${applyHostSemantics({
-    role: "option",
-    ariaChecked: (x) => x.checked,
-    ariaSelected: (x) => x.selected,
-    ariaDisabled: (x) => x.disabled
-  })}
-			style="${(x) => x._isNotMatching ? "display: none" : ""}"
-		>
-			<div class="${getClasses}">
-				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${text()}
-				<slot name="trailing-meta"></slot>
-				${when(
-    (x) => x._displayCheckmark && x.selected,
-    html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
-  )}
-			</div>
-		</template>
-	`;
-};
-
-const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}";
-
-const listboxOptionDefinition = defineVividComponent(
-  "option",
-  ListboxOption,
-  ListboxOptionTemplate,
-  [iconDefinition],
-  {
-    styles
-  }
-);
-const registerOption = createRegisterFunction(listboxOptionDefinition);
-
-export { ListboxOption as VwcOptionElement, listboxOptionDefinition, registerOption };
+import '../icon/definition.js';
+import '../unbundled/vivid-element.js';
+export { L as VwcOptionElement, l as listboxOptionDefinition, r as registerOption } from '../unbundled/definition3.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "type": "module",
   "module": "./index.js",
   "main": "./index.cjs",
@@ -62,16 +62,20 @@
     "@microsoft/fast-element": "^2.7.0",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "date-fns": "^3.0.0",
+    "vanilla-colorful": "^0.7.2",
     "prosemirror-commands": "^1.7.1",
     "prosemirror-keymap": "^1.2.3",
-    "prosemirror-model": "^1.25.2",
+    "prosemirror-model": "^1.25.4",
     "prosemirror-schema-basic": "^1.2.3",
-    "prosemirror-state": "^1.4.3",
+    "prosemirror-state": "^1.4.4",
     "prosemirror-view": "^1.40.1",
-    "ramda": "^0.30.0",
+    "ramda": "^0.32.0",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
+    "@microsoft/api-extractor": "^7.52.9",
+    "@microsoft/eslint-config-fast-dna": "^2.1.0",
+    "@playwright/test": "1.48.2",
     "@repo/cem-analyzer-plugins": "*",
     "@repo/consts": "*",
     "@repo/eslint-config": "*",
@@ -81,6 +85,28 @@
     "@repo/styles": "*",
     "@repo/typescript-config": "*",
     "@repo/vitest-config": "*",
-    "video.js": "^8.23.3"
+    "video.js": "^8.23.3",
+    "@testing-library/dom": "^8.18.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "18.19.130",
+    "@types/uuid": "^10.0.0",
+    "@vonage/vivid-figma-tokens": "github:vonage/vivid-figma-tokens#v1.4.0",
+    "cem-plugin-async-function": "^0.0.5",
+    "cem-plugin-jsdoc-example": "^0.0.9",
+    "cem-plugin-jsdoc-function": "^0.0.5",
+    "cem-plugin-readonly": "^0.0.5",
+    "dialog-polyfill": "^0.5.6",
+    "element-internals-polyfill": "^1.3.13",
+    "esbuild": "0.23.0",
+    "jsdom": "^23.0.0",
+    "markdown-it": "^13.0.2",
+    "playwright": "1.48.2",
+    "sass": "^1.89.2",
+    "vite-plugin-static-copy": "^1.0.6",
+    "vitest": "^2.1.8",
+    "vitest-axe": "^0.1.0",
+    "vitest-fetch-mock": "^0.4.5",
+    "wait-on": "^8.0.5",
+    "concurrently": "^9.2.0"
   }
 }

package/popup/definition.cjs

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('../unbundled/definition.cjs');
-require('../unbundled/definition5.cjs');
+require('../unbundled/definition6.cjs');
 require('../unbundled/vivid-element.cjs');
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 
 
 

package/popup/definition.js

@@ -1,4 +1,4 @@
 import '../unbundled/definition.js';
-import '../unbundled/definition5.js';
+import '../unbundled/definition6.js';
 import '../unbundled/vivid-element.js';
-export { p as popupDefinition, r as registerPopup } from '../unbundled/definition4.js';
+export { p as popupDefinition, r as registerPopup } from '../unbundled/definition5.js';

package/range-slider/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');

package/range-slider/definition.js

@@ -1,4 +1,4 @@
-import { P as Popup, a as PlacementStrategy, p as popupDefinition } from '../unbundled/definition4.js';
+import { P as Popup, a as PlacementStrategy, p as popupDefinition } from '../unbundled/definition5.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { observable, attr, nullableNumberConverter, ref, when, html } from '@microsoft/fast-element';
 import { Orientation, keyHome, keyEnd, keyArrowUp, keyArrowDown, limit, classNames } from '@microsoft/fast-web-utilities';

package/rich-text-editor/definition.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const vividElement = require('../unbundled/vivid-element.cjs');
 const button_definition = require('../unbundled/definition.cjs');
 const divider_definition = require('../divider/definition.cjs');
-const option_definition = require('../option/definition.cjs');
+const option_definition = require('../unbundled/definition3.cjs');
 const tooltip_definition = require('../tooltip/definition.cjs');
 const menu_definition = require('../menu/definition.cjs');
 const menuItem_definition = require('../unbundled/definition2.cjs');
@@ -13,7 +13,6 @@ const select_definition = require('../select/definition.cjs');
 const fastElement = require('@microsoft/fast-element');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const divider = require('../unbundled/divider.cjs');
-const option = require('../unbundled/option.cjs');
 const localized = require('../unbundled/localized.cjs');
 const prosemirrorState = require('prosemirror-state');
 const prosemirrorModel = require('prosemirror-model');
@@ -122,7 +121,7 @@ const MENU_BAR_ITEMS = {
     },
     render: function(context) {
       const selectTag = context.tagFor(select_definition.VwcSelectElement);
-      const optionTag = context.tagFor(option.ListboxOption);
+      const optionTag = context.tagFor(option_definition.ListboxOption);
       const tooltipTag = context.tagFor(tooltip_definition.VwcTooltipElement);
       return fastElement.html`
 		<${tooltipTag} text="${(_, { parent }) => parent.locale.richTextEditor.textBlockType}" placement="top">

package/rich-text-editor/definition.js

@@ -1,7 +1,7 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
 import { dividerDefinition } from '../divider/definition.js';
-import { listboxOptionDefinition } from '../option/definition.js';
+import { L as ListboxOption, l as listboxOptionDefinition } from '../unbundled/definition3.js';
 import { VwcTooltipElement as Tooltip, tooltipDefinition } from '../tooltip/definition.js';
 import { VwcMenuElement as Menu, menuDefinition } from '../menu/definition.js';
 import { M as MenuItem, m as menuItemDefinition } from '../unbundled/definition2.js';
@@ -9,7 +9,6 @@ import { VwcSelectElement as Select, selectDefinition } from '../select/definiti
 import { html, repeat, attr, Updates, nullableNumberConverter, when } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { D as Divider } from '../unbundled/divider.js';
-import { L as ListboxOption } from '../unbundled/option.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { EditorState, PluginKey, TextSelection, Plugin } from 'prosemirror-state';
 import { Schema, DOMParser } from 'prosemirror-model';