@lwrjs/everywhere 0.15.0-alpha.9 → 0.15.0

package/build/__generated_site_amd_modules__/1/module/amd/1/l/en-US/mi/lwc/v/{7_2_1/s/78ef23818e3b886f8d3d93ec49c1ee0c → 8_9_0/s/1bc4b836e34db15a047501ddb6736861}/lwc.js

@@ -1,4 +1,4 @@
-LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
+LWR.define('lwc/v/8_9_0', ['exports'], (function (exports) { 'use strict';
 
   /**
    * Copyright (c) 2024 Salesforce, Inc.
@@ -82,6 +82,8 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     getOwnPropertyDescriptors,
     /** Detached {@linkcode Object.getOwnPropertyNames}; see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames MDN Reference}. */
     getOwnPropertyNames: getOwnPropertyNames$1,
+    /** Detached {@linkcode Object.getOwnPropertySymbols}; see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols MDN Reference}. */
+    getOwnPropertySymbols: getOwnPropertySymbols$1,
     /** Detached {@linkcode Object.getPrototypeOf}; see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf MDN Reference}. */
     getPrototypeOf: getPrototypeOf$1,
     /** Detached {@linkcode Object.hasOwnProperty}; see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty MDN Reference}. */
@@ -95,28 +97,25 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     /** Detached {@linkcode Object.setPrototypeOf}; see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf MDN Reference}. */
     setPrototypeOf
   } = Object;
-  /** Detached {@linkcode Array.isArray}; see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray MDN Reference}. */
   const {
-    isArray: isArray$1
+    /** Detached {@linkcode Array.isArray}; see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray MDN Reference}. */
+    isArray: isArray$1,
+    /** Detached {@linkcode Array.from}; see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from MDN Reference}. */
+    from: ArrayFrom
   } = Array;
   // For some reason, JSDoc don't get picked up for multiple renamed destructured constants (even
   // though it works fine for one, e.g. isArray), so comments for these are added to the export
   // statement, rather than this declaration.
   const {
-    concat: ArrayConcat$1,
     copyWithin: ArrayCopyWithin,
     every: ArrayEvery,
     fill: ArrayFill,
     filter: ArrayFilter,
-    find: ArrayFind,
-    findIndex: ArrayFindIndex,
-    includes: ArrayIncludes,
     indexOf: ArrayIndexOf,
     join: ArrayJoin,
     map: ArrayMap,
     pop: ArrayPop,
     push: ArrayPush$1,
-    reduce: ArrayReduce,
     reverse: ArrayReverse,
     shift: ArrayShift,
     slice: ArraySlice,
@@ -202,7 +201,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
    * @returns `true` if the value is a function.
    */
   // Replacing `Function` with a narrower type that works for all our use cases is tricky...
-  // eslint-disable-next-line @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   function isFunction$1(obj) {
     return typeof obj === 'function';
   }
@@ -293,7 +292,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
   // 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 allVersions = [58 /* APIVersion.V58_244_SUMMER_23 */, 59 /* APIVersion.V59_246_WINTER_24 */, 60 /* APIVersion.V60_248_SPRING_24 */, 61 /* APIVersion.V61_250_SUMMER_24 */, 62 /* APIVersion.V62_252_WINTER_25 */];
+  const allVersions = [58 /* APIVersion.V58_244_SUMMER_23 */, 59 /* APIVersion.V59_246_WINTER_24 */, 60 /* APIVersion.V60_248_SPRING_24 */, 61 /* APIVersion.V61_250_SUMMER_24 */, 62 /* APIVersion.V62_252_WINTER_25 */, 63 /* APIVersion.V63_254_SPRING_25 */];
   const LOWEST_API_VERSION = allVersions[0];
   /**
    *
@@ -317,6 +316,8 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       case 9 /* APIFeature.ENABLE_THIS_DOT_STYLE */:
       case 10 /* APIFeature.TEMPLATE_CLASS_NAME_OBJECT_BINDING */:
         return apiVersion >= 62 /* APIVersion.V62_252_WINTER_25 */;
+      case 11 /* APIFeature.ENABLE_COMPLEX_TEMPLATE_EXPRESSIONS */:
+        return apiVersion >= 63 /* APIVersion.V63_254_SPRING_25 */;
     }
   }
 
@@ -348,6 +349,9 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     // Synthetic creation of all AOM property descriptors for Custom Elements
     forEach.call(AriaPropertyNames, propName => {
       const attrName = StringToLowerCase.call(StringReplace.call(propName, /^aria/, () => 'aria-'));
+      // These type assertions are because the map types are a 1:1 mapping of ariaX to aria-x.
+      // TypeScript knows we have one of ariaX | ariaY and one of aria-x | aria-y, and tries to
+      // prevent us from doing ariaX: aria-y, but we that it's safe.
       AriaAttrNameToPropNameMap[attrName] = propName;
       AriaPropNameToAttrNameMap[propName] = attrName;
     });
@@ -371,6 +375,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
   const KEY__SHADOW_TOKEN = '$shadowToken$';
   const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
   const KEY__SCOPED_CSS = '$scoped$';
+  const KEY__NATIVE_ONLY_CSS = '$nativeOnly$';
   const KEY__NATIVE_GET_ELEMENT_BY_ID = '$nativeGetElementById$';
   const KEY__NATIVE_QUERY_SELECTOR_ALL = '$nativeQuerySelectorAll$';
   const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
