carbon-components-angular 5.57.8 → 5.58.1

package/docs/documentation.json

@@ -19062,7 +19062,7 @@
         },
         {
             "name": "ActionableNotification",
-            "id": "component-ActionableNotification-57714382cfdef67a6be498b98366423e6cc43d51076620586300e8a374d103c10aa3214323b7015e2403c434cfd677f5e4de45bea20b25105eb746735eb45ebf",
+            "id": "component-ActionableNotification-c46fe8cda2f79f9e50aaa8d1e32cc7f8b50de98e8223db63149ecea636582ad9e501dba4f1f37c2214918aa764740b293ea0408c112facbbff8c7a693705edc8",
             "file": "src/notification/actionable-notification.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -19072,7 +19072,7 @@
             "selector": "cds-actionable-notification, ibm-actionable-notification",
             "styleUrls": [],
             "styles": [],
-            "template": "<div class=\"cds--actionable-notification__details\">\n\t<svg\n\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\tsize=\"20\"\n\t\t*ngIf=\"notificationObj.type\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--inline-notification__icon': notificationObj.variant === 'inline',\n\t\t\t'cds--toast-notification__icon': notificationObj.variant === 'toast'\n\t\t}\"\n\t\tclass=\"cds--actionable-notification__icon\">\n\t</svg>\n\t<div class=\"cds--actionable-notification__text-wrapper\">\n\t\t<div class=\"cds--actionable-notification__content\">\n\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableTitle [innerHTML]=\"notificationObj.title\"></div>\n\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableSubtitle>\n\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t<ng-container *ngFor=\"let link of notificationObj.links\">\n\t\t\t\t\t<a cdsLink [href]=\"link.href\">{{link.text}}</a>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *ngIf=\"!notificationObj.actionsTemplate\">\n\t<button\n\t\t*ngFor=\"let action of notificationObj.actions\"\n\t\t(click)=\"onClick(action, $event)\"\n\t\t[cdsButton]=\"notificationObj.variant === 'inline' ? 'ghost' : 'tertiary'\"\n\t\tsize=\"sm\"\n\t\tcdsActionableButton>\n\t\t{{action.text}}\n\t</button>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"notificationObj.actionsTemplate; context: { $implicit: notificationObj }\"></ng-container>\n<button\n\t*ngIf=\"!isCloseHidden\"\n\t(click)=\"onClose()\"\n\tclass=\"cds--actionable-notification__close-button\"\n\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\ttype=\"button\">\n\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--actionable-notification__close-icon\"></svg>\n</button>\n\t",
+            "template": "<div class=\"cds--actionable-notification__details\">\n\t<svg\n\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\tsize=\"20\"\n\t\t*ngIf=\"notificationObj.type\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--inline-notification__icon': notificationObj.variant === 'inline',\n\t\t\t'cds--toast-notification__icon': notificationObj.variant === 'toast'\n\t\t}\"\n\t\tclass=\"cds--actionable-notification__icon\">\n\t</svg>\n\t<div class=\"cds--actionable-notification__text-wrapper\">\n\t\t<div class=\"cds--actionable-notification__content\">\n\t\t\t<div\n\t\t\t\tcdsActionableTitle\n\t\t\t\t*ngIf=\"!notificationObj.template\"\n\t\t\t\t[id]=\"notificationID\"\n\t\t\t\t[innerHTML]=\"notificationObj.title\">\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableSubtitle>\n\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t<ng-container *ngFor=\"let link of notificationObj.links\">\n\t\t\t\t\t<a cdsLink [href]=\"link.href\">{{link.text}}</a>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n\t\t</div>\n\t</div>\n</div>\n<ng-container *ngIf=\"!notificationObj.actionsTemplate\">\n\t<button\n\t\t*ngFor=\"let action of notificationObj.actions\"\n\t\t(click)=\"onClick(action, $event)\"\n\t\t[cdsButton]=\"notificationObj.variant === 'inline' ? 'ghost' : 'tertiary'\"\n\t\tsize=\"sm\"\n\t\tcdsActionableButton>\n\t\t{{action.text}}\n\t</button>\n</ng-container>\n<ng-container *ngTemplateOutlet=\"notificationObj.actionsTemplate; context: { $implicit: notificationObj }\"></ng-container>\n<button\n\t*ngIf=\"!isCloseHidden\"\n\t(click)=\"onClose()\"\n\tclass=\"cds--actionable-notification__close-button\"\n\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\ttype=\"button\">\n\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--actionable-notification__close-icon\"></svg>\n</button>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -19083,7 +19083,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCan have `type`, `title`, and `message` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\n`message` is the message to display\n",
                     "description": "<p>Can have <code>type</code>, <code>title</code>, and <code>message</code> members.</p>\n<p><code>type</code> can be one of <code>&quot;error&quot;</code>, <code>&quot;info&quot;</code>, <code>&quot;info-square&quot;</code>, <code>&quot;warning&quot;</code>, <code>&quot;warning-alt&quot;</code>, or <code>&quot;success&quot;</code></p>\n<p><code>message</code> is the message to display</p>\n",
-                    "line": 75,
+                    "line": 80,
                     "type": "ActionableContent",
                     "decorators": []
                 }
@@ -19112,7 +19112,7 @@
                     "type": "object",
                     "optional": false,
                     "description": "<p>Set default variant &amp; role, alternatives can be provided through notificationObj property</p>\n",
