@watermarkinsights/ripple 4.0.0-9 → 4.0.0

package/dist/esm/wm-tag-input.entry.js

@@ -1,90 +1,150 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-294d486f.js';
-import { g as generateId, d as debounce, q as csvToArray, i as intl, r as safeParseJSON, u as measureText, j as truncateText, h as hideTooltip, s as showTooltip, m as shouldOpenUp } from './functions-061ab506.js';
-import { g as globalMessages } from './intl-d698d52f.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-294d486f.js';
+import { i as intl, d as debounce, q as measureText, j as truncateText, h as hideTooltip, r as findNext, u as findPrev, s as showTooltip, m as shouldOpenUp, v as csvToArray } from './functions-358a1a02.js';
+import { g as globalMessages } from './intl-48057c4d.js';
 
-const wmTagInputCss = ":host{--wmcolor-taginput-altrow-background-table:var(--wmcolor-table-altrow-background);--wmcolor-taginput-border:var(--wmcolor-input-border);--wmcolor-taginput-charcount-background:var(--wmcolor-input-charcount-background);--wmcolor-taginput-header-background-table:var(--wmcolor-table-header-background);--wmcolor-taginput-help-text:var(--wmcolor-text);--wmcolor-taginput-icon:var(--wmcolor-icon-accent);--wmcolor-taginput-maxtags-background:var(--wmcolor-background-readonly);--wmcolor-taginput-maxtags-border:var(--wmcolor-input-border);--wmcolor-taginput-maxtags-text:var(--wmcolor-text);--wmcolor-taginput-option-background-hover:var(--wmcolor-option-background-hover);--wmcolor-taginput-option-background:var(--wmcolor-option-background);--wmcolor-taginput-option-border:var(--wmcolor-option-border);--wmcolor-taginput-option-text-selected:var(--wmcolor-option-text-disabled);--wmcolor-taginput-option-text:var(--wmcolor-interactive);--wmcolor-taginput-row-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-taginput-row-background-selected:var(--wmcolor-table-row-background-selected);--wmcolor-taginput-row-background-table:var(--wmcolor-table-row-background);--wmcolor-taginput-row-border-selected:var(--wmcolor-table-row-border-selected);--wmcolor-taginput-tag-background-focus:var(--wmcolor-palelilacgray-dark);--wmcolor-taginput-tag-background-highlight:var(--wmcolor-background-highlight);--wmcolor-taginput-tag-background-locked:var(--wmcolor-interactive-disabled);--wmcolor-taginput-tag-background:var(--wmcolor-palelilacgray);--wmcolor-taginput-tag-text-locked:var(--wmcolor-text-ondark);--wmcolor-taginput-tag-text:var(--wmcolor-text);--wmcolor-taginput-tagbutton-background-hover:var(--wmcolor-button-background-icononly-hover);--wmcolor-taginput-tagbutton-border:var(--wmcolor-button-border-icononly);--wmcolor-taginput-tagbutton-icon-hover:var(--wmcolor-button-icon-icononly-hover);--wmcolor-taginput-tagbutton-icon:var(--wmcolor-button-icon-icononly);font-family:inherit;width:100%;display:block;max-height:80vh}:host *{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:14px}:host .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required{color:var(--wmcolor-text-required)}:host .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label{color:var(--wmcolor-text-error)}:host .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper{width:100%;height:100%;max-height:inherit;min-height:inherit;position:relative}:host .field-wrapper{position:relative;width:100%;border:1px solid;border-color:var(--wmcolor-taginput-border);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px}:host .field-wrapper.focused{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);outline:none;border-color:var(--wmcolor-input-border-focus)}:host .field-wrapper.invalid{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}:host .wrapper:not(.label-left) .field-wrapper{-ms-flex-negative:0;flex-shrink:0}:host .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:var(--wmcolor-taginput-charcount-background);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .tags-and-input-wrapper{position:relative;width:100%;padding:8px 8px 8px 0;overflow:auto;max-height:200px}:host .tags-and-input-wrapper.in-modal{max-height:20vh}:host .upper-row{width:100%;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:justify;justify-content:space-between}:host .upper-row:before{-ms-flex-item-align:start;align-self:flex-start;display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f349\";color:var(--wmcolor-taginput-icon);padding:0.75rem 0.5rem 0.75rem 0.75rem;line-height:normal;font-size:1.12rem}:host .lower-row{width:100%;min-height:1.875rem}:host #max-tags{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:1.875rem;background-color:var(--wmcolor-taginput-maxtags-background);padding:0.5rem 1rem;color:var(--wmcolor-taginput-maxtags-text);font-size:0.875rem;border-top:1px solid var(--wmcolor-taginput-maxtags-border);border-radius:0 0 3px 3px}:host .tag-area{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0;margin:0;gap:8px}:host .tag-area:focus{outline:none}:host .tag-area [role=option]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:1.75rem;list-style:none;color:var(--wmcolor-taginput-tag-text);background-color:var(--wmcolor-taginput-tag-background);padding:0.5rem 0.625rem;-webkit-transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:pre}:host .tag-area [role=option].highlight{-webkit-animation:fadeIn 1s;animation:fadeIn 1s}@-webkit-keyframes fadeIn{0%{background-color:var(--wmcolor-taginput-tag-background)}50%{background-color:var(--wmcolor-taginput-tag-background-highlight)}100%{background-color:var(--wmcolor-taginput-tag-background)}}@keyframes fadeIn{0%{background-color:var(--wmcolor-taginput-tag-background)}50%{background-color:var(--wmcolor-taginput-tag-background-highlight)}100%{background-color:var(--wmcolor-taginput-tag-background)}}:host .tag-area [role=option].focused{background-color:var(--wmcolor-taginput-tag-background-focus)}:host .tag-area [role=option].locked{background-color:var(--wmcolor-taginput-tag-background-locked);color:var(--wmcolor-taginput-tag-text-locked)}:host .tag-area [role=option] .icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:1.25rem;width:1.25rem;padding:0;margin-left:0.5rem}:host .tag-area [role=option] .icon.remove-btn{border:1px solid var(--wmcolor-taginput-tagbutton-border);color:var(--wmcolor-taginput-tagbutton-icon);border-radius:50%;cursor:pointer;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1)}:host .tag-area [role=option] .icon.remove-btn:hover{color:var(--wmcolor-taginput-tagbutton-icon-hover);background-color:var(--wmcolor-taginput-tagbutton-background-hover)}:host .tag-area [role=option] .icon.remove-btn:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f156\"}:host .tag-area [role=option] .icon.lock{color:var(--wmcolor-taginput-tag-text-locked)}:host .tag-area [role=option] .icon.lock:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f341\"}:host .input{font-family:inherit;border:none;height:1.75rem;padding:0;margin:0;right:8px}:host .input.hidden{display:none}:host .input:focus{outline:none}:host .tag-area+.input.extended{-webkit-margin-before:8px;margin-block-start:8px}:host .dropdown-wrapper{margin:0;padding:0;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:calc(100% + 2px);right:0;z-index:100;width:100%;font-size:0.875rem}:host .dropdown-wrapper .dropdown{-webkit-overflow-scrolling:touch;overflow:auto;max-height:12.5rem;margin:0;padding:0}:host .dropdown-wrapper.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .dropdown-wrapper.upwards{top:unset;bottom:calc(100% + 2px);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .dropdown-wrapper li,:host .dropdown-wrapper div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 1rem;background:var(--wmcolor-taginput-option-background);list-style:none;min-height:2.6875rem;white-space:pre-wrap;overflow-wrap:anywhere}:host .dropdown-wrapper li[role=option],:host .dropdown-wrapper li.add-new-btn,:host .dropdown-wrapper div[role=option],:host .dropdown-wrapper div.add-new-btn{cursor:pointer;color:var(--wmcolor-taginput-option-text);font-weight:bold;width:100%;border:none}:host .dropdown-wrapper li[role=option][aria-selected=true],:host .dropdown-wrapper li.add-new-btn[aria-selected=true],:host .dropdown-wrapper div[role=option][aria-selected=true],:host .dropdown-wrapper div.add-new-btn[aria-selected=true]{color:var(--wmcolor-taginput-option-text-selected);font-style:italic;font-weight:normal;cursor:unset}:host .dropdown-wrapper li[role=option]:hover:not([aria-selected=true]),:host .dropdown-wrapper li[role=option].focused,:host .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper li.add-new-btn.focused,:host .dropdown-wrapper div[role=option]:hover:not([aria-selected=true]),:host .dropdown-wrapper div[role=option].focused,:host .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper div.add-new-btn.focused{outline:none;background:var(--wmcolor-taginput-option-background-hover)}:host .dropdown-wrapper li.help-text,:host .dropdown-wrapper div.help-text{color:var(--wmcolor-taginput-help-text);height:auto;min-height:2.6875rem;padding-top:0.25rem;padding-bottom:0.25rem;white-space:normal}:host .dropdown-wrapper li:not(:last-child),:host .dropdown-wrapper div:not(:last-child){border-bottom:2px solid var(--wmcolor-taginput-option-border)}:host .info-text{font-style:italic;margin-top:0.25rem}:host .table-wrapper{overflow:auto;margin-top:1.5rem}:host .table-wrapper #table{width:100%;border-spacing:0px}:host .table-wrapper #table.fixed-widths{table-layout:fixed}:host .table-wrapper #table .headers{height:2.5rem;background-color:var(--wmcolor-taginput-header-background-table)}:host .table-wrapper #table .headers th{text-align:left;font-size:0.75rem;font-weight:700;text-transform:uppercase;padding:0 1.5rem}:host .table-wrapper tr:nth-child(even){background-color:var(--wmcolor-taginput-altrow-background-table)}:host .table-wrapper tr.selected{background-color:var(--wmcolor-taginput-row-background-selected);-webkit-box-shadow:inset 0 0 0 1px var(--wmcolor-taginput-row-border-selected);box-shadow:inset 0 0 0 1px var(--wmcolor-taginput-row-border-selected);font-weight:500}:host .table-wrapper tr.focused:not(.locked),:host .table-wrapper tr:hover:not(.locked){background-color:var(--wmcolor-taginput-row-background-hover);-webkit-box-shadow:none;box-shadow:none}:host .table-wrapper tr.locked td{cursor:auto}:host .table-wrapper tr.locked td:first-child .cell-content-wrapper:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f33e\";margin-right:0.5rem;color:var(--wmcolor-taginput-tag-text)}:host .table-wrapper td{height:3.75rem;vertical-align:middle;padding:0 1.5rem;cursor:pointer}:host .table-wrapper td.focused{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px var(--wmcolor-interactive-focus);box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px var(--wmcolor-interactive-focus)}:host .table-wrapper td .cell-content-wrapper.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .table-wrapper td .description{display:none}:host .no-results{padding:1.25rem 1.5rem}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host #error{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-top:0.25rem}";
+const wmTagInputCss = ":host{--wmcolor-taginput-altrow-background-table:var(--wmcolor-table-altrow-background);--wmcolor-taginput-border:var(--wmcolor-input-border);--wmcolor-taginput-charcount-background:var(--wmcolor-input-charcount-background);--wmcolor-taginput-header-background-table:var(--wmcolor-table-header-background);--wmcolor-taginput-help-text:var(--wmcolor-text);--wmcolor-taginput-icon:var(--wmcolor-icon-accent);--wmcolor-taginput-maxtags-background:var(--wmcolor-background-readonly);--wmcolor-taginput-maxtags-border:var(--wmcolor-input-border);--wmcolor-taginput-maxtags-text:var(--wmcolor-text);--wmcolor-taginput-option-background-hover:var(--wmcolor-option-background-hover);--wmcolor-taginput-option-background:var(--wmcolor-option-background);--wmcolor-taginput-option-border:var(--wmcolor-option-border);--wmcolor-taginput-option-text-selected:var(--wmcolor-option-text-disabled);--wmcolor-taginput-option-text:var(--wmcolor-interactive);--wmcolor-taginput-row-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-taginput-row-background-selected:var(--wmcolor-table-row-background-selected);--wmcolor-taginput-row-background-table:var(--wmcolor-table-row-background);--wmcolor-taginput-row-border-selected:var(--wmcolor-table-row-border-selected);--wmcolor-taginput-tag-background-focus:var(--wmcolor-palelilacgray-dark);--wmcolor-taginput-tag-background-highlight:var(--wmcolor-background-highlight);--wmcolor-taginput-tag-background-locked:var(--wmcolor-interactive-disabled);--wmcolor-taginput-tag-background:var(--wmcolor-palelilacgray);--wmcolor-taginput-tag-text-locked:var(--wmcolor-text-ondark);--wmcolor-taginput-tag-text:var(--wmcolor-text);--wmcolor-taginput-tagbutton-background-hover:var(--wmcolor-button-background-icononly-hover);--wmcolor-taginput-tagbutton-border:var(--wmcolor-button-border-icononly);--wmcolor-taginput-tagbutton-icon-hover:var(--wmcolor-button-icon-icononly-hover);--wmcolor-taginput-tagbutton-icon:var(--wmcolor-button-icon-icononly);font-family:inherit;width:100%;display:block;max-height:80vh}:host *{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:14px}:host .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required{color:var(--wmcolor-text-required)}:host .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label{color:var(--wmcolor-text-error)}:host .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper{width:100%;height:100%;max-height:inherit;min-height:inherit;position:relative}:host .field-wrapper{position:relative;width:100%;border:1px solid;border-color:var(--wmcolor-taginput-border);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px}:host .field-wrapper.focused{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);outline:none;border-color:var(--wmcolor-input-border-focus)}:host .field-wrapper.invalid{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}:host .wrapper:not(.label-left) .field-wrapper{-ms-flex-negative:0;flex-shrink:0}:host .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:var(--wmcolor-taginput-charcount-background);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .tags-and-input-wrapper{position:relative;width:100%;padding:8px 8px 8px 0;overflow:auto;max-height:200px}:host .tags-and-input-wrapper.in-modal{max-height:20vh}:host .upper-row{width:100%;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:justify;justify-content:space-between}:host .upper-row:before{-ms-flex-item-align:start;align-self:flex-start;display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f349\";color:var(--wmcolor-taginput-icon);padding:0.75rem 0.5rem 0.75rem 0.75rem;line-height:normal;font-size:1.12rem}:host .lower-row{width:100%;min-height:1.875rem}:host #max-tags{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:1.875rem;background-color:var(--wmcolor-taginput-maxtags-background);padding:0.5rem 1rem;color:var(--wmcolor-taginput-maxtags-text);font-size:0.875rem;border-top:1px solid var(--wmcolor-taginput-maxtags-border);border-radius:0 0 3px 3px}:host .tag-area{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0;margin:0;gap:8px}:host .tag-area:focus{outline:none}:host .tag-area li{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;height:1.75rem;list-style:none;color:var(--wmcolor-taginput-tag-text);background-color:var(--wmcolor-taginput-tag-background);padding:0.5rem 0.625rem;-webkit-transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);white-space:pre}:host .tag-area li.highlight{-webkit-animation:fadeIn 1s;animation:fadeIn 1s}@-webkit-keyframes fadeIn{0%{background-color:var(--wmcolor-taginput-tag-background)}50%{background-color:var(--wmcolor-taginput-tag-background-highlight)}100%{background-color:var(--wmcolor-taginput-tag-background)}}@keyframes fadeIn{0%{background-color:var(--wmcolor-taginput-tag-background)}50%{background-color:var(--wmcolor-taginput-tag-background-highlight)}100%{background-color:var(--wmcolor-taginput-tag-background)}}:host .tag-area li.focused{background-color:var(--wmcolor-taginput-tag-background-focus)}:host .tag-area li.locked{background-color:var(--wmcolor-taginput-tag-background-locked);color:var(--wmcolor-taginput-tag-text-locked)}:host .tag-area li .icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:1.25rem;width:1.25rem;padding:0;margin-left:0.5rem}:host .tag-area li .icon.remove-btn{border:1px solid var(--wmcolor-taginput-tagbutton-border);color:var(--wmcolor-taginput-tagbutton-icon);border-radius:50%;cursor:pointer;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1)}:host .tag-area li .icon.remove-btn:hover{color:var(--wmcolor-taginput-tagbutton-icon-hover);background-color:var(--wmcolor-taginput-tagbutton-background-hover)}:host .tag-area li .icon.remove-btn:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f156\"}:host .tag-area li .icon.lock{color:var(--wmcolor-taginput-tag-text-locked)}:host .tag-area li .icon.lock:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f341\"}:host .input{font-family:inherit;border:none;height:1.75rem;padding:0;margin:0;right:8px}:host .input:focus{outline:none}:host .tag-area:not(.empty)+.input.extended{-webkit-margin-before:8px;margin-block-start:8px}:host .dropdown-wrapper{margin:0;padding:0;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:calc(100% + 2px);right:0;z-index:100;width:100%;font-size:0.875rem}:host .dropdown-wrapper .dropdown{-webkit-overflow-scrolling:touch;overflow:auto;max-height:12.5rem;margin:0;padding:0}:host .dropdown-wrapper.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .dropdown-wrapper.upwards{top:unset;bottom:calc(100% + 2px);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}:host .dropdown-wrapper li,:host .dropdown-wrapper div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 1rem;background:var(--wmcolor-taginput-option-background);list-style:none;min-height:2.6875rem;white-space:pre-wrap;overflow-wrap:anywhere}:host .dropdown-wrapper li.option,:host .dropdown-wrapper li.add-new-btn,:host .dropdown-wrapper div.option,:host .dropdown-wrapper div.add-new-btn{cursor:pointer;color:var(--wmcolor-taginput-option-text);font-weight:bold;width:100%;border:none}:host .dropdown-wrapper li.option[aria-selected=true],:host .dropdown-wrapper li.add-new-btn[aria-selected=true],:host .dropdown-wrapper div.option[aria-selected=true],:host .dropdown-wrapper div.add-new-btn[aria-selected=true]{color:var(--wmcolor-taginput-option-text-selected);font-style:italic;font-weight:normal;cursor:unset}:host .dropdown-wrapper li.option:hover:not([aria-selected=true]),:host .dropdown-wrapper li.option.focused,:host .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper li.add-new-btn.focused,:host .dropdown-wrapper div.option:hover:not([aria-selected=true]),:host .dropdown-wrapper div.option.focused,:host .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),:host .dropdown-wrapper div.add-new-btn.focused{outline:none;background:var(--wmcolor-taginput-option-background-hover)}:host .dropdown-wrapper li.help-text,:host .dropdown-wrapper div.help-text{color:var(--wmcolor-taginput-help-text);height:auto;min-height:2.6875rem;padding-top:0.25rem;padding-bottom:0.25rem;white-space:normal}:host .dropdown-wrapper li:not(:last-child),:host .dropdown-wrapper div:not(:last-child){border-bottom:2px solid var(--wmcolor-taginput-option-border)}:host .info-text{font-style:italic;margin-top:0.25rem}:host .table-wrapper{overflow:auto;margin-top:1.5rem}:host .table-wrapper #table{width:100%;border-spacing:0px}:host .table-wrapper #table.fixed-widths{table-layout:fixed}:host .table-wrapper #table .headers{height:2.5rem;background-color:var(--wmcolor-taginput-header-background-table)}:host .table-wrapper #table .headers th{text-align:left;font-size:0.75rem;font-weight:700;text-transform:uppercase;padding:0 1.5rem}:host .table-wrapper tr:nth-child(even){background-color:var(--wmcolor-taginput-altrow-background-table)}:host .table-wrapper tr.selected,:host .table-wrapper tr.locked{background-color:var(--wmcolor-taginput-row-background-selected);-webkit-box-shadow:inset 0 0 0 1px var(--wmcolor-taginput-row-border-selected);box-shadow:inset 0 0 0 1px var(--wmcolor-taginput-row-border-selected);font-weight:500}:host .table-wrapper tr.focused:not(.locked),:host .table-wrapper tr:hover:not(.locked){background-color:var(--wmcolor-taginput-row-background-hover);-webkit-box-shadow:none;box-shadow:none}:host .table-wrapper tr.locked td{cursor:auto}:host .table-wrapper tr.locked td:first-child .cell-content-wrapper:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f33e\";margin-right:0.5rem;color:var(--wmcolor-taginput-tag-text)}:host .table-wrapper td{height:3.75rem;vertical-align:middle;padding:0 1.5rem;cursor:pointer}:host .table-wrapper td.focused{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px var(--wmcolor-interactive-focus);box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px var(--wmcolor-interactive-focus)}:host .table-wrapper td .cell-content-wrapper.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .table-wrapper td .description{display:none}:host .no-results{padding:1.25rem 1.5rem}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host #error{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-top:0.25rem}";
 
 const TagInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.wmTagInputChanged = createEvent(this, "wmTagInputChanged", 7);
