@govtechsg/sgds-web-component 3.4.0-rc.2 → 3.4.0-rc.3

package/components/ComboBox/index.umd.js

@@ -1234,7 +1234,7 @@
       };
       issueWarning$4('dev-mode', `Lit is in dev mode. Not recommended for production!`);
   }
-  const wrap = global$2.ShadyDOM?.inUse &&
+  const wrap$1 = global$2.ShadyDOM?.inUse &&
       global$2.ShadyDOM?.noPatch === true
       ? global$2.ShadyDOM.wrap
       : (node) => node;
@@ -1286,7 +1286,7 @@
   const nodeMarker = `<${markerMatch}>`;
   const d = document;
   // Creates a dynamic marker. We never have to search for these in the DOM.
-  const createMarker = () => d.createComment('');
+  const createMarker$1 = () => d.createComment('');
   const isPrimitive = (value) => value === null || (typeof value != 'object' && typeof value != 'function');
   const isArray = Array.isArray;
   const isIterable = (value) => isArray(value) ||
@@ -1718,7 +1718,7 @@
                           // normalized when cloning in IE (could simplify when
                           // IE is no longer supported)
                           for (let i = 0; i < lastIndex; i++) {
-                              node.append(strings[i], createMarker());
+                              node.append(strings[i], createMarker$1());
                               // Walk past the marker node we just added
                               walker.nextNode();
                               parts.push({ type: CHILD_PART, index: ++nodeIndex });
@@ -1726,7 +1726,7 @@
                           // Note because this marker is added after the walker's current
                           // node, it will be walked to in the outer loop (and ignored), so
                           // we don't need to adjust nodeIndex here
-                          node.append(strings[lastIndex], createMarker());
+                          node.append(strings[lastIndex], createMarker$1());
                       }
                   }
               }
@@ -1856,7 +1856,7 @@
               if (nodeIndex === templatePart.index) {
                   let part;
                   if (templatePart.type === CHILD_PART) {
-                      part = new ChildPart(node, node.nextSibling, this, options);
+                      part = new ChildPart$1(node, node.nextSibling, this, options);
                   }
                   else if (templatePart.type === ATTRIBUTE_PART) {
                       part = new templatePart.ctor(node, templatePart.name, templatePart.strings, this, options);
@@ -1906,7 +1906,7 @@
           }
       }
   }