@@ -446,9 +451,81 @@ LWR.define('lwc/v/7_2_1', ['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 = "7.2.1";
+  const LWC_VERSION = "8.9.0";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 7.2.1 */
+
+  /*
+   * Copyright (c) 2024, Salesforce, 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
+   */
+  let hooksAreSet = false;
+  /**
+   * EXPERIMENTAL: This function acts like a hook for Lightning Locker Service and other similar
+   * libraries to sanitize HTML content. This hook process the content passed via the template to
+   * lwc:inner-html directive.
+   * It is meant to be overridden via `setHooks`; it throws an error by default.
+   */
+  let sanitizeHtmlContent = () => {
+    // locker-service patches this function during runtime to sanitize HTML content.
+    throw new Error('sanitizeHtmlContent hook must be implemented.');
+  };
+  function setHooks(hooks) {
+    isFalse$1(hooksAreSet, 'Hooks are already overridden, only one definition is allowed.');
+    hooksAreSet = true;
+    sanitizeHtmlContent = hooks.sanitizeHtmlContent;
+  }
+  const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
+  const PROPERTY_DELIMITER = /:(.+)/s; // `/s` (dotAll) required to match styles across newlines, e.g. `color: \n red;`
+  // Borrowed from Vue template compiler.
+  // https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
+  function parseStyleText(cssText) {
+    const styleMap = {};
+    const declarations = cssText.split(DECLARATION_DELIMITER);
+    for (const declaration of declarations) {
+      if (declaration) {
+        const [prop, value] = declaration.split(PROPERTY_DELIMITER);
+        if (prop !== undefined && value !== undefined) {
+          styleMap[prop.trim()] = value.trim();
+        }
+      }
+    }
+    return styleMap;
+  }
+  function flattenStylesheets(stylesheets) {
+    const list = [];
+    for (const stylesheet of stylesheets) {
+      if (!isArray$1(stylesheet)) {
+        list.push(stylesheet);
+      } else {
+        list.push(...flattenStylesheets(stylesheet));
+      }
+    }
+    return list;
+  }
+
+  /*
+   * Copyright (c) 2024, 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
+   */
+  let trustedSignals;
+  function setTrustedSignalSet(signals) {
+    isFalse$1(trustedSignals, 'Trusted Signal Set is already set!');
+    trustedSignals = signals;
+  }
+  function isTrustedSignal(target) {
+    if (!trustedSignals) {
+      // The runtime didn't set a trustedSignals set
+      // this check should only be performed for runtimes that care about filtering signals to track
+      // our default behavior should be to track all signals
+      return true;
+    }
+    return trustedSignals.has(target);
+  }
+  /** version: 8.9.0 */
 
   /**
    * Copyright (c) 2024 Salesforce, Inc.
@@ -535,7 +612,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       setFeatureFlag(name, value);
     }
   }
-  /** version: 7.2.1 */
+  /** version: 8.9.0 */
 
   /**
    * Copyright (c) 2024 Salesforce, Inc.
@@ -686,7 +763,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       }
       alreadyLoggedMessages.add(msg);
     }
-    // In Jest tests, reduce the warning and error verbosity by not printing the callstack
+    // In Vitest tests, reduce the warning and error verbosity by not printing the callstack
     if (process.env.NODE_ENV === 'test') {
       /* eslint-disable-next-line no-console */
       console[method](msg);
@@ -710,7 +787,201 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
   }
 
   /*
-   * Copyright (c) 2019, 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
+   */
+  let nextTickCallbackQueue = [];
+  const SPACE_CHAR = 32;
+  const EmptyObject = seal(create(null));
+  const EmptyArray = seal([]);
+  function flushCallbackQueue() {
+    if (process.env.NODE_ENV !== 'production') {
+      if (nextTickCallbackQueue.length === 0) {
+        throw new Error(`Internal Error: If callbackQueue is scheduled, it is because there must be at least one callback on this pending queue.`);
+      }
+    }
+    const callbacks = nextTickCallbackQueue;
+    nextTickCallbackQueue = []; // reset to a new queue
+    for (let i = 0, len = callbacks.length; i < len; i += 1) {
+      callbacks[i]();
+    }
+  }
+  function addCallbackToNextTick(callback) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!isFunction$1(callback)) {
+        throw new Error(`Internal Error: addCallbackToNextTick() can only accept a function callback`);
+      }
+    }
+    if (nextTickCallbackQueue.length === 0) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      Promise.resolve().then(flushCallbackQueue);
+    }
+    ArrayPush$1.call(nextTickCallbackQueue, callback);
+  }
+  function guid() {
+    function s4() {
+      return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+    }
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+  }
+  // Make a shallow copy of an object but omit the given key
+  function cloneAndOmitKey(object, keyToOmit) {
+    const result = {};
+    for (const key of keys(object)) {
+      if (key !== keyToOmit) {
+        result[key] = object[key];
+      }
+    }
+    return result;
+  }
+  // Throw an error if we're running in prod mode. Ensures code is truly removed from prod mode.
+  function assertNotProd() {
+    /* istanbul ignore if */
+    if (process.env.NODE_ENV === 'production') {
+      // this method should never leak to prod
+      throw new ReferenceError();
+    }
+  }
+  function shouldBeFormAssociated(Ctor) {
+    const ctorFormAssociated = Boolean(Ctor.formAssociated);
+    const apiVersion = getComponentAPIVersion(Ctor);
+    const apiFeatureEnabled = isAPIFeatureEnabled(7 /* APIFeature.ENABLE_ELEMENT_INTERNALS_AND_FACE */, apiVersion);
+    if (process.env.NODE_ENV !== 'production' && ctorFormAssociated && !apiFeatureEnabled) {
+      const tagName = getComponentRegisteredName(Ctor);
+      logWarnOnce(`Component <${tagName}> set static formAssociated to true, but form ` + `association is not enabled because the API version is ${apiVersion}. To enable form association, ` + `update the LWC component API version to 61 or above. https://lwc.dev/guide/versioning`);
+    }
+    return ctorFormAssociated && apiFeatureEnabled;
+  }
+
+  /*
+   * Copyright (c) 2024, Salesforce, 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
+   */
+  //
+  // Do additional mutation tracking for DevTools performance profiling, in dev mode only.
+  //
+  const reactiveObserversToVMs = new WeakMap();
+  const targetsToPropertyKeys = new WeakMap();
+  let mutationLogs = [];
+  // Create a human-readable member access notation like `obj.foo` or `arr[1]`,
+  // handling edge cases like `obj[Symbol("bar")]` and `obj["spaces here"]`
+  function toPrettyMemberNotation(parent, child) {
+    if (isUndefined$1(parent)) {
+      // Bare prop, just stringify the child
+      return toString$1(child);
+    } else if (!isString(child)) {
+      // Symbol/number, e.g. `obj[Symbol("foo")]` or `obj[1234]`
+      return `${toString$1(parent)}[${toString$1(child)}]`;
+    } else if (/^\w+$/.test(child)) {
+      // Dot-notation-safe string, e.g. `obj.foo`
+      return `${toString$1(parent)}.${child}`;
+    } else {
+      // Bracket-notation-requiring string, e.g. `obj["prop with spaces"]`
+      return `${toString$1(parent)}[${JSON.stringify(child)}]`;
+    }
+  }
+  function safelyCallGetter(target, key) {
+    // Arbitrary getters can throw. We don't want to throw an error just due to dev-mode-only mutation tracking
+    // (which is only used for performance debugging) so ignore errors here.
+    try {
+      return target[key];
+    } catch (_err) {
+      /* ignore */
+    }
+  }
+  /**
+   * Flush all the logs we've written so far and return the current logs.
+   */
+  function getAndFlushMutationLogs() {
+    assertNotProd();
+    const result = mutationLogs;
+    mutationLogs = [];
+    return result;
+  }
+  /**
+   * Log a new mutation for this reactive observer.
+   * @param reactiveObserver - relevant ReactiveObserver
+   * @param target - target object that is being observed
+   * @param key - key (property) that was mutated
+   */
+  function logMutation(reactiveObserver, target, key) {
+    assertNotProd();
+    const parentKey = targetsToPropertyKeys.get(target);
+    const vm = reactiveObserversToVMs.get(reactiveObserver);
+    /* istanbul ignore if */
+    if (isUndefined$1(vm)) {
+      // VM should only be undefined in Vitest tests, where a reactive observer is not always associated with a VM
+      // because the unit tests just create Reactive Observers on-the-fly.
+      // Note we could explicitly target Vitest with `process.env.NODE_ENV === 'test'`, but then that would also
+      // affect our downstream consumers' Jest/Vitest tests, and we don't want to throw an error just for a logger.
+      if (process.env.NODE_ENV === 'test-karma-lwc') {
+        throw new Error('The VM should always be defined except possibly in unit tests');
+      }
+    } else {
+      const prop = toPrettyMemberNotation(parentKey, key);
+      ArrayPush$1.call(mutationLogs, {
+        vm,
+        prop
+      });
+    }
+  }
+  /**
+   * Flush logs associated with a given VM.
+   * @param vm - given VM
+   */
+  function flushMutationLogsForVM(vm) {
+    assertNotProd();
+    mutationLogs = ArrayFilter.call(mutationLogs, log => log.vm !== vm);
+  }
+  /**
+   * Mark this ReactiveObserver as related to this VM. This is only needed for mutation tracking in dev mode.
+   * @param reactiveObserver
+   * @param vm
+   */
+  function associateReactiveObserverWithVM(reactiveObserver, vm) {
+    assertNotProd();
+    reactiveObserversToVMs.set(reactiveObserver, vm);
+  }
+  /**
+   * Deeply track all objects in a target and associate with a given key.
+   * @param key - key associated with the object in the component
+   * @param target - tracked target object
+   */
+  function trackTargetForMutationLogging(key, target) {
+    assertNotProd();
+    if (targetsToPropertyKeys.has(target)) {
+      // Guard against recursive objects - don't traverse forever
+      return;
+    }
+    if (isObject(target) && !isNull(target)) {
+      // only track non-primitives; others are invalid as WeakMap keys
+      targetsToPropertyKeys.set(target, key);
+      // Deeply traverse arrays and objects to track every object within
+      if (isArray$1(target)) {
+        for (let i = 0; i < target.length; i++) {
+          trackTargetForMutationLogging(toPrettyMemberNotation(key, i), safelyCallGetter(target, i));
+        }
+      } else {
+        // Track only own property names and symbols (including non-enumerated)
+        // This is consistent with what observable-membrane does:
+        // https://github.com/salesforce/observable-membrane/blob/b85417f/src/base-handler.ts#L142-L143
+        // Note this code path is very hot, hence doing two separate for-loops rather than creating a new array.
+        for (const prop of getOwnPropertyNames$1(target)) {
+          trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), safelyCallGetter(target, prop));
+        }
+        for (const prop of getOwnPropertySymbols$1(target)) {
+          trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), safelyCallGetter(target, prop));
+        }
+      }
+    }
+  }
+
+  /*
+   * Copyright (c) 2024, Salesforce, 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
@@ -733,6 +1004,9 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       if (!isUndefined$1(reactiveObservers)) {
         for (let i = 0, len = reactiveObservers.length; i < len; i += 1) {
           const ro = reactiveObservers[i];
+          if (process.env.NODE_ENV !== 'production') {
+            logMutation(ro, target, key);
+          }
           ro.notify();
         }
       }
@@ -906,7 +1180,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     // We check check the following to ensure re-render is subscribed at the correct time.
     //  1. The template is currently being rendered (there is a template reactive observer)
     //  2. There was a call to a getter to access the signal (happens during vnode generation)
-    if (lwcRuntimeFlags.ENABLE_EXPERIMENTAL_SIGNALS && isObject(target) && !isNull(target) && 'value' in target && 'subscribe' in target && isFunction$1(target.subscribe) &&
+    if (lwcRuntimeFlags.ENABLE_EXPERIMENTAL_SIGNALS && isObject(target) && !isNull(target) && 'value' in target && 'subscribe' in target && isFunction$1(target.subscribe) && isTrustedSignal(target) &&
     // Only subscribe if a template is being rendered by the engine
     tro.isObserving()) {
       // Subscribe the template reactive observer's notify method, which will mark the vm as dirty and schedule hydration.
@@ -918,103 +1192,6 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     return new ReactiveObserver(callback);
   }
 
-  /*
-   * 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
-   */
-  let nextTickCallbackQueue = [];
-  const SPACE_CHAR = 32;
-  const EmptyObject = seal(create(null));
-  const EmptyArray = seal([]);
-  function flushCallbackQueue() {
-    if (process.env.NODE_ENV !== 'production') {
-      if (nextTickCallbackQueue.length === 0) {
-        throw new Error(`Internal Error: If callbackQueue is scheduled, it is because there must be at least one callback on this pending queue.`);
-      }
-    }
-    const callbacks = nextTickCallbackQueue;
-    nextTickCallbackQueue = []; // reset to a new queue
-    for (let i = 0, len = callbacks.length; i < len; i += 1) {
-      callbacks[i]();
-    }
-  }
-  function addCallbackToNextTick(callback) {
-    if (process.env.NODE_ENV !== 'production') {
-      if (!isFunction$1(callback)) {
-        throw new Error(`Internal Error: addCallbackToNextTick() can only accept a function callback`);
-      }
-    }
-    if (nextTickCallbackQueue.length === 0) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      Promise.resolve().then(flushCallbackQueue);
-    }
-    ArrayPush$1.call(nextTickCallbackQueue, callback);
-  }
-  function guid() {
-    function s4() {
-      return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
-    }
-    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-  }
-  // Borrowed from Vue template compiler.
-  // https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
-  const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
-  const PROPERTY_DELIMITER = /:(.+)/;
-  function parseStyleText(cssText) {
-    const styleMap = {};
-    const declarations = cssText.split(DECLARATION_DELIMITER);
-    for (const declaration of declarations) {
-      if (declaration) {
-        const [prop, value] = declaration.split(PROPERTY_DELIMITER);
-        if (prop !== undefined && value !== undefined) {
-          styleMap[prop.trim()] = value.trim();
-        }
-      }
-    }
-    return styleMap;
-  }
-  // Make a shallow copy of an object but omit the given key
-  function cloneAndOmitKey(object, keyToOmit) {
-    const result = {};
-    for (const key of keys(object)) {
-      if (key !== keyToOmit) {
-        result[key] = object[key];
-      }
-    }
-    return result;
-  }
-  function flattenStylesheets(stylesheets) {
-    const list = [];
-    for (const stylesheet of stylesheets) {
-      if (!isArray$1(stylesheet)) {
-        list.push(stylesheet);
-      } else {
-        list.push(...flattenStylesheets(stylesheet));
-      }
-    }
-    return list;
-  }
-  // Throw an error if we're running in prod mode. Ensures code is truly removed from prod mode.
-  function assertNotProd() {
-    /* istanbul ignore if */
-    if (process.env.NODE_ENV === 'production') {
-      // this method should never leak to prod
-      throw new ReferenceError();
-    }
-  }
-  function shouldBeFormAssociated(Ctor) {
-    const ctorFormAssociated = Boolean(Ctor.formAssociated);
-    const apiVersion = getComponentAPIVersion(Ctor);
-    const apiFeatureEnabled = isAPIFeatureEnabled(7 /* APIFeature.ENABLE_ELEMENT_INTERNALS_AND_FACE */, apiVersion);
-    if (process.env.NODE_ENV !== 'production' && ctorFormAssociated && !apiFeatureEnabled) {
-      const tagName = getComponentRegisteredName(Ctor);
-      logWarnOnce(`Component <${tagName}> set static formAssociated to true, but form ` + `association is not enabled because the API version is ${apiVersion}. To enable form association, ` + `update the LWC component API version to 61 or above. https://lwc.dev/guide/versioning`);
-    }
-    return ctorFormAssociated && apiFeatureEnabled;
-  }
-
   /*
    * Copyright (c) 2020, salesforce.com, inc.
    * All rights reserved.
@@ -1070,8 +1247,9 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
           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
+          // TODO [#3284]: According to the spec, IDL nullable type values
+          // (null and undefined) should remove the attribute; however, we
+          // only do so in the case of null for historical reasons.
           // See also https://github.com/w3c/aria/issues/1858
           if (isNull(newValue)) {
             this.removeAttribute(attrName);
@@ -1085,6 +1263,8 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       };
     }
   }
+  // Add descriptors for ARIA attributes
+  for (const [attrName, propName] of entries(AriaAttrNameToPropNameMap)) {}
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -1719,7 +1899,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       valueMutated(originalTarget, key);
       return true;
     }
-    /*LWC compiler v7.2.1*/
+    /*LWC compiler v8.9.0*/
   }
   const getterMap = new WeakMap();
   const setterMap = new WeakMap();