-                    "line": 100,
+                    "line": 106,
                     "rawdescription": "\n\nSet default variant & role, alternatives can be provided through notificationObj property\n"
                 },
                 {
@@ -19123,7 +19123,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 86,
+                    "line": 92,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -19136,17 +19136,27 @@
                 },
                 {
                     "name": "notificationID",
-                    "defaultValue": "`notification-${ActionableNotification.notificationCount++}`",
+                    "defaultValue": "`actionable-notification-${ActionableNotification.notificationCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 85,
+                    "line": 90
+                },
+                {
+                    "name": "notificationLabel",
+                    "defaultValue": "this.notificationID",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 91,
                     "decorators": [
                         {
                             "name": "HostBinding",
-                            "stringifiedArguments": "'attr.id'"
+                            "stringifiedArguments": "'attr.aria-labelledBy'"
                         }
                     ],
                     "modifierKind": [
@@ -19262,11 +19272,11 @@
             "deprecationMessage": "",
             "hostBindings": [
                 {
-                    "name": "attr.id",
-                    "defaultValue": "`notification-${ActionableNotification.notificationCount++}`",
+                    "name": "attr.aria-labelledBy",
+                    "defaultValue": "this.notificationID",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 85,
+                    "line": 91,
                     "type": "string",
                     "decorators": []
                 },
@@ -19275,7 +19285,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 86,
+                    "line": 92,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -19283,7 +19293,7 @@
                     "name": "class.cds--actionable-notification--error",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 88,
+                    "line": 94,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -19291,7 +19301,7 @@
                     "name": "class.cds--actionable-notification--hide-close-button",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 95,
+                    "line": 101,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -19299,7 +19309,7 @@
                     "name": "class.cds--actionable-notification--info",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 89,
+                    "line": 95,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -19307,7 +19317,7 @@
                     "name": "class.cds--actionable-notification--info-square",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 90,
+                    "line": 96,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -19315,7 +19325,7 @@
                     "name": "class.cds--actionable-notification--low-contrast",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 94,
+                    "line": 100,
                     "type": "any",
                     "decorators": []
                 },
@@ -19323,7 +19333,7 @@
                     "name": "class.cds--actionable-notification--success",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 91,
+                    "line": 97,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -19331,7 +19341,7 @@
                     "name": "class.cds--actionable-notification--toast",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 87,
+                    "line": 93,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -19339,7 +19349,7 @@
                     "name": "class.cds--actionable-notification--warning",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 92,
+                    "line": 98,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -19347,7 +19357,7 @@
                     "name": "class.cds--actionable-notification--warning-alt",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 93,
+                    "line": 99,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -19371,7 +19381,7 @@
             "description": "<p>Actionable notification allows for interactive elements within a notification. There are two variants offered, inline &amp; toast.</p>\n<p><a href=\"../../?path=/story/components-notification--actionable-notification\">See demo</a></p>\n",
             "rawdescription": "\n\nActionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast.\n\n[See demo](../../?path=/story/components-notification--actionable-notification)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { isObservable, of } from \"rxjs\";\nimport { ActionableContent, NotificationVariants } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Actionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast.\n *\n * [See demo](../../?path=/story/components-notification--actionable-notification)\n */\n@Component({\n\tselector: \"cds-actionable-notification, ibm-actionable-notification\",\n\ttemplate: `\n\t\t<div class=\"cds--actionable-notification__details\">\n\t\t\t<svg\n\t\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\t\tsize=\"20\"\n\t\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--inline-notification__icon': notificationObj.variant === 'inline',\n\t\t\t\t\t'cds--toast-notification__icon': notificationObj.variant === 'toast'\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--actionable-notification__icon\">\n\t\t\t</svg>\n\t\t\t<div class=\"cds--actionable-notification__text-wrapper\">\n\t\t\t\t<div class=\"cds--actionable-notification__content\">\n\t\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableTitle [innerHTML]=\"notificationObj.title\"></div>\n\t\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableSubtitle>\n\t\t\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t\t\t<ng-container *ngFor=\"let link of notificationObj.links\">\n\t\t\t\t\t\t\t<a cdsLink [href]=\"link.href\">{{link.text}}</a>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-container *ngIf=\"!notificationObj.actionsTemplate\">\n\t\t\t<button\n\t\t\t\t*ngFor=\"let action of notificationObj.actions\"\n\t\t\t\t(click)=\"onClick(action, $event)\"\n\t\t\t\t[cdsButton]=\"notificationObj.variant === 'inline' ? 'ghost' : 'tertiary'\"\n\t\t\t\tsize=\"sm\"\n\t\t\t\tcdsActionableButton>\n\t\t\t\t{{action.text}}\n\t\t\t</button>\n\t\t</ng-container>\n\t\t<ng-container *ngTemplateOutlet=\"notificationObj.actionsTemplate; context: { $implicit: notificationObj }\"></ng-container>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"cds--actionable-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--actionable-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class ActionableNotification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): ActionableContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: ActionableContent) {\n\t\tif (obj.closeLabel && !isObservable(obj.closeLabel)) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\t@HostBinding(\"attr.id\") notificationID = `notification-${ActionableNotification.notificationCount++}`;\n\t@HostBinding(\"class.cds--actionable-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--actionable-notification--toast\") get toastVariant() { return this.notificationObj.variant === \"toast\"; }\n\t@HostBinding(\"class.cds--actionable-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--actionable-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--actionable-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--actionable-notification--hide-close-button\") get isCloseHidden() { return !this._notificationObj.showClose; }\n\n\t/**\n\t * Set default variant & role, alternatives can be provided through notificationObj property\n\t */\n\tdefaultNotificationObj = {\n\t\t...this.defaultNotificationObj,\n\t\tvariant: \"inline\" as NotificationVariants,\n\t\trole: \"alertdialog\"\n\t};\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { isObservable, of } from \"rxjs\";\nimport { ActionableContent, NotificationVariants } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Actionable notification allows for interactive elements within a notification. There are two variants offered, inline & toast.\n *\n * [See demo](../../?path=/story/components-notification--actionable-notification)\n */\n@Component({\n\tselector: \"cds-actionable-notification, ibm-actionable-notification\",\n\ttemplate: `\n\t\t<div class=\"cds--actionable-notification__details\">\n\t\t\t<svg\n\t\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\t\tsize=\"20\"\n\t\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--inline-notification__icon': notificationObj.variant === 'inline',\n\t\t\t\t\t'cds--toast-notification__icon': notificationObj.variant === 'toast'\n\t\t\t\t}\"\n\t\t\t\tclass=\"cds--actionable-notification__icon\">\n\t\t\t</svg>\n\t\t\t<div class=\"cds--actionable-notification__text-wrapper\">\n\t\t\t\t<div class=\"cds--actionable-notification__content\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tcdsActionableTitle\n\t\t\t\t\t\t*ngIf=\"!notificationObj.template\"\n\t\t\t\t\t\t[id]=\"notificationID\"\n\t\t\t\t\t\t[innerHTML]=\"notificationObj.title\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsActionableSubtitle>\n\t\t\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t\t\t<ng-container *ngFor=\"let link of notificationObj.links\">\n\t\t\t\t\t\t\t<a cdsLink [href]=\"link.href\">{{link.text}}</a>\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj }\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<ng-container *ngIf=\"!notificationObj.actionsTemplate\">\n\t\t\t<button\n\t\t\t\t*ngFor=\"let action of notificationObj.actions\"\n\t\t\t\t(click)=\"onClick(action, $event)\"\n\t\t\t\t[cdsButton]=\"notificationObj.variant === 'inline' ? 'ghost' : 'tertiary'\"\n\t\t\t\tsize=\"sm\"\n\t\t\t\tcdsActionableButton>\n\t\t\t\t{{action.text}}\n\t\t\t</button>\n\t\t</ng-container>\n\t\t<ng-container *ngTemplateOutlet=\"notificationObj.actionsTemplate; context: { $implicit: notificationObj }\"></ng-container>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"cds--actionable-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--actionable-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class ActionableNotification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): ActionableContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: ActionableContent) {\n\t\tif (obj.closeLabel && !isObservable(obj.closeLabel)) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\tnotificationID = `actionable-notification-${ActionableNotification.notificationCount++}`;\n\t@HostBinding(\"attr.aria-labelledBy\") notificationLabel = this.notificationID;\n\t@HostBinding(\"class.cds--actionable-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--actionable-notification--toast\") get toastVariant() { return this.notificationObj.variant === \"toast\"; }\n\t@HostBinding(\"class.cds--actionable-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--actionable-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--actionable-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--actionable-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--actionable-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--actionable-notification--hide-close-button\") get isCloseHidden() { return !this._notificationObj.showClose; }\n\n\t/**\n\t * Set default variant & role, alternatives can be provided through notificationObj property\n\t */\n\tdefaultNotificationObj = {\n\t\t...this.defaultNotificationObj,\n\t\tvariant: \"inline\" as NotificationVariants,\n\t\trole: \"alertdialog\"\n\t};\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -19394,7 +19404,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 104,
+                "line": 110,
                 "jsdoctags": [
                     {
                         "name": "notificationDisplayService",
@@ -19436,7 +19446,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 78,
+                        "line": 83,
                         "jsdoctags": [
                             {
                                 "name": "obj",
@@ -19453,7 +19463,7 @@
                         "name": "notificationObj",
                         "type": "",
                         "returnType": "ActionableContent",
-                        "line": 75,
+                        "line": 80,
                         "rawdescription": "\n\nCan have `type`, `title`, and `message` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\n`message` is the message to display\n",
                         "description": "<p>Can have <code>type</code>, <code>title</code>, and <code>message</code> members.</p>\n<p><code>type</code> can be one of <code>&quot;error&quot;</code>, <code>&quot;info&quot;</code>, <code>&quot;info-square&quot;</code>, <code>&quot;warning&quot;</code>, <code>&quot;warning-alt&quot;</code>, or <code>&quot;success&quot;</code></p>\n<p><code>message</code> is the message to display</p>\n"
                     }
@@ -19464,7 +19474,7 @@
                         "name": "toastVariant",
                         "type": "",
                         "returnType": "",
-                        "line": 87
+                        "line": 93
                     }
                 },
                 "isError": {
@@ -19473,7 +19483,7 @@
                         "name": "isError",
                         "type": "",
                         "returnType": "",
-                        "line": 88
+                        "line": 94
                     }
                 },
                 "isInfo": {
@@ -19482,7 +19492,7 @@
                         "name": "isInfo",
                         "type": "",
                         "returnType": "",
-                        "line": 89
+                        "line": 95
                     }
                 },
                 "isInfoSquare": {
@@ -19491,7 +19501,7 @@
                         "name": "isInfoSquare",
                         "type": "",
                         "returnType": "",
-                        "line": 90
+                        "line": 96
                     }
                 },
                 "isSuccess": {
@@ -19500,7 +19510,7 @@
                         "name": "isSuccess",
                         "type": "",
                         "returnType": "",
-                        "line": 91
+                        "line": 97
                     }
                 },
                 "isWarning": {
@@ -19509,7 +19519,7 @@
                         "name": "isWarning",
                         "type": "",
                         "returnType": "",
-                        "line": 92
+                        "line": 98
                     }
                 },
                 "isWarningAlt": {
@@ -19518,7 +19528,7 @@
                         "name": "isWarningAlt",
                         "type": "",
                         "returnType": "",
-                        "line": 93
+                        "line": 99
                     }
                 },
                 "isLowContrast": {
@@ -19527,7 +19537,7 @@
                         "name": "isLowContrast",
                         "type": "",
                         "returnType": "",
-                        "line": 94
+                        "line": 100
                     }
                 },
                 "isCloseHidden": {
@@ -19536,7 +19546,7 @@
                         "name": "isCloseHidden",
                         "type": "",
                         "returnType": "",
-                        "line": 95
+                        "line": 101
                     }
                 }
             }
