@vonage/vivid 5.7.0 → 5.9.0

package/bundled/vivid-element.js

@@ -44,6 +44,25 @@ var tt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : t
 function ci(i) {
   return i && i.__esModule && Object.prototype.hasOwnProperty.call(i, "default") ? i.default : i;
 }
+function di(i) {
+  if (i.__esModule) return i;
+  var t = i.default;
+  if (typeof t == "function") {
+    var e = function s() {
+      return this instanceof s ? Reflect.construct(t, arguments, this.constructor) : t.apply(this, arguments);
+    };
+    e.prototype = t.prototype;
+  } else e = {};
+  return Object.defineProperty(e, "__esModule", { value: !0 }), Object.keys(i).forEach(function(s) {
+    var n = Object.getOwnPropertyDescriptor(i, s);
+    Object.defineProperty(e, s, n.get ? n : {
+      enumerable: !0,
+      get: function() {
+        return i[s];
+      }
+    });
+  }), e;
+}
 (function() {
   if (!(typeof globalThis < "u"))
     if (typeof tt < "u")
@@ -93,7 +112,7 @@ v.error === void 0 && Object.assign(v, {
   addMessages() {
   }
 });
-const di = Object.freeze([]);
+const hi = Object.freeze([]);
 function Pt() {
   const i = /* @__PURE__ */ new Map();
   return Object.freeze({
@@ -529,10 +548,10 @@ const J = Object.freeze({
     }
   });
 });
-function hi(i, t) {
+function ui(i, t) {
   g.defineProperty(i, t);
 }
-function ui(i, t, e) {
+function fi(i, t, e) {
   return Object.assign({}, e, {
     get() {
       return g.trackVolatile(), e.get.apply(this);
@@ -783,7 +802,7 @@ function U(i) {
 }
 const ct = `fast-${Math.random().toString(36).substring(2, 8)}`, H = `${ct}{`, R = `}${ct}`, ve = R.length;
 let me = 0;
-const L = () => `${ct}-${++me}`, Kt = Object.freeze({
+const j = () => `${ct}-${++me}`, Kt = Object.freeze({
   /**
    * Creates a placeholder string suitable for marking out a location *within*
    * an attribute value or HTML content.
@@ -800,7 +819,7 @@ const L = () => `${ct}-${++me}`, Kt = Object.freeze({
    * @remarks
    * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
    */
-  attribute: (i) => `${L()}="${H}${i}${R}"`,
+  attribute: (i) => `${j()}="${H}${i}${R}"`,
   /**
    * Creates a placeholder that manifests itself as a marker within the DOM structure.
    * @param index - The directive index to create the placeholder for.
@@ -1460,7 +1479,7 @@ class Re {
   }
   addFactory(t, e, s, n, r) {
     var o, c;
-    this.nodeIds.has(s) || (this.nodeIds.add(s), this.addTargetDescriptor(e, s, n)), t.id = (o = t.id) !== null && o !== void 0 ? o : L(), t.targetNodeId = s, t.targetTagName = r, t.policy = (c = t.policy) !== null && c !== void 0 ? c : this.policy, this.factories.push(t);
+    this.nodeIds.has(s) || (this.nodeIds.add(s), this.addTargetDescriptor(e, s, n)), t.id = (o = t.id) !== null && o !== void 0 ? o : j(), t.targetNodeId = s, t.targetTagName = r, t.policy = (c = t.policy) !== null && c !== void 0 ? c : this.policy, this.factories.push(t);
   }
   freeze() {
     return this.proto = Object.create(null, this.descriptors), this;
@@ -1503,7 +1522,7 @@ function se(i, t, e, s, n, r = !1) {
     u === null ? r && (b = new M(Gt(() => h, i.policy)), $.assignAspect(b, a.name)) : b = ht.aggregate(u, i.policy), b !== null && (e.removeAttributeNode(a), d--, l--, i.addFactory(b, t, s, n, e.tagName));
   }
 }
-function Ie(i, t, e, s, n) {
+function _e(i, t, e, s, n) {
   const r = K.parse(t.textContent, i.directives);
   if (r === null)
     return C.node = t.nextSibling, C.index = n + 1, C;
@@ -1517,18 +1536,18 @@ function Ie(i, t, e, s, n) {
 function ne(i, t, e) {
   let s = 0, n = t.firstChild;
   for (; n; ) {
-    const r = _e(i, e, n, s);
+    const r = Ie(i, e, n, s);
     n = r.node, s = r.index;
   }
 }
-function _e(i, t, e, s) {
+function Ie(i, t, e, s) {
   const n = ie(t, s);
   switch (e.nodeType) {
     case 1:
       se(i, t, e, n, s), ne(i, e, n);
       break;
     case 3:
-      return Ie(i, e, t, n, s);
+      return _e(i, e, t, n, s);
     case 8:
       const r = K.parse(e.data, i.directives);
       r !== null && i.addFactory(
@@ -1543,7 +1562,7 @@ function _e(i, t, e, s) {
   }
   return C.index = s + 1, C.node = e.nextSibling, C;
 }
-function Le(i, t) {
+function je(i, t) {
   return i && i.nodeType == 8 && K.parse(i.data, t) !== null;
 }
 const At = "TEMPLATE", ht = {
@@ -1581,7 +1600,7 @@ const At = "TEMPLATE", ht = {
     // because something like a when, repeat, etc. could add nodes before the marker.
     // To mitigate this, we insert a stable first node. However, if we insert a node,
     // that will alter the result of the TreeWalker. So, we also need to offset the target index.
-    (Le(n.firstChild, t) || // Or if there is only one node and a directive, it means the template's content
+    (je(n.firstChild, t) || // Or if there is only one node and a directive, it means the template's content
     // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
     // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
     n.childNodes.length === 1 && Object.keys(t).length > 0) && n.insertBefore(document.createComment(""), n.firstChild), ne(
@@ -1618,16 +1637,16 @@ const At = "TEMPLATE", ht = {
     }, d = new M(Wt(c, n ?? t, s));
     return $.assignAspect(d, e), d;
   }
-}, Ve = (
+}, Le = (
   /* eslint-disable-next-line no-control-regex, max-len */
   /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/
-), je = /* @__PURE__ */ Object.create(null);
-class V {
+), Ve = /* @__PURE__ */ Object.create(null);
+class L {
   /**
    * Creates an instance of InlineTemplateDirective.
    * @param template - The template to inline.
    */
-  constructor(t, e = je) {
+  constructor(t, e = Ve) {
     this.html = t, this.factories = e;
   }
   /**
@@ -1641,11 +1660,11 @@ class V {
     return this.html;
   }
 }
-V.empty = new V("");
-$.define(V);
+L.empty = new L("");
+$.define(L);
 function Fe(i, t, e, s = $.getForInstance(i)) {
   if (s.aspected) {
-    const n = Ve.exec(t);
+    const n = Le.exec(t);
     n !== null && $.assignAspect(i, n[2]);
   }
   return i.createHTML(e);
@@ -1677,7 +1696,7 @@ class Y {
    * Returns a directive that can inline the template.
    */
   inline() {
-    return new V(B(this.html) ? this.html : this.html.innerHTML, this.factories);
+    return new L(B(this.html) ? this.html : this.html.innerHTML, this.factories);
   }
   /**
    * Sets the DOMPolicy for this template.
@@ -1728,7 +1747,7 @@ class Y {
     let n = "";
     const r = /* @__PURE__ */ Object.create(null), o = (c) => {
       var d;
-      const l = (d = c.id) !== null && d !== void 0 ? d : c.id = L();
+      const l = (d = c.id) !== null && d !== void 0 ? d : c.id = j();
       return r[l] = c, l;
     };
     for (let c = 0, d = t.length - 1; c < d; ++c) {
@@ -1756,7 +1775,7 @@ const re = (i, ...t) => {
     /* Message.directCallToHTMLTagNotAllowed */
   );
 };
-re.partial = (i) => new V(i);
+re.partial = (i) => new L(i);
 const Mt = "boolean", Ot = "reflect", ae = Object.freeze({
   /**
    * Locates all attribute configurations associated with a type.
@@ -1776,7 +1795,7 @@ function Et(i) {
   const t = i * 1;
   return isNaN(t) ? null : t;
 }
-const fi = {
+const pi = {
   toView(i) {
     const t = Et(i);
     return t && t.toString();
@@ -1891,7 +1910,7 @@ var Pe = function(i, t, e, s) {
     l((s = s.apply(i, t || [])).next());
   });
 };
-const Rt = { mode: "open" }, It = {}, it = /* @__PURE__ */ new Set(), I = v.getById(N.elementRegistry, () => Pt()), ze = {
+const Rt = { mode: "open" }, _t = {}, it = /* @__PURE__ */ new Set(), _ = v.getById(N.elementRegistry, () => Pt()), ze = {
   deferAndHydrate: "defer-and-hydrate"
 };
 class p {
@@ -1906,7 +1925,7 @@ class p {
     Reflect.defineProperty(t, "observedAttributes", {
       value: o,
       enumerable: !0
-    }), this.attributes = r, this.propertyLookup = c, this.attributeLookup = d, this.shadowOptions = e.shadowOptions === void 0 ? Rt : e.shadowOptions === null ? void 0 : Object.assign(Object.assign({}, Rt), e.shadowOptions), this.elementOptions = e.elementOptions === void 0 ? It : Object.assign(Object.assign({}, It), e.elementOptions), this.styles = m.normalize(e.styles), I.register(this), g.defineProperty(p.isRegistered, this.name), p.isRegistered[this.name] = this.type;
+    }), this.attributes = r, this.propertyLookup = c, this.attributeLookup = d, this.shadowOptions = e.shadowOptions === void 0 ? Rt : e.shadowOptions === null ? void 0 : Object.assign(Object.assign({}, Rt), e.shadowOptions), this.elementOptions = e.elementOptions === void 0 ? _t : Object.assign(Object.assign({}, _t), e.elementOptions), this.styles = m.normalize(e.styles), _.register(this), g.defineProperty(p.isRegistered, this.name), p.isRegistered[this.name] = this.type;
   }
   /**
    * Indicates if this element has been defined in at least one registry.
@@ -1932,7 +1951,7 @@ class p {
    * that describes the element to define.
    */
   static compose(t, e) {
-    return it.has(t) || I.getByType(t) ? new p(class extends t {
+    return it.has(t) || _.getByType(t) ? new p(class extends t {
     }, e) : new p(t, e);
   }
   /**
@@ -1954,7 +1973,7 @@ class p {
    */
   static composeAsync(t, e) {
     return new Promise((s) => {
-      (it.has(t) || I.getByType(t)) && s(new p(class extends t {
+      (it.has(t) || _.getByType(t)) && s(new p(class extends t {
       }, e));
       const n = new p(t, e);
       g.getNotifier(n).subscribe({
@@ -1967,8 +1986,8 @@ class p {
   }
 }
 p.isRegistered = {};
-p.getByType = I.getByType;
-p.getForInstance = I.getForInstance;
+p.getByType = _.getByType;
+p.getForInstance = _.getForInstance;
 p.registerAsync = (i) => Pe(void 0, void 0, void 0, function* () {
   return new Promise((t) => {
     p.isRegistered[i] && t(p.isRegistered[i]), g.getNotifier(p.isRegistered).subscribe({ handleChange: () => t(p.isRegistered[i]) }, i);
@@ -1993,7 +2012,7 @@ class Ue extends MutationObserver {
     this.observedNodes.delete(t), this.observedNodes.size < 1 && this.disconnect();
   }
 }
-const pi = Object.freeze({
+const bi = Object.freeze({
   /**
    * Creates a ViewBehaviorOrchestrator.
    * @param source - The source to to associate behaviors with.
@@ -2012,7 +2031,7 @@ const pi = Object.freeze({
       addBehaviorFactory(r, o) {
         var c, d, l, a;
         const h = r;
-        h.id = (c = h.id) !== null && c !== void 0 ? c : L(), h.targetNodeId = (d = h.targetNodeId) !== null && d !== void 0 ? d : L(), h.targetTagName = (l = o.tagName) !== null && l !== void 0 ? l : null, h.policy = (a = h.policy) !== null && a !== void 0 ? a : T.policy, this.addTarget(h.targetNodeId, o), this.addBehavior(h.createBehavior());
+        h.id = (c = h.id) !== null && c !== void 0 ? c : j(), h.targetNodeId = (d = h.targetNodeId) !== null && d !== void 0 ? d : j(), h.targetTagName = (l = o.tagName) !== null && l !== void 0 ? l : null, h.policy = (a = h.policy) !== null && a !== void 0 ? a : T.policy, this.addTarget(h.targetNodeId, o), this.addBehavior(h.createBehavior());
       },
       addTarget(r, o) {
         e[r] = o;
@@ -2036,11 +2055,11 @@ const pi = Object.freeze({
   composed: !0,
   cancelable: !0
 }, P = "isConnected", oe = /* @__PURE__ */ new WeakMap();
-function _(i) {
+function I(i) {
   var t, e;
   return (e = (t = i.shadowRoot) !== null && t !== void 0 ? t : oe.get(i)) !== null && e !== void 0 ? e : null;
 }
-let _t;
+let It;
 class S extends qt {
   /**
    * Creates a Controller to control the specified element.
@@ -2171,7 +2190,7 @@ class S extends qt {
       return;
     const s = this.source;
     if (t instanceof HTMLElement)
-      ((e = _(s)) !== null && e !== void 0 ? e : this.source).append(t);
+      ((e = I(s)) !== null && e !== void 0 ? e : this.source).append(t);
     else if (!t.isAttachedTo(s)) {
       const n = t.behaviors;
       if (t.addStylesTo(s), n !== null)
@@ -2189,7 +2208,7 @@ class S extends qt {
       return;
     const s = this.source;
     if (t instanceof HTMLElement)
-      ((e = _(s)) !== null && e !== void 0 ? e : s).removeChild(t);
+      ((e = I(s)) !== null && e !== void 0 ? e : s).removeChild(t);
     else if (t.isAttachedTo(s)) {
       const n = t.behaviors;
       if (t.removeStylesFrom(s), n !== null)
@@ -2279,7 +2298,7 @@ class S extends qt {
    */
   renderTemplate(t) {
     var e;
-    const s = this.source, n = (e = _(s)) !== null && e !== void 0 ? e : s;
+    const s = this.source, n = (e = I(s)) !== null && e !== void 0 ? e : s;
     if (this.view !== null)
       this.view.dispose(), this.view = null;
     else if (!this.needsInitialization || this.hasExistingShadowRoot) {
@@ -2316,7 +2335,7 @@ class S extends qt {
       handleChange: () => {
         S.forCustomElement(t, !0), t.$fastController.connect();
       }
-    }, "shadowOptions"), t.$fastController = new _t(t, n);
+    }, "shadowOptions"), t.$fastController = new It(t, n);
   }
   /**
    * Sets the strategy that ElementController.forCustomElement uses to construct
@@ -2324,14 +2343,14 @@ class S extends qt {
    * @param strategy - The strategy to use.
    */
   static setStrategy(t) {
-    _t = t;
+    It = t;
   }
 }
 x(S);
 S.setStrategy(S);
 function Q(i) {
   var t;
-  return "adoptedStyleSheets" in i ? i : (t = _(i)) !== null && t !== void 0 ? t : i.getRootNode();
+  return "adoptedStyleSheets" in i ? i : (t = I(i)) !== null && t !== void 0 ? t : i.getRootNode();
 }
 class Z {
   constructor(t) {
@@ -2353,7 +2372,7 @@ class Z {
 Z.styleSheetCache = /* @__PURE__ */ new Map();
 let We = 0;
 const Qe = () => `fast-${++We}`;
-function Lt(i) {
+function jt(i) {
   return i === document ? document.body : i;
 }
 class Ge {
@@ -2361,7 +2380,7 @@ class Ge {
     this.styles = t, this.styleClass = Qe();
   }
   addStylesTo(t) {
-    t = Lt(Q(t));
+    t = jt(Q(t));
     const e = this.styles, s = this.styleClass;
     for (let n = 0; n < e.length; n++) {
       const r = document.createElement("style");
@@ -2369,7 +2388,7 @@ class Ge {
     }
   }
   removeStylesFrom(t) {
-    t = Lt(Q(t));
+    t = jt(Q(t));
     const e = t.querySelectorAll(`.${this.styleClass}`);
     for (let s = 0, n = e.length; s < n; ++s)
       t.removeChild(e[s]);
@@ -2395,7 +2414,7 @@ if (m.supportsAdoptedStyleSheets) {
   m.setDefaultStrategy(Z);
 } else
   m.setDefaultStrategy(Ge);
-const j = "defer-hydration", st = "needs-hydration";
+const V = "defer-hydration", st = "needs-hydration";
 class f extends S {
   /**
    * {@inheritdoc ElementController.shadowOptions}
@@ -2404,7 +2423,7 @@ class f extends S {
     return super.shadowOptions;
   }
   set shadowOptions(t) {
-    super.shadowOptions = t, (this.hasExistingShadowRoot || t !== void 0 && !this.template) && this.definition.templateOptions === ze.deferAndHydrate && (this.source.toggleAttribute(j, !0), this.source.toggleAttribute(st, !0));
+    super.shadowOptions = t, (this.hasExistingShadowRoot || t !== void 0 && !this.template) && this.definition.templateOptions === ze.deferAndHydrate && (this.source.toggleAttribute(V, !0), this.source.toggleAttribute(st, !0));
   }
   /**
    * Adds the current element instance to the hydrating instances map
@@ -2424,7 +2443,7 @@ class f extends S {
   }
   static hydrationObserverHandler(t) {
     for (const e of t)
-      e.target.hasAttribute(j) || (f.hydrationObserver.unobserve(e.target), e.target.$fastController.connect());
+      e.target.hasAttribute(V) || (f.hydrationObserver.unobserve(e.target), e.target.$fastController.connect());
   }
   /**
    * Checks to see if hydration is complete and if so, invokes the hydrationComplete callback.
@@ -2446,9 +2465,9 @@ class f extends S {
    */
   connect() {
     var t, e, s, n, r;
-    if (this.needsHydration = (t = this.needsHydration) !== null && t !== void 0 ? t : this.source.hasAttribute(st), this.needsHydration && ((s = (e = f.lifecycleCallbacks) === null || e === void 0 ? void 0 : e.elementWillHydrate) === null || s === void 0 || s.call(e, this.definition.name)), this.source.hasAttribute(j)) {
+    if (this.needsHydration = (t = this.needsHydration) !== null && t !== void 0 ? t : this.source.hasAttribute(st), this.needsHydration && ((s = (e = f.lifecycleCallbacks) === null || e === void 0 ? void 0 : e.elementWillHydrate) === null || s === void 0 || s.call(e, this.definition.name)), this.source.hasAttribute(V)) {
       this.addHydratingInstance(), f.hydrationObserver.observe(this.source, {
-        attributeFilter: [j]
+        attributeFilter: [V]
       });
       return;
     }
@@ -2459,7 +2478,7 @@ class f extends S {
     if (this.stage === 3) {
       if (this.stage = 0, this.bindObservables(), this.connectBehaviors(), this.template)
         if (U(this.template)) {
-          const o = this.source, c = (n = _(o)) !== null && n !== void 0 ? n : o;
+          const o = this.source, c = (n = I(o)) !== null && n !== void 0 ? n : o;
           let d = c.firstChild, l = c.lastChild;
           o.shadowRoot === null && (w.isElementBoundaryStartMarker(d) && (d.data = "", d = d.nextSibling), w.isElementBoundaryEndMarker(l) && (l.data = "", l = l.previousSibling)), this.view = this.template.hydrate(d, l, o), (r = this.view) === null || r === void 0 || r.bind(this.source);
         } else
@@ -2564,14 +2583,14 @@ const Ze = Object.assign(de(HTMLElement), {
 function ti(i, t) {
   return i instanceof Function ? i(t) : i;
 }
-const Vt = /* @__PURE__ */ new Set(), nt = /* @__PURE__ */ new Map(), bi = (i) => (t = "vwc") => {
+const Lt = /* @__PURE__ */ new Set(), nt = /* @__PURE__ */ new Map(), gi = (i) => (t = "vwc") => {
   const e = (n) => `${t}-${n}`, s = (n) => {
     const r = e(n.name);
     let o = n.type;
-    if (o.componentName = n.name, Vt.has(r))
+    if (o.componentName = n.name, Lt.has(r))
       return;
     nt.has(o) && nt.get(o) !== r && (o = class extends o {
-    }), Vt.add(r), nt.set(o, r);
+    }), Lt.add(r), nt.set(o, r);
     for (const a of n.dependencies)
       s(a);
     const c = new Map([
@@ -2602,16 +2621,16 @@ const Vt = /* @__PURE__ */ new Set(), nt = /* @__PURE__ */ new Map(), bi = (i) =
     }).define();
   };
   s(i);
-}, gi = (i, t, e, s, n) => ({
+}, yi = (i, t, e, s, n) => ({
   name: i,
   type: t,
   template: e,
   dependencies: s,
   options: n
-}), jt = /* @__PURE__ */ new WeakMap(), he = (i) => {
-  let t = jt.get(i);
-  return t || (t = [], jt.set(i, t)), t;
-}, yi = (i, t) => {
+}), Vt = /* @__PURE__ */ new WeakMap(), he = (i) => {
+  let t = Vt.get(i);
+  return t || (t = [], Vt.set(i, t)), t;
+}, vi = (i, t) => {
   he(i).push(t);
 }, ei = (i, t) => {
   he(i).forEach((e) => e(i, t));
@@ -2705,7 +2724,7 @@ function oi() {
   const i = /* @__PURE__ */ new WeakMap();
   return (t) => (i.has(t) || i.set(t, []), i.get(t));
 }
-const fe = oi(), vi = (i) => (t, e) => {
+const fe = oi(), mi = (i) => (t, e) => {
   fe(t.constructor).push({
     newPropertyName: e,
     ...i
@@ -2742,9 +2761,9 @@ const fe = oi(), vi = (i) => (t, e) => {
   }
   return t;
 };
-class mi extends ai(li(Ze)) {
+class wi extends ai(li(Ze)) {
   static {
-    this.VIVID_VERSION = "5.7.0";
+    this.VIVID_VERSION = "5.9.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,
@@ -2757,6 +2776,7 @@ class mi extends ai(li(Ze)) {
   }
 }
 export {
+  di as A,
   lt as B,
   T as D,
   O as E,
@@ -2765,12 +2785,12 @@ export {
   g as O,
   we as S,
   Ut as U,
-  mi as V,
+  wi as V,
   He as a,
-  pi as b,
-  bi as c,
-  gi as d,
-  di as e,
+  bi as b,
+  gi as c,
+  yi as d,
+  hi as e,
   E as f,
   Wt as g,
   re as h,
@@ -2779,15 +2799,15 @@ export {
   Dt as k,
   rt as l,
   U as m,
-  fi as n,
-  hi as o,
+  pi as n,
+  ui as o,
   A as p,
   X as q,
-  vi as r,
-  yi as s,
+  mi as r,
+  vi as s,
   w as t,
   Gt as u,
-  ui as v,
+  fi as v,
   m as w,
   pe as x,
   ci as y,

package/checkbox/definition.cjs

@@ -13,7 +13,7 @@ const withSuccessText = require('../unbundled/with-success-text.cjs');
 const formElement = require('../unbundled/form-element.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
-const styles = ":host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media (hover: hover){.base: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(--vvd-color-neutral-700)}}.base.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(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base: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.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.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{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}";
+const styles = ":host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media (hover: hover){.base: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(--vvd-color-neutral-700)}}.base.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(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base: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.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.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{display:inline-flex;align-items:start;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/checkbox/definition.js

@@ -9,7 +9,7 @@ import { W as WithSuccessText } from '../unbundled/with-success-text.js';
 import { F as FormElement } from '../unbundled/form-element.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 
-const styles = ":host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media (hover: hover){.base: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(--vvd-color-neutral-700)}}.base.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(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base: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.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.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{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}";
+const styles = ":host{display:inline-flex;flex-direction:column;gap:4px;vertical-align:middle;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-checkbox-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-checkbox-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-checkbox-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-intermediate: var(--vvd-checkbox-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-checkbox-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-checkbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-checkbox-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-checkbox-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-checkbox-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-intermediate: var(--vvd-checkbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-checkbox-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media (hover: hover){.base: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(--vvd-color-neutral-700)}}.base.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(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base: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.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.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{display:inline-flex;align-items:start;gap:8px;vertical-align:middle}.base:focus-visible{outline:none}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:focus-visible .control{--focus-stroke-gap-color: transparent}.base:focus-visible .control:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - 4px)}.base:not(.checked) .indicator.checkmark{display:none}.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{display:flex;flex-wrap:wrap;align-items:center;color:var(--vvd-color-canvas-text);column-gap:4px;cursor:pointer;font:var(--vvd-typography-base)}.hide-label label{display:none}.icon{font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.6);line-height:1}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/combobox/definition.cjs

@@ -95,18 +95,11 @@ class Combobox extends withContextualHelp.WithContextualHelp(
     return this.autocomplete === ComboboxAutocomplete.both;
   }
   /**
-   * Sets focus when the open property changes.
-   *
-   * @param prev - the previous open value
-   * @param next - the current open value
-   *
    * @internal
    */
   openChanged() {
     if (this.open) {
-      this.focusAndScrollOptionIntoView();
-      fastElement.Updates.enqueue(() => this.control.focus());
-      return;
+      this.enqueueScrollSelectedOptionIntoViewIfNeeded();
     }
   }
   /**
@@ -221,13 +214,19 @@ class Combobox extends withContextualHelp.WithContextualHelp(
   focusAndScrollOptionIntoView() {
     if (this.contains(document.activeElement)) {
       this.control.focus();
-      const firstSelectedOption = this.firstSelectedOption;
-      /* v8 ignore else -- @preserve */
-      if (firstSelectedOption) {
-        requestAnimationFrame(() => {
-          firstSelectedOption.scrollIntoView({ block: "nearest" });
-        });
-      }
+      this.enqueueScrollSelectedOptionIntoViewIfNeeded();
+    }
+  }
+  /**
+   * @internal
+   */
+  enqueueScrollSelectedOptionIntoViewIfNeeded() {
+    const firstSelectedOption = this.firstSelectedOption;
+    /* v8 ignore else -- @preserve */
+    if (firstSelectedOption) {
+      requestAnimationFrame(() => {
+        firstSelectedOption.scrollIntoView({ block: "nearest" });
+      });
     }
   }
   /**

package/combobox/definition.js

@@ -4,7 +4,7 @@ import { l as listboxOptionDefinition } from '../unbundled/definition3.js';
 import { s as styles$1 } from '../unbundled/text-field.js';
 import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
-import { Updates, Observable, attr, observable, ref, slotted, html, when } from '@microsoft/fast-element';
+import { Observable, attr, observable, ref, slotted, html, when } from '@microsoft/fast-element';
 import { uniqueId, limit, classNames } from '@microsoft/fast-web-utilities';
 import { L as Listbox } from '../unbundled/listbox.js';
 import { F as FormAssociated } from '../unbundled/form-associated.js';
@@ -91,18 +91,11 @@ class Combobox extends WithContextualHelp(
     return this.autocomplete === ComboboxAutocomplete.both;
   }
   /**
-   * Sets focus when the open property changes.
-   *
-   * @param prev - the previous open value
-   * @param next - the current open value
-   *
    * @internal
    */
   openChanged() {
     if (this.open) {
-      this.focusAndScrollOptionIntoView();
-      Updates.enqueue(() => this.control.focus());
-      return;
+      this.enqueueScrollSelectedOptionIntoViewIfNeeded();
     }
   }
   /**
@@ -217,13 +210,19 @@ class Combobox extends WithContextualHelp(
   focusAndScrollOptionIntoView() {
     if (this.contains(document.activeElement)) {
       this.control.focus();
-      const firstSelectedOption = this.firstSelectedOption;
-      /* v8 ignore else -- @preserve */
-      if (firstSelectedOption) {
-        requestAnimationFrame(() => {
-          firstSelectedOption.scrollIntoView({ block: "nearest" });
-        });
-      }
+      this.enqueueScrollSelectedOptionIntoViewIfNeeded();
+    }
+  }
+  /**
+   * @internal
+   */
+  enqueueScrollSelectedOptionIntoViewIfNeeded() {
+    const firstSelectedOption = this.firstSelectedOption;
+    /* v8 ignore else -- @preserve */
+    if (firstSelectedOption) {
+      requestAnimationFrame(() => {
+        firstSelectedOption.scrollIntoView({ block: "nearest" });
+      });
     }
   }
   /**