@@ -1812,7 +1992,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       /* istanbul ignore next */
       return false;
     }
-    /*LWC compiler v7.2.1*/
+    /*LWC compiler v8.9.0*/
   }
   function extract(objectOrArray) {
     if (isArray(objectOrArray)) {
@@ -2041,7 +2221,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       } = elm;
       try {
         return await (await fetch(href)).text();
-      } catch (err) {
+      } catch (_err) {
         logWarnOnce(`Ignoring cross-origin stylesheet in migrate mode: ${href}`);
         // ignore errors with cross-origin stylesheets - nothing we can do for those
         return '';
@@ -2811,6 +2991,9 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
         });
       }
     });
+    if (process.env.NODE_ENV !== 'production') {
+      associateReactiveObserverWithVM(ro, getAssociatedVM(component));
+    }
     const computeConfigAndUpdate = () => {
       let config;
       ro.observe(() => config = configCallback(component));
@@ -3092,7 +3275,9 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
-  function track(target) {
+  function track(target,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  context) {
     if (arguments.length === 1) {
       return getReactiveProxy(target);
     }
@@ -3121,6 +3306,9 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
           }
         }
         const reactiveOrAnyValue = getReactiveProxy(newValue);
+        if (process.env.NODE_ENV !== 'production') {
+          trackTargetForMutationLogging(key, newValue);
+        }
         updateComponentValue(vm, key, reactiveOrAnyValue);
       },
       enumerable: true,
@@ -3565,7 +3753,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
   }
   function HTMLBridgeElementFactory(SuperClass, publicProperties, methods, observedFields, proto, hasCustomSuperClass) {
     const HTMLBridgeElement = class extends SuperClass {
-      /*LWC compiler v7.2.1*/
+      /*LWC compiler v8.9.0*/
     };
     // generating the hash table for attributes to avoid duplicate fields and facilitate validation
     // and false positives in case of inheritance.
@@ -3792,7 +3980,8 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     // Set the new styling token on the host element
     if (!isUndefined$1(newToken)) {
       if (hasScopedStyles) {
-        getClassList(elm).add(makeHostToken(newToken));
+        const hostScopeTokenClass = makeHostToken(newToken);
+        getClassList(elm).add(hostScopeTokenClass);
         newHasTokenInClass = true;
       }
       if (isSyntheticShadow) {
@@ -3827,21 +4016,26 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
           // the stylesheet, while internally, we have a replacement for it.
           stylesheet = getStyleOrSwappedStyle(stylesheet);
         }
-        const isScopedCss = stylesheet[KEY__SCOPED_CSS];
-        if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS && !isScopedCss && vm.renderMode === 0 /* RenderMode.Light */) {
+        const isScopedCss = isTrue(stylesheet[KEY__SCOPED_CSS]);
+        const isNativeOnlyCss = isTrue(stylesheet[KEY__NATIVE_ONLY_CSS]);
+        const {
+          renderMode,
+          shadowMode
+        } = vm;
+        if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS && !isScopedCss && renderMode === 0 /* RenderMode.Light */) {
           logError('Unscoped CSS is not supported in Light DOM in this environment. Please use scoped CSS ' + '(*.scoped.css) instead of unscoped CSS (*.css). See also: https://sfdc.co/scoped-styles-light-dom');
           continue;
         }
         // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
-        const scopeToken = isScopedCss || vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */ ? stylesheetToken : undefined;
+        const scopeToken = isScopedCss || shadowMode === 1 /* ShadowMode.Synthetic */ && renderMode === 1 /* RenderMode.Shadow */ ? stylesheetToken : undefined;
         // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
         // native shadow DOM. Synthetic shadow DOM never uses `:host`.
-        const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */ ? !isScopedCss : vm.shadowMode === 0 /* ShadowMode.Native */;
+        const useActualHostSelector = renderMode === 0 /* RenderMode.Light */ ? !isScopedCss : shadowMode === 0 /* ShadowMode.Native */;
         // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
         // we use an attribute selector on the host to simulate :dir().
         let useNativeDirPseudoclass;
-        if (vm.renderMode === 1 /* RenderMode.Shadow */) {
-          useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
+        if (renderMode === 1 /* RenderMode.Shadow */) {
+          useNativeDirPseudoclass = shadowMode === 0 /* ShadowMode.Native */;
         } else {
           // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
           // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
@@ -3851,7 +4045,15 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
           }
           useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
         }
-        const cssContent = stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass);
+        let cssContent;
+        if (isNativeOnlyCss && renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
+          // Native-only (i.e. disableSyntheticShadowSupport) CSS should be ignored entirely
+          // in synthetic shadow. It's fine to use in either native shadow or light DOM, but in
+          // synthetic shadow it wouldn't be scoped properly and so should be ignored.
+          cssContent = '/* ignored native-only CSS */';
+        } else {
+          cssContent = stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass);
+        }
         if (process.env.NODE_ENV !== 'production') {
           linkStylesheetToCssContentInDevMode(stylesheet, cssContent);
         }
@@ -3913,25 +4115,6 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     } = owner;
     return context.hasScopedStyles && (legacy ? cmpTemplate?.legacyStylesheetToken : cmpTemplate?.stylesheetToken) || null;
   }
-  /**
-   * This function returns the host style token for a custom element if it
-   * exists. Otherwise it returns null.
-   *
-   * A host style token is applied to the component if scoped styles are used.
-   * @param vnode
-   */
-  function getStylesheetTokenHost(vnode) {
-    const {
-      template
-    } = getComponentInternalDef(vnode.ctor);
-    const {
-      vm
-    } = vnode;
-    const {
-      stylesheetToken
-    } = template;
-    return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template, vm) ? makeHostToken(stylesheetToken) : null;
-  }
   function getNearestNativeShadowComponent(vm) {
     const owner = getNearestShadowComponent(vm);
     if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
@@ -4483,7 +4666,6 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     return def.bridge;
   }
   const lightingElementDef = {
-    ctor: LightningElement,
     name: LightningElement.name,
     props: lightningBasedDescriptors,
     propsConfig: EmptyObject,
@@ -4572,6 +4754,69 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     return vnode.type === 0 /* VStaticPartType.Text */;
   }
 