-  class ChildPart {
+  class ChildPart$1 {
       // See comment in Disconnectable interface for why this is a getter
       get _$isConnected() {
           // ChildParts that are not at the root should always be created with a
@@ -1953,7 +1953,7 @@
        * consists of all child nodes of `.parentNode`.
        */
       get parentNode() {
-          let parentNode = wrap(this._$startNode).parentNode;
+          let parentNode = wrap$1(this._$startNode).parentNode;
           const parent = this._$parent;
           if (parent !== undefined &&
               parentNode?.nodeType === 11 /* Node.DOCUMENT_FRAGMENT */) {
@@ -2027,7 +2027,7 @@
           }
       }
       _insert(node) {
-          return wrap(wrap(this._$startNode).parentNode).insertBefore(node, this._$endNode);
+          return wrap$1(wrap$1(this._$startNode).parentNode).insertBefore(node, this._$endNode);
       }
       _commitNode(value) {
           if (this._$committedValue !== value) {
@@ -2074,7 +2074,7 @@
           // Text node. We can now just replace the text content (.data) of the node.
           if (this._$committedValue !== nothing &&
               isPrimitive(this._$committedValue)) {
-              const node = wrap(this._$startNode).nextSibling;
+              const node = wrap$1(this._$startNode).nextSibling;
               {
                   if (this._textSanitizer === undefined) {
                       this._textSanitizer = createSanitizer(node, 'data', 'property');
@@ -2200,7 +2200,7 @@
                   // TODO (justinfagnani): test perf impact of always creating two parts
                   // instead of sharing parts between nodes
                   // https://github.com/lit/lit/issues/1266
-                  itemParts.push((itemPart = new ChildPart(this._insert(createMarker()), this._insert(createMarker()), this, this.options)));
+                  itemParts.push((itemPart = new ChildPart$1(this._insert(createMarker$1()), this._insert(createMarker$1()), this, this.options)));
               }
               else {
                   // Reuse an existing part
@@ -2211,7 +2211,7 @@
           }
           if (partIndex < itemParts.length) {
               // itemParts always have end nodes
-              this._$clear(itemPart && wrap(itemPart._$endNode).nextSibling, partIndex);
+              this._$clear(itemPart && wrap$1(itemPart._$endNode).nextSibling, partIndex);
               // Truncate the parts array so _value reflects the current state
               itemParts.length = partIndex;
           }
@@ -2227,11 +2227,11 @@
        *
        * @internal
        */
-      _$clear(start = wrap(this._$startNode).nextSibling, from) {
+      _$clear(start = wrap$1(this._$startNode).nextSibling, from) {
           this._$notifyConnectionChanged?.(false, true, from);
           while (start && start !== this._$endNode) {
-              const n = wrap(start).nextSibling;
-              wrap(start).remove();
+              const n = wrap$1(start).nextSibling;
+              wrap$1(start).remove();
               start = n;
           }
       }
@@ -2349,7 +2349,7 @@
       /** @internal */
       _commitValue(value) {
           if (value === nothing) {
-              wrap(this.element).removeAttribute(this.name);
+              wrap$1(this.element).removeAttribute(this.name);
           }
           else {
               {
@@ -2366,7 +2366,7 @@
                       value,
                       options: this.options,
                   });
-              wrap(this.element).setAttribute(this.name, (value ?? ''));
+              wrap$1(this.element).setAttribute(this.name, (value ?? ''));
           }
       }
   }
@@ -2410,7 +2410,7 @@
                   value: !!(value && value !== nothing),
                   options: this.options,
               });
-          wrap(this.element).toggleAttribute(this.name, !!value && value !== nothing);
+          wrap$1(this.element).toggleAttribute(this.name, !!value && value !== nothing);
       }
   }
   class EventPart extends AttributePart {
@@ -2501,10 +2501,46 @@
           resolveDirective(this, value);
       }
   }
+  /**
+   * END USERS SHOULD NOT RELY ON THIS OBJECT.
+   *
+   * Private exports for use by other Lit packages, not intended for use by
+   * external users.
+   *
+   * We currently do not make a mangled rollup build of the lit-ssr code. In order
+   * to keep a number of (otherwise private) top-level exports mangled in the
+   * client side code, we export a _$LH object containing those members (or
+   * helper methods for accessing private fields of those members), and then
+   * re-export them for use in lit-ssr. This keeps lit-ssr agnostic to whether the
+   * client-side code is being used in `dev` mode or `prod` mode.
+   *
+   * This has a unique name, to disambiguate it from private exports in
+   * lit-element, which re-exports all of lit-html.
+   *
+   * @private
+   */
+  const _$LH = {
+      // Used in lit-ssr
+      _boundAttributeSuffix: boundAttributeSuffix,
+      _marker: marker,
+      _markerMatch: markerMatch,
+      _HTML_RESULT: HTML_RESULT,
+      _getTemplateHtml: getTemplateHtml,
+      // Used in tests and private-ssr-support
+      _TemplateInstance: TemplateInstance,
+      _isIterable: isIterable,
+      _resolveDirective: resolveDirective,
+      _ChildPart: ChildPart$1,
+      _AttributePart: AttributePart,
+      _BooleanAttributePart: BooleanAttributePart,
+      _EventPart: EventPart,
+      _PropertyPart: PropertyPart,
+      _ElementPart: ElementPart,
+  };
   // Apply polyfills if available
   const polyfillSupport$2 = global$2.litHtmlPolyfillSupportDevMode
       ;
-  polyfillSupport$2?.(Template, ChildPart);
+  polyfillSupport$2?.(Template, ChildPart$1);
   // IMPORTANT: do not change the property name or the assignment expression.
   // This line will be used in regexes to search for lit-html usage.
   (global$2.litHtmlVersions ??= []).push('3.2.0');
@@ -2563,7 +2599,7 @@
           const endNode = options?.renderBefore ?? null;
           // This property needs to remain unminified.
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          partOwnerNode['_$litPart$'] = part = new ChildPart(container.insertBefore(createMarker(), endNode), endNode, undefined, options ?? {});
+          partOwnerNode['_$litPart$'] = part = new ChildPart$1(container.insertBefore(createMarker$1(), endNode), endNode, undefined, options ?? {});
       }
       part._$setValue(value);
       debugLogEvent$1 &&
@@ -4487,7 +4523,8 @@
    * Copyright 2020 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-  window.ShadyDOM?.inUse &&
+  const { _ChildPart: ChildPart } = _$LH;
+  const wrap = window.ShadyDOM?.inUse &&
       window.ShadyDOM?.noPatch === true
       ? window.ShadyDOM.wrap
       : (node) => node;
@@ -4500,6 +4537,79 @@
    * parts do not.
    */
   const isSingleExpression = (part) => part.strings === undefined;