@@ -39104,7 +39114,7 @@
         },
         {
             "name": "Notification",
-            "id": "component-Notification-954b6bd2010556ddca9849bd2d2c31fc4dae8f63a7b6d970ce5063dcea8f018a8b9a6592d6df4aa7a2a004174cac08bbc92389a288e88e002161b69f8c794101",
+            "id": "component-Notification-07629cc065856bfd8dabc21a6b334615def759c00da1054674f13666364d961e594cc4958734ed251dac15e7c424acef301f2128b847a00f6701c8dd09be1ed4",
             "file": "src/notification/notification.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -39114,7 +39124,7 @@
             "selector": "cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification",
             "styleUrls": [],
             "styles": [],
-            "template": "<div class=\"cds--inline-notification__details\">\n\t<svg\n\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\tsize=\"20\"\n\t\t*ngIf=\"notificationObj.type\"\n\t\tclass=\"cds--inline-notification__icon\">\n\t</svg>\n\t<div class=\"cds--inline-notification__text-wrapper\">\n\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationTitle [innerHTML]=\"notificationObj.title\"></div>\n\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationSubtitle>\n\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t</div>\n\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj}\"></ng-container>\n\t</div>\n</div>\n<button\n\t*ngIf=\"!isCloseHidden\"\n\t(click)=\"onClose()\"\n\tclass=\"cds--inline-notification__close-button\"\n\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\ttype=\"button\">\n\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--inline-notification__close-icon\"></svg>\n</button>\n\t",
+            "template": "<div class=\"cds--inline-notification__details\">\n\t<svg\n\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\tsize=\"20\"\n\t\t*ngIf=\"notificationObj.type\"\n\t\tclass=\"cds--inline-notification__icon\">\n\t</svg>\n\t<div class=\"cds--inline-notification__text-wrapper\">\n\t\t<div\n\t\t\tcdsNotificationTitle\n\t\t\t*ngIf=\"!notificationObj.template\"\n\t\t\t[innerHTML]=\"notificationObj.title\"\n\t\t\t[id]=\"notificationID\">\n\t\t</div>\n\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationSubtitle>\n\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t</div>\n\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj}\"></ng-container>\n\t</div>\n</div>\n<button\n\t*ngIf=\"!isCloseHidden\"\n\t(click)=\"onClose()\"\n\tclass=\"cds--inline-notification__close-button\"\n\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\ttype=\"button\">\n\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--inline-notification__close-icon\"></svg>\n</button>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -39125,7 +39135,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCan have `type`, `title`, and `message` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\n`message` is the message to display\n",
                     "description": "<p>Can have <code>type</code>, <code>title</code>, and <code>message</code> members.</p>\n<p><code>type</code> can be one of <code>&quot;error&quot;</code>, <code>&quot;info&quot;</code>, <code>&quot;info-square&quot;</code>, <code>&quot;warning&quot;</code>, <code>&quot;warning-alt&quot;</code>, or <code>&quot;success&quot;</code></p>\n<p><code>message</code> is the message to display</p>\n",
-                    "line": 55,
+                    "line": 60,
                     "type": "NotificationContent",
                     "decorators": []
                 }
