@ni/fast-foundation 10.1.4 → 10.2.0

package/dist/fast-foundation.js

@@ -26,7 +26,7 @@ const $global = (function () {
         // 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 {};
@@ -42,7 +42,10 @@ const propConfig = {
     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.
@@ -51,13 +54,16 @@ if ($global.FAST === void 0) {
 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.
@@ -426,12 +432,11 @@ class PropertyChangeNotifier {
      * @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.
@@ -439,7 +444,6 @@ class PropertyChangeNotifier {
      * @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) {
@@ -449,7 +453,7 @@ class PropertyChangeNotifier {
         }
         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);
         }
     }
@@ -459,7 +463,6 @@ class PropertyChangeNotifier {
      * @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) {
@@ -467,7 +470,7 @@ class PropertyChangeNotifier {
             }
         }
         else {
-            (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
+            this.sourceSubscribers?.unsubscribe(subscriber);
         }
     }
 }
@@ -477,7 +480,7 @@ class PropertyChangeNotifier {
  * @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;
@@ -1025,14 +1028,15 @@ class HTMLBindingDirective extends TargetedHTMLDirective {
     /**
      * 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
@@ -1167,12 +1171,14 @@ function createAggregateBinding(parts) {
         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) => {
@@ -1182,7 +1188,7 @@ function createAggregateBinding(parts) {
         }
         return output;
     };
-    const directive = new HTMLBindingDirective(binding);
+    const directive = new HTMLBindingDirective(binding, isVolatile);
     directive.targetName = targetName;
     return directive;
 }
@@ -1654,20 +1660,20 @@ class ElementStyles {
             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])
@@ -1727,7 +1733,7 @@ if (DOM.supportsAdoptedStyleSheets) {
             }
         };
     }
-    catch (_a) {
+    catch {
         // Do nothing if an error is thrown, the default
         // case handles FrozenArray.
     }
@@ -2074,11 +2080,11 @@ class FASTElementDefinition {
                 ? 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
@@ -2110,12 +2116,12 @@ class FASTElementDefinition {
         }
         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 = {
@@ -2394,7 +2400,7 @@ class Controller extends PropertyChangeNotifier {
      */
     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;
     }
@@ -3493,7 +3499,10 @@ function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeat
     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,
+    });
 }
 
 /**
@@ -4243,7 +4252,7 @@ const DI = Object.freeze({
         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() {
@@ -4587,13 +4596,12 @@ class ResolverImpl {
         }
     }
     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;
         }
@@ -5334,7 +5342,10 @@ class FoundationElementRegistry {
         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;
@@ -5568,7 +5579,7 @@ function canUseFocusVisible() {
         styleElement.sheet.insertRule("foo:focus-visible {color:inherit}", 0);
         _canUseFocusVisible = true;
     }
-    catch (_a) {
+    catch {
         _canUseFocusVisible = false;
     }
     finally {
@@ -5784,7 +5795,6 @@ class Accordion extends FoundationElement {
             this.$emit("change", this.activeid);
         };
         this.setItems = () => {
-            var _a;
             if (this.accordionItems.length === 0) {
                 return;
             }
@@ -5803,7 +5813,7 @@ class Accordion extends FoundationElement {
                 item.addEventListener("focus", this.handleItemFocus);
             });
             if (this.isSingleExpandMode()) {
-                const expandedItem = (_a = this.findExpandedItem()) !== null && _a !== void 0 ? _a : this.accordionItems[0];
+                const expandedItem = this.findExpandedItem() ?? this.accordionItems[0];
                 expandedItem.setAttribute("aria-disabled", "true");
             }
         };
@@ -6057,14 +6067,12 @@ class Anchor extends FoundationElement {
          * 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();
                 };
             }
         };
@@ -6154,12 +6162,11 @@ class IntersectionService {
          * @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]);
@@ -6204,9 +6211,8 @@ class IntersectionService {
             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) => {
@@ -7033,6 +7039,7 @@ class AnchoredRegion extends FoundationElement {
             this.initialize();
         }
     }
+    static { this.intersectionService = new IntersectionService(); }
     /**
      * @internal
      */