+  const createMarker = () => document.createComment('');
+  /**
+   * Inserts a ChildPart into the given container ChildPart's DOM, either at the
+   * end of the container ChildPart, or before the optional `refPart`.
+   *
+   * This does not add the part to the containerPart's committed value. That must
+   * be done by callers.
+   *
+   * @param containerPart Part within which to add the new ChildPart
+   * @param refPart Part before which to add the new ChildPart; when omitted the
+   *     part added to the end of the `containerPart`
+   * @param part Part to insert, or undefined to create a new part
+   */
+  const insertPart = (containerPart, refPart, part) => {
+      const container = wrap(containerPart._$startNode).parentNode;
+      const refNode = refPart === undefined ? containerPart._$endNode : refPart._$startNode;
+      if (part === undefined) {
+          const startNode = wrap(container).insertBefore(createMarker(), refNode);
+          const endNode = wrap(container).insertBefore(createMarker(), refNode);
+          part = new ChildPart(startNode, endNode, containerPart, containerPart.options);
+      }
+      else {
+          const endNode = wrap(part._$endNode).nextSibling;
+          const oldParent = part._$parent;
+          const parentChanged = oldParent !== containerPart;
+          if (parentChanged) {
+              part._$reparentDisconnectables?.(containerPart);
+              // Note that although `_$reparentDisconnectables` updates the part's
+              // `_$parent` reference after unlinking from its current parent, that
+              // method only exists if Disconnectables are present, so we need to
+              // unconditionally set it here
+              part._$parent = containerPart;
+              // Since the _$isConnected getter is somewhat costly, only
+              // read it once we know the subtree has directives that need
+              // to be notified
+              let newConnectionState;
+              if (part._$notifyConnectionChanged !== undefined &&
+                  (newConnectionState = containerPart._$isConnected) !==
+                      oldParent._$isConnected) {
+                  part._$notifyConnectionChanged(newConnectionState);
+              }
+          }
+          if (endNode !== refNode || parentChanged) {
+              let start = part._$startNode;
+              while (start !== endNode) {
+                  const n = wrap(start).nextSibling;
+                  wrap(container).insertBefore(start, refNode);
+                  start = n;
+              }
+          }
+      }
+      return part;
+  };
+  /**
+   * Sets the value of a Part.
+   *
+   * Note that this should only be used to set/update the value of user-created
+   * parts (i.e. those created using `insertPart`); it should not be used
+   * by directives to set the value of the directive's container part. Directives
+   * should return a value from `update`/`render` to update their part state.
+   *
+   * For directives that require setting their part value asynchronously, they
+   * should extend `AsyncDirective` and call `this.setValue()`.
+   *
+   * @param part Part to set
+   * @param value Value to set
+   * @param index For `AttributePart`s, the index to set
+   * @param directiveParent Used internally; should not be set by user
+   */
+  const setChildPartValue = (part, value, directiveParent = part) => {
+      part._$setValue(value, directiveParent);
+      return part;
+  };
   // A sentinel value that can never appear as a part value except when set by
   // live(). Used to force a dirty-check to fail and cause a re-render.
   const RESET_VALUE = {};
@@ -4515,6 +4625,36 @@
    * @param value
    */
   const setCommittedValue = (part, value = RESET_VALUE) => (part._$committedValue = value);