-    this.uid = this.el.id ? this.el.id : generateId();
+    this.wmTagInputTagAdded = createEvent(this, "wmTagInputTagAdded", 7);
+    this.addNewHelpText = intl.formatMessage({
+      id: "tagInput.addNewHelpText",
+      defaultMessage: "Press the Enter or Comma key to add a new tag.",
+      description: "Help text appearing in a dropdown. Use imperative",
+    });
+    this.selectionHelpText = intl.formatMessage({
+      id: "tagInput.selectionHelpText",
+      defaultMessage: "Search and select a tag.",
+      description: "Help text appearing in a dropdown. Use imperative",
+    });
+    this.maxTagsReachedMessage = intl.formatMessage({
+      id: "tagInput.maxTagsReached",
+      defaultMessage: "No more tags can be added because the limit has been reached.",
+    });
+    this.tagAreaInstructions = intl.formatMessage({
+      id: "tagInput.tagAreaInstructions",
+      defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
+    });
+    this.tagsAddedMessage = intl.formatMessage({
+      id: "tagInput.tagsAdded",
+      defaultMessage: "Tags added",
+      description: "Full message for context: 'Tags added: x/y",
+    });
     this.openUp = false;
     this.inModal = false;
+    this.lastAddedTags = []; // the tag(s) added by the user on their last action (for highlighting)
     this.debouncedUpdate = debounce(() => forceUpdate(this.el), 30);
     this.label = undefined;
