@ni/fast-foundation 10.1.3 → 10.1.5

package/README.md

@@ -6,8 +6,9 @@
 
 [![NI FAST Foundation NPM version and repo link](https://img.shields.io/npm/v/@ni/fast-foundation.svg?label=@ni/fast-foundation)](https://www.npmjs.com/package/@ni/fast-foundation)
 
-The `fast-foundation` package is a library of Web Component classes, templates, and other utilities intended to be composed into registered Web Components by design systems (e.g. [NI Nimble Design System](https://nimble.ni.dev/), etc.). The exports of this package can generally be thought of as un-styled base components that implement semantic and accessible markup and behavior. This `@ni/fast-foundation` library is a fork of [`@microsoft/fast-foundation`](https://github.com/microsoft/fast/tree/archives/fast-element-1/packages/web-components/fast-foundation).
-
+The `fast-foundation` package is a library of Web Component classes, templates, and other utilities intended to be composed into registered Web Components by design systems (e.g. [NI Nimble Design System](https://nimble.ni.dev/), etc.).
+The exports of this package can generally be thought of as un-styled base components that implement semantic and accessible markup and behavior.
+This `@ni/fast-foundation` library is a fork of [`@microsoft/fast-foundation`](https://github.com/microsoft/fast/tree/archives/fast-element-1/packages/web-components/fast-foundation).
 
 This package does not export Web Components registered as [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) - it exports parts and pieces intended to be *composed* into Web Components, allowing you to implement your own design language by simply applying CSS styles and behaviors without having to write all the JavaScript that's involved in building production-quality component implementations.
 

package/dist/esm/accordion/accordion.js

@@ -45,7 +45,6 @@ export class Accordion extends FoundationElement {
             this.$emit("change", this.activeid);
         };
         this.setItems = () => {
-            var _a;
             if (this.accordionItems.length === 0) {
                 return;
             }
@@ -64,7 +63,7 @@ export 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");
             }
         };

package/dist/esm/anchor/anchor.js

@@ -24,14 +24,12 @@ export 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();
                 };
             }
         };

package/dist/esm/anchored-region/anchored-region-config.js

@@ -19,14 +19,26 @@ const horizontalAnchorOverlay = {
  *
  * @public
  */
-export const FlyoutPosTop = Object.assign(Object.assign({}, horizontalAnchorOverlay), { verticalDefaultPosition: "top", verticalPositioningMode: "locktodefault", verticalInset: false, verticalScaling: "content" });
+export 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
  */
-export const FlyoutPosBottom = Object.assign(Object.assign({}, horizontalAnchorOverlay), { verticalDefaultPosition: "bottom", verticalPositioningMode: "locktodefault", verticalInset: false, verticalScaling: "content" });
+export 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,
@@ -34,21 +46,32 @@ export const FlyoutPosBottom = Object.assign(Object.assign({}, horizontalAnchorO
  *
  * @public
  */
-export const FlyoutPosTallest = Object.assign(Object.assign({}, horizontalAnchorOverlay), { verticalPositioningMode: "dynamic", verticalInset: false, verticalScaling: "content" });
+export 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
  */
-export const FlyoutPosTopFill = Object.assign(Object.assign({}, FlyoutPosTop), { verticalScaling: "fill" });
+export 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
  */
-export const FlyoutPosBottomFill = Object.assign(Object.assign({}, FlyoutPosBottom), { verticalScaling: "fill" });
+export 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,
@@ -56,4 +79,7 @@ export const FlyoutPosBottomFill = Object.assign(Object.assign({}, FlyoutPosBott
  *
  * @public
  */
-export const FlyoutPosTallestFill = Object.assign(Object.assign({}, FlyoutPosTallest), { verticalScaling: "fill" });
+export const FlyoutPosTallestFill = {
+    ...FlyoutPosTallest,
+    verticalScaling: "fill",
+};

package/dist/esm/anchored-region/anchored-region.js

@@ -807,6 +807,7 @@ export class AnchoredRegion extends FoundationElement {
             this.initialize();
         }
     }
+    static { this.intersectionService = new IntersectionService(); }
     /**
      * @internal
      */
@@ -904,7 +905,6 @@ export class AnchoredRegion extends FoundationElement {
         this.updateRegionStyle();
     }
 }
-AnchoredRegion.intersectionService = new IntersectionService();
 __decorate([
     attr
 ], AnchoredRegion.prototype, "anchor", void 0);

package/dist/esm/breadcrumb/breadcrumb.js

@@ -34,12 +34,11 @@ export 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;

package/dist/esm/button/button.js

@@ -23,8 +23,7 @@ export 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();
             }
         };
@@ -55,8 +54,7 @@ export 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.
@@ -64,11 +62,10 @@ export 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();
                 };
@@ -121,11 +118,10 @@ export 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);
@@ -136,9 +132,8 @@ export 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);

package/dist/esm/calendar/calendar.template.js

@@ -174,7 +174,6 @@ export const noninteractiveCalendarTemplate = (todayString) => {
  * @public
  */
 export const calendarTemplate = (context, definition) => {
-    var _a;
     const today = new Date();
     const todayString = `${today.getMonth() + 1}-${today.getDate()}-${today.getFullYear()}`;
     return html `
@@ -182,7 +181,7 @@ export 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}

package/dist/esm/calendar/date-formatter.js

@@ -81,7 +81,10 @@ export 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);
     }
     /**

package/dist/esm/combobox/combobox.js

@@ -154,17 +154,16 @@ export 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;
@@ -180,7 +179,7 @@ export 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) {
@@ -253,8 +252,7 @@ export 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" });
                 });
             }
         }
@@ -473,8 +471,7 @@ export 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);
     }
     /**
@@ -535,9 +532,8 @@ export 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) {

package/dist/esm/data-grid/data-grid-cell.js

@@ -77,12 +77,11 @@ export 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();

package/dist/esm/data-grid/data-grid.js

@@ -11,6 +11,17 @@ export { DataGridRowTypes, GenerateHeaderOptions };
  * @public
  */
 export 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
      */
@@ -388,17 +399,6 @@ export 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);

package/dist/esm/design-system/design-system.js

@@ -198,7 +198,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);

package/dist/esm/design-token/custom-property-manager.js

@@ -134,6 +134,8 @@ class ElementStyleSheetTarget {
  * @internal
  */
 export class RootStyleSheetTarget {
+    static { this.roots = new Set(); }
+    static { this.properties = {}; }
     setProperty(name, value) {
         RootStyleSheetTarget.properties[name] = value;
         for (const target of RootStyleSheetTarget.roots.values()) {
@@ -175,8 +177,6 @@ export 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

package/dist/esm/design-token/design-token.js

@@ -27,6 +27,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
@@ -35,6 +42,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)));
@@ -116,17 +127,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);
@@ -273,6 +273,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.
      */
@@ -373,11 +377,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
@@ -578,10 +581,6 @@ class DesignTokenNode {
         return false;
     }
 }
-/**
- * Responsible for reflecting tokens to CSS custom properties
- */
-DesignTokenNode.cssCustomPropertyReflector = new CustomPropertyReflector();
 __decorate([
     observable
 ], DesignTokenNode.prototype, "children", void 0);

package/dist/esm/di/di.js

@@ -414,7 +414,7 @@ export 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() {
@@ -758,13 +758,12 @@ export 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;
         }

package/dist/esm/dialog/dialog.js

@@ -243,8 +243,7 @@ export 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
@@ -254,8 +253,7 @@ export 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);
         });
     }

package/dist/esm/directives/reflect-attributes.js

@@ -5,6 +5,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)) {
@@ -38,7 +39,6 @@ class AttributeReflectionSubscriptionSet extends SubscriberSet {
         observer.observe(this.source, { attributeFilter });
     }
 }
-AttributeReflectionSubscriptionSet.subscriberCache = new WeakMap();
 class ReflectAttrBehavior {
     constructor(target, attributes) {
         this.target = target;

package/dist/esm/form-associated/form-associated.js

@@ -301,7 +301,6 @@ export function FormAssociated(BaseCtor) {
          * Attach the proxy element to the DOM
          */
         attachProxy() {
-            var _a;
             if (!this.proxyInitialized) {
                 this.proxyInitialized = true;
                 this.proxy.style.display = "none";
@@ -322,16 +321,15 @@ export 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) {
@@ -355,7 +353,7 @@ export 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;
             }

package/dist/esm/foundation-element/foundation-element.js

@@ -84,7 +84,10 @@ export 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;

package/dist/esm/horizontal-scroll/horizontal-scroll.js

@@ -197,12 +197,11 @@ export 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);
         }
     }
     /**
@@ -214,12 +213,11 @@ export 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();
@@ -229,9 +227,9 @@ export 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);
             }
         }
@@ -295,12 +293,11 @@ export 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) => {