@genesislcap/foundation-ui 14.283.2 → 14.284.0

package/dist/dts/base-components.d.ts

@@ -272,6 +272,15 @@ export declare const baseComponents: {
         shadowOptions: ShadowRootInit;
     }, typeof import("./snackbar").Snackbar>;
     foundationStackingIcons: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./stacking-icons").StackingIcons>;
+    foundationStatusPill: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+        baseName: string;
+        styles: import("@microsoft/fast-element").ElementStyles;
+        template: import("@microsoft/fast-element").ViewTemplate<import("./status-pill").StatusPill, any>;
+    }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+        baseName: string;
+        styles: import("@microsoft/fast-element").ElementStyles;
+        template: import("@microsoft/fast-element").ViewTemplate<import("./status-pill").StatusPill, any>;
+    }, typeof import("./status-pill").StatusPill>;
     foundationStepper: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
         baseName: string;
         template: import("@microsoft/fast-element").ViewTemplate<import("./stepper").Stepper, any>;

package/dist/dts/base-components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAiF5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAiFJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}
+{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAkF5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAkFJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}

package/dist/dts/index.d.ts

@@ -75,6 +75,7 @@ export * from './slider';
 export * from './slider-label';
 export * from './snackbar';
 export * from './stacking-icons';
+export * from './status-pill';
 export * from './stepper';
 export * from './stepper-tab';
 export * from './stepper-tab-panel';

package/dist/dts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/dts/status-pill/index.d.ts

@@ -0,0 +1,4 @@
+export * from './status-pill';
+export * from './status-pill.styles';
+export * from './status-pill.template';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/status-pill/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/status-pill/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC"}

package/dist/dts/status-pill/status-pill.d.ts

@@ -0,0 +1,140 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+/**
+ * @internal
+ */
+export declare const formatTimeForCountDown: (totalMilliseconds: number) => string;
+/**
+ * @tagname %%prefix%%-status-pill
+ */
+export declare class StatusPill extends FoundationElement {
+    /**
+     * @attr background-color - a valid hex, rgb or rgba color for the background fill color of the pill
+     * @example
+     * Status pill with a red background
+     * ```html
+     *  <rapid-status-pill background-color='red'>
+     *  </rapid-status-pill>
+     * ```
+     */
+    backgroundColor: string;
+    /**
+     * @attr icon-name - a string for the icon. Valid values are from the free set of font awesome icons which can be found here https://fontawesome.com/search?ic=free
+     * @example
+     * Status pill with a house icon
+     * ```html
+     *  <rapid-status-pill icon-name='house'>
+     *  </rapid-status-pill>
+     * ```
+     */
+    iconName: string;
+    /**
+     * @attr icon-src - the src for an image. This can be used if the icon you want an icon that is not included in the free set of font awesome icons. Note, only svgs are recommended
+     * @example
+     * Status pill with an image
+     * ```html
+     *  <rapid-status-pill icon-src='public/custom-svg.svg'>
+     *  </rapid-status-pill>
+     * ```
+     */
+    iconSrc: string;
+    /**
+     * @attr icon-initial - use this attribute if you want to show a single letter at the start of the pill, pass a string. Note, it will only use the first character of a string
+     * @example
+     * Status pill with an initial
+     * ```html
+     *  <rapid-status-pill icon-initial='S'>
+     *  </rapid-status-pill>
+     * ```
+     */
+    iconInitial: string;
+    /**
+     * @attr icon-initial - sets a circular background on an icon
+     * @example
+     * Status pill with a background color on the initial
+     * ```html
+     *  <rapid-status-pill icon-initial='S'>
+     *  </rapid-status-pill>
+     * ```
+     */
+    iconInitialBackgroundColor: string;
+    /**
+     * @attr icon-size - sets the size of the icon. Defaults to 'sm'. Can be one of any valid fa icon size, "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x"
+     * @example
+     * Status pill with large set
+     * ```html
+     *  <rapid-status-pill size='lg'>
+     *  </rapid-status-pill>
+     * ```
+     */
+    iconSize: string;
+    /**
+     * @attr large - a valid hex, rgb or rgba color for the color applied to text and icon.
+     * @example
+     * Status pill with text color
+     * ```html
+     *  <rapid-status-pill text-color='grey'>
+     *  </rapid-status-pill>
+     * ```
+     */
+    textColor: string;
+    /**
+     * @attr text - a string for the text shown at the end of the pill
+     * @example
+     * Status pill with text
+     * ```html
+     *  <rapid-status-pill text='Processed'>
+     *  </rapid-status-pill>
+     * ```
+     */
+    text: string;
+    /**
+     * @attr date-countdown - a date or timestamp that the pill will count down to
+     * @example
+     * Status pill with date-countdown
+     * ```html
+     *  <rapid-status-pill date-countdown='1750955880385'>
+     *  </rapid-status-pill>
+     * ```
+     */
+    dateCountdown: number;
+    /**
+     * @attr date-countdown-completed-message - the string that will be shown when the countdown is complete
+     * @example
+     * Status pill with countdown completed message
+     * ```html
+     *  <rapid-status-pill date-countdown-completed-message='Market Closed'>
+     *  </rapid-status-pill>
+     * ```
+     */
+    dateCountdownCompletedMessage: string;
+    /**
+     * @internal
+     */
+    countdown: string;
+    private dateInterval;
+    /**
+     * @internal
+     */
+    dateCountdownChanged(oldValue: any, newValue: any): void;
+    disconnectedCallback(): void;
+    private setUpDateCountdown;
+    private updateCountdown;
+    private clearCountdownTimer;
+}
+/**
+ * The Foundation Status Pill
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-status-pill\>
+ */
+export declare const foundationStatusPill: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+    baseName: string;
+    styles: import("@microsoft/fast-element").ElementStyles;
+    template: import("@microsoft/fast-element").ViewTemplate<StatusPill, any>;
+}>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+    baseName: string;
+    styles: import("@microsoft/fast-element").ElementStyles;
+    template: import("@microsoft/fast-element").ViewTemplate<StatusPill, any>;
+}, typeof StatusPill>;
+//# sourceMappingURL=status-pill.d.ts.map

