@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tds/themeProvider/themeProvider.css

@@ -0,0 +1,502 @@
+/* This file is generated by theme.js */
+:host {
+    --tds-color-architect-light-h: 198;
+    --tds-color-architect-light-s: 99%;
+    --tds-color-architect-light-l: 70%;
+    --tds-color-architect-light: hsl(
+        var(--tds-color-architect-light-h),
+        var(--tds-color-architect-light-s),
+        var(--tds-color-architect-light-l)
+    );
+    --tds-color-architect-dark-h: 179;
+    --tds-color-architect-dark-s: 95%;
+    --tds-color-architect-dark-l: 15%;
+    --tds-color-architect-dark: hsl(
+        var(--tds-color-architect-dark-h),
+        var(--tds-color-architect-dark-s),
+        var(--tds-color-architect-dark-l)
+    );
+    --tds-color-architect-bright-h: 14;
+    --tds-color-architect-bright-s: 100%;
+    --tds-color-architect-bright-l: 72%;
+    --tds-color-architect-bright: hsl(
+        var(--tds-color-architect-bright-h),
+        var(--tds-color-architect-bright-s),
+        var(--tds-color-architect-bright-l)
+    );
+    --tds-color-commerce-dark-h: 115;
+    --tds-color-commerce-dark-s: 27%;
+    --tds-color-commerce-dark-l: 32%;
+    --tds-color-commerce-dark: hsl(
+        var(--tds-color-commerce-dark-h),
+        var(--tds-color-commerce-dark-s),
+        var(--tds-color-commerce-dark-l)
+    );
+    --tds-color-commerce-light-h: 105;
+    --tds-color-commerce-light-s: 25%;
+    --tds-color-commerce-light-l: 97%;
+    --tds-color-commerce-light: hsl(
+        var(--tds-color-commerce-light-h),
+        var(--tds-color-commerce-light-s),
+        var(--tds-color-commerce-light-l)
+    );
+    --tds-color-developer-dark-h: 226;
+    --tds-color-developer-dark-s: 98%;
+    --tds-color-developer-dark-l: 21%;
+    --tds-color-developer-dark: hsl(
+        var(--tds-color-developer-dark-h),
+        var(--tds-color-developer-dark-s),
+        var(--tds-color-developer-dark-l)
+    );
+    --tds-color-developer-light-h: 210;
+    --tds-color-developer-light-s: 50%;
+    --tds-color-developer-light-l: 96%;
+    --tds-color-developer-light: hsl(
+        var(--tds-color-developer-light-h),
+        var(--tds-color-developer-light-s),
+        var(--tds-color-developer-light-l)
+    );
+    --tds-color-trailblazer-dark-h: 95;
+    --tds-color-trailblazer-dark-s: 40%;
+    --tds-color-trailblazer-dark-l: 15%;
+    --tds-color-trailblazer-dark: hsl(
+        var(--tds-color-trailblazer-dark-h),
+        var(--tds-color-trailblazer-dark-s),
+        var(--tds-color-trailblazer-dark-l)
+    );
+    --tds-color-trailblazer-light-h: 40;
+    --tds-color-trailblazer-light-s: 27%;
+    --tds-color-trailblazer-light-l: 98%;
+    --tds-color-trailblazer-light: hsl(
+        var(--tds-color-trailblazer-light-h),
+        var(--tds-color-trailblazer-light-s),
+        var(--tds-color-trailblazer-light-l)
+    );
+    --tds-color-admin-dark-h: 90;
+    --tds-color-admin-dark-s: 57%;
+    --tds-color-admin-dark-l: 32%;
+    --tds-color-admin-dark: hsl(
+        var(--tds-color-admin-dark-h),
+        var(--tds-color-admin-dark-s),
+        var(--tds-color-admin-dark-l)
+    );
+    --tds-color-admin-light-h: 185;
+    --tds-color-admin-light-s: 58%;
+    --tds-color-admin-light-l: 96%;
+    --tds-color-admin-light: hsl(
+        var(--tds-color-admin-light-h),
+        var(--tds-color-admin-light-s),
+        var(--tds-color-admin-light-l)
+    );
+    --tds-color-starter-dark-h: 196;
+    --tds-color-starter-dark-s: 72%;
+    --tds-color-starter-dark-l: 31%;
+    --tds-color-starter-dark: hsl(
+        var(--tds-color-starter-dark-h),
+        var(--tds-color-starter-dark-s),
+        var(--tds-color-starter-dark-l)
+    );
+    --tds-color-starter-light-h: 192;
+    --tds-color-starter-light-s: 56%;
+    --tds-color-starter-light-l: 96%;
+    --tds-color-starter-light: hsl(
+        var(--tds-color-starter-light-h),
+        var(--tds-color-starter-light-s),
+        var(--tds-color-starter-light-l)
+    );
+    --tds-color-careers-dark-h: 220;
+    --tds-color-careers-dark-s: 50%;
+    --tds-color-careers-dark-l: 34%;
+    --tds-color-careers-dark: hsl(
+        var(--tds-color-careers-dark-h),
+        var(--tds-color-careers-dark-s),
+        var(--tds-color-careers-dark-l)
+    );
+    --tds-color-careers-light-h: 225;
+    --tds-color-careers-light-s: 33%;
+    --tds-color-careers-light-l: 98%;
+    --tds-color-careers-light: hsl(
+        var(--tds-color-careers-light-h),
+        var(--tds-color-careers-light-s),
+        var(--tds-color-careers-light-l)
+    );
+    --tds-color-work-dark-h: 220;
+    --tds-color-work-dark-s: 50%;
+    --tds-color-work-dark-l: 34%;
+    --tds-color-work-dark: hsl(
+        var(--tds-color-work-dark-h),
+        var(--tds-color-work-dark-s),
+        var(--tds-color-work-dark-l)
+    );
+    --tds-color-work-light-h: 40;
+    --tds-color-work-light-s: 53%;
+    --tds-color-work-light-l: 97%;
+    --tds-color-work-light: hsl(
+        var(--tds-color-work-light-h),
+        var(--tds-color-work-light-s),
+        var(--tds-color-work-light-l)
+    );
+    --tds-color-salesforce-dark-h: 194;
+    --tds-color-salesforce-dark-s: 100%;
+    --tds-color-salesforce-dark-l: 15%;
+    --tds-color-salesforce-dark: hsl(
+        var(--tds-color-salesforce-dark-h),
+        var(--tds-color-salesforce-dark-s),
+        var(--tds-color-salesforce-dark-l)
+    );
+    --tds-color-salesforce-light-h: 196;
+    --tds-color-salesforce-light-s: 100%;
+    --tds-color-salesforce-light-l: 98%;
+    --tds-color-salesforce-light: hsl(
+        var(--tds-color-salesforce-light-h),
+        var(--tds-color-salesforce-light-s),
+        var(--tds-color-salesforce-light-l)
+    );
+    --tds-color-azure-h: 220;
+    --tds-color-azure-s: 53%;
+    --tds-color-azure-l: 45%;
+    --tds-color-azure: hsl(
+        var(--tds-color-azure-h),
+        var(--tds-color-azure-s),
+        var(--tds-color-azure-l)
+    );
+    --tds-color-black-h: 0;
+    --tds-color-black-s: 0%;
+    --tds-color-black-l: 12%;
+    --tds-color-black: hsl(
+        var(--tds-color-black-h),
+        var(--tds-color-black-s),
+        var(--tds-color-black-l)
+    );
+    --tds-color-calypso-h: 198;
+    --tds-color-calypso-s: 54%;
+    --tds-color-calypso-l: 36%;
+    --tds-color-calypso: hsl(
+        var(--tds-color-calypso-h),
+        var(--tds-color-calypso-s),
+        var(--tds-color-calypso-l)
+    );
+    --tds-color-evergreen-h: 153;
+    --tds-color-evergreen-s: 94%;
+    --tds-color-evergreen-l: 26%;
+    --tds-color-evergreen: hsl(
+        var(--tds-color-evergreen-h),
+        var(--tds-color-evergreen-s),
+        var(--tds-color-evergreen-l)
+    );
+    --tds-color-fire-h: 21;
+    --tds-color-fire-s: 97%;
+    --tds-color-fire-l: 52%;
+    --tds-color-fire: hsl(
+        var(--tds-color-fire-h),
+        var(--tds-color-fire-s),
+        var(--tds-color-fire-l)
+    );
+    --tds-color-fog-h: 0;
+    --tds-color-fog-s: 0%;
+    --tds-color-fog-l: 89%;
+    --tds-color-fog: hsl(
+        var(--tds-color-fog-h),
+        var(--tds-color-fog-s),
+        var(--tds-color-fog-l)
+    );
+    --tds-color-granite-h: 0;
+    --tds-color-granite-s: 0%;
+    --tds-color-granite-l: 68%;
+    --tds-color-granite: hsl(
+        var(--tds-color-granite-h),
+        var(--tds-color-granite-s),
+        var(--tds-color-granite-l)
+    );
+    --tds-color-ice-h: 216;
+    --tds-color-ice-s: 23%;
+    --tds-color-ice-l: 74%;
+    --tds-color-ice: hsl(
+        var(--tds-color-ice-h),
+        var(--tds-color-ice-s),
+        var(--tds-color-ice-l)
+    );
+    --tds-color-lochinvar-h: 176;
+    --tds-color-lochinvar-s: 54%;
+    --tds-color-lochinvar-l: 36%;
+    --tds-color-lochinvar: hsl(
+        var(--tds-color-lochinvar-h),
+        var(--tds-color-lochinvar-s),
+        var(--tds-color-lochinvar-l)
+    );
+    --tds-color-meteorite-h: 0;
+    --tds-color-meteorite-s: 0%;
+    --tds-color-meteorite-l: 35%;
+    --tds-color-meteorite: hsl(
+        var(--tds-color-meteorite-h),
+        var(--tds-color-meteorite-s),
+        var(--tds-color-meteorite-l)
+    );
+    --tds-color-midnight-h: 216;
+    --tds-color-midnight-s: 61%;
+    --tds-color-midnight-l: 22%;
+    --tds-color-midnight: hsl(
+        var(--tds-color-midnight-h),
+        var(--tds-color-midnight-s),
+        var(--tds-color-midnight-l)
+    );
+    --tds-color-ocean-h: 208;
+    --tds-color-ocean-s: 100%;
+    --tds-color-ocean-l: 41%;
+    --tds-color-ocean: hsl(
+        var(--tds-color-ocean-h),
+        var(--tds-color-ocean-s),
+        var(--tds-color-ocean-l)
+    );
+    --tds-color-ruby-h: 2;
+    --tds-color-ruby-s: 58%;
+    --tds-color-ruby-l: 48%;
+    --tds-color-ruby: hsl(
+        var(--tds-color-ruby-h),
+        var(--tds-color-ruby-s),
+        var(--tds-color-ruby-l)
+    );
+    --tds-color-sand-h: 0;
+    --tds-color-sand-s: 0%;
+    --tds-color-sand-l: 96%;
+    --tds-color-sand: hsl(
+        var(--tds-color-sand-h),
+        var(--tds-color-sand-s),
+        var(--tds-color-sand-l)
+    );
+    --tds-color-sunshine-h: 39;
+    --tds-color-sunshine-s: 98%;
+    --tds-color-sunshine-l: 58%;
+    --tds-color-sunshine: hsl(
+        var(--tds-color-sunshine-h),
+        var(--tds-color-sunshine-s),
+        var(--tds-color-sunshine-l)
+    );
+    --tds-color-white-h: 0;
+    --tds-color-white-s: 0%;
+    --tds-color-white-l: 100%;
+    --tds-color-white: hsl(
+        var(--tds-color-white-h),
+        var(--tds-color-white-s),
+        var(--tds-color-white-l)
+    );
+    --tds-color-hot-orange-sixty-h: 14;
+    --tds-color-hot-orange-sixty-s: 100%;
+    --tds-color-hot-orange-sixty-l: 59%;
+    --tds-color-hot-orange-sixty: hsl(
+        var(--tds-color-hot-orange-sixty-h),
+        var(--tds-color-hot-orange-sixty-s),
+        var(--tds-color-hot-orange-sixty-l)
+    );
+    --tds-color-hot-orange-eighty-h: 13;
+    --tds-color-hot-orange-eighty-s: 98%;
+    --tds-color-hot-orange-eighty-l: 82%;
+    --tds-color-hot-orange-eighty: hsl(
+        var(--tds-color-hot-orange-eighty-h),
+        var(--tds-color-hot-orange-eighty-s),
+        var(--tds-color-hot-orange-eighty-l)
+    );
+    --tds-color-hot-orange-ninety-h: 13;
+    --tds-color-hot-orange-ninety-s: 100%;
+    --tds-color-hot-orange-ninety-l: 92%;
+    --tds-color-hot-orange-ninety: hsl(
+        var(--tds-color-hot-orange-ninety-h),
+        var(--tds-color-hot-orange-ninety-s),
+        var(--tds-color-hot-orange-ninety-l)
+    );
+    --tds-color-teal-sixty-h: 176;
+    --tds-color-teal-sixty-s: 93%;
+    --tds-color-teal-sixty-l: 34%;
+    --tds-color-teal-sixty: hsl(
+        var(--tds-color-teal-sixty-h),
+        var(--tds-color-teal-sixty-s),
+        var(--tds-color-teal-sixty-l)
+    );
+    --tds-color-teal-eighty-h: 171;
+    --tds-color-teal-eighty-s: 59%;
+    --tds-color-teal-eighty-l: 65%;
+    --tds-color-teal-eighty: hsl(
+        var(--tds-color-teal-eighty-h),
+        var(--tds-color-teal-eighty-s),
+        var(--tds-color-teal-eighty-l)
+    );
+    --tds-color-teal-ninety-five-h: 167;
+    --tds-color-teal-ninety-five-s: 69%;
+    --tds-color-teal-ninety-five-l: 92%;
+    --tds-color-teal-ninety-five: hsl(
+        var(--tds-color-teal-ninety-five-h),
+        var(--tds-color-teal-ninety-five-s),
+        var(--tds-color-teal-ninety-five-l)
+    );
+    --tds-color-blue-sixty-h: 208;
+    --tds-color-blue-sixty-s: 100%;
+    --tds-color-blue-sixty-l: 55%;
+    --tds-color-blue-sixty: hsl(
+        var(--tds-color-blue-sixty-h),
+        var(--tds-color-blue-sixty-s),
+        var(--tds-color-blue-sixty-l)
+    );
+    --tds-color-blue-ninety-h: 207;
+    --tds-color-blue-ninety-s: 96%;
+    --tds-color-blue-ninety-l: 90%;
+    --tds-color-blue-ninety: hsl(
+        var(--tds-color-blue-ninety-h),
+        var(--tds-color-blue-ninety-s),
+        var(--tds-color-blue-ninety-l)
+    );
+    --tds-color-blue-ninety-five-h: 209;
+    --tds-color-blue-ninety-five-s: 100%;
+    --tds-color-blue-ninety-five-l: 96%;
+    --tds-color-blue-ninety-five: hsl(
+        var(--tds-color-blue-ninety-five-h),
+        var(--tds-color-blue-ninety-five-s),
+        var(--tds-color-blue-ninety-five-l)
+    );
+    --tds-color-theme-dark-h: 216;
+    --tds-color-theme-dark-s: 61%;
+    --tds-color-theme-dark-l: 22%;
+    --tds-color-theme-dark: hsl(
+        var(--tds-color-theme-dark-h),
+        var(--tds-color-theme-dark-s),
+        var(--tds-color-theme-dark-l)
+    );
+    --tds-color-theme-light-h: 0;
+    --tds-color-theme-light-s: 0%;
+    --tds-color-theme-light-l: 96%;
+    --tds-color-theme-light: hsl(
+        var(--tds-color-theme-light-h),
+        var(--tds-color-theme-light-s),
+        var(--tds-color-theme-light-l)
+    );
+    --tds-color-brand-h: 208;
+    --tds-color-brand-s: 100%;
+    --tds-color-brand-l: 41%;
+    --tds-color-brand: hsl(
+        var(--tds-color-brand-h),
+        var(--tds-color-brand-s),
+        var(--tds-color-brand-l)
+    );
+    --tds-color-success-h: 153;
+    --tds-color-success-s: 94%;
+    --tds-color-success-l: 26%;
+    --tds-color-success: hsl(
+        var(--tds-color-success-h),
+        var(--tds-color-success-s),
+        var(--tds-color-success-l)
+    );
+    --tds-color-destructive-h: 2;
+    --tds-color-destructive-s: 58%;
+    --tds-color-destructive-l: 48%;
+    --tds-color-destructive: hsl(
+        var(--tds-color-destructive-h),
+        var(--tds-color-destructive-s),
+        var(--tds-color-destructive-l)
+    );
+    --tds-color-important-h: 21;
+    --tds-color-important-s: 97%;
+    --tds-color-important-l: 52%;
+    --tds-color-important: hsl(
+        var(--tds-color-important-h),
+        var(--tds-color-important-s),
+        var(--tds-color-important-l)
+    );
+    --tds-font-size-xs: 12px;
+    --tds-font-size-sm: 14px;
+    --tds-font-size-md: 16px;
+    --tds-font-size-lg: 18px;
+    --tds-font-size-xl: 20px;
+    --tds-font-size-2xl: 24px;
+    --tds-font-size-3xl: 28px;
+    --tds-font-size-4xl: 32px;
+    --tds-font-size-5xl: 36px;
+    --tds-font-size-6xl: 40px;
+    --tds-font-size-7xl: 44px;
+    --tds-font-size-8xl: 48px;
+    --tds-radius-none: 0px;
+    --tds-radius-sm: 2px;
+    --tds-radius-md: 4px;
+    --tds-radius-lg: 8px;
+    --tds-radius-xl: 12px;
+    --tds-radius-full: 15984px;
+    --tds-shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.04);
+    --tds-shadow-sm: 0 1px 3px 1px rgba(0, 0, 0, 0.06);
+    --tds-shadow-md: 0 3px 7px 1px rgba(0, 0, 0, 0.08);
+    --tds-shadow-lg: 0 4px 14px 1px rgba(0, 0, 0, 0.1);
+    --tds-duration-xshort: 75ms;
+    --tds-duration-short: 150ms;
+    --tds-duration-normal: 250ms;
+    --tds-duration-long: 400ms;
+    --tds-duration-xlong: 600ms;
+    --tds-spacing-0: 0px;
+    --tds-spacing-1: 4px;
+    --tds-spacing-2: 8px;
+    --tds-spacing-3: 12px;
+    --tds-spacing-4: 16px;
+    --tds-spacing-5: 20px;
+    --tds-spacing-6: 24px;
+    --tds-spacing-8: 32px;
+    --tds-spacing-10: 40px;
+    --tds-spacing-12: 48px;
+    --tds-spacing-16: 64px;
+    --tds-spacing-20: 80px;
+    --tds-spacing-24: 96px;
+    --tds-spacing-32: 128px;
+    --tds-spacing-40: 160px;
+    --tds-spacing-48: 192px;
+    --tds-spacing-px: 16px;
+    --tds-breakpoint-sm: 30rem;
+    --tds-breakpoint-md: 48rem;
+    --tds-breakpoint-lg: 64rem;
+    --tds-line-height-none: 16px;
+    --tds-line-height-tight: 18px;
+    --tds-line-height-snug: 20.4px;
+    --tds-line-height-normal: 24px;
+    --tds-line-height-relaxed: 26px;
+    --tds-line-height-loose: 32px;
+    --tds-container-sm: 480px;
+    --tds-container-md: 768px;
+    --tds-container-lg: 1024px;
+    --tds-container-xl: 1280px;
+}
+:host {
+    font-family: 'Salesforce Sans';
+    font-size: var(--tds-font-md);
+}
+
+.theme--architect {
+    --tds-color-theme-dark: var(--tds-color-architect-dark);
+    --tds-color-theme-light: var(--tds-color-architect-light);
+    --tds-color-theme-bright: var(--tds-color-architect-bright);
+}
+.theme--commerce {
+    --tds-color-theme-dark: var(--tds-color-commerce-dark);
+    --tds-color-theme-light: var(--tds-color-commerce-light);
+}
+.theme--developer {
+    --tds-color-theme-dark: var(--tds-color-developer-dark);
+    --tds-color-theme-light: var(--tds-color-developer-light);
+}
+.theme--trailblazer {
+    --tds-color-theme-dark: var(--tds-color-trailblazer-dark);
+    --tds-color-theme-light: var(--tds-color-trailblazer-light);
+}
+.theme--admin {
+    --tds-color-theme-dark: var(--tds-color-admin-dark);
+    --tds-color-theme-light: var(--tds-color-admin-light);
+}
+.theme--careers {
+    --tds-color-theme-dark: var(--tds-color-careers-dark);
+    --tds-color-theme-light: var(--tds-color-careers-light);
+}
+.theme--starter {
+    --tds-color-theme-dark: var(--tds-color-starter-dark);
+    --tds-color-theme-light: var(--tds-color-starter-light);
+}
+.theme--work {
+    --tds-color-theme-dark: var(--tds-color-work-dark);
+    --tds-color-theme-light: var(--tds-color-work-light);
+}
+.theme--salesforce {
+    --tds-color-theme-dark: var(--tds-color-salesforce-dark);
+    --tds-color-theme-light: var(--tds-color-salesforce-light);
+}