@@ -39154,7 +39164,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 66,
+                    "line": 72,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -39173,11 +39183,21 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 65,
+                    "line": 70
+                },
+                {
+                    "name": "notificationLabel",
+                    "defaultValue": "this.notificationID",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 71,
                     "decorators": [
                         {
                             "name": "HostBinding",
-                            "stringifiedArguments": "'attr.id'"
+                            "stringifiedArguments": "'attr.aria-labelledBy'"
                         }
                     ],
                     "modifierKind": [
@@ -39293,11 +39313,11 @@
             "deprecationMessage": "",
             "hostBindings": [
                 {
-                    "name": "attr.id",
-                    "defaultValue": "`notification-${Notification.notificationCount++}`",
+                    "name": "attr.aria-labelledBy",
+                    "defaultValue": "this.notificationID",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 65,
+                    "line": 71,
                     "type": "string",
                     "decorators": []
                 },
@@ -39306,7 +39326,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 66,
+                    "line": 72,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -39314,7 +39334,7 @@
                     "name": "class.cds--inline-notification--error",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 67,
+                    "line": 73,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -39322,7 +39342,7 @@
                     "name": "class.cds--inline-notification--hide-close-button",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 74,
+                    "line": 80,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -39330,7 +39350,7 @@
                     "name": "class.cds--inline-notification--info",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 68,
+                    "line": 74,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -39338,7 +39358,7 @@
                     "name": "class.cds--inline-notification--info-square",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 69,
+                    "line": 75,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -39346,7 +39366,7 @@
                     "name": "class.cds--inline-notification--low-contrast",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 73,
+                    "line": 79,
                     "type": "any",
                     "decorators": []
                 },
@@ -39354,7 +39374,7 @@
                     "name": "class.cds--inline-notification--success",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 70,
+                    "line": 76,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -39362,7 +39382,7 @@
                     "name": "class.cds--inline-notification--warning",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 71,
+                    "line": 77,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -39370,7 +39390,7 @@
                     "name": "class.cds--inline-notification--warning-alt",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 72,
+                    "line": 78,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -39394,7 +39414,7 @@
             "description": "<p>Notification messages are displayed toward the top of the UI and do not interrupt user’s work.</p>\n<p><a href=\"../../?path=/story/components-notification--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nNotification messages are displayed toward the top of the UI and do not interrupt user’s work.\n\n[See demo](../../?path=/story/components-notification--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { NotificationContent } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { isObservable, of } from \"rxjs\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Notification messages are displayed toward the top of the UI and do not interrupt user’s work.\n *\n * [See demo](../../?path=/story/components-notification--basic)\n */\n@Component({\n\tselector: \"cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification\",\n\ttemplate: `\n\t\t<div class=\"cds--inline-notification__details\">\n\t\t\t<svg\n\t\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\t\tsize=\"20\"\n\t\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\t\tclass=\"cds--inline-notification__icon\">\n\t\t\t</svg>\n\t\t\t<div class=\"cds--inline-notification__text-wrapper\">\n\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationTitle [innerHTML]=\"notificationObj.title\"></div>\n\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationSubtitle>\n\t\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t</div>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj}\"></ng-container>\n\t\t\t</div>\n\t\t</div>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"cds--inline-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--inline-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class Notification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): NotificationContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: NotificationContent) {\n\t\tif (obj.closeLabel && !isObservable(obj.closeLabel)) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\t@HostBinding(\"attr.id\") notificationID = `notification-${Notification.notificationCount++}`;\n\t@HostBinding(\"class.cds--inline-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--inline-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--inline-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--inline-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--inline-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--inline-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--inline-notification--hide-close-button\") get isCloseHidden() { return !this.notificationObj.showClose; }\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tHostBinding\n} from \"@angular/core\";\n\nimport { NotificationContent } from \"./notification-content.interface\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { NotificationDisplayService } from \"./notification-display.service\";\nimport { isObservable, of } from \"rxjs\";\nimport { BaseNotification } from \"./base-notification.component\";\n\n/**\n * Notification messages are displayed toward the top of the UI and do not interrupt user’s work.\n *\n * [See demo](../../?path=/story/components-notification--basic)\n */\n@Component({\n\tselector: \"cds-notification, cds-inline-notification, ibm-notification, ibm-inline-notification\",\n\ttemplate: `\n\t\t<div class=\"cds--inline-notification__details\">\n\t\t\t<svg\n\t\t\t\t[cdsIcon]=\"iconDictionary[notificationObj.type]\"\n\t\t\t\tsize=\"20\"\n\t\t\t\t*ngIf=\"notificationObj.type\"\n\t\t\t\tclass=\"cds--inline-notification__icon\">\n\t\t\t</svg>\n\t\t\t<div class=\"cds--inline-notification__text-wrapper\">\n\t\t\t\t<div\n\t\t\t\t\tcdsNotificationTitle\n\t\t\t\t\t*ngIf=\"!notificationObj.template\"\n\t\t\t\t\t[innerHTML]=\"notificationObj.title\"\n\t\t\t\t\t[id]=\"notificationID\">\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!notificationObj.template\" cdsNotificationSubtitle>\n\t\t\t\t\t<span [innerHTML]=\"notificationObj.message\"></span>\n\t\t\t\t</div>\n\t\t\t\t<ng-container *ngTemplateOutlet=\"notificationObj.template; context: { $implicit: notificationObj}\"></ng-container>\n\t\t\t</div>\n\t\t</div>\n\t\t<button\n\t\t\t*ngIf=\"!isCloseHidden\"\n\t\t\t(click)=\"onClose()\"\n\t\t\tclass=\"cds--inline-notification__close-button\"\n\t\t\t[attr.aria-label]=\"notificationObj.closeLabel | async\"\n\t\t\ttype=\"button\">\n\t\t\t<svg cdsIcon=\"close\" size=\"16\" class=\"cds--inline-notification__close-icon\"></svg>\n\t\t</button>\n\t`\n})\nexport class Notification extends BaseNotification {\n\tprivate static notificationCount = 0;\n\t/**\n\t * Can have `type`, `title`, and `message` members.\n\t *\n\t * `type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\t *\n\t * `message` is the message to display\n\t */\n\t@Input() get notificationObj(): NotificationContent {\n\t\treturn this._notificationObj;\n\t}\n\tset notificationObj(obj: NotificationContent) {\n\t\tif (obj.closeLabel && !isObservable(obj.closeLabel)) {\n\t\t\tobj.closeLabel = of(obj.closeLabel);\n\t\t}\n\t\tthis._notificationObj = Object.assign({}, this.defaultNotificationObj, obj);\n\t}\n\n\tnotificationID = `notification-${Notification.notificationCount++}`;\n\t@HostBinding(\"attr.aria-labelledBy\") notificationLabel = this.notificationID;\n\t@HostBinding(\"class.cds--inline-notification\") notificationClass = true;\n\t@HostBinding(\"class.cds--inline-notification--error\") get isError() { return this.notificationObj.type === \"error\"; }\n\t@HostBinding(\"class.cds--inline-notification--info\") get isInfo() { return this.notificationObj.type === \"info\"; }\n\t@HostBinding(\"class.cds--inline-notification--info-square\") get isInfoSquare() { return this.notificationObj.type === \"info-square\"; }\n\t@HostBinding(\"class.cds--inline-notification--success\") get isSuccess() { return this.notificationObj.type === \"success\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning\") get isWarning() { return this.notificationObj.type === \"warning\"; }\n\t@HostBinding(\"class.cds--inline-notification--warning-alt\") get isWarningAlt() { return this.notificationObj.type === \"warning-alt\"; }\n\t@HostBinding(\"class.cds--inline-notification--low-contrast\") get isLowContrast() { return this.notificationObj.lowContrast; }\n\t@HostBinding(\"class.cds--inline-notification--hide-close-button\") get isCloseHidden() { return !this.notificationObj.showClose; }\n\n\tconstructor(protected notificationDisplayService: NotificationDisplayService, protected i18n: I18n) {\n\t\tsuper(notificationDisplayService, i18n);\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -39417,7 +39437,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 74,
+                "line": 80,
                 "jsdoctags": [
                     {
                         "name": "notificationDisplayService",
@@ -39459,7 +39479,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 58,
+                        "line": 63,
                         "jsdoctags": [
                             {
                                 "name": "obj",
@@ -39476,7 +39496,7 @@
                         "name": "notificationObj",
                         "type": "",
                         "returnType": "NotificationContent",
-                        "line": 55,
+                        "line": 60,
                         "rawdescription": "\n\nCan have `type`, `title`, and `message` members.\n\n`type` can be one of `\"error\"`, `\"info\"`, `\"info-square\"`, `\"warning\"`, `\"warning-alt\"`, or `\"success\"`\n\n`message` is the message to display\n",
                         "description": "<p>Can have <code>type</code>, <code>title</code>, and <code>message</code> members.</p>\n<p><code>type</code> can be one of <code>&quot;error&quot;</code>, <code>&quot;info&quot;</code>, <code>&quot;info-square&quot;</code>, <code>&quot;warning&quot;</code>, <code>&quot;warning-alt&quot;</code>, or <code>&quot;success&quot;</code></p>\n<p><code>message</code> is the message to display</p>\n"
                     }
@@ -39487,7 +39507,7 @@
                         "name": "isError",
                         "type": "",
                         "returnType": "",
-                        "line": 67
+                        "line": 73
                     }
                 },
                 "isInfo": {
@@ -39496,7 +39516,7 @@
                         "name": "isInfo",
                         "type": "",
                         "returnType": "",
-                        "line": 68
+                        "line": 74
                     }
                 },
                 "isInfoSquare": {
@@ -39505,7 +39525,7 @@
                         "name": "isInfoSquare",
                         "type": "",
                         "returnType": "",
-                        "line": 69
+                        "line": 75
                     }
                 },
                 "isSuccess": {
@@ -39514,7 +39534,7 @@
                         "name": "isSuccess",
                         "type": "",
                         "returnType": "",
-                        "line": 70
+                        "line": 76
                     }
                 },
                 "isWarning": {
@@ -39523,7 +39543,7 @@
                         "name": "isWarning",
                         "type": "",
                         "returnType": "",
-                        "line": 71
+                        "line": 77
                     }
                 },
                 "isWarningAlt": {
@@ -39532,7 +39552,7 @@
                         "name": "isWarningAlt",
                         "type": "",
                         "returnType": "",
-                        "line": 72
+                        "line": 78
                     }
                 },
                 "isLowContrast": {
@@ -39541,7 +39561,7 @@
                         "name": "isLowContrast",
                         "type": "",
                         "returnType": "",
-                        "line": 73
+                        "line": 79
                     }
                 },
                 "isCloseHidden": {
@@ -39550,7 +39570,7 @@
                         "name": "isCloseHidden",
                         "type": "",
                         "returnType": "",
-                        "line": 74
+                        "line": 80
                     }
                 }
             }