-    this.labelPosition = "top";
-    this.options = "";
-    this.selectedTags = "";
-    this.info = undefined;
     this.errorMessage = undefined;
-    this.addNew = true;
+    this.info = undefined;
+    this.labelPosition = "top";
+    this.maxTags = undefined;
     this.placeholder = undefined;
     this.requiredField = false;
-    this.characterLimit = 50;
-    this.maxTags = undefined;
     this.tagInputType = "dropdown";
+    this.helpText = undefined;
+    this.addNew = true;
+    this.characterLimit = 50;
     this.colHeaders = undefined;
     this.colWidths = undefined;
     this.colWrap = undefined;
-    this.messageConfig = "";
-    this.focusedListItem = undefined;
-    this.focusedTag = null;
-    this.tablePosition = { row: 0, column: 1 };
     this.isExpanded = false;
-    this.tagsList = csvToArray(this.selectedTags);
-    this.optionsList = csvToArray(this.options);
-    this.charCount = 0;
     this.liveRegionMessage = "";
+    this.focusedOption = undefined;
+    this.focusedColumn = 0;
+    this.focusedTagIndex = undefined;
+    this.tagsList = [];
+  }
+  get isDropdown() {
+    return this.tagInputType === "dropdown";
+  }
+  get isTable() {
+    return this.tagInputType === "table";
+  }
+  get charCount() {
+    return this.inputEl ? this.inputEl.value.length : 0;
   }
   get tooltipVisible() {
     return document.getElementById("wm-tooltip").classList.contains("show");
   }
