@ni/ok-components 0.2.1 → 0.2.3

package/dist/all-components-bundle.js

@@ -111,7 +111,7 @@
           // eslint-disable-next-line no-new-func
           return new Function("return this")();
       }
-      catch (_a) {
+      catch {
           // If all fails, give up and create an object.
           // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
           return {};
@@ -127,7 +127,10 @@
       writable: false,
   };
   if ($global.FAST === void 0) {
-      Reflect.defineProperty($global, "FAST", Object.assign({ value: Object.create(null) }, propConfig));
+      Reflect.defineProperty($global, "FAST", {
+          value: Object.create(null),
+          ...propConfig,
+      });
   }
   /**
    * The FAST global.
@@ -136,13 +139,16 @@
   const FAST = $global.FAST;
   if (FAST.getById === void 0) {
       const storage = Object.create(null);
-      Reflect.defineProperty(FAST, "getById", Object.assign({ value(id, initialize) {
+      Reflect.defineProperty(FAST, "getById", {
+          value(id, initialize) {
               let found = storage[id];
               if (found === void 0) {
                   found = initialize ? (storage[id] = initialize()) : null;
               }
               return found;
-          } }, propConfig));
+          },
+          ...propConfig,
+      });
   }
   /**
    * A readonly, empty array.
@@ -511,12 +517,11 @@
        * @param propertyName - The property name, passed along to subscribers during notification.
        */
       notify(propertyName) {
-          var _a;
           const subscribers = this.subscribers[propertyName];
           if (subscribers !== void 0) {
               subscribers.notify(propertyName);
           }
-          (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.notify(propertyName);
+          this.sourceSubscribers?.notify(propertyName);
       }
       /**
        * Subscribes to notification of changes in an object's state.
@@ -524,7 +529,6 @@
        * @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.
        */
       subscribe(subscriber, propertyToWatch) {
-          var _a;
           if (propertyToWatch) {
               let subscribers = this.subscribers[propertyToWatch];
               if (subscribers === void 0) {
@@ -534,7 +538,7 @@
           }
           else {
               this.sourceSubscribers =
-                  (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
+                  this.sourceSubscribers ?? new SubscriberSet(this.source);
               this.sourceSubscribers.subscribe(subscriber);
           }
       }
@@ -544,7 +548,6 @@
        * @param propertyToUnwatch - The name of the property that the subscriber is no longer interested in watching.
        */
       unsubscribe(subscriber, propertyToUnwatch) {
-          var _a;
           if (propertyToUnwatch) {
               const subscribers = this.subscribers[propertyToUnwatch];
               if (subscribers !== void 0) {
@@ -552,7 +555,7 @@
               }
           }
           else {
-              (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
+              this.sourceSubscribers?.unsubscribe(subscriber);
           }
       }
   }
@@ -562,7 +565,7 @@
    * @public
    */
   const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
-      const volatileRegex = /(:|&&|\|\||if)/;
+      const volatileRegex = /(\?\?|:|&&|\|\||if)/;
       const notifierLookup = new WeakMap();
       const queueUpdate = DOM.queueUpdate;
       let watcher = void 0;
@@ -1110,14 +1113,15 @@
       /**
        * Creates an instance of BindingDirective.
        * @param binding - A binding that returns the data used to update the DOM.
+       * @param isVolatile - Optional parameter indicating whether the binding is volatile. If not provided, the volatility of the binding is determined by Observable.isVolatileBinding().
        */
-      constructor(binding) {
+      constructor(binding, isVolatile) {
           super();
           this.binding = binding;
           this.bind = normalBind;
           this.unbind = normalUnbind;
           this.updateTarget = updateAttributeTarget;
-          this.isBindingVolatile = Observable.isVolatileBinding(this.binding);
+          this.isBindingVolatile = isVolatile ?? Observable.isVolatileBinding(this.binding);
       }
       /**
        * Gets/sets the name of the attribute or property that this
@@ -1252,12 +1256,14 @@
           return parts[0];
       }
       let targetName;
+      let isVolatile = false;
       const partCount = parts.length;
       const finalParts = parts.map((x) => {
           if (typeof x === "string") {
               return () => x;
           }
           targetName = x.targetName || targetName;
+          isVolatile = isVolatile || Observable.isVolatileBinding(x.binding);
           return x.binding;
       });
       const binding = (scope, context) => {
@@ -1267,7 +1273,7 @@
           }
           return output;
       };
-      const directive = new HTMLBindingDirective(binding);
+      const directive = new HTMLBindingDirective(binding, isVolatile);
       directive.targetName = targetName;
       return directive;
   }
@@ -1739,20 +1745,20 @@
               this.behaviors === null ? behaviors : this.behaviors.concat(behaviors);
           return this;
       }
-  }
-  /**
-   * Create ElementStyles from ComposableStyles.
-   */
-  ElementStyles.create = (() => {
-      if (DOM.supportsAdoptedStyleSheets) {
-          const styleSheetCache = new Map();
-          return (styles) => 
+      /**
+       * Create ElementStyles from ComposableStyles.
+       */
+      static { this.create = (() => {
+          if (DOM.supportsAdoptedStyleSheets) {
+              const styleSheetCache = new Map();
+              return (styles) => 
+              // eslint-disable-next-line @typescript-eslint/no-use-before-define
+              new AdoptedStyleSheetsStyles(styles, styleSheetCache);
+          }
           // eslint-disable-next-line @typescript-eslint/no-use-before-define
-          new AdoptedStyleSheetsStyles(styles, styleSheetCache);
-      }
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      return (styles) => new StyleElementStyles(styles);
-  })();
+          return (styles) => new StyleElementStyles(styles);
+      })(); }
+  }
   function reduceStyles(styles) {
       return styles
           .map((x) => x instanceof ElementStyles ? reduceStyles(x.styles) : [x])
@@ -1812,7 +1818,7 @@
               }
           };
       }
-      catch (_a) {
+      catch {
           // Do nothing if an error is thrown, the default
           // case handles FrozenArray.
       }
@@ -2159,11 +2165,11 @@
                   ? defaultShadowOptions
                   : nameOrConfig.shadowOptions === null
                       ? void 0
-                      : Object.assign(Object.assign({}, defaultShadowOptions), nameOrConfig.shadowOptions);
+                      : { ...defaultShadowOptions, ...nameOrConfig.shadowOptions };
           this.elementOptions =
               nameOrConfig.elementOptions === void 0
                   ? defaultElementOptions
-                  : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
+                  : { ...defaultElementOptions, ...nameOrConfig.elementOptions };
           this.styles =
               nameOrConfig.styles === void 0
                   ? void 0
@@ -2195,12 +2201,12 @@
           }
           return this;
       }
+      /**
+       * Gets the element definition associated with the specified type.
+       * @param type - The custom element type to retrieve the definition for.
+       */
+      static { this.forType = fastRegistry.getByType; }
   }
