carbon-components-angular 5.56.6 → 5.57.1

package/docs/documentation.json

@@ -880,6 +880,66 @@
             "methods": [],
             "extends": []
         },
+        {
+            "name": "ItemClickEvent",
+            "id": "interface-ItemClickEvent-c8501f265294441e5f0427089a0c8204448c2ab6dd441f4ac2e46f26e0848b478b2b79365a7bdb5c03729f2819199405917a6192d839956d9c841e2a47e8d1fe",
+            "file": "src/context-menu/context-menu.types.ts",
+            "deprecated": false,
+            "deprecationMessage": "",
+            "type": "interface",
+            "sourceCode": "export interface ItemClickEvent {\n\ttype: null | \"checkbox\" | \"radio\";\n\tlabel: string;\n\tinfo: string;\n\tvalue: string;\n\tevent: MouseEvent & KeyboardEvent;\n}\n",
+            "properties": [
+                {
+                    "name": "event",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 6
+                },
+                {
+                    "name": "info",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "optional": false,
+                    "description": "",
+                    "line": 4
+                },
+                {
+                    "name": "label",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "optional": false,
+                    "description": "",
+                    "line": 3
+                },
+                {
+                    "name": "type",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "null | \"checkbox\" | \"radio\"",
+                    "optional": false,
+                    "description": "",
+                    "line": 2
+                },
+                {
+                    "name": "value",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "optional": false,
+                    "description": "",
+                    "line": 5
+                }
+            ],
+            "indexSignatures": [],
+            "kind": 171,
+            "methods": [],
+            "extends": []
+        },
         {
             "name": "ListItem",
             "id": "interface-ListItem-043fe08147662c52d17dac8302eb87bf3ba4a5588b939c29ee862cf6e869f0d5de5011495bdd5cbfe9c10908c53b7368cba80937b1e840c02f1d278a09cc6579",
@@ -24622,6 +24682,568 @@
                 }
             }
         },
+        {
+            "name": "ComboButtonComponent",
+            "id": "component-ComboButtonComponent-a6d257c42463e5b1a3621fb09c5cf059d94e790f4dbe949c6c47fc4a0d8110f4cba34c7675e9c7a61cd7fa82c2cc86c121bc1fb8d8335d18a6472e1ab91cd0a7",
+            "file": "src/combo-button/combo-button.component.ts",
+            "changeDetection": "ChangeDetectionStrategy.OnPush",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "cds-combo-button",
+            "styleUrls": [],
+            "styles": [],
+            "template": "<div class=\"cds--combo-button__primary-action\" [attr.aria-owns]=\"open ? comboId : undefined\">\n\t<button\n\t\tcdsButton=\"primary\"\n\t\t[size]=\"size\"\n\t\t[attr.title]=\"label\"\n\t\t[disabled]=\"disabled\"\n\t\ttype=\"button\"\n\t\t(click)=\"onActionClick($event)\">\n\t\t{{label}}\n\t</button>\n</div>\n<cds-icon-button\n\t[buttonNgClass]=\"{ 'cds--combo-button__trigger': true }\"\n\t[buttonAttributes]=\"{\n\t\t'aria-haspopup': true,\n\t\t'aria-expanded': open,\n\t\t'aria-controls': open ? comboId : undefined\n\t}\"\n\t[size]=\"size\"\n\t[description]=\"description\"\n\t[disabled]=\"disabled\"\n\t[autoAlign]=\"tooltipAutoAlign\"\n\t[align]=\"tooltipPlacement\"\n\t(click)=\"toggleMenu()\">\n\t<svg\n\t\tcdsIcon=\"chevron--down\"\n\t\tsize=\"16\">\n\t</svg>\n</cds-icon-button>\n\n<ng-template #menuTemplate>\n\t<cds-menu\n\t\tmode=\"basic\"\n\t\t[size]=\"size\"\n\t\t[open]=\"open\"\n\t\t[attr.id]=\"comboId\">\n\t\t<ng-content select=\"cds-menu-item, cds-menu-divider\"></ng-content>\n\t</cds-menu>\n</ng-template>\n\t",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [
+                {
+                    "name": "comboId",
+                    "defaultValue": "`combo-button-${ComboButtonComponent.comboButtonCounter++}`",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 79,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "description",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 97,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "disabled",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 95,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "label",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 94,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "menuAlignment",
+                    "defaultValue": "\"bottom\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 96,
+                    "type": "ComboButtonPlacement",
+                    "decorators": []
+                },
+                {
+                    "name": "open",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 100,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "size",
+                    "defaultValue": "\"lg\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 93,
+                    "type": "\"sm\" | \"md\" | \"lg\"",
+                    "decorators": []
+                },
+                {
+                    "name": "tooltipAutoAlign",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 98,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "tooltipPlacement",
+                    "defaultValue": "\"bottom\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 99,
+                    "type": "string",
+                    "decorators": []
+                }
+            ],
+            "outputsClass": [
+                {
+                    "name": "actionClick",
+                    "defaultValue": "new EventEmitter<Event>()",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 101,
+                    "type": "EventEmitter"
+                }
+            ],
+            "propertiesClass": [
+                {
+                    "name": "comboButtonContainer",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 102,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'class.cds--combo-button__container'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                },
+                {
+                    "name": "comboButtonCounter",
+                    "defaultValue": "0",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "number",
+                    "optional": false,
+                    "description": "",
+                    "line": 78,
+                    "modifierKind": [
+                        126
+                    ]
+                },
+                {
+                    "name": "menuTemplate",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "TemplateRef<any>",
+                    "optional": false,
+                    "description": "",
+                    "line": 110,
+                    "decorators": [
+                        {
+                            "name": "ViewChild",
+                            "stringifiedArguments": "'menuTemplate'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                }
+            ],
+            "methodsClass": [
+                {
+                    "name": "cleanUp",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 188,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nClean up `autoUpdate` if auto alignment is enabled\n",
+                    "description": "<p>Clean up <code>autoUpdate</code> if auto alignment is enabled</p>\n"
+                },
+                {
+                    "name": "handleFocusOut",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 177,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nOn body click, close the menu\n",
+                    "description": "<p>On body click, close the menu</p>\n",
+                    "jsdoctags": [
+                        {
+                            "name": {
+                                "pos": 4675,
+                                "end": 4680,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "event"
+                            },
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "pos": 4669,
+                                "end": 4674,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "param"
+                            },
+                            "comment": ""
+                        }
+                    ]
+                },
+                {
+                    "name": "handleMenuItemClick",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "ItemClickEvent",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 164,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nAs of now, menu button does not support nexted menu, on button click it should close\n",
+                    "description": "<p>As of now, menu button does not support nexted menu, on button click it should close</p>\n",
+                    "jsdoctags": [
+                        {
+                            "name": "event",
+                            "type": "ItemClickEvent",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "name": "onActionClick",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "PointerEvent",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 206,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nOn action click, notify user\nIf the menu is open, close the menu\n",
+                    "description": "<p>On action click, notify user\nIf the menu is open, close the menu</p>\n",
+                    "jsdoctags": [
+                        {
+                            "name": {
+                                "pos": 5334,
+                                "end": 5339,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "event"
+                            },
+                            "type": "PointerEvent",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "pos": 5328,
+                                "end": 5333,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "param"
+                            },
+                            "comment": ""
+                        }
+                    ]
+                },
+                {
+                    "name": "recomputePosition",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 259,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nCompute position of menu\n",
+                    "description": "<p>Compute position of menu</p>\n"
+                },
+                {
+                    "name": "roundByDPR",
+                    "args": [
+                        {
+                            "name": "value",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "number",
+                    "typeParameters": [],
+                    "line": 249,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "name": "value",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "name": "toggleMenu",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 218,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nHandles emitting open/close event\n",
+                    "description": "<p>Handles emitting open/close event</p>\n"
+                }
+            ],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [
+                {
+                    "name": "attr.aria-owns",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 106,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--combo-button__container",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 102,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--combo-button__container--lg",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 103,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--combo-button__container--md",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 104,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--combo-button__container--sm",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 105,
+                    "type": "boolean",
+                    "decorators": []
+                }
+            ],
+            "hostListeners": [],
+            "standalone": false,
+            "imports": [],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tContentChildren,\n\tElementRef,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tNgZone,\n\tOnChanges,\n\tOnDestroy,\n\tOutput,\n\tQueryList,\n\tRenderer2,\n\tSimpleChanges,\n\tTemplateRef,\n\tViewChild,\n\tViewContainerRef\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip\n} from \"@floating-ui/dom\";\nimport { ContextMenuItemComponent, ItemClickEvent } from \"carbon-components-angular/context-menu\";\n\ntype ComboButtonPlacement = \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\";\n\n@Component({\n\tselector: \"cds-combo-button\",\n\ttemplate: `\n\t\t<div class=\"cds--combo-button__primary-action\" [attr.aria-owns]=\"open ? comboId : undefined\">\n\t\t\t<button\n\t\t\t\tcdsButton=\"primary\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[attr.title]=\"label\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t(click)=\"onActionClick($event)\">\n\t\t\t\t{{label}}\n\t\t\t</button>\n\t\t</div>\n\t\t<cds-icon-button\n\t\t\t[buttonNgClass]=\"{ 'cds--combo-button__trigger': true }\"\n\t\t\t[buttonAttributes]=\"{\n\t\t\t\t'aria-haspopup': true,\n\t\t\t\t'aria-expanded': open,\n\t\t\t\t'aria-controls': open ? comboId : undefined\n\t\t\t}\"\n\t\t\t[size]=\"size\"\n\t\t\t[description]=\"description\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[autoAlign]=\"tooltipAutoAlign\"\n\t\t\t[align]=\"tooltipPlacement\"\n\t\t\t(click)=\"toggleMenu()\">\n\t\t\t<svg\n\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</cds-icon-button>\n\n\t\t<ng-template #menuTemplate>\n\t\t\t<cds-menu\n\t\t\t\tmode=\"basic\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[open]=\"open\"\n\t\t\t\t[attr.id]=\"comboId\">\n\t\t\t\t<ng-content select=\"cds-menu-item, cds-menu-divider\"></ng-content>\n\t\t\t</cds-menu>\n\t\t</ng-template>\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComboButtonComponent implements OnChanges, AfterViewInit, OnDestroy {\n\tstatic comboButtonCounter = 0;\n\t@Input() comboId = `combo-button-${ComboButtonComponent.comboButtonCounter++}`;\n\n\t// Listen for click & determine if menu should close\n\t@ContentChildren(ContextMenuItemComponent) set projectedMenuItems(itemList: QueryList<ContextMenuItemComponent>) {\n\t\t// Reset in case user dynamically updates menu item\n\t\tthis.subscriptions.forEach((sub) => sub?.unsubscribe());\n\t\tthis.subscriptions = [];\n\t\titemList.forEach((item) => {\n\t\t\tthis.subscriptions.push(\n\t\t\t\titem.itemClick.subscribe((clickEvent) => this.handleMenuItemClick(clickEvent))\n\t\t\t);\n\t\t});\n\t}\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\t@Input() label: string;\n\t@Input() disabled = false;\n\t@Input() menuAlignment: ComboButtonPlacement = \"bottom\";\n\t@Input() description: string;\n\t@Input() tooltipAutoAlign = false;\n\t@Input() tooltipPlacement = \"bottom\";\n\t@Input() @HostBinding(\"class.cds--combo-button__container--open\") open = false;\n\t@Output() actionClick = new EventEmitter<Event>();\n\t@HostBinding(\"class.cds--combo-button__container\") comboButtonContainer = true;\n\t@HostBinding(\"class.cds--combo-button__container--lg\") get sizeLg() { return this.size === \"lg\"; }\n\t@HostBinding(\"class.cds--combo-button__container--md\") get sizeMd() { return this.size === \"md\"; }\n\t@HostBinding(\"class.cds--combo-button__container--sm\") get sizeSm() { return this.size === \"sm\"; }\n\t@HostBinding(\"attr.aria-owns\") get ariaOwns() {\n\t\treturn this.open ? this.comboId : undefined;\n\t}\n\n\t@ViewChild(\"menuTemplate\") menuTemplate: TemplateRef<any>;\n\n\tprotected documentClick = this.handleFocusOut.bind(this);\n\tprotected unmountFloatingElement: Function;\n\n\tprivate subscriptions: Subscription[] = [];\n\tprivate _alignment: ComboButtonPlacement = \"bottom\";\n\tprivate menuRef: HTMLElement;\n\n\tconstructor(\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected hostElement: ElementRef,\n\t\tprotected viewContainerRef: ViewContainerRef,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) { }\n\n\n\t/**\n\t * In case user updates alignment, store initial value.\n\t * This allows us to test user passed alignment on each open\n\t */\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes.menuAlignment) {\n\t\t\tthis._alignment = changes.menuAlignment.currentValue;\n\t\t}\n\t}\n\n\n\n\t/**\n\t * If user has passed in true for open, we dynamically open the menu\n\t */\n\tngAfterViewInit(): void {\n\t\tif (this.open) {\n\t\t\tthis.open = !this.open;\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t* Clean up Floating-ui & subscriptions\n\t*/\n\tngOnDestroy(): void {\n\t\tthis.cleanUp();\n\t\tthis.subscriptions.forEach((sub) => sub.unsubscribe());\n\t}\n\n\n\t/**\n\t * As of now, menu button does not support nexted menu, on button click it should close\n\t */\n\thandleMenuItemClick(event: ItemClickEvent) {\n\t\t// If event is not type radio/checkbox, we close the menu\n\t\tif (!event.type) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t * On body click, close the menu\n\t * @param event\n\t */\n\thandleFocusOut(event) {\n\t\tif (!this.hostElement.nativeElement.contains(event.target)) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t * Clean up `autoUpdate` if auto alignment is enabled\n\t */\n\tcleanUp() {\n\t\tdocument.removeEventListener(\"click\", this.documentClick);\n\t\tif (this.unmountFloatingElement) {\n\t\t\tthis.menuRef.remove();\n\t\t\tthis.viewContainerRef.clear();\n\t\t\tthis.unmountFloatingElement();\n\t\t}\n\t\tthis.unmountFloatingElement = undefined;\n\t\t// On all instances of menu closing, make sure icon direction is correct\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n\n\n\t/**\n\t * On action click, notify user\n\t * If the menu is open, close the menu\n\t * @param event\n\t */\n\tonActionClick(event: PointerEvent) {\n\t\tif (this.open) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t\tthis.actionClick.emit(event);\n\t}\n\n\n\n\t/**\n\t * Handles emitting open/close event\n\t */\n\ttoggleMenu() {\n\t\tthis.open = !this.open;\n\t\tif (this.open) {\n\t\t\t// Render the template & append to view\n\t\t\tconst view = this.viewContainerRef.createEmbeddedView(this.menuTemplate);\n\t\t\tthis.menuRef = document.body.appendChild(view.rootNodes[0] as HTMLElement);\n\t\t\t// Assign button width to the menu ref to align with button\n\t\t\tObject.assign(this.menuRef.style, {\n\t\t\t\twidth: `${this.hostElement.nativeElement.clientWidth}px`,\n\t\t\t\ttop: \"0\",\n\t\t\t\tleft: \"0\"\n\t\t\t});\n\n\t\t\t// Reset & test alignment every open\n\t\t\tthis.menuAlignment = this._alignment;\n\n\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\n\t\t\t// Listen for events such as scrolling to keep menu aligned\n\t\t\tthis.unmountFloatingElement = autoUpdate(\n\t\t\t\tthis.hostElement.nativeElement,\n\t\t\t\tthis.menuRef,\n\t\t\t\tthis.recomputePosition.bind(this)\n\t\t\t);\n\t\t} else {\n\t\t\tthis.cleanUp();\n\t\t}\n\t}\n\n\n\n\troundByDPR(value) {\n\t\tconst dpr = window.devicePixelRatio || 1;\n\t\treturn Math.round(value * dpr) / dpr;\n\t}\n\n\n\n\t/**\n\t * Compute position of menu\n\t */\n\trecomputePosition() {\n\t\tif (this.menuTemplate && this.hostElement) {\n\t\t\t// Run outside of angular zone to avoid unnecessary change detection and rely on floating-ui\n\t\t\tthis.ngZone.runOutsideAngular(async () => {\n\t\t\t\tconst { x, y, placement } = await computePosition(\n\t\t\t\t\tthis.hostElement.nativeElement,\n\t\t\t\t\tthis.menuRef,\n\t\t\t\t\t{\n\t\t\t\t\t\tplacement: this.menuAlignment,\n\t\t\t\t\t\tstrategy: \"fixed\",\n\t\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\t\tflip({ crossAxis: false })\n\t\t\t\t\t\t]\n\t\t\t\t\t});\n\n\t\t\t\tthis.menuAlignment = placement as ComboButtonPlacement;\n\n\t\t\t\t// Using CSSOM to manipulate CSS to avoid content security policy inline-src\n\t\t\t\t// https://github.com/w3c/webappsec-csp/issues/212\n\t\t\t\tObject.assign(this.menuRef.style, {\n\t\t\t\t\tposition: \"fixed\",\n\t\t\t\t\t// Using transform instead of top/left position to improve performance\n\t\t\t\t\ttransform: `translate(${this.roundByDPR(x)}px,${this.roundByDPR(y)}px)`\n\t\t\t\t});\n\t\t\t\tthis.changeDetectorRef.markForCheck();\n\t\t\t});\n\t\t}\n\t}\n}\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "",
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "args": [
+                    {
+                        "name": "ngZone",
+                        "type": "NgZone",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    },
+                    {
+                        "name": "renderer",
+                        "type": "Renderer2",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    },
+                    {
+                        "name": "hostElement",
+                        "type": "ElementRef",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    },
+                    {
+                        "name": "viewContainerRef",
+                        "type": "ViewContainerRef",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    },
+                    {
+                        "name": "changeDetectorRef",
+                        "type": "ChangeDetectorRef",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    }
+                ],
+                "line": 117,
+                "jsdoctags": [
+                    {
+                        "name": "ngZone",
+                        "type": "NgZone",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    },
+                    {
+                        "name": "renderer",
+                        "type": "Renderer2",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    },
+                    {
+                        "name": "hostElement",
+                        "type": "ElementRef",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    },
+                    {
+                        "name": "viewContainerRef",
+                        "type": "ViewContainerRef",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    },
+                    {
+                        "name": "changeDetectorRef",
+                        "type": "ChangeDetectorRef",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    }
+                ]
+            },
+            "extends": [],
+            "implements": [
+                "OnChanges",
+                "AfterViewInit",
+                "OnDestroy"
+            ],
+            "accessors": {
+                "projectedMenuItems": {
+                    "name": "projectedMenuItems",
+                    "setSignature": {
+                        "name": "projectedMenuItems",
+                        "type": "void",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "args": [
+                            {
+                                "name": "itemList",
+                                "type": "QueryList<ContextMenuItemComponent>",
+                                "deprecated": false,
+                                "deprecationMessage": ""
+                            }
+                        ],
+                        "returnType": "void",
+                        "line": 82,
+                        "jsdoctags": [
+                            {
+                                "name": "itemList",
+                                "type": "QueryList<ContextMenuItemComponent>",
+                                "deprecated": false,
+                                "deprecationMessage": "",
+                                "tagName": {
+                                    "text": "param"
+                                }
+                            }
+                        ]
+                    }
+                },
+                "sizeLg": {
+                    "name": "sizeLg",
+                    "getSignature": {
+                        "name": "sizeLg",
+                        "type": "",
+                        "returnType": "",
+                        "line": 103
+                    }
+                },
+                "sizeMd": {
+                    "name": "sizeMd",
+                    "getSignature": {
+                        "name": "sizeMd",
+                        "type": "",
+                        "returnType": "",
+                        "line": 104
+                    }
+                },
+                "sizeSm": {
+                    "name": "sizeSm",
+                    "getSignature": {
+                        "name": "sizeSm",
+                        "type": "",
+                        "returnType": "",
+                        "line": 105
+                    }
+                },
+                "ariaOwns": {
+                    "name": "ariaOwns",
+                    "getSignature": {
+                        "name": "ariaOwns",
+                        "type": "",
+                        "returnType": "",
+                        "line": 106
+                    }
+                }
+            }
+        },
         {
             "name": "ContainedList",
             "id": "component-ContainedList-1c5ffbaef841f69f00060fb737ec1c6de87711ca940bb0ee583f6f72a622bbd432d83b7a108c206bf6be21d76cbb9eba927f19cd6a805717037baf59af9656dd",
@@ -25209,14 +25831,14 @@
         },
         {
             "name": "ContextMenuComponent",
-            "id": "component-ContextMenuComponent-2b490ec4514e751fbe491f6843669f3a8aa02eb276edfb3ab9b2c6d865225ee14c5b27a9bf24ff1153ca372087f5fed9bfc4a85ca020c506d8ca5df9cc28ff07",
+            "id": "component-ContextMenuComponent-80caea86ac68d0a24f5699cd6c23c5d368bf1edaabd6b2b998eef689a8679010cdf24b0a077266d6cdef3e934f17406f2a72270ac955d5cf3a6441a887d8c6b6",
             "file": "src/context-menu/context-menu.component.ts",
             "encapsulation": [],
             "entryComponents": [],
             "inputs": [],
             "outputs": [],
             "providers": [],
-            "selector": "cds-context-menu, ibm-context-menu",
+            "selector": "cds-menu, cds-context-menu, ibm-context-menu",
             "styleUrls": [],
             "styles": [
                 "\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t"
@@ -25231,7 +25853,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 32,
+                    "line": 34,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -25240,30 +25862,60 @@
                     "defaultValue": "{\n\t\tleft: 0,\n\t\ttop: 0\n\t}",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 33,
+                    "line": 35,
                     "type": "{ left: number; top: number; }",
                     "decorators": []
+                },
+                {
+                    "name": "size",
+                    "defaultValue": "\"lg\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 39,
+                    "type": "\"sm\" | \"md\" | \"lg\"",
+                    "decorators": []
                 }
             ],
             "outputsClass": [],
             "propertiesClass": [
                 {
-                    "name": "contextMenu",
-                    "defaultValue": "true",
+                    "name": "iconClass",
+                    "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "optional": false,
-                    "description": "",
-                    "line": 38,
+                    "description": "<p>after switching to on OnPush Change Detection Strategy</p>\n",
+                    "line": 55,
+                    "rawdescription": "\n\nafter switching to on OnPush Change Detection Strategy\n",
                     "decorators": [
                         {
                             "name": "HostBinding",
-                            "stringifiedArguments": "'class.cds--menu'"
+                            "stringifiedArguments": "'class.cds--menu--with-icons'"
                         }
                     ],
                     "modifierKind": [
                         170
+                    ],
+                    "jsdoctags": [
+                        {
+                            "pos": 1168,
+                            "end": 1300,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "kind": 334,
+                            "tagName": {
+                                "pos": 1169,
+                                "end": 1173,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "todo"
+                            },
+                            "comment": "<ul>\n<li>convert to getter in v6, should resolve expression has changed\nafter switching to on OnPush Change Detection Strategy</li>\n</ul>\n"
+                        }
                     ]
                 },
                 {
@@ -25274,7 +25926,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 41,
+                    "line": 46,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -25293,7 +25945,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 42,
+                    "line": 47,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -25312,7 +25964,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 60,
+                    "line": 75,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -25329,7 +25981,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 70,
+                    "line": 85,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -25362,7 +26014,7 @@
                     "defaultValue": "\"menu\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 41,
+                    "line": 46,
                     "type": "string",
                     "decorators": []
                 },
@@ -25371,48 +26023,52 @@
                     "defaultValue": "\"-1\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 42,
+                    "line": 47,
                     "type": "string",
                     "decorators": []
                 },
                 {
-                    "name": "class.cds--menu",
-                    "defaultValue": "true",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 38,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "name": "class.cds--menu--open",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "line": 39,
-                    "type": "boolean",
-                    "decorators": []
-                },
-                {
-                    "name": "class.cds--menu--shown",
+                    "name": "class",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 40,
-                    "type": "boolean",
+                    "line": 41,
+                    "type": "string",
                     "decorators": []
                 },
                 {
                     "name": "class.cds--menu--with-icons",
+                    "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 46,
-                    "type": "HTMLElement",
+                    "jsdoctags": [
+                        {
+                            "pos": 1168,
+                            "end": 1300,
+                            "flags": 16842752,
+                            "modifierFlagsCache": 0,
+                            "transformFlags": 0,
+                            "kind": 334,
+                            "tagName": {
+                                "pos": 1169,
+                                "end": 1173,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "todo"
+                            },
+                            "comment": "<ul>\n<li>convert to getter in v6, should resolve expression has changed\nafter switching to on OnPush Change Detection Strategy</li>\n</ul>\n"
+                        }
+                    ],
+                    "line": 55,
+                    "type": "boolean",
                     "decorators": []
                 },
                 {
                     "name": "style.left.px",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 43,
+                    "line": 48,
                     "type": "number",
                     "decorators": []
                 },
@@ -25420,7 +26076,7 @@
                     "name": "style.top.px",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 44,
+                    "line": 49,
                     "type": "number",
                     "decorators": []
                 }
@@ -25441,7 +26097,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 70
+                    "line": 85
                 }
             ],
             "standalone": false,
@@ -25449,7 +26105,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ContextMenuModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-context-menu--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ContextMenuModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-context-menu--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tElementRef,\n\tHostListener,\n\tInput,\n\tSimpleChanges,\n\tOnChanges,\n\tHostBinding\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContextMenuModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-context-menu--basic)\n */\n@Component({\n\tselector: \"cds-context-menu, ibm-context-menu\",\n\ttemplate: `\n\t\t\t<ng-content></ng-content>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t`]\n})\nexport class ContextMenuComponent implements OnChanges {\n\t@Input() open = false;\n\t@Input() position = {\n\t\tleft: 0,\n\t\ttop: 0\n\t};\n\n\t@HostBinding(\"class.cds--menu\") contextMenu = true;\n\t@HostBinding(\"class.cds--menu--open\") get contextMenuOpen() { return this.open; }\n\t@HostBinding(\"class.cds--menu--shown\") get showMenu() { return this.open; }\n\t@HostBinding(\"attr.role\") role = \"menu\";\n\t@HostBinding(\"attr.tabindex\") tabindex = \"-1\";\n\t@HostBinding(\"style.left.px\") get leftPosition() { return this.position.left; }\n\t@HostBinding(\"style.top.px\") get topPosition() { return this.position.top; }\n\n\t@HostBinding(\"class.cds--menu--with-icons\") get classIcons() {\n\t\tconst svgElement = this.elementRef.nativeElement\n\t\t\t.querySelector(\".cds--menu-item .cds--menu-item__icon svg\") as HTMLElement;\n\t\treturn svgElement;\n\t}\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.open && changes.open.currentValue) {\n\t\t\tthis.focusMenu();\n\t\t}\n\t}\n\n\tfocusMenu() {\n\t\t// wait until the next tick to let the DOM settle before changing the focus\n\t\tsetTimeout(() => {\n\t\t\tconst list: HTMLElement = this.elementRef.nativeElement;\n\t\t\tconst firstOption = list.querySelector(\".cds--menu-item\") as HTMLElement;\n\t\t\tfirstOption.focus();\n\t\t});\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thandleNavigation(event: KeyboardEvent) {\n\t\tconst list: HTMLElement = this.elementRef.nativeElement;\n\t\tconst subMenus: HTMLElement[] = Array.from(list.querySelectorAll(\"cds-context-menu[role=menu]\"));\n\t\tconst menuItems: HTMLElement[] = (\n\t\t\tArray.from(list.querySelectorAll(\".cds--menu-item\")) as HTMLElement[])\n\t\t\t.filter(menuItem => !subMenus.some(subMenu => subMenu.contains(menuItem))\n\t\t);\n\t\tconst currentIndex = menuItems.findIndex(menuItem => parseInt(menuItem.getAttribute(\"tabindex\"), 10) === 0);\n\t\tconst currentMenuItem = menuItems[currentIndex];\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowDown\": {\n\t\t\t\tif (document.activeElement === list) {\n\t\t\t\t\tmenuItems[0].focus();\n\t\t\t\t} else {\n\t\t\t\t\tif (currentIndex !== -1 && currentIndex < menuItems.length - 1) {\n\t\t\t\t\t\tmenuItems[currentIndex + 1].focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowUp\": {\n\t\t\t\tif (document.activeElement === list) {\n\t\t\t\t\tmenuItems[menuItems.length - 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tif (currentIndex !== -1 && currentIndex > 0) {\n\t\t\t\t\t\tmenuItems[currentIndex - 1].focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowRight\": {\n\t\t\t\tif (currentIndex !== -1 && subMenus.some(subMenu => currentMenuItem.contains(subMenu))) {\n\t\t\t\t\tcurrentMenuItem.click();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowLeft\": {\n\t\t\t\tconst parent = currentMenuItem.parentElement.closest(\".cds--menu-item, .cds--menu-item\") as HTMLElement;\n\t\t\t\tif (parent) {\n\t\t\t\t\tparent.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tElementRef,\n\tHostListener,\n\tInput,\n\tSimpleChanges,\n\tOnChanges,\n\tHostBinding,\n\tAfterViewInit,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ContextMenuModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-context-menu--basic)\n */\n@Component({\n\tselector: \"cds-menu, cds-context-menu, ibm-context-menu\",\n\ttemplate: `\n\t\t\t<ng-content></ng-content>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t`]\n})\nexport class ContextMenuComponent implements OnChanges, AfterViewInit {\n\t@Input() open = false;\n\t@Input() position = {\n\t\tleft: 0,\n\t\ttop: 0\n\t};\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t@HostBinding(\"class\") get hostClass() {\n\t\tconst open = this.open ? \"cds--menu--open cds--menu--shown\" : \"\";\n\t\treturn `cds--menu cds--autoalign cds--menu--${this.size} ${open}`;\n\t}\n\n\t@HostBinding(\"attr.role\") role = \"menu\";\n\t@HostBinding(\"attr.tabindex\") tabindex = \"-1\";\n\t@HostBinding(\"style.left.px\") get leftPosition() { return this.position.left; }\n\t@HostBinding(\"style.top.px\") get topPosition() { return this.position.top; }\n\n\t/**\n\t * @todo - convert to getter in v6, should resolve expression has changed\n\t * after switching to on OnPush Change Detection Strategy\n\t */\n\t@HostBinding(\"class.cds--menu--with-icons\") iconClass = false;\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.open && changes.open.currentValue) {\n\t\t\tthis.focusMenu();\n\t\t}\n\t}\n\n\tngAfterViewInit(): void {\n\t\tsetTimeout(() => {\n\t\t\tconst nativeElement = this.elementRef.nativeElement;\n\t\t\tif (nativeElement) {\n\t\t\t\tthis.iconClass = !!nativeElement\n\t\t\t\t\t.querySelector(\".cds--menu-item .cds--menu-item__icon svg\");\n\t\t\t}\n\t\t});\n\t}\n\n\tfocusMenu() {\n\t\t// wait until the next tick to let the DOM settle before changing the focus\n\t\tsetTimeout(() => {\n\t\t\tconst list: HTMLElement = this.elementRef.nativeElement;\n\t\t\tconst firstOption = list.querySelector(\".cds--menu-item\") as HTMLElement;\n\t\t\tfirstOption.focus();\n\t\t});\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\thandleNavigation(event: KeyboardEvent) {\n\t\tconst list: HTMLElement = this.elementRef.nativeElement;\n\t\tconst subMenus: HTMLElement[] = Array.from(list.querySelectorAll(\"cds-context-menu[role=menu]\"));\n\t\tconst menuItems: HTMLElement[] = (\n\t\t\tArray.from(list.querySelectorAll(\".cds--menu-item\")) as HTMLElement[])\n\t\t\t\t.filter(menuItem => !subMenus.some(subMenu => subMenu.contains(menuItem))\n\t\t);\n\t\tconst currentIndex = menuItems.findIndex(menuItem => parseInt(menuItem.getAttribute(\"tabindex\"), 10) === 0);\n\t\tconst currentMenuItem = menuItems[currentIndex];\n\n\t\tswitch (event.key) {\n\t\t\tcase \"ArrowDown\": {\n\t\t\t\tif (document.activeElement === list) {\n\t\t\t\t\tmenuItems[0].focus();\n\t\t\t\t} else {\n\t\t\t\t\tif (currentIndex !== -1 && currentIndex < menuItems.length - 1) {\n\t\t\t\t\t\tmenuItems[currentIndex + 1].focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowUp\": {\n\t\t\t\tif (document.activeElement === list) {\n\t\t\t\t\tmenuItems[menuItems.length - 1].focus();\n\t\t\t\t} else {\n\t\t\t\t\tif (currentIndex !== -1 && currentIndex > 0) {\n\t\t\t\t\t\tmenuItems[currentIndex - 1].focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowRight\": {\n\t\t\t\tif (currentIndex !== -1 && subMenus.some(subMenu => currentMenuItem.contains(subMenu))) {\n\t\t\t\t\tcurrentMenuItem.click();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"ArrowLeft\": {\n\t\t\t\tconst parent = currentMenuItem.parentElement.closest(\".cds--menu-item, .cds--menu-item\") as HTMLElement;\n\t\t\t\tif (parent) {\n\t\t\t\t\tparent.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\t\n",
@@ -25466,7 +26122,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 50,
+                "line": 55,
                 "jsdoctags": [
                     {
                         "name": "elementRef",
@@ -25481,25 +26137,17 @@
             },
             "extends": [],
             "implements": [
-                "OnChanges"
+                "OnChanges",
+                "AfterViewInit"
             ],
             "accessors": {
-                "contextMenuOpen": {
-                    "name": "contextMenuOpen",
-                    "getSignature": {
-                        "name": "contextMenuOpen",
-                        "type": "",
-                        "returnType": "",
-                        "line": 39
-                    }
-                },
-                "showMenu": {
-                    "name": "showMenu",
+                "hostClass": {
+                    "name": "hostClass",
                     "getSignature": {
-                        "name": "showMenu",
+                        "name": "hostClass",
                         "type": "",
                         "returnType": "",
-                        "line": 40
+                        "line": 41
                     }
                 },
                 "leftPosition": {
@@ -25508,7 +26156,7 @@
                         "name": "leftPosition",
                         "type": "",
                         "returnType": "",
-                        "line": 43
+                        "line": 48
                     }
                 },
                 "topPosition": {
@@ -25517,30 +26165,21 @@
                         "name": "topPosition",
                         "type": "",
                         "returnType": "",
-                        "line": 44
-                    }
-                },
-                "classIcons": {
-                    "name": "classIcons",
-                    "getSignature": {
-                        "name": "classIcons",
-                        "type": "",
-                        "returnType": "",
-                        "line": 46
+                        "line": 49
                     }
                 }
             }
         },
         {
             "name": "ContextMenuDividerComponent",
-            "id": "component-ContextMenuDividerComponent-1d90d7ad72f29d6a1b78ca3ec453ea610fa26ff7f7774e455c83f875af8e212b8c975dddf0621581e053c9b55479293437ad5306e82c7a3893e2c77ad1ad56f8",
+            "id": "component-ContextMenuDividerComponent-8606e1fda9f4aceddf8cec5a54922ff81aa06daee6e7503f4e85e8ea131b6542c95eb997365fd4ef2e0ed1faeab986035893e5c11e4b2ec5eb1f9ba9306ded85",
             "file": "src/context-menu/context-menu-divider.component.ts",
             "encapsulation": [],
             "entryComponents": [],
             "inputs": [],
             "outputs": [],
             "providers": [],
-            "selector": "cds-context-menu-divider, ibm-context-menu-divider",
+            "selector": "cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider",
             "styleUrls": [],
             "styles": [],
             "template": "",
@@ -25618,7 +26257,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, HostBinding } from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-context-menu-divider, ibm-context-menu-divider\",\n\ttemplate: \"\"\n})\nexport class ContextMenuDividerComponent {\n\t@HostBinding(\"class.cds--menu-item-divider\") dividerClass = true;\n\t@HostBinding(\"attr.role\") role = \"separator\";\n}\n",
+            "sourceCode": "import { Component, HostBinding } from \"@angular/core\";\n\n@Component({\n\tselector: \"cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider\",\n\ttemplate: \"\"\n})\nexport class ContextMenuDividerComponent {\n\t@HostBinding(\"class.cds--menu-item-divider\") dividerClass = true;\n\t@HostBinding(\"attr.role\") role = \"separator\";\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -25626,7 +26265,7 @@
         },
         {
             "name": "ContextMenuGroupComponent",
-            "id": "component-ContextMenuGroupComponent-300a21fa5f9e6fc98d5adc121ba2f924972260ce054c9898ce073f2a0bc043237565f970a30094ba34fd5b9709444bc208556f2ff3ed218c62466a3ec49c4061",
+            "id": "component-ContextMenuGroupComponent-c530a677a99ceb9ddb6af2bc31cc1f8d289a1abadc9f297eb69c8a2623074fb62d3a613a3ec3ccc829a70ceedc219b34185e36a7722b9700585b1b702cd8851f",
             "file": "src/context-menu/context-menu-group.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -25638,7 +26277,7 @@
                     "type": "injectable"
                 }
             ],
-            "selector": "cds-context-menu-group, ibm-context-menu-group",
+            "selector": "cds-menu-group, cds-context-menu-group, ibm-context-menu-group",
             "styleUrls": [],
             "styles": [],
             "template": "<ng-content></ng-content>\n\t",
@@ -25741,7 +26380,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOnChanges,\n\tOnDestroy,\n\tOnInit,\n\tOutput,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\n\n@Component({\n\tselector: \"cds-context-menu-group, ibm-context-menu-group\",\n\ttemplate: `\n\t\t<ng-content></ng-content>\n\t`,\n\tproviders: [ContextMenuSelectionService]\n})\nexport class ContextMenuGroupComponent implements OnInit, OnChanges, OnDestroy {\n\t@HostBinding(\"attr.role\") role = \"group\";\n\t@HostBinding(\"class.cds--menu-item-radio-group\") get radioGroup() {  return this.type === \"radio\"; }\n\t@HostBinding(\"class.cds--menu-item-group\") get group() { return this.type === \"checkbox\"; }\n\n\t@HostBinding(\"attr.aria-label\") @Input() label = null;\n\t@Input() value: any[] = [];\n\t@Input() type: null | \"radio\" | \"checkbox\" = null;\n\t@Output() valueChange = new EventEmitter<any[]>();\n\n\tprivate subscription = new Subscription();\n\n\tconstructor(protected contextMenuSelectionService: ContextMenuSelectionService) { }\n\n\tngOnInit() {\n\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\tconst subscription = selectionObservable.subscribe(value => {\n\t\t\tthis.valueChange.emit(value);\n\t\t});\n\t\tthis.subscription.add(subscription);\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.value) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(changes.value.currentValue);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckboxes(changes.value.currentValue);\n\t\t\t}\n\t\t}\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscription.unsubscribe();\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOnChanges,\n\tOnDestroy,\n\tOnInit,\n\tOutput,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\n\n@Component({\n\tselector: \"cds-menu-group, cds-context-menu-group, ibm-context-menu-group\",\n\ttemplate: `\n\t\t<ng-content></ng-content>\n\t`,\n\tproviders: [ContextMenuSelectionService]\n})\nexport class ContextMenuGroupComponent implements OnInit, OnChanges, OnDestroy {\n\t@HostBinding(\"attr.role\") role = \"group\";\n\t@HostBinding(\"class.cds--menu-item-radio-group\") get radioGroup() {  return this.type === \"radio\"; }\n\t@HostBinding(\"class.cds--menu-item-group\") get group() { return this.type === \"checkbox\"; }\n\n\t@HostBinding(\"attr.aria-label\") @Input() label = null;\n\t@Input() value: any[] = [];\n\t@Input() type: null | \"radio\" | \"checkbox\" = null;\n\t@Output() valueChange = new EventEmitter<any[]>();\n\n\tprivate subscription = new Subscription();\n\n\tconstructor(protected contextMenuSelectionService: ContextMenuSelectionService) {}\n\n\tngOnInit() {\n\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\tconst subscription = selectionObservable.subscribe(value => {\n\t\t\tthis.valueChange.emit(value);\n\t\t});\n\t\tthis.subscription.add(subscription);\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (changes.value) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(changes.value.currentValue);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckboxes(changes.value.currentValue);\n\t\t\t}\n\t\t}\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscription.unsubscribe();\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -25800,14 +26439,14 @@
         },
         {
             "name": "ContextMenuItemComponent",
-            "id": "component-ContextMenuItemComponent-e95922e0ad631cc607990dc566eef52dec5d6e1a0e6382b3e04a15ff7d550b0ff3c26b92d75bc0b3e6f8af23c444581b32b775215f85c4e440e969d2e0cc3f45",
+            "id": "component-ContextMenuItemComponent-1688169278415531c2622c3ec58218219e214e8fb013ca1c0dff71e41f4a9c9b2ac3eb56e83d8e977ba86c5b9c92f02a5545ad346b86886e070dcfa21fa94668",
             "file": "src/context-menu/context-menu-item.component.ts",
             "encapsulation": [],
             "entryComponents": [],
             "inputs": [],
             "outputs": [],
             "providers": [],
-            "selector": "cds-context-menu-item, ibm-context-menu-item",
+            "selector": "cds-menu-item, cds-context-menu-item, ibm-context-menu-item",
             "styleUrls": [],
             "styles": [
                 "\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t"
@@ -25822,6 +26461,24 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
+                    "line": 58,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "danger",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 54,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "disabled",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
                     "line": 53,
                     "type": "boolean",
                     "decorators": []
@@ -25831,7 +26488,7 @@
                     "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 54,
+                    "line": 59,
                     "type": "string",
                     "decorators": []
                 },
@@ -25840,7 +26497,7 @@
                     "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 51,
+                    "line": 56,
                     "type": "string",
                     "decorators": []
                 },
@@ -25849,7 +26506,7 @@
                     "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 50,
+                    "line": 55,
                     "type": "string",
                     "decorators": []
                 },
@@ -25858,7 +26515,7 @@
                     "defaultValue": "null",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 52,
+                    "line": 57,
                     "type": "null | \"checkbox\" | \"radio\"",
                     "decorators": []
                 },
@@ -25867,7 +26524,7 @@
                     "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 55,
+                    "line": 60,
                     "type": "string",
                     "decorators": []
                 }
@@ -25878,7 +26535,15 @@
                     "defaultValue": "new EventEmitter<boolean>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 56,
+                    "line": 61,
+                    "type": "EventEmitter"
+                },
+                {
+                    "name": "itemClick",
+                    "defaultValue": "new EventEmitter<ItemClickEvent>()",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 62,
                     "type": "EventEmitter"
                 }
             ],
@@ -25891,7 +26556,7 @@
                     "type": "null",
                     "optional": false,
                     "description": "",
-                    "line": 44,
+                    "line": 45,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -25910,7 +26575,7 @@
                     "type": "null",
                     "optional": false,
                     "description": "",
-                    "line": 43,
+                    "line": 44,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -25928,7 +26593,7 @@
                     "type": "ContextMenuComponent",
                     "optional": false,
                     "description": "",
-                    "line": 61,
+                    "line": 67,
                     "decorators": [
                         {
                             "name": "ContentChild",
@@ -25947,7 +26612,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 58
+                    "line": 64
                 },
                 {
                     "name": "optionClass",
@@ -25957,7 +26622,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 40,
+                    "line": 41,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -25976,7 +26641,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "",
-                    "line": 41,
+                    "line": 42,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -25995,7 +26660,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 59
+                    "line": 65
                 },
                 {
                     "name": "tabindex",
@@ -26005,7 +26670,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 42,
+                    "line": 43,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -26024,7 +26689,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 150,
+                    "line": 166,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -26034,7 +26699,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 180,
+                    "line": 196,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -26044,7 +26709,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 176,
+                    "line": 192,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -26070,7 +26735,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 112,
+                    "line": 118,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -26110,7 +26775,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 168,
+                    "line": 184,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -26129,7 +26794,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 163,
+                    "line": 179,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -26148,7 +26813,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 158,
+                    "line": 174,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -26174,7 +26839,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 134,
+                    "line": 150,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -26195,7 +26860,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 139,
+                    "line": 155,
                     "deprecated": false,
                     "deprecationMessage": ""
                 }
@@ -26207,7 +26872,15 @@
                     "name": "attr.aria-checked",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 45,
+                    "line": 46,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "attr.aria-disabled",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 50,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -26216,7 +26889,7 @@
                     "defaultValue": "null",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 44,
+                    "line": 45,
                     "type": "any",
                     "decorators": []
                 },
@@ -26225,7 +26898,7 @@
                     "defaultValue": "null",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 43,
+                    "line": 44,
                     "type": "any",
                     "decorators": []
                 },
@@ -26234,7 +26907,7 @@
                     "defaultValue": "\"menuitem\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 41,
+                    "line": 42,
                     "type": "string",
                     "decorators": []
                 },
@@ -26243,7 +26916,7 @@
                     "defaultValue": "-1",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 42,
+                    "line": 43,
                     "type": "number",
                     "decorators": []
                 },
@@ -26252,7 +26925,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 40,
+                    "line": 41,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -26264,7 +26937,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 176
+                    "line": 192
                 },
                 {
                     "name": "click",
@@ -26281,7 +26954,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 112
+                    "line": 118
                 },
                 {
                     "name": "focus",
@@ -26289,7 +26962,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 168
+                    "line": 184
                 },
                 {
                     "name": "keydown.enter",
@@ -26306,7 +26979,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 112
+                    "line": 118
                 },
                 {
                     "name": "keydown.space",
@@ -26323,7 +26996,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 112
+                    "line": 118
                 },
                 {
                     "name": "mouseout",
@@ -26331,7 +27004,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 163
+                    "line": 179
                 },
                 {
                     "name": "mouseover",
@@ -26339,7 +27012,7 @@
                     "argsDecorator": [],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 158
+                    "line": 174
                 }
             ],
             "standalone": false,
@@ -26347,7 +27020,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tHostListener,\n\tContentChild,\n\tOptional,\n\tOnInit,\n\tAfterContentInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\nimport { ContextMenuComponent } from \"./context-menu.component\";\n\n@Component({\n\tselector: \"cds-context-menu-item, ibm-context-menu-item\",\n\ttemplate: `\n\t\t<div class=\"cds--menu-item__icon\">\n\t\t\t<svg *ngIf=\"selectable && checked\" cdsIcon=\"checkmark\" size=\"16\"></svg>\n\t\t\t<svg *ngIf=\"!selectable && icon\" [cdsIcon]=\"icon\" size=\"16\"></svg>\n\t\t</div>\n\t\t<div class=\"cds--menu-item__label\" [title]=\"label\">{{label}}</div>\n\t\t<div class=\"cds--menu-item__shortcut\">\n\t\t\t<ng-container *ngIf=\"info\">{{info}}</ng-container>\n\t\t\t<svg *ngIf=\"hasChildren\" cdsIcon=\"caret--right\" size=\"16\"></svg>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t`]\n})\nexport class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDestroy {\n\t@HostBinding(\"class.cds--menu-item\") optionClass = true;\n\t@HostBinding(\"attr.role\") role = \"menuitem\";\n\t@HostBinding(\"attr.tabindex\") tabindex = -1;\n\t@HostBinding(\"attr.aria-haspopup\") ariaHasPopup = null;\n\t@HostBinding(\"attr.aria-expanded\") ariaExpanded = null;\n\t@HostBinding(\"attr.aria-checked\") get ariaChecked() {\n\t\treturn this.type === \"checkbox\" ?\n\t\t\t(this.checked ? true : false) : null;\n\t}\n\n\t@Input() label = \"\";\n\t@Input() info = \"\";\n\t@Input() type: null | \"checkbox\" | \"radio\" = null;\n\t@Input() checked = false;\n\t@Input() icon = \"\";\n\t@Input() value = \"\";\n\t@Output() checkedChange = new EventEmitter<boolean>();\n\n\thasChildren = false;\n\tselectable = false;\n\n\t@ContentChild(ContextMenuComponent, { static: true }) childContextMenu: ContextMenuComponent;\n\tprivate subscriptions = new Subscription();\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\t@Optional() protected contextMenuSelectionService: ContextMenuSelectionService\n\t) { }\n\n\tngOnInit() {\n\t\tswitch (this.type) {\n\t\t\tcase \"checkbox\": {\n\t\t\t\tthis.role = \"menuitemcheckbox\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"radio\": {\n\t\t\t\tthis.role = \"menuitemradio\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tthis.role = \"menuitem\";\n\t\t\t}\n\t\t}\n\n\t\tif (this.type && this.contextMenuSelectionService && this.value) {\n\t\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\t\tconst subscription = selectionObservable.subscribe((value) => {\n\t\t\t\tif (this.type === \"radio\") {\n\t\t\t\t\tthis.handleSelection(value === this.value);\n\t\t\t\t}\n\n\t\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\t\tthis.handleSelection(value.includes(this.value));\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.subscriptions.add(subscription);\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.hasChildren = true;\n\t\t\tthis.ariaHasPopup = true;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"keydown.enter\", [\"$event\"])\n\t@HostListener(\"keydown.space\", [\"$event\"])\n\t@HostListener(\"click\", [\"$event\"])\n\thandleClick(event: MouseEvent & KeyboardEvent) {\n\t\tevent.stopPropagation();\n\t\tif (this.hasChildren) {\n\t\t\tthis.openSubMenu();\n\t\t\tthis.childContextMenu.focusMenu();\n\t\t}\n\n\t\tif (this.type) {\n\t\t\tthis.handleSelection(!this.checked);\n\t\t}\n\n\t\tif (this.contextMenuSelectionService) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(this.value);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckbox(this.value);\n\t\t\t}\n\t\t}\n\t}\n\n\thandleSelection(selected: boolean) {\n\t\tthis.checked = selected;\n\t\tthis.checkedChange.emit(this.checked);\n\t}\n\n\topenSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = true;\n\t\t\tthis.ariaExpanded = true;\n\t\t\tconst dimensions = this.elementRef.nativeElement.getBoundingClientRect();\n\t\t\tthis.childContextMenu.position.left = dimensions.left + dimensions.width;\n\t\t\t// subtract 4px to account for margins\n\t\t\tthis.childContextMenu.position.top = dimensions.top - 4;\n\t\t}\n\t}\n\n\tcloseSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = false;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"mouseover\")\n\thandleMouseOver() {\n\t\tthis.openSubMenu();\n\t}\n\n\t@HostListener(\"mouseout\")\n\thandleMouseOut() {\n\t\tthis.closeSubMenu();\n\t}\n\n\t@HostListener(\"focus\")\n\thandleFocus() {\n\t\tthis.tabindex = 0;\n\t\tif (this.hasChildren && this.ariaExpanded) {\n\t\t\tthis.closeSubMenu();\n\t\t}\n\t}\n\n\t@HostListener(\"blur\")\n\thandleBlur() {\n\t\tthis.tabindex = -1;\n\t}\n\n\tfocusItem() {\n\t\tthis.elementRef.nativeElement.focus();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tHostListener,\n\tContentChild,\n\tOptional,\n\tOnInit,\n\tAfterContentInit,\n\tOnDestroy\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport { ContextMenuSelectionService } from \"./context-menu-selection.service\";\nimport { ContextMenuComponent } from \"./context-menu.component\";\nimport { ItemClickEvent } from \"./context-menu.types\";\n\n@Component({\n\tselector: \"cds-menu-item, cds-context-menu-item, ibm-context-menu-item\",\n\ttemplate: `\n\t\t<div class=\"cds--menu-item__icon\">\n\t\t\t<svg *ngIf=\"selectable && checked\" cdsIcon=\"checkmark\" size=\"16\"></svg>\n\t\t\t<svg *ngIf=\"!selectable && icon\" [cdsIcon]=\"icon\" size=\"16\"></svg>\n\t\t</div>\n\t\t<div class=\"cds--menu-item__label\" [title]=\"label\">{{label}}</div>\n\t\t<div class=\"cds--menu-item__shortcut\">\n\t\t\t<ng-container *ngIf=\"info\">{{info}}</ng-container>\n\t\t\t<svg *ngIf=\"hasChildren\" cdsIcon=\"caret--right\" size=\"16\"></svg>\n\t\t</div>\n\t\t<ng-content></ng-content>\n\t`,\n\tstyles: [`\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t`]\n})\nexport class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDestroy {\n\t@HostBinding(\"class.cds--menu-item\") optionClass = true;\n\t@HostBinding(\"attr.role\") role = \"menuitem\";\n\t@HostBinding(\"attr.tabindex\") tabindex = -1;\n\t@HostBinding(\"attr.aria-haspopup\") ariaHasPopup = null;\n\t@HostBinding(\"attr.aria-expanded\") ariaExpanded = null;\n\t@HostBinding(\"attr.aria-checked\") get ariaChecked() {\n\t\treturn this.type === \"checkbox\" ?\n\t\t\t(this.checked ? true : false) : null;\n\t}\n\t@HostBinding(\"attr.aria-disabled\") get ariaDisabled() {\n\t\treturn this.disabled;\n\t}\n\t@Input() @HostBinding(\"class.cds--menu-item--disabled\") disabled = false;\n\t@Input() @HostBinding(\"class.cds--menu-item--danger\") danger = false;\n\t@Input() label = \"\";\n\t@Input() info = \"\";\n\t@Input() type: null | \"checkbox\" | \"radio\" = null;\n\t@Input() checked = false;\n\t@Input() icon = \"\";\n\t@Input() value = \"\";\n\t@Output() checkedChange = new EventEmitter<boolean>();\n\t@Output() itemClick = new EventEmitter<ItemClickEvent>();\n\n\thasChildren = false;\n\tselectable = false;\n\n\t@ContentChild(ContextMenuComponent, { static: true }) childContextMenu: ContextMenuComponent;\n\tprivate subscriptions = new Subscription();\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\t@Optional() protected contextMenuSelectionService: ContextMenuSelectionService\n\t) {}\n\n\tngOnInit() {\n\t\tswitch (this.type) {\n\t\t\tcase \"checkbox\": {\n\t\t\t\tthis.role = \"menuitemcheckbox\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase \"radio\": {\n\t\t\t\tthis.role = \"menuitemradio\";\n\t\t\t\tthis.selectable = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault: {\n\t\t\t\tthis.role = \"menuitem\";\n\t\t\t}\n\t\t}\n\n\t\tif (this.type && this.contextMenuSelectionService && this.value) {\n\t\t\tconst { selectionObservable } = this.contextMenuSelectionService;\n\t\t\tconst subscription = selectionObservable.subscribe((value) => {\n\t\t\t\tif (this.type === \"radio\") {\n\t\t\t\t\tthis.handleSelection(value === this.value);\n\t\t\t\t}\n\n\t\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\t\tthis.handleSelection(value.includes(this.value));\n\t\t\t\t}\n\t\t\t});\n\t\t\tthis.subscriptions.add(subscription);\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.hasChildren = true;\n\t\t\tthis.ariaHasPopup = true;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"keydown.enter\", [\"$event\"])\n\t@HostListener(\"keydown.space\", [\"$event\"])\n\t@HostListener(\"click\", [\"$event\"])\n\thandleClick(event: MouseEvent & KeyboardEvent) {\n\t\tevent.stopPropagation();\n\t\tif (this.hasChildren) {\n\t\t\tthis.openSubMenu();\n\t\t\tthis.childContextMenu.focusMenu();\n\t\t}\n\n\t\tif (this.type) {\n\t\t\tthis.handleSelection(!this.checked);\n\t\t}\n\n\t\tif (this.contextMenuSelectionService) {\n\t\t\tif (this.type === \"radio\") {\n\t\t\t\tthis.contextMenuSelectionService.selectRadio(this.value);\n\t\t\t}\n\n\t\t\tif (this.type === \"checkbox\") {\n\t\t\t\tthis.contextMenuSelectionService.selectCheckbox(this.value);\n\t\t\t}\n\t\t}\n\n\t\tif (!this.disabled) {\n\t\t\tthis.itemClick.emit({\n\t\t\t\tevent,\n\t\t\t\tlabel: this.label,\n\t\t\t\tinfo: this.info,\n\t\t\t\tvalue: this.value,\n\t\t\t\ttype: this.type\n\t\t\t});\n\t\t}\n\t}\n\n\thandleSelection(selected: boolean) {\n\t\tthis.checked = selected;\n\t\tthis.checkedChange.emit(this.checked);\n\t}\n\n\topenSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = true;\n\t\t\tthis.ariaExpanded = true;\n\t\t\tconst dimensions = this.elementRef.nativeElement.getBoundingClientRect();\n\t\t\tthis.childContextMenu.position.left = dimensions.left + dimensions.width;\n\t\t\t// subtract 4px to account for margins\n\t\t\tthis.childContextMenu.position.top = dimensions.top - 4;\n\t\t}\n\t}\n\n\tcloseSubMenu() {\n\t\tif (this.childContextMenu) {\n\t\t\tthis.childContextMenu.open = false;\n\t\t\tthis.ariaExpanded = false;\n\t\t}\n\t}\n\n\t@HostListener(\"mouseover\")\n\thandleMouseOver() {\n\t\tthis.openSubMenu();\n\t}\n\n\t@HostListener(\"mouseout\")\n\thandleMouseOut() {\n\t\tthis.closeSubMenu();\n\t}\n\n\t@HostListener(\"focus\")\n\thandleFocus() {\n\t\tthis.tabindex = 0;\n\t\tif (this.hasChildren && this.ariaExpanded) {\n\t\t\tthis.closeSubMenu();\n\t\t}\n\t}\n\n\t@HostListener(\"blur\")\n\thandleBlur() {\n\t\tthis.tabindex = -1;\n\t}\n\n\tfocusItem() {\n\t\tthis.elementRef.nativeElement.focus();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.subscriptions.unsubscribe();\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "\n\t\t:host {\n\t\t\tgrid-template-columns: 1rem 1fr max-content;\n\t\t}\n\t\n",
@@ -26370,7 +27043,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 62,
+                "line": 68,
                 "jsdoctags": [
                     {
                         "name": "elementRef",
@@ -26405,7 +27078,16 @@
                         "name": "ariaChecked",
                         "type": "",
                         "returnType": "",
-                        "line": 45
+                        "line": 46
+                    }
+                },
+                "ariaDisabled": {
+                    "name": "ariaDisabled",
+                    "getSignature": {
+                        "name": "ariaDisabled",
+                        "type": "",
+                        "returnType": "",
+                        "line": 50
                     }
                 }
             }
@@ -36699,59 +37381,489 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nset to `false` to stop the loading animation\n",
-                    "description": "<p>set to <code>false</code> to stop the loading animation</p>\n",
-                    "line": 40,
-                    "type": "boolean",
-                    "decorators": []
+                    "rawdescription": "\n\nset to `false` to stop the loading animation\n",
+                    "description": "<p>set to <code>false</code> to stop the loading animation</p>\n",
+                    "line": 40,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "overlay",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSet to `true` to make loader with an overlay.\n",
+                    "description": "<p>Set to <code>true</code> to make loader with an overlay.</p>\n",
+                    "line": 50,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "size",
+                    "defaultValue": "\"normal\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nSpecify the size of the button\n",
+                    "description": "<p>Specify the size of the button</p>\n",
+                    "line": 45,
+                    "type": "\"normal\" | \"sm\"",
+                    "decorators": []
+                },
+                {
+                    "name": "title",
+                    "defaultValue": "this.i18n.get().LOADING.TITLE",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nAccessible title for the loading circle.\nDefaults to the `LOADING.TITLE` value from the i18n service.\n",
+                    "description": "<p>Accessible title for the loading circle.\nDefaults to the <code>LOADING.TITLE</code> value from the i18n service.</p>\n",
+                    "line": 35,
+                    "type": "any",
+                    "decorators": []
+                }
+            ],
+            "outputsClass": [],
+            "propertiesClass": [],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": false,
+            "imports": [],
+            "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { LoadingModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-loading--basic\">See demo</a></p>\n",
+            "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { LoadingModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-loading--basic)\n",
+            "type": "component",
+            "sourceCode": "import { Component, Input, HostBinding } from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { LoadingModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-loading--basic)\n */\n@Component({\n\tselector: \"cds-loading, ibm-loading\",\n\ttemplate: `\n\t\t<div\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--loading--small': size === 'sm',\n\t\t\t\t'cds--loading--stop': !isActive && !overlay,\n\t\t\t\t'cds--loading-overlay--stop': !isActive && overlay\n\t\t\t}\"\n\t\t\tclass=\"cds--loading\">\n\t\t\t<svg class=\"cds--loading__svg\" viewBox=\"0 0 100 100\">\n\t\t\t\t<title>{{title}}</title>\n\t\t\t\t<circle class=\"cds--loading__stroke\" cx=\"50%\" cy=\"50%\" r=\"44\" />\n\t\t\t</svg>\n\t\t</div>\n\t`\n})\nexport class Loading {\n\t/**\n\t * Accessible title for the loading circle.\n\t * Defaults to the `LOADING.TITLE` value from the i18n service.\n\t */\n\t@Input() title = this.i18n.get().LOADING.TITLE;\n\n\t/**\n\t * set to `false` to stop the loading animation\n\t */\n\t@Input() isActive = true;\n\n\t/**\n\t * Specify the size of the button\n\t */\n\t@Input() size: \"normal\" | \"sm\" = \"normal\";\n\n\t/**\n\t * Set to `true` to make loader with an overlay.\n\t */\n\t@Input() @HostBinding(\"class.cds--loading-overlay\") overlay = false;\n\n\tconstructor(protected i18n: I18n) {}\n}\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "",
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "args": [
+                    {
+                        "name": "i18n",
+                        "type": "I18n",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    }
+                ],
+                "line": 50,
+                "jsdoctags": [
+                    {
+                        "name": "i18n",
+                        "type": "I18n",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    }
+                ]
+            },
+            "extends": []
+        },
+        {
+            "name": "ManyIconDemo",
+            "id": "component-ManyIconDemo-4dc8e54ce44830aee1cad09a9f037497b8b861fd6a6917d49f10cb673a952246016d4f9aa756b8df7073ec4aaacde3c7bb6715519b386351ec01a88ad4740482",
+            "file": "src/icon/stories/many-icons-demo.component.ts",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "app-demo-many-icon",
+            "styleUrls": [],
+            "styles": [
+                "\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t"
+            ],
+            "template": "<table>\n\t<tr *ngFor=\"let group of groupedIcons\">\n\t\t<td *ngFor=\"let icon of group\">\n\t\t\t<svg [cdsIcon]=\"icon.name\" [size]=\"icon.size\"></svg>\n\t\t\t<div>name: <code>{{icon.name}}</code></div>\n\t\t\t<div>size: <code>{{icon.size}}</code></div>\n\t\t</td>\n\t</tr>\n</table>\n\t",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [],
+            "outputsClass": [],
+            "propertiesClass": [
+                {
+                    "name": "groupedIcons",
+                    "defaultValue": "[]",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "any",
+                    "optional": false,
+                    "description": "",
+                    "line": 29
+                }
+            ],
+            "methodsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [],
+            "hostListeners": [],
+            "standalone": false,
+            "imports": [],
+            "description": "",
+            "rawdescription": "\n",
+            "type": "component",
+            "sourceCode": "import { Component, OnInit } from \"@angular/core\";\nimport * as Icons from \"@carbon/icons\";\n\nimport { IconService } from \"../\";\n\n@Component({\n\tselector: \"app-demo-many-icon\",\n\ttemplate: `\n\t\t<table>\n\t\t\t<tr *ngFor=\"let group of groupedIcons\">\n\t\t\t\t<td *ngFor=\"let icon of group\">\n\t\t\t\t\t<svg [cdsIcon]=\"icon.name\" [size]=\"icon.size\"></svg>\n\t\t\t\t\t<div>name: <code>{{icon.name}}</code></div>\n\t\t\t\t\t<div>size: <code>{{icon.size}}</code></div>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</table>\n\t`,\n\tstyles: [\n\t\t`\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class ManyIconDemo implements OnInit {\n\tgroupedIcons: any = [];\n\n\tconstructor(protected iconService: IconService) { }\n\n\tngOnInit() {\n\t\tconst iconMap = new Map();\n\t\tfor (const descriptor of Object.values(Icons)) {\n\t\t\tthis.iconService.register(descriptor as any);\n\t\t\tif (typeof descriptor === \"object\" && descriptor) {\n\t\t\t\tif (!iconMap.has(descriptor[\"name\"])) {\n\t\t\t\t\ticonMap.set(descriptor[\"name\"], []);\n\t\t\t\t}\n\t\t\t\ticonMap.get(descriptor[\"name\"]).push(descriptor);\n\t\t\t}\n\t\t}\n\t\t// Render after a delay to prevent page from freezing\n\t\tsetTimeout(() => {\n\t\t\tthis.groupedIcons = Array.from(iconMap.values());\n\t\t}, 1000);\n\t}\n}\n",
+            "assetsDirs": [],
+            "styleUrlsData": "",
+            "stylesData": "\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t\n",
+            "constructorObj": {
+                "name": "constructor",
+                "description": "",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "args": [
+                    {
+                        "name": "iconService",
+                        "type": "IconService",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    }
+                ],
+                "line": 29,
+                "jsdoctags": [
+                    {
+                        "name": "iconService",
+                        "type": "IconService",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    }
+                ]
+            },
+            "extends": [],
+            "implements": [
+                "OnInit"
+            ]
+        },
+        {
+            "name": "MenuButtonComponent",
+            "id": "component-MenuButtonComponent-9930be4d7a0a7029a44411b876444d2b329d5dfe4714db04569b8838e668d77eaee458b75bbc2e968b59a2393034a35f50f3183ad7d2728f6b1ade8ef57ee08d",
+            "file": "src/menu-button/menu-button.component.ts",
+            "changeDetection": "ChangeDetectionStrategy.OnPush",
+            "encapsulation": [],
+            "entryComponents": [],
+            "inputs": [],
+            "outputs": [],
+            "providers": [],
+            "selector": "cds-menu-button",
+            "styleUrls": [],
+            "styles": [],
+            "template": "<button\n\t#reference\n\tclass=\"cds--menu-button__trigger\"\n\t[ngClass]=\"{'cds--menu-button__trigger--open': open}\"\n\t[cdsButton]=\"kind\"\n\t[size]=\"size\"\n\t[attr.tabindex]=\"buttonTabIndex\"\n\t[disabled]=\"disabled\"\n\ttype=\"button\"\n\t[attr.aria-haspopup]=\"true\"\n\t[attr.aria-expanded]=\"open\"\n\t[attr.aria-controls]=\"open ? menuId : undefined\"\n\t(click)=\"toggleMenu()\">\n\t{{label}}\n\t<svg\n\t\tcdsIcon=\"chevron--down\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--btn__icon\">\n\t</svg>\n</button>\n<ng-template #menuTemplate>\n\t<cds-menu\n\t\tmode=\"basic\"\n\t\t[size]=\"size\"\n\t\t[open]=\"open\"\n\t\t[attr.id]=\"menuId\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--menu-button__bottom': this.menuAlignment === 'bottom',\n\t\t\t'cds--menu-button__bottom-start': this.menuAlignment === 'bottom-start',\n\t\t\t'cds--menu-button__bottom-end': this.menuAlignment === 'bottom-end',\n\t\t\t'cds--menu-top': this.menuAlignment === 'top',\n\t\t\t'cds--menu-top-start': this.menuAlignment === 'top-start',\n\t\t\t'cds--menu-top-end': this.menuAlignment === 'top-end'\n\t\t}\">\n\t\t<ng-content select=\"cds-menu-item, cds-menu-divider\"></ng-content>\n\t</cds-menu>\n</ng-template>\n\t",
+            "templateUrl": [],
+            "viewProviders": [],
+            "hostDirectives": [],
+            "inputsClass": [
+                {
+                    "name": "buttonTabIndex",
+                    "defaultValue": "\"0\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 96,
+                    "type": "\"0\" | \"1\" | \"-1\" | string",
+                    "decorators": []
+                },
+                {
+                    "name": "disabled",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 97,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "kind",
+                    "defaultValue": "\"primary\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 93,
+                    "type": "\"primary\" | \"tertiary\" | \"ghost\"",
+                    "decorators": []
+                },
+                {
+                    "name": "label",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 99,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "menuAlignment",
+                    "defaultValue": "\"bottom\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 95,
+                    "type": "MenuButtonPlacement",
+                    "decorators": []
+                },
+                {
+                    "name": "menuId",
+                    "defaultValue": "`menu-button-${MenuButtonComponent.menuButtonCounter++}`",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 77,
+                    "type": "string",
+                    "decorators": []
+                },
+                {
+                    "name": "open",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 98,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "size",
+                    "defaultValue": "\"lg\"",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 94,
+                    "type": "\"sm\" | \"md\" | \"lg\"",
+                    "decorators": []
+                }
+            ],
+            "outputsClass": [],
+            "propertiesClass": [
+                {
+                    "name": "containerClass",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 91,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'class.cds--menu-button__container'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                },
+                {
+                    "name": "menuButtonCounter",
+                    "defaultValue": "0",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "number",
+                    "optional": false,
+                    "description": "",
+                    "line": 76,
+                    "modifierKind": [
+                        126
+                    ]
+                },
+                {
+                    "name": "menuTemplate",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "TemplateRef<any>",
+                    "optional": false,
+                    "description": "",
+                    "line": 102,
+                    "decorators": [
+                        {
+                            "name": "ViewChild",
+                            "stringifiedArguments": "'menuTemplate'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                },
+                {
+                    "name": "referenceElement",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "ElementRef<HTMLButtonElement>",
+                    "optional": false,
+                    "description": "",
+                    "line": 101,
+                    "decorators": [
+                        {
+                            "name": "ViewChild",
+                            "stringifiedArguments": "'reference', {static: true}"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                }
+            ],
+            "methodsClass": [
+                {
+                    "name": "cleanUp",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 180,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nClean up `autoUpdate` if auto alignment is enabled\n",
+                    "description": "<p>Clean up <code>autoUpdate</code> if auto alignment is enabled</p>\n"
+                },
+                {
+                    "name": "handleFocusOut",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 169,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nOn body click, close the menu\n",
+                    "description": "<p>On body click, close the menu</p>\n",
+                    "jsdoctags": [
+                        {
+                            "name": {
+                                "pos": 4403,
+                                "end": 4408,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "event"
+                            },
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "pos": 4397,
+                                "end": 4402,
+                                "flags": 16842752,
+                                "modifierFlagsCache": 0,
+                                "transformFlags": 0,
+                                "kind": 80,
+                                "escapedText": "param"
+                            },
+                            "comment": ""
+                        }
+                    ]
+                },
+                {
+                    "name": "handleMenuItemClick",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "ItemClickEvent",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 156,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nAs of now, menu button does not support nexted menu, on button click it should close\n",
+                    "description": "<p>As of now, menu button does not support nexted menu, on button click it should close</p>\n",
+                    "jsdoctags": [
+                        {
+                            "name": "event",
+                            "type": "ItemClickEvent",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
                 },
                 {
-                    "name": "overlay",
-                    "defaultValue": "false",
+                    "name": "recomputePosition",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 238,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nSet to `true` to make loader with an overlay.\n",
-                    "description": "<p>Set to <code>true</code> to make loader with an overlay.</p>\n",
-                    "line": 50,
-                    "type": "boolean",
-                    "decorators": []
+                    "rawdescription": "\n\nCompute position of menu\n",
+                    "description": "<p>Compute position of menu</p>\n"
                 },
                 {
-                    "name": "size",
-                    "defaultValue": "\"normal\"",
+                    "name": "roundByDPR",
+                    "args": [
+                        {
+                            "name": "value",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "number",
+                    "typeParameters": [],
+                    "line": 228,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nSpecify the size of the button\n",
-                    "description": "<p>Specify the size of the button</p>\n",
-                    "line": 45,
-                    "type": "\"normal\" | \"sm\"",
-                    "decorators": []
+                    "jsdoctags": [
+                        {
+                            "name": "value",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
                 },
                 {
-                    "name": "title",
-                    "defaultValue": "this.i18n.get().LOADING.TITLE",
+                    "name": "toggleMenu",
+                    "args": [],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 197,
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "rawdescription": "\n\nAccessible title for the loading circle.\nDefaults to the `LOADING.TITLE` value from the i18n service.\n",
-                    "description": "<p>Accessible title for the loading circle.\nDefaults to the <code>LOADING.TITLE</code> value from the i18n service.</p>\n",
-                    "line": 35,
-                    "type": "any",
-                    "decorators": []
+                    "rawdescription": "\n\nHandles emitting open/close event\n",
+                    "description": "<p>Handles emitting open/close event</p>\n"
                 }
             ],
-            "outputsClass": [],
-            "propertiesClass": [],
-            "methodsClass": [],
             "deprecated": false,
             "deprecationMessage": "",
-            "hostBindings": [],
+            "hostBindings": [
+                {
+                    "name": "class.cds--menu-button__container",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 91,
+                    "type": "boolean",
+                    "decorators": []
+                }
+            ],
             "hostListeners": [],
             "standalone": false,
             "imports": [],
-            "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { LoadingModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-loading--basic\">See demo</a></p>\n",
-            "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { LoadingModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-loading--basic)\n",
+            "description": "",
+            "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, Input, HostBinding } from \"@angular/core\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { LoadingModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-loading--basic)\n */\n@Component({\n\tselector: \"cds-loading, ibm-loading\",\n\ttemplate: `\n\t\t<div\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--loading--small': size === 'sm',\n\t\t\t\t'cds--loading--stop': !isActive && !overlay,\n\t\t\t\t'cds--loading-overlay--stop': !isActive && overlay\n\t\t\t}\"\n\t\t\tclass=\"cds--loading\">\n\t\t\t<svg class=\"cds--loading__svg\" viewBox=\"0 0 100 100\">\n\t\t\t\t<title>{{title}}</title>\n\t\t\t\t<circle class=\"cds--loading__stroke\" cx=\"50%\" cy=\"50%\" r=\"44\" />\n\t\t\t</svg>\n\t\t</div>\n\t`\n})\nexport class Loading {\n\t/**\n\t * Accessible title for the loading circle.\n\t * Defaults to the `LOADING.TITLE` value from the i18n service.\n\t */\n\t@Input() title = this.i18n.get().LOADING.TITLE;\n\n\t/**\n\t * set to `false` to stop the loading animation\n\t */\n\t@Input() isActive = true;\n\n\t/**\n\t * Specify the size of the button\n\t */\n\t@Input() size: \"normal\" | \"sm\" = \"normal\";\n\n\t/**\n\t * Set to `true` to make loader with an overlay.\n\t */\n\t@Input() @HostBinding(\"class.cds--loading-overlay\") overlay = false;\n\n\tconstructor(protected i18n: I18n) {}\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tContentChildren,\n\tElementRef,\n\tforwardRef,\n\tHostBinding,\n\tInput,\n\tNgZone,\n\tOnChanges,\n\tOnDestroy,\n\tQueryList,\n\tRenderer2,\n\tSimpleChanges,\n\tTemplateRef,\n\tViewChild,\n\tViewContainerRef\n} from \"@angular/core\";\n\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip\n} from \"@floating-ui/dom\";\nimport { ContextMenuItemComponent, ItemClickEvent } from \"carbon-components-angular/context-menu\";\nimport { Subscription } from \"rxjs\";\n\ntype MenuButtonPlacement = \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\";\n\n@Component({\n\tselector: \"cds-menu-button\",\n\ttemplate: `\n\t\t<button\n\t\t\t#reference\n\t\t\tclass=\"cds--menu-button__trigger\"\n\t\t\t[ngClass]=\"{'cds--menu-button__trigger--open': open}\"\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[attr.tabindex]=\"buttonTabIndex\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\ttype=\"button\"\n\t\t\t[attr.aria-haspopup]=\"true\"\n\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t[attr.aria-controls]=\"open ? menuId : undefined\"\n\t\t\t(click)=\"toggleMenu()\">\n\t\t\t{{label}}\n\t\t\t<svg\n\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--btn__icon\">\n\t\t\t</svg>\n\t\t</button>\n\t\t<ng-template #menuTemplate>\n\t\t\t<cds-menu\n\t\t\t\tmode=\"basic\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[open]=\"open\"\n\t\t\t\t[attr.id]=\"menuId\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--menu-button__bottom': this.menuAlignment === 'bottom',\n\t\t\t\t\t'cds--menu-button__bottom-start': this.menuAlignment === 'bottom-start',\n\t\t\t\t\t'cds--menu-button__bottom-end': this.menuAlignment === 'bottom-end',\n\t\t\t\t\t'cds--menu-top': this.menuAlignment === 'top',\n\t\t\t\t\t'cds--menu-top-start': this.menuAlignment === 'top-start',\n\t\t\t\t\t'cds--menu-top-end': this.menuAlignment === 'top-end'\n\t\t\t\t}\">\n\t\t\t\t<ng-content select=\"cds-menu-item, cds-menu-divider\"></ng-content>\n\t\t\t</cds-menu>\n\t\t</ng-template>\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MenuButtonComponent implements OnChanges, AfterViewInit, OnDestroy {\n\tstatic menuButtonCounter = 0;\n\t@Input() menuId = `menu-button-${MenuButtonComponent.menuButtonCounter++}`;\n\n\t// Listen for click & determine if menu should close\n\t@ContentChildren(ContextMenuItemComponent) set projectedMenuItems(itemList: QueryList<ContextMenuItemComponent>) {\n\t\t// Reset in case user dynamically updates menu item\n\t\tthis.subscriptions.forEach((sub) => sub?.unsubscribe());\n\t\tthis.subscriptions = [];\n\t\titemList.forEach((item) => {\n\t\t\tthis.subscriptions.push(\n\t\t\t\titem.itemClick.subscribe((clickEvent) => this.handleMenuItemClick(clickEvent))\n\t\t\t);\n\t\t});\n\t}\n\n\t@HostBinding(\"class.cds--menu-button__container\") containerClass = true;\n\n\t@Input() kind: \"primary\" | \"tertiary\" | \"ghost\" = \"primary\";\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\t@Input() menuAlignment: MenuButtonPlacement = \"bottom\";\n\t@Input() buttonTabIndex: \"0\" | \"1\" | \"-1\" | string = \"0\";\n\t@Input() disabled = false;\n\t@Input() open = false;\n\t@Input() label: string;\n\n\t@ViewChild(\"reference\", { static: true }) referenceElement: ElementRef<HTMLButtonElement>;\n\t@ViewChild(\"menuTemplate\") menuTemplate: TemplateRef<any>;\n\n\tprotected documentClick = this.handleFocusOut.bind(this);\n\tprotected unmountFloatingElement: Function;\n\n\tprivate subscriptions: Subscription[] = [];\n\tprivate _alignment: MenuButtonPlacement = \"bottom\";\n\tprivate menuRef: HTMLElement;\n\n\tconstructor(\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected hostElement: ElementRef,\n\t\tprotected viewContainerRef: ViewContainerRef,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) { }\n\n\n\t/**\n\t * In case user updates alignment, store initial value.\n\t * This allows us to test user passed alignment on each open\n\t */\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes.menuAlignment) {\n\t\t\tthis._alignment = changes.menuAlignment.currentValue;\n\t\t}\n\t}\n\n\n\n\t/**\n\t * If user has passed in true for open, we dynamically open the menu\n\t */\n\tngAfterViewInit(): void {\n\t\tif (this.open) {\n\t\t\tthis.open = !this.open;\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t* Clean up Floating-ui & subscriptions\n\t*/\n\tngOnDestroy(): void {\n\t\tthis.cleanUp();\n\t\tthis.subscriptions.forEach((sub) => sub.unsubscribe());\n\t}\n\n\n\t/**\n\t * As of now, menu button does not support nexted menu, on button click it should close\n\t */\n\thandleMenuItemClick(event: ItemClickEvent) {\n\t\t// If event is not type radio/checkbox, we close the menu\n\t\tif (!event.type) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t * On body click, close the menu\n\t * @param event\n\t */\n\thandleFocusOut(event) {\n\t\tif (!this.hostElement.nativeElement.contains(event.target)) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t * Clean up `autoUpdate` if auto alignment is enabled\n\t */\n\tcleanUp() {\n\t\tdocument.removeEventListener(\"click\", this.documentClick);\n\t\tif (this.unmountFloatingElement) {\n\t\t\tthis.menuRef.remove();\n\t\t\tthis.viewContainerRef.clear();\n\t\t\tthis.unmountFloatingElement();\n\t\t}\n\t\tthis.unmountFloatingElement = undefined;\n\t\t// On all instances of menu closing, make sure icon direction is correct\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n\n\n\n\t/**\n\t * Handles emitting open/close event\n\t */\n\ttoggleMenu() {\n\t\tthis.open = !this.open;\n\t\tif (this.open) {\n\t\t\t// Render the template & append to view\n\t\t\tconst view = this.viewContainerRef.createEmbeddedView(this.menuTemplate);\n\t\t\tthis.menuRef = document.body.appendChild(view.rootNodes[0] as HTMLElement);\n\t\t\t// Assign button width to the menu ref to align with button\n\t\t\tObject.assign(this.menuRef.style, {\n\t\t\t\twidth: `${this.referenceElement.nativeElement.clientWidth}px`,\n\t\t\t\ttop: \"0\",\n\t\t\t\tleft: \"0\"\n\t\t\t});\n\n\t\t\t// Reset & test alignment every open\n\t\t\tthis.menuAlignment = this._alignment;\n\n\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\n\t\t\t// Listen for events such as scrolling to keep menu aligned\n\t\t\tthis.unmountFloatingElement = autoUpdate(\n\t\t\t\tthis.referenceElement.nativeElement,\n\t\t\t\tthis.menuRef,\n\t\t\t\tthis.recomputePosition.bind(this)\n\t\t\t);\n\t\t} else {\n\t\t\tthis.cleanUp();\n\t\t}\n\t}\n\n\n\n\troundByDPR(value) {\n\t\tconst dpr = window.devicePixelRatio || 1;\n\t\treturn Math.round(value * dpr) / dpr;\n\t}\n\n\n\n\t/**\n\t * Compute position of menu\n\t */\n\trecomputePosition() {\n\t\tif (this.menuTemplate && this.referenceElement) {\n\t\t\t// Run outside of angular zone to avoid unnecessary change detection and rely on floating-ui\n\t\t\tthis.ngZone.runOutsideAngular(async () => {\n\t\t\t\tconst { x, y, placement } = await computePosition(\n\t\t\t\t\tthis.referenceElement.nativeElement,\n\t\t\t\t\tthis.menuRef,\n\t\t\t\t\t{\n\t\t\t\t\t\tplacement: this.menuAlignment,\n\t\t\t\t\t\tstrategy: \"fixed\",\n\t\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\t\tflip({ crossAxis: false })\n\t\t\t\t\t\t]\n\t\t\t\t\t});\n\n\t\t\t\tthis.menuAlignment = placement as MenuButtonPlacement;\n\n\t\t\t\t// Using CSSOM to manipulate CSS to avoid content security policy inline-src\n\t\t\t\t// https://github.com/w3c/webappsec-csp/issues/212\n\t\t\t\tObject.assign(this.menuRef.style, {\n\t\t\t\t\tposition: \"fixed\",\n\t\t\t\t\t// Using transform instead of top/left position to improve performance\n\t\t\t\t\ttransform: `translate(${this.roundByDPR(x)}px,${this.roundByDPR(y)}px)`\n\t\t\t\t});\n\t\t\t\tthis.changeDetectorRef.markForCheck();\n\t\t\t});\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -36762,91 +37874,77 @@
                 "deprecationMessage": "",
                 "args": [
                     {
-                        "name": "i18n",
-                        "type": "I18n",
+                        "name": "ngZone",
+                        "type": "NgZone",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    },
+                    {
+                        "name": "renderer",
+                        "type": "Renderer2",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    },
+                    {
+                        "name": "hostElement",
+                        "type": "ElementRef",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    },
+                    {
+                        "name": "viewContainerRef",
+                        "type": "ViewContainerRef",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    },
+                    {
+                        "name": "changeDetectorRef",
+                        "type": "ChangeDetectorRef",
                         "deprecated": false,
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 50,
+                "line": 109,
                 "jsdoctags": [
                     {
-                        "name": "i18n",
-                        "type": "I18n",
+                        "name": "ngZone",
+                        "type": "NgZone",
                         "deprecated": false,
                         "deprecationMessage": "",
                         "tagName": {
                             "text": "param"
                         }
-                    }
-                ]
-            },
-            "extends": []
-        },
-        {
-            "name": "ManyIconDemo",
-            "id": "component-ManyIconDemo-4dc8e54ce44830aee1cad09a9f037497b8b861fd6a6917d49f10cb673a952246016d4f9aa756b8df7073ec4aaacde3c7bb6715519b386351ec01a88ad4740482",
-            "file": "src/icon/stories/many-icons-demo.component.ts",
-            "encapsulation": [],
-            "entryComponents": [],
-            "inputs": [],
-            "outputs": [],
-            "providers": [],
-            "selector": "app-demo-many-icon",
-            "styleUrls": [],
-            "styles": [
-                "\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t"
-            ],
-            "template": "<table>\n\t<tr *ngFor=\"let group of groupedIcons\">\n\t\t<td *ngFor=\"let icon of group\">\n\t\t\t<svg [cdsIcon]=\"icon.name\" [size]=\"icon.size\"></svg>\n\t\t\t<div>name: <code>{{icon.name}}</code></div>\n\t\t\t<div>size: <code>{{icon.size}}</code></div>\n\t\t</td>\n\t</tr>\n</table>\n\t",
-            "templateUrl": [],
-            "viewProviders": [],
-            "hostDirectives": [],
-            "inputsClass": [],
-            "outputsClass": [],
-            "propertiesClass": [
-                {
-                    "name": "groupedIcons",
-                    "defaultValue": "[]",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "any",
-                    "optional": false,
-                    "description": "",
-                    "line": 29
-                }
-            ],
-            "methodsClass": [],
-            "deprecated": false,
-            "deprecationMessage": "",
-            "hostBindings": [],
-            "hostListeners": [],
-            "standalone": false,
-            "imports": [],
-            "description": "",
-            "rawdescription": "\n",
-            "type": "component",
-            "sourceCode": "import { Component, OnInit } from \"@angular/core\";\nimport * as Icons from \"@carbon/icons\";\n\nimport { IconService } from \"../\";\n\n@Component({\n\tselector: \"app-demo-many-icon\",\n\ttemplate: `\n\t\t<table>\n\t\t\t<tr *ngFor=\"let group of groupedIcons\">\n\t\t\t\t<td *ngFor=\"let icon of group\">\n\t\t\t\t\t<svg [cdsIcon]=\"icon.name\" [size]=\"icon.size\"></svg>\n\t\t\t\t\t<div>name: <code>{{icon.name}}</code></div>\n\t\t\t\t\t<div>size: <code>{{icon.size}}</code></div>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</table>\n\t`,\n\tstyles: [\n\t\t`\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t`\n\t]\n})\nexport class ManyIconDemo implements OnInit {\n\tgroupedIcons: any = [];\n\n\tconstructor(protected iconService: IconService) { }\n\n\tngOnInit() {\n\t\tconst iconMap = new Map();\n\t\tfor (const descriptor of Object.values(Icons)) {\n\t\t\tthis.iconService.register(descriptor as any);\n\t\t\tif (typeof descriptor === \"object\" && descriptor) {\n\t\t\t\tif (!iconMap.has(descriptor[\"name\"])) {\n\t\t\t\t\ticonMap.set(descriptor[\"name\"], []);\n\t\t\t\t}\n\t\t\t\ticonMap.get(descriptor[\"name\"]).push(descriptor);\n\t\t\t}\n\t\t}\n\t\t// Render after a delay to prevent page from freezing\n\t\tsetTimeout(() => {\n\t\t\tthis.groupedIcons = Array.from(iconMap.values());\n\t\t}, 1000);\n\t}\n}\n",
-            "assetsDirs": [],
-            "styleUrlsData": "",
-            "stylesData": "\n\t\t\ttd {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tpadding: 10px 0;\n\t\t\t}\n\t\t\n",
-            "constructorObj": {
-                "name": "constructor",
-                "description": "",
-                "deprecated": false,
-                "deprecationMessage": "",
-                "args": [
+                    },
                     {
-                        "name": "iconService",
-                        "type": "IconService",
+                        "name": "renderer",
+                        "type": "Renderer2",
                         "deprecated": false,
-                        "deprecationMessage": ""
-                    }
-                ],
-                "line": 29,
-                "jsdoctags": [
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    },
                     {
-                        "name": "iconService",
-                        "type": "IconService",
+                        "name": "hostElement",
+                        "type": "ElementRef",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    },
+                    {
+                        "name": "viewContainerRef",
+                        "type": "ViewContainerRef",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    },
+                    {
+                        "name": "changeDetectorRef",
+                        "type": "ChangeDetectorRef",
                         "deprecated": false,
                         "deprecationMessage": "",
                         "tagName": {
@@ -36857,8 +37955,42 @@
             },
             "extends": [],
             "implements": [
-                "OnInit"
-            ]
+                "OnChanges",
+                "AfterViewInit",
+                "OnDestroy"
+            ],
+            "accessors": {
+                "projectedMenuItems": {
+                    "name": "projectedMenuItems",
+                    "setSignature": {
+                        "name": "projectedMenuItems",
+                        "type": "void",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "args": [
+                            {
+                                "name": "itemList",
+                                "type": "QueryList<ContextMenuItemComponent>",
+                                "deprecated": false,
+                                "deprecationMessage": ""
+                            }
+                        ],
+                        "returnType": "void",
+                        "line": 80,
+                        "jsdoctags": [
+                            {
+                                "name": "itemList",
+                                "type": "QueryList<ContextMenuItemComponent>",
+                                "deprecated": false,
+                                "deprecationMessage": "",
+                                "tagName": {
+                                    "text": "param"
+                                }
+                            }
+                        ]
+                    }
+                }
+            }
         },
         {
             "name": "MockQueryCombobox",
@@ -66386,7 +67518,7 @@
         },
         {
             "name": "Toggletip",
-            "id": "component-Toggletip-8bc8ce32fdba7851621debb20f65e40b36cbdb53f07f7a02bcc377c18c7d8f26723f5c12e404ecdc31c59f61674b318becd953dcf5221997247ea28a07984c71",
+            "id": "component-Toggletip-18ae0a3f5ad133c76eef9acc82a6de7e9b0043325567115188a487cdd69ca54e13ee980b47b6c24e65a836dd57a3cb64f390ac2be8a38b46e871518b9ab1ac08",
             "file": "src/toggletip/toggletip.component.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -66397,7 +67529,7 @@
             "selector": "cds-toggletip, ibm-toggletip",
             "styleUrls": [],
             "styles": [],
-            "template": "<ng-content select=\"[cdsToggletipButton]\"></ng-content>\n<cds-popover-content>\n\t<ng-content select=\"[cdsToggletipContent]\"></ng-content>\n</cds-popover-content>\n\t",
+            "template": "<ng-content select=\"[cdsToggletipButton]\"></ng-content>\n<cds-popover-content [attr.id]=\"id\" aria-live=\"polite\">\n\t<ng-content select=\"[cdsToggletipContent]\"></ng-content>\n</cds-popover-content>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -66982,7 +68114,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { ToggletipModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-toggletip--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { ToggletipModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-toggletip--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tContentChild,\n\tElementRef,\n\tHostBinding,\n\tHostListener,\n\tInput,\n\tNgZone,\n\tOnDestroy,\n\tRenderer2\n} from \"@angular/core\";\nimport { fromEvent, Subscription } from \"rxjs\";\nimport { PopoverContainer } from \"carbon-components-angular/popover\";\nimport { ToggletipButton } from \"./toggletip-button.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ToggletipModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-toggletip--basic)\n */\n@Component({\n\tselector: \"cds-toggletip, ibm-toggletip\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<ng-content select=\"[cdsToggletipButton]\"></ng-content>\n\t\t<cds-popover-content>\n\t\t\t<ng-content select=\"[cdsToggletipContent]\"></ng-content>\n\t\t</cds-popover-content>\n\t`\n})\nexport class Toggletip extends PopoverContainer implements AfterViewInit, OnDestroy {\n\tstatic toggletipCounter = 0;\n\n\t@Input() id = `tooltip-${Toggletip.toggletipCounter++}`;\n\n\t@HostBinding(\"class.cds--toggletip\") toggletipClass = true;\n\t@HostBinding(\"class.cds--toggletip--open\") @Input() isOpen = false;\n\n\t@ContentChild(ToggletipButton, { read: ElementRef }) btn!: ElementRef;\n\n\tdocumentClick = this.handleFocusOut.bind(this);\n\tprivate subscription: Subscription;\n\n\tconstructor(\n\t\tprotected hostElement: ElementRef,\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) {\n\t\tsuper(hostElement, ngZone, renderer, changeDetectorRef);\n\t\tthis.highContrast = true;\n\t\tthis.dropShadow = false;\n\t}\n\n\tngAfterViewInit(): void {\n\t\tthis.initializeReferences();\n\n\t\t// Listen for click events on trigger\n\t\tthis.subscription = fromEvent(this.btn.nativeElement, \"click\")\n\t\t\t.subscribe((event: Event) => {\n\t\t\t\t// Add/Remove event listener based on isOpen to improve performance when there\n\t\t\t\t// are a lot of toggletips\n\t\t\t\tif (this.isOpen) {\n\t\t\t\t\tdocument.removeEventListener(\"click\", this.documentClick);\n\t\t\t\t} else {\n\t\t\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\t\t\t\t}\n\n\t\t\t\tthis.handleExpansion(!this.isOpen, event);\n\t\t\t});\n\n\t\t// Toggletip is open on initial render, add 'click' event listener to document so users can close\n\t\tif (this.isOpen) {\n\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\t\t}\n\n\t\tif (this.btn) {\n\t\t\tthis.renderer.setAttribute(this.btn.nativeElement, \"aria-controls\", this.id);\n\t\t}\n\t}\n\n\t@HostListener(\"keyup\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tif (open && event.key === \"Escape\") {\n\t\t\tevent.stopPropagation();\n\t\t\tthis.handleExpansion(false, event);\n\t\t}\n\t}\n\n\thandleFocusOut(event) {\n\t\tif (!this.hostElement.nativeElement.contains(event.target)) {\n\t\t\tthis.handleExpansion(false, event);\n\t\t}\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\tprivate handleExpansion(state = false, event: Event) {\n\t\tthis.handleChange(state, event);\n\t\tif (this.btn) {\n\t\t\tthis.renderer.setAttribute(this.btn.nativeElement, \"aria-expanded\", this.isOpen.toString());\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tContentChild,\n\tElementRef,\n\tHostBinding,\n\tHostListener,\n\tInput,\n\tNgZone,\n\tOnDestroy,\n\tRenderer2\n} from \"@angular/core\";\nimport { fromEvent, Subscription } from \"rxjs\";\nimport { PopoverContainer } from \"carbon-components-angular/popover\";\nimport { ToggletipButton } from \"./toggletip-button.directive\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { ToggletipModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-toggletip--basic)\n */\n@Component({\n\tselector: \"cds-toggletip, ibm-toggletip\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<ng-content select=\"[cdsToggletipButton]\"></ng-content>\n\t\t<cds-popover-content [attr.id]=\"id\" aria-live=\"polite\">\n\t\t\t<ng-content select=\"[cdsToggletipContent]\"></ng-content>\n\t\t</cds-popover-content>\n\t`\n})\nexport class Toggletip extends PopoverContainer implements AfterViewInit, OnDestroy {\n\tstatic toggletipCounter = 0;\n\n\t@Input() id = `tooltip-${Toggletip.toggletipCounter++}`;\n\n\t@HostBinding(\"class.cds--toggletip\") toggletipClass = true;\n\t@HostBinding(\"class.cds--toggletip--open\") @Input() isOpen = false;\n\n\t@ContentChild(ToggletipButton, { read: ElementRef }) btn!: ElementRef;\n\n\tdocumentClick = this.handleFocusOut.bind(this);\n\tprivate subscription: Subscription;\n\n\tconstructor(\n\t\tprotected hostElement: ElementRef,\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) {\n\t\tsuper(hostElement, ngZone, renderer, changeDetectorRef);\n\t\tthis.highContrast = true;\n\t\tthis.dropShadow = false;\n\t}\n\n\tngAfterViewInit(): void {\n\t\tthis.initializeReferences();\n\n\t\t// Listen for click events on trigger\n\t\tthis.subscription = fromEvent(this.btn.nativeElement, \"click\")\n\t\t\t.subscribe((event: Event) => {\n\t\t\t\t// Add/Remove event listener based on isOpen to improve performance when there\n\t\t\t\t// are a lot of toggletips\n\t\t\t\tif (this.isOpen) {\n\t\t\t\t\tdocument.removeEventListener(\"click\", this.documentClick);\n\t\t\t\t} else {\n\t\t\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\t\t\t\t}\n\n\t\t\t\tthis.handleExpansion(!this.isOpen, event);\n\t\t\t});\n\n\t\t// Toggletip is open on initial render, add 'click' event listener to document so users can close\n\t\tif (this.isOpen) {\n\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\t\t}\n\n\t\tif (this.btn) {\n\t\t\tthis.renderer.setAttribute(this.btn.nativeElement, \"aria-controls\", this.id);\n\t\t}\n\t}\n\n\t@HostListener(\"keyup\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tif (open && event.key === \"Escape\") {\n\t\t\tevent.stopPropagation();\n\t\t\tthis.handleExpansion(false, event);\n\t\t}\n\t}\n\n\thandleFocusOut(event) {\n\t\tif (!this.hostElement.nativeElement.contains(event.target)) {\n\t\t\tthis.handleExpansion(false, event);\n\t\t}\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.subscription.unsubscribe();\n\t}\n\n\tprivate handleExpansion(state = false, event: Event) {\n\t\tthis.handleChange(state, event);\n\t\tif (this.btn) {\n\t\t\tthis.renderer.setAttribute(this.btn.nativeElement, \"aria-expanded\", this.isOpen.toString());\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -70165,6 +71297,60 @@
                 }
             ]
         },
+        {
+            "name": "ComboButtonModule",
+            "id": "module-ComboButtonModule-705867ddb65364729d381c1f3180d6accbff37c0c8955fb5b71071da1f580561068f24f40d7675aa28ba456befe39edbb845b798e00ccd09f8cc6b11b4c002be",
+            "description": "",
+            "deprecationMessage": "",
+            "deprecated": false,
+            "file": "src/combo-button/combo-button.module.ts",
+            "methods": [],
+            "sourceCode": "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { IconModule } from \"carbon-components-angular/icon\";\nimport { ContextMenuModule } from \"carbon-components-angular/context-menu\";\nimport { ButtonModule } from \"carbon-components-angular/button\";\n\nimport { ComboButtonComponent } from \"./combo-button.component\";\n\n@NgModule({\n\timports: [\n\t\tCommonModule,\n\t\tButtonModule,\n\t\tIconModule,\n\t\tContextMenuModule\n\t],\n\texports: [ComboButtonComponent],\n\tdeclarations: [ComboButtonComponent]\n})\nexport class ComboButtonModule { }\n",
+            "children": [
+                {
+                    "type": "providers",
+                    "elements": []
+                },
+                {
+                    "type": "declarations",
+                    "elements": [
+                        {
+                            "name": "ComboButtonComponent"
+                        }
+                    ]
+                },
+                {
+                    "type": "imports",
+                    "elements": [
+                        {
+                            "name": "ButtonModule"
+                        },
+                        {
+                            "name": "ContextMenuModule"
+                        },
+                        {
+                            "name": "IconModule"
+                        }
+                    ]
+                },
+                {
+                    "type": "exports",
+                    "elements": [
+                        {
+                            "name": "ComboButtonComponent"
+                        }
+                    ]
+                },
+                {
+                    "type": "bootstrap",
+                    "elements": []
+                },
+                {
+                    "type": "classes",
+                    "elements": []
+                }
+            ]
+        },
         {
             "name": "ContainedListModule",
             "id": "module-ContainedListModule-45e6bc117d8af8603b041fe5ef4088fd4fae5785c35f61b921fcda04976463f879ebb045d08a833b14592e03add98b2b6276d14260a15087a67fd09a2fc24743",
@@ -71415,6 +72601,60 @@
                 }
             ]
         },
+        {
+            "name": "MenuButtonModule",
+            "id": "module-MenuButtonModule-a2df7769bd937428742a3e946e0288a88c29ba93b25b8e09901809b47c5d729a417d06557fd6bbd05530b891ff5302f6f08371d670740544f0addfa7e7781a8a",
+            "description": "",
+            "deprecationMessage": "",
+            "deprecated": false,
+            "file": "src/menu-button/menu-button.module.ts",
+            "methods": [],
+            "sourceCode": "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { ButtonModule } from \"carbon-components-angular/button\";\nimport { IconModule } from \"carbon-components-angular/icon\";\nimport { ContextMenuModule } from \"carbon-components-angular/context-menu\";\n\nimport { MenuButtonComponent } from \"./menu-button.component\";\n\n@NgModule({\n\timports: [\n\t\tCommonModule,\n\t\tButtonModule,\n\t\tIconModule,\n\t\tContextMenuModule\n\t],\n\texports: [MenuButtonComponent],\n\tdeclarations: [MenuButtonComponent],\n\tproviders: []\n})\nexport class MenuButtonModule { }\n",
+            "children": [
+                {
+                    "type": "providers",
+                    "elements": []
+                },
+                {
+                    "type": "declarations",
+                    "elements": [
+                        {
+                            "name": "MenuButtonComponent"
+                        }
+                    ]
+                },
+                {
+                    "type": "imports",
+                    "elements": [
+                        {
+                            "name": "ButtonModule"
+                        },
+                        {
+                            "name": "ContextMenuModule"
+                        },
+                        {
+                            "name": "IconModule"
+                        }
+                    ]
+                },
+                {
+                    "type": "exports",
+                    "elements": [
+                        {
+                            "name": "MenuButtonComponent"
+                        }
+                    ]
+                },
+                {
+                    "type": "bootstrap",
+                    "elements": []
+                },
+                {
+                    "type": "classes",
+                    "elements": []
+                }
+            ]
+        },
         {
             "name": "ModalModule",
             "id": "module-ModalModule-807a4219f47d9819369c92a95700d996a594cb8e1c36fd1ba161fc238050c8f1477ef660d375c2835113fe19d1248da54c9e170b2f47d0eda4c95176a765f0bb",
@@ -73585,6 +74825,16 @@
                 "type": "",
                 "defaultValue": "Template.bind({})"
             },
+            {
+                "name": "Basic",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "Template.bind({})"
+            },
             {
                 "name": "Basic",
                 "ctype": "miscellaneous",
@@ -73619,7 +74869,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/checkbox/checkbox.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -73629,7 +74879,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/checkbox/checkbox.stories.ts",
+                "file": "src/code-snippet/code-snippet.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -73639,7 +74889,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/code-snippet/code-snippet.stories.ts",
+                "file": "src/combo-button/combo-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -73825,6 +75075,16 @@
                 "type": "",
                 "defaultValue": "Template.bind({})"
             },
+            {
+                "name": "Basic",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/menu-button/menu-button.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "Template.bind({})"
+            },
             {
                 "name": "Basic",
                 "ctype": "miscellaneous",
@@ -73959,7 +75219,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tabs/tabs.stories.ts",
+                "file": "src/table/table.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -73969,7 +75229,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tag/tag.stories.ts",
+                "file": "src/tabs/tabs.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -73979,7 +75239,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/table/table.stories.ts",
+                "file": "src/tag/tag.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -76201,7 +77461,7 @@
                 "name": "Skeleton",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tabs/tabs.stories.ts",
+                "file": "src/table/table.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -76211,7 +77471,7 @@
                 "name": "Skeleton",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/table/table.stories.ts",
+                "file": "src/tabs/tabs.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -76321,21 +77581,21 @@
                 "name": "SkeletonTemplate",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tabs/tabs.stories.ts",
+                "file": "src/table/table.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n\t\t-->\n\t\t<app-skeleton-table\n\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t[size]=\"size\"\n\t\t\t[striped]=\"striped\">\n\t\t</app-skeleton-table>\n\t`\n})"
             },
             {
                 "name": "SkeletonTemplate",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/table/table.stories.ts",
+                "file": "src/tabs/tabs.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n\t\t-->\n\t\t<app-skeleton-table\n\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t[size]=\"size\"\n\t\t\t[striped]=\"striped\">\n\t\t</app-skeleton-table>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
             },
             {
                 "name": "SkeletonTemplate",
@@ -76427,6 +77687,16 @@
                 "type": "",
                 "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-accordion [align]=\"align\" [size]=\"size\">\n\t\t\t<cds-accordion-item title=\"Section 1 title\" (selected)=\"selected($event)\">\n\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t</cds-accordion-item>\n\t\t\t<cds-accordion-item title=\"Section 2 title\" (selected)=\"selected($event)\">\n\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t</cds-accordion-item>\n\t\t\t<cds-accordion-item title=\"Section 3 title\" (selected)=\"selected($event)\">\n\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t</cds-accordion-item>\n\t\t</cds-accordion>\n\t`\n})"
             },
+            {
+                "name": "Template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+            },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
@@ -76461,31 +77731,31 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/checkbox/checkbox.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<fieldset class=\"cds--fieldset\">\n\t\t\t<legend class=\"cds--label\">{{label}}</legend>\n\t\t\t<cds-checkbox\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t\t[checked]=\"checked\"\n\t\t\t\t(checkedChange)=\"onChange($event)\"\n\t\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t\t(indeterminateChange)=\"onIndeterminateChange($event)\">\n\t\t\t\tIndeterminate checkbox\n\t\t\t</cds-checkbox>\n\t\t</fieldset>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/checkbox/checkbox.stories.ts",
+                "file": "src/code-snippet/code-snippet.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<fieldset class=\"cds--fieldset\">\n\t\t\t<legend class=\"cds--label\">{{label}}</legend>\n\t\t\t<cds-checkbox\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[indeterminate]=\"indeterminate\"\n\t\t\t\t[checked]=\"checked\"\n\t\t\t\t(checkedChange)=\"onChange($event)\"\n\t\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t\t(indeterminateChange)=\"onIndeterminateChange($event)\">\n\t\t\t\tIndeterminate checkbox\n\t\t\t</cds-checkbox>\n\t\t</fieldset>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-code-snippet display=\"single\">{{snippet}}</cds-code-snippet>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/code-snippet/code-snippet.stories.ts",
+                "file": "src/combo-button/combo-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-code-snippet display=\"single\">{{snippet}}</cds-code-snippet>\n\t`\n})"
+                "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})"
             },
             {
                 "name": "Template",
@@ -76667,6 +77937,16 @@
                 "type": "",
                 "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-loading [isActive]=\"isActive\" [size]=\"size\" [overlay]=\"overlay\"></cds-loading>\n\t`\n})"
             },
+            {
+                "name": "Template",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/menu-button/menu-button.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-menu-button\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[menuAlignment]=\"menuAlignment\"\n\t\t\t[label]=\"label\">\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-menu-button>\n\t`\n})"
+            },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
@@ -76801,31 +78081,31 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tabs/tabs.stories.ts",
+                "file": "src/table/table.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tag/tag.stories.ts",
+                "file": "src/tabs/tabs.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/table/table.stories.ts",
+                "file": "src/tag/tag.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -78797,6 +80077,17 @@
                 "description": "",
                 "kind": 192
             },
+            {
+                "name": "ComboButtonPlacement",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\"",
+                "file": "src/combo-button/combo-button.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 192
+            },
             {
                 "name": "DangerButtonType",
                 "ctype": "miscellaneous",
@@ -78830,6 +80121,17 @@
                 "description": "",
                 "kind": 192
             },
+            {
+                "name": "MenuButtonPlacement",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\"",
+                "file": "src/menu-button/menu-button.component.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 192
+            },
             {
                 "name": "NotificationType",
                 "ctype": "miscellaneous",
@@ -80241,70 +81543,6 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"width: 500px\">\n\t\t\t<cds-accordion>\n\t\t\t\t<cds-accordion-item [title]=\"title\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t\t<cds-accordion-item [title]=\"titleWithContext\" [context]=\"{ index: 2 }\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t</cds-accordion>\n\t\t</div>\n\t\t<ng-template #title>\n\t\t\t<p class=\"cds--accordion__title\">Section 1 title</p>\n\t\t</ng-template>\n\t\t<ng-template #titleWithContext let-index=\"index\">\n\t\t\t<p class=\"cds--accordion__title\">Section {{ index }} title</p>\n\t\t</ng-template>\n\t`\n})"
                 }
             ],
-            "src/button/button-set.stories.ts": [
-                {
-                    "name": "Basic",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/button/button-set.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "Template.bind({})"
-                },
-                {
-                    "name": "Template",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/button/button-set.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
-                }
-            ],
-            "src/button/button.stories.ts": [
-                {
-                    "name": "Basic",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "Template.bind({})"
-                },
-                {
-                    "name": "Template",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
-                },
-                {
-                    "name": "WithIcon",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "WithIconTemplate.bind({})"
-                },
-                {
-                    "name": "WithIconTemplate",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
-                }
-            ],
             "src/breadcrumb/breadcrumb.stories.ts": [
                 {
                     "name": "Basic",
@@ -80436,6 +81674,70 @@
                     "defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
                 }
             ],
+            "src/button/button-set.stories.ts": [
+                {
+                    "name": "Basic",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/button/button-set.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/button/button-set.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
+                }
+            ],
+            "src/button/button.stories.ts": [
+                {
+                    "name": "Basic",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/button/button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/button/button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
+                },
+                {
+                    "name": "WithIcon",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/button/button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "WithIconTemplate.bind({})"
+                },
+                {
+                    "name": "WithIconTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/button/button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
+                }
+            ],
             "src/checkbox/checkbox.stories.ts": [
                 {
                     "name": "Basic",
@@ -80580,6 +81882,28 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-code-snippet display=\"single\">{{snippet}}</cds-code-snippet>\n\t`\n})"
                 }
             ],
+            "src/combo-button/combo-button.stories.ts": [
+                {
+                    "name": "Basic",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/combo-button/combo-button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/combo-button/combo-button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "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/combobox/combobox.stories.ts": [
                 {
                     "name": "Basic",
@@ -81564,6 +82888,28 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-loading [isActive]=\"isActive\" [size]=\"size\" [overlay]=\"overlay\"></cds-loading>\n\t`\n})"
                 }
             ],
+            "src/menu-button/menu-button.stories.ts": [
+                {
+                    "name": "Basic",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/menu-button/menu-button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/menu-button/menu-button.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-menu-button\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[menuAlignment]=\"menuAlignment\"\n\t\t\t[label]=\"label\">\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-menu-button>\n\t`\n})"
+                }
+            ],
             "src/modal/modal.stories.ts": [
                 {
                     "name": "Basic",
@@ -82198,190 +83544,6 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list [condensed]=\"condensed\">\n\t\t\t<cds-list-header>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n\t\t\t\t<cds-list-column>Column 3</cds-list-column>\n\t\t\t</cds-list-header>\n\t\t\t<cds-list-row>\n\t\t\t\t<cds-list-column>Row 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t\t<cds-list-row>\n\t\t\t\t<cds-list-column>Row 2</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t</cds-structured-list>\n\t`\n})"
                 }
             ],
-            "src/tabs/tabs.stories.ts": [
-                {
-                    "name": "Basic",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "Template.bind({})"
-                },
-                {
-                    "name": "BeforeAndAfter",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "BeforeAndAfterTemplate.bind({})"
-                },
-                {
-                    "name": "BeforeAndAfterTemplate",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">before</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">after</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">both</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t`\n})"
-                },
-                {
-                    "name": "Skeleton",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "SkeletonTemplate.bind({})"
-                },
-                {
-                    "name": "SkeletonTemplate",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
-                },
-                {
-                    "name": "TabheaderGroup",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "TabHeaderGroupTemplate.bind({})"
-                },
-                {
-                    "name": "TabHeaderGroupTemplate",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/pagination/stories/pagination.component.ts\n\t\t-->\n\t\t<app-header-group\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t[isNavigation]=\"isNavigation\">\n\t\t</app-header-group>\n\t`\n})"
-                },
-                {
-                    "name": "Template",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
-                },
-                {
-                    "name": "With",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "WithTemplate.bind({})"
-                },
-                {
-                    "name": "WithTemplate",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<ng-template #customTabs let-item>\n\t\t\t{{item ? item.name : \"wait for it\"}}\n\t\t</ng-template>\n\t\t<ng-template #iconTab>\n\t\t\t<div style=\"height: 14px;\">\n\t\t\t\tSomething custom\n\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n\t\t\t\tstyle=\"height: 14px; width: 14px; fill: #3d70b2;\">\n\t\t\t\t\t<path d=\"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z\"></path>\n\t\t\t\t\t<path d=\"M9 13H7V7h2z\"></path>\n\t\t\t\t\t<path d=\"M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab\n\t\t\t\t*ngFor=\"let item of data; let i = index;\"\n\t\t\t\t[heading]=\"customTabs\"\n\t\t\t\ttitle=\"Tab Content\"\n\t\t\t\t[context]=\"item\">\n\t\t\t\tTab Content {{i + 1}}\n\t\t\t</cds-tab>\n\t\t\t<cds-tab [heading]=\"iconTab\" title=\"Custom tab content\">Tab Content Custom</cds-tab>\n\t\t</cds-tabs>\n\t`\n})"
-                }
-            ],
-            "src/tag/tag.stories.ts": [
-                {
-                    "name": "Basic",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "Template.bind({})"
-                },
-                {
-                    "name": "Filter",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "FilteredTemplate.bind({})"
-                },
-                {
-                    "name": "FilteredTemplate",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-filter\n\t\t\t[type]=\"type\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\ttitle=\"Filter\"\n\t\t\tcloseButtonLabel=\"Clear\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tFiltered\n\t\t</cds-tag-filter>\n\t`\n})"
-                },
-                {
-                    "name": "OperationalTag",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "OperationalTagTemplate.bind({})"
-                },
-                {
-                    "name": "OperationalTagTemplate",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-operational\n\t\t\ttype=\"cyan\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tOperational\n\t\t</cds-tag-operational>\n\n\n\t\t<div\n\t\t\tcdsPopover\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[highContrast]=\"true\">\n\t\t\t<cds-tag-operational\n\t\t\t\t[type]=\"type\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t(click)=\"isOpen = !isOpen\">\n\t\t\t\t<div cdsTagIcon>\n\t\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t\t</div>\n\t\t\t\tOperational w/ popover\n\t\t\t</cds-tag-operational>\n\t\t\t<cds-popover-content>\n\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\tTag 1 name <br>\n\t\t\t\t\tTag 2 name <br>\n\t\t\t\t\tTag 3 name <br>\n\t\t\t\t\tTag 4 name <br>\n\t\t\t\t\t<cds-tag type=\"green\">Tag 5 name</cds-tag>\n\t\t\t\t</div>\n\t\t\t</cds-popover-content>\n\t\t</div>\n\t`,\n\tstyles: [\n\t\t`.popover-content {\n\t\t\tline-height: 1.5;\n\t\t\tpadding: 1rem;\n\t\t\tfont-size: 14px;\n\t\t}`\n\t]\n})"
-                },
-                {
-                    "name": "SelectedTag",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "SelectedTagTemplate.bind({})"
-                },
-                {
-                    "name": "SelectedTagTemplate",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-selectable\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[selected]=\"selected\"\n\t\t\t(selectedChange)=\"selectedChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tSelectable\n\t\t</cds-tag-selectable>\n\t`\n})"
-                },
-                {
-                    "name": "Template",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
-                }
-            ],
             "src/table/table.stories.ts": [
                 {
                     "name": "Basic",
@@ -82674,6 +83836,190 @@
                     "defaultValue": "WithoutActionTemplate.bind({})"
                 }
             ],
+            "src/tabs/tabs.stories.ts": [
+                {
+                    "name": "Basic",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tabs/tabs.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "BeforeAndAfter",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tabs/tabs.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "BeforeAndAfterTemplate.bind({})"
+                },
+                {
+                    "name": "BeforeAndAfterTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tabs/tabs.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">before</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">after</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">both</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t`\n})"
+                },
+                {
+                    "name": "Skeleton",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tabs/tabs.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "SkeletonTemplate.bind({})"
+                },
+                {
+                    "name": "SkeletonTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tabs/tabs.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
+                },
+                {
+                    "name": "TabheaderGroup",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tabs/tabs.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "TabHeaderGroupTemplate.bind({})"
+                },
+                {
+                    "name": "TabHeaderGroupTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tabs/tabs.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/pagination/stories/pagination.component.ts\n\t\t-->\n\t\t<app-header-group\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t[isNavigation]=\"isNavigation\">\n\t\t</app-header-group>\n\t`\n})"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tabs/tabs.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
+                },
+                {
+                    "name": "With",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tabs/tabs.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "WithTemplate.bind({})"
+                },
+                {
+                    "name": "WithTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tabs/tabs.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<ng-template #customTabs let-item>\n\t\t\t{{item ? item.name : \"wait for it\"}}\n\t\t</ng-template>\n\t\t<ng-template #iconTab>\n\t\t\t<div style=\"height: 14px;\">\n\t\t\t\tSomething custom\n\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n\t\t\t\tstyle=\"height: 14px; width: 14px; fill: #3d70b2;\">\n\t\t\t\t\t<path d=\"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z\"></path>\n\t\t\t\t\t<path d=\"M9 13H7V7h2z\"></path>\n\t\t\t\t\t<path d=\"M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab\n\t\t\t\t*ngFor=\"let item of data; let i = index;\"\n\t\t\t\t[heading]=\"customTabs\"\n\t\t\t\ttitle=\"Tab Content\"\n\t\t\t\t[context]=\"item\">\n\t\t\t\tTab Content {{i + 1}}\n\t\t\t</cds-tab>\n\t\t\t<cds-tab [heading]=\"iconTab\" title=\"Custom tab content\">Tab Content Custom</cds-tab>\n\t\t</cds-tabs>\n\t`\n})"
+                }
+            ],
+            "src/tag/tag.stories.ts": [
+                {
+                    "name": "Basic",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tag/tag.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "Filter",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tag/tag.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "FilteredTemplate.bind({})"
+                },
+                {
+                    "name": "FilteredTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tag/tag.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-filter\n\t\t\t[type]=\"type\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\ttitle=\"Filter\"\n\t\t\tcloseButtonLabel=\"Clear\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tFiltered\n\t\t</cds-tag-filter>\n\t`\n})"
+                },
+                {
+                    "name": "OperationalTag",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tag/tag.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "OperationalTagTemplate.bind({})"
+                },
+                {
+                    "name": "OperationalTagTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tag/tag.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-operational\n\t\t\ttype=\"cyan\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tOperational\n\t\t</cds-tag-operational>\n\n\n\t\t<div\n\t\t\tcdsPopover\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[highContrast]=\"true\">\n\t\t\t<cds-tag-operational\n\t\t\t\t[type]=\"type\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t(click)=\"isOpen = !isOpen\">\n\t\t\t\t<div cdsTagIcon>\n\t\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t\t</div>\n\t\t\t\tOperational w/ popover\n\t\t\t</cds-tag-operational>\n\t\t\t<cds-popover-content>\n\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\tTag 1 name <br>\n\t\t\t\t\tTag 2 name <br>\n\t\t\t\t\tTag 3 name <br>\n\t\t\t\t\tTag 4 name <br>\n\t\t\t\t\t<cds-tag type=\"green\">Tag 5 name</cds-tag>\n\t\t\t\t</div>\n\t\t\t</cds-popover-content>\n\t\t</div>\n\t`,\n\tstyles: [\n\t\t`.popover-content {\n\t\t\tline-height: 1.5;\n\t\t\tpadding: 1rem;\n\t\t\tfont-size: 14px;\n\t\t}`\n\t]\n})"
+                },
+                {
+                    "name": "SelectedTag",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tag/tag.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "SelectedTagTemplate.bind({})"
+                },
+                {
+                    "name": "SelectedTagTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tag/tag.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-selectable\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[selected]=\"selected\"\n\t\t\t(selectedChange)=\"selectedChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tSelectable\n\t\t</cds-tag-selectable>\n\t`\n})"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/tag/tag.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag\n\t\t\t[type]=\"type\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t\t<div cdsTagIcon>\n\t\t\t\t<svg ibmIcon=\"settings\" size=\"16\"></svg>\n\t\t\t</div>\n\t\t\tRead only\n\t\t</cds-tag>\n\t`\n})"
+                }
+            ],
             "src/theme/theme.stories.ts": [
                 {
                     "name": "Basic",
@@ -85216,6 +86562,19 @@
                     "kind": 192
                 }
             ],
+            "src/combo-button/combo-button.component.ts": [
+                {
+                    "name": "ComboButtonPlacement",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\"",
+                    "file": "src/combo-button/combo-button.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 192
+                }
+            ],
             "src/utils/types.ts": [
                 {
                     "name": "EventHandler",
@@ -85242,6 +86601,19 @@
                     "kind": 192
                 }
             ],
+            "src/menu-button/menu-button.component.ts": [
+                {
+                    "name": "MenuButtonPlacement",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "\"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\"",
+                    "file": "src/menu-button/menu-button.component.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 192
+                }
+            ],
             "src/notification/notification-content.interface.ts": [
                 {
                     "name": "NotificationType",
@@ -85931,6 +87303,35 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/combo-button/combo-button.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "ComboButtonComponent",
+                "coveragePercent": 22,
+                "coverageCount": "6/27",
+                "status": "low"
+            },
+            {
+                "filePath": "src/combo-button/combo-button.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Basic",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/combo-button/combo-button.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/combobox/combobox.component.ts",
                 "type": "component",
@@ -86477,7 +87878,7 @@
                 "linktype": "component",
                 "name": "ContextMenuItemComponent",
                 "coveragePercent": 0,
-                "coverageCount": "0/39",
+                "coverageCount": "0/43",
                 "status": "low"
             },
             {
@@ -86494,8 +87895,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "ContextMenuComponent",
-                "coveragePercent": 5,
-                "coverageCount": "1/18",
+                "coveragePercent": 11,
+                "coverageCount": "2/17",
                 "status": "low"
             },
             {
@@ -86518,6 +87919,15 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/context-menu/context-menu.types.ts",
+                "type": "interface",
+                "linktype": "interface",
+                "name": "ItemClickEvent",
+                "coveragePercent": 0,
+                "coverageCount": "0/6",
+                "status": "low"
+            },
             {
                 "filePath": "src/datepicker-input/datepicker-input.component.ts",
                 "type": "component",
@@ -88204,6 +89614,35 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/menu-button/menu-button.component.ts",
+                "type": "component",
+                "linktype": "component",
+                "name": "MenuButtonComponent",
+                "coveragePercent": 23,
+                "coverageCount": "5/21",
+                "status": "low"
+            },
+            {
+                "filePath": "src/menu-button/menu-button.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Basic",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/menu-button/menu-button.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Template",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/modal/alert-modal.component.ts",
                 "type": "component",