@watermarkinsights/ripple 4.0.0-9 → 4.0.0

package/dist/collection/components/wm-select/wm-select.js

@@ -41,7 +41,6 @@ export class Select {
       }
     }, 150);
     this.disabled = false;
-    this.invalid = false;
     this.maxHeight = undefined;
     this.label = undefined;
     this.labelPosition = "top";
@@ -72,12 +71,12 @@ export class Select {
   get childOptions() {
     return Array.from(this.el.querySelectorAll("wm-option"));
   }
-  get duplicateOptions() {
+  get cloneOptions() {
     return Array.from(this.el.shadowRoot.querySelectorAll("wm-option"));
   }
   get allOptionEls() {
     // this includes both slotted wm-options and internally created wm-options
-    return this.duplicateOptions.concat(this.childOptions);
+    return this.cloneOptions.concat(this.childOptions);
   }
   get visibleOptionEls() {
     return this.allOptionEls.filter((option) => !option.classList.contains("hidden") && !option.classList.contains("filtered-out"));
@@ -100,6 +99,9 @@ export class Select {
   get allSelected() {
     return this.childOptions.every((option) => option.selected);
   }
+  get visibleSelectAllButton() {
+    return this.selectAll && this.multiple && this.searchTerm === "";
+  }
   //////////////////////////////////////
   get resultsFoundMessage() {
     return intl.formatMessage({
@@ -122,39 +124,14 @@ export class Select {
     this.isTabbing = false;
   }
   handleOptionSelection(ev) {
-    const option = ev.detail;
-    this.focusOption(option);
+    this.focusOption(ev.detail);
     if (!this.multiple) {
-      // if the option was already selected, leave selected states untouched and don't fire the event
-      if (!option.selected) {
-        this.selectOption(option);
-        const detail = { changedOption: option, selectedOptions: [option] };
-        this.wmSelectChanged.emit(detail);
-        // change is deprecated in favor of wmSelectChanged
-        // because of issues with React wrappers when using native events name
-        const event = new CustomEvent("change", { detail: detail });
-        // @ts-ignore
-        this.el.dispatchEvent(event);
-      }
       this.close();
     }
-    else {
-      this.selectOption(option);
-      // we pass the original option with the event, as it's the only one the devs know or care about
-      // devs will typically set a `value` on the option, which is not copied over
-      // we could have taken the value and put it on the duplicate option,
-      // but this approach is more flexible (what if they want to have a data attribute?)
-      const isDuplicate = option.classList.contains("duplicate");
-      const originalOption = isDuplicate ? this.findCorrespondingOption(option) : option;
-      const selectedOptions = this.childOptions.filter((o) => o.selected);
-      const detail = { changedOption: originalOption, selectedOptions: selectedOptions };
-      this.wmSelectChanged.emit(detail);
-      // change is deprecated in favor of wmSelectChanged
-      // because of issues with React wrappers when using native events name
-      const event = new CustomEvent("change", { detail: detail });
-      // @ts-ignore
-      this.el.dispatchEvent(event);
-    }
+  }
+  handleOptionCloneSelection(ev) {
+    const correspondingOption = this.findCorrespondingOption(ev.detail);
+    correspondingOption.click();
   }
   handleChildEnter() {
     // only occurs for multiselects. handle the click, then close
@@ -194,18 +171,12 @@ export class Select {
     this.allSelected ? this.deselectAllOptions() : this.selectAllOptions();
   }
   selectAllOptions() {
-    this.allOptionEls.forEach((o) => (o.selected = true));
-    this.setSelectAllButton();
-    this.setButtonText();
-    const detail = { changedOption: null, selectedOptions: this.childOptions };
-    this.wmSelectChanged.emit(detail);
+    this.announce(this.allOptionsSelectedMessage);
+    this.wmSelectAllSelected.emit();
   }
   deselectAllOptions() {
-    this.allOptionEls.forEach((o) => (o.selected = false));
-    this.setSelectAllButton();
-    this.setButtonText();
-    const detail = { changedOption: null, selectedOptions: [] };
-    this.wmSelectChanged.emit(detail);
+    this.announce(this.allOptionsDeselectedMessage);
+    this.wmSelectAllDeselected.emit();
   }
   handleButtonBlur(ev) {
     if (this.isElOrChild(ev.relatedTarget)) {
@@ -240,21 +211,25 @@ export class Select {
     if (!this.label) {
       console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
     }
-    this.uid = this.el.id ? this.el.id : generateId();
+    if (!this.multiple && this.selectedOptions.length === 0) {
+      console.error("wm-select should have one initial option selected");
+    }
     if (document.body.classList.contains("wmcl-user-is-tabbing")) {
       this.toggleTabbingOn();
     }
-    // set initial selections
-    if (this.selectedOptions.length > 0) {
-      this.selectedOptions.forEach((x) => {
-        this.displayedOptions.push(x);
-      });
-      // single Select only, pre-select if no default option from dev
-    }
-    else if (!this.multiple) {
-      this.selectOption(this.allOptionEls[0]);
-    }
     handleDisabledAttribute(this.el, this.isDisabled);
+    const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((mutationRecord) => this.handleChildChange(mutationRecord)));
+    mutationObserver.observe(this.el, {
+      childList: true,
+      attributes: true,
+      subtree: true,
+      attributeFilter: ["selected"],
+    });
+  }
+  handleChildChange(_) {
+    // on update of children or children selected state, reset button text and rerender
+    this.setButtonText();
+    forceUpdate(this.el);
   }
   componentDidLoad() {
     this.wmSelectDidLoad.emit();
@@ -271,10 +246,10 @@ export class Select {
   }
   componentWillUpdate() {
     if (this.multiple) {
-      // find last visible duplicate option and apply .last class
-      const visibleDuplicateOptions = this.visibleOptionEls.filter((option) => option.classList.contains("duplicate"));
-      visibleDuplicateOptions.forEach((option, idx) => {
-        if (idx === visibleDuplicateOptions.length - 1) {
+      // find last visible clone option and apply .last class
+      const visibleCloneOptions = this.visibleOptionEls.filter((option) => option.classList.contains("clone"));
+      visibleCloneOptions.forEach((option, idx) => {
+        if (idx === visibleCloneOptions.length - 1) {
           option.classList.add("last");
         }
         else {
@@ -388,16 +363,16 @@ export class Select {
   }
   updateOptionVisibility() {
     // this runs for search multiselects, where selected options are rendered at the top of the dropdown list
-    // slotted wm-options are hidden if selected, and duplicate wm-options are made visible if selected
+    // slotted wm-options are hidden if selected, and clone wm-options are made visible if selected
     this.childOptions.forEach((option, idx) => {
-      const duplicateOption = this.duplicateOptions[idx];
+      const cloneOption = this.cloneOptions[idx];
       if (option.selected) {
         option.classList.add("hidden");
-        duplicateOption.classList.remove("hidden");
+        cloneOption.classList.remove("hidden");
       }
       else {
         option.classList.remove("hidden");
-        duplicateOption.classList.add("hidden");
+        cloneOption.classList.add("hidden");
       }
     });
   }
@@ -412,27 +387,6 @@ export class Select {
     window.setTimeout(() => option.scrollIntoView({ block: "nearest" }), 60);
     option.focus();
   }
-  selectOption(option) {
-    // beware of this function's name. For multiselect it actually toggles the selected state, so it can also deselect the option
-    if (option.classList.contains("duplicate")) {
-      // if clicking on a duplicate option, toggle selected property of real one, then rerender
-      const correspondingOption = this.findCorrespondingOption(option);
-      correspondingOption.selected = !correspondingOption.selected;
-      forceUpdate(this.el);
-    }
-    else if (this.multiple) {
-      option.selected = !option.selected;
-    }
-    else {
-      this.childOptions.forEach((x) => (x.selected = x === option));
-    }
-    // update the selectAll checkbox when an option is de/selected
-    // checking is the el is present, implies that this.multiple and this.selectAll are true
-    if (this.selectAllEl) {
-      this.setSelectAllButton();
-    }
-    this.setButtonText();
-  }
   findAndFocusOption(ev) {
     const character = ev.detail.toLowerCase();
     if (!this.keysSoFar) {
@@ -469,12 +423,12 @@ export class Select {
     return match;
   }
   findCorrespondingOption(el) {
-    // if duplicate, returns the child wm-option
-    // if child wm-option, returns duplicate
-    const isDuplicate = el.classList.contains("duplicate");
-    return isDuplicate
-      ? this.childOptions[this.duplicateOptions.indexOf(el)]
-      : this.duplicateOptions[this.childOptions.indexOf(el)];
+    // if clone, returns the child wm-option
+    // if child wm-option, returns clone
+    const isClone = el.classList.contains("clone");
+    return isClone
+      ? this.childOptions[this.cloneOptions.indexOf(el)]
+      : this.cloneOptions[this.childOptions.indexOf(el)];
   }
   isElOrChild(el) {
     var _a;
@@ -555,18 +509,6 @@ export class Select {
       }
     }
   }
-  setSelectAllButton() {
-    if (this.allSelected) {
-      this.selectAllEl.textContent = this.deselectAllMessage;
-      this.announce(this.allOptionsSelectedMessage);
-    }
-    else {
-      this.selectAllEl.textContent = this.selectAllMessage;
-      if (this.selectedOptions.length === 0) {
-        this.announce(this.allOptionsDeselectedMessage);
-      }
-    }
-  }
   announce(message) {
     // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
     if (this.liveRegionEl.textContent === message) {
@@ -597,36 +539,34 @@ export class Select {
     }
   }
   renderSearchField() {
-    return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "icon" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": `list-${this.uid}`, "aria-expanded": this.isExpanded ? "true" : "false", onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
+    return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "icon" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
   }
   renderSearchFailedMessage() {
     return h("div", { class: "search-results-message" }, this.noResultsFoundMessage);
   }
   renderSelectAllButton() {
-    if (this.selectAll && this.multiple && this.searchTerm == "") {
-      return (h("button", { ref: (el) => (this.selectAllEl = el), class: "select-all", onClick: () => this.handleSelectAllClick(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: "-1" }, this.allSelected ? this.deselectAllMessage : this.selectAllMessage));
-    }
+    return (h("button", { ref: (el) => (this.selectAllEl = el), class: "select-all", onClick: () => this.handleSelectAllClick(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: "-1" }, this.allSelected ? this.deselectAllMessage : this.selectAllMessage));
   }
-  renderDuplicateOptions() {
+  renderCloneOptions() {
     return Array.from(this.el.children).map((option) => {
-      return (h("wm-option", { class: "duplicate", selected: option.selected }, option.textContent));
+      return (h("wm-option", { class: "clone", selected: option.selected }, option.textContent));
     });
   }
   render() {
     const buttonProps = {
-      id: `selectbtn-${this.uid}`,
+      id: "selectbtn",
       ["disabled"]: this.isDisabled,
-      ["aria-controls"]: `list-${this.uid}`,
-      ["aria-labelledby"]: `label-${this.uid} selectbtn-${this.uid}`,
+      ["aria-controls"]: "list",
+      ["aria-labelledby"]: "label selectbtn",
       ["aria-describedby"]: "wm-errors",
       ["aria-expanded"]: this.isExpanded ? "true" : "false",
       onClick: () => (this.isExpanded ? this.close() : this.open()),
     };
-    return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.invalid || this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `selectbtn-${this.uid}` }, this.label, 
+    return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
     // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
     this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isTabbing ? "user-is-tabbing" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: this.selectedOptions.length > 0 && this.selectedOptions.filter((x) => x.subinfo).length > 0
         ? "overflowcontrol hassubinfo"
-        : "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText()), this.renderSubinfo()), this.renderOverflowCount()), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), h("div", { id: `list-${this.uid}`, class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": `label-${this.uid}`, ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.renderSelectAllButton(), this.multiple && this.renderDuplicateOptions(), h("slot", null))), this.renderErrorContainer(), h("div", { id: "announcement", "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        : "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText()), this.renderSubinfo()), this.renderOverflowCount()), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null))), this.renderErrorContainer(), h("div", { id: "announcement", "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
   }
   static get is() { return "wm-select"; }
   static get encapsulation() { return "shadow"; }
@@ -661,24 +601,6 @@ export class Select {
         "reflect": true,
         "defaultValue": "false"
       },
-      "invalid": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "invalid",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "maxHeight": {
         "type": "string",
         "mutable": false,
@@ -916,8 +838,8 @@ export class Select {
           "references": {}
         }
       }, {
-        "method": "wmSelectChanged",
-        "name": "wmSelectChanged",
+        "method": "wmSelectSearchChanged",
+        "name": "wmSelectSearchChanged",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -935,8 +857,8 @@ export class Select {
           }
         }
       }, {
-        "method": "wmSelectSearchChanged",
-        "name": "wmSelectSearchChanged",
+        "method": "wmSelectAllSelected",
+        "name": "wmSelectAllSelected",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -945,13 +867,24 @@ export class Select {
           "text": ""
         },
         "complexType": {
-          "original": "Object",
-          "resolved": "Object",
-          "references": {
-            "Object": {
-              "location": "global"
-            }
-          }
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "wmSelectAllDeselected",
+        "name": "wmSelectAllDeselected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
         }
       }];
   }
@@ -984,6 +917,12 @@ export class Select {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "intCloneClicked",
+        "method": "handleOptionCloneSelection",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }, {
         "name": "wmEnterKeyPressed",
         "method": "handleChildEnter",

package/dist/collection/components/wm-select/wm-select.spec.js

@@ -1,6 +1,5 @@
 import { newSpecPage } from "@stencil/core/testing";
 import * as globalFuncs from "../../global/functions";
-jest.spyOn(globalFuncs, "generateId").mockImplementation(() => "random-id");
 jest.spyOn(globalFuncs, "getTextDir").mockImplementation(() => "rtl");
 import { Select } from "./wm-select";
 import { Option } from "../wm-option/wm-option";
@@ -14,7 +13,7 @@ describe("wm-select", () => {
   it("builds", async () => {
     const comp = await newSpecPage({
       components: [Select, Option],
-      html: '<wm-select label="mock label"><wm-option></wm-option></wm-select>',
+      html: '<wm-select label="mock label"><wm-option selected></wm-option></wm-select>',
     });
     expect(comp.root).toMatchSnapshot();
   });
@@ -24,7 +23,6 @@ describe("wm-select", () => {
     expect(select).toHaveProperty("labelPosition");
     expect(select).toHaveProperty("maxHeight");
     expect(select).toHaveProperty("requiredField");
-    expect(select).toHaveProperty("invalid");
     expect(select).toHaveProperty("errorMessage");
     expect(select).toHaveProperty("disabled");
     expect(select).toHaveProperty("multiple");
@@ -39,26 +37,26 @@ describe("wm-select", () => {
   it("has the right roles", async () => {
     const page = await newSpecPage({
       components: [Select, Option],
-      html: '<wm-select search label="mock label"><wm-option>First option</wm-option></wm-select>',
+      html: '<wm-select id="random-id" search label="mock label"><wm-option selected>First option</wm-option></wm-select>',
     });
     const searchFieldEl = await page.root.shadowRoot.querySelector(".searchfield");
-    const listboxEl = await page.root.shadowRoot.querySelector("#list-random-id");
+    const listboxEl = await page.root.shadowRoot.querySelector("#list");
     expect(listboxEl).toEqualAttribute("role", "listbox");
     expect(listboxEl).not.toHaveAttribute("aria-multiselectable"); // only multiselect
     expect(searchFieldEl).toEqualAttribute("role", "combobox");
   });
   it("multiselect has multiselectable aria attr", async () => {
     const page = await newSpecPage({
-      components: [Select],
+      components: [Select, Option],
       html: '<wm-select multiple label="mock label"><wm-option>1</wm-option></wm-select>',
     });
-    const listboxEl = await page.root.shadowRoot.querySelector("#list-random-id");
+    const listboxEl = await page.root.shadowRoot.querySelector("#list");
     expect(listboxEl).toHaveAttribute("aria-multiselectable");
   });
   it("displays error message", async () => {
     const page = await newSpecPage({
-      components: [Select],
-      html: '<wm-select error-message="test error" label="mock label"><wm-option></wm-option></wm-select>',
+      components: [Select, Option],
+      html: '<wm-select error-message="test error" label="mock label"><wm-option selected></wm-option></wm-select>',
     });
     const errorMessage = await page.root.shadowRoot.querySelector(".error-message");
     expect(errorMessage.textContent).toBe("test error");
@@ -242,7 +240,7 @@ describe("wm-select", () => {
     it("doesn't show select-all button when prop is not set", async () => {
       const page = await newSpecPage({
         components: [Select, Option],
-        html: '<wm-select label="mock label"><wm-option></wm-option></wm-select>',
+        html: '<wm-select label="mock label"><wm-option selected></wm-option></wm-select>',
       });
       const btn = page.root.shadowRoot.querySelector(".select-all");
       expect(btn).toBeNull();
@@ -250,7 +248,7 @@ describe("wm-select", () => {
     it("doesn't show select-all button when prop is set but multiple is not", async () => {
       const page = await newSpecPage({
         components: [Select, Option],
-        html: '<wm-select select-all label="mock label"><wm-option></wm-option></wm-select>',
+        html: '<wm-select select-all label="mock label"><wm-option selected></wm-option></wm-select>',
       });
       const btn = page.root.shadowRoot.querySelector(".select-all");
       expect(btn).toBeNull();

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.css

@@ -45,7 +45,6 @@
 :host .tabcontainer {
   background: var(--wmcolor-tab-background);
   margin: 0;
-  margin-left: -24px;
   width: 100%;
   height: 4.0625rem;
   display: flex;

package/dist/collection/components/wm-tag-input/wm-tag-input.css

@@ -234,7 +234,7 @@
 :host .tag-area:focus {
   outline: none;
 }
-:host .tag-area [role=option] {
+:host .tag-area li {
   display: inline-flex;
   align-items: center;
   height: 1.75rem;
@@ -245,7 +245,7 @@
   transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: pre;
 }
-:host .tag-area [role=option].highlight {
+:host .tag-area li.highlight {
   animation: fadeIn 1s;
 }
 @keyframes fadeIn {
@@ -259,14 +259,14 @@
     background-color: var(--wmcolor-taginput-tag-background);
   }
 }
-:host .tag-area [role=option].focused {
+:host .tag-area li.focused {
   background-color: var(--wmcolor-taginput-tag-background-focus);
 }
-:host .tag-area [role=option].locked {
+:host .tag-area li.locked {
   background-color: var(--wmcolor-taginput-tag-background-locked);
   color: var(--wmcolor-taginput-tag-text-locked);
 }
-:host .tag-area [role=option] .icon {
+:host .tag-area li .icon {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -275,18 +275,18 @@
   padding: 0;
   margin-left: 0.5rem;
 }
-:host .tag-area [role=option] .icon.remove-btn {
+: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;
   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 {
+: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 [role=option] .icon.remove-btn:before {
+:host .tag-area li .icon.remove-btn:before {
   display: inline-block;
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
@@ -296,10 +296,10 @@
   -moz-osx-font-smoothing: grayscale;
   content: "\f156";
 }
-:host .tag-area [role=option] .icon.lock {
+:host .tag-area li .icon.lock {
   color: var(--wmcolor-taginput-tag-text-locked);
 }
-:host .tag-area [role=option] .icon.lock:before {
+:host .tag-area li .icon.lock:before {
   display: inline-block;
   font: normal normal normal 24px/1 "Material Design Icons";
   font-size: inherit;
@@ -317,13 +317,10 @@
   margin: 0;
   right: 8px;
 }
-:host .input.hidden {
-  display: none;
-}
 :host .input:focus {
   outline: none;
 }
-:host .tag-area + .input.extended {
+:host .tag-area:not(.empty) + .input.extended {
   margin-block-start: 8px;
 }
 :host .dropdown-wrapper {
@@ -387,8 +384,8 @@
   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 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);
@@ -396,17 +393,17 @@
   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 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[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 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;
@@ -454,7 +451,7 @@
 :host .table-wrapper tr:nth-child(even) {
   background-color: var(--wmcolor-taginput-altrow-background-table);
 }
-:host .table-wrapper tr.selected {
+:host .table-wrapper tr.selected, :host .table-wrapper tr.locked {
   background-color: var(--wmcolor-taginput-row-background-selected);
   box-shadow: inset 0 0 0 1px var(--wmcolor-taginput-row-border-selected);
   font-weight: 500;

package/dist/collection/components/wm-tag-input/wm-tag-input.e2e.js

@@ -77,9 +77,9 @@ describe("wm-tag-input", () => {
         col-wrap="wrap,trunc,wrap"
         selected-tags="johnprice1"
       >
-        <wm-tag-input-row id="johnprice1" col1="John Price" col2="john.price1@university.edu" col3="Admin" locked></wm-tag-input-row>
-        <wm-tag-input-row id="johnprice2" col1="John Price" col2="john.price2@university.edu" col3="Faculty"></wm-tag-input-row>
-        <wm-tag-input-row id="samsandwich" col1="Sam Sandwich" col2="sam.sandwich@university.edu" col3="Faculty"></wm-tag-input-row>
+        <wm-tag-option id="johnprice1" col1="John Price" col2="john.price1@university.edu" col3="Admin" locked></wm-tag-option>
+        <wm-tag-option id="johnprice2" col1="John Price" col2="john.price2@university.edu" col3="Faculty"></wm-tag-option>
+        <wm-tag-option id="samsandwich" col1="Sam Sandwich" col2="sam.sandwich@university.edu" col3="Faculty"></wm-tag-option>
       </wm-tag-input>
       </main></body></html>`);
     await page.waitForChanges();