package/src/modules/tds/themeProvider/themeProvider.html

@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>

package/src/modules/tds/themeProvider/themeProvider.ts

@@ -0,0 +1,37 @@
+import { api, LightningElement, wire } from 'lwc';
+
+import { ContextAdapter, ContextAdapterValue } from 'tds/contextAdapter';
+
+export default class extends LightningElement {
+    @api fonts = false;
+
+    @wire(ContextAdapter)
+    private context: ContextAdapterValue = null!;
+
+    private get assetsUrl() {
+        return this.context.assetsUrl;
+    }
+
+    connectedCallback() {
+        /* ROLLUP_PLATFORM
+    return;
+    */
+        if (this.fonts) appendStyleSheet(`${this.assetsUrl}/css/tds.css`);
+    }
+}
+
+function appendStyleSheet(href: string) {
+    let exists = Array.from(document.querySelectorAll('link')).some(
+        (n) => n.href === href
+    );
+    if (exists) return;
+    document.head.appendChild(
+        (() => {
+            let element = document.createElement('link');
+            element.href = href;
+            element.rel = 'stylesheet';
+            element.type = 'text/css';
+            return element;
+        })()
+    );
+}

package/src/modules/tds/tile/tile.css

@@ -0,0 +1,23 @@
+:host {
+    display: block;
+}
+
+.tile {
+    --radius: var(--tds-radius-lg);
+    border-radius: var(--radius);
+    box-shadow: var(--tds-shadow-sm);
+    padding: var(--tds-spacing-4);
+    padding-top: calc(var(--tds-spacing-4) + var(--border-width));
+    position: relative;
+}
+
+.tile::before {
+    background-color: var(--border-color);
+    border-radius: var(--radius) var(--radius) 0 0;
+    content: '';
+    height: var(--border-width);
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}

