@watermarkinsights/ripple 5.30.0 → 5.31.0-alpha.1

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

@@ -1,6 +1,122 @@
 import { h } from "@stencil/core";
 import { csvToArray, debounce, hideTooltip, intl, measureText, shouldOpenUp, showTooltip, truncateText, findPrev, findNext, } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
+/**
+ * Input for selecting or creating a list of tags. Two variants: `'dropdown'` (options in a
+ * filterable list, supports creating new tags) and `'table'` (options in a filterable
+ * multi-column table). Options are defined as wm-tag-option children. Selected options appear
+ * as removable tags above the search field.
+ *
+ * @slot - One or more wm-tag-option children.
+ *
+ * @keyboardInteraction
+ * **Tag area (when tags are present):**
+ * - **Arrow Left / Arrow Right**: Cycle focus between selected tags.
+ * - **Backspace / Delete**: Remove the focused tag.
+ *
+ * **Search field:**
+ * - **Arrow Down / Arrow Up**: Open the dropdown or navigate within it.
+ * - **Enter**: Add a new tag from typed value (dropdown, `add-new` enabled) or select the
+ *   focused option.
+ * - **Comma**: Add a new tag immediately (dropdown, `add-new` enabled).
+ * - **Escape**: Close the dropdown.
+ * - **Backspace** (empty field): Move focus to the last selected tag.
+ *
+ * @accessibility
+ * - `label` is the accessible name for the search input and dropdown/table; required even
+ *   when `label-position="none"`.
+ * - An `aria-live` region announces tag additions, removals, result counts, and errors.
+ * - Two tab stops: the tag area (when tags are present) and the search field.
+ *
+ * @usageNotes
+ * - `label` is required and must always be provided.
+ * - `col-headers` is required for the `table` variant; `label-position="left"` is not
+ *   supported in the `table` variant.
+ * - `max-tags` displays a counter but does not prevent selection beyond the limit — enforce
+ *   the limit in your `wmTagOptionSelected` or `wmTagInputTagAdded` handler.
+ * - The `add-new` feature (dropdown only) detects and announces duplicate entries.
+ * - In React, `wmTagOptionSelected` and `wmTagOptionDeselected` bubble from `wm-tag-option`
+ *   to `wm-tag-input` for the dropdown variant (listen on `WmTagInput`). For the table
+ *   variant, put the handlers directly on each `WmTagOption` instead. In both cases, you
+ *   must set `event.target.selected = true/false` imperatively — the component does not do
+ *   this automatically.
+ * - For the `add-new` dropdown variant, create and append a new `wm-tag-option` element with
+ *   `selected = true` in the `wmTagInputTagAdded` handler — the component does not create
+ *   the option element automatically.
+ *
+ * @example {html} Dropdown with add-new
+ * <wm-tag-input label="Skills" add-new="true">
+ *   <wm-tag-option>JavaScript</wm-tag-option>
+ *   <wm-tag-option>TypeScript</wm-tag-option>
+ *   <wm-tag-option>React</wm-tag-option>
+ * </wm-tag-input>
+ *
+ * @example {react} Dropdown with add-new
+ * // wmTagOptionSelected/Deselected bubble to WmTagInput for the dropdown variant.
+ * // You must set event.target.selected imperatively in each handler.
+ * // wmTagInputTagAdded fires when a new tag is created; event.detail is the tag string.
+ * // You must create and append a wm-tag-option DOM element with selected=true.
+ * const handleOptionSelected = (event) => {
+ *   event.target.selected = true;
+ *   setTags((prev) => [...prev, event.target.textContent.trim()]);
+ * };
+ * const handleOptionDeselected = (event) => {
+ *   const isUserAdded = event.target.getAttribute('user-added');
+ *   isUserAdded ? event.target.remove() : (event.target.selected = false);
+ *   setTags((prev) => prev.filter((t) => t !== event.target.textContent.trim()));
+ * };
+ * const handleTagAdded = (event) => {
+ *   const taginput = event.currentTarget;
+ *   const newTagName = event.detail;
+ *   const existingNames = Array.from(taginput.querySelectorAll('wm-tag-option'))
+ *     .map((o) => o.textContent.toLowerCase().trim());
+ *   if (!existingNames.includes(newTagName.toLowerCase().trim())) {
+ *     const newOption = document.createElement('wm-tag-option');
+ *     newOption.textContent = newTagName;
+ *     newOption.id = 'tag' + Math.random().toString(36).substr(2, 6);
+ *     newOption.selected = true;
+ *     newOption.setAttribute('user-added', 'true');
+ *     taginput.appendChild(newOption);
+ *     setTags((prev) => [...prev, newTagName]);
+ *   }
+ * };
+ *
+ * <WmTagInput label="Skills" addNew={true}
+ *   onWmTagOptionSelected={handleOptionSelected}
+ *   onWmTagOptionDeselected={handleOptionDeselected}
+ *   onWmTagInputTagAdded={handleTagAdded}>
+ *   <WmTagOption>JavaScript</WmTagOption>
+ *   <WmTagOption>TypeScript</WmTagOption>
+ *   <WmTagOption>React</WmTagOption>
+ * </WmTagInput>
+ *
+ * @example {html} Table variant
+ * <wm-tag-input label="Assign people" tag-input-type="table" col-headers="Name,Department">
+ *   <wm-tag-option col1="Smith, John" col2="Engineering"></wm-tag-option>
+ *   <wm-tag-option col1="Doe, Jane" col2="Design"></wm-tag-option>
+ * </wm-tag-input>
+ *
+ * @example {react} Table variant
+ * // For the table variant, put handlers on each WmTagOption rather than on WmTagInput.
+ * // event.target.col1 is the first column value, used as the tag label.
+ * const makeHandlers = (col1Value) => ({
+ *   onWmTagOptionSelected: (event) => {
+ *     event.target.selected = true;
+ *     setSelected((prev) => [...prev, col1Value]);
+ *   },
+ *   onWmTagOptionDeselected: (event) => {
+ *     event.target.selected = false;
+ *     setSelected((prev) => prev.filter((p) => p !== col1Value));
+ *   },
+ * });
+ *
+ * <WmTagInput label="Assign people" tagInputType="table" colHeaders="Name,Department">
+ *   <WmTagOption col1="Smith, John" col2="Engineering" {...makeHandlers('Smith, John')} />
+ *   <WmTagOption col1="Doe, Jane" col2="Design" {...makeHandlers('Doe, Jane')} />
+ * </WmTagInput>
+ *
+ * @category Form Inputs
+ */
 export class TagInput {
     constructor() {
         this.addNewHelpText = intl.formatMessage({
@@ -933,10 +1049,10 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: 'c638aeac0c2e0489bf71cd6173b2f90221f7a6ef', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '1484441e157e25cd9787023177a2a60ef3c424bc', class: "label-wrapper" }, h("label", { key: 'd03dc310d99b485cf7646f577812d8aea2c6bf3e', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '5fa23daa6bc6c89d2b6872cb78c5b95fc00d143c', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '3782fc2fd78096ea7c97cdcb6a8f8097c10a7c03', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '4ead1f6246e4a20bf0031f9390da66619b1136d4', class: "upper-row" }, h("div", { key: '924ee6f8a8eef661d43ada82a2cd5b790661f1a3', class: "svg-icon svg-search" }), h("div", { key: 'e6e2cc491591c82a08436c9cec5e588a3a6c9e2c', class: `tags-and-input-wrapper` }, h("ul", { key: '30e763dadc1ae2c273053beb67964c45747ef0f6', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { key: '8d2095f3a1db6e25151f0b95442d22a3d47998d7', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '851ca7472077c97fd6118989c72d67d9ca7485ff', class: "label-wrapper" }, h("label", { key: 'ef417da80549eeba2a99d6a213b49099e910f55a', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'a66f39755126c99fe1fcf278bdfff4004a96f6cc', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '6435ab846c56f1bb060a446406a2237ce9cf5786', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'ae62e931909c8f4e7e6533b70981a7ed6eca8a25', class: "upper-row" }, h("div", { key: 'ecd8bb747597ce4f4929c0d4a8f7b7cfddb88f5d', class: "svg-icon svg-search" }), h("div", { key: 'c58ffdff0a6592e2ccd85363238991ded57cdf8d', class: `tags-and-input-wrapper` }, h("ul", { key: '8304818f05cb42531fed95d87b0f5050ea7cc81d', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.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("div", { key: 'ad6c4adcc53f4d54d48d018a236a326edf9f9a80', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'f44b7837eeebd3234f8fccde00491404c4e7baad', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'f952e64ce8f546c8d2ac2d560c377a8431f06b50', id: "info", class: "info-text" }, this.info)), h("div", { key: '5ac26d03049f7f302a7d678b76534339b33c1033', id: "error" }, this.errorMessage), h("div", { key: '27817f3f1e5555220d61e3719e16c492cfca3789', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: 'a4cdbcc77d14c8ea4b4037683c77c8c153ee7e7d', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: '727b79d442e2a9cf23dbdf38bead067f232b8afd', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '906465be7dd186e91f1eaed2c02f460e18a5ee25', id: "info", class: "info-text" }, this.info)), h("div", { key: '483dd46bb26acfe7782a26e3aeab958a5e45bcce', id: "error" }, this.errorMessage), h("div", { key: 'b9d1ccd00c15921e8a5d01cd8bac35d9540cc6da', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get is() { return "wm-tag-input"; }
     static get encapsulation() { return "shadow"; }
@@ -964,7 +1080,13 @@ export class TagInput {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Accessible name for the search input and dropdown/table. Required even when\n`label-position=\"none\"`."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
                     "text": ""
                 },
                 "attribute": "label",
@@ -981,7 +1103,10 @@ export class TagInput {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Puts the component in an error state and displays this message below the\nfield."
+                        }],
                     "text": ""
                 },
                 "attribute": "error-message",
@@ -998,7 +1123,10 @@ export class TagInput {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Hint text displayed below the component."
+                        }],
                     "text": ""
                 },
                 "attribute": "info",
@@ -1015,7 +1143,13 @@ export class TagInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Controls label placement. `'none'` hides the label visually but keeps it\naccessible. `'left'` is not supported in the `table` variant."
+                        }, {
+                            "name": "default",
+                            "text": "\"top\""
+                        }],
                     "text": ""
                 },
                 "attribute": "label-position",
@@ -1033,7 +1167,10 @@ export class TagInput {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Maximum number of tags allowed. Displays a \"Tags added: x/y\" counter but\ndoes not prevent selection beyond the limit \u2014 enforce the limit in your\n`wmTagOptionSelected` or `wmTagInputTagAdded` handler."
+                        }],
                     "text": ""
                 },
                 "attribute": "max-tags",
@@ -1050,7 +1187,10 @@ export class TagInput {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Placeholder text in the search field. Defaults to a generated string based\non `add-new` and available options."
+                        }],
                     "text": ""
                 },
                 "attribute": "placeholder",
