@microsoft/fast-element 2.0.0-beta.23 → 2.0.0-beta.25

package/CHANGELOG.json

@@ -1,6 +1,80 @@
 {
   "name": "@microsoft/fast-element",
   "entries": [
+    {
+      "date": "Sat, 12 Aug 2023 00:26:36 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.25",
+      "version": "2.0.0-beta.25",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "ff0b93a7fb4ca416629f51cc233078494aaf5f60",
+            "comment": "Prevent notification of array splices when operation does not mutate array values"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "9f6451f7e7c121d76e2ead6f50f77c312a0157f7",
+            "comment": "Adds volatile binding support for JavaScript optional chaining syntax"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 16 Jun 2023 18:17:12 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.24",
+      "version": "2.0.0-beta.24",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "8250aa8352940584ff443b550ee756d49f01c478",
+            "comment": "fix: update compiler to ensure first and last child references are defined"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "e678a782dd06a1c9ca79726da4a5765244858d21",
+            "comment": "Adds 'else' template option to the when directive"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "58f7ce2ca73cf59dd957889e0763f45d087c77c9",
+            "comment": "fixed a bug where re-binding a ChildrenDirective instance would throw a runtime exception from the mutation handler"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "88a0d7feb71b2452fa521b72ce308b1e499dfd94",
+            "comment": "Update adoptedStyleSheets strategy to use push/splice when available to fix Safari 16.4 bug"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "9793634f3d06316a6a8689a909f4d41bdd667e99",
+            "comment": "fixes a bug where ChildrenDirective could not be used multiple times for the same element"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "86c1952373b1fa0d7100cf0d8e942a0580cda725",
+            "comment": "fixed bug causing behaviors attached to stylesheets not to be removed when the stylesheet was removed"
+          }
+        ],
+        "none": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@microsoft/fast-element",
+            "commit": "ca0e62ee8d05f72d1d8c1ad66bd6eea8e3f0a4eb",
+            "comment": "update prettier and eslint-config-prettier versions"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 28 Mar 2023 22:14:10 GMT",
       "tag": "@microsoft/fast-element_v2.0.0-beta.23",

package/CHANGELOG.md

@@ -1,9 +1,31 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Tue, 28 Mar 2023 22:14:10 GMT and should not be manually modified.
+This log was last generated on Sat, 12 Aug 2023 00:26:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.0-beta.25
+
+Sat, 12 Aug 2023 00:26:36 GMT
+
+### Changes
+
+- Prevent notification of array splices when operation does not mutate array values (nicholasrice@users.noreply.github.com)
+- Adds volatile binding support for JavaScript optional chaining syntax (nicholasrice@users.noreply.github.com)
+
+## 2.0.0-beta.24
+
+Fri, 16 Jun 2023 18:17:12 GMT
+
+### Changes
+
+- fix: update compiler to ensure first and last child references are defined (chhol@microsoft.com)
+- Adds 'else' template option to the when directive (nicholasrice@users.noreply.github.com)
+- fixed a bug where re-binding a ChildrenDirective instance would throw a runtime exception from the mutation handler (nicholasrice@users.noreply.github.com)
+- Update adoptedStyleSheets strategy to use push/splice when available to fix Safari 16.4 bug (nicholasrice@users.noreply.github.com)
+- fixes a bug where ChildrenDirective could not be used multiple times for the same element (nicholasrice@users.noreply.github.com)
+- fixed bug causing behaviors attached to stylesheets not to be removed when the stylesheet was removed (nicholasrice@users.noreply.github.com)
+
 ## 2.0.0-beta.23
 
 Tue, 28 Mar 2023 22:14:10 GMT

package/dist/dts/dom.d.ts

@@ -36,7 +36,7 @@ export declare const DOMAspect: Readonly<{
  * The type of HTML aspect to target.
  * @public
  */
-export declare type DOMAspect = typeof DOMAspect[Exclude<keyof typeof DOMAspect, "none">];
+export declare type DOMAspect = (typeof DOMAspect)[Exclude<keyof typeof DOMAspect, "none">];
 /**
  * A function used to send values to a DOM sink.
  * @public

package/dist/dts/observation/arrays.d.ts

@@ -57,7 +57,7 @@ export declare const SpliceStrategySupport: Readonly<{
  * The available values for SpliceStrategySupport.
  * @public
  */
-export declare type SpliceStrategySupport = typeof SpliceStrategySupport[keyof typeof SpliceStrategySupport];
+export declare type SpliceStrategySupport = (typeof SpliceStrategySupport)[keyof typeof SpliceStrategySupport];
 /**
  * An approach to tracking changes in an array.
  * @public

package/dist/dts/observation/observable.d.ts

@@ -60,7 +60,7 @@ export declare const SourceLifetime: Readonly<{
  * Describes how the source's lifetime relates to its controller's lifetime.
  * @public
  */
-export declare type SourceLifetime = typeof SourceLifetime[keyof typeof SourceLifetime];
+export declare type SourceLifetime = (typeof SourceLifetime)[keyof typeof SourceLifetime];
 /**
  * Controls the lifecycle of an expression and provides relevant context.
  * @public

package/dist/dts/templating/when.d.ts

@@ -5,6 +5,8 @@ import type { CaptureType, SyntheticViewTemplate } from "./template.js";
  * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
+ * @param elseTemplateOrTemplateBinding - Optional template or binding that that
+ * gets the template to render when the conditional is false.
  * @public
  */
-export declare function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType<TSource, TParent>;
+export declare function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>, elseTemplateOrTemplateBinding?: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType<TSource, TParent>;

package/dist/esm/binding/two-way.js

@@ -74,7 +74,8 @@ class TwoWayObserver {
                 value = target[bindingSource.targetAspect];
                 break;
         }
-        last.propertySource[last.propertyName] = this.dataBinding.options.fromView(value);
+        last.propertySource[last.propertyName] =
+            this.dataBinding.options.fromView(value);
     }
 }
 makeSerializationNoop(TwoWayObserver);