+  /**
+   * Returns the committed value of a ChildPart.
+   *
+   * The committed value is used for change detection and efficient updates of
+   * the part. It can differ from the value set by the template or directive in
+   * cases where the template value is transformed before being committed.
+   *
+   * - `TemplateResult`s are committed as a `TemplateInstance`
+   * - Iterables are committed as `Array<ChildPart>`
+   * - All other types are committed as the template value or value returned or
+   *   set by a directive.
+   *
+   * @param part
+   */
+  const getCommittedValue = (part) => part._$committedValue;
+  /**
+   * Removes a ChildPart from the DOM, including any of its content.
+   *
+   * @param part The Part to remove
+   */
+  const removePart = (part) => {
+      part._$notifyConnectionChanged?.(false, true);
+      let start = part._$startNode;
+      const end = wrap(part._$endNode).nextSibling;
+      while (start !== end) {
+          const n = wrap(start).nextSibling;
+          wrap(start).remove();
+          start = n;
+      }
+  };
 
   /**
    * @license
@@ -13145,6 +13285,416 @@
 
   var css_248z = css`:host{display:block;position:relative}.combobox{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}.dropdown{display:flex;height:100%}.sgds.combobox{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:flex-end;position:relative;width:-webkit-fill-available;width:-moz-available}.dropdown-menu{box-sizing:border-box;max-height:10rem;overflow-x:hidden;overflow-y:auto}.visually-hidden{clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.form-control-group.disabled{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-control-group{align-items:center;background-color:var(--sgds-form-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);border-radius:var(--sgds-form-border-radius-md);display:flex;gap:var(--sgds-form-gap-md);justify-content:space-between;min-height:var(--sgds-dimension-48);min-width:var(--sgds-dimension-256);padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:-webkit-fill-available;width:-moz-available}.form-control{appearance:none;background-clip:padding-box;background:none;border:none;color:var(--sgds-form-color-default);display:inline;flex-grow:1;font-size:var(--sgds-font-size-2);line-height:var(--sgds-line-height-body);outline:none;padding:0}.combobox-input-container{display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);width:calc(100% - var(--sgds-icon-size-md, 1.25rem))}.empty-menu{padding:var(--sgds-padding-sm) var(--sgds-padding-lg,20px)}.form-control-group.readonly{border-color:var(--sgds-border-color-muted)}.form-control-group:not(.disabled):not(.is-invalid):hover{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis)}.form-control-group:not(.disabled):not(.is-invalid):focus,.form-control-group:not(.disabled):not(.is-invalid):focus-within{border:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);box-shadow:var(--sgds-form-box-shadow-focus);outline:0}.form-control-group.is-invalid{border:var(--sgds-form-border-width-thick) solid var(--sgds-form-danger-border-color-default)}.form-control-group.disabled{background-color:var(--sgds-form-surface-muted)}`;
 
+  /**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   */
+  // Helper for generating a map of array item to its index over a subset
+  // of an array (used to lazily generate `newKeyToIndexMap` and
+  // `oldKeyToIndexMap`)
+  const generateMap = (list, start, end) => {
+      const map = new Map();
+      for (let i = start; i <= end; i++) {
+          map.set(list[i], i);
+      }
+      return map;
+  };
+  class RepeatDirective extends Directive {
+      constructor(partInfo) {
+          super(partInfo);
+          if (partInfo.type !== PartType.CHILD) {
+              throw new Error('repeat() can only be used in text expressions');
+          }
+      }
+      _getValuesAndKeys(items, keyFnOrTemplate, template) {
+          let keyFn;
+          if (template === undefined) {
+              template = keyFnOrTemplate;
+          }
+          else if (keyFnOrTemplate !== undefined) {
+              keyFn = keyFnOrTemplate;
+          }
+          const keys = [];
+          const values = [];
+          let index = 0;
+          for (const item of items) {
+              keys[index] = keyFn ? keyFn(item, index) : index;
+              values[index] = template(item, index);
+              index++;
+          }
+          return {
+              values,
+              keys,
+          };
+      }
+      render(items, keyFnOrTemplate, template) {
+          return this._getValuesAndKeys(items, keyFnOrTemplate, template).values;
+      }
+      update(containerPart, [items, keyFnOrTemplate, template]) {
+          // Old part & key lists are retrieved from the last update (which may
+          // be primed by hydration)
+          const oldParts = getCommittedValue(containerPart);
+          const { values: newValues, keys: newKeys } = this._getValuesAndKeys(items, keyFnOrTemplate, template);
+          // We check that oldParts, the committed value, is an Array as an
+          // indicator that the previous value came from a repeat() call. If
+          // oldParts is not an Array then this is the first render and we return
+          // an array for lit-html's array handling to render, and remember the
+          // keys.
+          if (!Array.isArray(oldParts)) {
+              this._itemKeys = newKeys;
+              return newValues;
+          }
+          // In SSR hydration it's possible for oldParts to be an array but for us
+          // to not have item keys because the update() hasn't run yet. We set the
+          // keys to an empty array. This will cause all oldKey/newKey comparisons
+          // to fail and execution to fall to the last nested brach below which
+          // reuses the oldPart.
+          const oldKeys = (this._itemKeys ??= []);
+          // New part list will be built up as we go (either reused from
+          // old parts or created for new keys in this update). This is
+          // saved in the above cache at the end of the update.
+          const newParts = [];
+          // Maps from key to index for current and previous update; these
+          // are generated lazily only when needed as a performance
+          // optimization, since they are only required for multiple
+          // non-contiguous changes in the list, which are less common.
+          let newKeyToIndexMap;
+          let oldKeyToIndexMap;
+          // Head and tail pointers to old parts and new values
+          let oldHead = 0;
+          let oldTail = oldParts.length - 1;
+          let newHead = 0;
+          let newTail = newValues.length - 1;
+          // Overview of O(n) reconciliation algorithm (general approach
+          // based on ideas found in ivi, vue, snabbdom, etc.):
+          //
+          // * We start with the list of old parts and new values (and
+          //   arrays of their respective keys), head/tail pointers into
+          //   each, and we build up the new list of parts by updating
+          //   (and when needed, moving) old parts or creating new ones.
+          //   The initial scenario might look like this (for brevity of
+          //   the diagrams, the numbers in the array reflect keys
+          //   associated with the old parts or new values, although keys
+          //   and parts/values are actually stored in parallel arrays
+          //   indexed using the same head/tail pointers):
+          //
+          //      oldHead v                 v oldTail
+          //   oldKeys:  [0, 1, 2, 3, 4, 5, 6]
+          //   newParts: [ ,  ,  ,  ,  ,  ,  ]
+          //   newKeys:  [0, 2, 1, 4, 3, 7, 6] <- reflects the user's new
+          //                                      item order
+          //      newHead ^                 ^ newTail
+          //
+          // * Iterate old & new lists from both sides, updating,
+          //   swapping, or removing parts at the head/tail locations
+          //   until neither head nor tail can move.
+          //
+          // * Example below: keys at head pointers match, so update old
+          //   part 0 in-place (no need to move it) and record part 0 in
+          //   the `newParts` list. The last thing we do is advance the
+          //   `oldHead` and `newHead` pointers (will be reflected in the
+          //   next diagram).
+          //
+          //      oldHead v                 v oldTail
+          //   oldKeys:  [0, 1, 2, 3, 4, 5, 6]
+          //   newParts: [0,  ,  ,  ,  ,  ,  ] <- heads matched: update 0
+          //   newKeys:  [0, 2, 1, 4, 3, 7, 6]    and advance both oldHead
+          //                                      & newHead
+          //      newHead ^                 ^ newTail
+          //
+          // * Example below: head pointers don't match, but tail
+          //   pointers do, so update part 6 in place (no need to move
+          //   it), and record part 6 in the `newParts` list. Last,
+          //   advance the `oldTail` and `oldHead` pointers.
+          //
+          //         oldHead v              v oldTail
+          //   oldKeys:  [0, 1, 2, 3, 4, 5, 6]
+          //   newParts: [0,  ,  ,  ,  ,  , 6] <- tails matched: update 6
+          //   newKeys:  [0, 2, 1, 4, 3, 7, 6]    and advance both oldTail
+          //                                      & newTail
+          //         newHead ^              ^ newTail
+          //
+          // * If neither head nor tail match; next check if one of the
+          //   old head/tail items was removed. We first need to generate
+          //   the reverse map of new keys to index (`newKeyToIndexMap`),
+          //   which is done once lazily as a performance optimization,
+          //   since we only hit this case if multiple non-contiguous
+          //   changes were made. Note that for contiguous removal
+          //   anywhere in the list, the head and tails would advance
+          //   from either end and pass each other before we get to this
+          //   case and removals would be handled in the final while loop
+          //   without needing to generate the map.
+          //
+          // * Example below: The key at `oldTail` was removed (no longer
+          //   in the `newKeyToIndexMap`), so remove that part from the
+          //   DOM and advance just the `oldTail` pointer.
+          //
+          //         oldHead v           v oldTail
+          //   oldKeys:  [0, 1, 2, 3, 4, 5, 6]
+          //   newParts: [0,  ,  ,  ,  ,  , 6] <- 5 not in new map: remove
+          //   newKeys:  [0, 2, 1, 4, 3, 7, 6]    5 and advance oldTail
+          //         newHead ^           ^ newTail
+          //
+          // * Once head and tail cannot move, any mismatches are due to
+          //   either new or moved items; if a new key is in the previous
+          //   "old key to old index" map, move the old part to the new
+          //   location, otherwise create and insert a new part. Note
+          //   that when moving an old part we null its position in the
+          //   oldParts array if it lies between the head and tail so we
+          //   know to skip it when the pointers get there.
+          //
+          // * Example below: neither head nor tail match, and neither
+          //   were removed; so find the `newHead` key in the
+          //   `oldKeyToIndexMap`, and move that old part's DOM into the
+          //   next head position (before `oldParts[oldHead]`). Last,
+          //   null the part in the `oldPart` array since it was
+          //   somewhere in the remaining oldParts still to be scanned
+          //   (between the head and tail pointers) so that we know to
+          //   skip that old part on future iterations.
+          //
+          //         oldHead v        v oldTail
+          //   oldKeys:  [0, 1, -, 3, 4, 5, 6]
+          //   newParts: [0, 2,  ,  ,  ,  , 6] <- stuck: update & move 2
+          //   newKeys:  [0, 2, 1, 4, 3, 7, 6]    into place and advance
+          //                                      newHead
+          //         newHead ^           ^ newTail
+          //
+          // * Note that for moves/insertions like the one above, a part
+          //   inserted at the head pointer is inserted before the
+          //   current `oldParts[oldHead]`, and a part inserted at the
+          //   tail pointer is inserted before `newParts[newTail+1]`. The
+          //   seeming asymmetry lies in the fact that new parts are
+          //   moved into place outside in, so to the right of the head
+          //   pointer are old parts, and to the right of the tail
+          //   pointer are new parts.
+          //
+          // * We always restart back from the top of the algorithm,
+          //   allowing matching and simple updates in place to
+          //   continue...
+          //
+          // * Example below: the head pointers once again match, so
+          //   simply update part 1 and record it in the `newParts`
+          //   array.  Last, advance both head pointers.
+          //
+          //         oldHead v        v oldTail
+          //   oldKeys:  [0, 1, -, 3, 4, 5, 6]
+          //   newParts: [0, 2, 1,  ,  ,  , 6] <- heads matched: update 1
+          //   newKeys:  [0, 2, 1, 4, 3, 7, 6]    and advance both oldHead
+          //                                      & newHead
+          //            newHead ^        ^ newTail
+          //
+          // * As mentioned above, items that were moved as a result of
+          //   being stuck (the final else clause in the code below) are
+          //   marked with null, so we always advance old pointers over
+          //   these so we're comparing the next actual old value on
+          //   either end.
+          //
+          // * Example below: `oldHead` is null (already placed in
+          //   newParts), so advance `oldHead`.
+          //
+          //            oldHead v     v oldTail
+          //   oldKeys:  [0, 1, -, 3, 4, 5, 6] <- old head already used:
+          //   newParts: [0, 2, 1,  ,  ,  , 6]    advance oldHead
+          //   newKeys:  [0, 2, 1, 4, 3, 7, 6]
+          //               newHead ^     ^ newTail
+          //
+          // * Note it's not critical to mark old parts as null when they
+          //   are moved from head to tail or tail to head, since they
+          //   will be outside the pointer range and never visited again.
+          //
+          // * Example below: Here the old tail key matches the new head
+          //   key, so the part at the `oldTail` position and move its
+          //   DOM to the new head position (before `oldParts[oldHead]`).
+          //   Last, advance `oldTail` and `newHead` pointers.
+          //
+          //               oldHead v  v oldTail
+          //   oldKeys:  [0, 1, -, 3, 4, 5, 6]
+          //   newParts: [0, 2, 1, 4,  ,  , 6] <- old tail matches new
+          //   newKeys:  [0, 2, 1, 4, 3, 7, 6]   head: update & move 4,
+          //                                     advance oldTail & newHead
+          //               newHead ^     ^ newTail
+          //
+          // * Example below: Old and new head keys match, so update the
+          //   old head part in place, and advance the `oldHead` and
+          //   `newHead` pointers.
+          //
+          //               oldHead v oldTail
+          //   oldKeys:  [0, 1, -, 3, 4, 5, 6]
+          //   newParts: [0, 2, 1, 4, 3,   ,6] <- heads match: update 3
+          //   newKeys:  [0, 2, 1, 4, 3, 7, 6]    and advance oldHead &
+          //                                      newHead
+          //                  newHead ^  ^ newTail
+          //
+          // * Once the new or old pointers move past each other then all
+          //   we have left is additions (if old list exhausted) or
+          //   removals (if new list exhausted). Those are handled in the
+          //   final while loops at the end.
+          //
+          // * Example below: `oldHead` exceeded `oldTail`, so we're done
+          //   with the main loop.  Create the remaining part and insert
+          //   it at the new head position, and the update is complete.
+          //
+          //                   (oldHead > oldTail)
+          //   oldKeys:  [0, 1, -, 3, 4, 5, 6]
+          //   newParts: [0, 2, 1, 4, 3, 7 ,6] <- create and insert 7
+          //   newKeys:  [0, 2, 1, 4, 3, 7, 6]
+          //                     newHead ^ newTail
+          //
+          // * Note that the order of the if/else clauses is not
+          //   important to the algorithm, as long as the null checks
+          //   come first (to ensure we're always working on valid old
+          //   parts) and that the final else clause comes last (since
+          //   that's where the expensive moves occur). The order of
+          //   remaining clauses is just a simple guess at which cases
+          //   will be most common.
+          //
+          // * Note, we could calculate the longest
+          //   increasing subsequence (LIS) of old items in new position,
+          //   and only move those not in the LIS set. However that costs
+          //   O(nlogn) time and adds a bit more code, and only helps
+          //   make rare types of mutations require fewer moves. The
+          //   above handles removes, adds, reversal, swaps, and single
+          //   moves of contiguous items in linear time, in the minimum
+          //   number of moves. As the number of multiple moves where LIS
+          //   might help approaches a random shuffle, the LIS
+          //   optimization becomes less helpful, so it seems not worth
+          //   the code at this point. Could reconsider if a compelling
+          //   case arises.
+          while (oldHead <= oldTail && newHead <= newTail) {
+              if (oldParts[oldHead] === null) {
+                  // `null` means old part at head has already been used
+                  // below; skip
+                  oldHead++;
+              }
+              else if (oldParts[oldTail] === null) {
+                  // `null` means old part at tail has already been used
+                  // below; skip
+                  oldTail--;
+              }
+              else if (oldKeys[oldHead] === newKeys[newHead]) {
+                  // Old head matches new head; update in place
+                  newParts[newHead] = setChildPartValue(oldParts[oldHead], newValues[newHead]);
+                  oldHead++;
+                  newHead++;
+              }
+              else if (oldKeys[oldTail] === newKeys[newTail]) {
+                  // Old tail matches new tail; update in place
+                  newParts[newTail] = setChildPartValue(oldParts[oldTail], newValues[newTail]);
+                  oldTail--;
+                  newTail--;
+              }
+              else if (oldKeys[oldHead] === newKeys[newTail]) {
+                  // Old head matches new tail; update and move to new tail
+                  newParts[newTail] = setChildPartValue(oldParts[oldHead], newValues[newTail]);
+                  insertPart(containerPart, newParts[newTail + 1], oldParts[oldHead]);
+                  oldHead++;
+                  newTail--;
+              }
+              else if (oldKeys[oldTail] === newKeys[newHead]) {
+                  // Old tail matches new head; update and move to new head
+                  newParts[newHead] = setChildPartValue(oldParts[oldTail], newValues[newHead]);
+                  insertPart(containerPart, oldParts[oldHead], oldParts[oldTail]);
+                  oldTail--;
+                  newHead++;
+              }
+              else {
+                  if (newKeyToIndexMap === undefined) {
+                      // Lazily generate key-to-index maps, used for removals &
+                      // moves below
+                      newKeyToIndexMap = generateMap(newKeys, newHead, newTail);
+                      oldKeyToIndexMap = generateMap(oldKeys, oldHead, oldTail);
+                  }
+                  if (!newKeyToIndexMap.has(oldKeys[oldHead])) {
+                      // Old head is no longer in new list; remove
+                      removePart(oldParts[oldHead]);
+                      oldHead++;
+                  }
+                  else if (!newKeyToIndexMap.has(oldKeys[oldTail])) {
+                      // Old tail is no longer in new list; remove
+                      removePart(oldParts[oldTail]);
+                      oldTail--;
+                  }
+                  else {
+                      // Any mismatches at this point are due to additions or
+                      // moves; see if we have an old part we can reuse and move
+                      // into place
+                      const oldIndex = oldKeyToIndexMap.get(newKeys[newHead]);
+                      const oldPart = oldIndex !== undefined ? oldParts[oldIndex] : null;
+                      if (oldPart === null) {
+                          // No old part for this value; create a new one and
+                          // insert it
+                          const newPart = insertPart(containerPart, oldParts[oldHead]);
+                          setChildPartValue(newPart, newValues[newHead]);
+                          newParts[newHead] = newPart;
+                      }
+                      else {
+                          // Reuse old part
+                          newParts[newHead] = setChildPartValue(oldPart, newValues[newHead]);
+                          insertPart(containerPart, oldParts[oldHead], oldPart);
+                          // This marks the old part as having been used, so that
+                          // it will be skipped in the first two checks above
+                          oldParts[oldIndex] = null;
+                      }
+                      newHead++;
+                  }
+              }
+          }
+          // Add parts for any remaining new values
+          while (newHead <= newTail) {
+              // For all remaining additions, we insert before last new
+              // tail, since old pointers are no longer valid
+              const newPart = insertPart(containerPart, newParts[newTail + 1]);
+              setChildPartValue(newPart, newValues[newHead]);
+              newParts[newHead++] = newPart;
+          }
+          // Remove any remaining unused old parts
+          while (oldHead <= oldTail) {
+              const oldPart = oldParts[oldHead++];
+              if (oldPart !== null) {
+                  removePart(oldPart);
+              }
+          }
+          // Save order of new parts for next round
+          this._itemKeys = newKeys;
+          // Directly set part value, bypassing it's dirty-checking
+          setCommittedValue(containerPart, newParts);
+          return noChange;
+      }
+  }
+  /**
+   * A directive that repeats a series of values (usually `TemplateResults`)
+   * generated from an iterable, and updates those items efficiently when the
+   * iterable changes based on user-provided `keys` associated with each item.
+   *
+   * Note that if a `keyFn` is provided, strict key-to-DOM mapping is maintained,
+   * meaning previous DOM for a given key is moved into the new position if
+   * needed, and DOM will never be reused with values for different keys (new DOM
+   * will always be created for new keys). This is generally the most efficient
+   * way to use `repeat` since it performs minimum unnecessary work for insertions
+   * and removals.
+   *
+   * The `keyFn` takes two parameters, the item and its index, and returns a unique key value.
+   *
+   * ```js
+   * html`
+   *   <ol>
+   *     ${repeat(this.items, (item) => item.id, (item, index) => {
+   *       return html`<li>${index}: ${item.name}</li>`;
+   *     })}
+   *   </ol>
+   * `
+   * ```
+   *
+   * **Important**: If providing a `keyFn`, keys *must* be unique for all items in a
+   * given call to `repeat`. The behavior when two or more items have the same key
+   * is undefined.
+   *
+   * If no `keyFn` is provided, this directive will perform similar to mapping
+   * items to values, and DOM will be reused against potentially different items.
+   */
+  const repeat = directive(RepeatDirective);
+
   /**
    * @summary ComboBox component is used for users to make one or more selections from a list through user input, keyboard or mouse actions
    *
@@ -13213,6 +13763,29 @@
           if (!this._isTouched && this.value === "")
               return;
           this.invalid = !this._mixinReportValidity();
+          // When value is updated by user and it doesn't map to selectedItems, we should re-map selectedItems
+          const selectedItemVal = this.selectedItems.map(val => val.value).join(";");
+          if (selectedItemVal !== this.value) {
+              this._updateValueAndDisplayValue();
+          }
+      }
+      _handleMenuListChange() {
+          this._updateValueAndDisplayValue();
+          this._renderedMenu = this.menuList;
+      }
+      _updateValueAndDisplayValue() {
+          var _a, _b;
+          const valueArray = this.value.split(";");
+          const initialSelectedItem = this.menuList.filter(({ value }) => valueArray.includes(value));
+          this.selectedItems = [...initialSelectedItem];
+          // When the new filtered items don't match value we update it
+          const updatedValue = initialSelectedItem.map(item => item.value).join(";");
+          if (updatedValue !== this.value) {
+              this.value = updatedValue;
+          }
+          if (!this.multiSelect) {
+              this.displayValue = (_b = (_a = initialSelectedItem[0]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : "";
+          }
       }
       // Called each time the user types in the <sgds-input>, we set .value and show the menu
       async _handleInputChange(e) {
@@ -13335,29 +13908,39 @@
       }
       _renderMenu() {
           const emptyMenu = html ` <div class="empty-menu">No options</div> `;
-          const menu = this._renderedMenu.map(item => {
-              let isActive = false;
-              if (this.multiSelect) {
-                  const selectedItemValueArray = this.selectedItems.map(i => i.value);
-                  isActive = selectedItemValueArray.includes(item.value);
-              }
-              else {
-                  isActive = item.value === this.value;
-              }
-              return html `
-        <sgds-combo-box-item
-          ?active=${isActive}
-          ?checkbox=${this.multiSelect}
-          value=${item.value}
-          @sgds-select=${this._handleItemSelected}
-          @sgds-unselect=${this._handleItemUnselect}
-        >
-          ${item.label}
-        </sgds-combo-box-item>
-      `;
-          });
-          return this._renderedMenu.length === 0 ? emptyMenu : menu;
+          const menu = this._renderedMenu.length === 0
+              ? emptyMenu
+              : repeat(this._renderedMenu, item => item.value, item => {
+                  let isActive = false;
+                  if (this.multiSelect) {
+                      const selectedItemValueArray = this.selectedItems.map(i => i.value);
+                      isActive = selectedItemValueArray.includes(item.value);
+                  }
+                  else {
+                      isActive = item.value === this.value;
+                  }
+                  return html `
+                <sgds-combo-box-item
+                  ?active=${isActive}
+                  ?checkbox=${this.multiSelect}
+                  value=${item.value}
+                  @sgds-select=${this._handleItemSelected}
+                  @sgds-unselect=${this._handleItemUnselect}
+                >
+                  ${item.label}
+                </sgds-combo-box-item>
+              `;
+              });
+          return menu;
       }
+      /**
+       * Used `repeat` helper from Lit to render instead of .map:
+       * The reassigning of value is affecting the truncation on badge as it is not triggering the slot change event.
+       *
+       * To compare this to lit-html's default handling for lists, consider reversing a large list of names:
+       * For a list created using Array.map, lit-html maintains the DOM nodes for the list items, but reassigns the values
+       * For a list created using repeat, the repeat directive reorders the existing DOM nodes, so the nodes representing the first list item move to the last position.
+       */
       _renderInput() {
           const wantFeedbackStyle = this.hasFeedback;
           return html `
@@ -13373,7 +13956,7 @@
         <div class="combobox-input-container">
           ${this.multiSelect
             ? html `
-                ${this.selectedItems.map(item => html `<sgds-badge
+                ${repeat(this.selectedItems, item => item.value, item => html `<sgds-badge
                       outlined
                       variant="neutral"
                       show
@@ -13456,6 +14039,9 @@
   __decorate([
       watch("value", { waitUntilFirstUpdate: true })
   ], SgdsComboBox.prototype, "_handleValueChange", null);
+  __decorate([
+      watch("menuList", { waitUntilFirstUpdate: true })
+  ], SgdsComboBox.prototype, "_handleMenuListChange", null);
 
   register("sgds-combo-box", SgdsComboBox);