+  /*
+   * Copyright (c) 2024, Salesforce, 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 sanitizedHtmlContentSymbol = Symbol('lwc-get-sanitized-html-content');
+  function isSanitizedHtmlContent(object) {
+    return isObject(object) && !isNull(object) && sanitizedHtmlContentSymbol in object;
+  }
+  function unwrapIfNecessary(object) {
+    return isSanitizedHtmlContent(object) ? object[sanitizedHtmlContentSymbol] : object;
+  }
+  /**
+   * Wrap a pre-sanitized string designated for `.innerHTML` via `lwc:inner-html`
+   * as an object with a Symbol that only we have access to.
+   * @param sanitizedString
+   * @returns SanitizedHtmlContent
+   */
+  function createSanitizedHtmlContent(sanitizedString) {
+    return create(null, {
+      [sanitizedHtmlContentSymbol]: {
+        value: sanitizedString,
+        configurable: false,
+        writable: false
+      }
+    });
+  }
+  /**
+   * Safely call setProperty on an Element while handling any SanitizedHtmlContent objects correctly
+   *
+   * @param setProperty - renderer.setProperty
+   * @param elm - Element
+   * @param key - key to set
+   * @param value -  value to set
+   */
+  function safelySetProperty(setProperty, elm, key, value) {
+    // See W-16614337
+    // we support setting innerHTML to `undefined` because it's inherently safe
+    if ((key === 'innerHTML' || key === 'outerHTML') && !isUndefined$1(value)) {
+      if (isSanitizedHtmlContent(value)) {
+        // it's a SanitizedHtmlContent object
+        setProperty(elm, key, value[sanitizedHtmlContentSymbol]);
+      } else {
+        // not a SanitizedHtmlContent object
+        if (process.env.NODE_ENV !== 'production') {
+          logWarn(`Cannot set property "${key}". Instead, use lwc:inner-html or lwc:dom-manual.`);
+        }
+      }
+    } else {
+      setProperty(elm, key, value);
+    }
+  }
+  /**
+   * Given two objects (likely either a string or a SanitizedHtmlContent object), return true if their
+   * string values are equivalent.
+   * @param first
+   * @param second
+   */
+  function isSanitizedHtmlContentEqual(first, second) {
+    return unwrapIfNecessary(first) === unwrapIfNecessary(second);
+  }
+
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -4611,7 +4856,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
         // Use kebabCaseToCamelCase directly because we don't want to set props like `ariaLabel` or `tabIndex`
         // on a custom element versus just using the more reliable attribute format.
         if (external && (propName = kebabCaseToCamelCase(key)) in elm) {
-          setProperty(elm, propName, cur);
+          safelySetProperty(setProperty, elm, propName, cur);
         } else if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
           // Assume xml namespace
           setAttribute(elm, key, cur, XML_NAMESPACE);
@@ -4699,7 +4944,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
             logWarn(`Unknown public property "${key}" of element <${elm.tagName.toLowerCase()}>. This is either a typo on the corresponding attribute "${htmlPropertyToAttribute(key)}", or the attribute does not exist in this browser or DOM implementation.`);
           }
         }
-        setProperty(elm, key, cur);
+        safelySetProperty(setProperty, elm, key, cur);
       }
     }
   }
@@ -6133,25 +6378,33 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
           } else {
             // This block is for standard slots (non-scoped slots)
             let clonedVNode;
-            if (renderMode === 0 /* RenderMode.Light */ && isAPIFeatureEnabled(6 /* APIFeature.USE_LIGHT_DOM_SLOT_FORWARDING */, apiVersion) && (isVBaseElement(vnode) || isVStatic(vnode)) &&
-            // We only need to copy the vnodes when the slot assignment changes, copying every time causes issues with
-            // disconnected/connected callback firing.
-            vnode.slotAssignment !== data.slotAssignment) {
-              // When the light DOM slot assignment (slot attribute) changes we can't use the same reference
-              // to the vnode because the current way the diffing algo works, it will replace the original reference
-              // to the host element with a new one. This means the new element will be mounted and immediately unmounted.
-              // Creating a copy of the vnode to preserve a reference to the previous host element.
-              if (isUndefined$1(vnode.elm)) {
-                // vnode.elm is undefined during initial render.
-                // We don't need to clone at this point because it doesn't need to be unmounted.
-                vnode.slotAssignment = data.slotAssignment;
-              } else {
-                // Clone when the vnode.elm is defined to ensure we don't lose reference to the previous element.
-                // This is specifically for slot forwarding.
-                clonedVNode = {
-                  ...vnode,
-                  slotAssignment: data.slotAssignment
-                };
+            if (renderMode === 0 /* RenderMode.Light */ && isAPIFeatureEnabled(6 /* APIFeature.USE_LIGHT_DOM_SLOT_FORWARDING */, apiVersion) && (isVBaseElement(vnode) || isVStatic(vnode)) && vnode.slotAssignment !== data.slotAssignment) {
+              // When the light DOM slot assignment (slot attribute) changes, we can't use the same reference
+              // to the vnode because the current way the diffing algo works, it will replace the original
+              // reference to the host element with a new one. This means the new element will be mounted and
+              // immediately unmounted. Creating a copy of the vnode preserves a reference to the previous
+              // host element.
+              clonedVNode = {
+                ...vnode,
+                slotAssignment: data.slotAssignment
+              };
+              // For disconnectedCallback to work correctly in synthetic lifecycle mode, we need to link the
+              // current VM's velements to the clone, so that when the VM unmounts, the clone also unmounts.
+              // Note this only applies to VCustomElements, since those are the elements that we manually need
+              // to call disconnectedCallback for, when running in synthetic lifecycle mode.
+              //
+              // You might think it would make more sense to add the clonedVNode to the same velements array
+              // as the original vnode's VM (i.e. `vnode.owner.velements`) rather than the current VM (i.e.
+              // `vmBeingRendered.velements`), but this actually might not trigger disconnectedCallback
+              // in synthetic lifecycle mode. The reason for this is that a reactivity change may cause
+              // the slottable component to unmount, but _not_ the slotter component (see issue #4446).
+              //
+              // If this occurs, then the slottable component (i.e .this component we are rendering right
+              // now) is the one that needs to own the clone. Whereas if a reactivity change higher in the
+              // tree causes the slotter to unmount, then the slottable will also unmount. So using the
+              // current VM works either way.
+              if (isVCustomElement(vnode)) {
+                addVNodeToChildLWC(clonedVNode);
               }
             }
             // If the slot content is standard type, the content is static, no additional
@@ -6455,7 +6708,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       return null;
     }
     if (!isComponentConstructor(Ctor)) {
-      throw new Error(`Invalid constructor ${toString$1(Ctor)} is not a LightningElement constructor.`);
+      throw new Error(`Invalid constructor: "${toString$1(Ctor)}" is not a LightningElement constructor.`);
     }
     // Look up the dynamic component's name at runtime once the constructor is available.
     // This information is only known at runtime and is stored as part of registerComponent.
@@ -6488,26 +6741,10 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     markAsDynamicChildren(vnodes);
     return vnodes;
   }
-  /**
-   * EXPERIMENTAL: This function acts like a hook for Lightning Locker Service and other similar
-   * libraries to sanitize HTML content. This hook process the content passed via the template to
-   * lwc:inner-html directive.
-   * It is meant to be overridden with setSanitizeHtmlContentHook, it throws an error by default.
-   */
-  let sanitizeHtmlContentHook = () => {
-    // locker-service patches this function during runtime to sanitize HTML content.
-    throw new Error('sanitizeHtmlContent hook must be implemented.');
-  };
-  /**
-   * Sets the sanitizeHtmlContentHook.
-   * @param newHookImpl
-   */
-  function setSanitizeHtmlContentHook(newHookImpl) {
-    sanitizeHtmlContentHook = newHookImpl;
-  }
   // [s]anitize [h]tml [c]ontent
   function shc(content) {
-    return sanitizeHtmlContentHook(content);
+    const sanitizedString = sanitizeHtmlContent(content);
+    return createSanitizedHtmlContent(sanitizedString);
   }
   /**
    * [ncls] - Normalize class name attribute.
@@ -6571,20 +6808,48 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
   });
 
   /*
-   * Copyright (c) 2018, salesforce.com, inc.
+   * Copyright (c) 2024, Salesforce, 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 operationIdNameMapping = ['constructor', 'render', 'patch', 'connectedCallback', 'renderedCallback', 'disconnectedCallback', 'errorCallback', 'lwc-hydrate', 'lwc-rehydrate'];
+  const operationTooltipMapping = [
+  // constructor
+  'component constructor()',
+  // render
+  'component render() and virtual DOM rendered',
+  // patch
+  'component DOM rendered',
+  // connectedCallback
+  'component connectedCallback()',
+  // renderedCallback
+  'component renderedCallback()',
+  // disconnectedCallback
+  'component disconnectedCallback()',
+  // errorCallback
+  'component errorCallback()',
+  // lwc-hydrate
+  'component first rendered',
+  // lwc-rehydrate
+  'component re-rendered'];
   // Even if all the browser the engine supports implements the UserTiming API, we need to guard the measure APIs.
   // JSDom (used in Jest) for example doesn't implement the UserTiming APIs.
   const isUserTimingSupported = typeof performance !== 'undefined' && typeof performance.mark === 'function' && typeof performance.clearMarks === 'function' && typeof performance.measure === 'function' && typeof performance.clearMeasures === 'function';
   const start = !isUserTimingSupported ? noop : markName => {
     performance.mark(markName);
   };
-  const end = !isUserTimingSupported ? noop : (measureName, markName) => {
-    performance.measure(measureName, markName);
+  const end = !isUserTimingSupported ? noop : (measureName, markName, devtools) => {
+    performance.measure(measureName, {
+      start: markName,
+      detail: {
+        devtools: {
+          dataType: 'track-entry',
+          track: '⚡️ Lightning Web Components',
+          ...devtools
+        }
+      }
+    });
     // Clear the created marks and measure to avoid filling the performance entries buffer.
     // Note: Even if the entries get deleted, existing PerformanceObservers preserve a copy of those entries.
     performance.clearMarks(markName);
@@ -6601,6 +6866,85 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     // the right measures for components that are recursive.
     return `${getMeasureName(opId, vm)} - ${vm.idx}`;
   }
+  function getProperties(vm) {
+    return [['Tag Name', vm.tagName], ['Component ID', String(vm.idx)], ['Render Mode', vm.renderMode === 0 /* RenderMode.Light */ ? 'light DOM' : 'shadow DOM'], ['Shadow Mode', vm.shadowMode === 0 /* ShadowMode.Native */ ? 'native' : 'synthetic']];
+  }
+  function getColor(opId) {
+    // As of Sept 2024: primary (dark blue), secondary (light blue), tertiary (green)
+    switch (opId) {
+      // GlobalHydrate and Constructor tend to occur at the top level
+      case 7 /* OperationId.GlobalHydrate */:
+      case 0 /* OperationId.Constructor */:
+        return 'primary';
+      // GlobalRehydrate also occurs at the top level, but we want to use tertiary (green) because it's easier to
+      // distinguish from primary, and at a glance you should be able to easily tell re-renders from first renders.
+      case 8 /* OperationId.GlobalRehydrate */:
+        return 'tertiary';
+      // Everything else (patch/render/callbacks)
+      default:
+        return 'secondary';
+    }
+  }
+  // Create a list of tag names to the properties that were mutated, to help answer the question of
+  // "why did this component re-render?"
+  function getMutationProperties(mutationLogs) {
+    // `mutationLogs` should never have length 0, but bail out if it does for whatever reason
+    if (isUndefined$1(mutationLogs)) {
+      return EmptyArray;
+    }
+    if (!mutationLogs.length) {
+      // Currently this only occurs for experimental signals, because those mutations are not triggered by accessors
+      // TODO [#4546]: support signals in mutation logging
+      return EmptyArray;
+    }
+    // Keep track of unique IDs per tag name so we can just report a raw count at the end, e.g.
+    // `<x-foo> (x2)` to indicate that two instances of `<x-foo>` were rendered.
+    const tagNamesToIdsAndProps = new Map();
+    for (const {
+      vm: {
+        tagName,
+        idx
+      },
+      prop
+    } of mutationLogs) {
+      let idsAndProps = tagNamesToIdsAndProps.get(tagName);
+      if (isUndefined$1(idsAndProps)) {
+        idsAndProps = {
+          ids: new Set(),
+          keys: new Set()
+        };
+        tagNamesToIdsAndProps.set(tagName, idsAndProps);
+      }
+      idsAndProps.ids.add(idx);
+      idsAndProps.keys.add(prop);
+    }
+    // Sort by tag name
+    const entries = ArraySort.call([...tagNamesToIdsAndProps], (a, b) => a[0].localeCompare(b[0]));
+    const tagNames = ArrayMap.call(entries, item => item[0]);
+    // Show e.g. `<x-foo>` for one instance, or `<x-foo> (x2)` for two instances. (\u00D7 is multiplication symbol)
+    const tagNamesToDisplayTagNames = new Map();
+    for (const tagName of tagNames) {
+      const {
+        ids
+      } = tagNamesToIdsAndProps.get(tagName);
+      const displayTagName = `<${tagName}>${ids.size > 1 ? ` (\u00D7${ids.size})` : ''}`;
+      tagNamesToDisplayTagNames.set(tagName, displayTagName);
+    }
+    // Summary row
+    const usePlural = tagNames.length > 1 || tagNamesToIdsAndProps.get(tagNames[0]).ids.size > 1;
+    const result = [[`Component${usePlural ? 's' : ''}`, ArrayJoin.call(ArrayMap.call(tagNames, _ => tagNamesToDisplayTagNames.get(_)), ', ')]];
+    // Detail rows
+    for (const [prettyTagName, {
+      keys
+    }] of entries) {
+      const displayTagName = tagNamesToDisplayTagNames.get(prettyTagName);
+      ArrayPush$1.call(result, [displayTagName, ArrayJoin.call(ArraySort.call([...keys]), ', ')]);
+    }
+    return result;
+  }
+  function getTooltipText(measureName, opId) {
+    return `${measureName} - ${operationTooltipMapping[opId]}`;
+  }
   /** Indicates if operations should be logged via the User Timing API. */
   const isMeasureEnabled = process.env.NODE_ENV !== 'production';
   /** Indicates if operations should be logged by the profiler. */