package/dist/dts/status-pill/status-pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-pill.d.ts","sourceRoot":"","sources":["../../../src/status-pill/status-pill.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAU/D;;GAEG;AACH,eAAO,MAAM,sBAAsB,sBAAuB,MAAM,KAAG,MAmBlE,CAAC;AAEF;;GAEG;AACH,qBAAa,UAAW,SAAQ,iBAAiB;IAC/C;;;;;;;;OAQG;IACsC,eAAe,EAAE,MAAM,CAAC;IAEjE;;;;;;;;OAQG;IAC+B,QAAQ,EAAE,MAAM,CAAC;IAEnD;;;;;;;;OAQG;IAC8B,OAAO,EAAE,MAAM,CAAC;IAEjD;;;;;;;;OAQG;IACkC,WAAW,EAAE,MAAM,CAAC;IAEzD;;;;;;;;OAQG;IACmD,0BAA0B,EAAE,MAAM,CAAC;IAEzF;;;;;;;;OAQG;IAC+B,QAAQ,EAAE,MAAM,CAAQ;IAE1D;;;;;;;;OAQG;IACgC,SAAS,EAAE,MAAM,CAAC;IAErD;;;;;;;;OAQG;IACG,IAAI,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACoC,aAAa,EAAE,MAAM,CAAC;IAE7D;;;;;;;;OAQG;IACsD,6BAA6B,EAAE,MAAM,CAClF;IAEZ;;OAEG;IACS,SAAS,EAAE,MAAM,CAAC;IAE9B,OAAO,CAAC,YAAY,CAAC;IAErB;;OAEG;IACH,oBAAoB,CAAC,QAAQ,KAAA,EAAE,QAAQ,KAAA;IAWvC,oBAAoB;IAKpB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,mBAAmB;CAO5B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;qBAI/B,CAAC"}