-  /**
-   * Gets the element definition associated with the specified type.
-   * @param type - The custom element type to retrieve the definition for.
-   */
-  FASTElementDefinition.forType = fastRegistry.getByType;
 
   const shadowRoots = new WeakMap();
   const defaultEventOptions = {
@@ -2479,7 +2485,7 @@
        */
       emit(type, detail, options) {
           if (this._isConnected) {
-              return this.element.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
+              return this.element.dispatchEvent(new CustomEvent(type, { detail, ...defaultEventOptions, ...options }));
           }
           return false;
       }
@@ -3566,7 +3572,10 @@
       const templateBinding = typeof templateOrTemplateBinding === "function"
           ? templateOrTemplateBinding
           : () => templateOrTemplateBinding;
-      return new RepeatDirective(itemsBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
+      return new RepeatDirective(itemsBinding, templateBinding, {
+          ...defaultRepeatOptions,
+          ...options,
+      });
   }
 
   /**
@@ -4239,7 +4248,7 @@
           Interface.friendlyName = friendlyName == null ? "(anonymous)" : friendlyName;
           if (configure != null) {
               Interface.register = function (container, key) {
-                  return configure(new ResolverBuilder(container, key !== null && key !== void 0 ? key : Interface));
+                  return configure(new ResolverBuilder(container, key ?? Interface));
               };
           }
           Interface.toString = function toString() {
@@ -4417,13 +4426,12 @@
           }
       }
       getFactory(container) {
-          var _a, _b, _c;
           switch (this.strategy) {
               case 1 /* ResolverStrategy.singleton */:
               case 2 /* ResolverStrategy.transient */:
                   return container.getFactory(this.state);
               case 5 /* ResolverStrategy.alias */:
-                  return (_c = (_b = (_a = container.getResolver(this.state)) === null || _a === void 0 ? void 0 : _a.getFactory) === null || _b === void 0 ? void 0 : _b.call(_a, container)) !== null && _c !== void 0 ? _c : null;
+                  return container.getResolver(this.state)?.getFactory?.(container) ?? null;
               default:
                   return null;
           }
@@ -5164,7 +5172,10 @@
           this.type = type;
           this.elementDefinition = elementDefinition;
           this.overrideDefinition = overrideDefinition;