package/dist/esm/components/element-controller.js

@@ -278,7 +278,7 @@ export class ElementController extends PropertyChangeNotifier {
             styles.removeStylesFrom(source);
             if (sourceBehaviors !== null) {
                 for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
-                    this.addBehavior(sourceBehaviors[i]);
+                    this.removeBehavior(sourceBehaviors[i]);
                 }
             }
         }
@@ -466,13 +466,10 @@ export class AdoptedStyleSheetsStrategy {
         });
     }
     addStylesTo(target) {
-        const t = normalizeStyleTarget(target);
-        t.adoptedStyleSheets = [...t.adoptedStyleSheets, ...this.sheets];
+        addAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
     }
     removeStylesFrom(target) {
-        const t = normalizeStyleTarget(target);
-        const sheets = this.sheets;
-        t.adoptedStyleSheets = t.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+        removeAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
     }
 }
 AdoptedStyleSheetsStrategy.styleSheetCache = new Map();
@@ -508,6 +505,39 @@ export class StyleElementStrategy {
         }
     }
 }
-ElementStyles.setDefaultStrategy(ElementStyles.supportsAdoptedStyleSheets
-    ? AdoptedStyleSheetsStrategy
-    : StyleElementStrategy);
+let addAdoptedStyleSheets = (target, sheets) => {
+    target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...sheets];
+};
+let removeAdoptedStyleSheets = (target, sheets) => {
+    target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+};
+if (ElementStyles.supportsAdoptedStyleSheets) {
+    try {
+        // Test if browser implementation uses FrozenArray.
+        // If not, use push / splice to alter the stylesheets
+        // in place. This circumvents a bug in Safari 16.4 where
+        // periodically, assigning the array would previously
+        // cause sheets to be removed.
+        document.adoptedStyleSheets.push();
+        document.adoptedStyleSheets.splice();
+        addAdoptedStyleSheets = (target, sheets) => {
+            target.adoptedStyleSheets.push(...sheets);
+        };
+        removeAdoptedStyleSheets = (target, sheets) => {
+            for (const sheet of sheets) {
+                const index = target.adoptedStyleSheets.indexOf(sheet);
+                if (index !== -1) {
+                    target.adoptedStyleSheets.splice(index, 1);
+                }
+            }
+        };
+    }
+    catch (e) {
+        // Do nothing if an error is thrown, the default
+        // case handles FrozenArray.
+    }
+    ElementStyles.setDefaultStrategy(AdoptedStyleSheetsStrategy);
+}
+else {
+    ElementStyles.setDefaultStrategy(StyleElementStrategy);
+}

