@vonage/vivid 5.3.0 → 5.5.0

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/option/index.cjs

@@ -1 +1 @@
-"use strict";const i=require("../bundled/definition11.cjs");i.registerOption();
+"use strict";const i=require("../bundled/definition12.cjs");i.registerOption();

package/option/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition11.js";
+import { r } from "../bundled/definition12.js";
 r();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.3.0",
+  "version": "5.5.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/progress-ring/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition15.cjs");e.registerProgressRing();
+"use strict";const e=require("../bundled/definition16.cjs");e.registerProgressRing();

package/progress-ring/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition15.js";
+import { r } from "../bundled/definition16.js";
 r();

package/radio/index.cjs

@@ -1 +1 @@
-"use strict";const i=require("../bundled/definition17.cjs");i.registerRadio();
+"use strict";const i=require("../bundled/definition18.cjs");i.registerRadio();

package/radio/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition17.js";
+import { r } from "../bundled/definition18.js";
 r();

package/radio-group/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("../bundled/vivid-element.cjs"),c=require("../bundled/definition17.cjs"),f=require("../bundled/mixins.cjs"),n=require("../bundled/key-codes.cjs"),g=require("../bundled/aria.cjs"),p=require("../bundled/delegates-aria.cjs"),b=require("../bundled/when.cjs"),u=require("../bundled/slotted.cjs"),v=".base{display:flex;flex-direction:column;gap:8px;--_low-ink-color: var(--vvd-color-neutral-600)}.positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}fieldset{display:block;padding:0;border:none;margin:0}legend{padding:0;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px}";var y=Object.defineProperty,s=(d,t,e,i)=>{for(var o=void 0,l=d.length-1,h;l>=0;l--)(h=d[l])&&(o=h(t,e,o)||o);return o&&y(t,e,o),o};class a extends f.WithFeedback(r.VividElement){constructor(){super(...arguments),this.errorValidationMessage="",this.orientation=g.Orientation.horizontal,this.slottedRadioButtons=[],this.radioErrorHandler=t=>{const e=t.target;this.errorValidationMessage=e.errorValidationMessage||""},this.radioChangeHandler=t=>{const e=t.target;e.checked&&(this.slottedRadioButtons?.forEach(i=>{i!==e&&(i.checked=!1)}),this.value=e.value,this.#e(e)),t.stopPropagation()},this.moveToRadioByIndex=(t,e)=>{const i=t[e];!this.isInsideToolbar&&!i.readOnly&&(i.checked=!0),i.focus()},this.moveRightOffGroup=()=>{this.nextElementSibling?.focus()},this.moveLeftOffGroup=()=>{this.previousElementSibling?.focus()},this.moveRight=t=>{const e=t.target,i=this.#t;let o=0;if(o=i.indexOf(e)+1,o===i.length&&this.isInsideToolbar&&t.key===n.keyArrowRight){this.moveRightOffGroup();return}o===i.length&&(o=0),this.moveToRadioByIndex(i,o)},this.moveLeft=t=>{const e=t.target,i=this.#t;let o=i.indexOf(e)-1;if(this.isInsideToolbar&&t.key===n.keyArrowLeft&&o<0){this.moveLeftOffGroup();return}o=o<0?i.length-1:o,this.moveToRadioByIndex(i,o)},this.keydownHandler=t=>{switch(t.key){case n.keyEnter:this.checkFocusedRadio(t.target);break;case n.keyArrowRight:case n.keyArrowDown:this.moveRight(t);break;case n.keyArrowLeft:case n.keyArrowUp:this.moveLeft(t);break;default:return!0}}}requiredChanged(){this.slottedRadioButtons?.forEach(t=>{this.required?t.required=!0:t.required=!1})}readOnlyChanged(){this.slottedRadioButtons?.forEach(t=>{this.readOnly?t.readOnly=!0:t.readOnly=!1})}disabledChanged(){this.slottedRadioButtons?.forEach(t=>{this.disabled?t.disabled=!0:t.disabled=!1})}nameChanged(){this.slottedRadioButtons?.forEach(t=>{t.setAttribute("name",this.name)})}valueChanged(){this.slottedRadioButtons?.forEach(t=>{t.value===this.value&&(t.checked=!0)}),this.$emit("change")}handleSlotChange(){this.errorText&&this.slottedRadioButtons?.forEach(t=>{t.errorText=this.errorText})}errorTextChanged(t,e){e?this.errorValidationMessage=e:this.errorValidationMessage=""}get#t(){return this.slottedRadioButtons?.filter(t=>!t.disabled)}slottedRadioButtonsChanged(){this.slottedRadioButtons&&this.slottedRadioButtons.length>0&&this.setupRadioButtons()}get isInsideToolbar(){return!!this.closest('[role="toolbar"]')}connectedCallback(){super.connectedCallback(),this.setupRadioButtons()}disconnectedCallback(){this.slottedRadioButtons?.forEach(t=>{t.removeEventListener("change",this.radioChangeHandler),t.removeEventListener("invalid",this.radioErrorHandler)})}setupRadioButtons(){let t=!1;for(const e of this.slottedRadioButtons)this.name!==void 0&&e.setAttribute("name",this.name),this.disabled&&(e.disabled=!0),this.readOnly&&(e.readOnly=!0),this.required&&(e.required=!0),this.value&&this.value===e.value?(e.checked=!0,this.#e(e),t=!0):e.checked=!1,e.addEventListener("change",this.radioChangeHandler),e.addEventListener("invalid",this.radioErrorHandler);if(this.value===void 0&&this.slottedRadioButtons?.length>0){const e=this.slottedRadioButtons?.filter(i=>i.hasAttribute("checked"));if(e.length>0&&!t){const i=e[e.length-1];i.checked=!0,this.#e(i)}else this.#e(this.slottedRadioButtons[0])}}focusInHandler(t){this.#e(t.target)}#e(t){t.setAttribute("tabindex","0");for(const e of this.slottedRadioButtons)e!==t&&e.setAttribute("tabindex","-1")}checkFocusedRadio(t){t.readOnly||(t.checked=!0)}}s([r.attr],a.prototype,"label");s([r.attr({attribute:"required",mode:"boolean"})],a.prototype,"required");s([r.attr({attribute:"readonly",mode:"boolean"})],a.prototype,"readOnly");s([r.attr({attribute:"disabled",mode:"boolean"})],a.prototype,"disabled");s([r.attr],a.prototype,"name");s([r.attr],a.prototype,"value");s([r.observable],a.prototype,"errorValidationMessage");s([r.attr({attribute:"error-text"})],a.prototype,"errorText");s([r.attr],a.prototype,"orientation");s([r.observable],a.prototype,"slottedRadioButtons");const R=d=>{const t=d.tagFor(c.Radio,!0);return r.html`
+"use strict";const r=require("../bundled/vivid-element.cjs"),c=require("../bundled/definition18.cjs"),f=require("../bundled/mixins.cjs"),n=require("../bundled/key-codes.cjs"),g=require("../bundled/aria.cjs"),p=require("../bundled/delegates-aria.cjs"),b=require("../bundled/when.cjs"),u=require("../bundled/slotted.cjs"),v=".base{display:flex;flex-direction:column;gap:8px;--_low-ink-color: var(--vvd-color-neutral-600)}.positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}fieldset{display:block;padding:0;border:none;margin:0}legend{padding:0;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px}";var y=Object.defineProperty,s=(d,t,e,i)=>{for(var o=void 0,l=d.length-1,h;l>=0;l--)(h=d[l])&&(o=h(t,e,o)||o);return o&&y(t,e,o),o};class a extends f.WithFeedback(r.VividElement){constructor(){super(...arguments),this.errorValidationMessage="",this.orientation=g.Orientation.horizontal,this.slottedRadioButtons=[],this.radioErrorHandler=t=>{const e=t.target;this.errorValidationMessage=e.errorValidationMessage||""},this.radioChangeHandler=t=>{const e=t.target;e.checked&&(this.slottedRadioButtons?.forEach(i=>{i!==e&&(i.checked=!1)}),this.value=e.value,this.#e(e)),t.stopPropagation()},this.moveToRadioByIndex=(t,e)=>{const i=t[e];!this.isInsideToolbar&&!i.readOnly&&(i.checked=!0),i.focus()},this.moveRightOffGroup=()=>{this.nextElementSibling?.focus()},this.moveLeftOffGroup=()=>{this.previousElementSibling?.focus()},this.moveRight=t=>{const e=t.target,i=this.#t;let o=0;if(o=i.indexOf(e)+1,o===i.length&&this.isInsideToolbar&&t.key===n.keyArrowRight){this.moveRightOffGroup();return}o===i.length&&(o=0),this.moveToRadioByIndex(i,o)},this.moveLeft=t=>{const e=t.target,i=this.#t;let o=i.indexOf(e)-1;if(this.isInsideToolbar&&t.key===n.keyArrowLeft&&o<0){this.moveLeftOffGroup();return}o=o<0?i.length-1:o,this.moveToRadioByIndex(i,o)},this.keydownHandler=t=>{switch(t.key){case n.keyEnter:this.checkFocusedRadio(t.target);break;case n.keyArrowRight:case n.keyArrowDown:this.moveRight(t);break;case n.keyArrowLeft:case n.keyArrowUp:this.moveLeft(t);break;default:return!0}}}requiredChanged(){this.slottedRadioButtons?.forEach(t=>{this.required?t.required=!0:t.required=!1})}readOnlyChanged(){this.slottedRadioButtons?.forEach(t=>{this.readOnly?t.readOnly=!0:t.readOnly=!1})}disabledChanged(){this.slottedRadioButtons?.forEach(t=>{this.disabled?t.disabled=!0:t.disabled=!1})}nameChanged(){this.slottedRadioButtons?.forEach(t=>{t.setAttribute("name",this.name)})}valueChanged(){this.slottedRadioButtons?.forEach(t=>{t.value===this.value&&(t.checked=!0)}),this.$emit("change")}handleSlotChange(){this.errorText&&this.slottedRadioButtons?.forEach(t=>{t.errorText=this.errorText})}errorTextChanged(t,e){e?this.errorValidationMessage=e:this.errorValidationMessage=""}get#t(){return this.slottedRadioButtons?.filter(t=>!t.disabled)}slottedRadioButtonsChanged(){this.slottedRadioButtons&&this.slottedRadioButtons.length>0&&this.setupRadioButtons()}get isInsideToolbar(){return!!this.closest('[role="toolbar"]')}connectedCallback(){super.connectedCallback(),this.setupRadioButtons()}disconnectedCallback(){this.slottedRadioButtons?.forEach(t=>{t.removeEventListener("change",this.radioChangeHandler),t.removeEventListener("invalid",this.radioErrorHandler)})}setupRadioButtons(){let t=!1;for(const e of this.slottedRadioButtons)this.name!==void 0&&e.setAttribute("name",this.name),this.disabled&&(e.disabled=!0),this.readOnly&&(e.readOnly=!0),this.required&&(e.required=!0),this.value&&this.value===e.value?(e.checked=!0,this.#e(e),t=!0):e.checked=!1,e.addEventListener("change",this.radioChangeHandler),e.addEventListener("invalid",this.radioErrorHandler);if(this.value===void 0&&this.slottedRadioButtons?.length>0){const e=this.slottedRadioButtons?.filter(i=>i.hasAttribute("checked"));if(e.length>0&&!t){const i=e[e.length-1];i.checked=!0,this.#e(i)}else this.#e(this.slottedRadioButtons[0])}}focusInHandler(t){this.#e(t.target)}#e(t){t.setAttribute("tabindex","0");for(const e of this.slottedRadioButtons)e!==t&&e.setAttribute("tabindex","-1")}checkFocusedRadio(t){t.readOnly||(t.checked=!0)}}s([r.attr],a.prototype,"label");s([r.attr({attribute:"required",mode:"boolean"})],a.prototype,"required");s([r.attr({attribute:"readonly",mode:"boolean"})],a.prototype,"readOnly");s([r.attr({attribute:"disabled",mode:"boolean"})],a.prototype,"disabled");s([r.attr],a.prototype,"name");s([r.attr],a.prototype,"value");s([r.observable],a.prototype,"errorValidationMessage");s([r.attr({attribute:"error-text"})],a.prototype,"errorText");s([r.attr],a.prototype,"orientation");s([r.observable],a.prototype,"slottedRadioButtons");const R=d=>{const t=d.tagFor(c.Radio,!0);return r.html`
 		<template
 			@keydown="${(e,i)=>e.keydownHandler(i.event)}"
 			@focusin="${(e,i)=>e.focusInHandler(i.event)}"

package/radio-group/index.js

@@ -1,5 +1,5 @@
 import { V as p, a as r, o as f, h, c as b, d as v } from "../bundled/vivid-element.js";
-import { R as m, a as y } from "../bundled/definition17.js";
+import { R as m, a as y } from "../bundled/definition18.js";
 import { W as R, f as k } from "../bundled/mixins.js";
 import { g as u, h as c, c as B, b as x, f as O } from "../bundled/key-codes.js";
 import { O as g } from "../bundled/aria.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';