@lwrjs/everywhere 0.11.0-alpha.8 → 0.11.0

package/build/__generated_site_amd_modules__/1/module/amd/1/l/en-US/mi/lwc/v/{3_2_0/s/ab8f5848cd7c307feeeb8a995ab42add → 4_0_1/s/89dbc50e02634ae47c903e8bfc5a5168}/lwc.js

@@ -1,4 +1,4 @@
-LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
+LWR.define('lwc/v/4_0_1', ['exports'], (function (exports) { 'use strict';
 
   /**
    * Copyright (C) 2023 salesforce.com, inc.
@@ -51,6 +51,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     defineProperty,
     freeze,
     getOwnPropertyDescriptor: getOwnPropertyDescriptor$1,
+    getOwnPropertyDescriptors,
     getOwnPropertyNames: getOwnPropertyNames$1,
     getPrototypeOf: getPrototypeOf$1,
     hasOwnProperty: hasOwnProperty$1,
@@ -161,6 +162,28 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     } while (o !== null);
   }
 
+  /*
+   * Copyright (c) 2023, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  // These must be updated when the enum is updated.
+  // It's a bit annoying to do have to do this manually, but this makes the file tree-shakeable,
+  // passing the `verify-treeshakeable.js` test.
+  const LOWEST_API_VERSION = 58 /* APIVersion.V58_244_SUMMER_23 */;
+  function isAPIFeatureEnabled(apiVersionFeature, apiVersion) {
+    switch (apiVersionFeature) {
+      case 0 /* APIFeature.LOWERCASE_SCOPE_TOKENS */:
+      case 1 /* APIFeature.TREAT_ALL_PARSE5_ERRORS_AS_ERRORS */:
+        return apiVersion >= 59 /* APIVersion.V59_246_WINTER_24 */;
+      case 2 /* APIFeature.USE_FRAGMENTS_FOR_LIGHT_DOM_SLOTS */:
+      case 3 /* APIFeature.DISABLE_OBJECT_REST_SPREAD_TRANSFORMATION */:
+      case 4 /* APIFeature.SKIP_UNNECESSARY_REGISTER_DECORATORS */:
+        return apiVersion >= 60 /* APIVersion.V60_248_SPRING_24 */;
+    }
+  }
+
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -291,9 +314,9 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   // Increment whenever the LWC template compiler changes
-  const LWC_VERSION = "3.2.0";
+  const LWC_VERSION = "4.0.1";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 3.2.0 */
+  /** version: 4.0.1 */
 
   /**
    * Copyright (C) 2023 salesforce.com, inc.
@@ -308,14 +331,14 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
   // When deprecating a feature flag, ensure that it is also no longer set in the application. For
   // example, in core, the flag should be removed from LwcPermAndPrefUtilImpl.java
   const features = {
-    DUMMY_TEST_FLAG: null,
+    PLACEHOLDER_TEST_FLAG: null,
     ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST: null,
     ENABLE_MIXED_SHADOW_MODE: null,
     ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE: null,
     ENABLE_WIRE_SYNC_EMIT: null,
     DISABLE_LIGHT_DOM_UNSCOPED_CSS: null,
     ENABLE_FROZEN_TEMPLATE: null,
-    DISABLE_ARIA_REFLECTION_POLYFILL: null
+    ENABLE_LEGACY_SCOPE_TOKENS: null
   };
   // eslint-disable-next-line no-restricted-properties
   if (!_globalThis.lwcRuntimeFlags) {
@@ -372,82 +395,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       setFeatureFlag(name, value);
     }
   }
-  /** version: 3.2.0 */
-
-  /**
-   * Copyright (C) 2023 salesforce.com, inc.
-   */
-
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-  function detect(propName, prototype) {
-    return isUndefined$1(getOwnPropertyDescriptor$1(prototype, propName));
-  }
-
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-  function createAriaPropertyPropertyDescriptor(attrName) {
-    // Note that we need to call this.{get,set,has,remove}Attribute rather than dereferencing
-    // from Element.prototype, because these methods are overridden in LightningElement.
-    return {
-      get() {
-        // reflect what's in the attribute
-        return this.hasAttribute(attrName) ? this.getAttribute(attrName) : null;
-      },
-      set(newValue) {
-        // reflect into the corresponding attribute
-        if (isNull(newValue)) {
-          this.removeAttribute(attrName);
-        } else {
-          this.setAttribute(attrName, newValue);
-        }
-      },
-      configurable: true,
-      enumerable: true
-    };
-  }
-  function patch$1(propName, prototype) {
-    const attrName = AriaPropNameToAttrNameMap[propName];
-    const descriptor = createAriaPropertyPropertyDescriptor(attrName);
-    defineProperty(prototype, propName, descriptor);
-  }
-
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-  function applyAriaReflection(prototype = Element.prototype) {
-    const ElementPrototypeAriaPropertyNames = keys(AriaPropNameToAttrNameMap);
-    for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1) {
-      const propName = ElementPrototypeAriaPropertyNames[i];
-      if (detect(propName, prototype)) {
-        patch$1(propName, prototype);
-      }
-    }
-  }
-  /** version: 3.2.0 */
-
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-  if (!lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
-    // If DISABLE_ARIA_REFLECTION_POLYFILL is false, then we need to apply the ARIA reflection polyfill globally,
-    // i.e. to the global Element.prototype
-    applyAriaReflection();
-  }
+  /** version: 4.0.1 */
 
   /**
    * Copyright (C) 2023 salesforce.com, inc.
@@ -522,6 +470,12 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       currentDispatcher$1(reportingEventId, payload);
     }
   }
+  /**
+   * Return true if reporting is enabled
+   */
+  function isReportingEnabled() {
+    return enabled$1;
+  }
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -816,20 +770,6 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     }
     return list;
   }
-  // Set a ref (lwc:ref) on a VM, from a template API
-  function setRefVNode(vm, ref, vnode) {
-    if (process.env.NODE_ENV !== 'production' && isUndefined$1(vm.refVNodes)) {
-      throw new Error('refVNodes must be defined when setting a ref');
-    }
-    // If this method is called, then vm.refVNodes is set as the template has refs.
-    // If not, then something went wrong and we threw an error above.
-    const refVNodes = vm.refVNodes;
-    // In cases of conflict (two elements with the same ref), prefer, the last one,
-    // in depth-first traversal order.
-    if (!(ref in refVNodes) || refVNodes[ref].key < vnode.key) {
-      refVNodes[ref] = vnode;
-    }
-  }
   // Throw an error if we're running in prod mode. Ensures code is truly removed from prod mode.
   function assertNotProd() {
     /* istanbul ignore if */
@@ -856,6 +796,44 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
   const instrumentDef = (_a = _globalThis.__lwc_instrument_cmp_def) !== null && _a !== void 0 ? _a : noop;
   const instrumentInstance = (_b = _globalThis.__lwc_instrument_cmp_instance) !== null && _b !== void 0 ? _b : noop;
 
+  /*
+   * Copyright (c) 2023, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  // Apply ARIA string reflection behavior to a prototype.
+  // This is deliberately kept separate from @lwc/aria-reflection. @lwc/aria-reflection is a global polyfill that is
+  // needed for backwards compatibility in LEX, whereas `applyAriaReflection` is designed to only apply to our own
+  // LightningElement/BaseBridgeElement prototypes.
+  function applyAriaReflection(prototype) {
+    for (const propName of keys(AriaPropNameToAttrNameMap)) {
+      const attrName = AriaPropNameToAttrNameMap[propName];
+      if (isUndefined$1(getOwnPropertyDescriptor$1(prototype, propName))) {
+        // Note that we need to call this.{get,set,has,remove}Attribute rather than dereferencing
+        // from Element.prototype, because these methods are overridden in LightningElement.
+        defineProperty(prototype, propName, {
+          get() {
+            return this.getAttribute(attrName);
+          },
+          set(newValue) {
+            // TODO [#3284]: there is disagreement between browsers and the spec on how to treat undefined
+            // Our historical behavior is to only treat null as removing the attribute
+            // See also https://github.com/w3c/aria/issues/1858
+            if (isNull(newValue)) {
+              this.removeAttribute(attrName);
+            } else {
+              this.setAttribute(attrName, newValue);
+            }
+          },
+          // configurable and enumerable to allow it to be overridden – this mimics Safari's/Chrome's behavior
+          configurable: true,
+          enumerable: true
+        });
+      }
+    }
+  }
+
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -936,8 +914,8 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     assertNotProd(); // this method should never leak to prod
     isDomMutationAllowed = false;
   }
-  function logMissingPortalError(name, type) {
-    return logError(`The \`${name}\` ${type} is available only on elements that use the \`lwc:dom="manual"\` directive.`);
+  function logMissingPortalWarn(name, type) {
+    return logWarn(`The \`${name}\` ${type} is available only on elements that use the \`lwc:dom="manual"\` directive.`);
   }
   function patchElementWithRestrictions(elm, options) {
     assertNotProd(); // this method should never leak to prod
@@ -967,14 +945,14 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       assign(descriptors, {
         appendChild: generateDataDescriptor({
           value(aChild) {
-            logMissingPortalError('appendChild', 'method');
+            logMissingPortalWarn('appendChild', 'method');
             return appendChild.call(this, aChild);
           }
         }),
         insertBefore: generateDataDescriptor({
           value(newNode, referenceNode) {
             if (!isDomMutationAllowed) {
-              logMissingPortalError('insertBefore', 'method');
+              logMissingPortalWarn('insertBefore', 'method');
             }
             return insertBefore.call(this, newNode, referenceNode);
           }
@@ -982,14 +960,14 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
         removeChild: generateDataDescriptor({
           value(aChild) {
             if (!isDomMutationAllowed) {
-              logMissingPortalError('removeChild', 'method');
+              logMissingPortalWarn('removeChild', 'method');
             }
             return removeChild.call(this, aChild);
           }
         }),
         replaceChild: generateDataDescriptor({
           value(newChild, oldChild) {
-            logMissingPortalError('replaceChild', 'method');
+            logMissingPortalWarn('replaceChild', 'method');
             return replaceChild.call(this, newChild, oldChild);
           }
         }),
@@ -999,7 +977,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
           },
           set(value) {
             if (!isDomMutationAllowed) {
-              logMissingPortalError('nodeValue', 'property');
+              logMissingPortalWarn('nodeValue', 'property');
             }
             originalNodeValueDescriptor.set.call(this, value);
           }
@@ -1009,7 +987,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
             return originalTextContentDescriptor.get.call(this);
           },
           set(value) {
-            logMissingPortalError('textContent', 'property');
+            logMissingPortalWarn('textContent', 'property');
             originalTextContentDescriptor.set.call(this, value);
           }
         }),
@@ -1018,7 +996,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
             return originalInnerHTMLDescriptor.get.call(this);
           },
           set(value) {
-            logMissingPortalError('innerHTML', 'property');
+            logMissingPortalWarn('innerHTML', 'property');
             return originalInnerHTMLDescriptor.set.call(this, value);
           }
         })
@@ -1527,7 +1505,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       valueMutated(originalTarget, key);
       return true;
     }
-    /*LWC compiler v3.2.0*/
+    /*LWC compiler v4.0.1*/
   }
   const getterMap = new WeakMap();
   const setterMap = new WeakMap();