@@ -69134,7 +69154,7 @@
         },
         {
             "name": "TooltipDefinition",
-            "id": "component-TooltipDefinition-497ddf91eb2cc40f47373ab8f5b2a360a01346eed31f64a9e6f25d4b96c646a0318b773a06ca987b7f96f518e9c37fbf380f9edfcce919c0a5ee220b32836c08",
+            "id": "component-TooltipDefinition-899b9c571095591af6d58c90461a9bed20b49e3dc059c1dd2a7a06fa0837f555aec1039a1dc914d76917a9860bbcb239a9f91674ba21f6beec05a7835a7d8abb",
             "file": "src/tooltip/definition-tooptip.component.ts",
             "changeDetection": "ChangeDetectionStrategy.OnPush",
             "encapsulation": [],
@@ -69145,7 +69165,7 @@
             "selector": "cds-tooltip-definition, ibm-tooltip-definition",
             "styleUrls": [],
             "styles": [],
-            "template": "<button\n\tclass=\"cds--definition-term\"\n\t[attr.aria-controls]=\"id\"\n\t[attr.aria-expanded]=\"isOpen\"\n\t(blur)=\"onBlur($event)\"\n\t(click)=\"onClick($event)\"\n\ttype=\"button\">\n\t<ng-content></ng-content>\n</button>\n<span\n\t*ngIf=\"description\"\n\tclass=\"cds--popover\"\n\t[id]=\"id\"\n\t[attr.aria-hidden]=\"isOpen\"\n\trole=\"tooltip\">\n\t<span class=\"cds--popover-content cds--definition-tooltip\">\n\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"></ng-template>\n\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t</span>\n\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n</span>\n\t",
+            "template": "<button\n\tclass=\"cds--definition-term\"\n\t[attr.aria-controls]=\"id\"\n\t[attr.aria-expanded]=\"isOpen\"\n\t[attr.aria-describedby]=\"isOpen ? id : null\"\n\t(blur)=\"onBlur($event)\"\n\t(click)=\"onClick($event)\"\n\ttype=\"button\">\n\t<ng-content></ng-content>\n</button>\n<span\n\t*ngIf=\"description\"\n\tclass=\"cds--popover\"\n\t[id]=\"id\"\n\t[attr.aria-hidden]=\"!isOpen\"\n\trole=\"tooltip\">\n\t<span class=\"cds--popover-content cds--definition-tooltip\" aria-live=\"polite\">\n\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"></ng-template>\n\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t</span>\n\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n</span>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -69156,7 +69176,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe string or template content to be exposed by the tooltip.\n",
                     "description": "<p>The string or template content to be exposed by the tooltip.</p>\n",
-                    "line": 59,
+                    "line": 60,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -69165,17 +69185,26 @@
                     "defaultValue": "`tooltip-definition-${TooltipDefinition.tooltipCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 54,
+                    "line": 55,
                     "type": "string",
                     "decorators": []
                 },