package/dist/esm/observation/arrays.js

@@ -369,7 +369,7 @@ let defaultSpliceStrategy = Object.freeze({
             if (changes === void 0) {
                 return emptyArray;
             }
-            return changes.length > 1 ? project(current, changes) : changes;
+            return project(current, changes);
         }
         return resetSplices;
     },

package/dist/esm/observation/observable.js

@@ -23,7 +23,7 @@ export const SourceLifetime = Object.freeze({
  */
 export const Observable = FAST.getById(KernelServiceId.observable, () => {
     const queueUpdate = Updates.enqueue;
-    const volatileRegex = /(:|&&|\|\||if)/;
+    const volatileRegex = /(:|&&|\|\||if|\?\.)/;
     const notifierLookup = new WeakMap();
     let watcher = void 0;
     let createArrayObserver = (array) => {

package/dist/esm/templating/children.js

@@ -12,7 +12,7 @@ export class ChildrenDirective extends NodeObservationDirective {
      */
     constructor(options) {
         super(options);
-        this.observerProperty = `${this.id}-o`;
+        this.observerProperty = Symbol();
         this.handleEvent = (mutations, observer) => {
             const target = observer.target;
             this.updateTarget(this.getSource(target), this.computeNodes(target));
@@ -28,9 +28,9 @@ export class ChildrenDirective extends NodeObservationDirective {
         if (!observer) {
             observer = new MutationObserver(this.handleEvent);
             observer.toJSON = noop;
-            observer.target = target;
             target[this.observerProperty] = observer;
         }
+        observer.target = target;
         observer.observe(target, this.options);
     }
     /**

package/dist/esm/templating/compiler.js

@@ -215,6 +215,9 @@ export const Compiler = {
         else {
             template = html;
         }
+        if (!template.content.firstChild && !template.content.lastChild) {
+            template.content.appendChild(document.createComment(""));
+        }
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
         const fragment = document.adoptNode(template.content);
         const context = new CompilationContext(fragment, factories, policy);

package/dist/esm/templating/when.js

@@ -1,15 +1,22 @@
 import { isFunction } from "../interfaces.js";
+const noTemplate = () => null;
+function normalizeBinding(value) {
+    return value === undefined ? noTemplate : isFunction(value) ? value : () => value;
+}
 /**
  * A directive that enables basic conditional rendering in a template.
  * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
+ * @param elseTemplateOrTemplateBinding - Optional template or binding that that
+ * gets the template to render when the conditional is false.
  * @public
  */
-export function when(condition, templateOrTemplateBinding) {
+export function when(condition, templateOrTemplateBinding, elseTemplateOrTemplateBinding) {
     const dataBinding = isFunction(condition) ? condition : () => condition;
-    const templateBinding = isFunction(templateOrTemplateBinding)
-        ? templateOrTemplateBinding
-        : () => templateOrTemplateBinding;
-    return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
+    const templateBinding = normalizeBinding(templateOrTemplateBinding);
+    const elseBinding = normalizeBinding(elseTemplateOrTemplateBinding);
+    return (source, context) => dataBinding(source, context)
+        ? templateBinding(source, context)
+        : elseBinding(source, context);
 }

package/dist/fast-element.api.json

@@ -4183,7 +4183,7 @@
             },
             {
               "kind": "Content",
-              "text": "typeof "
+              "text": "(typeof "
             },
             {
               "kind": "Reference",
@@ -4192,7 +4192,7 @@
             },
             {
               "kind": "Content",
-              "text": "["
+              "text": ")["
             },
             {
               "kind": "Reference",
@@ -15509,7 +15509,7 @@
             },
             {
               "kind": "Content",
-              "text": "typeof "
+              "text": "(typeof "
             },
             {
               "kind": "Reference",
@@ -15518,7 +15518,7 @@
             },
             {
               "kind": "Content",
-              "text": "[keyof typeof "
+              "text": ")[keyof typeof "
             },
             {
               "kind": "Reference",
@@ -16682,7 +16682,7 @@
             },
             {
               "kind": "Content",
-              "text": "typeof "
+              "text": "(typeof "
             },
             {
               "kind": "Reference",
@@ -16691,7 +16691,7 @@
             },
             {
               "kind": "Content",
-              "text": "[keyof typeof "
+              "text": ")[keyof typeof "
             },
             {
               "kind": "Reference",
@@ -19888,7 +19888,7 @@
         {
           "kind": "Function",
           "canonicalReference": "@microsoft/fast-element!when:function(1)",
-          "docComment": "/**\n * A directive that enables basic conditional rendering in a template.\n *\n * @param condition - The condition to test for rendering.\n *\n * @param templateOrTemplateBinding - The template or a binding that gets the template to render when the condition is true.\n *\n * @public\n */\n",
+          "docComment": "/**\n * A directive that enables basic conditional rendering in a template.\n *\n * @param condition - The condition to test for rendering.\n *\n * @param templateOrTemplateBinding - The template or a binding that gets the template to render when the condition is true.\n *\n * @param elseTemplateOrTemplateBinding - Optional template or binding that that gets the template to render when the conditional is false.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -19958,6 +19958,37 @@
               "kind": "Content",
               "text": "<TSource, TParent>, TParent>"
             },
+            {
+              "kind": "Content",
+              "text": ", elseTemplateOrTemplateBinding?: "
+            },
+            {
+              "kind": "Reference",
+              "text": "SyntheticViewTemplate",
+              "canonicalReference": "@microsoft/fast-element!SyntheticViewTemplate:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<TSource, TParent> | "
+            },
+            {
+              "kind": "Reference",
+              "text": "Expression",
+              "canonicalReference": "@microsoft/fast-element!Expression:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<TSource, "
+            },
+            {
+              "kind": "Reference",
+              "text": "SyntheticViewTemplate",
+              "canonicalReference": "@microsoft/fast-element!SyntheticViewTemplate:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<TSource, TParent>, TParent>"
+            },
             {
               "kind": "Content",
               "text": "): "
@@ -19977,8 +20008,8 @@
             }
           ],
           "returnTypeTokenRange": {
-            "startIndex": 17,
-            "endIndex": 19
+            "startIndex": 24,
+            "endIndex": 26
           },
           "releaseTag": "Public",
           "overloadIndex": 1,
@@ -19998,6 +20029,14 @@
                 "endIndex": 16
               },
               "isOptional": false
+            },
+            {
+              "parameterName": "elseTemplateOrTemplateBinding",
+              "parameterTypeTokenRange": {
+                "startIndex": 17,
+                "endIndex": 23
+              },
+              "isOptional": true
             }
           ],
           "typeParameters": [

package/dist/fast-element.d.ts

@@ -713,7 +713,7 @@ export declare const DOMAspect: Readonly<{
  * The type of HTML aspect to target.
  * @public
  */
-export declare type DOMAspect = typeof DOMAspect[Exclude<keyof typeof DOMAspect, "none">];
+export declare type DOMAspect = (typeof DOMAspect)[Exclude<keyof typeof DOMAspect, "none">];
 
 /**
  * A security policy that FAST can use to interact with the DOM.
@@ -2334,7 +2334,7 @@ export declare const SourceLifetime: Readonly<{
  * Describes how the source's lifetime relates to its controller's lifetime.
  * @public
  */
-export declare type SourceLifetime = typeof SourceLifetime[keyof typeof SourceLifetime];
+export declare type SourceLifetime = (typeof SourceLifetime)[keyof typeof SourceLifetime];
 
 /**
  * A splice map is a representation of how a previous array of items
@@ -2486,7 +2486,7 @@ export declare const SpliceStrategySupport: Readonly<{
  * The available values for SpliceStrategySupport.
  * @public
  */
-export declare type SpliceStrategySupport = typeof SpliceStrategySupport[keyof typeof SpliceStrategySupport];
+export declare type SpliceStrategySupport = (typeof SpliceStrategySupport)[keyof typeof SpliceStrategySupport];
 
 /**
  * A base class used for attribute directives that don't need internal state.
@@ -2921,8 +2921,10 @@ export declare function volatile(target: {}, name: string | Accessor, descriptor
  * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
+ * @param elseTemplateOrTemplateBinding - Optional template or binding that that
+ * gets the template to render when the conditional is false.
  * @public
  */
-export declare function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType<TSource, TParent>;
+export declare function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>, elseTemplateOrTemplateBinding?: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType<TSource, TParent>;
 
 export { }

package/dist/fast-element.debug.js

@@ -941,7 +941,7 @@ const SourceLifetime = Object.freeze({
  */
 const Observable = FAST.getById(KernelServiceId.observable, () => {
     const queueUpdate = Updates.enqueue;
-    const volatileRegex = /(:|&&|\|\||if)/;
+    const volatileRegex = /(:|&&|\|\||if|\?\.)/;
     const notifierLookup = new WeakMap();
     let watcher = void 0;
     let createArrayObserver = (array) => {
@@ -1622,7 +1622,7 @@ let defaultSpliceStrategy = Object.freeze({
             if (changes === void 0) {
                 return emptyArray;
             }
-            return changes.length > 1 ? project(current, changes) : changes;
+            return project(current, changes);
         }
         return resetSplices;
     },
@@ -1896,7 +1896,7 @@ function oneTime(expression, policy) {
  * @returns A binding configuration for the provided value.
  * @public
  */
-function normalizeBinding(value) {
+function normalizeBinding$1(value) {
     return isFunction(value)
         ? oneWay(value)
         : value instanceof Binding
@@ -3014,6 +3014,9 @@ const Compiler = {
         else {
             template = html;
         }
+        if (!template.content.firstChild && !template.content.lastChild) {
+            template.content.appendChild(document.createComment(""));
+        }
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
         const fragment = document.adoptNode(template.content);
         const context = new CompilationContext(fragment, factories, policy);
@@ -3275,19 +3278,26 @@ HTMLDirective.define(RefDirective);
  */
 const ref = (propertyName) => new RefDirective(propertyName);
 
+const noTemplate = () => null;
+function normalizeBinding(value) {
+    return value === undefined ? noTemplate : isFunction(value) ? value : () => value;
+}
 /**
  * A directive that enables basic conditional rendering in a template.
  * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
+ * @param elseTemplateOrTemplateBinding - Optional template or binding that that
+ * gets the template to render when the conditional is false.
  * @public
  */
-function when(condition, templateOrTemplateBinding) {
+function when(condition, templateOrTemplateBinding, elseTemplateOrTemplateBinding) {
     const dataBinding = isFunction(condition) ? condition : () => condition;
-    const templateBinding = isFunction(templateOrTemplateBinding)
-        ? templateOrTemplateBinding
-        : () => templateOrTemplateBinding;
-    return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
+    const templateBinding = normalizeBinding(templateOrTemplateBinding);
+    const elseBinding = normalizeBinding(elseTemplateOrTemplateBinding);
+    return (source, context) => dataBinding(source, context)
+        ? templateBinding(source, context)
+        : elseBinding(source, context);
 }
 
 const defaultRepeatOptions = Object.freeze({
@@ -3545,8 +3555,8 @@ HTMLDirective.define(RepeatDirective);
  * @public
  */
 function repeat(items, template, options = defaultRepeatOptions) {
-    const dataBinding = normalizeBinding(items);
-    const templateBinding = normalizeBinding(template);
+    const dataBinding = normalizeBinding$1(items);
+    const templateBinding = normalizeBinding$1(template);
     return new RepeatDirective(dataBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
 }
 
@@ -3691,7 +3701,7 @@ class ChildrenDirective extends NodeObservationDirective {
      */
     constructor(options) {
         super(options);
-        this.observerProperty = `${this.id}-o`;
+        this.observerProperty = Symbol();
         this.handleEvent = (mutations, observer) => {
             const target = observer.target;
             this.updateTarget(this.getSource(target), this.computeNodes(target));
@@ -3707,9 +3717,9 @@ class ChildrenDirective extends NodeObservationDirective {
         if (!observer) {
             observer = new MutationObserver(this.handleEvent);
             observer.toJSON = noop;
-            observer.target = target;
             target[this.observerProperty] = observer;
         }
+        observer.target = target;
         observer.observe(target, this.options);
     }
     /**
@@ -4335,7 +4345,7 @@ class ElementController extends PropertyChangeNotifier {
             styles.removeStylesFrom(source);
             if (sourceBehaviors !== null) {
                 for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
-                    this.addBehavior(sourceBehaviors[i]);
+                    this.removeBehavior(sourceBehaviors[i]);
                 }
             }
         }
@@ -4523,13 +4533,10 @@ class AdoptedStyleSheetsStrategy {
         });
     }
     addStylesTo(target) {
-        const t = normalizeStyleTarget(target);
-        t.adoptedStyleSheets = [...t.adoptedStyleSheets, ...this.sheets];
+        addAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
     }
     removeStylesFrom(target) {
-        const t = normalizeStyleTarget(target);
-        const sheets = this.sheets;
-        t.adoptedStyleSheets = t.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+        removeAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
     }
 }
 AdoptedStyleSheetsStrategy.styleSheetCache = new Map();
@@ -4565,9 +4572,42 @@ class StyleElementStrategy {
         }
     }
 }
-ElementStyles.setDefaultStrategy(ElementStyles.supportsAdoptedStyleSheets
-    ? AdoptedStyleSheetsStrategy
-    : StyleElementStrategy);
+let addAdoptedStyleSheets = (target, sheets) => {
+    target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...sheets];
+};
+let removeAdoptedStyleSheets = (target, sheets) => {
+    target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+};
+if (ElementStyles.supportsAdoptedStyleSheets) {
+    try {
+        // Test if browser implementation uses FrozenArray.
+        // If not, use push / splice to alter the stylesheets
+        // in place. This circumvents a bug in Safari 16.4 where
+        // periodically, assigning the array would previously
+        // cause sheets to be removed.
+        document.adoptedStyleSheets.push();
+        document.adoptedStyleSheets.splice();
+        addAdoptedStyleSheets = (target, sheets) => {
+            target.adoptedStyleSheets.push(...sheets);
+        };
+        removeAdoptedStyleSheets = (target, sheets) => {
+            for (const sheet of sheets) {
+                const index = target.adoptedStyleSheets.indexOf(sheet);
+                if (index !== -1) {
+                    target.adoptedStyleSheets.splice(index, 1);
+                }
+            }
+        };
+    }
+    catch (e) {
+        // Do nothing if an error is thrown, the default
+        // case handles FrozenArray.
+    }
+    ElementStyles.setDefaultStrategy(AdoptedStyleSheetsStrategy);
+}
+else {
+    ElementStyles.setDefaultStrategy(StyleElementStrategy);
+}
 
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
 function createFASTElement(BaseType) {
@@ -4648,4 +4688,4 @@ function customElement(nameOrDef) {
 
 DOM.setPolicy(DOMPolicy.create());
 
-export { ArrayObserver, AttributeConfiguration, AttributeDefinition, Binding, CSSBindingDirective, CSSDirective, ChildrenDirective, Compiler, DOM, DOMAspect, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, InlineTemplateDirective, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, booleanConverter, children, css, cssDirective, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding, nullableBooleanConverter, nullableNumberConverter, observable, oneTime, oneWay, ref, repeat, slotted, volatile, when };
+export { ArrayObserver, AttributeConfiguration, AttributeDefinition, Binding, CSSBindingDirective, CSSDirective, ChildrenDirective, Compiler, DOM, DOMAspect, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, InlineTemplateDirective, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, booleanConverter, children, css, cssDirective, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding$1 as normalizeBinding, nullableBooleanConverter, nullableNumberConverter, observable, oneTime, oneWay, ref, repeat, slotted, volatile, when };