@carbon/ibmdotcom-web-components 1.37.0-rc.2 → 1.37.0-rc.3

package/dist/ibmdotcom-web-components-dotcom-shell.js

@@ -39,6 +39,13 @@
  * subject to an additional IP rights grant found at
  * http://polymer.github.io/PATENTS.txt
  * 
+ * @carbon/motion:
+ * 
+ * Copyright IBM Corp. 2018, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ * 
  * js-cookie:
  * 
  * JavaScript Cookie v2.2.1
@@ -69,8 +76,8 @@
  */
 
 let process = { env: {} };
-import { l as lib, b as breakpoints, r as render, c as css, S as StableSelectorMixin, p as property, h as html, a as classMap, d as carbonElement, s as settings_1, e as settings$1, L as LitElement, f as svg, g as spread, B as BXDropdown, q as query, i as indexOf, j as forEach, k as svgResultCarbonIcon$9, m as svgResultCarbonIcon$a, n as ifDefined, o as findIndex, H as HostListenerMixin, t as state, u as HostListener, v as on, w as selectorTabbable, _ as _decorate$v, F as FocusMixin, x as svgResultCarbonIcon$b, y as ifNonNull, z as LINK_SIZE, A as BXLink, C as StickyHeader, V as ValidityMixin, D as FORM_ELEMENT_COLOR_SCHEME, E as FormMixin, G as root, I as toNumber, J as isObject, K as Cookies, M as LocaleAPI, N as spread$1, O as filter, P as _get$d, Q as _getPrototypeOf$d, R as DROPDOWN_SIZE$1, T as styles$d, U as LocaleAPI$1, W as globalInit, X as ConnectMixin, Y as store, Z as pickBy, $ as bindActionCreators, a0 as loadLanguage, a1 as setLanguage, a2 as loadLocaleList, a3 as setLocaleList, a4 as loadTranslation, a5 as setTranslation, a6 as _createClass$1, a7 as _asyncToGenerator, a8 as regenerator, a9 as axios, aa as _classCallCheck$1, ab as PROFILE_API_ACTION, ac as DDSMastheadComposite, ad as UNAUTHENTICATED_STATUS } from './masthead-composite-dfe1f02c.js';
-import { s as svgResultCarbonIcon$c } from './20-b13a7263.js';
+import { l as lib, b as breakpoints, r as render, c as css, S as StableSelectorMixin, p as property, h as html, a as classMap, d as carbonElement, s as settings_1, e as settings$1, L as LitElement, f as svg, g as spread, B as BXDropdown, q as query, i as indexOf, j as forEach, k as svgResultCarbonIcon$9, m as svgResultCarbonIcon$a, n as ifDefined, o as findIndex, H as HostListenerMixin, t as state, u as HostListener, v as on, w as selectorTabbable, _ as _decorate$v, F as FocusMixin, x as svgResultCarbonIcon$b, y as ifNonNull, z as LINK_SIZE, A as BXLink, C as StickyHeader, V as ValidityMixin, D as FORM_ELEMENT_COLOR_SCHEME, E as FormMixin, G as root, I as toNumber, J as isObject, K as Cookies, M as LocaleAPI, N as spread$1, O as filter, P as _get$d, Q as _getPrototypeOf$d, R as DROPDOWN_SIZE$1, T as styles$d, U as LocaleAPI$1, W as globalInit, X as ConnectMixin, Y as store, Z as pickBy, $ as bindActionCreators, a0 as loadLanguage, a1 as setLanguage, a2 as loadLocaleList, a3 as setLocaleList, a4 as loadTranslation, a5 as setTranslation, a6 as _createClass$1, a7 as _asyncToGenerator, a8 as regenerator, a9 as axios, aa as _classCallCheck$1, ab as PROFILE_API_ACTION, ac as DDSMastheadComposite, ad as UNAUTHENTICATED_STATUS } from './masthead-composite-e2535116.js';
+import { s as svgResultCarbonIcon$c } from './20-654642bf.js';
 
 function _defineProperty$5(obj, key, value) { key = _toPropertyKey$z(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey$z(arg) { var key = _toPrimitive$z(arg, "string"); return typeof key === "symbol" ? key : String(key); }
@@ -243,6 +250,11 @@ const ModalRenderMixin = Base => {
        * The render target of the modal.
        */
       _defineProperty$3(this, "modalRenderRoot", null);
+      /**
+       * Defines properties which should trigger modal renders. If none are specified,
+       * modal renders on any property update.
+       */
+      _defineProperty$3(this, "modalTriggerProps", []);
     }
     // Not using TypeScript `private` due to: microsoft/TypeScript#17744
 
@@ -310,11 +322,24 @@ const ModalRenderMixin = Base => {
       this._disconnectedAfterCreation = true;
     }
     update(changedProperties) {
+      const {
+        modalTriggerProps
+      } = this;
       // TODO: Figure out how to inherit `LitElement` for this mix-in class
       // @ts-ignore
       super.update(changedProperties);
       if (!this._disconnectedAfterCreation) {
-        this._createAndRenderModal();
+        if (modalTriggerProps.length > 0) {
+          // React only on updates to specified properties.
+          const changedPropNames = Array.from(changedProperties.keys());
+          const matches = modalTriggerProps.filter(prop => changedPropNames.includes(prop));
+          if (matches.length > 0) {
+            this._createAndRenderModal();
+          }
+        } else {
+          // React on every property update.
+          this._createAndRenderModal();
+        }
       }
     }
 
@@ -549,10 +574,10 @@ const svgResultCarbonIcon$8 = ({ children, ...attrs } = {}) =>
  * @exports ibmdotcom.settings
  * @type {object} Settings object
  * @property {string} [prefix=dds]
- * Carbon for IBM.com v1.52.0',
+ * Carbon for IBM.com v1.53.0',
  */
 var settings = {
-  version: 'Carbon for IBM.com v1.52.0',
+  version: 'Carbon for IBM.com v1.53.0',
   stablePrefix: 'dds'
 };
 
@@ -834,7 +859,7 @@ function _superPropBase$b(object, property) { while (!Object.prototype.hasOwnPro
 function _getPrototypeOf$b(o) { _getPrototypeOf$b = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf$b(o); }
 const {
   stablePrefix: ddsPrefix$s
-} = settings;
+} = settings$1;
 const {
   prefix: prefix$p
 } = settings_1;
@@ -1094,7 +1119,8 @@ let DDSComboBox = _decorate$s([carbonElement(`${ddsPrefix$s}-combo-box`)], funct
     }, {
       kind: "method",
       key: "updated",
-      value: function updated() {
+      value: function updated(changedProperties) {
+        _get$b(_getPrototypeOf$b(DDSComboBox.prototype), "updated", this).call(this, changedProperties);
         const {
           _listBoxNode: listBoxNode
         } = this;
@@ -1286,8 +1312,8 @@ let _$o = t => t,
   _t2$9,
   _t3$8,
   _t4$4;
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty$2(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty$2(obj, key, value) { key = _toPropertyKey$t(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _decorate$r(decorators, factory, superClass, mixins) { var api = _getDecoratorsApi$r(); if (mixins) { for (var i = 0; i < mixins.length; i++) { api = mixins[i](api); } } var r = factory(function initialize(O) { api.initializeInstanceElements(O, decorated.elements); }, superClass); var decorated = api.decorateClass(_coalesceClassElements$r(r.d.map(_createElementDescriptor$r)), decorators); api.initializeClassElements(r.F, decorated.elements); return api.runClassFinishers(r.F, decorated.finishers); }
 function _getDecoratorsApi$r() { _getDecoratorsApi$r = function () { return api; }; var api = { elementsDefinitionOrder: [["method"], ["field"]], initializeInstanceElements: function (O, elements) { ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { if (element.kind === kind && element.placement === "own") { this.defineClassElement(O, element); } }, this); }, this); }, initializeClassElements: function (F, elements) { var proto = F.prototype; ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { var placement = element.placement; if (element.kind === kind && (placement === "static" || placement === "prototype")) { var receiver = placement === "static" ? F : proto; this.defineClassElement(receiver, element); } }, this); }, this); }, defineClassElement: function (receiver, element) { var descriptor = element.descriptor; if (element.kind === "field") { var initializer = element.initializer; descriptor = { enumerable: descriptor.enumerable, writable: descriptor.writable, configurable: descriptor.configurable, value: initializer === void 0 ? void 0 : initializer.call(receiver) }; } Object.defineProperty(receiver, element.key, descriptor); }, decorateClass: function (elements, decorators) { var newElements = []; var finishers = []; var placements = { static: [], prototype: [], own: [] }; elements.forEach(function (element) { this.addElementPlacement(element, placements); }, this); elements.forEach(function (element) { if (!_hasDecorators$r(element)) return newElements.push(element); var elementFinishersExtras = this.decorateElement(element, placements); newElements.push(elementFinishersExtras.element); newElements.push.apply(newElements, elementFinishersExtras.extras); finishers.push.apply(finishers, elementFinishersExtras.finishers); }, this); if (!decorators) { return { elements: newElements, finishers: finishers }; } var result = this.decorateConstructor(newElements, decorators); finishers.push.apply(finishers, result.finishers); result.finishers = finishers; return result; }, addElementPlacement: function (element, placements, silent) { var keys = placements[element.placement]; if (!silent && keys.indexOf(element.key) !== -1) { throw new TypeError("Duplicated element (" + element.key + ")"); } keys.push(element.key); }, decorateElement: function (element, placements) { var extras = []; var finishers = []; for (var decorators = element.decorators, i = decorators.length - 1; i >= 0; i--) { var keys = placements[element.placement]; keys.splice(keys.indexOf(element.key), 1); var elementObject = this.fromElementDescriptor(element); var elementFinisherExtras = this.toElementFinisherExtras((0, decorators[i])(elementObject) || elementObject); element = elementFinisherExtras.element; this.addElementPlacement(element, placements); if (elementFinisherExtras.finisher) { finishers.push(elementFinisherExtras.finisher); } var newExtras = elementFinisherExtras.extras; if (newExtras) { for (var j = 0; j < newExtras.length; j++) { this.addElementPlacement(newExtras[j], placements); } extras.push.apply(extras, newExtras); } } return { element: element, finishers: finishers, extras: extras }; }, decorateConstructor: function (elements, decorators) { var finishers = []; for (var i = decorators.length - 1; i >= 0; i--) { var obj = this.fromClassDescriptor(elements); var elementsAndFinisher = this.toClassDescriptor((0, decorators[i])(obj) || obj); if (elementsAndFinisher.finisher !== undefined) { finishers.push(elementsAndFinisher.finisher); } if (elementsAndFinisher.elements !== undefined) { elements = elementsAndFinisher.elements; for (var j = 0; j < elements.length - 1; j++) { for (var k = j + 1; k < elements.length; k++) { if (elements[j].key === elements[k].key && elements[j].placement === elements[k].placement) { throw new TypeError("Duplicated element (" + elements[j].key + ")"); } } } } } return { elements: elements, finishers: finishers }; }, fromElementDescriptor: function (element) { var obj = { kind: element.kind, key: element.key, placement: element.placement, descriptor: element.descriptor }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); if (element.kind === "field") obj.initializer = element.initializer; return obj; }, toElementDescriptors: function (elementObjects) { if (elementObjects === undefined) return; return _toArray$r(elementObjects).map(function (elementObject) { var element = this.toElementDescriptor(elementObject); this.disallowProperty(elementObject, "finisher", "An element descriptor"); this.disallowProperty(elementObject, "extras", "An element descriptor"); return element; }, this); }, toElementDescriptor: function (elementObject) { var kind = String(elementObject.kind); if (kind !== "method" && kind !== "field") { throw new TypeError('An element descriptor\'s .kind property must be either "method" or' + ' "field", but a decorator created an element descriptor with' + ' .kind "' + kind + '"'); } var key = _toPropertyKey$t(elementObject.key); var placement = String(elementObject.placement); if (placement !== "static" && placement !== "prototype" && placement !== "own") { throw new TypeError('An element descriptor\'s .placement property must be one of "static",' + ' "prototype" or "own", but a decorator created an element descriptor' + ' with .placement "' + placement + '"'); } var descriptor = elementObject.descriptor; this.disallowProperty(elementObject, "elements", "An element descriptor"); var element = { kind: kind, key: key, placement: placement, descriptor: Object.assign({}, descriptor) }; if (kind !== "field") { this.disallowProperty(elementObject, "initializer", "A method descriptor"); } else { this.disallowProperty(descriptor, "get", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "set", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "value", "The property descriptor of a field descriptor"); element.initializer = elementObject.initializer; } return element; }, toElementFinisherExtras: function (elementObject) { var element = this.toElementDescriptor(elementObject); var finisher = _optionalCallableProperty$r(elementObject, "finisher"); var extras = this.toElementDescriptors(elementObject.extras); return { element: element, finisher: finisher, extras: extras }; }, fromClassDescriptor: function (elements) { var obj = { kind: "class", elements: elements.map(this.fromElementDescriptor, this) }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); return obj; }, toClassDescriptor: function (obj) { var kind = String(obj.kind); if (kind !== "class") { throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator' + ' created a class descriptor with .kind "' + kind + '"'); } this.disallowProperty(obj, "key", "A class descriptor"); this.disallowProperty(obj, "placement", "A class descriptor"); this.disallowProperty(obj, "descriptor", "A class descriptor"); this.disallowProperty(obj, "initializer", "A class descriptor"); this.disallowProperty(obj, "extras", "A class descriptor"); var finisher = _optionalCallableProperty$r(obj, "finisher"); var elements = this.toElementDescriptors(obj.elements); return { elements: elements, finisher: finisher }; }, runClassFinishers: function (constructor, finishers) { for (var i = 0; i < finishers.length; i++) { var newConstructor = (0, finishers[i])(constructor); if (newConstructor !== undefined) { if (typeof newConstructor !== "function") { throw new TypeError("Finishers must return a constructor."); } constructor = newConstructor; } } return constructor; }, disallowProperty: function (obj, name, objectType) { if (obj[name] !== undefined) { throw new TypeError(objectType + " can't have a ." + name + " property."); } } }; return api; }
@@ -1881,8 +1907,8 @@ let DDSExpressiveModal = _decorate$r([carbonElement(`${ddsPrefix$r}-expressive-m
             this.ownerDocument.body.style.overflow = 'hidden';
             this.removeAttribute('aria-hidden');
             this._launcher = this.ownerDocument.activeElement;
-            const primaryFocusNode = this.querySelector(this.constructor.selectorPrimaryFocus);
             await this._waitForTransitionEnd();
+            const primaryFocusNode = this.querySelector(this.constructor.selectorPrimaryFocus);
             if (primaryFocusNode) {
               // For cases where a `carbon-web-components` component (e.g. `<bx-btn>`) being `primaryFocusNode`,
               // where its first update/render cycle that makes it focusable happens after `<bx-modal>`'s first update/render cycle
@@ -2005,7 +2031,7 @@ let DDSExpressiveModal = _decorate$r([carbonElement(`${ddsPrefix$r}-expressive-m
             }
           }
         }
-        fallback === null || fallback === void 0 ? void 0 : fallback.focus();
+        fallback === null || fallback === void 0 || fallback.focus();
         return false;
       }
     }, {
@@ -2553,7 +2579,7 @@ let _$j = t => t,
   _t2$7,
   _t3$6,
   _t4$3,
-  _t5$2,
+  _t5$3,
   _t6$2,
   _t7$2;
 function _decorate$m(decorators, factory, superClass, mixins) { var api = _getDecoratorsApi$m(); if (mixins) { for (var i = 0; i < mixins.length; i++) { api = mixins[i](api); } } var r = factory(function initialize(O) { api.initializeInstanceElements(O, decorated.elements); }, superClass); var decorated = api.decorateClass(_coalesceClassElements$m(r.d.map(_createElementDescriptor$m)), decorators); api.initializeClassElements(r.F, decorated.elements); return api.runClassFinishers(r.F, decorated.finishers); }
@@ -2589,7 +2615,7 @@ const {
  * @slot regions-selector - The area for the regions selector.
  * @slot locales-selector - The area for the locales selector.
  */
-_decorate$m([carbonElement(`${ddsPrefix$m}-locale-modal`)], function (_initialize, _DDSExpressiveModal) {
+let DDSLocaleModal = _decorate$m([carbonElement(`${ddsPrefix$m}-locale-modal`)], function (_initialize, _DDSExpressiveModal) {
   class DDSLocaleModal extends _DDSExpressiveModal {
     constructor(...args) {
       super(...args);
@@ -2615,8 +2641,8 @@ _decorate$m([carbonElement(`${ddsPrefix$m}-locale-modal`)], function (_initializ
        * Handles `click` event on the back button.
        */
       function _handleClickBackButton(e) {
-        this._currentRegion = undefined;
         e.preventDefault();
+        this._currentRegion = undefined;
       }
 
       /**
@@ -2644,6 +2670,41 @@ _decorate$m([carbonElement(`${ddsPrefix$m}-locale-modal`)], function (_initializ
         this._currentRegion = undefined;
       }
 
+      /**
+       * Sets focus on primary selectable element.
+       */
+    }, {
+      kind: "method",
+      key: "_setPrimaryFocus",
+      value: async function _setPrimaryFocus() {
+        const {
+          selectorPrimaryFocus
+        } = DDSLocaleModal;
+        const focusTarget = this.querySelector(selectorPrimaryFocus);
+        if (focusTarget) {
+          focusTarget.tabIndex = 0;
+          focusTarget.focus();
+        }
+      }
+
+      /**
+       * Sets focus on locale selector search.
+       */
+    }, {
+      kind: "method",
+      key: "_setSearchFocus",
+      value: async function _setSearchFocus() {
+        const {
+          selectorLocaleSearch
+        } = DDSLocaleModal;
+        await this.updateComplete;
+        const localeSearch = this.querySelector(selectorLocaleSearch);
+        if (localeSearch) {
+          localeSearch.reset();
+          localeSearch.focus();
+        }
+      }
+
       /**
        * @returns The heading content for the region selector page.
        */
@@ -2720,7 +2781,7 @@ _decorate$m([carbonElement(`${ddsPrefix$m}-locale-modal`)], function (_initializ
         const {
           _handleClickRegionSelector: handleClickRegionSelector
         } = this;
-        return html(_t5$2 || (_t5$2 = _$j`
+        return html(_t5$3 || (_t5$3 = _$j`
       <div
         class="${0}--modal-content ${0}--locale-modal"
         @click="${0}">
@@ -2814,6 +2875,17 @@ _decorate$m([carbonElement(`${ddsPrefix$m}-locale-modal`)], function (_initializ
       value: async function updated(changedProperties) {
         _get$8(_getPrototypeOf$8(DDSLocaleModal.prototype), "updated", this).call(this, changedProperties);
         if (changedProperties.has('_currentRegion')) {
+          // Allow listening components to update their state.
+          this.dispatchEvent(new CustomEvent(this.constructor.eventRegionUpdated, {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            detail: {
+              region: this._currentRegion
+            }
+          }));
+
+          // Pass state to search element.
           const {
             selectorLocaleSearch
           } = this.constructor;
@@ -2821,23 +2893,19 @@ _decorate$m([carbonElement(`${ddsPrefix$m}-locale-modal`)], function (_initializ
           if (localeSearch) {
             var _this$_currentRegion;
             localeSearch.region = (_this$_currentRegion = this._currentRegion) !== null && _this$_currentRegion !== void 0 ? _this$_currentRegion : '';
-            if (this.open) {
-              localeSearch.reset();
-              localeSearch.focus();
-            }
           }
 
-          // re-focus on first region-item when navigating back to the first modal pane
-          const {
-            selectorPrimaryFocus
-          } = this.constructor;
-          const activeRegion = this.querySelector(selectorPrimaryFocus);
-          if (activeRegion && this.open) {
-            activeRegion.tabIndex = 0;
-            activeRegion.focus();
-          }
+          // Set element focus.
+          this._currentRegion ? this._setSearchFocus() : this._setPrimaryFocus();
         }
       }
+    }, {
+      kind: "get",
+      static: true,
+      key: "stableSelector",
+      value: function stableSelector() {
+        return `${ddsPrefix$m}--locale-modal`;
+      }
 
       /**
        * A selector selecting the locale search UI.
@@ -2863,13 +2931,6 @@ _decorate$m([carbonElement(`${ddsPrefix$m}-locale-modal`)], function (_initializ
       ${ddsPrefix$m}-region-item
     `;
       }
-    }, {
-      kind: "get",
-      static: true,
-      key: "stableSelector",
-      value: function stableSelector() {
-        return `${ddsPrefix$m}--locale-modal`;
-      }
 
       /**
        * A selector selecting tabbable nodes.
@@ -2888,6 +2949,17 @@ _decorate$m([carbonElement(`${ddsPrefix$m}-locale-modal`)], function (_initializ
       ${ddsPrefix$m}-locale-item
     `;
       }
+
+      /**
+       * Name for event fired when a region is selected.
+       */
+    }, {
+      kind: "get",
+      static: true,
+      key: "eventRegionUpdated",
+      value: function eventRegionUpdated() {
+        return `${ddsPrefix$m}-locale-modal-region-updated`;
+      }
     }, {
       kind: "field",
       static: true,
@@ -3428,6 +3500,15 @@ _decorate$v([carbonElement(`${prefix$i}-input`)], function (_initialize, _Validi
       value() {
         return '';
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true
+      })],
+      key: "value",
+      value() {
+        return '';
+      }
     }, {
       kind: "method",
       key: "_handleInput",
@@ -3440,6 +3521,10 @@ _decorate$v([carbonElement(`${prefix$i}-input`)], function (_initialize, _Validi
        * The internal value.
        */
 
+      /**
+       * Set initial value of input
+       */
+
       /**
        * Handles `oninput` event on the `<input>`.
        *
@@ -3653,11 +3738,8 @@ _decorate$v([carbonElement(`${prefix$i}-input`)], function (_initialize, _Validi
         return '';
       }
     }, {
-      kind: "get",
-      decorators: [property({
-        reflect: true
-      })],
-      key: "value",
+      kind: "method",
+      key: "createRenderRoot",
       value:
       /**
        * Sets the input to be focussed automatically on page load. Defaults to false
@@ -3721,36 +3803,7 @@ _decorate$v([carbonElement(`${prefix$i}-input`)], function (_initialize, _Validi
       /**
        * The validity message. If present and non-empty, this input shows the UI of its invalid state.
        */
-      /**
-       * The value of the input.
-       */
-      function value() {
-        // FIXME: Figure out how to deal with TS2611
-        // once we have the input we can directly query for the value
-        if (this._input) {
-          return this._input.value;
-        }
-        // but before then _value will work fine
-        return this._value;
-      }
-    }, {
-      kind: "set",
-      key: "value",
-      value: function value(_value) {
-        const oldValue = this._value;
-        this._value = _value;
-        // make sure that lit-element updates the right properties
-        this.requestUpdate('value', oldValue);
-        // we set the value directly on the input (when available)
-        // so that programatic manipulation updates the UI correctly
-        if (this._input) {
-          this._input.value = _value;
-        }
-      }
-    }, {
-      kind: "method",
-      key: "createRenderRoot",
-      value: function createRenderRoot() {
+      function createRenderRoot() {
         var _exec;
         return this.attachShadow({
           mode: 'open',
@@ -4659,7 +4712,7 @@ const ThrottledInputMixin = Base => {
      */
     _invokeHandleThrottledInput(event) {
       var _this$_throttledHandl;
-      (_this$_throttledHandl = this._throttledHandleInput) === null || _this$_throttledHandl === void 0 ? void 0 : _this$_throttledHandl.call(this, event);
+      (_this$_throttledHandl = this._throttledHandleInput) === null || _this$_throttledHandl === void 0 || _this$_throttledHandl.call(this, event);
     }
 
     /**
@@ -4874,7 +4927,6 @@ _decorate$i([carbonElement(`${ddsPrefix$i}-locale-search`)], function (_initiali
           region: currentRegion,
           _liveRegion: liveRegion
         } = this;
-        let hasMatch = false;
         let count = 0;
         forEach(this.querySelectorAll(selectorItem), item => {
           const {
@@ -4884,12 +4936,11 @@ _decorate$i([carbonElement(`${ddsPrefix$i}-locale-search`)], function (_initiali
           } = item;
           const matches = region === currentRegion && search([country, language], searchText);
           if (matches) {
-            hasMatch = true;
             count++;
           }
           item.hidden = !matches;
         });
-        this._hasAvailableItem = hasMatch;
+        this._hasAvailableItem = count > 0;
         if (liveRegion) {
           const announcement = count === 1 ? `${count} result` : `${count} results`;
           liveRegion.innerText = announcement;
@@ -5151,7 +5202,7 @@ _decorate$i([carbonElement(`${ddsPrefix$i}-locale-search`)], function (_initiali
   };
 }, ThrottledInputMixin(StableSelectorMixin(LitElement)));
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey$i(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -5398,7 +5449,8 @@ let _$c = t => t,
   _t$c,
   _t2$4,
   _t3$3,
-  _t4$2;
+  _t4$2,
+  _t5$2;
 function _decorate$g(decorators, factory, superClass, mixins) { var api = _getDecoratorsApi$g(); if (mixins) { for (var i = 0; i < mixins.length; i++) { api = mixins[i](api); } } var r = factory(function initialize(O) { api.initializeInstanceElements(O, decorated.elements); }, superClass); var decorated = api.decorateClass(_coalesceClassElements$g(r.d.map(_createElementDescriptor$g)), decorators); api.initializeClassElements(r.F, decorated.elements); return api.runClassFinishers(r.F, decorated.finishers); }
 function _getDecoratorsApi$g() { _getDecoratorsApi$g = function () { return api; }; var api = { elementsDefinitionOrder: [["method"], ["field"]], initializeInstanceElements: function (O, elements) { ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { if (element.kind === kind && element.placement === "own") { this.defineClassElement(O, element); } }, this); }, this); }, initializeClassElements: function (F, elements) { var proto = F.prototype; ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { var placement = element.placement; if (element.kind === kind && (placement === "static" || placement === "prototype")) { var receiver = placement === "static" ? F : proto; this.defineClassElement(receiver, element); } }, this); }, this); }, defineClassElement: function (receiver, element) { var descriptor = element.descriptor; if (element.kind === "field") { var initializer = element.initializer; descriptor = { enumerable: descriptor.enumerable, writable: descriptor.writable, configurable: descriptor.configurable, value: initializer === void 0 ? void 0 : initializer.call(receiver) }; } Object.defineProperty(receiver, element.key, descriptor); }, decorateClass: function (elements, decorators) { var newElements = []; var finishers = []; var placements = { static: [], prototype: [], own: [] }; elements.forEach(function (element) { this.addElementPlacement(element, placements); }, this); elements.forEach(function (element) { if (!_hasDecorators$g(element)) return newElements.push(element); var elementFinishersExtras = this.decorateElement(element, placements); newElements.push(elementFinishersExtras.element); newElements.push.apply(newElements, elementFinishersExtras.extras); finishers.push.apply(finishers, elementFinishersExtras.finishers); }, this); if (!decorators) { return { elements: newElements, finishers: finishers }; } var result = this.decorateConstructor(newElements, decorators); finishers.push.apply(finishers, result.finishers); result.finishers = finishers; return result; }, addElementPlacement: function (element, placements, silent) { var keys = placements[element.placement]; if (!silent && keys.indexOf(element.key) !== -1) { throw new TypeError("Duplicated element (" + element.key + ")"); } keys.push(element.key); }, decorateElement: function (element, placements) { var extras = []; var finishers = []; for (var decorators = element.decorators, i = decorators.length - 1; i >= 0; i--) { var keys = placements[element.placement]; keys.splice(keys.indexOf(element.key), 1); var elementObject = this.fromElementDescriptor(element); var elementFinisherExtras = this.toElementFinisherExtras((0, decorators[i])(elementObject) || elementObject); element = elementFinisherExtras.element; this.addElementPlacement(element, placements); if (elementFinisherExtras.finisher) { finishers.push(elementFinisherExtras.finisher); } var newExtras = elementFinisherExtras.extras; if (newExtras) { for (var j = 0; j < newExtras.length; j++) { this.addElementPlacement(newExtras[j], placements); } extras.push.apply(extras, newExtras); } } return { element: element, finishers: finishers, extras: extras }; }, decorateConstructor: function (elements, decorators) { var finishers = []; for (var i = decorators.length - 1; i >= 0; i--) { var obj = this.fromClassDescriptor(elements); var elementsAndFinisher = this.toClassDescriptor((0, decorators[i])(obj) || obj); if (elementsAndFinisher.finisher !== undefined) { finishers.push(elementsAndFinisher.finisher); } if (elementsAndFinisher.elements !== undefined) { elements = elementsAndFinisher.elements; for (var j = 0; j < elements.length - 1; j++) { for (var k = j + 1; k < elements.length; k++) { if (elements[j].key === elements[k].key && elements[j].placement === elements[k].placement) { throw new TypeError("Duplicated element (" + elements[j].key + ")"); } } } } } return { elements: elements, finishers: finishers }; }, fromElementDescriptor: function (element) { var obj = { kind: element.kind, key: element.key, placement: element.placement, descriptor: element.descriptor }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); if (element.kind === "field") obj.initializer = element.initializer; return obj; }, toElementDescriptors: function (elementObjects) { if (elementObjects === undefined) return; return _toArray$g(elementObjects).map(function (elementObject) { var element = this.toElementDescriptor(elementObject); this.disallowProperty(elementObject, "finisher", "An element descriptor"); this.disallowProperty(elementObject, "extras", "An element descriptor"); return element; }, this); }, toElementDescriptor: function (elementObject) { var kind = String(elementObject.kind); if (kind !== "method" && kind !== "field") { throw new TypeError('An element descriptor\'s .kind property must be either "method" or' + ' "field", but a decorator created an element descriptor with' + ' .kind "' + kind + '"'); } var key = _toPropertyKey$g(elementObject.key); var placement = String(elementObject.placement); if (placement !== "static" && placement !== "prototype" && placement !== "own") { throw new TypeError('An element descriptor\'s .placement property must be one of "static",' + ' "prototype" or "own", but a decorator created an element descriptor' + ' with .placement "' + placement + '"'); } var descriptor = elementObject.descriptor; this.disallowProperty(elementObject, "elements", "An element descriptor"); var element = { kind: kind, key: key, placement: placement, descriptor: Object.assign({}, descriptor) }; if (kind !== "field") { this.disallowProperty(elementObject, "initializer", "A method descriptor"); } else { this.disallowProperty(descriptor, "get", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "set", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "value", "The property descriptor of a field descriptor"); element.initializer = elementObject.initializer; } return element; }, toElementFinisherExtras: function (elementObject) { var element = this.toElementDescriptor(elementObject); var finisher = _optionalCallableProperty$g(elementObject, "finisher"); var extras = this.toElementDescriptors(elementObject.extras); return { element: element, finisher: finisher, extras: extras }; }, fromClassDescriptor: function (elements) { var obj = { kind: "class", elements: elements.map(this.fromElementDescriptor, this) }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); return obj; }, toClassDescriptor: function (obj) { var kind = String(obj.kind); if (kind !== "class") { throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator' + ' created a class descriptor with .kind "' + kind + '"'); } this.disallowProperty(obj, "key", "A class descriptor"); this.disallowProperty(obj, "placement", "A class descriptor"); this.disallowProperty(obj, "descriptor", "A class descriptor"); this.disallowProperty(obj, "initializer", "A class descriptor"); this.disallowProperty(obj, "extras", "A class descriptor"); var finisher = _optionalCallableProperty$g(obj, "finisher"); var elements = this.toElementDescriptors(obj.elements); return { elements: elements, finisher: finisher }; }, runClassFinishers: function (constructor, finishers) { for (var i = 0; i < finishers.length; i++) { var newConstructor = (0, finishers[i])(constructor); if (newConstructor !== undefined) { if (typeof newConstructor !== "function") { throw new TypeError("Finishers must return a constructor."); } constructor = newConstructor; } } return constructor; }, disallowProperty: function (obj, name, objectType) { if (obj[name] !== undefined) { throw new TypeError(objectType + " can't have a ." + name + " property."); } } }; return api; }
 function _createElementDescriptor$g(def) { var key = _toPropertyKey$g(def.key); var descriptor; if (def.kind === "method") { descriptor = { value: def.value, writable: true, configurable: true, enumerable: false }; } else if (def.kind === "get") { descriptor = { get: def.value, configurable: true, enumerable: false }; } else if (def.kind === "set") { descriptor = { set: def.value, configurable: true, enumerable: false }; } else if (def.kind === "field") { descriptor = { configurable: true, writable: true, enumerable: true }; } var element = { kind: def.kind === "field" ? "field" : "method", key: key, placement: def.static ? "static" : def.kind === "field" ? "own" : "prototype", descriptor: descriptor }; if (def.decorators) element.decorators = def.decorators; if (def.kind === "field") element.initializer = def.value; return element; }
@@ -5424,8 +5476,8 @@ const {
  *
  * @element dds-locale-modal-composite
  */
-_decorate$g([carbonElement(`${ddsPrefix$g}-locale-modal-composite`)], function (_initialize, _HybridRenderMixin) {
-  class DDSLocaleModalComposite extends _HybridRenderMixin {
+_decorate$g([carbonElement(`${ddsPrefix$g}-locale-modal-composite`)], function (_initialize, _HostListenerMixin) {
+  class DDSLocaleModalComposite extends _HostListenerMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
@@ -5493,9 +5545,15 @@ _decorate$g([carbonElement(`${ddsPrefix$g}-locale-modal-composite`)], function (
       value() {
         return false;
       }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "chosenRegion",
+      value: void 0
     }, {
       kind: "method",
-      key: "getLangDisplay",
+      decorators: [HostListener(DDSLocaleModal.eventRegionUpdated)],
+      key: "_handleRegionUpdatedEvent",
       value:
       /**
        * The g11n collator to use for sorting contry names.
@@ -5512,8 +5570,18 @@ _decorate$g([carbonElement(`${ddsPrefix$g}-locale-modal-composite`)], function (
       /**
        * `true` to open the modal.
        */
+      /**
+       * The region chosen by user.
+       */
+      function _handleRegionUpdatedEvent(event) {
+        this.chosenRegion = event.detail.region || undefined;
+      }
+
       // eslint-disable-next-line class-methods-use-this
-      async function getLangDisplay() {
+    }, {
+      kind: "method",
+      key: "getLangDisplay",
+      value: async function getLangDisplay() {
         const response = await LocaleAPI.getLangDisplay();
         return response;
       }
@@ -5527,9 +5595,9 @@ _decorate$g([carbonElement(`${ddsPrefix$g}-locale-modal-composite`)], function (
         } = this;
         if (language) {
           var _this$_setLanguage;
-          (_this$_setLanguage = this._setLanguage) === null || _this$_setLanguage === void 0 ? void 0 : _this$_setLanguage.call(this, language);
+          (_this$_setLanguage = this._setLanguage) === null || _this$_setLanguage === void 0 || _this$_setLanguage.call(this, language);
         }
-        (_this$_loadLocaleList = this._loadLocaleList) === null || _this$_loadLocaleList === void 0 ? void 0 : _this$_loadLocaleList.call(this, language);
+        (_this$_loadLocaleList = this._loadLocaleList) === null || _this$_loadLocaleList === void 0 || _this$_loadLocaleList.call(this, language);
         this.getLangDisplay().then(res => {
           this.langDisplay = res;
         });
@@ -5544,8 +5612,8 @@ _decorate$g([carbonElement(`${ddsPrefix$g}-locale-modal-composite`)], function (
         if (changedProperties.has('language')) {
           if (language) {
             var _this$_setLanguage2, _this$_loadLocaleList2;
-            (_this$_setLanguage2 = this._setLanguage) === null || _this$_setLanguage2 === void 0 ? void 0 : _this$_setLanguage2.call(this, language);
-            (_this$_loadLocaleList2 = this._loadLocaleList) === null || _this$_loadLocaleList2 === void 0 ? void 0 : _this$_loadLocaleList2.call(this, language).catch(() => {}); // The error is logged in the Redux store
+            (_this$_setLanguage2 = this._setLanguage) === null || _this$_setLanguage2 === void 0 || _this$_setLanguage2.call(this, language);
+            (_this$_loadLocaleList2 = this._loadLocaleList) === null || _this$_loadLocaleList2 === void 0 || _this$_loadLocaleList2.call(this, language).catch(() => {}); // The error is logged in the Redux store
           }
         }
       }
@@ -5554,6 +5622,7 @@ _decorate$g([carbonElement(`${ddsPrefix$g}-locale-modal-composite`)], function (
       key: "renderLightDOM",
       value: function renderLightDOM() {
         const {
+          chosenRegion,
           langDisplay,
           localeList,
           open
@@ -5609,6 +5678,7 @@ _decorate$g([carbonElement(`${ddsPrefix$g}-locale-modal-composite`)], function (
         <dds-regions title="${0}">
           ${0}
         </dds-regions>
+
         <dds-locale-search
           close-button-assistive-text="${0}"
           label-text="${0}"
@@ -5622,34 +5692,41 @@ _decorate$g([carbonElement(`${ddsPrefix$g}-locale-modal-composite`)], function (
           countryList,
           name
         }) => {
+          const isInvalid = countryList.length === 0 || (massagedCountryList === null || massagedCountryList === void 0 ? void 0 : massagedCountryList.find(({
+            region
+          }) => region === name)) === undefined;
           return html(_t2$4 || (_t2$4 = _$c`
               <dds-region-item
                 ?invalid="${0}"
                 name="${0}"></dds-region-item>
-            `), countryList.length === 0 || (massagedCountryList === null || massagedCountryList === void 0 ? void 0 : massagedCountryList.find(({
-            region
-          }) => region === name)) === undefined, name);
-        }), ifNonNull(searchClearText), ifNonNull(searchLabel), ifNonNull(searchPlaceholder), ifNonNull(availabilityText), ifNonNull(unavailabilityText), massagedCountryList === null || massagedCountryList === void 0 ? void 0 : massagedCountryList.map(({
+            `), isInvalid, name);
+        }), ifNonNull(searchClearText), ifNonNull(searchLabel), ifNonNull(searchPlaceholder), ifNonNull(availabilityText), ifNonNull(unavailabilityText), chosenRegion ? html(_t3$3 || (_t3$3 = _$c`
+                ${0}
+              `), massagedCountryList === null || massagedCountryList === void 0 ? void 0 : massagedCountryList.filter(({
+          region
+        }) => {
+          return region === chosenRegion;
+        }).map(({
           country,
           href,
           language,
           locale,
           region
-        }) => html(_t3$3 || (_t3$3 = _$c`
-              <dds-locale-item
-                country="${0}"
-                href="${0}"
-                language="${0}"
-                locale="${0}"
-                region="${0}">
-              </dds-locale-item>
-            `), country, href, language, locale, region)));
+        }) => html(_t4$2 || (_t4$2 = _$c`
+                      <dds-locale-item
+                        country="${0}"
+                        href="${0}"
+                        language="${0}"
+                        locale="${0}"
+                        region="${0}">
+                      </dds-locale-item>
+                    `), country, href, language, locale, region))) : ``);
       }
     }, {
       kind: "method",
       key: "render",
       value: function render() {
-        return html(_t4$2 || (_t4$2 = _$c` <slot></slot> `));
+        return html(_t5$2 || (_t5$2 = _$c` <slot></slot> `));
       }
     }, {
       kind: "field",
@@ -5660,7 +5737,7 @@ _decorate$g([carbonElement(`${ddsPrefix$g}-locale-modal-composite`)], function (
       }
     }]
   };
-}, HybridRenderMixin(LitElement));
+}, HostListenerMixin(HybridRenderMixin(LitElement)));
 
 var IBM8BarLogoH65White = ({ children, ...attrs } = {}) => svg`<svg focusable="false" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ...="${spread$1(attrs)}" width="157" height="65" viewBox="0 0 157 65" aria-hidden="true">${children}<path d="M30.4436498,60.2076728 L30.4436498,64.2376746 L-2.91322522e-13,64.2376746 L-2.91322522e-13,60.2076728 L30.4436498,60.2076728 Z M108.735358,60.2067171 L108.735358,64.2376746 L86.9826603,64.2376746 L86.9826603,60.2067171 L108.735358,60.2067171 Z M156.592795,60.2067171 L156.592795,64.2376746 L134.840096,64.2376746 L134.840096,60.2067171 L156.592795,60.2067171 Z M123.176704,60.2067171 L121.779475,64.2376746 L120.398188,60.2067171 L123.176704,60.2067171 Z M34.7933454,60.2078639 L77.5682441,60.2078639 C74.7705526,62.6327259 71.1773563,64.1319583 67.2410591,64.2324704 L66.8180207,64.2378657 L34.7933454,64.2378657 L34.7933454,60.2078639 L77.5682441,60.2078639 Z M30.4436498,51.7462936 L30.4436498,55.7762954 L-2.91322522e-13,55.7762954 L-2.91322522e-13,51.7462936 L30.4436498,51.7462936 Z M82.8448933,51.7469625 C82.5134031,52.9954078 82.0440654,54.1860508 81.4563549,55.3022459 L81.1972884,55.7760087 L34.7933454,55.7760087 L34.7933454,51.7469625 L82.8448933,51.7469625 Z M156.592795,51.742471 L156.592795,55.7734284 L134.840096,55.7734284 L134.840096,51.742471 L156.592795,51.742471 Z M108.735358,51.742471 L108.735358,55.7734284 L86.9826603,55.7734284 L86.9826603,51.742471 L108.735358,51.742471 Z M126.109666,51.7420887 L124.712437,55.7730462 L118.86283,55.7730462 L117.466539,51.7420887 L126.109666,51.7420887 Z M21.7451962,43.2849144 L21.7451962,47.3149162 L8.69751584,47.3149162 L8.69751584,43.2849144 L21.7451962,43.2849144 Z M82.940355,43.2851055 C83.2119472,44.4164829 83.378718,45.588834 83.4161671,46.7957568 L83.4242276,47.3151073 L68.7955217,47.3151073 L68.7955217,43.2851055 L82.940355,43.2851055 Z M56.5390105,43.2849144 L56.5390105,47.3149162 L43.4913301,47.3149162 L43.4913301,43.2849144 L56.5390105,43.2849144 Z M129.041034,43.2784159 L127.644742,47.3084177 L115.930525,47.3084177 L114.534234,43.2784159 L129.041034,43.2784159 Z M147.891528,43.2782248 L147.891528,47.3082266 L134.840096,47.3082266 L134.840096,43.2782248 L147.891528,43.2782248 Z M108.735358,43.2782248 L108.735358,47.3082266 L95.6839271,47.3082266 L95.6839271,43.2782248 L108.735358,43.2782248 Z M21.7451962,34.8235352 L21.7451962,38.853537 L8.69751584,38.853537 L8.69751584,34.8235352 L21.7451962,34.8235352 Z M77.8615684,34.8232485 C78.9907919,35.873419 79.9779764,37.0776317 80.7882576,38.4059297 L81.0517515,38.8532503 L43.4916115,38.8532503 L43.4916115,34.8232485 L77.8615684,34.8232485 Z M108.735358,34.8139786 L108.735358,38.8449361 L95.6839271,38.8449361 L95.6839271,34.8139786 L108.735358,34.8139786 Z M147.891528,34.8139786 L147.891528,38.8449361 L134.840096,38.8449361 L134.840096,34.8139786 L147.891528,34.8139786 Z M131.973433,34.8136919 L130.577142,38.8446494 L112.998313,38.8446494 L111.602022,34.8136919 L131.973433,34.8136919 Z M81.1948503,26.3623471 C80.4234674,27.7178498 79.472067,28.9518216 78.3755133,30.0356991 L78.0046671,30.3913933 L43.4912364,30.3913933 L43.4912364,26.3623471 L81.1948503,26.3623471 Z M21.7451962,26.362156 L21.7451962,30.3912022 L8.69751584,30.3912022 L8.69751584,26.362156 L21.7451962,26.362156 Z M147.891528,26.3490635 L147.891528,30.380021 L134.840096,30.380021 L134.839345,26.5412738 L133.509447,30.380021 L122.054045,30.380021 L123.426893,26.3490635 L147.891528,26.3490635 Z M120.148562,26.3492547 L121.52141,30.3802121 L110.06507,30.3802121 L108.735358,26.5413415 L108.735358,30.3802121 L95.6839271,30.3802121 L95.6839271,26.3492547 L120.148562,26.3492547 Z M21.7451962,17.9007768 L21.7451962,21.9307786 L8.69751584,21.9307786 L8.69751584,17.9007768 L21.7451962,17.9007768 Z M83.4242276,17.900299 C83.4242276,19.1161325 83.2914058,20.2997723 83.0502626,21.4428957 L82.940355,21.9303008 L68.7955217,21.9303008 L68.7955217,17.900299 L83.4242276,17.900299 Z M56.5390105,17.8998212 L56.5390105,21.929823 L43.4913301,21.929823 L43.4913301,17.8998212 L56.5390105,17.8998212 Z M147.891434,17.8846262 L147.891434,21.9155837 L124.936556,21.9155837 L126.307529,17.8846262 L147.891434,17.8846262 Z M117.266988,17.8844351 L118.638898,21.9153926 L95.6840208,21.9153926 L95.6840208,17.8844351 L117.266988,17.8844351 Z M30.4436498,9.43844199 L30.4436498,13.4684438 L-2.91322522e-13,13.4684438 L-2.91322522e-13,9.43844199 L30.4436498,9.43844199 Z M81.197476,9.43844199 C81.8186099,10.5338628 82.324153,11.7053777 82.6946307,12.9369814 L82.8450809,13.4684438 L34.793533,13.4684438 L34.793533,9.43844199 L81.197476,9.43844199 Z M156.593451,9.41971113 L156.593451,13.4506686 L127.817099,13.4506686 L129.189946,9.41971113 L156.593451,9.41971113 Z M114.385696,9.41999783 L115.757606,13.4509553 L86.9821914,13.4509553 L86.9821914,9.41999783 L114.385696,9.41999783 Z M30.4436498,0.978018462 L30.4436498,5.00706462 L-2.91322522e-13,5.00706462 L-2.91322522e-13,0.978018462 L30.4436498,0.978018462 Z M66.818302,0.977540633 C70.7785294,0.977540633 74.4118131,2.3931571 77.2657493,4.75043913 L77.5685254,5.00658679 L34.7936268,5.00658679 L34.7936268,0.977540633 L66.818302,0.977540633 Z M156.592607,0.956229502 L156.592607,4.98718697 L130.69886,4.98718697 L132.07077,0.956229502 L156.592607,0.956229502 Z M111.495495,0.955273846 L112.867405,4.98527566 L86.9820976,4.98527566 L86.9820976,0.955273846 L111.495495,0.955273846 Z"></path></svg>`;
 
@@ -6678,7 +6755,6 @@ const {
  * The API for language selection is still subject to change.
  *
  * @element dds-language-selector-desktop
- * @internal
  */
 _decorate$7([carbonElement(`${ddsPrefix$7}-language-selector-desktop`)], function (_initialize, _HostListenerMixin) {
   class DDSLanguageSelectorDesktop extends _HostListenerMixin {
@@ -6824,9 +6900,8 @@ _decorate$7([carbonElement(`${ddsPrefix$7}-language-selector-desktop`)], functio
       /**
        * The shadow slot this language-selector should be in.
        */
-      // @ts-ignore
       function updated(changedProperties) {
-        _get$2(_getPrototypeOf$2(DDSLanguageSelectorDesktop.prototype), "updated", this).call(this);
+        _get$2(_getPrototypeOf$2(DDSLanguageSelectorDesktop.prototype), "updated", this).call(this, changedProperties);
         if (changedProperties.has('value')) {
           this._lastValidLang = this.value;
         }
@@ -7402,7 +7477,6 @@ const {
  * The API for language selection is still subject to change.
  *
  * @element dds-language-selector-mobile
- * @internal
  */
 _decorate$6([carbonElement(`${ddsPrefix$6}-language-selector-mobile`)], function (_initialize, _BXSelect) {
   class DDSLanguageSelectorMobile extends _BXSelect {
@@ -7661,6 +7735,14 @@ _decorate$v([carbonElement(`${prefix$1}-select-item`)], function (_initialize, _
   };
 }, LitElement);
 
+/**
+ * Copyright IBM Corp. 2018, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var moderate02 = '240ms';
+
 let _$2 = t => t,
   _t$2,
   _t2,
@@ -7673,7 +7755,8 @@ let _$2 = t => t,
   _t9,
   _t10,
   _t11,
-  _t12;
+  _t12,
+  _t13;
 function _decorate$5(decorators, factory, superClass, mixins) { var api = _getDecoratorsApi$5(); if (mixins) { for (var i = 0; i < mixins.length; i++) { api = mixins[i](api); } } var r = factory(function initialize(O) { api.initializeInstanceElements(O, decorated.elements); }, superClass); var decorated = api.decorateClass(_coalesceClassElements$5(r.d.map(_createElementDescriptor$5)), decorators); api.initializeClassElements(r.F, decorated.elements); return api.runClassFinishers(r.F, decorated.finishers); }
 function _getDecoratorsApi$5() { _getDecoratorsApi$5 = function () { return api; }; var api = { elementsDefinitionOrder: [["method"], ["field"]], initializeInstanceElements: function (O, elements) { ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { if (element.kind === kind && element.placement === "own") { this.defineClassElement(O, element); } }, this); }, this); }, initializeClassElements: function (F, elements) { var proto = F.prototype; ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { var placement = element.placement; if (element.kind === kind && (placement === "static" || placement === "prototype")) { var receiver = placement === "static" ? F : proto; this.defineClassElement(receiver, element); } }, this); }, this); }, defineClassElement: function (receiver, element) { var descriptor = element.descriptor; if (element.kind === "field") { var initializer = element.initializer; descriptor = { enumerable: descriptor.enumerable, writable: descriptor.writable, configurable: descriptor.configurable, value: initializer === void 0 ? void 0 : initializer.call(receiver) }; } Object.defineProperty(receiver, element.key, descriptor); }, decorateClass: function (elements, decorators) { var newElements = []; var finishers = []; var placements = { static: [], prototype: [], own: [] }; elements.forEach(function (element) { this.addElementPlacement(element, placements); }, this); elements.forEach(function (element) { if (!_hasDecorators$5(element)) return newElements.push(element); var elementFinishersExtras = this.decorateElement(element, placements); newElements.push(elementFinishersExtras.element); newElements.push.apply(newElements, elementFinishersExtras.extras); finishers.push.apply(finishers, elementFinishersExtras.finishers); }, this); if (!decorators) { return { elements: newElements, finishers: finishers }; } var result = this.decorateConstructor(newElements, decorators); finishers.push.apply(finishers, result.finishers); result.finishers = finishers; return result; }, addElementPlacement: function (element, placements, silent) { var keys = placements[element.placement]; if (!silent && keys.indexOf(element.key) !== -1) { throw new TypeError("Duplicated element (" + element.key + ")"); } keys.push(element.key); }, decorateElement: function (element, placements) { var extras = []; var finishers = []; for (var decorators = element.decorators, i = decorators.length - 1; i >= 0; i--) { var keys = placements[element.placement]; keys.splice(keys.indexOf(element.key), 1); var elementObject = this.fromElementDescriptor(element); var elementFinisherExtras = this.toElementFinisherExtras((0, decorators[i])(elementObject) || elementObject); element = elementFinisherExtras.element; this.addElementPlacement(element, placements); if (elementFinisherExtras.finisher) { finishers.push(elementFinisherExtras.finisher); } var newExtras = elementFinisherExtras.extras; if (newExtras) { for (var j = 0; j < newExtras.length; j++) { this.addElementPlacement(newExtras[j], placements); } extras.push.apply(extras, newExtras); } } return { element: element, finishers: finishers, extras: extras }; }, decorateConstructor: function (elements, decorators) { var finishers = []; for (var i = decorators.length - 1; i >= 0; i--) { var obj = this.fromClassDescriptor(elements); var elementsAndFinisher = this.toClassDescriptor((0, decorators[i])(obj) || obj); if (elementsAndFinisher.finisher !== undefined) { finishers.push(elementsAndFinisher.finisher); } if (elementsAndFinisher.elements !== undefined) { elements = elementsAndFinisher.elements; for (var j = 0; j < elements.length - 1; j++) { for (var k = j + 1; k < elements.length; k++) { if (elements[j].key === elements[k].key && elements[j].placement === elements[k].placement) { throw new TypeError("Duplicated element (" + elements[j].key + ")"); } } } } } return { elements: elements, finishers: finishers }; }, fromElementDescriptor: function (element) { var obj = { kind: element.kind, key: element.key, placement: element.placement, descriptor: element.descriptor }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); if (element.kind === "field") obj.initializer = element.initializer; return obj; }, toElementDescriptors: function (elementObjects) { if (elementObjects === undefined) return; return _toArray$5(elementObjects).map(function (elementObject) { var element = this.toElementDescriptor(elementObject); this.disallowProperty(elementObject, "finisher", "An element descriptor"); this.disallowProperty(elementObject, "extras", "An element descriptor"); return element; }, this); }, toElementDescriptor: function (elementObject) { var kind = String(elementObject.kind); if (kind !== "method" && kind !== "field") { throw new TypeError('An element descriptor\'s .kind property must be either "method" or' + ' "field", but a decorator created an element descriptor with' + ' .kind "' + kind + '"'); } var key = _toPropertyKey$5(elementObject.key); var placement = String(elementObject.placement); if (placement !== "static" && placement !== "prototype" && placement !== "own") { throw new TypeError('An element descriptor\'s .placement property must be one of "static",' + ' "prototype" or "own", but a decorator created an element descriptor' + ' with .placement "' + placement + '"'); } var descriptor = elementObject.descriptor; this.disallowProperty(elementObject, "elements", "An element descriptor"); var element = { kind: kind, key: key, placement: placement, descriptor: Object.assign({}, descriptor) }; if (kind !== "field") { this.disallowProperty(elementObject, "initializer", "A method descriptor"); } else { this.disallowProperty(descriptor, "get", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "set", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "value", "The property descriptor of a field descriptor"); element.initializer = elementObject.initializer; } return element; }, toElementFinisherExtras: function (elementObject) { var element = this.toElementDescriptor(elementObject); var finisher = _optionalCallableProperty$5(elementObject, "finisher"); var extras = this.toElementDescriptors(elementObject.extras); return { element: element, finisher: finisher, extras: extras }; }, fromClassDescriptor: function (elements) { var obj = { kind: "class", elements: elements.map(this.fromElementDescriptor, this) }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); return obj; }, toClassDescriptor: function (obj) { var kind = String(obj.kind); if (kind !== "class") { throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator' + ' created a class descriptor with .kind "' + kind + '"'); } this.disallowProperty(obj, "key", "A class descriptor"); this.disallowProperty(obj, "placement", "A class descriptor"); this.disallowProperty(obj, "descriptor", "A class descriptor"); this.disallowProperty(obj, "initializer", "A class descriptor"); this.disallowProperty(obj, "extras", "A class descriptor"); var finisher = _optionalCallableProperty$5(obj, "finisher"); var elements = this.toElementDescriptors(obj.elements); return { elements: elements, finisher: finisher }; }, runClassFinishers: function (constructor, finishers) { for (var i = 0; i < finishers.length; i++) { var newConstructor = (0, finishers[i])(constructor); if (newConstructor !== undefined) { if (typeof newConstructor !== "function") { throw new TypeError("Finishers must return a constructor."); } constructor = newConstructor; } } return constructor; }, disallowProperty: function (obj, name, objectType) { if (obj[name] !== undefined) { throw new TypeError(objectType + " can't have a ." + name + " property."); } } }; return api; }
 function _createElementDescriptor$5(def) { var key = _toPropertyKey$5(def.key); var descriptor; if (def.kind === "method") { descriptor = { value: def.value, writable: true, configurable: true, enumerable: false }; } else if (def.kind === "get") { descriptor = { get: def.value, configurable: true, enumerable: false }; } else if (def.kind === "set") { descriptor = { set: def.value, configurable: true, enumerable: false }; } else if (def.kind === "field") { descriptor = { configurable: true, writable: true, enumerable: true }; } var element = { kind: def.kind === "field" ? "field" : "method", key: key, placement: def.static ? "static" : def.kind === "field" ? "own" : "prototype", descriptor: descriptor }; if (def.decorators) element.decorators = def.decorators; if (def.kind === "field") element.initializer = def.value; return element; }
@@ -7697,6 +7780,9 @@ const {
   stablePrefix: ddsPrefix$5
 } = settings$1;
 
+// Delay matches the CSS animation timing for fadein/out of modal.
+const delay = parseInt(moderate02, 10);
+
 /**
  * Component that rendres footer from inks data.
  *
@@ -7712,12 +7798,19 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
   return {
     F: DDSFooterComposite,
     d: [{
-      kind: "field",
+      kind: "method",
       key: "_handleClickLocaleButton",
-      value() {
-        return () => {
-          this.openLocaleModal = true;
-        };
+      value:
+      /**
+       * Handles `click` event on the locale button.
+       */
+      async function _handleClickLocaleButton() {
+        var _this$modalRenderRoot;
+        this.openLocaleModal = true;
+        // Set 'open' attribute after modal is in dom so CSS can fade it in.
+        await this.updateComplete;
+        const composite = (_this$modalRenderRoot = this.modalRenderRoot) === null || _this$modalRenderRoot === void 0 ? void 0 : _this$modalRenderRoot.querySelector('dds-locale-modal-composite');
+        composite === null || composite === void 0 || composite.setAttribute('open', '');
       }
     }, {
       kind: "field",
@@ -7729,12 +7822,7 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
     }, {
       kind: "method",
       key: "mediaQueryCallbackMaxLG",
-      value:
-      /**
-       * Handles `click` event on the locale button.
-       */
-
-      function mediaQueryCallbackMaxLG() {
+      value: function mediaQueryCallbackMaxLG() {
         this._isMobile = this.carbonBreakpoints.lg.matches;
       }
 
@@ -7748,7 +7836,10 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
       value() {
         return event => {
           if (this.modalRenderRoot.contains(event.target)) {
-            this.openLocaleModal = false;
+            // Timeout here ensures the modal closing animation is visible.
+            setTimeout(() => {
+              this.openLocaleModal = false;
+            }, delay);
           }
         };
       }
@@ -7857,8 +7948,12 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
         attribute: 'open-locale-modal'
       })],
       key: "openLocaleModal",
+      value: void 0
+    }, {
+      kind: "field",
+      key: "modalTriggerProps",
       value() {
-        return false;
+        return ['openLocaleModal', 'localeList'];
       }
     }, {
       kind: "field",
@@ -7936,6 +8031,9 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
       /**
        * `true` to open the locale modal.
        */
+      /**
+       * @inheritdoc
+       */
       /**
        * Footer size.
        */
@@ -7955,9 +8053,9 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
         globalInit();
         if (language) {
           var _this$_setLanguage;
-          (_this$_setLanguage = this._setLanguage) === null || _this$_setLanguage === void 0 ? void 0 : _this$_setLanguage.call(this, language);
+          (_this$_setLanguage = this._setLanguage) === null || _this$_setLanguage === void 0 || _this$_setLanguage.call(this, language);
         }
-        (_this$_loadTranslatio = this._loadTranslation) === null || _this$_loadTranslatio === void 0 ? void 0 : _this$_loadTranslatio.call(this, language);
+        (_this$_loadTranslatio = this._loadTranslation) === null || _this$_loadTranslatio === void 0 || _this$_loadTranslatio.call(this, language);
         this.getLangDisplay().then(res => {
           this.langDisplay = res;
         });
@@ -7973,8 +8071,8 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
           } = this;
           if (language) {
             var _this$_setLanguage2, _this$_loadTranslatio2;
-            (_this$_setLanguage2 = this._setLanguage) === null || _this$_setLanguage2 === void 0 ? void 0 : _this$_setLanguage2.call(this, language);
-            (_this$_loadTranslatio2 = this._loadTranslation) === null || _this$_loadTranslatio2 === void 0 ? void 0 : _this$_loadTranslatio2.call(this, language).catch(() => {}); // The error is logged in the Redux store
+            (_this$_setLanguage2 = this._setLanguage) === null || _this$_setLanguage2 === void 0 || _this$_setLanguage2.call(this, language);
+            (_this$_loadTranslatio2 = this._loadTranslation) === null || _this$_loadTranslatio2 === void 0 || _this$_loadTranslatio2.call(this, language).catch(() => {}); // The error is logged in the Redux store
           }
         }
       }
@@ -7994,16 +8092,15 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
           openLocaleModal,
           _loadLocaleList: loadLocaleList
         } = this;
-        return html(_t$2 || (_t$2 = _$2`
-      <dds-locale-modal-composite
-        lang-display="${0}"
-        language="${0}"
-        ?open="${0}"
-        .collatorCountryName="${0}"
-        .localeList="${0}"
-        ._loadLocaleList="${0}">
-      </dds-locale-modal-composite>
-    `), ifNonNull(langDisplay), ifNonNull(language), openLocaleModal, ifNonNull(collatorCountryName), ifNonNull(localeList), ifNonNull(loadLocaleList));
+        return openLocaleModal ? html(_t$2 || (_t$2 = _$2`
+          <dds-locale-modal-composite
+            lang-display="${0}"
+            language="${0}"
+            .collatorCountryName="${0}"
+            .localeList="${0}"
+            ._loadLocaleList="${0}">
+          </dds-locale-modal-composite>
+        `), ifNonNull(langDisplay), ifNonNull(language), ifNonNull(collatorCountryName), ifNonNull(localeList), ifNonNull(loadLocaleList)) : html(_t2 || (_t2 = _$2``));
       }
     }, {
       kind: "method",
@@ -8018,7 +8115,7 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
           size
         } = this;
         const dropdownSize = size === FOOTER_SIZE.MICRO ? DROPDOWN_SIZE.MICRO : DROPDOWN_SIZE.EXTRA_LARGE;
-        return isMobile ? html(_t2 || (_t2 = _$2`
+        return isMobile ? html(_t3 || (_t3 = _$2`
           <dds-language-selector-mobile
             size="${0}"
             slot="${0}"
@@ -8026,14 +8123,14 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
             placeholder="${0}">
             ${0}
           </dds-language-selector-mobile>
-        `), dropdownSize, slot, selectedLanguage, selectedLanguage, langList === null || langList === void 0 ? void 0 : langList.map(language => html(_t3 || (_t3 = _$2`
+        `), dropdownSize, slot, selectedLanguage, selectedLanguage, langList === null || langList === void 0 ? void 0 : langList.map(language => html(_t4 || (_t4 = _$2`
                 <bx-select-item
                   label="${0}"
                   value="${0}"
                   lang="${0}"
                   >${0}</bx-select-item
                 >
-              `), ifNonNull(language.text), ifNonNull(language.text), ifNonNull(language.id), ifNonNull(language.text)))) : html(_t4 || (_t4 = _$2`
+              `), ifNonNull(language.text), ifNonNull(language.text), ifNonNull(language.id), ifNonNull(language.text)))) : html(_t5 || (_t5 = _$2`
           <dds-language-selector-desktop
             size="${0}"
             slot="${0}"
@@ -8043,7 +8140,7 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
             clear-selection-label="${0}">
             ${0}
           </dds-language-selector-desktop>
-        `), dropdownSize, slot, languageSelectorLabel, languageSelectorLabel, selectedLanguage, clearSelectionLabel, langList === null || langList === void 0 ? void 0 : langList.map(language => html(_t5 || (_t5 = _$2`
+        `), dropdownSize, slot, languageSelectorLabel, languageSelectorLabel, selectedLanguage, clearSelectionLabel, langList === null || langList === void 0 ? void 0 : langList.map(language => html(_t6 || (_t6 = _$2`
                 <bx-combo-box-item
                   value="${0}"
                   lang="${0}"
@@ -8061,7 +8158,7 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
           langDisplay,
           size
         } = this;
-        return html(_t6 || (_t6 = _$2`
+        return html(_t7 || (_t7 = _$2`
       <dds-locale-button
         buttonLabel="${0}"
         size="${0}"
@@ -8083,7 +8180,7 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
           legalLinks,
           adjunctLinks
         } = this;
-        return html(_t7 || (_t7 = _$2`
+        return html(_t8 || (_t8 = _$2`
       <dds-footer
         size="${0}"
         ?disable-locale-button="${0}">
@@ -8105,14 +8202,14 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
     `), ifNonNull(size), ifNonNull(disableLocaleButton), ifNonNull(disableLocaleButton), links === null || links === void 0 ? void 0 : links.map(({
           title: groupTitle,
           links: groupLinks
-        }) => html(_t8 || (_t8 = _$2`
+        }) => html(_t9 || (_t9 = _$2`
               <dds-footer-nav-group title-text="${0}">
                 ${0}
               </dds-footer-nav-group>
             `), ifNonNull(groupTitle), groupLinks === null || groupLinks === void 0 ? void 0 : groupLinks.map(({
           title,
           url
-        }) => html(_t9 || (_t9 = _$2`
+        }) => html(_t10 || (_t10 = _$2`
                     <dds-footer-nav-item href="${0}"
                       >${0}</dds-footer-nav-item
                     >
@@ -8120,7 +8217,7 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
           title,
           url,
           titleEnglish
-        }) => html(_t10 || (_t10 = _$2`
+        }) => html(_t11 || (_t11 = _$2`
               <dds-legal-nav-item
                 autoid="${0}"
                 href="${0}"
@@ -8130,7 +8227,7 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
           title,
           url,
           titleEnglish
-        }) => html(_t11 || (_t11 = _$2`
+        }) => html(_t12 || (_t12 = _$2`
                   <dds-legal-nav-item
                     autoid="${0}"
                     href="${0}"
@@ -8143,7 +8240,7 @@ let DDSFooterComposite = _decorate$5([carbonElement(`${ddsPrefix$5}-footer-compo
       kind: "method",
       key: "render",
       value: function render() {
-        return html(_t12 || (_t12 = _$2` <slot></slot> `));
+        return html(_t13 || (_t13 = _$2` <slot></slot> `));
       }
 
       /**
@@ -8213,8 +8310,8 @@ function mapStateToProps$2(state) {
   } = translateAPI !== null && translateAPI !== void 0 ? translateAPI : {};
   return pickBy({
     localeList: !language ? undefined : localeLists === null || localeLists === void 0 ? void 0 : localeLists[language],
-    links: !language ? undefined : translations === null || translations === void 0 ? void 0 : (_translations$languag = translations[language]) === null || _translations$languag === void 0 ? void 0 : _translations$languag.footerMenu,
-    legalLinks: !language ? undefined : translations === null || translations === void 0 ? void 0 : (_translations$languag2 = translations[language]) === null || _translations$languag2 === void 0 ? void 0 : _translations$languag2.footerThin
+    links: !language ? undefined : translations === null || translations === void 0 || (_translations$languag = translations[language]) === null || _translations$languag === void 0 ? void 0 : _translations$languag.footerMenu,
+    legalLinks: !language ? undefined : translations === null || translations === void 0 || (_translations$languag2 = translations[language]) === null || _translations$languag2 === void 0 ? void 0 : _translations$languag2.footerThin
   }, value => value !== undefined);
 }
 
@@ -8431,7 +8528,7 @@ const {
  * @returns The converted version of the given state, tailored for `<dds-masthead-container>`.
  */
 function mapStateToProps$1(state) {
-  var _translations$languag, _translations$languag2, _translations$languag3, _translations$languag4, _translations$languag5, _translations$languag6;
+  var _translations$languag, _translations$languag2, _translations$languag3, _translations$languag4;
   const {
     localeAPI,
     translateAPI,
@@ -8447,10 +8544,10 @@ function mapStateToProps$1(state) {
     request
   } = profileAPI !== null && profileAPI !== void 0 ? profileAPI : {};
   return pickBy({
-    authenticatedProfileItems: !language ? undefined : translations === null || translations === void 0 ? void 0 : (_translations$languag = translations[language]) === null || _translations$languag === void 0 ? void 0 : _translations$languag.profileMenu.signedin,
-    navLinks: !language ? undefined : translations === null || translations === void 0 ? void 0 : (_translations$languag2 = translations[language]) === null || _translations$languag2 === void 0 ? void 0 : (_translations$languag3 = _translations$languag2.mastheadNav) === null || _translations$languag3 === void 0 ? void 0 : _translations$languag3.links,
-    unauthenticatedProfileItems: !language ? undefined : translations === null || translations === void 0 ? void 0 : (_translations$languag4 = translations[language]) === null || _translations$languag4 === void 0 ? void 0 : _translations$languag4.profileMenu.signedout,
-    logoData: !language ? undefined : translations === null || translations === void 0 ? void 0 : (_translations$languag5 = translations[language]) === null || _translations$languag5 === void 0 ? void 0 : (_translations$languag6 = _translations$languag5.masthead) === null || _translations$languag6 === void 0 ? void 0 : _translations$languag6.logo,
+    authenticatedProfileItems: !language ? undefined : translations === null || translations === void 0 || (_translations$languag = translations[language]) === null || _translations$languag === void 0 ? void 0 : _translations$languag.profileMenu.signedin,
+    navLinks: !language ? undefined : translations === null || translations === void 0 || (_translations$languag2 = translations[language]) === null || _translations$languag2 === void 0 || (_translations$languag2 = _translations$languag2.mastheadNav) === null || _translations$languag2 === void 0 ? void 0 : _translations$languag2.links,
+    unauthenticatedProfileItems: !language ? undefined : translations === null || translations === void 0 || (_translations$languag3 = translations[language]) === null || _translations$languag3 === void 0 ? void 0 : _translations$languag3.profileMenu.signedout,
+    logoData: !language ? undefined : translations === null || translations === void 0 || (_translations$languag4 = translations[language]) === null || _translations$languag4 === void 0 || (_translations$languag4 = _translations$languag4.masthead) === null || _translations$languag4 === void 0 ? void 0 : _translations$languag4.logo,
     userStatus: request === null || request === void 0 ? void 0 : request.user,
     language
   }, value => value !== undefined);
@@ -8632,7 +8729,7 @@ let DDSDotcomShellComposite = _decorate$1([carbonElement(`${ddsPrefix$1}-dotcom-
       function _createFooterRenderRoot() {
         var _this$parentNode;
         const footer = this.ownerDocument.createElement(`${ddsPrefix$1}-footer-composite`);
-        (_this$parentNode = this.parentNode) === null || _this$parentNode === void 0 ? void 0 : _this$parentNode.insertBefore(footer, this.nextSibling);
+        (_this$parentNode = this.parentNode) === null || _this$parentNode === void 0 || _this$parentNode.insertBefore(footer, this.nextSibling);
         return footer;
       }
 
@@ -8645,7 +8742,7 @@ let DDSDotcomShellComposite = _decorate$1([carbonElement(`${ddsPrefix$1}-dotcom-
       value: function _createMastheadRenderRoot() {
         var _this$parentNode2;
         const masthead = this.ownerDocument.createElement(`${ddsPrefix$1}-masthead-composite`);
-        (_this$parentNode2 = this.parentNode) === null || _this$parentNode2 === void 0 ? void 0 : _this$parentNode2.insertBefore(masthead, this);
+        (_this$parentNode2 = this.parentNode) === null || _this$parentNode2 === void 0 || _this$parentNode2.insertBefore(masthead, this);
         return masthead;
       }
 
@@ -8885,16 +8982,6 @@ let DDSDotcomShellComposite = _decorate$1([carbonElement(`${ddsPrefix$1}-dotcom-
       })],
       key: "selectedMenuItem",
       value: void 0
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: Boolean,
-        attribute: 'open-locale-modal'
-      })],
-      key: "openLocaleModal",
-      value() {
-        return false;
-      }
     }, {
       kind: "field",
       decorators: [property({
@@ -9058,9 +9145,6 @@ let DDSDotcomShellComposite = _decorate$1([carbonElement(`${ddsPrefix$1}-dotcom-
       /**
        * The English title of the selected nav item.
        */
-      /**
-       * `true` to open the locale modal. This goes to footer.
-       */
       /**
        * Footer size. This goes to footer.
        */
@@ -9130,7 +9214,6 @@ let DDSDotcomShellComposite = _decorate$1([carbonElement(`${ddsPrefix$1}-dotcom-
           localeList,
           footerLinks,
           footerSize,
-          openLocaleModal,
           openSearchDropdown,
           navLinks,
           hasProfile,
@@ -9188,7 +9271,6 @@ let DDSDotcomShellComposite = _decorate$1([carbonElement(`${ddsPrefix$1}-dotcom-
           legalLinks,
           links: footerLinks,
           localeList,
-          openLocaleModal,
           selectedLanguage,
           size: footerSize,
           _loadLocaleList,
@@ -9205,12 +9287,12 @@ let DDSDotcomShellComposite = _decorate$1([carbonElement(`${ddsPrefix$1}-dotcom-
         // moving universal banner outside of dotcom shell if placed within
         if (this.querySelector('dds-universal-banner')) {
           var _this$ownerDocument$q;
-          (_this$ownerDocument$q = this.ownerDocument.querySelector('dds-masthead-composite')) === null || _this$ownerDocument$q === void 0 ? void 0 : _this$ownerDocument$q.before(this.querySelector('dds-universal-banner'));
+          (_this$ownerDocument$q = this.ownerDocument.querySelector('dds-masthead-composite')) === null || _this$ownerDocument$q === void 0 || _this$ownerDocument$q.before(this.querySelector('dds-universal-banner'));
         }
         if (this.ownerDocument.querySelector('dds-universal-banner')) {
           var _this$_masthead;
           this.hasBanner = true;
-          (_this$_masthead = this._masthead) === null || _this$_masthead === void 0 ? void 0 : _this$_masthead.setAttribute('with-banner', '');
+          (_this$_masthead = this._masthead) === null || _this$_masthead === void 0 || _this$_masthead.setAttribute('with-banner', '');
         }
       }
     }, {
@@ -9248,8 +9330,8 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }