carbon-components-angular 5.61.1 → 5.61.2

package/docs/documentation.json

@@ -23273,7 +23273,7 @@
         },
         {
             "name": "ComboBox",
-            "id": "component-ComboBox-c068a9941c2d47f0543b365c579b83a84cedb4e51af6dd82e9dec6adc43516bf4f92e27533f59ca667ff678ddea3f742f86e755fbf5b195bfda4f3e58c859aa9",
+            "id": "component-ComboBox-ef7f2d87b1acfe5d29964f5676694b5387cf38348c08ab1047e5d984bced49c75fe8be23bfbd9e765fe02e83de7969a7a2e08f6f9702f06b184f1d2fb7535729",
             "file": "src/combobox/combobox.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -23864,7 +23864,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 853,
+                    "line": 859,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates the `Dropdown` list as an element that is appended to the DOM body.\n",
@@ -23876,7 +23876,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 864,
+                    "line": 870,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCreates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n",
@@ -23895,7 +23895,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 833,
+                    "line": 839,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n",
@@ -23935,7 +23935,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 893,
+                    "line": 899,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles clicks outside of the `Dropdown` list.\n",
@@ -23958,7 +23958,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 873,
+                    "line": 879,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nDetects whether or not the `Dropdown` list is visible within all scrollable parents.\nThis can be overridden by passing in a value to the `dropUp` input.\n",
@@ -23977,7 +23977,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 805,
+                    "line": 811,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -24029,7 +24029,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 713,
+                    "line": 719,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCloses the dropdown and emits the close event.\n",
@@ -24051,7 +24051,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 902,
+                    "line": 908,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -24118,7 +24118,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 826,
+                    "line": 832,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -24166,7 +24166,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 761,
+                    "line": 767,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the list group filter, and manages single select item selection.\n",
@@ -24209,7 +24209,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 794,
+                    "line": 800,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nIntended to be used to add items to the list.\n",
@@ -24235,7 +24235,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 727,
+                    "line": 733,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOpens the dropdown.\n",
@@ -24336,7 +24336,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 750,
+                    "line": 756,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nToggles the dropdown.\n",
@@ -24428,7 +24428,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ComboBoxModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p>ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide &quot;pills&quot; of selected items.</p>\n<p><a href=\"../../?path=/story/components-combobox--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ComboBoxModule } from 'carbon-components-angular';\n```\n\nComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\nMulti-select comboboxes also provide \"pills\" of selected items.\n\n[See demo](../../?path=/story/components-combobox--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\n * ```\n *\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--list-box__wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box__wrapper--fluid': fluid,\n\t\t\t\t'cds--list-box__wrapper--fluid--invalid': fluid && invalid,\n\t\t\t\t'cds--list-box__wrapper--fluid--focus': fluid && _isFocused\n\t\t\t}\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\t[id]=\"labelId\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t\t'cds--list-box--expanded': open,\n\t\t\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t\t\t'cds--combo-box--readonly': readonly,\n\t\t\t\t\t'cds--combo-box--warning cds--list-box--warning': warn,\n\t\t\t\t\t'cds--list-box--invalid': invalid\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled || readonly}\">\n\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled || readonly\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[readOnly]=\"readonly\"\n\t\t\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t\t\t\t(blur)=\"fluid ? handleFocus($event) : onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<hr *ngIf=\"fluid\" class=\"cds--list-box__divider\" />\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn && !fluid\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable<string>) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable<string>) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable<string>) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `combobox-${ComboBox.comboBoxCount++}`;\n\t@Input() labelId = `combobox-label-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array<ListItem> = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = false;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter<ListItem | ListItem[]>();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter<{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter<void>();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter<string>();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter<Event>();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\toutsideClick = this._outsideClick.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\tprotected _isFocused = false;\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif (this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.selected.emit(event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t\t}\n\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t//    this should also cover the case where the dropdown is in a modal\n\t\t//    (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.preventDefault();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value ?? []) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected(event) {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t// clearSelected can only fire on type=multi\n\t\t// so we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\n\t\t// in case there are disabled items they should be mapped according to itemValueKey\n\t\tif (this.itemValueKey && selected) {\n\t\t\tconst values = selected.map((item) => item[this.itemValueKey]);\n\t\t\tthis.propagateChangeCallback(values);\n\t\t} else {\n\t\t\tthis.propagateChangeCallback(selected);\n\t\t}\n\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit(event);\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled || this.readonly) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tif (this.disabled || this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected(event);\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation();  // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tOnChanges,\n\tContentChild,\n\tInput,\n\tOutput,\n\tHostListener,\n\tElementRef,\n\tViewChild,\n\tEventEmitter,\n\tAfterViewInit,\n\tAfterContentInit,\n\tHostBinding,\n\tTemplateRef,\n\tOnDestroy\n} from \"@angular/core\";\nimport { AbstractDropdownView, DropdownService } from \"carbon-components-angular/dropdown\";\nimport { ListItem } from \"carbon-components-angular/dropdown\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { filter } from \"rxjs/operators\";\nimport {\n\tgetScrollableParents,\n\thasScrollableParents\n} from \"carbon-components-angular/utils\";\nimport { I18n, Overridable } from \"carbon-components-angular/i18n\";\nimport { Observable } from \"rxjs\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ComboBoxModule } from 'carbon-components-angular';\n * ```\n *\n * ComboBoxes are similar to dropdowns, except a combobox provides an input field for users to search items and (optionally) add their own.\n * Multi-select comboboxes also provide \"pills\" of selected items.\n *\n * [See demo](../../?path=/story/components-combobox--basic)\n */\n@Component({\n\tselector: \"cds-combo-box, ibm-combo-box\",\n\ttemplate: `\n\t\t<div\n\t\t\tclass=\"cds--list-box__wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box__wrapper--fluid': fluid,\n\t\t\t\t'cds--list-box__wrapper--fluid--invalid': fluid && invalid,\n\t\t\t\t'cds--list-box__wrapper--fluid--focus': fluid && _isFocused\n\t\t\t}\">\n\t\t\t<label\n\t\t\t\t*ngIf=\"label\"\n\t\t\t\t[for]=\"id\"\n\t\t\t\t[id]=\"labelId\"\n\t\t\t\tclass=\"cds--label\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t\t'cds--visually-hidden': hideLabel\n\t\t\t\t}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\t#listbox\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--multi-select cds--multi-select--filterable': type === 'multi',\n\t\t\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t\t\t'cds--list-box--expanded': open,\n\t\t\t\t\t'cds--list-box--sm': size === 'sm',\n\t\t\t\t\t'cds--list-box--md': size === 'md',\n\t\t\t\t\t'cds--list-box--lg': size === 'lg',\n\t\t\t\t\t'cds--list-box--disabled': disabled,\n\t\t\t\t\t'cds--combo-box--readonly': readonly,\n\t\t\t\t\t'cds--combo-box--warning cds--list-box--warning': warn,\n\t\t\t\t\t'cds--list-box--invalid': invalid\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--list-box cds--combo-box\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<div\n\t\t\t\t\tclass=\"cds--list-box__field\"\n\t\t\t\t\t(click)=\"toggleDropdown()\"\n\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t\tclass=\"cds--tag cds--tag--filter cds--tag--high-contrast\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--tag--disabled': disabled || readonly}\">\n\t\t\t\t\t\t<span class=\"cds--tag__label\">{{ pills.length }}</span>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t(click)=\"clearSelected($event)\"\n\t\t\t\t\t\t\t(blur)=\"onBlur()\"\n\t\t\t\t\t\t\t(keydown.enter)=\"clearSelected($event)\"\n\t\t\t\t\t\t\tclass=\"cds--tag__close-icon\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\t[title]=\"clearSelectionsTitle\"\n\t\t\t\t\t\t\t[disabled]=\"disabled || readonly\"\n\t\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\">\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[readOnly]=\"readonly\"\n\t\t\t\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t\t\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t\t\t\t(blur)=\"fluid ? handleFocus($event) : onBlur()\"\n\t\t\t\t\t\t(keydown.enter)=\"onSubmit($event)\"\n\t\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\t\tclass=\"cds--text-input\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--text-input--empty': !showClearButton}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t\t[attr.aria-labelledby]=\"labelId\"\n\t\t\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t\t\t[attr.maxlength]=\"maxLength\"\n\t\t\t\t\t\t[attr.aria-controls]=\"open ? view?.listId : null\"\n\t\t\t\t\t\t[attr.aria-autocomplete]=\"autocomplete\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"showClearButton\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__selection\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[attr.aria-label]=\"clearSelectionAria\"\n\t\t\t\t\t\t[title]=\"clearSelectionTitle\"\n\t\t\t\t\t\t(keyup.enter)=\"clearInput($event)\"\n\t\t\t\t\t\t(click)=\"clearInput($event)\"\n\t\t\t\t\t\t(blur)=\"onBlur()\">\n\t\t\t\t\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t\t\t\t\t</div>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-icon\"\n\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t[title]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[attr.aria-label]=\"open ? closeMenuAria : openMenuAria\"\n\t\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': open}\">\n\t\t\t\t\t\t<svg cdsIcon=\"chevron--down\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#dropdownMenu\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-content *ngIf=\"open\"></ng-content>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<hr *ngIf=\"fluid\" class=\"cds--list-box__divider\" />\n\t\t\t<div\n\t\t\t\t*ngIf=\"helperText && !invalid && !warn && !fluid\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: ComboBox,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnDestroy {\n\t/**\n\t * Text to show when nothing is selected.\n\t */\n\t@Input() set placeholder(value: string | Observable<string>) {\n\t\tthis._placeholder.override(value);\n\t}\n\n\tget placeholder() {\n\t\treturn this._placeholder.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when closed\n\t */\n\t@Input() set openMenuAria(value: string | Observable<string>) {\n\t\tthis._openMenuAria.override(value);\n\t}\n\n\tget openMenuAria() {\n\t\treturn this._openMenuAria.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the combobox control menu when opened\n\t */\n\t@Input() set closeMenuAria(value: string | Observable<string>) {\n\t\tthis._closeMenuAria.override(value);\n\t}\n\n\tget closeMenuAria() {\n\t\treturn this._closeMenuAria.value;\n\t}\n\t/**\n\t * Value to display on the clear selections icon, when multi is selected\n\t */\n\t@Input() set clearSelectionsTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionsTitle.override(value);\n\t}\n\n\tget clearSelectionsTitle() {\n\t\treturn this._clearSelectionsTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes to clear selections, when multi is selected\n\t */\n\t@Input() set clearSelectionsAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionsAria.override(value);\n\t}\n\n\tget clearSelectionsAria() {\n\t\treturn this._clearSelectionsAria.value;\n\t}\n\t/**\n\t * Value to display on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionTitle(value: string | Observable<string>) {\n\t\tthis._clearSelectionTitle.override(value);\n\t}\n\n\tget clearSelectionTitle() {\n\t\treturn this._clearSelectionTitle.value;\n\t}\n\t/**\n\t * Value to display for accessibility purposes on the clear the selected item icon, when single is selected\n\t */\n\t@Input() set clearSelectionAria(value: string | Observable<string>) {\n\t\tthis._clearSelectionAria.override(value);\n\t}\n\n\tget clearSelectionAria() {\n\t\treturn this._clearSelectionAria.value;\n\t}\n\tstatic comboBoxCount = 0;\n\t@Input() id = `combobox-${ComboBox.comboBoxCount++}`;\n\t@Input() labelId = `combobox-label-${ComboBox.comboBoxCount++}`;\n\t/**\n\t * List of items to fill the content with.\n\t *\n\t * **Example:**\n\t * ```javascript\n\t * items = [\n\t *\t\t{\n\t *\t\t\tcontent: \"Abacus\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Byte\",\n\t *\t\t\tselected: false,\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Computer\",\n\t *\t\t\tselected: false\n\t *\t\t},\n\t *\t\t{\n\t *\t\t\tcontent: \"Digital\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t * ];\n\t * ```\n\t *\n\t */\n\t@Input() items: Array<ListItem> = [];\n\t/**\n\t * Combo box type (supporting single or multi selection of items).\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Combo box render size.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Label for the combobox.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Set to `true` to show the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if combobox is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t* Set to `true` to show a warning (contents set by warnText)\n\t*/\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Max length value to limit input characters\n\t */\n\t@Input() maxLength: number = null;\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at its position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Specify aria-autocomplete attribute of text input.\n\t * \"list\", is the expected value for a combobox that invokes a drop-down list\n\t */\n\t@Input() autocomplete = \"list\";\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Set to `true` to disable combobox.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = false;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\t/**\n\t * Emits a ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t * \t\tcontent: \"one\",\n\t * \t\tselected: true\n\t * }\n\t * ```\n\t */\n\t@Output() selected = new EventEmitter<ListItem | ListItem[]>();\n\t/**\n\t * Intended to be used to add items to the list.\n\t *\n\t * Emits an event that includes the current item list, the suggested index for the new item, and a simple ListItem\n\t *\n\t * Example:\n\t * ```javascript\n\t *\t{\n\t *\t\titems: [{content: \"one\", selected: true}, {content: \"two\", selected: true}],\n\t *\t\tindex: 1,\n\t *\t\tvalue: {\n\t *\t\t\tcontent: \"some user string\",\n\t *\t\t\tselected: false\n\t *\t\t}\n\t *\t}\n\t * ```\n\t *\n\t *\n\t * Example:\n\t * ```javascript\n\t * {\n\t *\tafter: 1,\n\t *\tvalue: \"some user string\"\n\t * }\n\t * ```\n\t */\n\t@Output() submit = new EventEmitter<{\n\t\titems: ListItem[],\n\t\tindex: number,\n\t\tvalue: {\n\t\t\tcontent: string,\n\t\t\tselected: boolean\n\t\t}\n\t}>();\n\t/** Emits an empty event when the menu is closed */\n\t@Output() close = new EventEmitter<void>();\n\t/** Emits the search string from the input */\n\t@Output() search = new EventEmitter<string>();\n\t/** Emits an event when the clear button is clicked. */\n\t@Output() clear = new EventEmitter<Event>();\n\t/** ContentChild reference to the instantiated dropdown list */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t@ViewChild(\"dropdownMenu\") dropdownMenu;\n\t@ViewChild(\"input\", { static: true }) input: ElementRef;\n\t@ViewChild(\"listbox\", { static: true }) listbox: ElementRef;\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostClass = true;\n\n\tpublic open = false;\n\n\tpublic showClearButton = false;\n\n\t/** Selected items for multi-select combo-boxes. */\n\tpublic pills = [];\n\t/** used to update the displayValue */\n\tpublic selectedValue = \"\";\n\n\toutsideClick = this._outsideClick.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\tprotected noop = this._noop.bind(this);\n\tprotected onTouchedCallback: () => void = this._noop;\n\tprotected propagateChangeCallback: (_: any) => void = this._noop;\n\n\tprotected _placeholder = this.i18n.getOverridable(\"COMBOBOX.PLACEHOLDER\");\n\tprotected _closeMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLOSE_MENU\");\n\tprotected _openMenuAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.OPEN_MENU\");\n\tprotected _clearSelectionsTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionsAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTIONS\");\n\tprotected _clearSelectionTitle = this.i18n.getOverridable(\"COMBOBOX.CLEAR_SELECTED\");\n\tprotected _clearSelectionAria = this.i18n.getOverridable(\"COMBOBOX.A11Y.CLEAR_SELECTED\");\n\n\tprotected _isFocused = false;\n\n\t/**\n\t * Creates an instance of ComboBox.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected i18n: I18n\n\t) {}\n\n\t/**\n\t * Lifecycle hook.\n\t * Updates pills if necessary.\n\t *\n\t */\n\tngOnChanges(changes) {\n\t\tif (changes.items) {\n\t\t\tthis.view.items = changes.items.currentValue;\n\t\t\tthis.updateSelected();\n\t\t\t// If new items are added into the combobox while there is search input,\n\t\t\t// repeat the search. Search should only trigger for type 'single' when there is no value selected.\n\t\t\tif (this.type === \"multi\" || (this.type === \"single\" && !this.selectedValue)) {\n\t\t\t\tthis.onSearch(this.input.nativeElement.value, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Sets initial state that depends on child components\n\t * Subscribes to select events and handles focus/filtering/initial list updates\n\t */\n\tngAfterContentInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\n\t\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\t\tthis.view.select.subscribe(event => {\n\t\t\t\tif (Array.isArray(event)) {\n\t\t\t\t\tthis.updatePills();\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\t\t\tthis.propagateChangeCallback(values);\n\t\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(this.view.getSelected());\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.selected.emit(event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// If type is single, dropdown list will emit an object\n\t\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\t\tthis.showClearButton = true;\n\t\t\t\t\t\tthis.selectedValue = event.item.content;\n\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item[this.itemValueKey]);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tthis.propagateChangeCallback(event.item);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.selectedValue = \"\";\n\t\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\t\tthis.propagateChangeCallback(null);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t// not guarding these since the nativeElement has to be loaded\n\t\t\t\t\t// for select to even fire\n\t\t\t\t\t// only focus for \"organic\" selections\n\t\t\t\t\tif (!isUpdate(event)) {\n\t\t\t\t\t\tthis.elementRef.nativeElement.querySelector(\"input\").focus();\n\t\t\t\t\t\tthis.view.filterBy(\"\");\n\t\t\t\t\t\tthis.selected.emit(event.item);\n\t\t\t\t\t\tthis.closeDropdown();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t\t// update the rest of combobox with any pre-selected items\n\t\t\t// setTimeout just defers the call to the next check cycle\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.updateSelected();\n\t\t\t});\n\n\t\t\tthis.view.blurIntent.pipe(filter(v => v === \"top\")).subscribe(() => {\n\t\t\t\tthis.elementRef.nativeElement.querySelector(\".cds--text-input\").focus();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Binds event handlers against the rendered view\n\t */\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t//    this should also cover the case where the dropdown is in a modal\n\t\t//    (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Handles `Escape/Tab` key closing the dropdown, and arrow up/down focus to/from the dropdown list.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thostkeys(ev: KeyboardEvent) {\n\t\tif (ev.key === \"Escape\") {\n\t\t\tthis.closeDropdown();\n\t\t} else if ((ev.key === \"ArrowDown\")\n\t\t\t&& (!this.dropdownMenu || !this.dropdownMenu.nativeElement.contains(ev.target))) {\n\t\t\tev.preventDefault();\n\t\t\tthis.openDropdown();\n\t\t\tsetTimeout(() => { this.view.initFocus(); }, 0);\n\t\t}\n\n\t\tif (\n\t\t\tthis.open && ev.key === \"Tab\" &&\n\t\t\t(this.dropdownMenu.nativeElement.contains(ev.target as Node) || ev.target === this.input.nativeElement)\n\t\t) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tif (this.open && ev.key === \"Tab\" && ev.shiftKey) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/*\n\t * no-op method for null event listeners, and other no op calls\n\t */\n\t_noop() {}\n\n\t/*\n\t * propagates the value provided from ngModel\n\t */\n\twriteValue(value: any) {\n\t\tif (this.type === \"single\") {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the specified item and update its state\n\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\tnewValue.selected = true;\n\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t} else {\n\t\t\t\t// all items in propagateSelected must be iterable\n\t\t\t\tthis.view.propagateSelected([value || \"\"]);\n\t\t\t}\n\t\t\tthis.showClearButton = !!(value && this.view.getSelected().length);\n\t\t} else {\n\t\t\tif (this.itemValueKey) {\n\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\tlet newValues = [];\n\t\t\t\tfor (const v of value ?? []) {\n\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t} else {\n\t\t\t\tthis.view.propagateSelected(value ? value : [\"\"]);\n\t\t\t}\n\t\t}\n\t\tthis.updateSelected();\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChangeCallback = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the combobox.\n\t *\n\t * ex: `this.formGroup.get(\"myCoolCombobox\").disable();`\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Called by `n-pill-input` when the selected pills have changed.\n\t */\n\tpublic updatePills() {\n\t\tthis.pills = this.view.getSelected() || [];\n\t\tthis.checkForReorder();\n\t}\n\n\tpublic clearSelected(event) {\n\t\tthis.items = this.items.map(item => {\n\t\t\tif (!item.disabled) {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t\treturn item;\n\t\t});\n\t\tthis.view.items = this.items;\n\t\tthis.updatePills();\n\t\t/**\n\t\t * @todo - In next major version update to the following:\n\t\t * const selected = this.type === \"multi\" ? this.view.getSelected() : undefined;\n\t\t *\n\t\t * Previously it returned an empty array even for type === 'single'\n\t\t * Also resolve #ref-1245723\n\t\t */\n\t\t// On type=multi we just emit getSelected() (just in case there's any disabled but selected items)\n\t\tconst selected = this.view.getSelected();\n\n\t\t// in case there are disabled items they should be mapped according to itemValueKey\n\t\tif (this.itemValueKey && selected) {\n\t\t\tconst values = selected.map((item) => item[this.itemValueKey]);\n\t\t\tthis.propagateChangeCallback(values);\n\t\t} else {\n\t\t\tthis.propagateChangeCallback(selected);\n\t\t}\n\n\t\tthis.selected.emit(selected as any);\n\t\tthis.clear.emit(event);\n\t}\n\n\t/**\n\t * Closes the dropdown and emits the close event.\n\t */\n\tpublic closeDropdown() {\n\t\tthis.open = false;\n\t\tthis.checkForReorder();\n\t\tthis.close.emit();\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t}\n\n\t/**\n\t * Opens the dropdown.\n\t */\n\tpublic openDropdown() {\n\t\tif (this.disabled || this.readonly) { return; }\n\t\tthis.open = true;\n\t\tthis._dropUp = false;\n\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\n\t\t// set the dropdown menu to drop up if it is near the bottom of the screen\n\t\t// setTimeout lets us do the calculations after it is visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\t/**\n\t * Toggles the dropdown.\n\t */\n\tpublic toggleDropdown() {\n\t\tif (this.open) {\n\t\t\tthis.closeDropdown();\n\t\t} else {\n\t\t\tthis.openDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the list group filter, and manages single select item selection.\n\t */\n\tpublic onSearch(searchString, shouldEmitSearch = true) {\n\t\tif (shouldEmitSearch) {\n\t\t\tthis.search.emit(searchString);\n\t\t}\n\t\tthis.showClearButton = !!searchString;\n\t\tthis.view.filterBy(searchString);\n\t\tif (searchString !== \"\") {\n\t\t\tif (!this.open) {\n\t\t\t\tthis.openDropdown();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedValue = \"\";\n\t\t\tif (this.type === \"multi\" &&\n\t\t\t\t(this.selectionFeedback === \"top\" || this.selectionFeedback === \"top-after-reopen\")) {\n\t\t\t\tthis.view.reorderSelected();\n\t\t\t}\n\t\t}\n\t\tif (this.type === \"single\") {\n\t\t\t// deselect if the input doesn't match the content\n\t\t\t// of any given item\n\t\t\tconst matches = this.view.getListItems().some(item => item.content.toLowerCase().includes(searchString.toLowerCase()));\n\t\t\tif (!matches) {\n\t\t\t\tconst selected = this.view.getSelected();\n\t\t\t\tif (!selected || !selected[0]) {\n\t\t\t\t\tthis.view.filterBy(searchString);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Intended to be used to add items to the list.\n\t */\n\tpublic onSubmit(event: KeyboardEvent) {\n\t\tthis.submit.emit({\n\t\t\titems: this.view.getListItems(),\n\t\t\tindex: 0,\n\t\t\tvalue: {\n\t\t\t\tcontent: (event.target as HTMLInputElement).value,\n\t\t\t\tselected: false\n\t\t\t}\n\t\t});\n\t}\n\n\tclearInput(event) {\n\t\tevent.stopPropagation();\n\t\tevent.preventDefault();\n\n\t\tif (this.disabled || this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.type === \"single\") { // don't want to clear selected or close if multi\n\t\t\tthis.clearSelected(event);\n\t\t\tthis.closeDropdown();\n\t\t}\n\n\t\tthis.selectedValue = \"\";\n\t\tthis.input.nativeElement.value = \"\";\n\n\t\tthis.showClearButton = false;\n\t\tthis.input.nativeElement.focus();\n\t\tthis.onSearch(this.input.nativeElement.value);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif ((event.key === \"Escape\") && this.open) {\n\t\t\tevent.stopImmediatePropagation();  // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeDropdown();\n\t\t\tthis.input.nativeElement.focus();\n\t\t} else if (this.open && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.input.nativeElement.focus();\n\t\t\tthis.input.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.listbox.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${this.open ? \" cds--list-box--expanded\" : \"\"}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Handles clicks outside of the `Dropdown` list.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeDropdown();\n\t\t}\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\n\t}\n\n\tprotected updateSelected() {\n\t\tconst selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\tthis.updatePills();\n\t\t} else if (selected) {\n\t\t\tconst value = selected[0] ? selected[0].content : \"\";\n\t\t\tconst changeCallbackValue = selected[0] ? selected[0] : \"\";\n\t\t\tthis.selectedValue = value;\n\t\t\tthis.showClearButton = !!value;\n\t\t}\n\t}\n\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = !this.open && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected(true);\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -38434,7 +38434,7 @@
         },
         {
             "name": "MockQueryCombobox",
-            "id": "component-MockQueryCombobox-4fa9eb9fed1d5265efe98cf025a767e6c00260c0c49e3679e1eb575efd3040d8a705730b53a11438b77f7b5ec7157688e55c28780c323775e3fcbc44909ab78f",
+            "id": "component-MockQueryCombobox-87d1f26349c813e36ca2b19d0e7cb9ff5690dd69abba140e1debc7229ebd981131f8cc38bc647b1e0d58efecb873a83465cdde7d68564cdc21309bb408ee9a59",
             "file": "src/combobox/stories/app-mock-query-search.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -38444,13 +38444,22 @@
             "selector": "app-mock-query-search",
             "styleUrls": [],
             "styles": [],
-            "template": "<cds-combo-box\n\tappendInline=\"true\"\n\t[items]=\"filterItems\"\n\t(search)=\"onSearch($event)\">\n\t<cds-dropdown-list></cds-dropdown-list>\n</cds-combo-box>\n\t",
+            "template": "<cds-combo-box\n\tappendInline=\"true\"\n\t[items]=\"filterItems\"\n\t(search)=\"onSearch($event)\"\n\t(selected)=\"selected($event)\">\n\t<cds-dropdown-list></cds-dropdown-list>\n</cds-combo-box>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
             "inputsClass": [],
             "outputsClass": [],
             "propertiesClass": [
+                {
+                    "name": "currentlySelected",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "any",
+                    "optional": false,
+                    "description": "",
+                    "line": 17
+                },
                 {
                     "name": "filterItems",
                     "defaultValue": "[]",
@@ -38459,7 +38468,7 @@
                     "type": "any",
                     "optional": false,
                     "description": "",
-                    "line": 15
+                    "line": 16
                 }
             ],
             "methodsClass": [
@@ -38469,9 +38478,37 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 17,
+                    "line": 19,
                     "deprecated": false,
                     "deprecationMessage": ""
+                },
+                {
+                    "name": "selected",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "any",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 37,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "name": "event",
+                            "type": "any",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
                 }
             ],
             "deprecated": false,
@@ -38483,7 +38520,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component } from \"@angular/core\";\n\n@Component({\n\tselector: \"app-mock-query-search\",\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\tappendInline=\"true\"\n\t\t\t[items]=\"filterItems\"\n\t\t\t(search)=\"onSearch($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})\nexport class MockQueryCombobox {\n\tfilterItems: any = [];\n\n\tonSearch() {\n\t\t// Call API or search through items list\n\t\tsetTimeout(() => {\n\t\t\tthis.filterItems = [\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` }\n\t\t\t];\n\t\t}, 1000);\n\t}\n}\n",
+            "sourceCode": "import { Component } from \"@angular/core\";\n\n@Component({\n\tselector: \"app-mock-query-search\",\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\tappendInline=\"true\"\n\t\t\t[items]=\"filterItems\"\n\t\t\t(search)=\"onSearch($event)\"\n\t\t\t(selected)=\"selected($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t`\n})\nexport class MockQueryCombobox {\n\tfilterItems: any = [];\n\tcurrentlySelected: any;\n\n\tonSearch() {\n\t\t// Call API or search through items list\n\t\tsetTimeout(() => {\n\t\t\tconst array = [\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t];\n\n\t\t\t// Include current selected in the list to avoid auto clear\n\t\t\tif (this.currentlySelected) {\n\t\t\t\tarray.push(this.currentlySelected)\n\t\t\t}\n\t\t\tthis.filterItems = array;\n\t\t}, 1000);\n\t}\n\n\tselected(event: any) {\n\t\t/**\n\t\t * #ref-1245723\n\t\t * Update this on major release\n\t\t */\n\t\tif (Array.isArray(event) && !event.length) {\n\t\t\tthis.currentlySelected = undefined;\n\t\t} else {\n\t\t\tthis.currentlySelected = event;\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -75374,31 +75411,31 @@
                 "name": "AutoAlignTemplate",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/toggletip/toggletip.stories.ts",
+                "file": "src/tooltip/definition-tooptip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t\t\t<cds-toggletip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t\t\t<button cdsToggletipButton>\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div cdsToggletipContent>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</cds-toggletip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "AutoAlignTemplate",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/definition-tooptip.stories.ts",
+                "file": "src/tooltip/tooltip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "AutoAlignTemplate",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/tooltip.stories.ts",
+                "file": "src/toggletip/toggletip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t\t\t<cds-toggletip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t\t\t<button cdsToggletipButton>\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div cdsToggletipContent>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</cds-toggletip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "basic",
@@ -75494,7 +75531,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/content-switcher/content-switcher.stories.ts",
+                "file": "src/combobox/combobox.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75504,7 +75541,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/combobox/combobox.stories.ts",
+                "file": "src/content-switcher/content-switcher.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75914,7 +75951,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/toggletip/toggletip.stories.ts",
+                "file": "src/tooltip/definition-tooptip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75924,7 +75961,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/definition-tooptip.stories.ts",
+                "file": "src/tooltip/tooltip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75934,7 +75971,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/tooltip.stories.ts",
+                "file": "src/toggletip/toggletip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -78406,21 +78443,21 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/content-switcher/content-switcher.stories.ts",
+                "file": "src/combobox/combobox.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-content-switcher (selected)=\"selected($event)\">\n\t\t\t<button cdsContentOption name=\"First\">First section</button>\n\t\t\t<button cdsContentOption name=\"Second\">Second section</button>\n\t\t\t<button cdsContentOption name=\"Third\">Third section</button>\n\t\t</cds-content-switcher>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/combobox/combobox.stories.ts",
+                "file": "src/content-switcher/content-switcher.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-content-switcher (selected)=\"selected($event)\">\n\t\t\t<button cdsContentOption name=\"First\">First section</button>\n\t\t\t<button cdsContentOption name=\"Second\">Second section</button>\n\t\t\t<button cdsContentOption name=\"Third\">Third section</button>\n\t\t</cds-content-switcher>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -78826,31 +78863,31 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/toggletip/toggletip.stories.ts",
+                "file": "src/tooltip/definition-tooptip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t<cds-toggletip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t<button cdsToggletipButton>\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t\t<div cdsToggletipContent>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t</p>\n\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-toggletip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/definition-tooptip.stories.ts",
+                "file": "src/tooltip/tooltip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t[description]=\"description\">\n\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/tooltip.stories.ts",
+                "file": "src/toggletip/toggletip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t[description]=\"description\">\n\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t<cds-toggletip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t<button cdsToggletipButton>\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t\t<div cdsToggletipContent>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t</p>\n\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-toggletip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "Template",
@@ -79158,7 +79195,7 @@
                 "name": "WithAutoAlign",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/toggletip/toggletip.stories.ts",
+                "file": "src/tooltip/definition-tooptip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -79168,7 +79205,7 @@
                 "name": "WithAutoAlign",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/definition-tooptip.stories.ts",
+                "file": "src/tooltip/tooltip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -79178,7 +79215,7 @@
                 "name": "WithAutoAlign",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tooltip/tooltip.stories.ts",
+                "file": "src/toggletip/toggletip.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -81798,22 +81835,22 @@
                     "defaultValue": "AutoAlignTemplate.bind({})"
                 }
             ],
-            "src/toggletip/toggletip.stories.ts": [
+            "src/tooltip/definition-tooptip.stories.ts": [
                 {
                     "name": "AutoAlignTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/toggletip/toggletip.stories.ts",
+                    "file": "src/tooltip/definition-tooptip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t\t\t<cds-toggletip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t\t\t<button cdsToggletipButton>\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div cdsToggletipContent>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</cds-toggletip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
                     "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/toggletip/toggletip.stories.ts",
+                    "file": "src/tooltip/definition-tooptip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
@@ -81823,121 +81860,121 @@
                     "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/toggletip/toggletip.stories.ts",
+                    "file": "src/tooltip/definition-tooptip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t<cds-toggletip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t<button cdsToggletipButton>\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t\t<div cdsToggletipContent>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t</p>\n\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-toggletip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
                     "name": "WithAutoAlign",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/toggletip/toggletip.stories.ts",
+                    "file": "src/tooltip/definition-tooptip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "AutoAlignTemplate.bind({})"
                 }
             ],
-            "src/tooltip/definition-tooptip.stories.ts": [
+            "src/tooltip/tooltip.stories.ts": [
                 {
                     "name": "AutoAlignTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/definition-tooptip.stories.ts",
+                    "file": "src/tooltip/tooltip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
                     "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/definition-tooptip.stories.ts",
+                    "file": "src/tooltip/tooltip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "Template",
+                    "name": "Ellipses",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/definition-tooptip.stories.ts",
+                    "file": "src/tooltip/tooltip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "EllipsesTemplate.bind({})"
                 },
                 {
-                    "name": "WithAutoAlign",
+                    "name": "EllipsesTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/definition-tooptip.stories.ts",
+                    "file": "src/tooltip/tooltip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "AutoAlignTemplate.bind({})"
-                }
-            ],
-            "src/tooltip/tooltip.stories.ts": [
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\tdescription=\"Tooltip for ellipsis because I can and I am really really long\">\n\t\t\t<span class=\"overflowText\">\n\t\t\t\tTooltip for ellipsis because I can and I am really really long\n\t\t\t</span>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.overflowText {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twidth: 100px;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t`]\n})"
+                },
                 {
-                    "name": "AutoAlignTemplate",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/tooltip/tooltip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t[description]=\"description\">\n\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
-                    "name": "Basic",
+                    "name": "WithAutoAlign",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/tooltip/tooltip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
-                },
+                    "defaultValue": "AutoAlignTemplate.bind({})"
+                }
+            ],
+            "src/toggletip/toggletip.stories.ts": [
                 {
-                    "name": "Ellipses",
+                    "name": "AutoAlignTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/tooltip.stories.ts",
+                    "file": "src/toggletip/toggletip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "EllipsesTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t\t\t<cds-toggletip\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t\t\t<button cdsToggletipButton>\n\t\t\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div cdsToggletipContent>\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</cds-toggletip>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
-                    "name": "EllipsesTemplate",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/tooltip.stories.ts",
+                    "file": "src/toggletip/toggletip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\tdescription=\"Tooltip for ellipsis because I can and I am really really long\">\n\t\t\t<span class=\"overflowText\">\n\t\t\t\tTooltip for ellipsis because I can and I am really really long\n\t\t\t</span>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.overflowText {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twidth: 100px;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t`]\n})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
                     "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/tooltip.stories.ts",
+                    "file": "src/toggletip/toggletip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tooltip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[align]=\"align\"\n\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t[description]=\"description\">\n\t\t\t<button type=\"button\" class=\"tooltip-trigger\">\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t</cds-tooltip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<span cdsToggletipLabel>Toggletip label</span>\n\t\t<cds-toggletip\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t(onOpen)=\"onOpen($event)\">\n\t\t\t<button cdsToggletipButton>\n\t\t\t\t<svg preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 32 32\">\n\t\t\t\t\t<path d=\"M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z\"></path>\n\t\t\t\t</svg>\n\t\t\t</button>\n\t\t\t<div cdsToggletipContent>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed\n\t\t\t\t\tdo eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.\n\t\t\t\t</p>\n\t\t\t\t<div cdsToggletipAction>\n\t\t\t\t\t<a href=\"#\" cdsLink>Link action</a>\n\t\t\t\t\t<button cdsButton size=\"sm\">Some button</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-toggletip>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
                     "name": "WithAutoAlign",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tooltip/tooltip.stories.ts",
+                    "file": "src/toggletip/toggletip.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
@@ -82559,28 +82596,6 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-button\n\t\t\t[size]=\"size\"\n\t\t\t[menuAlignment]=\"menuAlignment\"\n\t\t\t[label]=\"label\"\n\t\t\t[description]=\"description\"\n\t\t\t[tooltipAutoAlign]=\"tooltipAutoAlign\"\n\t\t\t[tooltipPlacement]=\"tooltipPlacement\">\n\t\t\t<cds-menu-item label=\"First action with a long label description\"></cds-menu-item>\n\t\t\t<cds-menu-item label=\"Second action\" (click)=\"onClick($event)\"></cds-menu-item>\n\t\t\t<cds-menu-item label=\"Third action\" [disabled]=\"true\"></cds-menu-item>\n\t\t\t<cds-menu-divider></cds-menu-divider>\n\t\t\t<cds-menu-item label=\"Cut\" info=\"⌘X\"></cds-menu-item>\n\t\t\t<cds-menu-item label=\"Option with icon\" icon=\"calendar\"></cds-menu-item>\n\t\t\t<cds-menu-divider></cds-menu-divider>\n\t\t\t<cds-menu-item label=\"Danger action\" [danger]=\"true\"></cds-menu-item>\n\t\t</cds-combo-button>\n\t`\n})"
                 }
             ],