package/dist/dts/status-pill/status-pill.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const statusPillStyles: import("@microsoft/fast-element").ElementStyles;
+//# sourceMappingURL=status-pill.styles.d.ts.map

package/dist/dts/status-pill/status-pill.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-pill.styles.d.ts","sourceRoot":"","sources":["../../../src/status-pill/status-pill.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAkC5B,CAAC"}

package/dist/dts/status-pill/status-pill.template.d.ts

@@ -0,0 +1,3 @@
+import type { StatusPill } from './status-pill';
+export declare const foundationStatusPillTemplate: import("@microsoft/fast-element").ViewTemplate<StatusPill, any>;
+//# sourceMappingURL=status-pill.template.d.ts.map

package/dist/dts/status-pill/status-pill.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-pill.template.d.ts","sourceRoot":"","sources":["../../../src/status-pill/status-pill.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AA4ChD,eAAO,MAAM,4BAA4B,iEAExC,CAAC"}

package/dist/esm/base-components.js

@@ -63,6 +63,7 @@ import { foundationSlider } from './slider';
 import { foundationSliderLabel } from './slider-label';
 import { foundationSnackbar } from './snackbar';
 import { foundationStackingIcons } from './stacking-icons';
+import { foundationStatusPill } from './status-pill';
 import { foundationStepper } from './stepper';
 import { foundationStepperTab } from './stepper-tab';
 import { foundationStepperTabPanel } from './stepper-tab-panel';