@@ -7130,7 +7137,6 @@ class AnchoredRegion extends FoundationElement {
         this.updateRegionStyle();
     }
 }
-AnchoredRegion.intersectionService = new IntersectionService();
 __decorate([
     attr
 ], AnchoredRegion.prototype, "anchor", void 0);
@@ -7210,14 +7216,26 @@ const horizontalAnchorOverlay = {
  *
  * @public
  */
-const FlyoutPosTop = Object.assign(Object.assign({}, horizontalAnchorOverlay), { verticalDefaultPosition: "top", verticalPositioningMode: "locktodefault", verticalInset: false, verticalScaling: "content" });
+const FlyoutPosTop = {
+    ...horizontalAnchorOverlay,
+    verticalDefaultPosition: "top",
+    verticalPositioningMode: "locktodefault",
+    verticalInset: false,
+    verticalScaling: "content",
+};
 /**
  * A region that always places itself below the anchor, has
  * a width to match the anchor, and is sized vertically by content
  *
  * @public
  */
-const FlyoutPosBottom = Object.assign(Object.assign({}, horizontalAnchorOverlay), { verticalDefaultPosition: "bottom", verticalPositioningMode: "locktodefault", verticalInset: false, verticalScaling: "content" });
+const FlyoutPosBottom = {
+    ...horizontalAnchorOverlay,
+    verticalDefaultPosition: "bottom",
+    verticalPositioningMode: "locktodefault",
+    verticalInset: false,
+    verticalScaling: "content",
+};
 /**
  * A region that places itself above or below the anchor
  * based on available space, has a width to match the anchor,
@@ -7225,21 +7243,32 @@ const FlyoutPosBottom = Object.assign(Object.assign({}, horizontalAnchorOverlay)
  *
  * @public
  */
-const FlyoutPosTallest = Object.assign(Object.assign({}, horizontalAnchorOverlay), { verticalPositioningMode: "dynamic", verticalInset: false, verticalScaling: "content" });
+const FlyoutPosTallest = {
+    ...horizontalAnchorOverlay,
+    verticalPositioningMode: "dynamic",
+    verticalInset: false,
+    verticalScaling: "content",
+};
 /**
  * A region that always places itself above the anchor, has
  * a width to match the anchor, and is sized vertically by available space
  *
  * @public
  */
-const FlyoutPosTopFill = Object.assign(Object.assign({}, FlyoutPosTop), { verticalScaling: "fill" });
+const FlyoutPosTopFill = {
+    ...FlyoutPosTop,
+    verticalScaling: "fill",
+};
 /**
  * A region that always places itself below the anchor, has
  * a width to match the anchor, and is sized vertically by available space
  *
  * @public
  */
-const FlyoutPosBottomFill = Object.assign(Object.assign({}, FlyoutPosBottom), { verticalScaling: "fill" });
+const FlyoutPosBottomFill = {
+    ...FlyoutPosBottom,
+    verticalScaling: "fill",
+};
 /**
  * A region that places itself above or below the anchor
  * based on available space, has a width to match the anchor,
@@ -7247,7 +7276,10 @@ const FlyoutPosBottomFill = Object.assign(Object.assign({}, FlyoutPosBottom), {
  *
  * @public
  */
-const FlyoutPosTallestFill = Object.assign(Object.assign({}, FlyoutPosTallest), { verticalScaling: "fill" });
+const FlyoutPosTallestFill = {
+    ...FlyoutPosTallest,
+    verticalScaling: "fill",
+};
 
 /**
  * The template for {@link @ni/fast-foundation#Avatar} component.
@@ -7446,12 +7478,11 @@ class Breadcrumb extends FoundationElement {
      * 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;
@@ -7838,7 +7869,6 @@ function FormAssociated(BaseCtor) {
          * Attach the proxy element to the DOM
          */
         attachProxy() {
-            var _a;
             if (!this.proxyInitialized) {
                 this.proxyInitialized = true;
                 this.proxy.style.display = "none";
@@ -7859,16 +7889,15 @@ function FormAssociated(BaseCtor) {
                 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) {
@@ -7892,7 +7921,7 @@ function FormAssociated(BaseCtor) {
                     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;
             }
@@ -8034,8 +8063,7 @@ class Button extends FormAssociatedButton {
          * @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();
             }
         };
@@ -8066,8 +8094,7 @@ class Button extends FormAssociatedButton {
          * 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.
@@ -8075,11 +8102,10 @@ class Button extends FormAssociatedButton {
          * 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();
                 };
@@ -8132,11 +8158,10 @@ class Button extends FormAssociatedButton {
      * @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);
@@ -8147,9 +8172,8 @@ class Button extends FormAssociatedButton {
      * @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);
@@ -8283,7 +8307,10 @@ class DateFormatter {
         if (!dateObj.getTime()) {
             return "";
         }
-        const optionsWithTimeZone = Object.assign({ timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone }, format);
+        const optionsWithTimeZone = {
+            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            ...format,
+        };
         return new Intl.DateTimeFormat(locale, optionsWithTimeZone).format(dateObj);
     }
     /**
@@ -8894,6 +8921,17 @@ const dataGridTemplate = (context, definition) => {
  * @public
  */
 class DataGrid extends FoundationElement {
+    /**
+     *  generates a basic column definition by examining sample row data
+     */
+    static { this.generateColumns = (row) => {
+        return Object.getOwnPropertyNames(row).map((property, index) => {
+            return {
+                columnDataKey: property,
+                gridColumn: `${index}`,
+            };
+        });
+    }; }
     /**
      *  generates a gridTemplateColumns based on columndata array
      */
@@ -9271,17 +9309,6 @@ class DataGrid extends FoundationElement {
         }
     }
 }
-/**
- *  generates a basic column definition by examining sample row data
- */
-DataGrid.generateColumns = (row) => {
-    return Object.getOwnPropertyNames(row).map((property, index) => {
-        return {
-            columnDataKey: property,
-            gridColumn: `${index}`,
-        };
-    });
-};
 __decorate([
     attr({ attribute: "no-tabbing", mode: "boolean" })
 ], DataGrid.prototype, "noTabbing", void 0);
@@ -9395,12 +9422,11 @@ class DataGridCell extends FoundationElement {
      * @internal
      */
     connectedCallback() {
-        var _a;
         super.connectedCallback();
         this.addEventListener(eventFocusIn, this.handleFocusin);
         this.addEventListener(eventFocusOut, this.handleFocusout);
         this.addEventListener(eventKeyDown, this.handleKeydown);
-        this.style.gridColumn = `${((_a = this.columnDefinition) === null || _a === void 0 ? void 0 : _a.gridColumn) === undefined
+        this.style.gridColumn = `${this.columnDefinition?.gridColumn === undefined
             ? 0
             : this.columnDefinition.gridColumn}`;
         this.updateCellView();
@@ -9788,7 +9814,6 @@ const noninteractiveCalendarTemplate = (todayString) => {
  * @public
  */
 const calendarTemplate = (context, definition) => {
-    var _a;
     const today = new Date();
     const todayString = `${today.getMonth() + 1}-${today.getDate()}-${today.getFullYear()}`;
     return html `
@@ -9796,7 +9821,7 @@ const calendarTemplate = (context, definition) => {
             ${startTemplate}
             ${definition.title instanceof Function
         ? definition.title(context, definition)
-        : (_a = definition.title) !== null && _a !== void 0 ? _a : ""}
+        : definition.title ?? ""}
             <slot></slot>
             ${when(x => x.readonly, noninteractiveCalendarTemplate(todayString), interactiveCalendarGridTemplate(context, todayString))}
             ${endTemplate}
@@ -10032,15 +10057,13 @@ class ListboxOption extends FoundationElement {
         }
     }
     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) {
@@ -10049,9 +10072,8 @@ class ListboxOption extends FoundationElement {
         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;
@@ -10198,8 +10220,7 @@ class Listbox extends FoundationElement {
      * @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.
@@ -10215,8 +10236,7 @@ class Listbox extends FoundationElement {
      * @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.
@@ -10243,6 +10263,19 @@ class Listbox extends FoundationElement {
     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.
      *
@@ -10463,12 +10496,11 @@ class Listbox extends FoundationElement {
      * @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;
@@ -10488,9 +10520,8 @@ class Listbox extends FoundationElement {
      * @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);
@@ -10503,9 +10534,8 @@ class Listbox extends FoundationElement {
      * @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;
         }
     }
     /**
@@ -10544,8 +10574,7 @@ class Listbox extends FoundationElement {
      * @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.
@@ -10553,10 +10582,9 @@ class Listbox extends FoundationElement {
      * @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();
         }
     }
@@ -10609,19 +10637,6 @@ class Listbox extends FoundationElement {
         }
     }
 }
-/**
- * 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);
@@ -10840,17 +10855,16 @@ class Combobox extends FormAssociatedCombobox {
         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;
@@ -10866,7 +10880,7 @@ class Combobox extends FormAssociatedCombobox {
      */
     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) {
@@ -10939,8 +10953,7 @@ class Combobox extends FormAssociatedCombobox {
             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" });
                 });
             }
         }
@@ -11159,8 +11172,7 @@ class Combobox extends FormAssociatedCombobox {
      * @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);
     }
     /**
@@ -11221,9 +11233,8 @@ class Combobox extends FormAssociatedCombobox {
      * @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) {
@@ -11516,6 +11527,8 @@ class ElementStyleSheetTarget {
  * @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()) {
@@ -11557,8 +11570,6 @@ class RootStyleSheetTarget {
         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
@@ -11620,6 +11631,13 @@ class DesignTokenImpl extends CSSDirective {
     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
@@ -11628,6 +11646,10 @@ class DesignTokenImpl extends CSSDirective {
     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)));
@@ -11709,17 +11731,6 @@ class DesignTokenImpl extends CSSDirective {
         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);
@@ -11866,6 +11877,10 @@ class DesignTokenNode {
         } while (current !== null);
         return null;
     }
+    /**
+     * Responsible for reflecting tokens to CSS custom properties
+     */
+    static { this.cssCustomPropertyReflector = new CustomPropertyReflector(); }
     /**
      * The parent DesignTokenNode, or null.
      */
@@ -11966,11 +11981,10 @@ class DesignTokenNode {
      * @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
@@ -12171,10 +12185,6 @@ class DesignTokenNode {
         return false;
     }
 }
-/**
- * Responsible for reflecting tokens to CSS custom properties
- */
-DesignTokenNode.cssCustomPropertyReflector = new CustomPropertyReflector();
 __decorate([
     observable
 ], DesignTokenNode.prototype, "children", void 0);
@@ -12444,7 +12454,10 @@ class ElementDefinitionEntry {
         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);
@@ -13083,8 +13096,7 @@ class Dialog extends FoundationElement {
      * @internal
      */
     static isFocusableFastElement(element) {
-        var _a, _b;
-        return !!((_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus);
+        return !!element.$fastController?.definition.shadowOptions?.delegatesFocus;
     }
     /**
      * Test if the element has a focusable shadow
@@ -13094,8 +13106,7 @@ class Dialog extends FoundationElement {
      * @internal
      */
     static hasTabbableShadow(element) {
-        var _a, _b;
-        return Array.from((_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("*")) !== null && _b !== void 0 ? _b : []).some(x => {
+        return Array.from(element.shadowRoot?.querySelectorAll("*") ?? []).some(x => {
             return isTabbable(x);
         });
     }
@@ -13125,6 +13136,7 @@ const observer = new MutationObserver((mutations) => {
     }
 });
 class AttributeReflectionSubscriptionSet extends SubscriberSet {
+    static { this.subscriberCache = new WeakMap(); }
     subscribe(subscriber) {
         super.subscribe(subscriber);
         if (!this.watchedAttributes.has(subscriber.attributes)) {
@@ -13158,7 +13170,6 @@ class AttributeReflectionSubscriptionSet extends SubscriberSet {
         observer.observe(this.source, { attributeFilter });
     }
 }
-AttributeReflectionSubscriptionSet.subscriberCache = new WeakMap();
 class ReflectAttrBehavior {
     constructor(target, attributes) {
         this.target = target;
@@ -13515,8 +13526,7 @@ class ListboxElement extends Listbox {
      * @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.
@@ -13535,8 +13545,7 @@ class ListboxElement extends Listbox {
      * @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();
     }
     /**
@@ -13684,11 +13693,10 @@ class ListboxElement extends Listbox {
      * @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;
         }
@@ -13821,9 +13829,8 @@ class ListboxElement extends Listbox {
      * @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();
@@ -13853,8 +13860,7 @@ class ListboxElement extends Listbox {
      * @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;
@@ -14045,14 +14051,13 @@ class PickerMenuOption extends FoundationElement {
         this.$emit("pickeroptioninvoked");
     }
     updateView() {
-        var _a, _b;
         this.disconnectView();
         this.customView =
-            (_b = (_a = this.contentsTemplate) === null || _a === void 0 ? void 0 : _a.render(this, this)) !== null && _b !== void 0 ? _b : defaultContentsTemplate$1.render(this, this);
+            this.contentsTemplate?.render(this, this) ??
+                defaultContentsTemplate$1.render(this, this);
     }
     disconnectView() {
-        var _a;
-        (_a = this.customView) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.customView?.dispose();
         this.customView = undefined;
     }
 }
@@ -14121,14 +14126,13 @@ class PickerListItem extends FoundationElement {
         this.$emit("pickeriteminvoked");
     }
     updateView() {
-        var _a, _b;
         this.disconnectView();
         this.customView =
-            (_b = (_a = this.contentsTemplate) === null || _a === void 0 ? void 0 : _a.render(this, this)) !== null && _b !== void 0 ? _b : defaultContentsTemplate.render(this, this);
+            this.contentsTemplate?.render(this, this) ??
+                defaultContentsTemplate.render(this, this);
     }
     disconnectView() {
-        var _a;
-        (_a = this.customView) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.customView?.dispose();
         this.customView = undefined;
     }
 }
@@ -14823,12 +14827,11 @@ class Picker extends FormAssociatedPicker {
      * Disables the menu. Note that the menu can be open, just doens't have any valid options on display.
      */
     disableMenu() {
-        var _a, _b, _c;
         this.menuFocusIndex = -1;
         this.menuFocusOptionId = undefined;
-        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.removeAttribute("aria-activedescendant");
-        (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.removeAttribute("aria-owns");
-        (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.removeAttribute("aria-expanded");
+        this.inputElement?.removeAttribute("aria-activedescendant");
+        this.inputElement?.removeAttribute("aria-owns");
+        this.inputElement?.removeAttribute("aria-expanded");
     }
     /**
      * Sets the currently focused menu option by index
@@ -14863,17 +14866,15 @@ class Picker extends FormAssociatedPicker {
      * Updates the template used for the list item repeat behavior
      */
     updateListItemTemplate() {
-        var _a;
         this.activeListItemTemplate =
-            (_a = this.listItemTemplate) !== null && _a !== void 0 ? _a : this.defaultListItemTemplate;
+            this.listItemTemplate ?? this.defaultListItemTemplate;
     }
     /**
      * Updates the template used for the menu option repeat behavior
      */
     updateOptionTemplate() {
-        var _a;
         this.activeMenuOptionTemplate =
-            (_a = this.menuOptionTemplate) !== null && _a !== void 0 ? _a : this.defaultMenuOptionTemplate;
+            this.menuOptionTemplate ?? this.defaultMenuOptionTemplate;
     }
     /**
      * Updates the filtered options array
@@ -14895,7 +14896,13 @@ class Picker extends FormAssociatedPicker {
         if (newConfig === null) {
             newConfig = FlyoutPosBottomFill;
         }
-        this.menuConfig = Object.assign(Object.assign({}, newConfig), { autoUpdateMode: "auto", fixedPlacement: true, horizontalViewportLock: false, verticalViewportLock: false });
+        this.menuConfig = {
+            ...newConfig,
+            autoUpdateMode: "auto",
+            fixedPlacement: true,
+            horizontalViewportLock: false,
+            verticalViewportLock: false,
+        };
     }
 }
 __decorate([
@@ -15615,6 +15622,7 @@ class Menu extends FoundationElement {
             this.setItems();
         }
     }
+    static { this.focusableElementRoles = roleForMenuItem; }
     /**
      * @internal
      */
@@ -15714,7 +15722,6 @@ class Menu extends FoundationElement {
         }
     }
 }
-Menu.focusableElementRoles = roleForMenuItem;
 __decorate([
     observable
 ], Menu.prototype, "items", void 0);
@@ -16086,8 +16093,7 @@ class NumberField extends FormAssociatedNumberField {
      * @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;
@@ -16103,8 +16109,7 @@ class NumberField extends FormAssociatedNumberField {
      * @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;
@@ -16571,12 +16576,10 @@ class RadioGroup extends FoundationElement {
             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
@@ -16802,12 +16805,10 @@ class RadioGroup extends FoundationElement {
         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
@@ -16964,13 +16965,12 @@ class Radio extends FormAssociatedRadio {
      * @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;
             }
         }
@@ -17003,10 +17003,9 @@ class Radio extends FormAssociatedRadio {
      * @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");
@@ -17018,7 +17017,7 @@ class Radio extends FormAssociatedRadio {
                 // 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;
                 }
             }
@@ -17243,12 +17242,11 @@ class HorizontalScroll extends FoundationElement {
      * @internal
      */
     setFlippers() {
-        var _a, _b;
         const position = this.scrollContainer.scrollLeft;
-        (_a = this.previousFlipperContainer) === null || _a === void 0 ? void 0 : _a.classList.toggle("disabled", position === 0);
+        this.previousFlipperContainer?.classList.toggle("disabled", position === 0);
         if (this.scrollStops) {
             const lastStop = Math.abs(this.scrollStops[this.scrollStops.length - 1]);
-            (_b = this.nextFlipperContainer) === null || _b === void 0 ? void 0 : _b.classList.toggle("disabled", this.validateStops(false) && Math.abs(position) + this.width >= lastStop);
+            this.nextFlipperContainer?.classList.toggle("disabled", this.validateStops(false) && Math.abs(position) + this.width >= lastStop);
         }
     }
     /**
@@ -17260,12 +17258,11 @@ class HorizontalScroll extends FoundationElement {
      * @public
      */
     scrollInView(item, padding = 0, rightPadding) {
-        var _a;
         if (typeof item !== "number" && item) {
             item = this.scrollItems.findIndex(scrollItem => scrollItem === item || scrollItem.contains(item));
         }
         if (item !== undefined) {
-            rightPadding = rightPadding !== null && rightPadding !== void 0 ? rightPadding : padding;
+            rightPadding = rightPadding ?? padding;
             const { scrollContainer: container, scrollStops, scrollItems: items } = this;
             const { scrollLeft } = this.scrollContainer;
             const { width: containerWidth } = container.getBoundingClientRect();
@@ -17275,9 +17272,9 @@ class HorizontalScroll extends FoundationElement {
             const isBefore = scrollLeft + padding > itemStart;
             if (isBefore || scrollLeft + containerWidth - rightPadding < itemEnd) {
                 const stops = [...scrollStops].sort((a, b) => (isBefore ? b - a : a - b));
-                const scrollTo = (_a = stops.find(position => isBefore
+                const scrollTo = stops.find(position => isBefore
                     ? position + padding < itemStart
-                    : position + containerWidth - (rightPadding !== null && rightPadding !== void 0 ? rightPadding : 0) > itemEnd)) !== null && _a !== void 0 ? _a : 0;
+                    : position + containerWidth - (rightPadding ?? 0) > itemEnd) ?? 0;
                 this.scrollToPosition(scrollTo);
             }
         }
@@ -17341,12 +17338,11 @@ class HorizontalScroll extends FoundationElement {
      * @public
      */
     scrollToPosition(newPosition, position = this.scrollContainer.scrollLeft) {
-        var _a;
         if (this.scrolling) {
             return;
         }
         this.scrolling = true;
-        const seconds = (_a = this.duration) !== null && _a !== void 0 ? _a : `${Math.abs(newPosition - position) / this.speed}s`;
+        const seconds = this.duration ?? `${Math.abs(newPosition - position) / this.speed}s`;
         this.content.style.setProperty("transition-duration", seconds);
         const computedDuration = parseFloat(getComputedStyle(this.content).getPropertyValue("transition-duration"));
         const transitionendHandler = (e) => {
@@ -17428,9 +17424,7 @@ __decorate([
 /**
  * @public
  */
-const horizontalScrollTemplate = (context, definition) => {
-    var _a, _b;
-    return html `
+const horizontalScrollTemplate = (context, definition) => html `
     <template
         class="horizontal-scroll"
         @keyup="${(x, c) => x.keyupHandler(c.event)}"
@@ -17446,9 +17440,9 @@ const horizontalScrollTemplate = (context, definition) => {
                 <div class="content-container" part="content-container" ${ref("content")}>
                     <slot
                         ${slotted({
-        property: "scrollItems",
-        filter: elements(),
-    })}
+    property: "scrollItems",
+    filter: elements(),
+})}
                     ></slot>
                 </div>
             </div>
@@ -17461,8 +17455,8 @@ const horizontalScrollTemplate = (context, definition) => {
                         <div class="scroll-action" part="scroll-action-previous">
                             <slot name="previous-flipper">
                                 ${definition.previousFlipper instanceof Function
-        ? definition.previousFlipper(context, definition)
-        : (_a = definition.previousFlipper) !== null && _a !== void 0 ? _a : ""}
+    ? definition.previousFlipper(context, definition)
+    : definition.previousFlipper ?? ""}
                             </slot>
                         </div>
                     </div>
@@ -17474,8 +17468,8 @@ const horizontalScrollTemplate = (context, definition) => {
                         <div class="scroll-action" part="scroll-action-next">
                             <slot name="next-flipper">
                                 ${definition.nextFlipper instanceof Function
-        ? definition.nextFlipper(context, definition)
-        : (_b = definition.nextFlipper) !== null && _b !== void 0 ? _b : ""}
+    ? definition.nextFlipper(context, definition)
+    : definition.nextFlipper ?? ""}
                             </slot>
                         </div>
                     </div>
@@ -17484,7 +17478,6 @@ const horizontalScrollTemplate = (context, definition) => {
         ${endSlotTemplate(context, definition)}
     </template>
 `;
-};
 
 /**
  * a method to filter out any whitespace _only_ nodes, to be used inside a template
@@ -17864,17 +17857,16 @@ class Select extends FormAssociatedSelect {
         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;
@@ -17891,9 +17883,8 @@ class Select extends FormAssociatedSelect {
      * @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");
@@ -17945,9 +17936,8 @@ class Select extends FormAssociatedSelect {
      * @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.
@@ -18008,7 +17998,6 @@ class Select extends FormAssociatedSelect {
      * @internal
      */
     focusoutHandler(e) {
-        var _a;
         super.focusoutHandler(e);
         if (!this.open) {
             return true;
@@ -18018,7 +18007,7 @@ class Select extends FormAssociatedSelect {
             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);
@@ -18070,8 +18059,7 @@ class Select extends FormAssociatedSelect {
      * @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;
@@ -18098,11 +18086,9 @@ class Select extends FormAssociatedSelect {
      * @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;
             }
@@ -18116,9 +18102,8 @@ class Select extends FormAssociatedSelect {
      * @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;
@@ -19533,14 +19518,12 @@ class Tabs extends FoundationElement {
     }
     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() {
@@ -20081,8 +20064,7 @@ class Toolbar extends FoundationElement {
      * @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);
         }
@@ -20120,8 +20102,9 @@ class Toolbar extends FoundationElement {
      * @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.
@@ -20161,8 +20144,7 @@ class Toolbar extends FoundationElement {
      * @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.
@@ -20195,10 +20177,9 @@ class Toolbar extends FoundationElement {
      * @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) ||