@@ -1067,7 +1207,13 @@ export class TagInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Displays a required-field asterisk next to the label."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "required-field",
@@ -1085,7 +1231,13 @@ export class TagInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Selects the component variant. `'dropdown'` shows a filterable list;\n`'table'` shows a filterable multi-column table."
+                        }, {
+                            "name": "default",
+                            "text": "\"dropdown\""
+                        }],
                     "text": ""
                 },
                 "attribute": "tag-input-type",
@@ -1103,7 +1255,10 @@ export class TagInput {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Overrides the default instructional help text shown at the top of the\ndropdown (dropdown variant) or below the input when `max-tags` is set (table variant)."
+                        }],
                     "text": ""
                 },
                 "attribute": "help-text",
@@ -1120,7 +1275,13 @@ export class TagInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Dropdown variant only. When true, the user can type a new value and add it\nas a tag by pressing Enter or comma."
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
                     "text": ""
                 },
                 "attribute": "add-new",
@@ -1138,7 +1299,13 @@ export class TagInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Dropdown variant only. Maximum character limit enforced on the search field."
+                        }, {
+                            "name": "default",
+                            "text": "50"
+                        }],
                     "text": ""
                 },
                 "attribute": "character-limit",
@@ -1156,7 +1323,13 @@ export class TagInput {
                 "required": true,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Table variant only. Comma-separated list of column header labels. The number\nof headers determines the number of columns."
+                        }, {
+                            "name": "conditionallyRequired",
+                            "text": "Required when `tag-input-type=\"table\"`."
+                        }],
                     "text": ""
                 },
                 "attribute": "col-headers",