@@ -6638,33 +6982,94 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     if (isMeasureEnabled) {
       const markName = getMarkName(opId, vm);
       const measureName = getMeasureName(opId, vm);
-      end(measureName, markName);
+      end(measureName, markName, {
+        color: getColor(opId),
+        tooltipText: getTooltipText(measureName, opId),
+        properties: getProperties(vm)
+      });
     }
     if (isProfilerEnabled) {
       currentDispatcher(opId, 1 /* Phase.Stop */, vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
     }
   }
-  function logGlobalOperationStart(opId, vm) {
+  function logGlobalOperationStart(opId) {
     if (isMeasureEnabled) {
-      const opName = getOperationName(opId);
-      const markName = isUndefined$1(vm) ? opName : getMarkName(opId, vm);
+      const markName = getOperationName(opId);
       start(markName);
     }
     if (isProfilerEnabled) {
-      currentDispatcher(opId, 0 /* Phase.Start */, vm?.tagName, vm?.idx, vm?.renderMode, vm?.shadowMode);
+      currentDispatcher(opId, 0 /* Phase.Start */);
     }
   }
-  function logGlobalOperationEnd(opId, vm) {
+  function logGlobalOperationStartWithVM(opId, vm) {
+    if (isMeasureEnabled) {
+      const markName = getMarkName(opId, vm);
+      start(markName);
+    }
+    if (isProfilerEnabled) {
+      currentDispatcher(opId, 0 /* Phase.Start */, vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
+    }
+  }
+  function logGlobalOperationEnd(opId, mutationLogs) {
     if (isMeasureEnabled) {
       const opName = getOperationName(opId);
-      const markName = isUndefined$1(vm) ? opName : getMarkName(opId, vm);
-      end(opName, markName);
+      const markName = opName;
+      end(opName, markName, {
+        color: getColor(opId),
+        tooltipText: getTooltipText(opName, opId),
+        properties: getMutationProperties(mutationLogs)
+      });
     }
     if (isProfilerEnabled) {
-      currentDispatcher(opId, 1 /* Phase.Stop */, vm?.tagName, vm?.idx, vm?.renderMode, vm?.shadowMode);
+      currentDispatcher(opId, 1 /* Phase.Stop */);
+    }
+  }
+  function logGlobalOperationEndWithVM(opId, vm) {
+    if (isMeasureEnabled) {
+      const opName = getOperationName(opId);
+      const markName = getMarkName(opId, vm);
+      end(opName, markName, {
+        color: getColor(opId),
+        tooltipText: getTooltipText(opName, opId),
+        properties: getProperties(vm)
+      });
+    }
+    if (isProfilerEnabled) {
+      currentDispatcher(opId, 1 /* Phase.Stop */, vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
     }
   }
 
+  /*
+   * Copyright (c) 2024, Salesforce, 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
+   */
+  // HAS_SCOPED_STYLE | SHADOW_MODE_SYNTHETIC = 3
+  const MAX_CACHE_KEY = 3;
+  // Mapping of cacheKeys to `string[]` (assumed to come from a tagged template literal) to an Element.
+  // Note that every unique tagged template literal will have a unique `string[]`. So by using `string[]`
+  // as the WeakMap key, we effectively associate each Element with a unique tagged template literal.
+  // See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates
+  // Also note that this array only needs to be large enough to account for the maximum possible cache key
+  const fragmentCache = ArrayFrom({
+    length: MAX_CACHE_KEY + 1
+  }, () => new WeakMap());
+  // Only used in LWC's Karma tests
+  if (process.env.NODE_ENV === 'test-karma-lwc') {
+    window.__lwcResetFragmentCache = () => {
+      for (let i = 0; i < fragmentCache.length; i++) {
+        fragmentCache[i] = new WeakMap();
+      }
+    };
+  }
+  function getFromFragmentCache(cacheKey, strings) {
+    return fragmentCache[cacheKey].get(strings);
+  }
+  function setInFragmentCache(cacheKey, strings, element) {
+    fragmentCache[cacheKey].set(strings, element);
+  }
+
   /*
    * Copyright (c) 2024, Salesforce, Inc.
    * All rights reserved.
@@ -6679,6 +7084,12 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
   function setVMBeingRendered(vm) {
     vmBeingRendered = vm;
   }
+  const VALID_SCOPE_TOKEN_REGEX = /^[a-zA-Z0-9\-_.]+$/;
+  // See W-16614556
+  // TODO [#2826]: freeze the template object
+  function isValidScopeToken(token) {
+    return isString(token) && VALID_SCOPE_TOKEN_REGEX.test(token);
+  }
   function validateSlots(vm) {
     assertNotProd(); // this method should never leak to prod
     const {
@@ -6688,18 +7099,28 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       assert.isTrue(isArray$1(cmpSlots.slotAssignments[slotName]), `Slots can only be set to an array, instead received ${toString$1(cmpSlots.slotAssignments[slotName])} for slot "${slotName}" in ${vm}.`);
     }
   }
-  function validateLightDomTemplate(template, vm) {
-    assertNotProd(); // should never leak to prod mode
+  function checkHasMatchingRenderMode(template, vm) {
+    // don't validate in prod environments where reporting is disabled
+    if (process.env.NODE_ENV === 'production' && !isReportingEnabled()) {
+      return;
+    }
+    // don't validate the default empty template - it is not inherently light or shadow
     if (template === defaultEmptyTemplate) {
       return;
     }
-    if (vm.renderMode === 0 /* RenderMode.Light */) {
-      if (template.renderMode !== 'light') {
-        logError(`Light DOM components can't render shadow DOM templates. Add an 'lwc:render-mode="light"' directive to the root template tag of ${getComponentTag(vm)}.`);
-      }
-    } else {
-      if (!isUndefined$1(template.renderMode)) {
-        logError(`Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${getComponentTag(vm)} or set it to 'lwc:render-mode="shadow"`);
+    // TODO [#4663]: `renderMode` mismatch between template and component causes `console.error` but no error
+    // Note that `undefined` means shadow in this case, because shadow is the default.
+    const vmIsLight = vm.renderMode === 0 /* RenderMode.Light */;
+    const templateIsLight = template.renderMode === 'light';
+    if (vmIsLight !== templateIsLight) {
+      report("RenderModeMismatch" /* ReportingEventId.RenderModeMismatch */, {
+        tagName: vm.tagName,
+        mode: vm.renderMode
+      });
+      if (process.env.NODE_ENV !== 'production') {
+        const tagName = getComponentTag(vm);
+        const message = vmIsLight ? `Light DOM components can't render shadow DOM templates. Add an 'lwc:render-mode="light"' directive to the root template tag of ${tagName}.` : `Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${tagName} or set it to 'lwc:render-mode="shadow"`;
+        logError(message);
       }
     }
   }
@@ -6725,28 +7146,9 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       return browserExpressionSerializer;
     }
   }
-  // This should be a no-op outside of LWC's Karma tests, where it's not needed
-  let registerFragmentCache = noop;
-  // Only used in LWC's Karma tests
-  if (process.env.NODE_ENV === 'test-karma-lwc') {
-    // Keep track of fragmentCaches, so we can clear them in LWC's Karma tests
-    const fragmentCaches = [];
-    registerFragmentCache = fragmentCache => {
-      fragmentCaches.push(fragmentCache);
-    };
-    window.__lwcResetFragmentCaches = () => {
-      for (const fragmentCache of fragmentCaches) {
-        for (const key of keys(fragmentCache)) {
-          delete fragmentCache[key];
-        }
-      }
-    };
-  }
   function buildParseFragmentFn(createFragmentFn) {
-    return (strings, ...keys) => {
-      const cache = create(null);
-      registerFragmentCache(cache);
-      return function (parts) {
+    return function parseFragment(strings, ...keys) {
+      return function applyFragmentParts(parts) {
         const {
           context: {
             hasScopedStyles,
@@ -6761,19 +7163,23 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
         const hasLegacyToken = lwcRuntimeFlags.ENABLE_LEGACY_SCOPE_TOKENS && !isUndefined$1(legacyStylesheetToken);
         let cacheKey = 0;
         if (hasStyleToken && hasScopedStyles) {
-          cacheKey |= 1 /* FragmentCache.HAS_SCOPED_STYLE */;
+          cacheKey |= 1 /* FragmentCacheKey.HAS_SCOPED_STYLE */;
         }
         if (hasStyleToken && isSyntheticShadow) {
-          cacheKey |= 2 /* FragmentCache.SHADOW_MODE_SYNTHETIC */;
+          cacheKey |= 2 /* FragmentCacheKey.SHADOW_MODE_SYNTHETIC */;
         }
         // Cache is only here to prevent calling innerHTML multiple times which doesn't happen on the server.
         {
           // Disable this on the server to prevent cache poisoning when expressions are used.
-          const cached = cache[cacheKey];
+          const cached = getFromFragmentCache(cacheKey, strings);
           if (!isUndefined$1(cached)) {
             return cached;
           }
         }
+        // See W-16614556
+        if (hasStyleToken && !isValidScopeToken(stylesheetToken) || hasLegacyToken && !isValidScopeToken(legacyStylesheetToken)) {
+          throw new Error('stylesheet token must be a valid string');
+        }
         // If legacy stylesheet tokens are required, then add them to the rendered string
         const stylesheetTokenToRender = stylesheetToken + (hasLegacyToken ? ` ${legacyStylesheetToken}` : '');
         const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetTokenToRender : '';
@@ -6813,8 +7219,12 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
           }
         }
         htmlFragment += strings[strings.length - 1];
-        cache[cacheKey] = createFragmentFn(htmlFragment, renderer);
-        return cache[cacheKey];
+        const element = createFragmentFn(htmlFragment, renderer);
+        // Cache is only here to prevent calling innerHTML multiple times which doesn't happen on the server.
+        {
+          setInFragmentCache(cacheKey, strings, element);
+        }
+        return element;
       };
     };
   }
@@ -6863,9 +7273,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
           if (!isTemplateRegistered(html)) {
             throw new TypeError(`Invalid template returned by the render() method on ${vm.tagName}. It must return an imported template (e.g.: \`import html from "./${vm.def.name}.html"\`), instead, it has returned: ${toString$1(html)}.`);
           }
-          if (process.env.NODE_ENV !== 'production') {
-            validateLightDomTemplate(html, vm);
-          }
+          checkHasMatchingRenderMode(html, vm);
           // Perf opt: do not reset the shadow root during the first rendering (there is
           // nothing to reset).
           if (!isNull(cmpTemplate)) {
@@ -6905,7 +7313,13 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
           styleVNodes
         } = context;
         if (!isNull(styleVNodes)) {
-          ArrayUnshift.apply(vnodes, styleVNodes);
+          // It's important here not to mutate the underlying `vnodes` returned from `html.call()`.
+          // The reason for this is because, due to the static content optimization, the vnodes array
+          // may be a static array shared across multiple component instances. E.g. this occurs in the
+          // case of an empty `<template></template>` in a `component.html` file, due to the underlying
+          // children being `[]` (no children). If we append the `<style>` vnode to this array, then the same
+          // array will be reused for every component instance, i.e. whenever `tmpl()` is called.
+          vnodes = [...styleVNodes, ...vnodes];
         }
       });
     }, () => {
@@ -7087,7 +7501,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     return apiVersion;
   }
   function getTemplateReactiveObserver(vm) {
-    return createReactiveObserver(() => {
+    const reactiveObserver = createReactiveObserver(() => {
       const {
         isDirty
       } = vm;
@@ -7096,6 +7510,10 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
         scheduleRehydration(vm);
       }
     });
+    if (process.env.NODE_ENV !== 'production') {
+      associateReactiveObserverWithVM(reactiveObserver, vm);
+    }
+    return reactiveObserver;
   }
   function resetTemplateObserverAndUnsubscribe(vm) {
     const {
@@ -7173,7 +7591,12 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
   }
   function connectRootElement(elm) {
     const vm = getAssociatedVM(elm);
-    logGlobalOperationStart(7 /* OperationId.GlobalHydrate */, vm);
+    if (process.env.NODE_ENV !== 'production') {
+      // Flush any logs for this VM so that the initial properties from the constructor don't "count"
+      // in subsequent re-renders (lwc-rehydrate). Right now we're at the first render (lwc-hydrate).
+      flushMutationLogsForVM(vm);
+    }
+    logGlobalOperationStartWithVM(7 /* OperationId.GlobalHydrate */, vm);
     // Usually means moving the element from one place to another, which is observable via
     // life-cycle hooks.
     if (vm.state === 1 /* VMState.connected */) {
@@ -7181,7 +7604,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     }
     runConnectedCallback(vm);
     rehydrate(vm);
-    logGlobalOperationEnd(7 /* OperationId.GlobalHydrate */, vm);
+    logGlobalOperationEndWithVM(7 /* OperationId.GlobalHydrate */, vm);
   }
   function disconnectRootElement(elm) {
     const vm = getAssociatedVM(elm);
@@ -7502,6 +7925,9 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
   }
   let rehydrateQueue = [];
   function flushRehydrationQueue() {
+    // Gather the logs before rehydration starts so they can be reported at the end of rehydration.
+    // Note that we also clear all existing logs at this point so that subsequent re-renders start from a clean slate.
+    const mutationLogs = process.env.NODE_ENV === 'production' ? undefined : getAndFlushMutationLogs();
     logGlobalOperationStart(8 /* OperationId.GlobalRehydrate */);
     if (process.env.NODE_ENV !== 'production') {
       assert.invariant(rehydrateQueue.length, `If rehydrateQueue was scheduled, it is because there must be at least one VM on this pending queue instead of ${rehydrateQueue}.`);
@@ -7521,13 +7947,13 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
           ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, i + 1));
         }
         // we need to end the measure before throwing.
-        logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */);
+        logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */, mutationLogs);
         // re-throwing the original error will break the current tick, but since the next tick is
         // already scheduled, it should continue patching the rest.
         throw error;
       }
     }