-  get focusedElement() {
-    return this.el.shadowRoot.activeElement;
+  get optionEls() {
+    return Array.from(this.el.querySelectorAll("wm-tag-option"));
+  }
+  // list of options matching user query
+  get filteredOptionEls() {
+    const query = this.inputEl ? this.inputEl.value.toLowerCase() : "";
+    const list = Array.from(this.optionEls).filter((o) => {
+      let values = "";
+      if (this.isDropdown) {
+        values = o.textContent.toLowerCase();
+      }
+      else if (this.isTable) {
+        values = [o.col1, o.col2, o.col3, o.col4].join("").toLowerCase();
+      }
+      return values.includes(query);
+    });
+    return list;
   }
-  get listItemEls() {
-    return Array.from(this.dropdownEl.querySelectorAll("li"));
+  // the ones that should be rendered as tags
+  get taggedOptions() {
+    return this.optionEls.filter((o) => o.selected || o.locked);
   }
-  get tagEls() {
+  // for visual stuff (measuring, truncating...)
+  get _tagEls() {
     return this.tagAreaEl ? Array.from(this.tagAreaEl.querySelectorAll(".tag")) : [];
   }
-  get nonLockedTagEls() {
-    return this.tagEls.filter((tag) => !tag.classList.contains("locked"));
+  // unlocked and selected tags, i.e. the ones that the user can interact with.
+  // (as opposed to locked tags who can't be focused / deleted)
+  // used for focus logic
+  get focusableTags() {
+    return this._tagEls.filter((t) => !t.classList.contains("locked"));
   }
-  get optionEls() {
-    return Array.from(this.dropdownEl.querySelectorAll(".option"));
+  get focusedTag() {
+    if (this.focusedTagIndex !== undefined && this.focusedTagIndex >= 0)
+      return this.focusableTags[this.focusedTagIndex];
   }
-  get wmRowEls() {
-    return Array.from(this.el.querySelectorAll("wm-tag-input-row"));
+  // get the wm-tag-option, given the internal representation (dropdown li or table tr)
+  tagOptionFromEl(el) {
+    return el.id === "add-new-btn" ? undefined : this.el.querySelector("#" + el.id);
   }
-  get localRowEls() {
-    return Array.from(this.el.shadowRoot.querySelectorAll("tr"));
+  // get the wm-tag-option, given the internal representation of a tag
+  tagOptionFromTag(el) {
+    const id = el.id.replace("tag-", "");
+    return this.el.querySelector("#" + id);
   }
-  get filteredRows() {
-    return this.wmRowEls.filter((row) => {
-      const query = this.inputEl ? this.inputEl.value.toLowerCase() : "";
-      const colValues = [row.col1, row.col2, row.col3, row.col4].join("").toLowerCase();
-      return colValues.includes(query);
-    });
+  // get the internal representation of a wm-tag-option
+  elFromTagOption(el) {
+    return this.el.shadowRoot.querySelector("#" + el.id);
   }
-  get nonLockedTagsList() {
-    let list = [];
-    if (this.tagInputType === "table") {
-      this.tagsList.forEach((id) => {
-        const correspondingRowEl = this.wmRowEls.filter((row) => id === row.id)[0];
-        if (!correspondingRowEl.locked) {
-          list.push(id);
-        }
-      });
+  // focusedOption state refers to the wm-tag-option. This gets the corresponding element in the shadow DOM, or the "Add New" button.
+  get _focusedOption() {
+    if (!!this.focusedOption) {
+      return this.elFromTagOption(this.focusedOption);
     }
-    else if (this.tagInputType === "dropdown") {
-      list = this.tagsList;
+    else if (this.addNewButton && this.addNewButton.classList.contains("focused")) {
+      return this.addNewButton;
     }
-    return list;
+  }
+  get _focusedCell() {
+    if (!!this._focusedOption) {
+      const allCells = Array.from(this._focusedOption.querySelectorAll("td"));
+      const index = this.focusedColumn || 0;
+      return allCells[index];
+    }
+  }
+  get inputActiveDescendantId() {
+    if (this._focusedOption) {
+      if (this.isTable) {
+        const cells = Array.from(this._focusedOption.querySelectorAll("td"));
+        return cells[this.focusedColumn].id;
+      }
+      return this._focusedOption.id;
+    }
+    return null;
   }
   get tagLimitReached() {
-    return !!(this.maxTags && this.tagsList.length >= this.maxTags);
+    return !!(this.maxTags && this.taggedOptions.length >= this.maxTags);
   }
   get noResultsMessage() {
     return intl.formatMessage({
@@ -93,78 +153,62 @@ const TagInput = class {
       description: "Message displayed when a user's search returns empty.",
     });
   }
-  get componentMessages() {
-    const addNewHelpText = intl.formatMessage({
-      id: "tagInput.addNewHelpText",
-      defaultMessage: "Press the Enter or Comma key to add a new tag.",
-      description: "Help text appearing in a dropdown. Use imperative",
-    });
-    const selectionHelpText = intl.formatMessage({
-      id: "tagInput.selectionHelpText",
-      defaultMessage: "Search and select a tag.",
-      description: "Help text appearing in a dropdown. Use imperative",
-    });
-    const maxTagsReachedMessage = intl.formatMessage({
-      id: "tagInput.maxTagsReached",
-      defaultMessage: "No more tags can be added because the limit has been reached.",
-    });
-    const tagAreaInstructions = intl.formatMessage({
-      id: "tagInput.tagAreaInstructions",
-      defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
-    });
-    const tagsAddedMessage = intl.formatMessage({
-      id: "tagInput.tagsAdded",
-      defaultMessage: "Tags added",
-      description: "For the user to understand how close they are to the tag limit, followed by x/y count",
-    });
-    const defaultConfig = {
-      addNewHelpText: addNewHelpText,
-      selectionHelpText: selectionHelpText,
-      maxTagsReached: maxTagsReachedMessage,
-      tagAreaInstructions: tagAreaInstructions,
-      tagsAdded: tagsAddedMessage,
-    };
-    const userProvidedConfig = safeParseJSON(this.messageConfig);
-    return userProvidedConfig ? Object.assign(Object.assign({}, defaultConfig), userProvidedConfig) : defaultConfig;
-  }
   get inputMinimumWidth() {
-    // 150px is the minimum width of the input field, or the length of the placeholder text
-    const inputElStyles = getComputedStyle(this.inputEl);
-    const tagElStyles = getComputedStyle(this.tagEls[this.tagEls.length - 1]);
-    const inputElBuffer = [
-      inputElStyles.paddingLeft,
-      inputElStyles.paddingRight,
-      inputElStyles.marginLeft,
-      inputElStyles.marginRight,
-      tagElStyles.marginRight,
-    ].reduce((prev, curr) => prev + parseInt(curr.replace("px", "")), 0);
-    const minimumWidth = Math.max(150, measureText(this.inputEl, this.placeholder).width + inputElBuffer);
-    return minimumWidth;
-  }
-  generateTagAddedMessage(tag) {
+    if (this._tagEls) {
+      // 150px is the minimum width of the input field, or the length of the placeholder text
+      const inputElStyles = getComputedStyle(this.inputEl);
+      const tagElStyles = getComputedStyle(this._tagEls[this._tagEls.length - 1]);
+      const inputElBuffer = [
+        inputElStyles.paddingLeft,
+        inputElStyles.paddingRight,
+        inputElStyles.marginLeft,
+        inputElStyles.marginRight,
+        tagElStyles.marginRight,
+      ].reduce((prev, curr) => prev + parseInt(curr.replace("px", "")), 0);
+      const minimumWidth = Math.max(150, measureText(this.inputEl, this.placeholder).width + inputElBuffer);
+      return minimumWidth;
+    }
+    else {
+      return 150;
+    }
+  }
+  getTagName(o) {
+    // when the user is typing and adding a new option, all we can pass is the text typed. so for the dropdown type the tag name is the identifier. It also takes care of duplicates. Table variant requires an id as the tag name is the first column but we want to allow duplicates here (e.g. people with the same name)
+    return this.isDropdown ? o.textContent : o.col1;
+  }
+  tagAddedMessage(tag) {
     return intl.formatMessage({
       id: "tagInput.tagAdded",
       defaultMessage: "{tagName} added.",
       description: "A confirmation for adding a tag.",
     }, { tagName: tag });
   }
-  generateTagAlreadyAddedMessage(tag) {
+  tagRemovedMessage(tag) {
+    return intl.formatMessage({
+      id: "tagInput.tagRemoved",
+      defaultMessage: "{tagName} removed.",
+      description: "A confirmation for removing a tag.",
+    }, { tagName: tag });
+  }
+  tagAlreadyAddedMessage(tag) {
     return intl.formatMessage({
       id: "tagInput.tagAlreadyAdded",
       defaultMessage: "{tagName} has already been added.",
       description: "An alert for adding a tag that is already present.",
     }, { tagName: tag });
   }
+  isElOrChild(el) {
+    return el === this.el || this.el.shadowRoot.contains(el) || this.el.contains(el);
+  }
   componentWillLoad() {
     if (!this.placeholder) {
-      this.placeholder = this.createPlaceholderDefault(this.addNew, !!this.options);
+      this.placeholder = this.createPlaceholderDefault(this.addNew, !!this.optionEls);
     }
     if (!this.label) {
       console.error("wm-tag-input must have a label property");
     }
-    this.consolidateSelectedTags();
     this.el.focus = () => {
-      const firstFocusableTag = this.nonLockedTagEls[0];
+      const firstFocusableTag = this.focusableTags[0];
       if (firstFocusableTag) {
         this.tagAreaEl.focus();
         this.focusTag(firstFocusableTag);
@@ -180,37 +224,115 @@ const TagInput = class {
     if (this.el.closest("wm-modal")) {
       this.inModal = true;
     }
+    const lockedTags = [];
+    const regularTags = [];
+    this.optionEls.forEach((o) => {
+      if (o.locked) {
+        lockedTags.push(o);
+      }
+      else if (o.selected) {
+        regularTags.push(o);
+      }
+    });
+    this.tagsList = [...lockedTags, ...regularTags];
   }
   componentDidLoad() {
-    // prevent highlighting of pre-selected tags
-    this.tagEls.forEach((el) => el.classList.remove("highlight"));
+    // Set up observer to announce changes in selected tags, or removed user-added tags
+    const observerAnnouncer = new MutationObserver((optionListMutations) => optionListMutations.forEach((mutationRecord) => this.handleChangeAnnouncement(mutationRecord)));
+    observerAnnouncer.observe(this.el, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["selected"],
+      childList: true,
+    });
+    // Set up observer that ensures parent reload
+    // when children wm-tag-options are removed
+    const optionListObserver = new MutationObserver((optionListMutations) => optionListMutations.forEach((mutationRecord) => this.handleOptionListChange(mutationRecord)));
+    optionListObserver.observe(this.el, {
+      childList: true,
+    });
+    // Set up the observer that will handle focus
+    // when tag list changes
+    if (!!this.tagAreaEl) {
+      const tagListObserver = new MutationObserver((tagListMutations) => tagListMutations.forEach((mutationRecord) => this.handleTagListChange(mutationRecord)));
+      tagListObserver.observe(this.tagAreaEl, {
+        childList: true,
+      });
+    }
+  }
+  handleChangeAnnouncement(mutationRecord) {
+    const tagOptionEl = mutationRecord.target;
+    if (mutationRecord.type == "childList" && mutationRecord.removedNodes.length > 0) {
+      // announce deselection of user-added tag, whose element removal is picked up
+      this.announce(this.tagRemovedMessage(mutationRecord.removedNodes[0].textContent));
+    }
+    else if (mutationRecord.type == "attributes") {
+      // announce selection or deselection of all kinds of tags
+      if (tagOptionEl.selected) {
+        this.announce(this.tagAddedMessage(tagOptionEl.textContent));
+      }
+      else {
+        this.announce(this.tagRemovedMessage(tagOptionEl.textContent));
+      }
+    }
+  }
+  handleOptionListChange(record) {
+    const addedNodes = Array.from(record.addedNodes);
+    if (addedNodes.length > 0) {
+      addedNodes.forEach((n) => !this.tagsList.includes(n) && this.tagsList.push(n));
+    }
+    const removedNodes = Array.from(record.removedNodes);
+    if (removedNodes.length > 0) {
+      this.tagsList = this.tagsList.filter((t) => !removedNodes.includes(t));
+    }
+  }
+  handleTagOptionSelected(ev) {
+    const selOption = ev.target;
+    this.tagsList = this.tagsList.concat(selOption);
+  }
+  handleTagOptionDeselected(ev) {
+    const deselOption = ev.target;
+    this.tagsList = this.tagsList.filter((t) => t != deselOption);
+  }
+  handleTagListChange(mutationRecord) {
+    // there are 2 cases: the option still exists but is no longer selected,
+    // or it was removed altogether
+    const removedTag = mutationRecord.removedNodes[0];
+    if (!!removedTag) {
+      // this is a trick. focusedTag gets the ref from an index. When an element
+      // is removed it will fall back on the new element with that index if it exists
+      if (this.focusedTag) {
+        this.focusTag(this.focusedTag);
+      }
+      else if (this.focusableTags.length > 0) {
+        // Otherwise the last tag was deleted and we reassign to the new last tag.
+        const tagToFocus = this.focusableTags[this.focusableTags.length - 1];
+        this.focusTag(tagToFocus);
+      }
+      else {
+        // unless there are no more tags...
+        this.inputEl.focus();
+      }
+      this.lastAddedTags = [];
+    }
   }
   componentDidRender() {
     this.positionInput();
     // check each tag if truncation is needed
-    this.tagEls.forEach((tag) => {
+    this._tagEls.forEach((tag) => {
       const textEl = tag.querySelector(".tag-text");
       const wrapper = this.el.shadowRoot.querySelector(".tags-and-input-wrapper");
       const leftBound = textEl.getBoundingClientRect().left;
       // the numbers represent spacing values for padding, margin, and delete icon
       const rightBound = wrapper.getBoundingClientRect().right - 10 - 8 - 28;
-      let displayText = tag.dataset.tag;
-      if (this.tagInputType === "table") {
-        // table variant doesn't display the tag id, but the contents of the first column
-        const referencedRow = this.el.querySelector(`#${displayText}`);
-        displayText = referencedRow ? referencedRow.col1 : "";
+      const id = tag.id.replace("tag-", "");
+      const optionEl = id && this.el.querySelector("#" + id);
+      if (optionEl) {
+        // tag text for table variant is first column text
+        textEl.textContent = truncateText(textEl, this.getTagName(optionEl), rightBound - leftBound, 5);
       }
-      textEl.textContent = truncateText(textEl, displayText, rightBound - leftBound, 5);
     });
   }
-  consolidateSelectedTags() {
-    this.tagsList.forEach((tag) => {
-      if (!this.includesCaseInsensitive(this.optionsList, tag)) {
-        this.options += `${this.options.length > 0 ? "," : ""}${tag}`;
-      }
-    });
-    this.optionsList = csvToArray(this.options);
-  }
   createPlaceholderDefault(addNew, hasOptions) {
     const addAndSearchPlaceholder = intl.formatMessage({
       id: "tagInput.placeholderAddAndSearch",
@@ -239,38 +361,40 @@ const TagInput = class {
     }
     return placeholder;
   }
-  reflectSelectedTags(newValue, oldValue) {
-    const isAddition = newValue.length > oldValue.length;
-    let changedTag = "";
-    let selectedTags = this.tagsList;
-    if (isAddition) {
-      changedTag = newValue.filter((val) => !oldValue.includes(val))[0];
-    }
-    else {
-      changedTag = oldValue.filter((val) => !newValue.includes(val))[0];
-    }
-    // event emitted by type table uses element references instead of strings
-    if (this.tagInputType === "table") {
-      changedTag = this.wmRowEls.filter((row) => row.id === changedTag)[0];
-      selectedTags = this.tagsList.map((id) => this.el.querySelector(`#${id}`));
-    }
-    this.selectedTags = this.listToCSV(this.tagsList);
-    let detail = { value: selectedTags, tagChanged: changedTag };
-    this.wmTagInputChanged.emit(detail);
-  }
   handleErrorMessageChange() {
     if (this.errorMessage) {
       this.announce(this.errorMessage);
     }
   }
-  handleRowUpdate() {
-    forceUpdate(this.el);
-  }
-  closeIfNotElOrChild(ev) {
-    const isntElOrChild = ev.target !== this.el && !this.el.shadowRoot.contains(ev.target);
-    if (this.tagInputType === "dropdown" && isntElOrChild && this.isExpanded) {
+  handleClick(ev) {
+    const el = ev.target;
+    if (this.isDropdown && !this.el.contains(el) && this.isExpanded) {
       this.closeDropdown();
     }
+    else if (Array.from(this.el.children).includes(el)) {
+      const option = el;
+      const tagName = this.getTagName(option);
+      this.lastAddedTags = [tagName];
+    }
+  }
+  handleOptionClick(ev) {
+    ev.preventDefault();
+    this.resetInput();
+    let option;
+    if (this.isTable) {
+      option = ev.target;
+      option = this.tagOptionFromEl(option.closest("tr"));
+    }
+    else {
+      option = this.tagOptionFromEl(ev.target);
+    }
+    // if someone wants to attach a click event listener on wm-tag-option
+    option.click();
+    if (!option.locked) {
+      option.selected
+        ? this.isTable && option.emitDeselectedEvent() // dropdown doesn't deselect on option click
+        : option.emitSelectedEvent();
+    }
   }
   // From wm-button
   // we need to listen for scroll events during the capture phase because they do not bubble up
@@ -282,8 +406,8 @@ const TagInput = class {
     }
   }
   handleInputKeyDown(ev) {
-    if (/^.$/.test(ev.key) && this.inputEl.value.length >= this.characterLimit) {
-      this.announce(this.generateCharacterLimitWarning(this.inputEl.value.length, this.characterLimit));
+    if (/^.$/.test(ev.key) && this.charCount >= this.characterLimit) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
     }
     // prevent keydown triggering on tag area
     ev.stopPropagation();
@@ -301,19 +425,19 @@ const TagInput = class {
         this.handleInputArrowUp();
         break;
       case "ArrowLeft":
-        if (this.tagInputType === "table" && this.tablePosition.row) {
+        if (this.isTable) {
           ev.preventDefault();
-          this.moveLeftCell();
+          this.focusPrevCell();
         }
         break;
       case "ArrowRight":
-        if (this.tagInputType === "table" && this.tablePosition.row) {
+        if (this.isTable) {
           ev.preventDefault();
-          this.moveRightCell();
+          this.focusNextCell();
         }
         break;
       case "Escape":
-        if (this.tagInputType === "dropdown" && this.isExpanded) {
+        if (this.isDropdown && this.isExpanded) {
           this.closeDropdown();
         }
         break;
@@ -324,17 +448,14 @@ const TagInput = class {
     }
   }
   handleInputFocus() {
-    if (this.tagInputType === "dropdown") {
+    if (this.isDropdown) {
       this.openDropdown();
-      this.clearListItemFocus();
+      this.clearOptionFocus();
     }
-    // force update needed to apply styled state of field-wrapper el
-    forceUpdate(this.el);
   }
-  handleInputChanged(value) {
-    this.charCount = value.length;
-    if (this.tagInputType === "dropdown") {
-      this.clearListItemFocus();
+  handleInputChanged(ev) {
+    this.clearOptionFocus();
+    if (this.isDropdown) {
       if (this.charCount >= this.characterLimit - 5) {
         this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
       }
@@ -342,415 +463,208 @@ const TagInput = class {
         this.openDropdown();
       }
     }
-    else if (this.tagInputType === "table") {
-      this.clearCellFocus();
-    }
-    if (value.includes(",") && this.addNew) {
-      // covers both typing "," and pasting in text that includes ","
-      value.split(",").forEach((tag) => this.submitInput(this.addNew, tag.trim()));
-      this.announce(this.generateTagAddedMessage(value.split(",").join(", ")));
+    const val = ev.target.value;
+    if (val.includes(",") && this.addNew) {
+      this.addTags(val);
     }
     else {
       this.announceExistingOptions();
     }
   }
   handleInputEnter() {
-    if (this.tagInputType === "dropdown") {
-      if (this.focusedListItem) {
-        this.handleListItemClick(this.focusedListItem);
-      }
-      else {
-        this.submitInput(this.addNew, this.inputEl.value.trim());
-      }
-    }
-    else if (this.tagInputType === "table" && this.tablePosition.row > 0) {
-      this.handleTableRowClick(this.localRowEls[this.tablePosition.row].id);
-    }
-  }
-  submitInput(canAddNew, value) {
-    const hasNonWhiteSpaceCharacters = value.match(/\S/);
-    if (canAddNew && hasNonWhiteSpaceCharacters) {
-      this.addTag(value);
-      this.optionsList = this.addOption(value);
+    // user has selected an option in the list
+    if (this.focusedOption) {
+      const tagName = this.getTagName(this.focusedOption);
+      this.lastAddedTags = [tagName];
+      this.focusedOption.click();
+      this.focusedOption.selected
+        ? this.isTable && this.focusedOption.emitDeselectedEvent()
+        : this.focusedOption.emitSelectedEvent();
       this.resetInput();
     }
+    else if (this.isDropdown) {
+      // user is adding a new tag
+      const tagName = this.inputEl.value;
+      if (!!tagName) {
+        this.isExistingTag(tagName) ? this.announce(this.tagAlreadyAddedMessage(tagName)) : this.addTags(tagName);
+        this.resetInput();
+      }
+    }
   }
   handleInputArrowDown() {
-    if (this.tagInputType === "table") {
-      this.moveDownRow();
-    }
-    else if (this.tagInputType === "dropdown" && this.isExpanded) {
-      this.moveDownListItem();
+    if (this.isDropdown) {
+      if (!this.isExpanded) {
+        this.openDropdown();
+      }
+      else {
+        let items = [];
+        // the id check prevents a bug where the ref is reassigned to the first option causing it to be added twice (after adding a new user option)
+        if (this.addNewButton && this.addNewButton.id === "add-new-btn") {
+          items.push(this.addNewButton);
+        }
+        this.filteredOptionEls.forEach((o) => {
+          items.push(this.elFromTagOption(o));
+        });
+        const next = findNext(items, this._focusedOption, true);
+        this.focusOption(next);
+      }
     }
-    else if (this.tagInputType === "dropdown") {
-      this.openDropdown();
+    else {
+      const items = this.filteredOptionEls.filter((o) => !o.locked).map((o) => this.elFromTagOption(o));
+      const next = findNext(items, this._focusedOption, true);
+      this.focusOption(next);
     }
   }
   handleInputArrowUp() {
-    if (this.tagInputType === "table") {
-      this.moveUpRow();
-    }
-    else if (this.tagInputType === "dropdown" && this.isExpanded) {
-      this.moveUpListItem();
+    if (this.isDropdown) {
+      if (!this.isExpanded) {
+        this.openDropdown();
+      }
+      else {
+        let items = [];
+        if (this.addNewButton) {
+          items.push(this.addNewButton);
+        }
+        this.filteredOptionEls.forEach((o) => {
+          items.push(this.elFromTagOption(o));
+        });
+        const prev = findPrev(items, this._focusedOption, true);
+        this.focusOption(prev);
+      }
     }
-    else if (this.tagInputType === "dropdown") {
-      this.openDropdown();
+    else {
+      const items = this.filteredOptionEls.filter((o) => !o.locked).map((o) => this.elFromTagOption(o));
+      const prev = findPrev(items, this._focusedOption, true);
+      this.focusOption(prev);
     }
   }
   handleInputBackspace() {
-    if (this.inputEl.value === "" && this.tagsList.length > 0) {
+    if (this.inputEl.value === "" && this.focusableTags.length > 0) {
       // wait for events to finish firing before redirecting focus
       // prevents double input in input area and tag area
       window.requestAnimationFrame(() => {
-        if (this.nonLockedTagsList.length > 0) {
-          this.tagAreaEl.focus();
-          this.focusTag(this.tagEls[this.tagEls.length - 1]);
-        }
+        this.tagAreaEl.focus();
+        this.focusTag(this.focusableTags[this.focusableTags.length - 1]);
       });
     }
   }
-  handleListItemKeyDown(ev) {
-    const typedEvTarget = ev.target;
-    switch (ev.key) {
-      case "Enter":
-      case " ":
-        ev.preventDefault();
-        typedEvTarget.click();
-        break;
-      case "ArrowDown":
-        ev.preventDefault();
-        this.moveDownListItem();
-        break;
-      case "ArrowUp":
-        ev.preventDefault();
-        this.moveUpListItem();
-        break;
-      case "Escape":
-        if (this.focusedElement !== this.inputEl) {
-          this.inputEl.focus();
-        }
-        else if (this.tagInputType === "dropdown") {
-          this.closeDropdown();
-        }
-        break;
-    }
-  }
-  handleListItemClick(item) {
-    const tag = item.dataset.option.trim() || "";
-    if (this.includesCaseInsensitive(this.tagsList, tag)) {
-      this.announce(this.generateTagAlreadyAddedMessage(tag));
-    }
-    else {
-      this.resetInput();
-      this.addTag(tag);
-      this.optionsList = this.addOption(tag);
-      this.focusedListItem = null;
-    }
-  }
-  handleTableRowClick(rowId) {
-    const referencedRow = this.el.querySelector(`#${rowId}`);
-    const isLocked = referencedRow.locked;
-    if (!isLocked) {
-      if (this.includesCaseInsensitive(this.tagsList, rowId)) {
-        this.removeTag(rowId);
-      }
-      else if (!this.tagLimitReached) {
-        this.addTag(rowId);
-        this.resetInput();
-      }
-    }
-  }
   handleTagAreaKeyDown(ev) {
     switch (ev.key) {
       case "ArrowLeft":
       case "ArrowUp":
         ev.preventDefault();
-        this.moveLeftTag();
+        if (this.focusedTag) {
+          const prev = findPrev(this.focusableTags, this.focusedTag, true);
+          this.focusTag(prev);
+        }
         break;
       case "ArrowRight":
       case "ArrowDown":
         ev.preventDefault();
-        this.moveRightTag();
+        if (this.focusedTag) {
+          const next = findNext(this.focusableTags, this.focusedTag, true);
+          this.focusTag(next);
+        }
         break;
       case "Backspace":
       case "Delete":
-        this.handleTagAreaDelete();
+        if (this.focusedTag) {
+          const option = this.tagOptionFromTag(this.focusedTag);
+          if (!option.locked) {
+            option.emitDeselectedEvent();
+          }
+        }
         break;
     }
   }
-  handleTagAreaDelete() {
-    const isLocked = this.focusedTag && this.focusedTag.classList.contains("locked");
-    if (this.focusedTag && !isLocked) {
-      this.removeTag(this.focusedTag.dataset.tag);
-      if (this.nonLockedTagsList.length === 0) {
-        // focus input if no tags are left
-        this.inputEl.focus();
-      }
-      else {
-        const removingLastTag = this.focusedTag === this.tagEls[this.tagEls.length - 1];
-        // if removing the last tag, reassign focused tag to previous task
-        this.focusedTag = removingLastTag ? this.tagEls[this.tagEls.length - 2] : this.focusedTag;
-        this.focusTag(this.focusedTag);
-      }
-    }
-  }
-  handleBlur(ev, component) {
-    const isntElOrChild = ev.relatedTarget !== component && !this.el.shadowRoot.contains(ev.relatedTarget);
+  handleBlur(ev) {
     this.dismissTooltip();
-    this.clearCellFocus();
-    if (isntElOrChild) {
+    this.clearOptionFocus();
+    const relTarget = ev.relatedTarget;
+    if (!this.isElOrChild(relTarget)) {
       this.fieldWrapperEl.classList.remove("focused");
-      if (this.tagInputType === "dropdown") {
+      if (this.isDropdown) {
         this.closeDropdown();
       }
     }
   }
-  handleCellMouseEnter(ev) {
-    const cell = ev.target;
-    const contentWrapper = cell.querySelector(".cell-content-wrapper");
-    const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
-    if (isTruncated) {
-      // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
-      showTooltip("bottom", cell, cell.innerText);
-    }
-  }
-  handleTagAreaFocus() {
-    if (this.tagInputType === "dropdown") {
+  handleTagAreaFocus(ev) {
+    if (this.isDropdown) {
       this.closeDropdown();
     }
-    const firstFocusableTag = this.nonLockedTagEls[0];
-    firstFocusableTag && this.focusTag(firstFocusableTag);
-  }
-  handleRemoveButtonClick(tag) {
-    this.moveLeftTag();
-    this.removeTag(tag);
-  }
-  moveDownListItem() {
-    if (this.listItemEls.length > 0) {
-      const firstListItem = this.listItemEls[0];
-      if (!this.focusedListItem) {
-        this.focusListItem(firstListItem);
-      }
-      else if (this.focusedListItem.nextElementSibling) {
-        this.focusListItem(this.focusedListItem.nextElementSibling);
+    if (this.focusableTags.length > 0) {
+      const relTarget = ev.relatedTarget;
+      if (relTarget && relTarget.id === "input") {
+        const lastFocusableTag = this.focusableTags[this.focusableTags.length - 1];
+        this.focusTag(lastFocusableTag);
       }
       else {
-        this.focusListItem(firstListItem);
+        const firstFocusableTag = this.focusableTags[0];
+        this.focusTag(firstFocusableTag);
       }
     }
   }
-  moveUpListItem() {
-    if (this.listItemEls.length > 0) {
-      const lastListItem = this.listItemEls[this.listItemEls.length - 1];
-      if (!this.focusedListItem) {
-        this.focusListItem(lastListItem);
-      }
-      else if (this.focusedListItem.previousElementSibling) {
-        this.focusListItem(this.focusedListItem.previousElementSibling);
-      }
-      else {
-        this.clearListItemFocus();
+  focusPrevCell() {
+    if (this.focusedOption) {
+      if (this.focusedColumn > 0) {
+        this.focusedColumn -= 1;
       }
     }
   }
-  moveDownRow() {
-    if (this.filteredRows.length > 0) {
-      if (this.tablePosition.row === 0) {
-        this.tablePosition.row = 1;
-      }
-      else if (this.tablePosition.row === this.filteredRows.length) {
-        this.tablePosition.row = 1;
-      }
-      else {
-        this.tablePosition.row++;
-      }
-      // skip locked rows
-      const rowToFocus = this.filteredRows[this.tablePosition.row - 1];
-      if (rowToFocus.locked) {
-        this.moveDownRow();
-      }
-      else {
-        this.focusCell(this.tablePosition);
+  focusNextCell() {
+    if (this._focusedOption) {
+      const lastCellIdx = this._focusedOption.querySelectorAll("td").length - 1;
+      if (this.focusedColumn < lastCellIdx) {
+        this.focusedColumn += 1;
       }
     }
   }
-  moveUpRow() {
-    if (this.filteredRows.length > 0) {
-      if (this.tablePosition.row === 0) {
-        this.tablePosition.row = this.filteredRows.length;
-      }
-      else if (this.tablePosition.row === 1) {
-        this.tablePosition.row = 0;
-      }
-      else {
-        this.tablePosition.row--;
-      }
-      // skip locked rows
-      const rowToFocus = this.filteredRows[this.tablePosition.row - 1];
-      if (rowToFocus && rowToFocus.locked) {
-        this.moveUpRow();
-      }
-      else if (rowToFocus) {
-        this.focusCell(this.tablePosition);
+  focusOption(optionToFocus) {
+    if (optionToFocus) {
+      // will be undefined for the "Add New" button
+      this.focusedOption = this.tagOptionFromEl(optionToFocus);
+      if (optionToFocus === this.addNewButton) {
+        this.addNewButton.classList.add("focused");
       }
       else {
-        this.clearCellFocus();
-      }
-    }
-  }
-  moveLeftCell() {
-    if (this.tablePosition.column != 1) {
-      this.tablePosition.column--;
-      this.focusCell(this.tablePosition);
-    }
-  }
-  moveRightCell() {
-    const numCols = csvToArray(this.colHeaders).length;
-    if (this.tablePosition.column < numCols) {
-      this.tablePosition.column++;
-      this.focusCell(this.tablePosition);
-    }
-  }
-  moveLeftTag() {
-    const lastTag = this.tagEls[this.tagEls.length - 1];
-    if (this.focusedTag && this.tagEls.includes(this.focusedTag.previousElementSibling)) {
-      this.focusedTag = this.focusedTag.previousElementSibling;
-    }
-    else {
-      this.focusedTag = lastTag;
-    }
-    // skip locked tags
-    if (this.focusedTag.classList.contains("locked") && this.nonLockedTagEls.length > 0) {
-      this.moveLeftTag();
-    }
-    else {
-      this.focusTag(this.focusedTag);
-    }
-  }
-  moveRightTag() {
-    const firstTag = this.tagEls[0];
-    if (this.focusedTag && this.tagEls.includes(this.focusedTag.nextElementSibling)) {
-      this.focusedTag = this.focusedTag.nextElementSibling;
-    }
-    else {
-      this.focusedTag = firstTag;
-    }
-    // skip locked tags
-    if (this.focusedTag.classList.contains("locked")) {
-      this.moveRightTag();
-    }
-    else {
-      this.focusTag(this.focusedTag);
-    }
-  }
-  addOption(option) {
-    let newOptionsList = this.optionsList;
-    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, option);
-    if (!optionAlreadyExists) {
-      newOptionsList = newOptionsList.concat(option);
-    }
-    return newOptionsList;
-  }
-  removeOption(option) {
-    this.optionsList = this.filterCaseInsensitive(this.optionsList, option);
-  }
-  addTag(tag) {
-    let newTagsList = this.tagsList;
-    const tagAlreadyAdded = this.includesCaseInsensitive(this.tagsList, tag);
-    const tagExistsAsOption = this.optionsList.filter((x) => x.toLowerCase() === tag.toLowerCase())[0];
-    if (!tagAlreadyAdded) {
-      let textToAnnounce = tag;
-      if (this.tagInputType === "table") {
-        const referencedRow = this.el.querySelector(`#${tag}`);
-        textToAnnounce = referencedRow.col1;
-      }
-      this.announce(this.generateTagAddedMessage(textToAnnounce));
-      this.tagsList = newTagsList.concat(tagExistsAsOption || tag);
-      // if maxTags has been reached, focus should go to the tagArea
-      // otherwise, input field should be focused and in view
-      if (this.tagLimitReached) {
-        this.tagAreaEl.focus();
-      }
-      else {
-        // wait for component to render new selected tag before bringing bottom of wrapper in view
-        window.requestAnimationFrame(() => (this.tagsAndInputWrapperEl.scrollTop = this.tagsAndInputWrapperEl.scrollHeight));
+        this.addNewButton && this.addNewButton.classList.remove("focused");
+      }
+      if (this.isTable) {
+        // tooltip
+        const contentWrapper = this._focusedOption.querySelector(".cell-content-wrapper");
+        const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
+        this.dismissTooltip();
+        if (isTruncated) {
+          // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
+          showTooltip("bottom", this._focusedOption, this._focusedOption.innerText);
+        }
       }
+      optionToFocus.scrollIntoView({ block: "nearest" });
     }
   }
-  removeTag(tag) {
-    let textToAnnounce = tag;
-    if (this.tagInputType === "table") {
-      const referencedRow = this.el.querySelector(`#${tag}`);
-      textToAnnounce = referencedRow.col1;
-    }
-    const tagRemovedMessage = intl.formatMessage({ id: "tagInput.tagRemoved", defaultMessage: "{tag} removed" }, { tag: textToAnnounce });
-    this.announce(tagRemovedMessage);
-    this.tagsList = this.filterCaseInsensitive(this.tagsList, tag);
-    if (this.tagInputType === "dropdown") {
-      // if a tag was introduced by the user, also remove it from the dropdown options
-      const devOptionsList = csvToArray(this.options);
-      if (this.includesCaseInsensitive(this.optionsList, tag) && !this.includesCaseInsensitive(devOptionsList, tag)) {
-        this.removeOption(tag);
+  showTooltipIfTruncated(el) {
+    const displayedText = el.querySelector(".tag-text").textContent;
+    const id = el.id.replace("tag-", "");
+    if (id) {
+      const tagEl = this.el.querySelector("#" + id);
+      const fullText = this.getTagName(tagEl);
+      if (displayedText !== fullText && displayedText.includes("...")) {
+        showTooltip("bottom", el, fullText);
       }
     }
   }
-  focusListItem(item) {
-    this.focusedListItem = item;
-    this.inputEl.setAttribute("aria-activedescendant", this.focusedListItem.id);
-    item.scrollIntoView({ block: "nearest" });
-  }
   focusTag(element) {
-    if (element.classList.contains("locked")) {
-      this.focusedTag = null;
-      this.tagAreaEl.setAttribute("aria-activedescendant", "");
-    }
-    else {
-      this.focusedTag = element;
-      this.tagAreaEl.setAttribute("aria-activedescendant", this.focusedTag.id);
-      this.focusedTag.scrollIntoView({ block: "nearest" });
-    }
+    // technically it's the tag area that has focus. This function handles the aria-activedescendant value within that parent
+    this.focusedTagIndex = this.focusableTags.indexOf(element);
+    element.scrollIntoView({ block: "nearest" });
     window.requestAnimationFrame(() => {
       hideTooltip();
-      const textEl = element.querySelector(".tag-text");
-      const fullText = element.dataset.tag;
-      const isTruncated = fullText !== textEl.textContent && textEl.textContent.includes("...");
-      isTruncated && showTooltip("bottom", element, fullText);
+      this.showTooltipIfTruncated(element);
     });
   }
-  focusCell(position) {
-    this.clearCellFocus(false);
-    if (position.row) {
-      const rowToFocus = this.localRowEls[position.row];
-      const rowCells = rowToFocus.querySelectorAll("td");
-      const cellToFocus = rowCells[position.column - 1];
-      const contentWrapper = cellToFocus.querySelector(".cell-content-wrapper");
-      const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
-      rowToFocus.classList.add("focused");
-      cellToFocus.classList.add("focused");
-      cellToFocus.scrollIntoView({ block: "nearest" });
-      this.inputEl.setAttribute("aria-activedescendant", cellToFocus.id);
-      this.dismissTooltip();
-      if (isTruncated) {
-        // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
-        showTooltip("bottom", cellToFocus, cellToFocus.innerText);
-      }
-    }
-  }
-  clearTagFocus() {
-    this.tagAreaEl.setAttribute("aria-activedescendant", "");
-    this.focusedTag = null;
-  }
-  clearCellFocus(resetPosition = true) {
-    this.inputEl.setAttribute("aria-activedescendant", "");
-    if (resetPosition) {
-      this.tablePosition = { row: 0, column: 1 };
-    }
-    this.localRowEls.forEach((row) => {
-      row.classList.remove("focused");
-      row.querySelectorAll("td").forEach((cell) => {
-        cell.classList.remove("focused");
-      });
-    });
+  clearOptionFocus() {
+    this.focusedOption = undefined;
+    this.focusedColumn = 0;
   }
   openDropdown() {
     // offset of -2px to avoid overlapping the focus border
@@ -758,18 +672,10 @@ const TagInput = class {
     this.isExpanded = true;
   }
   closeDropdown() {
-    this.clearListItemFocus();
+    this.clearOptionFocus();
     this.isExpanded = false;
   }
-  clearListItemFocus() {
-    this.focusedListItem = null;
-    this.inputEl.setAttribute("aria-activedescendant", "");
-    this.listItemEls.forEach((el) => {
-      el.classList.remove("focused");
-    });
-  }
   resetInput() {
-    this.charCount = 0;
     this.inputEl.value = "";
   }
   announce(message) {
@@ -779,15 +685,25 @@ const TagInput = class {
     }
     this.liveRegionMessage = message;
   }
+  addTags(tagNames) {
+    // covers both typing "," and pasting in text that includes ","
+    // if tag added without "," (typing enter), split puts the whole string in an array
+    this.lastAddedTags = tagNames.split(",").filter((t) => t.match(/\S/));
+    this.lastAddedTags.forEach((tag) => {
+      this.wmTagInputTagAdded.emit(tag);
+    });
+    this.announce(this.tagAddedMessage(this.lastAddedTags.join(", ")));
+    this.resetInput();
+  }
   announceExistingOptions() {
     // request animation frame to wait for re-rendering of filtered options
     window.requestAnimationFrame(() => {
       let numResults = 0;
-      if (this.tagInputType === "dropdown") {
+      if (this.isDropdown) {
         numResults = this.optionEls.length;
       }
-      else if (this.tagInputType === "table") {
-        numResults = this.filteredRows.length;
+      else if (this.isTable) {
+        numResults = this.filteredOptionEls.length;
       }
       const existingOptionsMessage = intl.formatMessage({
         id: "tagInput.existingOptions",
@@ -804,117 +720,61 @@ const TagInput = class {
     return message;
   }
   positionInput() {
-    const lastTag = this.tagEls[this.tagEls.length - 1];
-    // default placement to fall back to when no tags are present, or not enough space is available
-    this.inputEl.style.position = "static";
-    this.inputEl.style.width = "100%";
-    this.inputEl.classList.add("extended");
-    if (lastTag) {
-      const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;
-      if (spaceAvailable >= this.inputMinimumWidth) {
-        // because the input has right: 0px
-        // all thats needed to properly place it is setting position: absolute, top, and width
-        this.inputEl.style.position = "absolute";
-        this.inputEl.style.top = lastTag.offsetTop.toString() + "px";
-        this.inputEl.style.width = (spaceAvailable - 8).toString() + "px";
-        this.inputEl.classList.remove("extended");
+    if (this.tagAreaEl) {
+      const lastTag = this._tagEls[this._tagEls.length - 1];
+      // default placement to fall back to when no tags are present, or not enough space is available
+      this.inputEl.style.position = "static";
+      this.inputEl.style.width = "100%";
+      this.inputEl.classList.add("extended");
+      if (lastTag) {
+        const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;
+        if (spaceAvailable >= this.inputMinimumWidth) {
+          // because the input has right: 0px
+          // all thats needed to properly place it is setting position: absolute, top, and width
+          this.inputEl.style.position = "absolute";
+          this.inputEl.style.top = lastTag.offsetTop.toString() + "px";
+          this.inputEl.style.width = (spaceAvailable - 8).toString() + "px";
+          this.inputEl.classList.remove("extended");
+        }
       }
     }
   }
   handleTagMouseEnter(ev) {
-    const displayedText = ev.target.querySelector(".tag-text").textContent;
-    const fullText = ev.target.dataset.tag;
-    const isTruncated = displayedText !== fullText && displayedText.includes("...");
-    isTruncated && showTooltip("bottom", ev.target, fullText);
+    this.showTooltipIfTruncated(ev.target);
   }
   /// Helpers
   listToCSV(list) {
     return list.join(",");
   }
-  includesCaseInsensitive(list, element) {
-    const lowercaseList = list.map((str) => str.toLowerCase());
-    return lowercaseList.includes(element.toLowerCase());
-  }
-  filterCaseInsensitive(list, element) {
-    return list.filter((x) => x.toLowerCase() !== element.toLowerCase());
-  }
-  sortCaseInsensitive(list) {
-    // The vanilla .sort method places words that start with capital letters above others (ASCII order)
-    // so we need to pass in our own compare function to sort case-insensitive
-    return list.sort((a, b) => {
-      a = a.toLowerCase();
-      b = b.toLowerCase();
-      return a > b ? 1 : a < b ? -1 : 0;
-    });
-  }
-  /// Renders
-  renderTags() {
-    let lockedTags = [];
-    let unlockedTags = [];
-    this.tagsList.forEach((tag, idx) => {
-      const id = `tag${idx + 1}`;
-      let tagText = "";
-      let isLocked = false;
-      if (this.tagInputType === "dropdown") {
-        tagText = tag;
-      }
-      else if (this.tagInputType === "table") {
-        // display table tags using col1 of the row with the same id
-        // if one can't be found, display as empty
-        const referencedRow = this.el.querySelector(`#${tag}`);
-        tagText = referencedRow ? referencedRow.col1 : "";
-        isLocked = referencedRow ? referencedRow.locked : false;
-      }
-      // make sure locked tags always appear in front of list
-      const targetList = isLocked ? lockedTags : unlockedTags;
-      targetList.push(h("li", { id: id, class: `tag highlight ${this.focusedTag && this.focusedTag.id === id ? "focused" : ""} ${isLocked ? "locked" : ""}`, "data-tag": tag, role: "option", onMouseEnter: (ev) => this.handleTagMouseEnter(ev), onMouseLeave: hideTooltip }, h("span", { class: "sr-only" }, tag), h("span", { class: "tag-text", "aria-hidden": "true" }, tagText), isLocked ? (h("div", { class: "icon lock" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => this.handleRemoveButtonClick(tag) }))));
-    });
-    return [...lockedTags, ...unlockedTags];
+  isExistingTag(tag) {
+    const list = this.optionEls.map((o) => this.getTagName(o).toLowerCase());
+    return list.includes(tag.toLowerCase());
   }
   renderDropdown() {
-    return (h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : false, "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.renderListItems(this.optionsList))));
-  }
-  renderListItems(optionsList) {
-    optionsList = this.sortCaseInsensitive(optionsList);
-    // filter by input
-    if (this.inputEl && this.inputEl.value) {
-      optionsList = this.optionsList.filter((option) => option.toLowerCase().includes(this.inputEl.value.toLowerCase()));
-    }
-    return optionsList.map((option, idx) => {
-      const id = `option${idx + 1}`;
-      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
-      const isSelected = this.includesCaseInsensitive(this.tagsList, option);
-      return (h("li", { class: `option ${isFocused ? "focused" : ""}`, role: "option", id: id, "data-option": option, "aria-selected": isSelected ? "true" : "false", "aria-disabled": isSelected ? "true" : "false", onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev.target) }, option));
-    });
-  }
-  renderAddNewButton() {
-    const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\S/);
-    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, this.inputEl.value.trim());
-    if (this.addNew && hasNonWhiteSpaceCharacters && !optionAlreadyExists) {
-      const id = `add-new-btn`;
-      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
-      return (h("li", { role: "option", class: `add-new-btn ${isFocused ? "focused" : ""}`, id: id, "data-option": this.inputEl.value, onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev.target), tabIndex: isFocused ? 0 : -1 }, `Add "${this.inputEl.value.trim()}"`));
-    }
-    else
-      return "";
+    return (h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.filteredOptionEls.map((o) => this.renderListItem(o)))));
   }
   renderHelpText() {
+    if (this.helpText)
+      return this.helpText;
     let helpText = "";
-    if (this.optionsList.length > 0) {
-      helpText += this.componentMessages.selectionHelpText;
+    if (this._tagEls.length > 0) {
+      helpText += this.selectionHelpText;
     }
     if (this.addNew) {
-      helpText += " " + this.componentMessages.addNewHelpText;
+      helpText += " " + this.addNewHelpText;
     }
     return helpText;
   }
-  renderTagCounter() {
-    if (this.maxTags) {
-      return (h("div", { class: "lower-row" }, h("div", { id: "max-tags" }, `${this.componentMessages.tagsAdded}: ${this.tagsList.length}/${this.maxTags}`, this.tagLimitReached && ` - ${this.componentMessages.maxTagsReached}`)));
-    }
+  renderAddNewButton() {
+    const inputValue = this.inputEl.value.trim();
+    const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\S/);
+    const optionAlreadyExists = this.isExistingTag(this.inputEl.value.trim());
+    return (this.addNew &&
+      hasNonWhiteSpaceCharacters &&
+      !optionAlreadyExists && (h("li", { ref: (el) => (this.addNewButton = el), id: "add-new-btn", class: "add-new-btn", onClick: () => this.addTags(inputValue) }, "Add " + inputValue)));
   }
   renderTable() {
-    return (h("div", { class: "table-wrapper", onScroll: () => this.dismissTooltip() }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredRows.length ? this.renderTableRows() : h("div", { class: "no-results" }, this.noResultsMessage))));
+    return (h("div", { class: "table-wrapper", onScroll: () => this.dismissTooltip() }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
   }
   renderTableHeaders() {
     return (h("tr", { class: "headers", role: "row" }, csvToArray(this.colHeaders).map((header, idx) => {
@@ -927,36 +787,80 @@ const TagInput = class {
         width: this.colWidths ? csvToArray(this.colWidths)[idx] : "" }, header));
     })));
   }
-  renderTableRows() {
-    return this.filteredRows.map((row) => {
-      const isSelected = this.includesCaseInsensitive(this.tagsList, row.id);
-      return (h("tr", { id: row.id, class: `${row.locked ? "locked" : ""} ${isSelected ? "selected" : ""}`, role: "row", onClick: () => this.handleTableRowClick(row.id) }, this.renderTableCells(row)));
-    });
+  renderTag(o) {
+    const focused = this.focusedTag && this.focusedTag.id === "tag-" + o.id ? "focused" : "";
+    const tagName = this.getTagName(o);
+    const highlight = this.lastAddedTags.includes(tagName) ? "highlight" : "";
+    return (h("li", { id: "tag-" + o.id, role: "option", class: `tag ${highlight} ${focused} ${o.locked ? "locked" : ""}`, onMouseEnter: (ev) => this.handleTagMouseEnter(ev), onMouseLeave: hideTooltip }, h("span", { class: "sr-only" }, tagName), h("span", { class: "tag-text", "aria-hidden": "true" }, tagName), o.locked ? (h("div", { class: "icon lock" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => o.emitDeselectedEvent() }))));
+  }
+  renderTags() {
+    return this.tagsList.map((o) => this.renderTag(o));
   }
-  renderTableCells(row) {
-    const colValues = [row.col1, row.col2, row.col3, row.col4].filter((val) => !!val);
-    const isSelected = this.includesCaseInsensitive(this.tagsList, row.id);
+  renderTagCounter() {
+    if (this.maxTags) {
+      return (h("div", { class: "lower-row" }, h("div", { id: "max-tags" }, this.renderMaxTags())));
+    }
+  }
+  renderMaxTags() {
+    if (this.helpText) {
+      return this.helpText;
+    }
+    else {
+      let msg = `${this.tagsAddedMessage}: ${this.taggedOptions.length}/${this.maxTags}`;
+      if (this.tagLimitReached) {
+        msg += `- ${this.maxTagsReachedMessage}`;
+      }
+      return msg;
+    }
+  }
+  handleCellMouseEnter(ev) {
+    const cell = ev.target;
+    const contentWrapper = cell.querySelector(".cell-content-wrapper");
+    const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
+    if (isTruncated) {
+      // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
+      showTooltip("bottom", cell, cell.innerText);
+    }
+  }
+  renderTableCells(o) {
+    const colValues = [o.col1, o.col2, o.col3, o.col4].filter((val) => !!val);
     return colValues.map((val, idx) => {
-      const localId = `${row.id}-col${idx + 1}`;
+      const cellId = `${o.id}-col${idx + 1}`;
       let overflowRule = "wrap";
       if (this.colWrap && csvToArray(this.colWrap)[idx]) {
         overflowRule = csvToArray(this.colWrap)[idx];
       }
-      return (h("td", { id: localId, role: "gridcell", "aria-describedby": `${localId}-description`, "aria-selected": isSelected.toString(), onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => this.dismissTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, val), h("div", { class: "description", id: `${localId}-description` }, row.locked ? "locked" : "")));
+      const classes = {
+        focused: !!this._focusedCell && cellId === this._focusedCell.id,
+      };
+      return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? "locked" : "")));
     });
   }
+  renderTableRow(o) {
+    const classes = {
+      selected: o.selected,
+      locked: o.locked,
+      focused: this.focusedOption && o === this.focusedOption ? true : false,
+    };
+    return (h("tr", { id: o.id, class: classes, onClick: (ev) => this.handleOptionClick(ev) }, this.renderTableCells(o)));
+  }
+  renderListItem(o) {
+    if (!!this.inputEl) {
+      const isFocused = this.focusedOption && o === this.focusedOption;
+      return (h("li", { id: o.id, role: "option", class: `option ${isFocused ? "focused" : ""}`, "aria-selected": o.selected ? "true" : "false", onClick: (ev) => this.handleOptionClick(ev) }, o.textContent));
+    }
+  }
   render() {
-    return (h(Host, { id: this.uid }, h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: `input${this.uid}` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.focusedElement ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}`, ref: (el) => (this.tagsAndInputWrapperEl = el) }, this.tagsList.length > 0 && (h("ul", { ref: (el) => (this.tagAreaEl = el), class: "tag-area", role: "listbox", "aria-activedescendant": "", "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagsList.length > 0 ? this.componentMessages.tagAreaInstructions : ""}`, tabindex: this.nonLockedTagsList.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: () => this.handleTagAreaFocus(), onBlur: (ev) => {
-        this.clearTagFocus();
-        this.handleBlur(ev, this.el);
-      }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags())), h("input", { id: `input${this.uid}`, class: `input ${this.tagLimitReached ? "hidden" : ""}`, role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""}`, "aria-label": `${this.label} ${this.tagInputType === "dropdown" ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.tagInputType === "dropdown" ? this.isExpanded.toString() : null, placeholder: this.placeholder, maxLength: this.tagInputType === "dropdown" ? this.characterLimit : undefined, onInput: () => this.handleInputChanged(this.inputEl.value), onBlur: (ev) => {
-        this.handleBlur(ev, this.el);
-      }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.tagInputType === "dropdown" && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.tagInputType === "dropdown" && this.renderDropdown()), this.info && (h("div", { id: "info", class: "info-text" }, this.info)), this.errorMessage && h("div", { id: "error" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "assertive", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.tagInputType === "table" && this.renderTable())));
+    return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this.focusableTags.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        this.focusedTagIndex = undefined;
+        this.handleBlur(ev);
+      }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""}`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
+        this.handleBlur(ev);
+      }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { id: "info", class: "info-text" }, this.info)), this.errorMessage && h("div", { id: "error" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "assertive", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
   }
   static get delegatesFocus() { return true; }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "tagsList": ["reflectSelectedTags"],
     "errorMessage": ["handleErrorMessageChange"]
   }; }
 };