@@ -1173,7 +1346,10 @@ export class TagInput {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Table variant only. Comma-separated column widths. Blank values fill\nremaining space."
+                        }],
                     "text": ""
                 },
                 "attribute": "col-widths",
@@ -1190,7 +1366,13 @@ export class TagInput {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Table variant only. Comma-separated text-wrapping rules per column \u2014 `'wrap'`\nor `'trunc'` (truncate with tooltip)."
+                        }, {
+                            "name": "default",
+                            "text": "\"wrap\" for all columns"
+                        }],
                     "text": ""
                 },
                 "attribute": "col-wrap",
@@ -1217,7 +1399,13 @@ export class TagInput {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the user adds a new tag by typing and pressing Enter or comma\n(dropdown variant, `add-new` enabled). The event detail is the text string of the new\ntag. Not fired when selecting an existing wm-tag-option \u2014 listen to `wmTagOptionSelected`\non the wm-tag-option for that."
+                        }, {
+                            "name": "eventDetails",
+                            "text": "string \u2014 the text of the newly created tag."
+                        }],
                     "text": ""
                 },
                 "complexType": {

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

@@ -1,4 +1,27 @@
 import { generateId } from "../../../global/functions";
+/**
+ * Option element for wm-tag-input. Represents a selectable tag in the dropdown list or
+ * table. Always used as a direct child of wm-tag-input. For the dropdown variant, slotted
+ * text content is the tag label; for the table variant, use `col1`–`col4` props.
+ *
+ * @usageNotes
+ * - Pre-select an option on load by setting `selected`; lock it from removal by setting
+ *   `locked`.
+ * - Listen to `wmTagOptionSelected` and `wmTagOptionDeselected` to react to selection
+ *   changes.
+ *
+ * @example {html} Dropdown option
+ * <wm-tag-option>JavaScript</wm-tag-option>
+ *
+ * @example {react} Dropdown option
+ * <WmTagOption onWmTagOptionSelected={handleSelect}>JavaScript</WmTagOption>
+ *
+ * @example {html} Pre-selected option
+ * <wm-tag-option selected>TypeScript</wm-tag-option>
+ *
+ * @example {react} Table option (col1–col4)
+ * <WmTagOption col1="Smith, John" col2="Engineering" />
+ */
 export class TagOption {
     constructor() {
         this.selected = false;
@@ -8,9 +31,17 @@ export class TagOption {
         this.col3 = undefined;
         this.col4 = undefined;
     }
+    /**
+     * @description Programmatically selects this option, adding it as a tag.
+     * @returns A promise that resolves once the event has been emitted.
+     */
     async emitSelectedEvent() {
         this.wmTagOptionSelected.emit();
     }
+    /**
+     * @description Programmatically deselects this option, removing it as a tag.
+     * @returns A promise that resolves once the event has been emitted.
+     */
     async emitDeselectedEvent() {
         this.wmTagOptionDeselected.emit();
     }
@@ -37,7 +68,13 @@ export class TagOption {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Whether this option is currently selected (appears as a tag). Setting this\non load pre-selects the option."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "selected",
@@ -55,7 +92,13 @@ export class TagOption {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "When true, the option is permanently selected and cannot be removed by the\nuser."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": ""
                 },
                 "attribute": "locked",
@@ -73,7 +116,10 @@ export class TagOption {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "First column value for the `table` variant. Also used as the tag label when\nthis option is selected."
+                        }],
                     "text": ""
                 },
                 "attribute": "col1",
@@ -90,7 +136,10 @@ export class TagOption {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Second column value for the `table` variant."
+                        }],
                     "text": ""
                 },
                 "attribute": "col2",