@@ -1620,7 +1598,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       /* istanbul ignore next */
       return false;
     }
-    /*LWC compiler v3.2.0*/
+    /*LWC compiler v4.0.1*/
   }
   function extract(objectOrArray) {
     if (isArray(objectOrArray)) {
@@ -1987,7 +1965,68 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       logError(`this.${methodOrPropName} should not be called during the construction of the custom element for ${getComponentTag(vm)} because the element is not yet in the DOM or has no children yet.`);
     }
   }
-  const supportsElementInternals = typeof ElementInternals !== 'undefined';
+  // List of properties on ElementInternals that are formAssociated can be found in the spec:
+  // https://html.spec.whatwg.org/multipage/custom-elements.html#form-associated-custom-elements
+  const formAssociatedProps = new Set(['setFormValue', 'form', 'setValidity', 'willValidate', 'validity', 'validationMessage', 'checkValidity', 'reportValidity', 'labels']);
+  // Verify that access to a form-associated property of the ElementInternals proxy has formAssociated set in the LWC.
+  function verifyPropForFormAssociation(propertyKey, isFormAssociated) {
+    if (isString(propertyKey) && formAssociatedProps.has(propertyKey) && !isFormAssociated) {
+      //Note this error message mirrors Chrome and Firefox error messages, in Safari the error is slightly different.
+      throw new DOMException(`Failed to execute '${propertyKey}' on 'ElementInternals': The target element is not a form-associated custom element.`);
+    }
+  }
+  const elementInternalsAccessorAllowList = new Set(['shadowRoot', 'role', ...formAssociatedProps]);
+  // Prevent access to properties not defined in the HTML spec in case browsers decide to
+  // provide new APIs that provide access to form associated properties.
+  // This can be removed along with UpgradeableConstructor.
+  function isAllowedElementInternalAccessor(propertyKey) {
+    let isAllowedAccessor = false;
+    // As of this writing all ElementInternal property keys as described in the spec are implemented with strings
+    // in Chrome, Firefox, and Safari
+    if (isString(propertyKey)) {
+      // Allow list is based on HTML spec:
+      // https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface
+      isAllowedAccessor = elementInternalsAccessorAllowList.has(propertyKey) || /^aria/.test(propertyKey);
+      if (!isAllowedAccessor && process.env.NODE_ENV !== 'production') {
+        logWarn('Only properties defined in the ElementInternals HTML spec are available.');
+      }
+    }
+    return isAllowedAccessor;
+  }
+  // Wrap all ElementInternal objects in a proxy to prevent form association when `formAssociated` is not set on an LWC.
+  // This is needed because the 1UpgradeableConstructor1 always sets `formAssociated=true`, which means all
+  // ElementInternal objects will have form-associated properties set when an LWC is placed in a form.
+  // We are doing this to guard against customers taking a dependency on form elements being associated to ElementInternals
+  // when 'formAssociated' has not been set on the LWC.
+  function createElementInternalsProxy(elementInternals, isFormAssociated) {
+    const elementInternalsProxy = new Proxy(elementInternals, {
+      set(target, propertyKey, newValue) {
+        if (isAllowedElementInternalAccessor(propertyKey)) {
+          // Verify that formAssociated is set for form associated properties
+          verifyPropForFormAssociation(propertyKey, isFormAssociated);
+          return Reflect.set(target, propertyKey, newValue);
+        }
+        // As of this writing ElementInternals do not have non-string properties that can be set.
+        return false;
+      },
+      get(target, propertyKey) {
+        if (
+        // Pass through Object.prototype methods such as toString()
+        hasOwnProperty$1.call(Object.prototype, propertyKey) ||
+        // As of this writing, ElementInternals only uses Symbol.toStringTag which is called
+        // on Object.hasOwnProperty invocations
+        Symbol.for('Symbol.toStringTag') === propertyKey ||
+        // ElementInternals allow listed properties
+        isAllowedElementInternalAccessor(propertyKey)) {
+          // Verify that formAssociated is set for form associated properties
+          verifyPropForFormAssociation(propertyKey, isFormAssociated);
+          const propertyValue = Reflect.get(target, propertyKey);
+          return isFunction$1(propertyValue) ? propertyValue.bind(target) : propertyValue;
+        }
+      }
+    });
+    return elementInternalsProxy;
+  }
   // @ts-ignore
   LightningElement.prototype = {
     constructor: LightningElement,
@@ -2141,18 +2180,19 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       const vm = getAssociatedVM(this);
       const {
         elm,
+        def: {
+          formAssociated
+        },
         renderer: {
           attachInternals
         }
       } = vm;
-      if (isFalse(supportsElementInternals)) {
-        // Browsers that don't support attachInternals will need to be polyfilled before LWC is loaded.
-        throw new Error('attachInternals API is not supported in this browser environment.');
-      }
-      if (vm.renderMode === 0 /* RenderMode.Light */ || vm.shadowMode === 1 /* ShadowMode.Synthetic */) {
+      if (vm.shadowMode === 1 /* ShadowMode.Synthetic */) {
         throw new Error('attachInternals API is not supported in light DOM or synthetic shadow.');
       }
-      return attachInternals(elm);
+      const internals = attachInternals(elm);
+      // #TODO[2970]: remove proxy once `UpgradeableConstructor` has been removed
+      return createElementInternalsProxy(internals, Boolean(formAssociated));
     },
     get isConnected() {
       const vm = getAssociatedVM(this);
@@ -2349,15 +2389,10 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     lightningBasedDescriptors[propName] = createBridgeToElementDescriptor(propName, HTMLElementOriginalDescriptors[propName]);
   }
   defineProperties(LightningElement.prototype, lightningBasedDescriptors);
-  function applyAriaReflectionToLightningElement() {
-    // If ARIA reflection is not applied globally to Element.prototype, or if we are running server-side,
-    // apply it to LightningElement.prototype.
-    // This allows `this.aria*` property accessors to work from inside a component, and to reflect `aria-*` attrs.
-    applyAriaReflection(LightningElement.prototype);
-  }
-  if (lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
-    applyAriaReflectionToLightningElement();
-  }
+  // Apply ARIA reflection to LightningElement.prototype, on both the browser and server.
+  // This allows `this.aria*` property accessors to work from inside a component, and to reflect `aria-*` attrs.
+  // Note this works regardless of whether the global ARIA reflection polyfill is applied or not.
+  applyAriaReflection(LightningElement.prototype);
   defineProperty(LightningElement, 'CustomElementConstructor', {
     get() {
       // If required, a runtime-specific implementation must be defined.
@@ -3223,9 +3258,24 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       this[propName] = newValue;
     };
   }
-  function HTMLBridgeElementFactory(SuperClass, props, methods) {
+  function createAccessorThatWarns(propName) {
+    let prop;
+    return {
+      get() {
+        logWarn(`The property "${propName}" is not publicly accessible. Add the @api annotation to the property declaration or getter/setter in the component to make it accessible.`);
+        return prop;
+      },
+      set(value) {
+        logWarn(`The property "${propName}" is not publicly accessible. Add the @api annotation to the property declaration or getter/setter in the component to make it accessible.`);
+        prop = value;
+      },
+      enumerable: true,
+      configurable: true
+    };
+  }
+  function HTMLBridgeElementFactory(SuperClass, publicProperties, methods, observedFields, proto, hasCustomSuperClass) {
     const HTMLBridgeElement = class extends SuperClass {
-      /*LWC compiler v3.2.0*/
+      /*LWC compiler v4.0.1*/
     };
     // generating the hash table for attributes to avoid duplicate fields and facilitate validation
     // and false positives in case of inheritance.
@@ -3237,9 +3287,30 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       observedAttributes: superObservedAttributes = []
     } = SuperClass;
     const descriptors = create(null);
+    // present a hint message so that developers are aware that they have not decorated property with @api
+    if (process.env.NODE_ENV !== 'production') {
+      // TODO [#3761]: enable for components that don't extend from LightningElement
+      if (!isUndefined$1(proto) && !isNull(proto) && !hasCustomSuperClass) {
+        const nonPublicPropertiesToWarnOn = new Set([
+        // getters, setters, and methods
+        ...keys(getOwnPropertyDescriptors(proto)),
+        // class properties
+        ...observedFields]
+        // we don't want to override HTMLElement props because these are meaningful in other ways,
+        // and can break tooling that expects it to be iterable or defined, e.g. Jest:
+        // https://github.com/jestjs/jest/blob/b4c9587/packages/pretty-format/src/plugins/DOMElement.ts#L95
+        // It also doesn't make sense to override e.g. "constructor".
+        .filter(propName => !(propName in HTMLElementPrototype)));
+        for (const propName of nonPublicPropertiesToWarnOn) {
+          if (ArrayIndexOf.call(publicProperties, propName) === -1) {
+            descriptors[propName] = createAccessorThatWarns(propName);
+          }
+        }
+      }
+    }
     // expose getters and setters for each public props on the new Element Bridge
-    for (let i = 0, len = props.length; i < len; i += 1) {
-      const propName = props[i];
+    for (let i = 0, len = publicProperties.length; i < len; i += 1) {
+      const propName = publicProperties[i];
       attributeToPropMap[htmlPropertyToAttribute(propName)] = propName;
       descriptors[propName] = {
         get: createGetter(propName),
@@ -3266,9 +3337,26 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     };
     // To avoid leaking private component details, accessing internals from outside a component is not allowed.
     descriptors.attachInternals = {
+      set() {
+        if (process.env.NODE_ENV !== 'production') {
+          logWarn('attachInternals cannot be accessed outside of a component. Use this.attachInternals instead.');
+        }
+      },
+      get() {
+        if (process.env.NODE_ENV !== 'production') {
+          logWarn('attachInternals cannot be accessed outside of a component. Use this.attachInternals instead.');
+        }
+      }
+    };
+    descriptors.formAssociated = {
+      set() {
+        if (process.env.NODE_ENV !== 'production') {
+          logWarn('formAssociated cannot be accessed outside of a component. Set the value within the component class.');
+        }
+      },
       get() {
         if (process.env.NODE_ENV !== 'production') {
-          logError('attachInternals cannot be accessed outside of a component. Use this.attachInternals instead.');
+          logWarn('formAssociated cannot be accessed outside of a component. Set the value within the component class.');
         }
       }
     };
@@ -3282,20 +3370,20 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     defineProperties(HTMLBridgeElement.prototype, descriptors);
     return HTMLBridgeElement;
   }
-  const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
+  const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), [], [], null, false);
   {
     // This ARIA reflection only really makes sense in the browser. On the server, there is no `renderedCallback()`,
     // so you cannot do e.g. `this.template.querySelector('x-child').ariaBusy = 'true'`. So we don't need to expose
     // ARIA props outside the LightningElement
-    if (lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
-      // If ARIA reflection is not applied globally to Element.prototype, apply it to HTMLBridgeElement.prototype.
-      // This allows `elm.aria*` property accessors to work from outside a component, and to reflect `aria-*` attrs.
-      // This is especially important because the template compiler compiles aria-* attrs on components to aria* props
-      //
-      // Also note that we apply this to BaseBridgeElement.prototype to avoid excessively redefining property
-      // accessors inside the HTMLBridgeElementFactory.
-      applyAriaReflection(BaseBridgeElement.prototype);
-    }
+    //
+    // Apply ARIA reflection to HTMLBridgeElement.prototype. This allows `elm.aria*` property accessors to work from
+    // outside a component, and to reflect `aria-*` attrs. This is especially important because the template compiler
+    // compiles aria-* attrs on components to aria* props.
+    // Note this works regardless of whether the global ARIA reflection polyfill is applied or not.
+    //
+    // Also note that we apply this to BaseBridgeElement.prototype to avoid excessively redefining property
+    // accessors inside the HTMLBridgeElementFactory.
+    applyAriaReflection(BaseBridgeElement.prototype);
   }
   freeze(BaseBridgeElement);
   seal(BaseBridgeElement.prototype);
@@ -3582,7 +3670,8 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
   function createComponentDef(Ctor) {
     const {
       shadowSupportMode: ctorShadowSupportMode,
-      renderMode: ctorRenderMode
+      renderMode: ctorRenderMode,
+      formAssociated: ctorFormAssociated
     } = Ctor;
     if (process.env.NODE_ENV !== 'production') {
       const ctorName = Ctor.name;
@@ -3593,7 +3682,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
         // But we keep it here just in case.
         logError(`Missing ${ctorName}.constructor, ${ctorName} should have a "constructor" property.`);
       }
-      if (!isUndefined$1(ctorShadowSupportMode) && ctorShadowSupportMode !== "any" /* ShadowSupportMode.Any */ && ctorShadowSupportMode !== "reset" /* ShadowSupportMode.Default */) {
+      if (!isUndefined$1(ctorShadowSupportMode) && ctorShadowSupportMode !== "any" /* ShadowSupportMode.Any */ && ctorShadowSupportMode !== "reset" /* ShadowSupportMode.Default */ && ctorShadowSupportMode !== "native" /* ShadowSupportMode.Native */) {
         logError(`Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
       }
       if (!isUndefined$1(ctorRenderMode) && ctorRenderMode !== 'light' && ctorRenderMode !== 'shadow') {
@@ -3615,11 +3704,16 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       disconnectedCallback,
       renderedCallback,
       errorCallback,
+      formAssociatedCallback,
+      formResetCallback,
+      formDisabledCallback,
+      formStateRestoreCallback,
       render
     } = proto;
     const superProto = getCtorProto(Ctor);
-    const superDef = superProto !== LightningElement ? getComponentInternalDef(superProto) : lightingElementDef;
-    const bridge = HTMLBridgeElementFactory(superDef.bridge, keys(apiFields), keys(apiMethods));
+    const hasCustomSuperClass = superProto !== LightningElement;
+    const superDef = hasCustomSuperClass ? getComponentInternalDef(superProto) : lightingElementDef;
+    const bridge = HTMLBridgeElementFactory(superDef.bridge, keys(apiFields), keys(apiMethods), keys(observedFields), proto, hasCustomSuperClass);
     const props = assign(create(null), superDef.props, apiFields);
     const propsConfig = assign(create(null), superDef.propsConfig, apiFieldsConfig);
     const methods = assign(create(null), superDef.methods, apiMethods);
@@ -3628,6 +3722,10 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     disconnectedCallback = disconnectedCallback || superDef.disconnectedCallback;
     renderedCallback = renderedCallback || superDef.renderedCallback;
     errorCallback = errorCallback || superDef.errorCallback;
+    formAssociatedCallback = formAssociatedCallback || superDef.formAssociatedCallback;
+    formResetCallback = formResetCallback || superDef.formResetCallback;
+    formDisabledCallback = formDisabledCallback || superDef.formDisabledCallback;
+    formStateRestoreCallback = formStateRestoreCallback || superDef.formStateRestoreCallback;
     render = render || superDef.render;
     let shadowSupportMode = superDef.shadowSupportMode;
     if (!isUndefined$1(ctorShadowSupportMode)) {
@@ -3638,6 +3736,10 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       renderMode = ctorRenderMode === 'light' ? 0 /* RenderMode.Light */ : 1 /* RenderMode.Shadow */;
     }
 
+    let formAssociated = superDef.formAssociated;
+    if (!isUndefined$1(ctorFormAssociated)) {
+      formAssociated = ctorFormAssociated;
+    }
     const template = getComponentRegisteredTemplate(Ctor) || superDef.template;
     const name = Ctor.name || superDef.name;
     // installing observed fields into the prototype.
@@ -3653,10 +3755,15 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       template,
       renderMode,
       shadowSupportMode,
+      formAssociated,
       connectedCallback,
       disconnectedCallback,
-      renderedCallback,
       errorCallback,
+      formAssociatedCallback,
+      formDisabledCallback,
+      formResetCallback,
+      formStateRestoreCallback,
+      renderedCallback,
       render
     };
     // This is a no-op unless Lightning DevTools are enabled.
@@ -3733,6 +3840,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     methods: EmptyObject,
     renderMode: 1 /* RenderMode.Shadow */,
     shadowSupportMode: "reset" /* ShadowSupportMode.Default */,
+    formAssociated: undefined,
     wire: EmptyObject,
     bridge: BaseBridgeElement,
     template: defaultEmptyTemplate,
@@ -3795,7 +3903,8 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       }
     }, [api.t(content)]);
   }
-  function updateStylesheetToken(vm, template) {
+  // TODO [#3733]: remove support for legacy scope tokens
+  function updateStylesheetToken(vm, template, legacy) {
     const {
       elm,
       context,
@@ -3808,9 +3917,9 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       }
     } = vm;
     const {
-      stylesheets: newStylesheets,
-      stylesheetToken: newStylesheetToken
+      stylesheets: newStylesheets
     } = template;
+    const newStylesheetToken = legacy ? template.legacyStylesheetToken : template.stylesheetToken;
     const {
       stylesheets: newVmStylesheets
     } = vm;
@@ -3822,11 +3931,18 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     let newHasTokenInClass;
     let newHasTokenInAttribute;
     // Reset the styling token applied to the host element.
-    const {
-      stylesheetToken: oldToken,
-      hasTokenInClass: oldHasTokenInClass,
-      hasTokenInAttribute: oldHasTokenInAttribute
-    } = context;
+    let oldToken;
+    let oldHasTokenInClass;
+    let oldHasTokenInAttribute;
+    if (legacy) {
+      oldToken = context.legacyStylesheetToken;
+      oldHasTokenInClass = context.hasLegacyTokenInClass;
+      oldHasTokenInAttribute = context.hasLegacyTokenInAttribute;
+    } else {
+      oldToken = context.stylesheetToken;
+      oldHasTokenInClass = context.hasTokenInClass;
+      oldHasTokenInAttribute = context.hasTokenInAttribute;
+    }
     if (!isUndefined$1(oldToken)) {
       if (oldHasTokenInClass) {
         getClassList(elm).remove(makeHostToken(oldToken));
@@ -3854,9 +3970,15 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       }
     }
     // Update the styling tokens present on the context object.
-    context.stylesheetToken = newToken;
-    context.hasTokenInClass = newHasTokenInClass;
-    context.hasTokenInAttribute = newHasTokenInAttribute;
+    if (legacy) {
+      context.legacyStylesheetToken = newToken;
+      context.hasLegacyTokenInClass = newHasTokenInClass;
+      context.hasLegacyTokenInAttribute = newHasTokenInAttribute;
+    } else {
+      context.stylesheetToken = newToken;
+      context.hasTokenInClass = newHasTokenInClass;
+      context.hasTokenInAttribute = newHasTokenInAttribute;
+    }
   }
   function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
     const content = [];
@@ -3940,12 +4062,13 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
    * this returns the unique token for that scoped stylesheet. Otherwise
    * it returns null.
    */
-  function getScopeTokenClass(owner) {
+  // TODO [#3733]: remove support for legacy scope tokens
+  function getScopeTokenClass(owner, legacy) {
     const {
       cmpTemplate,
       context
     } = owner;
-    return context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken) || null;
+    return context.hasScopedStyles && (legacy ? cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.legacyStylesheetToken : cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken) || null;
   }
   /**
    * This function returns the host style token for a custom element if it
@@ -4097,32 +4220,22 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     return sel === 'input' && (key === 'value' || key === 'checked');
   }
   function patchProps(oldVnode, vnode, renderer) {
-    let {
-      props
-    } = vnode.data;
     const {
-      spread
+      props
     } = vnode.data;
-    if (isUndefined$1(props) && isUndefined$1(spread)) {
+    if (isUndefined$1(props)) {
       return;
     }
     let oldProps;
     if (!isNull(oldVnode)) {
       oldProps = oldVnode.data.props;
-      const oldSpread = oldVnode.data.spread;
       // Props may be the same due to the static content optimization, so we can skip diffing
-      if (oldProps === props && oldSpread === spread) {
+      if (oldProps === props) {
         return;
       }
       if (isUndefined$1(oldProps)) {
         oldProps = EmptyObject;
       }
-      if (!isUndefined$1(oldSpread)) {
-        oldProps = assign({}, oldProps, oldSpread);
-      }
-    }
-    if (!isUndefined$1(spread)) {
-      props = assign({}, props, spread);
     }
     const isFirstPatch = isNull(oldVnode);
     const {
@@ -4332,6 +4445,118 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     }
   }
 
+  /*
+   * Copyright (c) 2023, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  // Set a ref (lwc:ref) on a VM, from a template API
+  function applyRefs(vnode, owner) {
+    const {
+      data
+    } = vnode;
+    const {
+      ref
+    } = data;
+    if (isUndefined$1(ref)) {
+      return;
+    }
+    if (process.env.NODE_ENV !== 'production' && isUndefined$1(owner.refVNodes)) {
+      throw new Error('refVNodes must be defined when setting a ref');
+    }
+    // If this method is called, then vm.refVNodes is set as the template has refs.
+    // If not, then something went wrong and we threw an error above.
+    const refVNodes = owner.refVNodes;
+    // In cases of conflict (two elements with the same ref), prefer the last one,
+    // in depth-first traversal order. This happens automatically due to how we render
+    refVNodes[ref] = vnode;
+  }
+
+  /*
+   * Copyright (c) 2023, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  function traverseAndSetElements(root, parts, renderer) {
+    const numParts = parts.length;
+    // Optimization given that, in most cases, there will be one part, and it's just the root
+    if (numParts === 1) {
+      const firstPart = parts[0];
+      if (firstPart.partId === 0) {
+        // 0 means the root node
+        firstPart.elm = root;
+        return;
+      }
+    }
+    const partIdsToParts = new Map();
+    for (const staticPart of parts) {
+      partIdsToParts.set(staticPart.partId, staticPart);
+    }
+    let numFoundParts = 0;
+    const {
+      previousSibling,
+      getLastChild
+    } = renderer;
+    const stack = [root];
+    let partId = -1;
+    // Depth-first traversal. We assign a partId to each element, which is an integer based on traversal order.
+    while (stack.length > 0) {
+      const elm = ArrayShift.call(stack);
+      partId++;
+      const part = partIdsToParts.get(partId);
+      if (!isUndefined$1(part)) {
+        part.elm = elm;
+        if (++numFoundParts === numParts) {
+          return; // perf optimization - stop traversing once we've found everything we need
+        }
+      }
+      // For depth-first traversal, prepend to the stack in reverse order
+      // Note that we traverse using `*Child`/`*Sibling` rather than `children` because the browser uses a linked
+      // list under the hood to represent the DOM tree, so it's faster to do this than to create an underlying array
+      // by calling `children`.
+      let child = getLastChild(elm);
+      while (!isNull(child)) {
+        ArrayUnshift.call(stack, child);
+        child = previousSibling(child);
+      }
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      assert.isTrue(numFoundParts === numParts, `Should have found all parts by now. Found ${numFoundParts}, needed ${numParts}.`);
+    }
+  }
+  /**
+   * Given an array of static parts, do all the mounting required for these parts.
+   *
+   * @param root - the root element
+   * @param vnode - the parent VStatic
+   * @param renderer - the renderer to use
+   * @param mount - true this is a first (mount) render as opposed to a subsequent (patch) render
+   */
+  function applyStaticParts(root, vnode, renderer, mount) {
+    const {
+      parts,
+      owner
+    } = vnode;
+    if (isUndefined$1(parts)) {
+      return;
+    }
+    // This adds `part.elm` to each `part`. We have to do this on every mount/patch because the `parts`
+    // array is recreated from scratch every time, so each `part.elm` is now undefined.
+    // TODO [#3800]: avoid calling traverseAndSetElements on every re-render
+    traverseAndSetElements(root, parts, renderer);
+    // Currently only event listeners and refs are supported for static vnodes
+    for (const part of parts) {
+      if (mount) {
+        // Event listeners only need to be applied once when mounting
+        applyEventListeners(part, renderer);
+      }
+      // Refs must be updated after every render due to refVNodes getting reset before every render
+      applyRefs(part, owner);
+    }
+  }
+
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -4376,7 +4601,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
         patchComment(n1, n2, renderer);
         break;
       case 4 /* VNodeType.Static */:
-        n2.elm = n1.elm;
+        patchStatic(n1, n2, renderer);
         break;
       case 5 /* VNodeType.Fragment */:
         patchFragment(n1, n2, parent, renderer);
@@ -4490,13 +4715,18 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     applyStyleScoping(elm, owner, renderer);
     applyDomManual(elm, vnode);
     applyElementRestrictions(elm, vnode);
-    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    patchElementPropsAndAttrsAndRefs$1(null, vnode, renderer);
     insertNode(elm, parent, anchor, renderer);
     mountVNodes(vnode.children, elm, renderer, null);
   }
+  function patchStatic(n1, n2, renderer) {
+    const elm = n2.elm = n1.elm;
+    // The `refs` object is blown away in every re-render, so we always need to re-apply them
+    applyStaticParts(elm, n2, renderer, false);
+  }
   function patchElement(n1, n2, renderer) {
     const elm = n2.elm = n1.elm;
-    patchElementPropsAndAttrs$1(n1, n2, renderer);
+    patchElementPropsAndAttrsAndRefs$1(n1, n2, renderer);
     patchChildren(n1.children, n2.children, elm, renderer);
   }
   function mountStatic(vnode, parent, anchor, renderer) {
@@ -4521,8 +4751,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       }
     }
     insertNode(elm, parent, anchor, renderer);
-    // Event listeners are only applied once when mounting, so they are allowed for static vnodes
-    applyEventListeners(vnode, renderer);
+    applyStaticParts(elm, vnode, renderer, true);
   }
   function mountCustomElement(vnode, parent, anchor, renderer) {
     const {
@@ -4545,6 +4774,10 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     };
     let connectedCallback;
     let disconnectedCallback;
+    let formAssociatedCallback;
+    let formDisabledCallback;
+    let formResetCallback;
+    let formStateRestoreCallback;
     if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
       connectedCallback = elm => {
         connectRootElement(elm);
@@ -4552,13 +4785,25 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       disconnectedCallback = elm => {
         disconnectRootElement(elm);
       };
+      formAssociatedCallback = elm => {
+        runFormAssociatedCallback(elm);
+      };
+      formDisabledCallback = elm => {
+        runFormDisabledCallback(elm);
+      };
+      formResetCallback = elm => {
+        runFormResetCallback(elm);
+      };
+      formStateRestoreCallback = elm => {
+        runFormStateRestoreCallback(elm);
+      };
     }
     // Should never get a tag with upper case letter at this point; the compiler
     // should produce only tags with lowercase letters. However, the Java
     // compiler may generate tagnames with uppercase letters so - for backwards
     // compatibility, we lower case the tagname here.
     const normalizedTagname = sel.toLowerCase();
-    const elm = createCustomElement(normalizedTagname, upgradeCallback, connectedCallback, disconnectedCallback);
+    const elm = createCustomElement(normalizedTagname, upgradeCallback, connectedCallback, disconnectedCallback, formAssociatedCallback, formDisabledCallback, formResetCallback, formStateRestoreCallback);
     vnode.elm = elm;
     vnode.vm = vm;
     linkNodeToShadow(elm, owner, renderer);
@@ -4566,7 +4811,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     if (vm) {
       allocateChildren(vnode, vm);
     }
-    patchElementPropsAndAttrs$1(null, vnode, renderer);
+    patchElementPropsAndAttrsAndRefs$1(null, vnode, renderer);
     insertNode(elm, parent, anchor, renderer);
     if (vm) {
       {
@@ -4597,7 +4842,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       // Otherwise patch the existing component with new props/attrs/etc.
       const elm = n2.elm = n1.elm;
       const vm = n2.vm = n1.vm;
-      patchElementPropsAndAttrs$1(n1, n2, renderer);
+      patchElementPropsAndAttrsAndRefs$1(n1, n2, renderer);
       if (!isUndefined$1(vm)) {
         // in fallback mode, the allocation will always set children to
         // empty and delegate the real allocation to the slot elements
@@ -4762,7 +5007,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       lockDomMutation();
     }
   }
-  function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
+  function patchElementPropsAndAttrsAndRefs$1(oldVnode, vnode, renderer) {
     if (isNull(oldVnode)) {
       applyEventListeners(vnode, renderer);
       applyStaticClassAttribute(vnode, renderer);
@@ -4774,24 +5019,43 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     patchStyleAttribute(oldVnode, vnode, renderer);
     patchAttributes(oldVnode, vnode, renderer);
     patchProps(oldVnode, vnode, renderer);
+    // The `refs` object is blown away in every re-render, so we always need to re-apply them
+    applyRefs(vnode, vnode.owner);
   }
   function applyStyleScoping(elm, owner, renderer) {
+    const {
+      getClassList
+    } = renderer;
     // Set the class name for `*.scoped.css` style scoping.
-    const scopeToken = getScopeTokenClass(owner);
+    const scopeToken = getScopeTokenClass(owner, /* legacy */false);
     if (!isNull(scopeToken)) {
-      const {
-        getClassList
-      } = renderer;
       // TODO [#2762]: this dot notation with add is probably problematic
       // probably we should have a renderer api for just the add operation
       getClassList(elm).add(scopeToken);
     }
+    // TODO [#3733]: remove support for legacy scope tokens
+    if (lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS) {
+      const legacyScopeToken = getScopeTokenClass(owner, /* legacy */true);
+      if (!isNull(legacyScopeToken)) {
+        // TODO [#2762]: this dot notation with add is probably problematic
+        // probably we should have a renderer api for just the add operation
+        getClassList(elm).add(legacyScopeToken);
+      }
+    }
     // Set property element for synthetic shadow DOM style scoping.
     const {
       stylesheetToken: syntheticToken
     } = owner.context;
-    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && !isUndefined$1(syntheticToken)) {
-      elm.$shadowToken$ = syntheticToken;
+    if (owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
+      if (!isUndefined$1(syntheticToken)) {
+        elm.$shadowToken$ = syntheticToken;
+      }
+      if (lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS) {
+        const legacyToken = owner.context.legacyStylesheetToken;
+        if (!isUndefined$1(legacyToken)) {
+          elm.$legacyShadowToken$ = legacyToken;
+        }
+      }
     }
   }
   function applyDomManual(elm, vnode) {
@@ -5164,6 +5428,14 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
   function addVNodeToChildLWC(vnode) {
     ArrayPush$1.call(getVMBeingRendered().velements, vnode);
   }
+  // [s]tatic [p]art
+  function sp(partId, data) {
+    return {
+      partId,
+      data,
+      elm: undefined // elm is defined later
+    };
+  }
   // [s]coped [s]lot [f]actory
   function ssf(slotName, factory) {
     return {
@@ -5177,7 +5449,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     };
   }
   // [st]atic node
-  function st(fragment, key, data) {
+  function st(fragment, key, parts) {
     const owner = getVMBeingRendered();
     const vnode = {
       type: 4 /* VNodeType.Static */,
@@ -5186,12 +5458,8 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       elm: undefined,
       fragment,
       owner,
-      data
+      parts
     };
-    const ref = data === null || data === void 0 ? void 0 : data.ref;
-    if (!isUndefined$1(ref)) {
-      setRefVNode(owner, ref, vnode);
-    }
     return vnode;
   }
   // [fr]agment node
@@ -5231,8 +5499,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       });
     }
     const {
-      key,
-      ref
+      key
     } = data;
     const vnode = {
       type: 2 /* VNodeType.Element */,
@@ -5243,9 +5510,6 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       key,
       owner: vmBeingRendered
     };
-    if (!isUndefined$1(ref)) {
-      setRefVNode(vmBeingRendered, ref, vnode);
-    }
     return vnode;
   }
   // [t]ab[i]ndex function
@@ -5317,11 +5581,17 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     const vmBeingRendered = getVMBeingRendered();
     const {
       renderMode,
-      shadowMode
+      shadowMode,
+      apiVersion
     } = vmBeingRendered;
     if (renderMode === 0 /* RenderMode.Light */) {
-      sc(children);
-      return children;
+      // light DOM slots - backwards-compatible behavior uses flattening, new behavior uses fragments
+      if (isAPIFeatureEnabled(2 /* APIFeature.USE_FRAGMENTS_FOR_LIGHT_DOM_SLOTS */, apiVersion)) {
+        return fr(data.key, children, 0);
+      } else {
+        sc(children);
+        return children;
+      }
     }
     if (shadowMode === 1 /* ShadowMode.Synthetic */) {
       // TODO [#1276]: compiler should give us some sort of indicator when a vnodes collection is dynamic
@@ -5352,8 +5622,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       }
     }
     const {
-      key,
-      ref
+      key
     } = data;
     let elm, aChildren, vm;
     const vnode = {
@@ -5370,9 +5639,6 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       vm
     };
     addVNodeToChildLWC(vnode);
-    if (!isUndefined$1(ref)) {
-      setRefVNode(vmBeingRendered, ref, vnode);
-    }
     return vnode;
   }
   // [i]terable node
@@ -5670,7 +5936,8 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     fid,
     shc,
     ssf,
-    ddc
+    ddc,
+    sp
   });
 
   /*
@@ -5814,13 +6081,15 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
         const {
           context: {
             hasScopedStyles,
-            stylesheetToken
+            stylesheetToken,
+            legacyStylesheetToken
           },
           shadowMode,
           renderer
         } = getVMBeingRendered();
         const hasStyleToken = !isUndefined$1(stylesheetToken);
         const isSyntheticShadow = shadowMode === 1 /* ShadowMode.Synthetic */;
+        const hasLegacyToken = lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS && !isUndefined$1(legacyStylesheetToken);
         let cacheKey = 0;
         if (hasStyleToken && hasScopedStyles) {
           cacheKey |= 1 /* FragmentCache.HAS_SCOPED_STYLE */;
@@ -5830,12 +6099,20 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
           cacheKey |= 2 /* FragmentCache.SHADOW_MODE_SYNTHETIC */;
         }
 
+        if (hasLegacyToken) {
+          // This isn't strictly required for prod, but it's required for our karma tests
+          // since the lwcRuntimeFlag may change over time
+          cacheKey |= 4 /* FragmentCache.HAS_LEGACY_SCOPE_TOKEN */;
+        }
+
         if (!isUndefined$1(cache[cacheKey])) {
           return cache[cacheKey];
         }
-        const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetToken : '';
-        const classAttrToken = hasScopedStyles && hasStyleToken ? ` class="${stylesheetToken}"` : '';
-        const attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
+        // If legacy stylesheet tokens are required, then add them to the rendered string
+        const stylesheetTokenToRender = stylesheetToken + (hasLegacyToken ? ` ${legacyStylesheetToken}` : '');
+        const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetTokenToRender : '';
+        const classAttrToken = hasScopedStyles && hasStyleToken ? ` class="${stylesheetTokenToRender}"` : '';
+        const attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetTokenToRender : '';
         let htmlFragment = '';
         for (let i = 0, n = keys.length; i < n; i++) {
           switch (keys[i]) {
@@ -5926,7 +6203,10 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
           // Set the computeHasScopedStyles property in the context, to avoid recomputing it repeatedly.
           context.hasScopedStyles = computeHasScopedStyles(html, vm);
           // Update the scoping token on the host element.
-          updateStylesheetToken(vm, html);
+          updateStylesheetToken(vm, html, /* legacy */false);
+          if (lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS) {
+            updateStylesheetToken(vm, html, /* legacy */true);
+          }
           // Evaluate, create stylesheet and cache the produced VNode for future
           // re-rendering.
           const stylesheetsContent = getStylesheetsContent(vm, html);
@@ -5938,8 +6218,6 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
           // add the VM to the list of host VMs that can be re-rendered if html is swapped
           setActiveVM(vm);
         }
-        // reset the refs; they will be set during the tmpl() instantiation
-        vm.refVNodes = html.hasRefs ? create(null) : null;
         // right before producing the vnodes, we clear up all internal references
         // to custom elements from the template.
         vm.velements = [];
@@ -6121,6 +6399,17 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     var _a;
     return (_a = registeredComponentMap.get(Ctor)) === null || _a === void 0 ? void 0 : _a.sel;
   }
+  function getComponentAPIVersion(Ctor) {
+    const metadata = registeredComponentMap.get(Ctor);
+    const apiVersion = metadata === null || metadata === void 0 ? void 0 : metadata.apiVersion;
+    if (isUndefined$1(apiVersion)) {
+      // This should only occur in our Karma tests; in practice every component
+      // is registered, and so this code path should not get hit. But to be safe,
+      // return the lowest possible version.
+      return LOWEST_API_VERSION;
+    }
+    return apiVersion;
+  }
   function getTemplateReactiveObserver(vm) {
     return createReactiveObserver(() => {
       const {
@@ -6167,48 +6456,6 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     return wrappedListener;
   }
 
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-  const Services = create(null);
-  const hooks = ['rendered', 'connected', 'disconnected'];
-  /**
-   * EXPERIMENTAL: This function allows for the registration of "services"
-   * in LWC by exposing hooks into the component life-cycle. This API is
-   * subject to change or being removed.
-   */
-  function register(service) {
-    if (process.env.NODE_ENV !== 'production') {
-      assert.isTrue(isObject(service), `Invalid service declaration, ${service}: service must be an object`);
-    }
-    for (let i = 0; i < hooks.length; ++i) {
-      const hookName = hooks[i];
-      if (hookName in service) {
-        let l = Services[hookName];
-        if (isUndefined$1(l)) {
-          Services[hookName] = l = [];
-        }
-        ArrayPush$1.call(l, service[hookName]);
-      }
-    }
-  }
-  function invokeServiceHook(vm, cbs) {
-    if (process.env.NODE_ENV !== 'production') {
-      assert.isTrue(isArray$1(cbs) && cbs.length > 0, `Optimize invokeServiceHook() to be invoked only when needed`);
-    }
-    const {
-      component,
-      def,
-      context
-    } = vm;
-    for (let i = 0, len = cbs.length; i < len; ++i) {
-      cbs[i].call(undefined, component, {}, def, context);
-    }
-  }
-
   /*
    * Copyright (c) 2023, Salesforce.com, inc.
    * All rights reserved.
@@ -6271,7 +6518,13 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
   // old vnode.children is removed from the DOM.
   function removeVM(vm) {
     if (process.env.NODE_ENV !== 'production') {
-      assert.isTrue(vm.state === 1 /* VMState.connected */ || vm.state === 2 /* VMState.disconnected */, `${vm} must have been connected.`);
+      if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
+        // With native lifecycle, we cannot be certain that connectedCallback was called before a component
+        // was removed from the VDOM. If the component is disconnected, then connectedCallback will not fire
+        // in native mode, although it will fire in synthetic mode due to appendChild triggering it.
+        // See: W-14037619 for details
+        assert.isTrue(vm.state === 1 /* VMState.connected */ || vm.state === 2 /* VMState.disconnected */, `${vm} must have been connected.`);
+      }
     }
     resetComponentStateWhenRemoved(vm);
   }
@@ -6290,6 +6543,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       hydrated
     } = options;
     const def = getComponentInternalDef(ctor);
+    const apiVersion = getComponentAPIVersion(ctor);
     const vm = {
       elm,
       def,
@@ -6316,6 +6570,9 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
         stylesheetToken: undefined,
         hasTokenInClass: undefined,
         hasTokenInAttribute: undefined,
+        legacyStylesheetToken: undefined,
+        hasLegacyTokenInClass: undefined,
+        hasLegacyTokenInAttribute: undefined,
         hasScopedStyles: undefined,
         styleVNodes: null,
         tplCache: EmptyObject,
@@ -6333,7 +6590,8 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       callHook,
       setHook,
       getHook,
-      renderer
+      renderer,
+      apiVersion
     };
     if (process.env.NODE_ENV !== 'production') {
       vm.debugInfo = create(null);
@@ -6436,8 +6694,8 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
         // ShadowMode.Native implies "not synthetic shadow" which is consistent with how
         // everything defaults to native when the synthetic shadow polyfill is unavailable.
         shadowMode = 0 /* ShadowMode.Native */;
-      } else if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE) {
-        if (def.shadowSupportMode === "any" /* ShadowSupportMode.Any */) {
+      } else if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE || def.shadowSupportMode === "native" /* ShadowSupportMode.Native */) {
+        if (def.shadowSupportMode === "any" /* ShadowSupportMode.Any */ || def.shadowSupportMode === "native" /* ShadowSupportMode.Native */) {
           shadowMode = 0 /* ShadowMode.Native */;
         } else {
           const shadowAncestor = getNearestShadowAncestor(owner);
@@ -6497,6 +6755,8 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       children: oldCh,
       renderer
     } = vm;
+    // reset the refs; they will be set during `patchChildren`
+    resetRefVNodes(vm);
     // caching the new children collection
     vm.children = newCh;
     if (newCh.length > 0 || oldCh.length > 0) {
@@ -6529,12 +6789,6 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
         renderedCallback
       }
     } = vm;
-    const {
-      rendered
-    } = Services;
-    if (rendered) {
-      invokeServiceHook(vm, rendered);
-    }
     if (!isUndefined$1(renderedCallback)) {
       logOperationStart(4 /* OperationId.RenderedCallback */, vm);
       invokeComponentCallback(vm, renderedCallback);
@@ -6581,13 +6835,6 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     }
 
     vm.state = 1 /* VMState.connected */;
-    // reporting connection
-    const {
-      connected
-    } = Services;
-    if (connected) {
-      invokeServiceHook(vm, connected);
-    }
     if (hasWireAdapters(vm)) {
       connectWireAdapters(vm);
     }
@@ -6599,6 +6846,18 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       invokeComponentCallback(vm, connectedCallback);
       logOperationEnd(3 /* OperationId.ConnectedCallback */, vm);
     }
+    // This test only makes sense in the browser, with synthetic lifecycle, and when reporting is enabled or
+    // we're in dev mode. This is to detect a particular issue with synthetic lifecycle.
+    if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE && (process.env.NODE_ENV !== 'production' || isReportingEnabled())) {
+      if (!vm.renderer.isConnected(vm.elm)) {
+        if (process.env.NODE_ENV !== 'production') {
+          logWarnOnce(`Element <${vm.tagName}> ` + `fired a \`connectedCallback\` and rendered, but was not connected to the DOM. ` + `Please ensure all components are actually connected to the DOM, e.g. using ` + `\`document.body.appendChild(element)\`. This will not be supported in future versions of ` + `LWC and could cause component errors. For details, see: https://sfdc.co/synthetic-lifecycle`);
+        }
+        report("ConnectedCallbackWhileDisconnected" /* ReportingEventId.ConnectedCallbackWhileDisconnected */, {
+          tagName: vm.tagName
+        });
+      }
+    }
   }
   function hasWireAdapters(vm) {
     return getOwnPropertyNames$1(vm.def.wire).length > 0;
@@ -6615,13 +6874,6 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       vm.isDirty = true;
     }
     vm.state = 2 /* VMState.disconnected */;
-    // reporting disconnection
-    const {
-      disconnected
-    } = Services;
-    if (disconnected) {
-      invokeServiceHook(vm, disconnected);
-    }
     if (hasWireAdapters(vm)) {
       disconnectWireAdapters(vm);
     }
@@ -6757,6 +7009,11 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       if (!isUndefined$1(error)) {
         addErrorComponentStack(vm, error);
         const errorBoundaryVm = isNull(owner) ? undefined : getErrorBoundaryVM(owner);
+        // Error boundaries are not in effect when server-side rendering. `errorCallback`
+        // is intended to allow recovery from errors - changing the state of a component
+        // and instigating a re-render. That is at odds with the single-pass, synchronous
+        // nature of SSR. For that reason, all errors bubble up to the `renderComponent`
+        // call site.
         if (isUndefined$1(errorBoundaryVm)) {
           throw error; // eslint-disable-line no-unsafe-finally
         }
@@ -6786,6 +7043,68 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       scheduleRehydration(vm);
     }
   }