@@ -143,6 +144,7 @@ export const baseComponents = {
     foundationSliderLabel,
     foundationSnackbar,
     foundationStackingIcons,
+    foundationStatusPill,
     foundationStepper,
     foundationStepperTab,
     foundationStepperTabPanel,

package/dist/esm/index.js

@@ -75,6 +75,7 @@ export * from './slider';
 export * from './slider-label';
 export * from './snackbar';
 export * from './stacking-icons';
+export * from './status-pill';
 export * from './stepper';
 export * from './stepper-tab';
 export * from './stepper-tab-panel';

package/dist/esm/status-pill/index.js

@@ -0,0 +1,3 @@
+export * from './status-pill';
+export * from './status-pill.styles';
+export * from './status-pill.template';

package/dist/esm/status-pill/status-pill.js

@@ -0,0 +1,151 @@
+import { __decorate } from "tslib";
+import { attr, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { logger } from '../utils';
+import { statusPillStyles as styles } from './status-pill.styles';
+import { foundationStatusPillTemplate as template } from './status-pill.template';
+const ONE_SECOND_IN_MILIS = 1000;
+const SECONDS_IN_DAY = 86400;
+const SECONDS_IN_HOUR = 3600;
+const SECONDS_IN_MINUTE = 60;
+/**
+ * @internal
+ */
+export const formatTimeForCountDown = (totalMilliseconds) => {
+    let totalSeconds = totalMilliseconds / ONE_SECOND_IN_MILIS;
+    const days = Math.floor(totalSeconds / SECONDS_IN_DAY);
+    totalSeconds %= SECONDS_IN_DAY;
+    const hours = Math.floor(totalSeconds / SECONDS_IN_HOUR);
+    totalSeconds %= SECONDS_IN_HOUR;
+    const minutes = Math.floor(totalSeconds / SECONDS_IN_MINUTE);
+    const seconds = totalSeconds % SECONDS_IN_MINUTE;
+    const parts = [];
+    if (days)
+        parts.push(`${days}d`);
+    if (hours)
+        parts.push(`${hours}h`);
+    if (minutes)
+        parts.push(`${minutes}m`);
+    if (seconds)
+        parts.push(`${seconds}s`);
+    return parts.length ? parts.join(' ') : '0s';
+};
+/**
+ * @tagname %%prefix%%-status-pill
+ */
+export class StatusPill extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * @attr icon-size - sets the size of the icon. Defaults to 'sm'. Can be one of any valid fa icon size, "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "1x" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x"
+         * @example
+         * Status pill with large set
+         * ```html
+         *  <rapid-status-pill size='lg'>
+         *  </rapid-status-pill>
+         * ```
+         */
+        this.iconSize = 'sm';
+        /**
+         * @attr date-countdown-completed-message - the string that will be shown when the countdown is complete
+         * @example
+         * Status pill with countdown completed message
+         * ```html
+         *  <rapid-status-pill date-countdown-completed-message='Market Closed'>
+         *  </rapid-status-pill>
+         * ```
+         */
+        this.dateCountdownCompletedMessage = `Expired`;
+    }
+    /**
+     * @internal
+     */
+    dateCountdownChanged(oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (!newValue) {
+                this.clearCountdownTimer();
+                return;
+            }
+            this.setUpDateCountdown(newValue);
+        }
+    }
+    disconnectedCallback() {
+        this.clearCountdownTimer();
+        super.disconnectedCallback();
+    }
+    setUpDateCountdown(dateCountdown) {
+        this.clearCountdownTimer();
+        if (!isNaN(parseInt(dateCountdown))) {
+            dateCountdown = parseInt(dateCountdown);
+            const baseDate = new Date(dateCountdown);
+            this.updateCountdown(baseDate);
+            this.dateInterval = setInterval(() => this.updateCountdown(baseDate), ONE_SECOND_IN_MILIS);
+        }
+        else {
+            logger.warn('invalid date-countdown value passed. Must be a number');
+        }
+    }
+    updateCountdown(targetDate) {
+        const now = new Date().getTime();
+        const diff = Math.floor(targetDate.getTime() - now);
+        if (diff <= 0) {
+            this.countdown = this.dateCountdownCompletedMessage;
+            clearInterval(this.dateInterval);
+        }
+        else {
+            this.countdown = formatTimeForCountDown(diff);
+        }
+    }
+    clearCountdownTimer() {
+        if (this.dateInterval) {
+            clearInterval(this.dateInterval);
+            this.dateInterval = null;
+            this.countdown = null;
+        }
+    }
+}
+__decorate([
+    attr({ attribute: 'background-color' })
+], StatusPill.prototype, "backgroundColor", void 0);
+__decorate([
+    attr({ attribute: 'icon-name' })
+], StatusPill.prototype, "iconName", void 0);
+__decorate([
+    attr({ attribute: 'icon-src' })
+], StatusPill.prototype, "iconSrc", void 0);
+__decorate([
+    attr({ attribute: 'icon-initial' })
+], StatusPill.prototype, "iconInitial", void 0);
+__decorate([
+    attr({ attribute: 'icon-initial-background-color' })
+], StatusPill.prototype, "iconInitialBackgroundColor", void 0);
+__decorate([
+    attr({ attribute: 'icon-size' })
+], StatusPill.prototype, "iconSize", void 0);
+__decorate([
+    attr({ attribute: 'text-color' })
+], StatusPill.prototype, "textColor", void 0);
+__decorate([
+    attr
+], StatusPill.prototype, "text", void 0);
+__decorate([
+    attr({ attribute: 'date-countdown' })
+], StatusPill.prototype, "dateCountdown", void 0);
+__decorate([
+    attr({ attribute: 'date-countdown-completed-message' })
+], StatusPill.prototype, "dateCountdownCompletedMessage", void 0);
+__decorate([
+    observable
+], StatusPill.prototype, "countdown", void 0);
+/**
+ * The Foundation Status Pill
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<foundation-status-pill\>
+ */
+export const foundationStatusPill = StatusPill.compose({
+    baseName: 'status-pill',
+    styles,
+    template,
+});

package/dist/esm/status-pill/status-pill.styles.js

@@ -0,0 +1,36 @@
+import { css } from '@microsoft/fast-element';
+export const statusPillStyles = css `
+  .status-pill {
+    font-size: 12px;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    border-radius: 10px;
+    height: 20px;
+    background: grey;
+    color: var(--neutral-foreground-rest);
+    padding: 2px 8px;
+    line-height: 1;
+  }
+
+  .status-pill.lg {
+    height: 32px;
+    border-radius: 16px;
+    padding: 2px 12px;
+  }
+
+  .status-pill-initial {
+    height: 14px;
+    width: 14px;
+    border-radius: 7px;
+    font-weight: bold;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .status-pill-image {
+    height: 14px;
+  }
+`;