+                {
+                    "name": "openOnHover",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 66,
+                    "type": "boolean",
+                    "decorators": []
+                },
                 {
                     "name": "templateContext",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOptional data for templates passed as implicit context\n",
                     "description": "<p>Optional data for templates passed as implicit context</p>\n",
-                    "line": 63,
+                    "line": 64,
                     "type": "any",
                     "decorators": []
                 },
@@ -69311,7 +69340,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "",
-                    "line": 52,
+                    "line": 53,
                     "modifierKind": [
                         126
                     ]
@@ -69382,7 +69411,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 85,
+                    "line": 88,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -69419,7 +69448,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 97,
+                    "line": 112,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -69437,6 +69466,43 @@
                         }
                     ]
                 },
+                {
+                    "name": "mouseenter",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 101,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "decorators": [
+                        {
+                            "name": "HostListener",
+                            "stringifiedArguments": "'mouseenter', ['$event']"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ],
+                    "jsdoctags": [
+                        {
+                            "name": "event",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
                 {
                     "name": "mouseleave",
                     "args": [
@@ -69450,7 +69516,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 93,
+                    "line": 96,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -69487,7 +69553,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 76,
+                    "line": 79,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -69515,7 +69581,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 80,
+                    "line": 83,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -69530,6 +69596,43 @@
                         }
                     ]
                 },
+                {
+                    "name": "onFocus",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 108,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "decorators": [
+                        {
+                            "name": "HostListener",
+                            "stringifiedArguments": "'focusin', ['$event']"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ],
+                    "jsdoctags": [
+                        {
+                            "name": "event",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
                 {
                     "name": "cleanUp",
                     "args": [],
@@ -69767,6 +69870,23 @@
                 }
             ],
             "hostListeners": [
+                {
+                    "name": "focusin",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "argsDecorator": [
+                        "$event"
+                    ],
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 108
+                },
                 {
                     "name": "keyup",
                     "args": [
@@ -69782,7 +69902,24 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 85
+                    "line": 88
+                },
+                {
+                    "name": "mouseenter",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "argsDecorator": [
+                        "$event"
+                    ],
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 101
                 },
                 {
                     "name": "mouseleave",
@@ -69799,7 +69936,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 93
+                    "line": 96
                 }
             ],
             "standalone": false,
@@ -69807,7 +69944,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { TooltipModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-tooltip-definition--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { TooltipModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-tooltip-definition--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tHostListener,\n\tInput,\n\tNgZone,\n\tRenderer2,\n\tTemplateRef\n} from \"@angular/core\";\nimport { PopoverContainer } from \"carbon-components-angular/popover\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TooltipModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tooltip-definition--basic)\n */\n@Component({\n\tselector: \"cds-tooltip-definition, ibm-tooltip-definition\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<button\n\t\t\tclass=\"cds--definition-term\"\n\t\t\t[attr.aria-controls]=\"id\"\n\t\t\t[attr.aria-expanded]=\"isOpen\"\n\t\t\t(blur)=\"onBlur($event)\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\ttype=\"button\">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t\t<span\n\t\t\t*ngIf=\"description\"\n\t\t\tclass=\"cds--popover\"\n\t\t\t[id]=\"id\"\n\t\t\t[attr.aria-hidden]=\"isOpen\"\n\t\t\trole=\"tooltip\">\n\t\t\t<span class=\"cds--popover-content cds--definition-tooltip\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"></ng-template>\n\t\t\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n\t\t</span>\n\t`\n})\nexport class TooltipDefinition extends PopoverContainer {\n\tstatic tooltipCount = 0;\n\n\t@Input() id = `tooltip-definition-${TooltipDefinition.tooltipCount++}`;\n\n\t/**\n\t * The string or template content to be exposed by the tooltip.\n\t */\n\t@Input() description: string | TemplateRef<any>;\n\t/**\n\t * Optional data for templates passed as implicit context\n\t */\n\t@Input() templateContext: any;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) {\n\t\tsuper(elementRef, ngZone, renderer, changeDetectorRef);\n\t\tthis.highContrast = true;\n\t\tthis.dropShadow = false;\n\t}\n\n\tonBlur(event: Event) {\n\t\tthis.handleChange(false, event);\n\t}\n\n\tonClick(event: Event) {\n\t\tthis.handleChange(!this.isOpen, event);\n\t}\n\n\t@HostListener(\"keyup\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tif (this.isOpen && event.key === \"Escape\") {\n\t\t\tevent.stopPropagation();\n\t\t\tthis.handleChange(false, event);\n\t\t}\n\t}\n\n\t@HostListener(\"mouseleave\", [\"$event\"])\n\tmouseleave(event) {\n\t\tthis.handleChange(false, event);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tHostListener,\n\tInput,\n\tNgZone,\n\tRenderer2,\n\tTemplateRef\n} from \"@angular/core\";\nimport { PopoverContainer } from \"carbon-components-angular/popover\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { TooltipModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-tooltip-definition--basic)\n */\n@Component({\n\tselector: \"cds-tooltip-definition, ibm-tooltip-definition\",\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<button\n\t\t\tclass=\"cds--definition-term\"\n\t\t\t[attr.aria-controls]=\"id\"\n\t\t\t[attr.aria-expanded]=\"isOpen\"\n\t\t\t[attr.aria-describedby]=\"isOpen ? id : null\"\n\t\t\t(blur)=\"onBlur($event)\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\ttype=\"button\">\n\t\t\t<ng-content></ng-content>\n\t\t</button>\n\t\t<span\n\t\t\t*ngIf=\"description\"\n\t\t\tclass=\"cds--popover\"\n\t\t\t[id]=\"id\"\n\t\t\t[attr.aria-hidden]=\"!isOpen\"\n\t\t\trole=\"tooltip\">\n\t\t\t<span class=\"cds--popover-content cds--definition-tooltip\" aria-live=\"polite\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(description)\">{{description}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(description)\" [ngTemplateOutlet]=\"description\" [ngTemplateOutletContext]=\"{ $implicit: templateContext }\"></ng-template>\n\t\t\t\t<span *ngIf=\"autoAlign\" class=\"cds--popover-caret cds--popover--auto-align\"></span>\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!autoAlign\" class=\"cds--popover-caret\"></span>\n\t\t</span>\n\t`\n})\nexport class TooltipDefinition extends PopoverContainer {\n\tstatic tooltipCount = 0;\n\n\t@Input() id = `tooltip-definition-${TooltipDefinition.tooltipCount++}`;\n\n\t/**\n\t * The string or template content to be exposed by the tooltip.\n\t */\n\t@Input() description: string | TemplateRef<any>;\n\t/**\n\t * Optional data for templates passed as implicit context\n\t */\n\t@Input() templateContext: any;\n\n\t@Input() openOnHover = false;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) {\n\t\tsuper(elementRef, ngZone, renderer, changeDetectorRef);\n\t\tthis.highContrast = true;\n\t\tthis.dropShadow = false;\n\t}\n\n\tonBlur(event: Event) {\n\t\tthis.handleChange(false, event);\n\t}\n\n\tonClick(event: Event) {\n\t\tthis.handleChange(!this.isOpen, event);\n\t}\n\n\t@HostListener(\"keyup\", [\"$event\"])\n\thostkeys(event: KeyboardEvent) {\n\t\tif (this.isOpen && event.key === \"Escape\") {\n\t\t\tevent.stopPropagation();\n\t\t\tthis.handleChange(false, event);\n\t\t}\n\t}\n\n\t@HostListener(\"mouseleave\", [\"$event\"])\n\tmouseleave(event) {\n\t\tthis.handleChange(false, event);\n\t}\n\n\t@HostListener(\"mouseenter\", [\"$event\"])\n\tmouseenter(event) {\n\t\tif (this.openOnHover) {\n\t\t\tthis.handleChange(true, event);\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\", [\"$event\"])\n\tonFocus(event) {\n\t\tthis.handleChange(true, event);\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -69842,7 +69979,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 63,
+                "line": 66,
                 "jsdoctags": [
                     {
                         "name": "elementRef",
@@ -74788,7 +74925,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "AutoAlignTemplate",
@@ -75074,7 +75211,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/modal/modal.stories.ts",
+                "file": "src/menu-button/menu-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75084,7 +75221,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/menu-button/menu-button.stories.ts",
+                "file": "src/modal/modal.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75094,7 +75231,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/pagination/pagination-nav.stories.ts",
+                "file": "src/number-input/number.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75104,7 +75241,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/pagination/pagination.stories.ts",
+                "file": "src/pagination/pagination-nav.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75114,7 +75251,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/number-input/number.stories.ts",
+                "file": "src/pagination/pagination.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -77936,51 +78073,51 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/modal/modal.stories.ts",
+                "file": "src/menu-button/menu-button.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/modal/stories/modal.component.ts\n\t\t-->\n\t\t<app-modal-story [modalText]=\"modalText\" [size]=\"size\" [showCloseButton]=\"showCloseButton\"></app-modal-story>\n\t\t<cds-placeholder></cds-placeholder>\n\t`\n})"
+                "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",
                 "subtype": "variable",
-                "file": "src/menu-button/menu-button.stories.ts",
+                "file": "src/modal/modal.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})"
+                "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/modal/stories/modal.component.ts\n\t\t-->\n\t\t<app-modal-story [modalText]=\"modalText\" [size]=\"size\" [showCloseButton]=\"showCloseButton\"></app-modal-story>\n\t\t<cds-placeholder></cds-placeholder>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/pagination/pagination-nav.stories.ts",
+                "file": "src/number-input/number.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/pagination-nav/stories/pagination-nav-story.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[numOfItemsToShow]=\"numOfItemsToShow\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t</app-pagination>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/pagination/pagination.stories.ts",
+                "file": "src/pagination/pagination-nav.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-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[pageInputDisabled]=\"pageInputDisabled\"\n\t\t\t[pagesUnknown]=\"pagesUnknown\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[showPageInput]=\"showPageInput\"\n\t\t\t[skeleton]=\"skeleton\">\n\t\t</app-pagination>\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/pagination/pagination-nav/stories/pagination-nav-story.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[numOfItemsToShow]=\"numOfItemsToShow\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t</app-pagination>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/number-input/number.stories.ts",
+                "file": "src/pagination/pagination.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\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/pagination/stories/pagination.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[pageInputDisabled]=\"pageInputDisabled\"\n\t\t\t[pagesUnknown]=\"pagesUnknown\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[showPageInput]=\"showPageInput\"\n\t\t\t[skeleton]=\"skeleton\">\n\t\t</app-pagination>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -78190,7 +78327,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
             },
             {
                 "name": "Template",
@@ -81189,7 +81326,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"true\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
                     "name": "Basic",
@@ -81209,7 +81346,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"height:3000px\">\n\t\t\tScrolling will update the position of the popover:\n\t\t\t<div style=\"position: absolute; top: 500px; left: 500px;\">\n\t\t\t\t<p>Custom domains direct requests for your apps in this Cloud Foundry organization to a\n\t\t\t\t<cds-tooltip-definition\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[openOnHover]=\"openOnHover\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t(onOpen)=\"onOpen($event)\"\n\t\t\t\t\t(onClose)=\"onClose($event)\"\n\t\t\t\t\t(isOpenChange)=\"isOpenChange($event)\"\n\t\t\t\t\t[description]=\"description\">\n\t\t\t\t\tURL\n\t\t\t\t</cds-tooltip-definition>\n\t\t\t\tthat you own. A custom domain can be a shared domain, a shared subdomain, or a shared domain and host.</p>\n\t\t\t</div>\n\t\t</div>\n\t`,\n\tstyles: [`\n\t\t.tooltip-trigger {\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: 0;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 2rem;\n\t\t\theight: 2rem;\n\t\t\tbackground: white;\n\t\t\tborder: 1px solid var(--cds-border-subtle);\n\t\t\tcursor: pointer;\n\t\t}\n\t\tsvg { fill: var(--cds-background-inverse); }\n\t`]\n})"
                 },
                 {
                     "name": "WithAutoAlign",
@@ -82883,6 +83020,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",
@@ -83005,142 +83164,120 @@
                     "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/modal/stories/alert-modal.component.ts\n\t\t-->\n\t\t<app-alert-modal-story\n\t\t\t[modalType]=\"modalType\"\n\t\t\t[modalLabel]=\"modalLabel\"\n\t\t\t[modalTitle]=\"modalTitle\"\n\t\t\t[modalContent]=\"modalContent\"\n\t\t\t[size]=\"size\"\n\t\t\t[showCloseButton]=\"showCloseButton\"\n\t\t\t[buttons]=\"buttons\">\n\t\t</app-alert-modal-story>\n\t\t<cds-placeholder></cds-placeholder>\n\t`\n})"
                 }
             ],
-            "src/menu-button/menu-button.stories.ts": [
+            "src/number-input/number.stories.ts": [
                 {
                     "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/menu-button/menu-button.stories.ts",
+                    "file": "src/number-input/number.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/pagination/pagination-nav.stories.ts": [
-                {
-                    "name": "Basic",
+                    "name": "Fluid",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/pagination/pagination-nav.stories.ts",
+                    "file": "src/number-input/number.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "Template",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/pagination/pagination-nav.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/pagination-nav/stories/pagination-nav-story.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[numOfItemsToShow]=\"numOfItemsToShow\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t</app-pagination>\n\t`\n})"
-                }
-            ],
-            "src/pagination/pagination.stories.ts": [
-                {
-                    "name": "Basic",
+                    "name": "ModelTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/pagination/pagination.stories.ts",
+                    "file": "src/number-input/number.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[size]=\"size\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[precision]=\"precision\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[(ngModel)]=\"value\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\n\t\t{{ value }}\n\t`\n})"
                 },
                 {
-                    "name": "Template",
+                    "name": "NgModel",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/pagination/pagination.stories.ts",
+                    "file": "src/number-input/number.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-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[pageInputDisabled]=\"pageInputDisabled\"\n\t\t\t[pagesUnknown]=\"pagesUnknown\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[showPageInput]=\"showPageInput\"\n\t\t\t[skeleton]=\"skeleton\">\n\t\t</app-pagination>\n\t`\n})"
-                }
-            ],
-            "src/number-input/number.stories.ts": [
+                    "defaultValue": "ModelTemplate.bind({})"
+                },
                 {
-                    "name": "Basic",
+                    "name": "Skeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/number-input/number.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "SkeletonTemplate.bind({})"
                 },
                 {
-                    "name": "Fluid",
+                    "name": "SkeletonTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/number-input/number.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\tlabel=\"Number input label\"\n\t\t\tskeleton=\"true\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\n\t`\n})"
                 },
                 {
-                    "name": "ModelTemplate",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/number-input/number.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[size]=\"size\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[precision]=\"precision\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[(ngModel)]=\"value\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\n\t\t{{ value }}\n\t`\n})"
-                },
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\n\t`\n})"
+                }
+            ],
+            "src/pagination/pagination-nav.stories.ts": [
                 {
-                    "name": "NgModel",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/number-input/number.stories.ts",
+                    "file": "src/pagination/pagination-nav.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "ModelTemplate.bind({})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "Skeleton",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/number-input/number.stories.ts",
+                    "file": "src/pagination/pagination-nav.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "SkeletonTemplate.bind({})"
-                },
+                    "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/pagination-nav/stories/pagination-nav-story.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[numOfItemsToShow]=\"numOfItemsToShow\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[size]=\"size\">\n\t\t</app-pagination>\n\t`\n})"
+                }
+            ],
+            "src/pagination/pagination.stories.ts": [
                 {
-                    "name": "SkeletonTemplate",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/number-input/number.stories.ts",
+                    "file": "src/pagination/pagination.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\tlabel=\"Number input label\"\n\t\t\tskeleton=\"true\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\n\t`\n})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
                     "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/number-input/number.stories.ts",
+                    "file": "src/pagination/pagination.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-number\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"[helperText]\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[size]=\"size\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(change)=\"change($event)\">\n\t\t</cds-number>\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/pagination/stories/pagination.component.ts\n\t\t-->\n\t\t<app-pagination\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[pageInputDisabled]=\"pageInputDisabled\"\n\t\t\t[pagesUnknown]=\"pagesUnknown\"\n\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t[showPageInput]=\"showPageInput\"\n\t\t\t[skeleton]=\"skeleton\">\n\t\t</app-pagination>\n\t`\n})"
                 }
             ],
             "src/progress-bar/progress-bar.stories.ts": [
@@ -89952,8 +90089,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "ActionableNotification",
-                "coveragePercent": 25,
-                "coverageCount": "6/24",
+                "coveragePercent": 24,
+                "coverageCount": "6/25",
                 "status": "low"
             },
             {
@@ -90060,8 +90197,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "Notification",
-                "coveragePercent": 22,
-                "coverageCount": "5/22",
+                "coveragePercent": 21,
+                "coverageCount": "5/23",
                 "status": "low"
             },
             {
@@ -92893,8 +93030,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TooltipDefinition",
-                "coveragePercent": 46,
-                "coverageCount": "15/32",
+                "coveragePercent": 40,
+                "coverageCount": "15/37",
                 "status": "medium"
             },
             {