+  function runFormAssociatedCustomElementCallback(vm, faceCb) {
+    const {
+      renderMode,
+      shadowMode,
+      def: {
+        formAssociated
+      }
+    } = vm;
+    // Technically the UpgradableConstructor always sets `static formAssociated = true` but silently fail here to match browser behavior.
+    if (isUndefined$1(formAssociated) || isFalse(formAssociated)) {
+      if (process.env.NODE_ENV !== 'production') {
+        logWarn(`Form associated lifecycle methods must have the 'static formAssociated' value set in the component's prototype chain.`);
+      }
+      return;
+    }
+    if (shadowMode === 1 /* ShadowMode.Synthetic */ && renderMode !== 0 /* RenderMode.Light */) {
+      throw new Error('Form associated lifecycle methods are not available in synthetic shadow. Please use native shadow or light DOM.');
+    }
+    invokeComponentCallback(vm, faceCb);
+  }
+  function runFormAssociatedCallback(elm) {
+    const vm = getAssociatedVM(elm);
+    const {
+      formAssociatedCallback
+    } = vm.def;
+    if (!isUndefined$1(formAssociatedCallback)) {
+      runFormAssociatedCustomElementCallback(vm, formAssociatedCallback);
+    }
+  }
+  function runFormDisabledCallback(elm) {
+    const vm = getAssociatedVM(elm);
+    const {
+      formDisabledCallback
+    } = vm.def;
+    if (!isUndefined$1(formDisabledCallback)) {
+      runFormAssociatedCustomElementCallback(vm, formDisabledCallback);
+    }
+  }
+  function runFormResetCallback(elm) {
+    const vm = getAssociatedVM(elm);
+    const {
+      formResetCallback
+    } = vm.def;
+    if (!isUndefined$1(formResetCallback)) {
+      runFormAssociatedCustomElementCallback(vm, formResetCallback);
+    }
+  }
+  function runFormStateRestoreCallback(elm) {
+    const vm = getAssociatedVM(elm);
+    const {
+      formStateRestoreCallback
+    } = vm.def;
+    if (!isUndefined$1(formStateRestoreCallback)) {
+      runFormAssociatedCustomElementCallback(vm, formStateRestoreCallback);
+    }
+  }
+  function resetRefVNodes(vm) {
+    const {
+      cmpTemplate
+    } = vm;
+    vm.refVNodes = !isNull(cmpTemplate) && cmpTemplate.hasRefs ? create(null) : null;
+  }
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6953,10 +7272,11 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
   //
   // See the README for @lwc/aria-reflection
   const NON_STANDARD_ARIA_PROPS = ['ariaActiveDescendant', 'ariaControls', 'ariaDescribedBy', 'ariaDetails', 'ariaErrorMessage', 'ariaFlowTo', 'ariaLabelledBy', 'ariaOwns'];