-            "src/content-switcher/content-switcher.stories.ts": [
-                {
-                    "name": "Basic",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/content-switcher/content-switcher.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "Template.bind({})"
-                },
-                {
-                    "name": "Template",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/content-switcher/content-switcher.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-content-switcher (selected)=\"selected($event)\">\n\t\t\t<button cdsContentOption name=\"First\">First section</button>\n\t\t\t<button cdsContentOption name=\"Second\">Second section</button>\n\t\t\t<button cdsContentOption name=\"Third\">Third section</button>\n\t\t</cds-content-switcher>\n\t`\n})"
-                }
-            ],
             "src/combobox/combobox.stories.ts": [
                 {
                     "name": "Basic",
@@ -82713,6 +82728,28 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
                 }
             ],
+            "src/content-switcher/content-switcher.stories.ts": [
+                {
+                    "name": "Basic",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/content-switcher/content-switcher.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/content-switcher/content-switcher.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-content-switcher (selected)=\"selected($event)\">\n\t\t\t<button cdsContentOption name=\"First\">First section</button>\n\t\t\t<button cdsContentOption name=\"Second\">Second section</button>\n\t\t\t<button cdsContentOption name=\"Third\">Third section</button>\n\t\t</cds-content-switcher>\n\t`\n})"
+                }
+            ],
             "src/context-menu/context-menu.stories.ts": [
                 {
                     "name": "Basic",
@@ -88203,7 +88240,7 @@
                 "linktype": "component",
                 "name": "MockQueryCombobox",
                 "coveragePercent": 0,
-                "coverageCount": "0/3",
+                "coverageCount": "0/5",
                 "status": "low"
             },
             {