@@ -107,7 +156,10 @@ export class TagOption {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Third column value for the `table` variant."
+                        }],
                     "text": ""
                 },
                 "attribute": "col3",
@@ -124,7 +176,10 @@ export class TagOption {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fourth column value for the `table` variant."
+                        }],
                     "text": ""
                 },
                 "attribute": "col4",
@@ -140,7 +195,13 @@ export class TagOption {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Internal signal consumed by wm-tag-input to update the tag list \u2014 not for application use."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -155,7 +216,13 @@ export class TagOption {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Internal signal consumed by wm-tag-input to update the tag list \u2014 not for application use."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -170,7 +237,10 @@ export class TagOption {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when this option is selected as a tag."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -185,7 +255,10 @@ export class TagOption {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when this option's tag is removed."
+                        }],
                     "text": ""
                 },
                 "complexType": {
@@ -211,7 +284,13 @@ export class TagOption {
                 },
                 "docs": {
                     "text": "",
-                    "tags": []
+                    "tags": [{
+                            "name": "description",
+                            "text": "Programmatically selects this option, adding it as a tag."
+                        }, {
+                            "name": "returns",
+                            "text": "A promise that resolves once the event has been emitted."
+                        }]
                 }
             },
             "emitDeselectedEvent": {
@@ -228,7 +307,13 @@ export class TagOption {
                 },
                 "docs": {
                     "text": "",
-                    "tags": []
+                    "tags": [{
+                            "name": "description",
+                            "text": "Programmatically deselects this option, removing it as a tag."
+                        }, {
+                            "name": "returns",
+                            "text": "A promise that resolves once the event has been emitted."
+                        }]
                 }
             }
         };