-  function isLightningElement(elm) {
-    // The former case is for `this.prop` (inside component) and the latter is for `element.prop` (outside component).
-    // In both cases, we apply the non-standard prop even when the global polyfill is disabled, so this is kosher.
-    return elm instanceof LightningElement || elm instanceof BaseBridgeElement;
+  function isGlobalAriaPolyfillLoaded() {
+    // Sniff for the legacy polyfill being loaded. The reason this works is because ariaActiveDescendant is a
+    // non-standard ARIA property reflection that is only supported in our legacy polyfill. See
+    // @lwc/aria-reflection/README.md for details.
+    return !isUndefined$1(getOwnPropertyDescriptor$1(Element.prototype, 'ariaActiveDescendant'));
   }
   function findVM(elm) {
     // If it's a shadow DOM component, then it has a host
@@ -6970,7 +7290,8 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     // Else it might be a light DOM component. Walk up the tree trying to find the owner
     let parentElement = elm;
     while (!isNull(parentElement = parentElement.parentElement)) {
-      if (isLightningElement(parentElement)) {
+      if (parentElement instanceof BaseBridgeElement) {
+        // parentElement is an LWC component
         const vm = getAssociatedVMIfPresent(parentElement);
         if (!isUndefined$1(vm)) {
           return vm;
@@ -6981,25 +7302,23 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
   }
 
   function checkAndReportViolation(elm, prop, isSetter, setValue) {
-    if (!isLightningElement(elm)) {
-      const vm = findVM(elm);
-      if (process.env.NODE_ENV !== 'production') {
-        logWarnOnce(`Element <${elm.tagName.toLowerCase()}> ` + (isUndefined$1(vm) ? '' : `owned by <${vm.elm.tagName.toLowerCase()}> `) + `uses non-standard property "${prop}". This will be removed in a future version of LWC. ` + `See https://sfdc.co/deprecated-aria`);
-      }
-      let setValueType;
-      if (isSetter) {
-        // `typeof null` is "object" which is not very useful for detecting null.
-        // We mostly want to know null vs undefined vs other types here, due to
-        // https://github.com/salesforce/lwc/issues/3284
-        setValueType = isNull(setValue) ? 'null' : typeof setValue;
-      }
-      report("NonStandardAriaReflection" /* ReportingEventId.NonStandardAriaReflection */, {
-        tagName: vm === null || vm === void 0 ? void 0 : vm.tagName,
-        propertyName: prop,
-        isSetter,
-        setValueType
-      });
-    }
+    const vm = findVM(elm);
+    if (process.env.NODE_ENV !== 'production') {
+      logWarnOnce(`Element <${elm.tagName.toLowerCase()}> ` + (isUndefined$1(vm) ? '' : `owned by <${vm.elm.tagName.toLowerCase()}> `) + `uses non-standard property "${prop}". This will be removed in a future version of LWC. ` + `See https://sfdc.co/deprecated-aria`);
+    }
+    let setValueType;
+    if (isSetter) {
+      // `typeof null` is "object" which is not very useful for detecting null.
+      // We mostly want to know null vs undefined vs other types here, due to
+      // https://github.com/salesforce/lwc/issues/3284
+      setValueType = isNull(setValue) ? 'null' : typeof setValue;
+    }
+    report("NonStandardAriaReflection" /* ReportingEventId.NonStandardAriaReflection */, {
+      tagName: vm === null || vm === void 0 ? void 0 : vm.tagName,
+      propertyName: prop,
+      isSetter,
+      setValueType
+    });
   }
   function enableDetection() {
     const {
@@ -7021,6 +7340,9 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
         get,
         set
       } = descriptor;
+      // It's important for this defineProperty call to happen _after_ ARIA accessors are applied to the
+      // BaseBridgeElement and LightningElement prototypes. Otherwise, we will log/report for access of non-standard
+      // props on these prototypes, which we actually don't want. We only care about access on generic HTMLElements.
       defineProperty(prototype, prop, {
         get() {
           checkAndReportViolation(this, prop, false, undefined);
@@ -7036,15 +7358,13 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     }
   }
   // No point in running this code if we're not in a browser, or if the global polyfill is not loaded
-  {
-    if (!lwcRuntimeFlags.DISABLE_ARIA_REFLECTION_POLYFILL) {
-      // Always run detection in dev mode, so we can at least print to the console
-      if (process.env.NODE_ENV !== 'production') {
-        enableDetection();
-      } else {
-        // In prod mode, only enable detection if reporting is enabled
-        onReportingEnabled(enableDetection);
-      }
+  if (isGlobalAriaPolyfillLoaded()) {
+    // Always run detection in dev mode, so we can at least print to the console
+    if (process.env.NODE_ENV !== 'production') {
+      enableDetection();
+    } else {
+      // In prod mode, only enable detection if reporting is enabled
+      onReportingEnabled(enableDetection);
     }
   }
 
@@ -7067,6 +7387,8 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
   function hydrateVM(vm) {
     const children = renderComponent(vm);
     vm.children = children;
+    // reset the refs; they will be set during `hydrateChildren`
+    resetRefVNodes(vm);
     const {
       renderRoot: parentNode,
       renderer: {
@@ -7187,7 +7509,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       return handleMismatch(elm, vnode, renderer);
     }
     vnode.elm = elm;
-    applyEventListeners(vnode, renderer);
+    applyStaticParts(elm, vnode, renderer, true);
     return elm;
   }
   function hydrateFragment(elm, vnode, renderer) {
@@ -7234,7 +7556,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
         }
       }
     }
-    patchElementPropsAndAttrs(vnode, renderer);
+    patchElementPropsAndAttrsAndRefs(vnode, renderer);
     if (!isDomManual) {
       const {
         getFirstChild
@@ -7266,6 +7588,11 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       ctor,
       owner
     } = vnode;
+    const {
+      defineCustomElement,
+      getTagName
+    } = renderer;
+    defineCustomElement(StringToLowerCase.call(getTagName(elm)));
     const vm = createVM(elm, ctor, renderer, {
       mode,
       owner,
@@ -7275,7 +7602,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     vnode.elm = elm;
     vnode.vm = vm;
     allocateChildren(vnode, vm);
-    patchElementPropsAndAttrs(vnode, renderer);
+    patchElementPropsAndAttrsAndRefs(vnode, renderer);
     // Insert hook section:
     if (process.env.NODE_ENV !== 'production') {
       assert.isTrue(vm.state === 0 /* VMState.created */, `${vm} cannot be recycled.`);
@@ -7347,9 +7674,11 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     removeNode(node, parentNode, renderer);
     return vnode.elm;
   }
-  function patchElementPropsAndAttrs(vnode, renderer) {
+  function patchElementPropsAndAttrsAndRefs(vnode, renderer) {
     applyEventListeners(vnode, renderer);
     patchProps(null, vnode, renderer);
+    // The `refs` object is blown away in every re-render, so we always need to re-apply them
+    applyRefs(vnode, vnode.owner);
   }
   function hasCorrectNodeType(vnode, node, nodeType, renderer) {
     const {
@@ -7437,7 +7766,8 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       getClassList,
       getAttribute
     } = renderer;
-    const scopedToken = getScopeTokenClass(owner);
+    // we don't care about legacy for hydration. it's a new use case
+    const scopedToken = getScopeTokenClass(owner, /* legacy */false);
     const stylesheetTokenHost = isVCustomElement(vnode) ? getStylesheetTokenHost(vnode) : null;
     // Classnames for scoped CSS are added directly to the DOM during rendering,
     // or to the VDOM on the server in the case of SSR. As such, these classnames
@@ -7748,7 +8078,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
   }
   function addLegacyStylesheetTokensShim(tmpl) {
     // When ENABLE_FROZEN_TEMPLATE is false, then we shim stylesheetTokens on top of stylesheetToken for anyone who
-    // is accessing the old internal API (backwards compat). Details: https://salesforce.quip.com/v1rmAFu2cKAr
+    // is accessing the old internal API (backwards compat). Details: W-14210169
     defineProperty(tmpl, 'stylesheetTokens', {
       enumerable: true,
       configurable: true,
@@ -7841,7 +8171,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     }
     return getReadOnlyProxy(obj);
   }
-  /** version: 3.2.0 */
+  /** version: 4.0.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8057,6 +8387,14 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
   const cachedConstructors = new Map();
   const elementsUpgradedOutsideLWC = new WeakSet();
   let elementBeingUpgradedByLWC = false;
+  let formAssociatedCallbackToUse;
+  let formDisabledCallbackToUse;
+  let formResetCallbackToUse;
+  let formStateRestoreCallbackToUse;
+  const instancesToFormAssociatedCallbacks = new WeakMap();
+  const instancesToFormDisabledCallbacks = new WeakMap();
+  const instancesToFormResetCallbacks = new WeakMap();
+  const instancesToFormStateRestoreCallbacks = new WeakMap();
   // Creates a constructor that is intended to be used directly as a custom element, except that the upgradeCallback is
   // passed in to the constructor so LWC can reuse the same custom element constructor for multiple components.
   // Another benefit is that only LWC can create components that actually do anything – if you do
@@ -8072,6 +8410,10 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
         // If the element is not created using lwc.createElement(), e.g. `document.createElement('x-foo')`,
         // then elementBeingUpgraded will be false
         if (elementBeingUpgradedByLWC) {
+          instancesToFormAssociatedCallbacks.set(this, formAssociatedCallbackToUse);
+          instancesToFormDisabledCallbacks.set(this, formDisabledCallbackToUse);
+          instancesToFormResetCallbacks.set(this, formResetCallbackToUse);
+          instancesToFormStateRestoreCallbacks.set(this, formStateRestoreCallbackToUse);
           upgradeCallback(this);
         } else if (hasConnectedCallback || hasDisconnectedCallback) {
           // If this element has connected or disconnected callbacks, then we need to keep track of
@@ -8082,8 +8424,38 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
           // Do we want to support this? Throw an error? Currently for backwards compat it's a no-op.
         }
       }
-      /*LWC compiler v3.2.0*/
+
+      formAssociatedCallback() {
+        const formAssociatedCallback = instancesToFormAssociatedCallbacks.get(this);
+        // if element was upgraded outside LWC, this will be undefined
+        if (!isUndefined$1(formAssociatedCallback)) {
+          formAssociatedCallback(this);
+        }
+      }
+      formResetCallback() {
+        const formResetCallback = instancesToFormResetCallbacks.get(this);
+        // if element was upgraded outside LWC, this will be undefined
+        if (!isUndefined$1(formResetCallback)) {
+          formResetCallback(this);
+        }
+      }
+      formDisabledCallback() {
+        const formDisabledCallback = instancesToFormDisabledCallbacks.get(this);
+        // if element was upgraded outside LWC, this will be undefined
+        if (!isUndefined$1(formDisabledCallback)) {
+          formDisabledCallback(this);
+        }
+      }
+      formStateRestoreCallback() {
+        const formStateRestoreCallback = instancesToFormStateRestoreCallbacks.get(this);
+        // if element was upgraded outside LWC, this will be undefined
+        if (!isUndefined$1(formStateRestoreCallback)) {
+          formStateRestoreCallback(this);
+        }
+      }
+      /*LWC compiler v4.0.1*/
     }
+    UpgradableConstructor.formAssociated = true;
     // Do not unnecessarily add a connectedCallback/disconnectedCallback, as it introduces perf overhead
     // See: https://github.com/salesforce/lwc/pull/3162#issuecomment-1311851174
     if (hasConnectedCallback) {
@@ -8102,8 +8474,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     }
     return UpgradableConstructor;
   };
-  const createCustomElement = (tagName, upgradeCallback, connectedCallback, disconnectedCallback) => {
-    // use global custom elements registry
+  function getUpgradableConstructor(tagName, connectedCallback, disconnectedCallback) {
     let UpgradableConstructor = cachedConstructors.get(tagName);
     if (isUndefined$1(UpgradableConstructor)) {
       if (!isUndefined$1(customElements.get(tagName))) {
@@ -8113,11 +8484,23 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       customElements.define(tagName, UpgradableConstructor);
       cachedConstructors.set(tagName, UpgradableConstructor);
     }
+    return UpgradableConstructor;
+  }
+  const createCustomElement = (tagName, upgradeCallback, connectedCallback, disconnectedCallback, formAssociatedCallback, formDisabledCallback, formResetCallback, formStateRestoreCallback) => {
+    const UpgradableConstructor = getUpgradableConstructor(tagName, connectedCallback, disconnectedCallback);
+    formAssociatedCallbackToUse = formAssociatedCallback;
+    formDisabledCallbackToUse = formDisabledCallback;
+    formResetCallbackToUse = formResetCallback;
+    formStateRestoreCallbackToUse = formStateRestoreCallback;
     elementBeingUpgradedByLWC = true;
     try {
       return new UpgradableConstructor(upgradeCallback);
     } finally {
       elementBeingUpgradedByLWC = false;
+      formAssociatedCallbackToUse = undefined;
+      formDisabledCallbackToUse = undefined;
+      formResetCallbackToUse = undefined;
+      formStateRestoreCallbackToUse = undefined;
     }
   };
 
@@ -8179,7 +8562,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       function isNull(obj) {
         return obj === null;
       }
-      /** version: 3.2.0 */
+      /** version: 4.0.1 */
 
       /*
        * Copyright (c) 2023, salesforce.com, inc.
@@ -8199,7 +8582,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
           this.setNewContext = setNewContext;
           this.setDisconnectedCallback = setDisconnectedCallback;
         }
-        /*LWC compiler v3.2.0*/
+        /*LWC compiler v4.0.1*/
       }
       function registerContextConsumer(elm, adapterContextToken, subscriptionPayload) {
         dispatchEvent(elm, new WireContextSubscriptionEvent(adapterContextToken, subscriptionPayload));
@@ -8251,6 +8634,9 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       function nextSibling(node) {
         return node.nextSibling;
       }
+      function previousSibling(node) {
+        return node.previousSibling;
+      }
       function attachShadow(element, options) {
         // `shadowRoot` will be non-null in two cases:
         //   1. upon initial load with an SSR-generated DOM, while in Shadow render mode
@@ -8345,13 +8731,15 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       function getTagName(elm) {
         return elm.tagName;
       }
-      // Use the attachInternals method from HTMLElement.prototype because access to it is removed
-      // in HTMLBridgeElement, ie: elm.attachInternals is undefined.
-      // Additionally, cache the attachInternals method to protect against 3rd party monkey-patching.
-      const attachInternalsFunc = HTMLElement.prototype.attachInternals;
       function attachInternals(elm) {
         return attachInternalsFunc.call(elm);
       }
+      // Use the attachInternals method from HTMLElement.prototype because access to it is removed
+      // in HTMLBridgeElement, ie: elm.attachInternals is undefined.
+      // Additionally, cache the attachInternals method to protect against 3rd party monkey-patching.
+      const attachInternalsFunc = typeof ElementInternals !== 'undefined' ? HTMLElement.prototype.attachInternals : () => {
+        throw new Error('attachInternals API is not supported in this browser environment.');
+      };
       exports.addEventListener = addEventListener;
       exports.assertInstanceOfHTMLElement = assertInstanceOfHTMLElement;
       exports.attachInternals = attachInternals;
@@ -8379,6 +8767,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       exports.isConnected = isConnected;
       exports.nextSibling = nextSibling;
       exports.ownerDocument = ownerDocument;
+      exports.previousSibling = previousSibling;
       exports.querySelector = querySelector;
       exports.querySelectorAll = querySelectorAll;
       exports.registerContextConsumer = registerContextConsumer;
@@ -8417,6 +8806,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     insertStylesheet,
     // relies on a shared global cache
     createCustomElement,
+    defineCustomElement: getUpgradableConstructor,
     isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN)
   });
 
@@ -8467,6 +8857,11 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       return;
     }
     try {
+      const {
+        defineCustomElement,
+        getTagName
+      } = renderer;
+      defineCustomElement(StringToLowerCase.call(getTagName(element)));
       const vm = createVMWithProps(element, Ctor, props);
       hydrateRoot(vm);
     } catch (e) {
@@ -8567,7 +8962,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       attributeChangedCallback(name, oldValue, newValue) {
         attributeChangedCallback.call(this, name, oldValue, newValue);
       }
-      /*LWC compiler v3.2.0*/
+      /*LWC compiler v4.0.1*/
     }, _a.observedAttributes = observedAttributes, _a;
   }
 
@@ -8669,6 +9064,10 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
     };
     let connectedCallback;
     let disconnectedCallback;
+    let formAssociatedCallback;
+    let formDisabledCallback;
+    let formResetCallback;
+    let formStateRestoreCallback;
     if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
       connectedCallback = elm => {
         connectRootElement(elm);
@@ -8676,8 +9075,20 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       disconnectedCallback = elm => {
         disconnectRootElement(elm);
       };
+      formAssociatedCallback = elm => {
+        runFormAssociatedCallback(elm);
+      };
+      formDisabledCallback = elm => {
+        runFormDisabledCallback(elm);
+      };
+      formResetCallback = elm => {
+        runFormResetCallback(elm);
+      };
+      formStateRestoreCallback = elm => {
+        runFormStateRestoreCallback(elm);
+      };
     }
-    const element = createCustomElement(tagName, upgradeCallback, connectedCallback, disconnectedCallback);
+    const element = createCustomElement(tagName, upgradeCallback, connectedCallback, disconnectedCallback, formAssociatedCallback, formDisabledCallback, formResetCallback, formStateRestoreCallback);
     return element;
   }
 
@@ -8781,7 +9192,7 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
       });
     });
   }
-  /** version: 3.2.0 */
+  /** version: 4.0.1 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -8799,7 +9210,6 @@ LWR.define('lwc/v/3_2_0', ['exports'], (function (exports) { 'use strict';
   exports.parseFragment = parseFragment;
   exports.parseSVGFragment = parseSVGFragment;
   exports.readonly = readonly;
-  exports.register = register;
   exports.registerComponent = registerComponent;
   exports.registerDecorators = registerDecorators;
   exports.registerTemplate = registerTemplate;