lwc 2.35.1 → 2.36.0

package/dist/engine-dom/umd/es5/engine-dom.js

@@ -21,16 +21,16 @@
   function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
   function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
   function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-  function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+  function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
   function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+  function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
   function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
   function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
   function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
   function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
   function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-  function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
   function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
   /* proxy-compat-disable */
   /**
@@ -62,10 +62,10 @@
   }
   var assert = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    fail: fail,
     invariant: invariant,
-    isTrue: isTrue$1,
     isFalse: isFalse$1,
-    fail: fail
+    isTrue: isTrue$1
   });
 
   /*
@@ -330,9 +330,9 @@
    * 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
-  var LWC_VERSION = "2.35.1";
+  var LWC_VERSION = "2.36.0";
   var LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.35.1 */
+  /** version: 2.36.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -413,7 +413,7 @@
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.35.1 */
+  /** version: 2.36.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -477,7 +477,7 @@
       }
     }
   }
-  /** version: 2.35.1 */
+  /** version: 2.36.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -543,7 +543,6 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  /** Callbacks to invoke when reporting is enabled **/
   var onReportingEnabledCallbacks = [];
   /** The currently assigned reporting dispatcher. */
   var currentDispatcher$1 = noop;
@@ -563,23 +562,15 @@
     attachDispatcher: function attachDispatcher(dispatcher) {
       enabled$1 = true;
       currentDispatcher$1 = dispatcher;
-      var _iterator = _createForOfIteratorHelper(onReportingEnabledCallbacks),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var callback = _step.value;
-          try {
-            callback();
-          } catch (err) {
-            // This should never happen. But if it does, we don't want one callback to cause another to fail
-            // eslint-disable-next-line no-console
-            console.error('Could not invoke callback', err);
-          }
+      for (var _i3 = 0, _onReportingEnabledCa = onReportingEnabledCallbacks; _i3 < _onReportingEnabledCa.length; _i3++) {
+        var callback = _onReportingEnabledCa[_i3];
+        try {
+          callback();
+        } catch (err) {
+          // This should never happen. But if it does, we don't want one callback to cause another to fail
+          // eslint-disable-next-line no-console
+          console.error('Could not invoke callback', err);
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
       onReportingEnabledCallbacks.length = 0; // clear the array
     },
@@ -608,11 +599,11 @@
   /**
    * Report to the current dispatcher, if there is one.
    * @param reportingEventId
-   * @param vm
+   * @param payload - data to report
    */
-  function report(reportingEventId, vm) {
+  function report(reportingEventId, payload) {
     if (enabled$1) {
-      currentDispatcher$1(reportingEventId, vm.tagName, vm.idx);
+      currentDispatcher$1(reportingEventId, payload);
     }
   }
 
@@ -733,8 +724,8 @@
     if (!isUndefined$1(reactiveRecord)) {
       var reactiveObservers = reactiveRecord[key];
       if (!isUndefined$1(reactiveObservers)) {
-        for (var _i3 = 0, len = reactiveObservers.length; _i3 < len; _i3 += 1) {
-          var ro = reactiveObservers[_i3];
+        for (var _i4 = 0, len = reactiveObservers.length; _i4 < len; _i4 += 1) {
+          var ro = reactiveObservers[_i4];
           ro.notify();
         }
       }
@@ -793,9 +784,9 @@
         var listeners = this.listeners;
         var len = listeners.length;
         if (len > 0) {
-          for (var _i4 = 0; _i4 < len; _i4 += 1) {
-            var set = listeners[_i4];
-            var pos = ArrayIndexOf.call(listeners[_i4], this);
+          for (var _i5 = 0; _i5 < len; _i5 += 1) {
+            var set = listeners[_i5];
+            var pos = ArrayIndexOf.call(listeners[_i5], this);
             ArraySplice.call(set, pos, 1);
           }
           listeners.length = 0;
@@ -852,8 +843,8 @@
     }
     var callbacks = nextTickCallbackQueue;
     nextTickCallbackQueue = []; // reset to a new queue
-    for (var _i5 = 0, len = callbacks.length; _i5 < len; _i5 += 1) {
-      callbacks[_i5]();
+    for (var _i6 = 0, len = callbacks.length; _i6 < len; _i6 += 1) {
+      callbacks[_i6]();
     }
   }
   function addCallbackToNextTick(callback) {
@@ -880,11 +871,11 @@
   function parseStyleText(cssText) {
     var styleMap = {};
     var declarations = cssText.split(DECLARATION_DELIMITER);
-    var _iterator2 = _createForOfIteratorHelper(declarations),
-      _step2;
+    var _iterator = _createForOfIteratorHelper(declarations),
+      _step;
     try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var declaration = _step2.value;
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var declaration = _step.value;
         if (declaration) {
           var _declaration$split = declaration.split(PROPERTY_DELIMITER),
             _declaration$split2 = _slicedToArray(_declaration$split, 2),
@@ -896,20 +887,28 @@
         }
       }
     } catch (err) {
-      _iterator2.e(err);
+      _iterator.e(err);
     } finally {
-      _iterator2.f();
+      _iterator.f();
     }
     return styleMap;
   }
   // Make a shallow copy of an object but omit the given key
   function cloneAndOmitKey(object, keyToOmit) {
     var result = {};
-    for (var _i6 = 0, _Object$keys = Object.keys(object); _i6 < _Object$keys.length; _i6++) {
-      var key = _Object$keys[_i6];
-      if (key !== keyToOmit) {
-        result[key] = object[key];
+    var _iterator2 = _createForOfIteratorHelper(keys(object)),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var key = _step2.value;
+        if (key !== keyToOmit) {
+          result[key] = object[key];
+        }
       }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
     }
     return result;
   }
@@ -920,7 +919,7 @@
     try {
       for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
         var stylesheet = _step3.value;
-        if (!Array.isArray(stylesheet)) {
+        if (!isArray$1(stylesheet)) {
           list.push(stylesheet);
         } else {
           list.push.apply(list, _toConsumableArray(flattenStylesheets(stylesheet)));
@@ -2795,35 +2794,36 @@
     }
     var wiredConnecting = context.wiredConnecting = [];
     var wiredDisconnecting = context.wiredDisconnecting = [];
-    for (var fieldNameOrMethod in wire) {
+    var _loop2 = function _loop2() {
       var descriptor = wire[fieldNameOrMethod];
       var wireDef = WireMetaMap.get(descriptor);
       if (process.env.NODE_ENV !== 'production') {
         assert.invariant(wireDef, "Internal Error: invalid wire definition found.");
       }
       if (!isUndefined$1(wireDef)) {
-        (function () {
-          var _createConnector = createConnector(vm, fieldNameOrMethod, wireDef),
-            connector = _createConnector.connector,
-            computeConfigAndUpdate = _createConnector.computeConfigAndUpdate,
-            resetConfigWatcher = _createConnector.resetConfigWatcher;
-          var hasDynamicParams = wireDef.dynamic.length > 0;
-          ArrayPush$1.call(wiredConnecting, function () {
-            connector.connect();
-            if (!lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
-              if (hasDynamicParams) {
-                Promise.resolve().then(computeConfigAndUpdate);
-                return;
-              }
+        var _createConnector = createConnector(vm, fieldNameOrMethod, wireDef),
+          connector = _createConnector.connector,
+          computeConfigAndUpdate = _createConnector.computeConfigAndUpdate,
+          resetConfigWatcher = _createConnector.resetConfigWatcher;
+        var hasDynamicParams = wireDef.dynamic.length > 0;
+        ArrayPush$1.call(wiredConnecting, function () {
+          connector.connect();
+          if (!lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
+            if (hasDynamicParams) {
+              Promise.resolve().then(computeConfigAndUpdate);
+              return;
             }
-            computeConfigAndUpdate();
-          });
-          ArrayPush$1.call(wiredDisconnecting, function () {
-            connector.disconnect();
-            resetConfigWatcher();
-          });
-        })();
+          }
+          computeConfigAndUpdate();
+        });
+        ArrayPush$1.call(wiredDisconnecting, function () {
+          connector.disconnect();
+          resetConfigWatcher();
+        });
       }
+    };
+    for (var fieldNameOrMethod in wire) {
+      _loop2();
     }
   }
   function connectWireAdapters(vm) {
@@ -3244,6 +3244,10 @@
         // stylesheets and templates do not have user-meaningful names, but components do
         var friendlyName = type === 'component' ? "".concat(type, " ").concat(func.name) : type;
         logError("LWC WARNING: current engine is v".concat(LWC_VERSION, ", but ").concat(friendlyName, " was compiled with v").concat(version, ".\nPlease update your compiled code or LWC engine so that the versions match.\nNo further warnings will appear."));
+        report(1 /* ReportingEventId.CompilerRuntimeVersionMismatch */, {
+          compilerVersion: version,
+          runtimeVersion: LWC_VERSION
+        });
       }
     }
   }
@@ -4920,7 +4924,12 @@
       } else if (isVScopedSlotFragment(vnode)) {
         slotName = vnode.slotName;
       }
-      var vnodes = cmpSlotsMapping[slotName] = cmpSlotsMapping[slotName] || [];
+      // Can't use toString here because Symbol(1).toString() is 'Symbol(1)'
+      // but elm.setAttribute('slot', Symbol(1)) is an error.
+      // the following line also throws same error for symbols
+      // Similar for Object.create(null)
+      var normalizedSlotName = '' + slotName;
+      var vnodes = cmpSlotsMapping[normalizedSlotName] = cmpSlotsMapping[normalizedSlotName] || [];
       ArrayPush$1.call(vnodes, vnode);
     }
     vm.cmpSlots = {
@@ -5984,6 +5993,8 @@
     var tmpl = _ref4.tmpl;
     if (isFunction$1(Ctor)) {
       if (process.env.NODE_ENV !== 'production') {
+        // There is no point in running this in production, because the version mismatch check relies
+        // on code comments which are stripped out in production by minifiers
         checkVersionMismatch(Ctor, 'component');
       }
       signedTemplateMap.set(Ctor, tmpl);
@@ -6247,6 +6258,7 @@
   // Validate and flatten any stylesheets defined as `static stylesheets`
   function computeStylesheets(vm, ctor) {
     if (lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
+      warnOnStylesheetsMutation(ctor);
       var stylesheets = ctor.stylesheets;
       if (!isUndefined$1(stylesheets)) {
         var valid = validateComponentStylesheets(vm, stylesheets);
@@ -6259,6 +6271,22 @@
     }
     return null;
   }
+  function warnOnStylesheetsMutation(ctor) {
+    if (process.env.NODE_ENV !== 'production') {
+      var stylesheets = ctor.stylesheets;
+      defineProperty(ctor, 'stylesheets', {
+        enumerable: true,
+        configurable: true,
+        get: function get() {
+          return stylesheets;
+        },
+        set: function set(newValue) {
+          logWarnOnce("Dynamically setting the \"stylesheets\" static property on ".concat(ctor.name, " ") + 'will not affect the stylesheets injected.');
+          stylesheets = newValue;
+        }
+      });
+    }
+  }
   function computeShadowMode(vm, renderer) {
     var def = vm.def;
     var isSyntheticShadowDefined = renderer.isSyntheticShadowDefined,
@@ -6610,7 +6638,7 @@
   function isSyntheticShadowRootInstance(rootNode) {
     return rootNode !== document && isTrue(rootNode.synthetic);
   }
-  function reportViolation(source, target, attrName) {
+  function reportViolation$1(source, target, attrName) {
     // The vm is either for the source, the target, or both. Either one or both must be using synthetic
     // shadow for a violation to be detected.
     var vm = getAssociatedVMIfPresent(source.getRootNode().host);
@@ -6621,7 +6649,10 @@
       // vm should never be undefined here, but just to be safe, bail out and don't report
       return;
     }
-    report(0 /* ReportingEventId.CrossRootAriaInSyntheticShadow */, vm);
+    report(0 /* ReportingEventId.CrossRootAriaInSyntheticShadow */, {
+      tagName: vm.tagName,
+      attributeName: attrName
+    });
     if (process.env.NODE_ENV !== 'production') {
       // Avoid excessively logging to the console in the case of duplicates.
       logWarnOnce("Element <".concat(source.tagName.toLowerCase(), "> uses attribute \"").concat(attrName, "\" to reference element ") + "<".concat(target.tagName.toLowerCase(), ">, which is not in the same shadow root. This will break in native shadow DOM. ") + "For details, see: https://lwc.dev/guide/accessibility#link-ids-and-aria-attributes-from-different-templates", vm);
@@ -6655,7 +6686,7 @@
             var sourceElement = sourceElements[_i33];
             var sourceRoot = sourceElement.getRootNode();
             if (sourceRoot !== root) {
-              reportViolation(sourceElement, elm, idRefAttrName);
+              reportViolation$1(sourceElement, elm, idRefAttrName);
               break;
             }
           }
@@ -6678,7 +6709,7 @@
             var targetRoot = target.getRootNode();
             if (targetRoot !== root) {
               // target element's shadow root is not the same as ours
-              reportViolation(elm, target, attrName);
+              reportViolation$1(elm, target, attrName);
             }
           }
         }
@@ -6692,7 +6723,7 @@
   var enabled = false;
   // We want to avoid patching globals whenever possible, so this should be tree-shaken out in prod-mode and if
   // reporting is not enabled. It should also only run once
-  function enableDetection() {
+  function enableDetection$1() {
     if (enabled) {
       return; // don't double-apply the patches
     }
@@ -6746,10 +6777,116 @@
   if (supportsCssEscape() && isSyntheticShadowLoaded()) {
     // Always run detection in dev mode, so we can at least print to the console
     if (process.env.NODE_ENV !== 'production') {
-      enableDetection();
+      enableDetection$1();
     } else {
       // In prod mode, only enable detection if reporting is enabled
-      onReportingEnabled(enableDetection);
+      onReportingEnabled(enableDetection$1);
+    }
+  }
+
+  /*
+   * 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
+   */
+  //
+  // The goal of this code is to detect usages of non-standard reflected ARIA properties. These are caused by
+  // legacy non-standard Element.prototype extensions added by the @lwc/aria-reflection package.
+  //
+  // See the README for @lwc/aria-reflection
+  var 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 findVM(elm) {
+    // If it's a shadow DOM component, then it has a host
+    var _elm$getRootNode = elm.getRootNode(),
+      host = _elm$getRootNode.host;
+    var vm = isUndefined$1(host) ? undefined : getAssociatedVMIfPresent(host);
+    if (!isUndefined$1(vm)) {
+      return vm;
+    }
+    // Else it might be a light DOM component. Walk up the tree trying to find the owner
+    var parentElement = elm;
+    while (!isNull(parentElement = parentElement.parentElement)) {
+      if (isLightningElement(parentElement)) {
+        var _vm = getAssociatedVMIfPresent(parentElement);
+        if (!isUndefined$1(_vm)) {
+          return _vm;
+        }
+      }
+    }
+    // If we return undefined, it's because the element was rendered wholly outside a LightningElement
+  }
+
+  function checkAndReportViolation(elm, prop) {
+    if (!isLightningElement(elm)) {
+      var vm = findVM(elm);
+      if (process.env.NODE_ENV !== 'production') {
+        logWarnOnce("Element <".concat(elm.tagName.toLowerCase(), "> ") + (isUndefined$1(vm) ? '' : "owned by <".concat(vm.elm.tagName.toLowerCase(), "> ")) + "uses non-standard property \"".concat(prop, "\". This will be removed in a future version of LWC. ") + "See https://lwc.dev/guide/accessibility#deprecated-aria-reflected-properties");
+      }
+      report(2 /* ReportingEventId.NonStandardAriaReflection */, {
+        tagName: vm === null || vm === void 0 ? void 0 : vm.tagName,
+        propertyName: prop
+      });
+    }
+  }
+  function enableDetection() {
+    var _Element = Element,
+      prototype = _Element.prototype;
+    var _iterator7 = _createForOfIteratorHelper(NON_STANDARD_ARIA_PROPS),
+      _step7;
+    try {
+      var _loop3 = function _loop3() {
+        var prop = _step7.value;
+        var descriptor = getOwnPropertyDescriptor$1(prototype, prop);
+        // The descriptor should exist because the @lwc/aria-reflection polyfill has run by now.
+        // This happens automatically because of the ordering of imports.
+        if (process.env.NODE_ENV !== 'production') {
+          /* istanbul ignore if */
+          if (isUndefined$1(descriptor) || isUndefined$1(descriptor.get) || isUndefined$1(descriptor.set)) {
+            // should never happen
+            throw new Error('detect-non-standard-aria.ts loaded before @lwc/aria-reflection');
+          }
+        }
+        // @ts-ignore
+        var _get4 = descriptor.get,
+          _set4 = descriptor.set;
+        defineProperty(prototype, prop, {
+          get: function get() {
+            checkAndReportViolation(this, prop);
+            return _get4.call(this);
+          },
+          set: function set(val) {
+            checkAndReportViolation(this, prop);
+            return _set4.call(this, val);
+          },
+          configurable: true,
+          enumerable: true
+        });
+      };
+      for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+        _loop3();
+      }
+    } catch (err) {
+      _iterator7.e(err);
+    } finally {
+      _iterator7.f();
+    }
+  }
+  // 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);
+      }
     }
   }
 
@@ -7252,12 +7389,13 @@
    */
   // See @lwc/engine-core/src/framework/template.ts
   var TEMPLATE_PROPS = ['slots', 'stylesheetToken', 'stylesheets', 'renderMode'];
-  // Via https://www.npmjs.com/package/object-observer
-  var ARRAY_MUTATION_METHODS = ['pop', 'push', 'shift', 'unshift', 'reverse', 'sort', 'fill', 'splice', 'copyWithin'];
   // Expandos that may be placed on a stylesheet factory function, and which are meaningful to LWC at runtime
-  var STYLESHEET_FUNCTION_EXPANDOS = [
+  var STYLESHEET_PROPS = [
   // SEE `KEY__SCOPED_CSS` in @lwc/style-compiler
   '$scoped$'];
+  // Via https://www.npmjs.com/package/object-observer
+  var ARRAY_MUTATION_METHODS = ['pop', 'push', 'shift', 'unshift', 'reverse', 'sort', 'fill', 'splice', 'copyWithin'];
+  var mutationTrackingDisabled = false;
   function getOriginalArrayMethod(prop) {
     switch (prop) {
       case 'pop':
@@ -7280,42 +7418,54 @@
         return ArrayCopyWithin;
     }
   }
-  var mutationWarningsSilenced = false;
+  function reportViolation(type, eventId, prop) {
+    if (process.env.NODE_ENV !== 'production') {
+      logWarnOnce("Mutating the \"".concat(prop, "\" property on a ").concat(type, " ") + "is deprecated and will be removed in a future version of LWC. " + "See: https://lwc.dev/guide/css#deprecated-template-mutation");
+    }
+    report(eventId, {
+      propertyName: prop
+    });
+  }
+  function reportTemplateViolation(prop) {
+    reportViolation('template', 3 /* ReportingEventId.TemplateMutation */, prop);
+  }
+  function reportStylesheetViolation(prop) {
+    reportViolation('stylesheet', 4 /* ReportingEventId.StylesheetMutation */, prop);
+  }
   // Warn if the user tries to mutate a stylesheets array, e.g.:
   // `tmpl.stylesheets.push(someStylesheetFunction)`
   function warnOnArrayMutation(stylesheets) {
     // We can't handle users calling Array.prototype.slice.call(tmpl.stylesheets), but
     // we can at least warn when they use the most common mutation methods.
-    var _iterator7 = _createForOfIteratorHelper(ARRAY_MUTATION_METHODS),
-      _step7;
+    var _iterator8 = _createForOfIteratorHelper(ARRAY_MUTATION_METHODS),
+      _step8;
     try {
-      var _loop2 = function _loop2() {
-        var prop = _step7.value;
+      var _loop4 = function _loop4() {
+        var prop = _step8.value;
         var originalArrayMethod = getOriginalArrayMethod(prop);
         stylesheets[prop] = function arrayMutationWarningWrapper() {
-          logError("Mutating the \"stylesheets\" array on a template function " + "is deprecated and may be removed in a future version of LWC.");
+          reportTemplateViolation('stylesheets');
           // @ts-ignore
           return originalArrayMethod.apply(this, arguments);
         };
       };
-      for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-        _loop2();
+      for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+        _loop4();
       }
     } catch (err) {
-      _iterator7.e(err);
+      _iterator8.e(err);
     } finally {
-      _iterator7.f();
+      _iterator8.f();
     }
   }
   // Warn if the user tries to mutate a stylesheet factory function, e.g.:
   // `stylesheet.$scoped$ = true`
   function warnOnStylesheetFunctionMutation(stylesheet) {
-    // We could warn on other properties, but in practice only certain expandos are meaningful to LWC at runtime
-    var _iterator8 = _createForOfIteratorHelper(STYLESHEET_FUNCTION_EXPANDOS),
-      _step8;
+    var _iterator9 = _createForOfIteratorHelper(STYLESHEET_PROPS),
+      _step9;
     try {
-      var _loop3 = function _loop3() {
-        var prop = _step8.value;
+      var _loop5 = function _loop5() {
+        var prop = _step9.value;
         var value = stylesheet[prop];
         defineProperty(stylesheet, prop, {
           enumerable: true,
@@ -7324,22 +7474,22 @@
             return value;
           },
           set: function set(newValue) {
-            logError("Dynamically setting the \"".concat(prop, "\" property on a stylesheet function ") + "is deprecated and may be removed in a future version of LWC.");
+            reportStylesheetViolation(prop);
             value = newValue;
           }
         });
       };
-      for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-        _loop3();
+      for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+        _loop5();
       }
     } catch (err) {
-      _iterator8.e(err);
+      _iterator9.e(err);
     } finally {
-      _iterator8.f();
+      _iterator9.f();
     }
   }
   // Warn on either array or stylesheet (function) mutation, in a deeply-nested array
-  function warnOnStylesheetsMutation(stylesheets) {
+  function trackStylesheetsMutation(stylesheets) {
     traverseStylesheets(stylesheets, function (subStylesheets) {
       if (isArray$1(subStylesheets)) {
         warnOnArrayMutation(subStylesheets);
@@ -7366,7 +7516,80 @@
       }
     }
   }
+  function trackMutations(tmpl) {
+    if (!isUndefined$1(tmpl.stylesheets)) {
+      trackStylesheetsMutation(tmpl.stylesheets);
+    }
+    var _iterator10 = _createForOfIteratorHelper(TEMPLATE_PROPS),
+      _step10;
+    try {
+      var _loop6 = function _loop6() {
+        var prop = _step10.value;
+        var value = tmpl[prop];
+        defineProperty(tmpl, prop, {
+          enumerable: true,
+          configurable: true,
+          get: function get() {
+            return value;
+          },
+          set: function set(newValue) {
+            if (!mutationTrackingDisabled) {
+              reportTemplateViolation(prop);
+            }
+            value = newValue;
+          }
+        });
+      };
+      for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
+        _loop6();
+      }
+    } catch (err) {
+      _iterator10.e(err);
+    } finally {
+      _iterator10.f();
+    }
+    var originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
+    defineProperty(tmpl, 'stylesheetTokens', {
+      enumerable: true,
+      configurable: true,
+      get: originalDescriptor.get,
+      set: function set(value) {
+        reportTemplateViolation('stylesheetTokens');
+        // Avoid logging/reporting twice (for both stylesheetToken and stylesheetTokens)
+        mutationTrackingDisabled = true;
+        originalDescriptor.set.call(this, value);
+        mutationTrackingDisabled = false;
+      }
+    });
+  }
+  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
+    defineProperty(tmpl, 'stylesheetTokens', {
+      enumerable: true,
+      configurable: true,
+      get: function get() {
+        var stylesheetToken = this.stylesheetToken;
+        if (isUndefined$1(stylesheetToken)) {
+          return stylesheetToken;
+        }
+        // Shim for the old `stylesheetTokens` property
+        // See https://github.com/salesforce/lwc/pull/2332/files#diff-7901555acef29969adaa6583185b3e9bce475cdc6f23e799a54e0018cb18abaa
+        return {
+          hostAttribute: "".concat(stylesheetToken, "-host"),
+          shadowAttribute: stylesheetToken
+        };
+      },
+      set: function set(value) {
+        // If the value is null or some other exotic object, you would be broken anyway in the past
+        // because the engine would try to access hostAttribute/shadowAttribute, which would throw an error.
+        // However it may be undefined in newer versions of LWC, so we need to guard against that case.
+        this.stylesheetToken = isUndefined$1(value) ? undefined : value.shadowAttribute;
+      }
+    });
+  }
   function freezeTemplate(tmpl) {
+    // TODO [#2782]: remove this flag and delete the legacy behavior
     if (lwcRuntimeFlags.ENABLE_FROZEN_TEMPLATE) {
       // Deep freeze the template
       freeze(tmpl);
@@ -7374,76 +7597,16 @@
         deepFreeze(tmpl.stylesheets);
       }
     } else {
-      // TODO [#2782]: remove this flag and delete the legacy behavior
-      // 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
-      defineProperty(tmpl, 'stylesheetTokens', {
-        enumerable: true,
-        configurable: true,
-        get: function get() {
-          var stylesheetToken = this.stylesheetToken;
-          if (isUndefined$1(stylesheetToken)) {
-            return stylesheetToken;
-          }
-          // Shim for the old `stylesheetTokens` property
-          // See https://github.com/salesforce/lwc/pull/2332/files#diff-7901555acef29969adaa6583185b3e9bce475cdc6f23e799a54e0018cb18abaa
-          return {
-            hostAttribute: "".concat(stylesheetToken, "-host"),
-            shadowAttribute: stylesheetToken
-          };
-        },
-        set: function set(value) {
-          // If the value is null or some other exotic object, you would be broken anyway in the past
-          // because the engine would try to access hostAttribute/shadowAttribute, which would throw an error.
-          // However it may be undefined in newer versions of LWC, so we need to guard against that case.
-          this.stylesheetToken = isUndefined$1(value) ? undefined : value.shadowAttribute;
-        }
-      });
-      // When ENABLE_FROZEN_TEMPLATE is false, warn in dev mode whenever someone is mutating the template
+      // template is not frozen - shim, report, and warn
+      // this shim should be applied in both dev and prod
+      addLegacyStylesheetTokensShim(tmpl);
+      // When ENABLE_FROZEN_TEMPLATE is false, we want to warn in dev mode whenever someone is mutating the template
       if (process.env.NODE_ENV !== 'production') {
-        if (!isUndefined$1(tmpl.stylesheets)) {
-          warnOnStylesheetsMutation(tmpl.stylesheets);
-        }
-        var _iterator9 = _createForOfIteratorHelper(TEMPLATE_PROPS),
-          _step9;
-        try {
-          var _loop4 = function _loop4() {
-            var prop = _step9.value;
-            var value = tmpl[prop];
-            defineProperty(tmpl, prop, {
-              enumerable: true,
-              configurable: true,
-              get: function get() {
-                return value;
-              },
-              set: function set(newValue) {
-                if (!mutationWarningsSilenced) {
-                  logError("Dynamically setting the \"".concat(prop, "\" property on a template function ") + "is deprecated and may be removed in a future version of LWC.");
-                }
-                value = newValue;
-              }
-            });
-          };
-          for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
-            _loop4();
-          }
-        } catch (err) {
-          _iterator9.e(err);
-        } finally {
-          _iterator9.f();
-        }
-        var originalDescriptor = getOwnPropertyDescriptor$1(tmpl, 'stylesheetTokens');
-        defineProperty(tmpl, 'stylesheetTokens', {
-          enumerable: true,
-          configurable: true,
-          get: originalDescriptor.get,
-          set: function set(value) {
-            logError("Dynamically setting the \"stylesheetTokens\" property on a template function " + "is deprecated and may be removed in a future version of LWC.");
-            // Avoid logging twice (for both stylesheetToken and stylesheetTokens)
-            mutationWarningsSilenced = true;
-            originalDescriptor.set.call(this, value);
-            mutationWarningsSilenced = false;
-          }
+        trackMutations(tmpl);
+      } else {
+        // In prod mode, we only track mutations if reporting is enabled
+        onReportingEnabled(function () {
+          trackMutations(tmpl);
         });
       }
     }
@@ -7471,7 +7634,7 @@
     }
     return ctor;
   }
-  /* version: 2.35.1 */
+  /* version: 2.36.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7747,7 +7910,7 @@
   var cachedConstructors = new Map();
   var elementsUpgradedOutsideLWC = new WeakSet();
   var elementBeingUpgradedByLWC = false;
-  // Creates a constructor that is intended to be used as a vanilla custom element, except that the upgradeCallback is
+  // 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
   // `customElements.define('x-foo')`, then you don't have access to the upgradeCallback, so it's a dummy custom element.
@@ -7796,7 +7959,7 @@
     }
     return UpgradableConstructor;
   };
-  var createCustomElementVanilla = function createCustomElementVanilla(tagName, upgradeCallback, connectedCallback, disconnectedCallback) {
+  var createCustomElementUsingUpgradableConstructor = function createCustomElementUsingUpgradableConstructor(tagName, upgradeCallback, connectedCallback, disconnectedCallback) {
     // use global custom elements registry
     var UpgradableConstructor = cachedConstructors.get(tagName);
     if (isUndefined$1(UpgradableConstructor)) {
@@ -7823,7 +7986,7 @@
    */
   /**
    * Create a scoped registry, i.e. a function that can create custom elements whose tag names
-   * do not conflict with vanilla custom elements having the same tag name.
+   * do not conflict with third-party custom elements having the same tag name.
    */
   function createScopedRegistry() {
     if (!hasCustomElements) {
@@ -8154,17 +8317,17 @@
     function flushPendingWhenDefinedCallbacks(tagName, ctor) {
       var resolvers = pendingWhenDefinedCallbacks.get(tagName);
       if (!isUndefined$1(resolvers)) {
-        var _iterator10 = _createForOfIteratorHelper(resolvers),
-          _step10;
+        var _iterator11 = _createForOfIteratorHelper(resolvers),
+          _step11;
         try {
-          for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
-            var resolver = _step10.value;
+          for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
+            var resolver = _step11.value;
             resolver(ctor);
           }
         } catch (err) {
-          _iterator10.e(err);
+          _iterator11.e(err);
         } finally {
-          _iterator10.f();
+          _iterator11.f();
         }
       }
       pendingWhenDefinedCallbacks.delete(tagName);
@@ -8214,11 +8377,11 @@
       var awaiting = awaitingUpgrade.get(tagName);
       if (!isUndefined$1(awaiting)) {
         awaitingUpgrade.delete(tagName);
-        var _iterator11 = _createForOfIteratorHelper(awaiting),
-          _step11;
+        var _iterator12 = _createForOfIteratorHelper(awaiting),
+          _step12;
         try {
-          for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-            var element = _step11.value;
+          for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
+            var element = _step12.value;
             var registeredDefinition = pendingRegistryForElement.get(element);
             // At this point, registeredDefinition should never be undefined because awaitingUpgrade
             // is only populated when we haven't run internalUpgrade yet, and we only populate
@@ -8230,9 +8393,9 @@
             }
           }
         } catch (err) {
-          _iterator11.e(err);
+          _iterator12.e(err);
         } finally {
-          _iterator11.f();
+          _iterator12.f();
         }
       }
       // If anyone called customElements.whenDefined() and is still waiting for a promise resolution, resolve now
@@ -8429,10 +8592,10 @@
    * We have three modes for creating custom elements:
    *
    * 1. Compat (legacy) browser support (e.g. IE11). Totally custom, doesn't rely on native browser APIs.
-   * 2. "Vanilla" custom elements registry. This system actually still allows us to have two LWC components with the
-   *    same tag name, via a simple trick: every custom element constructor we define in the registry is basically
-   *    the same. It's essentially a dummy `class extends HTMLElement` that accepts an `upgradeCallback` in its
-   *    constructor, which allows us to have completely customized functionality for different components.
+   * 2. "Upgradable constructor" custom element. This allows us to have two LWC components with the same tag name,
+   *    via a trick: every custom element constructor we define in the registry is basically the same. It's essentially
+   *    a dummy `class extends HTMLElement` that accepts an `upgradeCallback` in its constructor ("upgradable
+   *    constructor"), which allows us to have completely customized functionality for different components.
    * 3. "Scoped" (or "pivot") custom elements. This relies on a sophisticated system that emulates the "scoped custom
    *    elements registry" proposal, with support for avoiding conflicts in tag names both between LWC components and
    *    between LWC components and third-party elements. This uses a similar trick to #2, but is much more complex
@@ -8443,8 +8606,8 @@
     if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
       createCustomElement = createCustomElementScoped;
     } else {
-      // use global custom elements registry (vanilla)
-      createCustomElement = createCustomElementVanilla;
+      // use the global registry, with an upgradable constructor for the defined custom element
+      createCustomElement = createCustomElementUsingUpgradableConstructor;
     }
   } else {
     // no registry available here
@@ -8498,10 +8661,10 @@
       }
       var assert = /*#__PURE__*/Object.freeze({
         __proto__: null,
+        fail: fail,
         invariant: invariant,
-        isTrue: isTrue$1,
         isFalse: isFalse$1,
-        fail: fail
+        isTrue: isTrue$1
       });
       function isUndefined(obj) {
         return obj === undefined;
@@ -8509,7 +8672,7 @@
       function isNull(obj) {
         return obj === null;
       }
-      /** version: 2.35.1 */
+      /** version: 2.36.0 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -8568,17 +8731,17 @@
         exports.createFragment = function (html) {
           var wrapperTags = topLevelWrappingMap[getTagName(html)];
           if (!isUndefined(wrapperTags)) {
-            var _iterator12 = _createForOfIteratorHelper(wrapperTags),
-              _step12;
+            var _iterator13 = _createForOfIteratorHelper(wrapperTags),
+              _step13;
             try {
-              for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
-                var wrapperTag = _step12.value;
+              for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
+                var wrapperTag = _step13.value;
                 html = "<".concat(wrapperTag, ">").concat(html, "</").concat(wrapperTag, ">");
               }
             } catch (err) {
-              _iterator12.e(err);
+              _iterator13.e(err);
             } finally {
-              _iterator12.f();
+              _iterator13.f();
             }
           }
           // For IE11, the document title must not be undefined, but it can be an empty string
@@ -9075,7 +9238,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.35.1 */
+  /* version: 2.36.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;