package/src/modules/tds/tile/tile.html

@@ -0,0 +1,5 @@
+<template>
+    <div class="tile" style={tileStyle}>
+        <slot></slot>
+    </div>
+</template>

package/src/modules/tds/tile/tile.stories.js

@@ -0,0 +1,14 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tds/tds-tile',
+    parameters: {
+        modules: ['/modules/tds-tile.js']
+    }
+};
+
+import { Base as SummaryBase } from '../summary/summary.stories';
+
+export const Base = () => html`
+    <tds-tile color="#bada55"> ${SummaryBase()} </tds-tile>
+`;

package/src/modules/tds/tile/tile.ts

@@ -0,0 +1,12 @@
+import { api, LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    @api color: string | null = null;
+
+    private get tileStyle() {
+        return [
+            `--border-color: ${this.color}`,
+            `--border-width: ${this.color ? 6 : 0}px`
+        ].join(';');
+    }
+}

package/src/modules/tds/xsfMfeEvents/xsfMfeEvents.html

@@ -0,0 +1 @@
+<template></template>

package/src/modules/tds/xsfMfeEvents/xsfMfeEvents.ts

@@ -0,0 +1,47 @@
+import { LightningElement } from 'lwc';
+import { track } from 'tds/instrumentation';
+
+export default class XsfMfeEvents extends LightningElement {
+    connectedCallback() {
+        document.addEventListener(
+            'www_spasearch',
+            this.handleSearch as EventListener
+        );
+        document.addEventListener('www_track', this.handleTrack as EventListener);
+        document.addEventListener('toggle_global_nav', this.handleToggleGlobalNav as EventListener);
+    }
+
+    disconnectedCallback() {
+        document.removeEventListener(
+            'www_spasearch',
+            this.handleSearch as EventListener
+        );
+        document.removeEventListener('www_track', this.handleTrack as EventListener);
+        document.removeEventListener('toggle_global_nav', this.handleToggleGlobalNav as EventListener);
+    }
+
+    handleSearch = ({ target, type, detail }: CustomEvent) => {
+        const searchTerm = detail?.searchTerm;
+        if (target) {
+            track(target, type, { searchTerm });
+        }
+        if (searchTerm) {
+            window.location.href = `/search/?keywords=${encodeURIComponent(
+                searchTerm
+            )}`;
+        }
+    };
+
+    handleTrack = ({ target, detail }: CustomEvent) => {
+        const { event: eventName, ...payload } = detail;
+        track(target as EventTarget, eventName, payload);
+    };
+
+    handleToggleGlobalNav = ({ detail }: CustomEvent) => {
+        const isVisible = detail;
+        document.documentElement?.style.setProperty(
+            '--dx-g-global-header-nav-row-count',
+            isVisible ? '2' : '1'
+        );
+    };
+}