-          this.definition = Object.assign(Object.assign({}, this.elementDefinition), this.overrideDefinition);
+          this.definition = {
+              ...this.elementDefinition,
+              ...this.overrideDefinition,
+          };
       }
       register(container, context) {
           const definition = this.definition;
@@ -5616,14 +5627,12 @@
            * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
            */
           this.handleUnsupportedDelegatesFocus = () => {
-              var _a;
               // Check to see if delegatesFocus is supported
               if (window.ShadowRoot &&
                   !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
-                  ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                  this.$fastController.definition.shadowOptions?.delegatesFocus) {
                   this.focus = () => {
-                      var _a;
-                      (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
+                      this.control?.focus();
                   };
               }
           };
@@ -5713,12 +5722,11 @@
            * @internal
            */
           this.requestPosition = (target, callback) => {
-              var _a;
               if (this.intersectionDetector === null) {
                   return;
               }
               if (this.observedElements.has(target)) {
-                  (_a = this.observedElements.get(target)) === null || _a === void 0 ? void 0 : _a.push(callback);
+                  this.observedElements.get(target)?.push(callback);
                   return;
               }
               this.observedElements.set(target, [callback]);
@@ -5763,9 +5771,8 @@
               const pendingCallbackParams = [];
               // go through the entries to build a list of callbacks and params for each
               entries.forEach((entry) => {
-                  var _a;
                   // stop watching this element until we get new update requests for it
-                  (_a = this.intersectionDetector) === null || _a === void 0 ? void 0 : _a.unobserve(entry.target);
+                  this.intersectionDetector?.unobserve(entry.target);
                   const thisElementCallbacks = this.observedElements.get(entry.target);
                   if (thisElementCallbacks !== undefined) {
                       thisElementCallbacks.forEach((callback) => {
@@ -6592,6 +6599,7 @@
               this.initialize();
           }
       }
+      static { this.intersectionService = new IntersectionService(); }
       /**
        * @internal
        */
@@ -6689,7 +6697,6 @@
           this.updateRegionStyle();
       }
   };
-  AnchoredRegion$1.intersectionService = new IntersectionService();
   __decorate([
       attr
   ], AnchoredRegion$1.prototype, "anchor", void 0);
@@ -6821,12 +6828,11 @@
        * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
        */
       findChildWithHref(node) {
-          var _a, _b;
           if (node.childElementCount > 0) {
               return node.querySelector("a[href]");
           }
-          else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
-              return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
+          else if (node.shadowRoot?.childElementCount) {
+              return node.shadowRoot?.querySelector("a[href]");
           }
           else
               return null;
@@ -7213,7 +7219,6 @@
            * Attach the proxy element to the DOM
            */
           attachProxy() {
-              var _a;
               if (!this.proxyInitialized) {
                   this.proxyInitialized = true;
                   this.proxy.style.display = "none";
@@ -7234,16 +7239,15 @@
                   this.proxySlot = document.createElement("slot");
                   this.proxySlot.setAttribute("name", proxySlotName);
               }
-              (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(this.proxySlot);
+              this.shadowRoot?.appendChild(this.proxySlot);
               this.appendChild(this.proxy);
           }
           /**
            * Detach the proxy element from the DOM
            */
           detachProxy() {
-              var _a;
               this.removeChild(this.proxy);
-              (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeChild(this.proxySlot);
+              this.shadowRoot?.removeChild(this.proxySlot);
           }
           /** {@inheritDoc (FormAssociated:interface).validate} */
           validate(anchor) {
@@ -7267,7 +7271,7 @@
                       if (this.form instanceof HTMLFormElement) {
                           // Implicit submission
                           const defaultButton = this.form.querySelector("[type=submit]");
-                          defaultButton === null || defaultButton === void 0 ? void 0 : defaultButton.click();
+                          defaultButton?.click();
                       }
                       break;
               }
@@ -7409,8 +7413,7 @@
            * @internal
            */
           this.handleClick = (e) => {
-              var _a;
-              if (this.disabled && ((_a = this.defaultSlottedContent) === null || _a === void 0 ? void 0 : _a.length) <= 1) {
+              if (this.disabled && this.defaultSlottedContent?.length <= 1) {
                   e.stopPropagation();
               }
           };
@@ -7441,8 +7444,7 @@
            * Resets the parent form
            */
           this.handleFormReset = () => {
-              var _a;
-              (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
+              this.form?.reset();
           };
           /**
            * Overrides the focus call for where delegatesFocus is unsupported.
@@ -7450,11 +7452,10 @@
            * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
            */
           this.handleUnsupportedDelegatesFocus = () => {
-              var _a;
               // Check to see if delegatesFocus is supported
               if (window.ShadowRoot &&
                   !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
-                  ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                  this.$fastController.definition.shadowOptions?.delegatesFocus) {
                   this.focus = () => {
                       this.control.focus();
                   };
@@ -7507,11 +7508,10 @@
        * @internal
        */
       connectedCallback() {
-          var _a;
           super.connectedCallback();
           this.proxy.setAttribute("type", this.type);
           this.handleUnsupportedDelegatesFocus();
-          const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+          const elements = Array.from(this.control?.children);
           if (elements) {
               elements.forEach((span) => {
                   span.addEventListener("click", this.handleClick);
@@ -7522,9 +7522,8 @@
        * @internal
        */
       disconnectedCallback() {
-          var _a;
           super.disconnectedCallback();
-          const elements = Array.from((_a = this.control) === null || _a === void 0 ? void 0 : _a.children);
+          const elements = Array.from(this.control?.children);
           if (elements) {
               elements.forEach((span) => {
                   span.removeEventListener("click", this.handleClick);
@@ -7760,15 +7759,13 @@
           }
       }
       get label() {
-          var _a;
-          return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
+          return this.value ?? this.text;
       }
       get text() {
-          var _a, _b;
-          return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
+          return this.textContent?.replace(/\s+/g, " ").trim() ?? "";
       }
       set value(next) {
-          const newValue = `${next !== null && next !== void 0 ? next : ""}`;
+          const newValue = `${next ?? ""}`;
           this._value = newValue;
           this.dirtyValue = true;
           if (this.proxy instanceof HTMLOptionElement) {
@@ -7777,9 +7774,8 @@
           Observable.notify(this, "value");
       }
       get value() {
-          var _a;
           Observable.track(this, "value");
-          return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
+          return this._value ?? this.text;
       }
       get form() {
           return this.proxy ? this.proxy.form : null;
@@ -7926,8 +7922,7 @@
        * @internal
        */
       get firstSelectedOption() {
-          var _a;
-          return (_a = this.selectedOptions[0]) !== null && _a !== void 0 ? _a : null;
+          return this.selectedOptions[0] ?? null;
       }
       /**
        * Returns true if there is one or more selectable option.
@@ -7943,8 +7938,7 @@
        * @public
        */
       get length() {
-          var _a, _b;
-          return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+          return this.options?.length ?? 0;
       }
       /**
        * The list of options.
@@ -7971,6 +7965,19 @@
       set typeAheadExpired(value) {
           this.typeaheadExpired = value;
       }
+      /**
+       * A static filter to include only selectable options.
+       *
+       * @param n - element to filter
+       * @public
+       */
+      static { this.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden; }
+      /**
+       * Typeahead timeout in milliseconds.
+       *
+       * @internal
+       */
+      static { this.TYPE_AHEAD_TIMEOUT_MS = 1000; }
       /**
        * Handle click events for listbox options.
        *
@@ -8191,12 +8198,11 @@
        * @internal
        */
       selectedIndexChanged(prev, next) {
-          var _a;
           if (!this.hasSelectableOptions) {
               this.selectedIndex = -1;
               return;
           }
-          if (((_a = this.options[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.disabled) && typeof prev === "number") {
+          if (this.options[this.selectedIndex]?.disabled && typeof prev === "number") {
               const selectableIndex = this.getSelectableIndex(prev, next);
               const newNext = selectableIndex > -1 ? selectableIndex : prev;
               this.selectedIndex = newNext;
@@ -8216,9 +8222,8 @@
        * @internal
        */
       selectedOptionsChanged(prev, next) {
-          var _a;
           const filteredNext = next.filter(Listbox.slottedOptionFilter);
-          (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
+          this.options?.forEach(o => {
               const notifier = Observable.getNotifier(o);
               notifier.unsubscribe(this, "selected");
               o.selected = filteredNext.includes(o);
@@ -8231,9 +8236,8 @@
        * @public
        */
       selectFirstOption() {
-          var _a, _b;
           if (!this.disabled) {
-              this.selectedIndex = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(o => !o.disabled)) !== null && _b !== void 0 ? _b : -1;
+              this.selectedIndex = this.options?.findIndex(o => !o.disabled) ?? -1;
           }
       }
       /**
@@ -8272,8 +8276,7 @@
        * @internal
        */
       setDefaultSelectedOption() {
-          var _a, _b;
-          this.selectedIndex = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.findIndex(el => el.defaultSelected)) !== null && _b !== void 0 ? _b : -1;
+          this.selectedIndex = this.options?.findIndex(el => el.defaultSelected) ?? -1;
       }
       /**
        * Sets an option as selected and gives it focus.
@@ -8281,10 +8284,9 @@
        * @public
        */
       setSelectedOptions() {
-          var _a, _b, _c;
-          if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) {
+          if (this.options?.length) {
               this.selectedOptions = [this.options[this.selectedIndex]];
-              this.ariaActiveDescendant = (_c = (_b = this.firstSelectedOption) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : "";
+              this.ariaActiveDescendant = this.firstSelectedOption?.id ?? "";
               this.focusAndScrollOptionIntoView();
           }
       }
@@ -8337,19 +8339,6 @@
           }
       }
   }
-  /**
-   * A static filter to include only selectable options.
-   *
-   * @param n - element to filter
-   * @public
-   */
-  Listbox.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
-  /**
-   * Typeahead timeout in milliseconds.
-   *
-   * @internal
-   */
-  Listbox.TYPE_AHEAD_TIMEOUT_MS = 1000;
   __decorate([
       attr({ mode: "boolean" })
   ], Listbox.prototype, "disabled", void 0);
@@ -8568,17 +8557,16 @@
           return this._value;
       }
       set value(next) {
-          var _a, _b, _c;
           const prev = `${this._value}`;
           if (this.$fastController.isConnected && this.options) {
               const selectedIndex = this.options.findIndex(el => el.text.toLowerCase() === next.toLowerCase());
-              const prevSelectedValue = (_a = this.options[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a.text;
-              const nextSelectedValue = (_b = this.options[selectedIndex]) === null || _b === void 0 ? void 0 : _b.text;
+              const prevSelectedValue = this.options[this.selectedIndex]?.text;
+              const nextSelectedValue = this.options[selectedIndex]?.text;
               this.selectedIndex =
                   prevSelectedValue !== nextSelectedValue
                       ? selectedIndex
                       : this.selectedIndex;
-              next = ((_c = this.firstSelectedOption) === null || _c === void 0 ? void 0 : _c.text) || next;
+              next = this.firstSelectedOption?.text || next;
           }
           if (prev !== next) {
               this._value = next;
@@ -8594,7 +8582,7 @@
        */
       clickHandler(e) {
           const captured = e.target.closest(`option,[role=option]`);
-          if (this.disabled || (captured === null || captured === void 0 ? void 0 : captured.disabled)) {
+          if (this.disabled || captured?.disabled) {
               return;
           }
           if (this.open) {
@@ -8667,8 +8655,7 @@
               this.control.focus();
               if (this.firstSelectedOption) {
                   requestAnimationFrame(() => {
-                      var _a;
-                      (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: "nearest" });
+                      this.firstSelectedOption?.scrollIntoView({ block: "nearest" });
                   });
               }
           }
@@ -8887,8 +8874,7 @@
        * @internal
        */
       syncValue() {
-          var _a;
-          const newValue = this.selectedIndex > -1 ? (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text : this.control.value;
+          const newValue = this.selectedIndex > -1 ? this.firstSelectedOption?.text : this.control.value;
           this.updateValue(this.value !== newValue);
       }
       /**
@@ -8949,9 +8935,8 @@
        * @internal
        */
       updateValue(shouldEmit) {
-          var _a;
           if (this.$fastController.isConnected) {
-              this.value = ((_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) || this.control.value;
+              this.value = this.firstSelectedOption?.text || this.control.value;
               this.control.value = this.value;
           }
           if (shouldEmit) {
@@ -9180,6 +9165,8 @@
    * @internal
    */
   class RootStyleSheetTarget {
+      static { this.roots = new Set(); }
+      static { this.properties = {}; }
       setProperty(name, value) {
           RootStyleSheetTarget.properties[name] = value;
           for (const target of RootStyleSheetTarget.roots.values()) {
@@ -9221,8 +9208,6 @@
           return root === defaultElement ? document : root;
       }
   }
-  RootStyleSheetTarget.roots = new Set();
-  RootStyleSheetTarget.properties = {};
   // Caches PropertyTarget instances
   const propertyTargetCache = new WeakMap();
   // Use Constructable StyleSheets for FAST elements when supported, otherwise use
@@ -9284,6 +9269,13 @@
       static isDerivedDesignTokenValue(value) {
           return typeof value === "function";
       }
+      static { this.uniqueId = (() => {
+          let id = 0;
+          return () => {
+              id++;
+              return id.toString(16);
+          };
+      })(); }
       /**
        * Gets a token by ID. Returns undefined if the token was not found.
        * @param id - The ID of the token
@@ -9292,6 +9284,10 @@
       static getTokenById(id) {
           return DesignTokenImpl.tokensById.get(id);
       }
+      /**
+       * Token storage by token ID
+       */
+      static { this.tokensById = new Map(); }
       getOrCreateSubscriberSet(target = this) {
           return (this.subscribers.get(target) ||
               (this.subscribers.set(target, new Set()) && this.subscribers.get(target)));
@@ -9373,17 +9369,6 @@
           return ((target) => token.getValueFor(target));
       }
   }
-  DesignTokenImpl.uniqueId = (() => {
-      let id = 0;
-      return () => {
-          id++;
-          return id.toString(16);
-      };
-  })();
-  /**
-   * Token storage by token ID
-   */
-  DesignTokenImpl.tokensById = new Map();
   class CustomPropertyReflector {
       startReflection(token, target) {
           token.subscribe(this, target);
@@ -9530,6 +9515,10 @@
           } while (current !== null);
           return null;
       }
+      /**
+       * Responsible for reflecting tokens to CSS custom properties
+       */
+      static { this.cssCustomPropertyReflector = new CustomPropertyReflector(); }
       /**
        * The parent DesignTokenNode, or null.
        */
@@ -9630,11 +9619,10 @@
        * @returns
        */
       getRaw(token) {
-          var _a;
           if (this.assignedValues.has(token)) {
               return this.assignedValues.get(token);
           }
-          return (_a = DesignTokenNode.findClosestAssignedNode(token, this)) === null || _a === void 0 ? void 0 : _a.getRaw(token);
+          return DesignTokenNode.findClosestAssignedNode(token, this)?.getRaw(token);
       }
       /**
        * Sets a token to a value for a node
@@ -9835,10 +9823,6 @@
           return false;
       }
   }
-  /**
-   * Responsible for reflecting tokens to CSS custom properties
-   */
-  DesignTokenNode.cssCustomPropertyReflector = new CustomPropertyReflector();
   __decorate([
       observable
   ], DesignTokenNode.prototype, "children", void 0);
@@ -10108,7 +10092,10 @@
           ComponentPresentation.define(this.name, presentation, this.container);
       }
       defineElement(definition) {
-          this.definition = new FASTElementDefinition(this.type, Object.assign(Object.assign({}, definition), { name: this.name }));
+          this.definition = new FASTElementDefinition(this.type, {
+              ...definition,
+              name: this.name,
+          });
       }
       tagFor(type) {
           return DesignSystem.tagFor(type);
@@ -10404,8 +10391,7 @@
        * @internal
        */
       get checkedOptions() {
-          var _a;
-          return (_a = this.options) === null || _a === void 0 ? void 0 : _a.filter(o => o.checked);
+          return this.options?.filter(o => o.checked);
       }
       /**
        * Returns the index of the first selected option.
@@ -10424,8 +10410,7 @@
        * @internal
        */
       activeIndexChanged(prev, next) {
-          var _a, _b;
-          this.ariaActiveDescendant = (_b = (_a = this.options[next]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : "";
+          this.ariaActiveDescendant = this.options[next]?.id ?? "";
           this.focusAndScrollOptionIntoView();
       }
       /**
@@ -10573,11 +10558,10 @@
        * @internal
        */
       clickHandler(e) {
-          var _a;
           if (!this.multiple) {
               return super.clickHandler(e);
           }
-          const captured = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest(`[role=option]`);
+          const captured = e.target?.closest(`[role=option]`);
           if (!captured || captured.disabled) {
               return;
           }
@@ -10710,9 +10694,8 @@
        * @internal
        */
       multipleChanged(prev, next) {
-          var _a;
           this.ariaMultiSelectable = next ? "true" : null;
-          (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach(o => {
+          this.options?.forEach(o => {
               o.checked = next ? false : undefined;
           });
           this.setSelectedOptions();
@@ -10742,8 +10725,7 @@
        * @internal
        */
       sizeChanged(prev, next) {
-          var _a;
-          const size = Math.max(0, parseInt((_a = next === null || next === void 0 ? void 0 : next.toFixed()) !== null && _a !== void 0 ? _a : "", 10));
+          const size = Math.max(0, parseInt(next?.toFixed() ?? "", 10));
           if (size !== next) {
               DOM.queueUpdate(() => {
                   this.size = size;
@@ -11423,8 +11405,7 @@
        * @internal
        */
       maxChanged(previous, next) {
-          var _a;
-          this.max = Math.max(next, (_a = this.min) !== null && _a !== void 0 ? _a : next);
+          this.max = Math.max(next, this.min ?? next);
           const min = Math.min(this.min, this.max);
           if (this.min !== undefined && this.min !== min) {
               this.min = min;
@@ -11440,8 +11421,7 @@
        * @internal
        */
       minChanged(previous, next) {
-          var _a;
-          this.min = Math.min(next, (_a = this.max) !== null && _a !== void 0 ? _a : next);
+          this.min = Math.min(next, this.max ?? next);
           const max = Math.max(this.min, this.max);
           if (this.max !== undefined && this.max !== max) {
               this.max = max;
@@ -11737,12 +11717,10 @@
               radio.focus();
           };
           this.moveRightOffGroup = () => {
-              var _a;
-              (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+              this.nextElementSibling?.focus();
           };
           this.moveLeftOffGroup = () => {
-              var _a;
-              (_a = this.previousElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+              this.previousElementSibling?.focus();
           };
           /**
            * @internal
@@ -11968,12 +11946,10 @@
           return this.closest('[role="toolbar"]');
       }
       get isInsideToolbar() {
-          var _a;
-          return ((_a = this.parentToolbar) !== null && _a !== void 0 ? _a : false);
+          return (this.parentToolbar ?? false);
       }
       get isInsideFoundationToolbar() {
-          var _a;
-          return !!((_a = this.parentToolbar) === null || _a === void 0 ? void 0 : _a["$fastController"]);
+          return !!this.parentToolbar?.["$fastController"];
       }
       /**
        * @internal
@@ -12130,13 +12106,12 @@
        * @internal
        */
       defaultCheckedChanged() {
-          var _a;
           if (this.$fastController.isConnected && !this.dirtyChecked) {
               // Setting this.checked will cause us to enter a dirty state,
               // but if we are clean when defaultChecked is changed, we want to stay
               // in a clean state, so reset this.dirtyChecked
               if (!this.isInsideRadioGroup()) {
-                  this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
+                  this.checked = this.defaultChecked ?? false;
                   this.dirtyChecked = false;
               }
           }
@@ -12169,10 +12144,9 @@
        * @internal
        */
       connectedCallback() {
-          var _a, _b;
           super.connectedCallback();
           this.validate();
-          if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "radiogroup" &&
+          if (this.parentElement?.getAttribute("role") !== "radiogroup" &&
               this.getAttribute("tabindex") === null) {
               if (!this.disabled) {
                   this.setAttribute("tabindex", "0");
@@ -12184,7 +12158,7 @@
                   // but if we are clean when defaultChecked is changed, we want to stay
                   // in a clean state, so reset this.dirtyChecked
                   if (!this.isInsideRadioGroup()) {
-                      this.checked = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;
+                      this.checked = this.defaultChecked ?? false;
                       this.dirtyChecked = false;
                   }
               }
@@ -12333,17 +12307,16 @@
           return this._value;
       }
       set value(next) {
-          var _a, _b, _c, _d, _e, _f, _g;
           const prev = `${this._value}`;
-          if ((_a = this._options) === null || _a === void 0 ? void 0 : _a.length) {
+          if (this._options?.length) {
               const selectedIndex = this._options.findIndex(el => el.value === next);
-              const prevSelectedValue = (_c = (_b = this._options[this.selectedIndex]) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : null;
-              const nextSelectedValue = (_e = (_d = this._options[selectedIndex]) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : null;
+              const prevSelectedValue = this._options[this.selectedIndex]?.value ?? null;
+              const nextSelectedValue = this._options[selectedIndex]?.value ?? null;
               if (selectedIndex === -1 || prevSelectedValue !== nextSelectedValue) {
                   next = "";
                   this.selectedIndex = selectedIndex;
               }
-              next = (_g = (_f = this.firstSelectedOption) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : next;
+              next = this.firstSelectedOption?.value ?? next;
           }
           if (prev !== next) {
               this._value = next;
@@ -12360,9 +12333,8 @@
        * @internal
        */
       updateValue(shouldEmit) {
-          var _a, _b;
           if (this.$fastController.isConnected) {
-              this.value = (_b = (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
+              this.value = this.firstSelectedOption?.value ?? "";
           }
           if (shouldEmit) {
               this.$emit("input");
@@ -12414,9 +12386,8 @@
        * @public
        */
       get displayValue() {
-          var _a, _b;
           Observable.track(this, "displayValue");
-          return (_b = (_a = this.firstSelectedOption) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : "";
+          return this.firstSelectedOption?.text ?? "";
       }
       /**
        * Synchronize the `aria-disabled` property when the `disabled` property changes.
@@ -12477,7 +12448,6 @@
        * @internal
        */
       focusoutHandler(e) {
-          var _a;
           super.focusoutHandler(e);
           if (!this.open) {
               return true;
@@ -12487,7 +12457,7 @@
               this.focus();
               return;
           }
-          if (!((_a = this.options) === null || _a === void 0 ? void 0 : _a.includes(focusTarget))) {
+          if (!this.options?.includes(focusTarget)) {
               this.open = false;
               if (this.indexWhenOpened !== this.selectedIndex) {
                   this.updateValue(true);
@@ -12539,8 +12509,7 @@
        * @internal
        */
       mousedownHandler(e) {
-          var _a;
-          if (e.offsetX >= 0 && e.offsetX <= ((_a = this.listbox) === null || _a === void 0 ? void 0 : _a.scrollWidth)) {
+          if (e.offsetX >= 0 && e.offsetX <= this.listbox?.scrollWidth) {
               return super.mousedownHandler(e);
           }
           return this.collapsible;
@@ -12567,11 +12536,9 @@
        * @internal
        */
       selectedOptionsChanged(prev, next) {
-          var _a;
           super.selectedOptionsChanged(prev, next);
-          (_a = this.options) === null || _a === void 0 ? void 0 : _a.forEach((o, i) => {
-              var _a;
-              const proxyOption = (_a = this.proxy) === null || _a === void 0 ? void 0 : _a.options.item(i);
+          this.options?.forEach((o, i) => {
+              const proxyOption = this.proxy?.options.item(i);
               if (proxyOption) {
                   proxyOption.selected = o.selected;
               }
@@ -12585,9 +12552,8 @@
        * @internal
        */
       setDefaultSelectedOption() {
-          var _a;
-          const options = (_a = this.options) !== null && _a !== void 0 ? _a : Array.from(this.children).filter(Listbox.slottedOptionFilter);
-          const selectedIndex = options === null || options === void 0 ? void 0 : options.findIndex(el => el.hasAttribute("selected") || el.selected || el.value === this.value);
+          const options = this.options ?? Array.from(this.children).filter(Listbox.slottedOptionFilter);
+          const selectedIndex = options?.findIndex(el => el.hasAttribute("selected") || el.selected || el.value === this.value);
           if (selectedIndex !== -1) {
               this.selectedIndex = selectedIndex;
               return;
@@ -13133,14 +13099,12 @@
       }
       getTabIds() {
           return this.tabs.map((tab) => {
-              var _a;
-              return (_a = tab.getAttribute("id")) !== null && _a !== void 0 ? _a : `tab-${uniqueId()}`;
+              return tab.getAttribute("id") ?? `tab-${uniqueId()}`;
           });
       }
       getTabPanelIds() {
           return this.tabpanels.map((tabPanel) => {
-              var _a;
-              return (_a = tabPanel.getAttribute("id")) !== null && _a !== void 0 ? _a : `panel-${uniqueId()}`;
+              return tabPanel.getAttribute("id") ?? `panel-${uniqueId()}`;
           });
       }
       setComponent() {
@@ -13537,8 +13501,7 @@
        * @internal
        */
       mouseDownHandler(e) {
-          var _a;
-          const activeIndex = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a.findIndex(x => x.contains(e.target));
+          const activeIndex = this.focusableElements?.findIndex(x => x.contains(e.target));
           if (activeIndex > -1 && this.activeIndex !== activeIndex) {
               this.setFocusedElement(activeIndex);
           }
@@ -13576,8 +13539,9 @@
        * @internal
        */
       getDirectionalIncrementer(key) {
-          var _a, _b, _c, _d, _e;
-          return ((_e = (_c = (_b = (_a = ToolbarArrowKeyMap[key]) === null || _a === void 0 ? void 0 : _a[this.orientation]) === null || _b === void 0 ? void 0 : _b[this.direction]) !== null && _c !== void 0 ? _c : (_d = ToolbarArrowKeyMap[key]) === null || _d === void 0 ? void 0 : _d[this.orientation]) !== null && _e !== void 0 ? _e : 0);
+          return (ToolbarArrowKeyMap[key]?.[this.orientation]?.[this.direction] ??
+              ToolbarArrowKeyMap[key]?.[this.orientation] ??
+              0);
       }
       /**
        * Handle keyboard events for the toolbar.
@@ -13617,8 +13581,7 @@
        * @internal
        */
       reduceFocusableElements() {
-          var _a;
-          const previousFocusedElement = (_a = this.focusableElements) === null || _a === void 0 ? void 0 : _a[this.activeIndex];
+          const previousFocusedElement = this.focusableElements?.[this.activeIndex];
           this.focusableElements = this.allSlottedItems.reduce(Toolbar.reduceFocusableItems, []);
           // If the previously active item is still focusable, adjust the active index to the
           // index of that item.
@@ -13651,10 +13614,9 @@
        * @internal
        */
       static reduceFocusableItems(elements, element) {
-          var _a, _b, _c, _d;
           const isRoleRadio = element.getAttribute("role") === "radio";
-          const isFocusableFastElement = (_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus;
-          const hasFocusableShadow = Array.from((_d = (_c = element.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelectorAll("*")) !== null && _d !== void 0 ? _d : []).some(x => isFocusable(x));
+          const isFocusableFastElement = element.$fastController?.definition.shadowOptions?.delegatesFocus;
+          const hasFocusableShadow = Array.from(element.shadowRoot?.querySelectorAll("*") ?? []).some(x => isFocusable(x));
           if (!element.hasAttribute("disabled") &&
               !element.hasAttribute("hidden") &&
               (isFocusable(element) ||