-    logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */);
+    logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */, mutationLogs);
   }
   function runConnectedCallback(vm) {
     const {
@@ -8070,7 +8496,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     runConnectedCallback(vm);
     hydrateVM(vm);
     if (hasMismatch && process.env.NODE_ENV !== 'production') {
-      logError('Hydration completed with errors.', vm);
+      logWarn('Hydration completed with errors.', vm);
     }
   }
   function hydrateVM(vm) {
@@ -8135,31 +8561,36 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
   // Any attribute names specified in that array will not be validated, and the
   // LWC runtime will assume that VDOM attrs and DOM attrs are in sync.
   function getValidationPredicate(elm, renderer, optOutStaticProp) {
-    // `data-lwc-host-mutated` is a special attribute added by the SSR engine itself,
-    // which does the same thing as an explicit `static validationOptOut = ['attr1', 'attr2']`.
+    // `data-lwc-host-mutated` is a special attribute added by the SSR engine itself, which automatically detects
+    // host mutations during `connectedCallback`.
     const hostMutatedValue = renderer.getAttribute(elm, 'data-lwc-host-mutated');
-    if (isString(hostMutatedValue)) {
-      const mutatedAttrValues = new Set(StringSplit.call(hostMutatedValue, / /));
-      return attrName => !mutatedAttrValues.has(attrName);
-    }
-    if (isUndefined$1(optOutStaticProp)) {
-      return _attrName => true;
-    }
+    const detectedHostMutations = isString(hostMutatedValue) ? new Set(StringSplit.call(hostMutatedValue, / /)) : undefined;
     // If validationOptOut is true, no attributes will be checked for correctness
     // and the runtime will assume VDOM attrs and DOM attrs are in sync.
-    if (isTrue(optOutStaticProp)) {
-      return _attrName => false;
-    }
-    // If validationOptOut is an array of strings, attributes specified in the
-    // array will be "opted out". Attributes not specified in the array will still
-    // be validated.
-    if (isArray$1(optOutStaticProp) && arrayEvery(optOutStaticProp, isString)) {
-      return attrName => !ArrayIncludes.call(optOutStaticProp, attrName);
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      logWarn('Validation opt out must be `true` or an array of attributes that should not be validated.');
-    }
-    return _attrName => true;
+    const fullOptOut = isTrue(optOutStaticProp);
+    // If validationOptOut is an array of strings, attributes specified in the array will be "opted out". Attributes
+    // not specified in the array will still be validated.
+    const isValidArray = isArray$1(optOutStaticProp) && arrayEvery(optOutStaticProp, isString);
+    const conditionalOptOut = isValidArray ? new Set(optOutStaticProp) : undefined;
+    if (process.env.NODE_ENV !== 'production' && !isUndefined$1(optOutStaticProp) && !isTrue(optOutStaticProp) && !isValidArray) {
+      logWarn('`validationOptOut` must be `true` or an array of attributes that should not be validated.');
+    }
+    return attrName => {
+      // Component wants to opt out of all validation
+      if (fullOptOut) {
+        return false;
+      }
+      // Mutations were automatically detected and should be ignored
+      if (!isUndefined$1(detectedHostMutations) && detectedHostMutations.has(attrName)) {
+        return false;
+      }
+      // Component explicitly wants to opt out of certain validations, regardless of auto-detection
+      if (!isUndefined$1(conditionalOptOut) && conditionalOptOut.has(attrName)) {
+        return false;
+      }
+      // Attribute must be validated
+      return true;
+    };
   }
   function hydrateText(node, vnode, renderer) {
     if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
@@ -8196,6 +8627,8 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     const {
       setProperty
     } = renderer;
+    // We only set the `nodeValue` property here (on a comment), so we don't need
+    // to sanitize the content as HTML using `safelySetProperty`
     setProperty(node, NODE_VALUE_PROP, vnode.text ?? null);
     vnode.elm = node;
     return node;
@@ -8255,7 +8688,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
         getProperty
       } = renderer;
       if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-        if (getProperty(elm, 'innerHTML') === props.innerHTML) {
+        if (isSanitizedHtmlContentEqual(getProperty(elm, 'innerHTML'), props.innerHTML)) {
           // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
           vnode.data = {
             ...vnode.data,
@@ -8352,11 +8785,11 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
           if (process.env.NODE_ENV !== 'production') {
             if (!hasWarned) {
               hasWarned = true;
-              logError(`Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`, owner);
+              logWarn(`Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.`, owner);
             }
           }
           mount(childVnode, parentNode, renderer, nextNode);
-          nextNode = renderer.nextSibling(childVnode.elm);
+          nextNode = renderer.nextSibling(childVnode.type === 5 /* VNodeType.Fragment */ ? childVnode.trailing : childVnode.elm);
         }
       }
     }
@@ -8373,7 +8806,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       hasMismatch = true;
       if (process.env.NODE_ENV !== 'production') {
         if (!hasWarned) {
-          logError(`Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.`, owner);
+          logWarn(`Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.`, owner);
         }
       }
       // nextSibling is mostly harmless, and since we don't have
@@ -8412,7 +8845,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     } = renderer;
     if (getProperty(node, 'nodeType') !== nodeType) {
       if (process.env.NODE_ENV !== 'production') {
-        logError('Hydration mismatch: incorrect node type received', vnode.owner);
+        logWarn('Hydration mismatch: incorrect node type received', vnode.owner);
       }
       return false;
     }
@@ -8424,7 +8857,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     } = renderer;
     if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
       if (process.env.NODE_ENV !== 'production') {
-        logError(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, 'tagName').toLowerCase()}".`, vnode.owner);
+        logWarn(`Hydration mismatch: expecting element with tag "${vnode.sel.toLowerCase()}" but found "${getProperty(elm, 'tagName').toLowerCase()}".`, vnode.owner);
       }
       return false;
     }