package/dist/esm/status-pill/status-pill.template.js

@@ -0,0 +1,33 @@
+import { html, when } from '@microsoft/fast-element';
+import { getPrefix } from '../utils';
+const getPrefixedStatusPillTemplate = (prefix) => html `
+  <div
+    data-test-id="status-pill"
+    part="status-pill"
+    class="status-pill"
+    style="color: ${(x) => x.textColor || ''}; background: ${(x) => x.backgroundColor || ''};"
+  >
+    ${when((x) => x.iconName, html `
+        <${prefix}-icon name="${(x) => x.iconName}" size="${(x) => x.iconSize}"></${prefix}-icon>
+      `)}
+    ${when((x) => x.iconSrc, html `
+        <img alt="${(x) => x.iconSrc}" class="status-pill-image" src="${(x) => x.iconSrc}" />
+      `)}
+    ${when((x) => x.iconInitial, html `
+        <div
+          data-test-id="status-pill-initial"
+          class="status-pill-initial"
+          style="color:${(x) => x.textColor}; background-color: ${(x) => x.iconInitialBackgroundColor}"
+        >
+          ${(x) => x.iconInitial.substring(0, 1)}
+        </div>
+      `)}
+    <span data-test-id="status-pill-text">${(x) => x.text}</span>
+    ${when((x) => x.countdown, html `
+        <span data-test-id="status-pill-countdown">${(x) => x.countdown}</span>
+      `)}
+  </div>
+`;
+export const foundationStatusPillTemplate = html `
+  ${(x) => getPrefixedStatusPillTemplate(getPrefix(x))}
+`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.283.2",
+  "version": "14.284.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -83,13 +83,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.283.2",
-    "@genesislcap/genx": "14.283.2",
-    "@genesislcap/rollup-builder": "14.283.2",
-    "@genesislcap/ts-builder": "14.283.2",
-    "@genesislcap/uvu-playwright-builder": "14.283.2",
-    "@genesislcap/vite-builder": "14.283.2",
-    "@genesislcap/webpack-builder": "14.283.2",
+    "@genesislcap/foundation-testing": "14.284.0",
+    "@genesislcap/genx": "14.284.0",
+    "@genesislcap/rollup-builder": "14.284.0",
+    "@genesislcap/ts-builder": "14.284.0",
+    "@genesislcap/uvu-playwright-builder": "14.284.0",
+    "@genesislcap/vite-builder": "14.284.0",
+    "@genesislcap/webpack-builder": "14.284.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.0",
     "rxjs": "^7.5.4"
@@ -100,15 +100,15 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/expression-builder": "14.283.2",
-    "@genesislcap/foundation-comms": "14.283.2",
-    "@genesislcap/foundation-criteria": "14.283.2",
-    "@genesislcap/foundation-errors": "14.283.2",
-    "@genesislcap/foundation-events": "14.283.2",
-    "@genesislcap/foundation-logger": "14.283.2",
-    "@genesislcap/foundation-notifications": "14.283.2",
-    "@genesislcap/foundation-user": "14.283.2",
-    "@genesislcap/foundation-utils": "14.283.2",
+    "@genesislcap/expression-builder": "14.284.0",
+    "@genesislcap/foundation-comms": "14.284.0",
+    "@genesislcap/foundation-criteria": "14.284.0",
+    "@genesislcap/foundation-errors": "14.284.0",
+    "@genesislcap/foundation-events": "14.284.0",
+    "@genesislcap/foundation-logger": "14.284.0",
+    "@genesislcap/foundation-notifications": "14.284.0",
+    "@genesislcap/foundation-user": "14.284.0",
+    "@genesislcap/foundation-utils": "14.284.0",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -130,5 +130,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "357e8a019efe0dfebe684827d6e844a4a8b249d7"
+  "gitHead": "a2b9ad74ad30820f7d9e2cbd1f88c8d89e182828"
 }