@@ -8469,7 +8902,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
           const {
             getProperty
           } = renderer;
-          logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found ${isNull(elmAttrValue) ? 'null' : `"${elmAttrValue}"`}`, vnode.owner);
+          logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found ${isNull(elmAttrValue) ? 'null' : `"${elmAttrValue}"`}`, vnode.owner);
         }
         nodesAreCompatible = false;
       }
@@ -8482,82 +8915,65 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     } = vnode;
     // classMap is never available on VStaticPartData so it can default to undefined
     // casting to prevent TS error.
-    let {
+    const {
       className,
       classMap
     } = data;
     const {
-      getProperty,
-      getClassList,
-      getAttribute
+      getProperty
     } = renderer;
+    // ---------- Step 1: get the classes from the element and the vnode
+    // Use a Set because we don't care to validate mismatches for 1) different ordering in SSR vs CSR, or 2)
+    // duplicated class names. These don't have an effect on rendered styles.
+    const elmClasses = new Set(ArrayFrom(elm.classList));
+    let vnodeClasses;
+    if (!isUndefined$1(className)) {
+      // ignore empty spaces entirely, filter them out using `filter(..., Boolean)`
+      vnodeClasses = new Set(ArrayFilter.call(StringSplit.call(className, /\s+/), Boolean));
+    } else if (!isUndefined$1(classMap)) {
+      vnodeClasses = new Set(keys(classMap));
+    } else {
+      vnodeClasses = new Set();
+    }
+    // ---------- Step 2: handle the scope tokens
     // 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;
+    const scopeToken = getScopeTokenClass(owner, /* legacy */false);
     // 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
     // are never present in VDOM nodes in the browser.
     //
     // Consequently, hydration mismatches will occur if scoped CSS token classnames
     // are rendered during SSR. This needs to be accounted for when validating.
-    if (!isNull(scopedToken) || !isNull(stylesheetTokenHost)) {
-      if (!isUndefined$1(className)) {
-        // The order of the className should be scopedToken className stylesheetTokenHost
-        const classTokens = [scopedToken, className, stylesheetTokenHost];
-        const classNames = ArrayFilter.call(classTokens, token => !isNull(token));
-        className = ArrayJoin.call(classNames, ' ');
-      } else if (!isUndefined$1(classMap)) {
-        classMap = {
-          ...classMap,
-          ...(!isNull(scopedToken) ? {
-            [scopedToken]: true
-          } : {}),
-          ...(!isNull(stylesheetTokenHost) ? {
-            [stylesheetTokenHost]: true
-          } : {})
-        };
-      } else {
-        // The order of the className should be scopedToken stylesheetTokenHost
-        const classTokens = [scopedToken, stylesheetTokenHost];
-        const classNames = ArrayFilter.call(classTokens, token => !isNull(token));
-        if (classNames.length) {
-          className = ArrayJoin.call(classNames, ' ');
-        }
-      }
+    if (!isNull(scopeToken)) {
+      vnodeClasses.add(scopeToken);
+    }
+    // This tells us which `*-host` scope token was rendered to the element's class.
+    // For now we just ignore any mismatches involving this class.
+    // TODO [#4866]: correctly validate the host scope token class
+    const elmHostScopeToken = renderer.getAttribute(elm, 'data-lwc-host-scope-token');
+    if (!isNull(elmHostScopeToken)) {
+      elmClasses.delete(elmHostScopeToken);
+      vnodeClasses.delete(elmHostScopeToken);
     }
+    // ---------- Step 3: check for compatibility
     let nodesAreCompatible = true;
-    let readableVnodeClassname;
-    const elmClassName = getAttribute(elm, 'class');
-    if (!isUndefined$1(className) && String(className) !== elmClassName) {
-      // className is used when class is bound to an expr.
+    if (vnodeClasses.size !== elmClasses.size) {
       nodesAreCompatible = false;
-      // stringify for pretty-printing
-      readableVnodeClassname = JSON.stringify(className);
-    } else if (!isUndefined$1(classMap)) {
-      // classMap is used when class is set to static value.
-      const classList = getClassList(elm);
-      let computedClassName = '';
-      // all classes from the vnode should be in the element.classList
-      for (const name in classMap) {
-        computedClassName += ' ' + name;
-        if (!classList.contains(name)) {
+    } else {
+      for (const vnodeClass of vnodeClasses) {
+        if (!elmClasses.has(vnodeClass)) {
           nodesAreCompatible = false;
         }
       }
-      // stringify for pretty-printing
-      readableVnodeClassname = JSON.stringify(computedClassName.trim());
-      if (classList.length > keys(classMap).length) {
-        nodesAreCompatible = false;
+      for (const elmClass of elmClasses) {
+        if (!vnodeClasses.has(elmClass)) {
+          nodesAreCompatible = false;
+        }
       }
-    } else if (isUndefined$1(className) && !isNull(elmClassName)) {
-      // SSR contains a className but client-side VDOM does not
-      nodesAreCompatible = false;
-      readableVnodeClassname = '""';
     }
-    if (!nodesAreCompatible) {
-      if (process.env.NODE_ENV !== 'production') {
-        logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected ${readableVnodeClassname} but found ${JSON.stringify(elmClassName)}`, vnode.owner);
-      }
+    if (process.env.NODE_ENV !== 'production' && !nodesAreCompatible) {
+      const prettyPrint = set => JSON.stringify(ArrayJoin.call(ArraySort.call(ArrayFrom(set)), ' '));
+      logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected ${prettyPrint(vnodeClasses)} but found ${prettyPrint(elmClasses)}`, vnode.owner);
     }
     return nodesAreCompatible;
   }
@@ -8582,7 +8998,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       // styleMap is used when style is set to static value.
       for (let i = 0, n = styleDecls.length; i < n; i++) {
         const [prop, value, important] = styleDecls[i];
-        expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
+        expectedStyle.push(`${prop}: ${value + (important ? ' !important' : '')};`);
         const parsedPropValue = parsedVnodeStyle[prop];
         if (isUndefined$1(parsedPropValue)) {
           nodesAreCompatible = false;
@@ -8595,14 +9011,14 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       if (keys(parsedVnodeStyle).length > styleDecls.length) {
         nodesAreCompatible = false;
       }
-      vnodeStyle = ArrayJoin.call(expectedStyle, ';');
+      vnodeStyle = ArrayJoin.call(expectedStyle, ' ');
     }
     if (!nodesAreCompatible) {
       if (process.env.NODE_ENV !== 'production') {
         const {
           getProperty
         } = renderer;
-        logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
+        logWarn(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
       }
     }
     return nodesAreCompatible;
@@ -8634,7 +9050,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     let isCompatibleElements = true;
     if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
       if (process.env.NODE_ENV !== 'production') {
-        logError(`Hydration mismatch: expecting element with tag "${getProperty(client, 'tagName').toLowerCase()}" but found "${getProperty(ssr, 'tagName').toLowerCase()}".`, owner);
+        logWarn(`Hydration mismatch: expecting element with tag "${getProperty(client, 'tagName').toLowerCase()}" but found "${getProperty(ssr, 'tagName').toLowerCase()}".`, owner);
       }
       return false;
     }
@@ -8647,7 +9063,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
         // partId === 0 will always refer to the root element, this is guaranteed by the compiler.
         if (parts?.[0].partId !== 0) {
           if (process.env.NODE_ENV !== 'production') {
-            logError(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, owner);
+            logWarn(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, owner);
           }
           isCompatibleElements = false;
         }
@@ -8682,9 +9098,11 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
         // Explicitly skip hydration validation when static parts don't contain `style` or `className`.
         // This means the style/class attributes are either static or don't exist on the element and
         // cannot be affected by hydration.
-        const hasMatchingStyleAttr = shouldValidateAttr(data, 'style') ? validateStyleAttr(vnode, elm, data, renderer) : true;
+        // We need to do class first, style second to match the ordering of non-static-optimized nodes,
+        // otherwise the ordering of console errors is different between the two.
         const hasMatchingClass = shouldValidateAttr(data, 'className') ? validateClassAttr(vnode, elm, data, renderer) : true;
-        if (isFalse(hasMatchingAttrs && hasMatchingStyleAttr && hasMatchingClass)) {
+        const hasMatchingStyleAttr = shouldValidateAttr(data, 'style') ? validateStyleAttr(vnode, elm, data, renderer) : true;
+        if (isFalse(hasMatchingAttrs && hasMatchingClass && hasMatchingStyleAttr)) {
           return false;
         }
       } else {
@@ -8698,19 +9116,6 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     return true;
   }
 
-  /*
-   * 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
-   */
-  let hooksAreSet = false;
-  function setHooks(hooks) {
-    assert.isFalse(hooksAreSet, 'Hooks are already overridden, only one definition is allowed.');
-    hooksAreSet = true;
-    setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
-  }
-
   /*
    * Copyright (c) 2024, Salesforce, Inc.
    * All rights reserved.
@@ -8718,11 +9123,9 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
   // See @lwc/engine-core/src/framework/template.ts
-  const TEMPLATE_PROPS = ['slots', 'stylesheetToken', 'stylesheets', 'renderMode'];
+  const TEMPLATE_PROPS = ['slots', 'stylesheetToken', 'stylesheets', 'renderMode', 'legacyStylesheetToken'];
   // Expandos that may be placed on a stylesheet factory function, and which are meaningful to LWC at runtime
-  const STYLESHEET_PROPS = [
-  // SEE `KEY__SCOPED_CSS` in @lwc/style-compiler
-  '$scoped$'];
+  const STYLESHEET_PROPS = [KEY__SCOPED_CSS, KEY__NATIVE_ONLY_CSS];
   // Via https://www.npmjs.com/package/object-observer
   const ARRAY_MUTATION_METHODS = ['pop', 'push', 'shift', 'unshift', 'reverse', 'sort', 'fill', 'splice', 'copyWithin'];
   let mutationTrackingDisabled = false;
@@ -8953,7 +9356,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     }
     return getReadOnlyProxy(obj);
   }
-  /** version: 7.2.1 */
+  /** version: 8.9.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -9247,7 +9650,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       formStateRestoreCallback(state, reason) {
         runFormStateRestoreCallback(this, state, reason);
       }
-      /*LWC compiler v7.2.1*/
+      /*LWC compiler v8.9.0*/
     };
     BaseHTMLElement = HTMLElement; // cache to track if it changes
   }
@@ -9262,7 +9665,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
     // Using a BaseUpgradableConstructor superclass here is a perf optimization to avoid
     // re-defining the same logic (connectedCallback, disconnectedCallback, etc.) over and over.
     class UpgradableConstructor extends BaseUpgradableConstructor {
-      /*LWC compiler v7.2.1*/
+      /*LWC compiler v8.9.0*/
     }
     if (isFormAssociated) {
       // Perf optimization - the vast majority of components have formAssociated=false,
@@ -9385,7 +9788,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       function isNull(obj) {
         return obj === null;
       }
-      /** version: 7.2.1 */
+      /** version: 8.9.0 */
 
       /*
        * Copyright (c) 2023, salesforce.com, inc.
@@ -9405,7 +9808,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
           this.setNewContext = setNewContext;
           this.setDisconnectedCallback = setDisconnectedCallback;
         }
-        /*LWC compiler v7.2.1*/
+        /*LWC compiler v8.9.0*/
       }
       function registerContextConsumer(elm, adapterContextToken, subscriptionPayload) {
         dispatchEvent(elm, new WireContextSubscriptionEvent(adapterContextToken, subscriptionPayload));
@@ -9828,7 +10231,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       formStateRestoreCallback(state, reason) {
         runFormStateRestoreCallback(this, state, reason);
       }
-      /*LWC compiler v7.2.1*/
+      /*LWC compiler v8.9.0*/
     }, _a.observedAttributes = observedAttributes,
     // Note CustomElementConstructor is not upgraded by LWC and inherits directly from HTMLElement which means it calls the native
     // attachInternals API.
@@ -10074,7 +10477,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
       });
     });
   }
-  /** version: 7.2.1 */
+  /** version: 8.9.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -10101,6 +10504,7 @@ LWR.define('lwc/v/7_2_1', ['exports'], (function (exports) { 'use strict';
   exports.setFeatureFlag = setFeatureFlag;
   exports.setFeatureFlagForTest = setFeatureFlagForTest;
   exports.setHooks = setHooks;
+  exports.setTrustedSignalSet = setTrustedSignalSet;
   exports.swapComponent = swapComponent;
   exports.swapStyle = swapStyle;
   exports.swapTemplate = swapTemplate;