carbon-components-angular 5.50.0 → 5.51.0

package/docs/documentation.json

@@ -13261,12 +13261,12 @@
         },
         {
             "name": "IconDirective",
-            "id": "directive-IconDirective-88b14822993a6d73f545f607449574a0eb0db55e2da0d003798e407ef1fb3c814c6dfcfdef222844db5294bee915945514b846b0d00a75b6bf100c2fc3012910",
+            "id": "directive-IconDirective-af13f8e78e4c5d8d52b5175637904e07d769a086288d15f20df3fd8de4fedf9ec7360815a0b84ad8b4c7b46caf13b518c30f0c8defe3d9b5f5ea53953c4ddfe2",
             "file": "src/icon/icon.directive.ts",
             "type": "directive",
             "description": "<p>A directive for populating a svg element based on the provided carbon icon name.</p>\n<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { IconModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-icon--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nA directive for populating a svg element based on the provided carbon icon name.\n\nGet started with importing the module:\n\n```typescript\nimport { IconModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-icon--basic)\n",
-            "sourceCode": "import {\n\tAfterViewInit,\n\tDirective,\n\tElementRef,\n\tInput,\n\tOnChanges,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { IconService } from \"./icon.service\";\nimport { getAttributes } from \"@carbon/icon-helpers\";\n\n/**\n * A directive for populating a svg element based on the provided carbon icon name.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { IconModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-icon--basic)\n */\n@Directive({\n\tselector: \"[cdsIcon], [ibmIcon]\"\n})\nexport class IconDirective implements AfterViewInit, OnChanges {\n\n\t/**\n\t * @deprecated since v5 - Use `cdsIcon` input property instead\n\t */\n\t@Input() set ibmIcon(iconName: string) {\n\t\tthis.cdsIcon = iconName;\n\t}\n\n\tstatic titleIdCounter = 0;\n\n\t@Input() cdsIcon = \"\";\n\n\t@Input() size = \"16\";\n\n\t@Input() title = \"\";\n\n\t@Input() ariaLabel = \"\";\n\n\t@Input() ariaLabelledBy = \"\";\n\n\t@Input() ariaHidden = \"\";\n\n\t@Input() isFocusable = false;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected iconService: IconService\n\t) {}\n\n\trenderIcon(iconName: string) {\n\t\tconst root = this.elementRef.nativeElement as HTMLElement;\n\n\t\tlet icon;\n\t\ttry {\n\t\t\ticon = this.iconService.get(iconName, this.size.toString());\n\t\t} catch (error) {\n\t\t\tconsole.warn(error);\n\t\t\t// bail out\n\t\t\treturn;\n\t\t}\n\n\t\tconst domParser = new DOMParser();\n\t\tconst rawSVG = icon.svg;\n\t\tconst svgElement = domParser.parseFromString(rawSVG, \"image/svg+xml\").documentElement;\n\n\t\tlet node: ChildNode = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : svgElement.firstChild;\n\t\troot.innerHTML = \"\"; // Clear root element\n\t\twhile (node) {\n\t\t\t// importNode makes a clone of the node\n\t\t\t// this ensures we keep looping over the nodes in the parsed document\n\t\t\troot.appendChild(root.ownerDocument.importNode(node, true));\n\t\t\t// type the node because the angular compiler freaks out if it\n\t\t\t// ends up thinking it's a `Node` instead of a `ChildNode`\n\t\t\tnode = node.nextSibling as ChildNode;\n\t\t}\n\n\t\tconst svg = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : root;\n\t\tsvg.setAttribute(\"xmlns\", \"http://www.w3.org/2000/svg\");\n\n\t\tconst attributes = getAttributes({\n\t\t\twidth: icon.attrs.width,\n\t\t\theight: icon.attrs.height,\n\t\t\tviewBox: icon.attrs.viewBox,\n\t\t\ttitle: this.title,\n\t\t\t\"aria-label\": this.ariaLabel,\n\t\t\t\"aria-labelledby\": this.ariaLabelledBy,\n\t\t\t\"aria-hidden\": this.ariaHidden,\n\t\t\tfocusable: this.isFocusable.toString()\n\t\t});\n\n\t\tconst attrKeys = Object.keys(attributes);\n\t\tfor (let i = 0; i < attrKeys.length; i++) {\n\t\t\tconst key = attrKeys[i];\n\t\t\tconst value = attributes[key];\n\n\t\t\tif (key === \"title\") {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (value) {\n\t\t\t\tsvg.setAttribute(key, value);\n\t\t\t}\n\t\t}\n\n\t\tif (attributes[\"title\"]) {\n\t\t\tconst title = document.createElement(\"title\");\n\t\t\ttitle.textContent = attributes.title;\n\t\t\tIconDirective.titleIdCounter++;\n\t\t\ttitle.setAttribute(\"id\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t\t// title must be first for screen readers\n\t\t\tsvg.insertBefore(title, svg.firstElementChild);\n\t\t\tsvg.setAttribute(\"aria-labelledby\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.renderIcon(this.cdsIcon);\n\t}\n\n\tngOnChanges({ cdsIcon }: SimpleChanges) {\n\t\t// We want to ignore first change to let the icon register\n\t\t// and add only after view has been initialized\n\t\tif (cdsIcon && !cdsIcon.isFirstChange()) {\n\t\t\tthis.renderIcon(this.cdsIcon);\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tDirective,\n\tElementRef,\n\tInput,\n\tOnChanges,\n\tSimpleChanges\n} from \"@angular/core\";\nimport { IconService } from \"./icon.service\";\nimport { getAttributes } from \"@carbon/icon-helpers\";\n\n/**\n * A directive for populating a svg element based on the provided carbon icon name.\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { IconModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-icon--basic)\n */\n@Directive({\n\tselector: \"[cdsIcon], [ibmIcon]\"\n})\nexport class IconDirective implements AfterViewInit, OnChanges {\n\n\t/**\n\t * @deprecated since v5 - Use `cdsIcon` input property instead\n\t */\n\t@Input() set ibmIcon(iconName: string) {\n\t\tthis.cdsIcon = iconName;\n\t}\n\n\tstatic titleIdCounter = 0;\n\n\t@Input() cdsIcon = \"\";\n\n\t@Input() size = \"16\";\n\n\t@Input() title = \"\";\n\n\t@Input() ariaLabel = \"\";\n\n\t@Input() ariaLabelledBy = \"\";\n\n\t@Input() ariaHidden = \"\";\n\n\t@Input() isFocusable = false;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected iconService: IconService\n\t) {}\n\n\trenderIcon(iconName: string) {\n\t\tconst root = this.elementRef.nativeElement as HTMLElement;\n\n\t\tlet icon;\n\t\ttry {\n\t\t\ticon = this.iconService.get(iconName, this.size.toString());\n\t\t} catch (error) {\n\t\t\tconsole.warn(error);\n\t\t\t// bail out\n\t\t\treturn;\n\t\t}\n\n\t\tconst domParser = new DOMParser();\n\t\tconst rawSVG = icon.svg;\n\t\tconst svgElement = domParser.parseFromString(rawSVG, \"image/svg+xml\").documentElement;\n\n\t\tlet node: ChildNode = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : svgElement.firstChild;\n\t\troot.innerHTML = \"\"; // Clear root element\n\t\twhile (node) {\n\t\t\t// importNode makes a clone of the node\n\t\t\t// this ensures we keep looping over the nodes in the parsed document\n\t\t\troot.appendChild(root.ownerDocument.importNode(node, true));\n\t\t\t// type the node because the angular compiler freaks out if it\n\t\t\t// ends up thinking it's a `Node` instead of a `ChildNode`\n\t\t\tnode = node.nextSibling as ChildNode;\n\t\t}\n\n\t\tconst svg = root.tagName.toUpperCase() !== \"SVG\" ? svgElement : root;\n\t\tsvg.setAttribute(\"xmlns\", \"http://www.w3.org/2000/svg\");\n\n\t\tconst attributes = getAttributes({\n\t\t\twidth: icon.attrs.width,\n\t\t\theight: icon.attrs.height,\n\t\t\tviewBox: icon.attrs.viewBox,\n\t\t\ttitle: this.title,\n\t\t\t\"aria-label\": this.ariaLabel,\n\t\t\t\"aria-labelledby\": this.ariaLabelledBy,\n\t\t\t\"aria-hidden\": this.ariaHidden,\n\t\t\tfocusable: this.isFocusable.toString(),\n\t\t\tfill: icon.attrs.fill\n\t\t});\n\n\t\tconst attrKeys = Object.keys(attributes);\n\t\tfor (let i = 0; i < attrKeys.length; i++) {\n\t\t\tconst key = attrKeys[i];\n\t\t\tconst value = attributes[key];\n\n\t\t\tif (key === \"title\") {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (value) {\n\t\t\t\tsvg.setAttribute(key, value);\n\t\t\t}\n\t\t}\n\n\t\tif (attributes[\"title\"]) {\n\t\t\tconst title = document.createElement(\"title\");\n\t\t\ttitle.textContent = attributes.title;\n\t\t\tIconDirective.titleIdCounter++;\n\t\t\ttitle.setAttribute(\"id\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t\t// title must be first for screen readers\n\t\t\tsvg.insertBefore(title, svg.firstElementChild);\n\t\t\tsvg.setAttribute(\"aria-labelledby\", `${icon.name}-title-${IconDirective.titleIdCounter}`);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tthis.renderIcon(this.cdsIcon);\n\t}\n\n\tngOnChanges({ cdsIcon }: SimpleChanges) {\n\t\t// We want to ignore first change to let the icon register\n\t\t// and add only after view has been initialized\n\t\tif (cdsIcon && !cdsIcon.isFirstChange()) {\n\t\t\tthis.renderIcon(this.cdsIcon);\n\t\t}\n\t}\n}\n",
             "selector": "[cdsIcon], [ibmIcon]",
             "providers": [],
             "hostDirectives": [],
@@ -13888,6 +13888,58 @@
                 }
             }
         },
+        {
+            "name": "LinkIconDirective",
+            "id": "directive-LinkIconDirective-55c5a92a8ab4a84e9a10dde7956dcd2102bb8bd5c68efeed3b3fb2e36d02d5e24395230c758089993dc569202b7e7be0b129e5b06d66af4fa187b39b536241d7",
+            "file": "src/link/link-icon.directive.ts",
+            "type": "directive",
+            "description": "",
+            "rawdescription": "\n",
+            "sourceCode": "import { Directive, HostBinding } from \"@angular/core\";\n\n@Directive({\n\tselector: \"[ibmLinkIcon], [cdsLinkIcon]\"\n})\nexport class LinkIconDirective {\n\t@HostBinding(\"class.cds--link__icon\") iconClass = true;\n}\n",
+            "selector": "[ibmLinkIcon], [cdsLinkIcon]",
+            "providers": [],
+            "hostDirectives": [],
+            "standalone": false,
+            "inputsClass": [],
+            "outputsClass": [],
+            "deprecated": false,
+            "deprecationMessage": "",
+            "hostBindings": [
+                {
+                    "name": "class.cds--link__icon",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 7,
+                    "type": "boolean",
+                    "decorators": []
+                }
+            ],
+            "hostListeners": [],
+            "propertiesClass": [
+                {
+                    "name": "iconClass",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 7,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'class.cds--link__icon'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                }
+            ],
+            "methodsClass": [],
+            "extends": []
+        },
         {
             "name": "List",
             "id": "directive-List-e215f38900f4ed9dd003bf3b5029e3e2fb5f8fa0299377a9ad4a7037486533b07026b1eccf7e446ee9bd2072f2c0fbe5f6ef8108b9c5dc2ec08618692a55ff38",
@@ -70333,13 +70385,13 @@
         },
         {
             "name": "LinkModule",
-            "id": "module-LinkModule-2790d06d16b68fa2edd457d5bc90e0eec459e8ef66bd88cca5e1d3d846e33a169e7a8a2f46388c57faa943000ce967b825cf52272ef0b8f716084b12c71cef1b",
+            "id": "module-LinkModule-b6b59a7cd7c68cb547739f8b9a4d15159b95fd630a4aa00614eef2f1222d2e360c06d5fb54bf1631fb4dbe61491338320925febfff89723de1162e6c660215d0",
             "description": "",
             "deprecationMessage": "",
             "deprecated": false,
             "file": "src/link/link.module.ts",
             "methods": [],
-            "sourceCode": "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { Link } from \"./link.directive\";\n\n@NgModule({\n\tdeclarations: [\n\t\tLink\n\t],\n\texports: [\n\t\tLink\n\t],\n\timports: [\n\t\tCommonModule\n\t]\n})\nexport class LinkModule {}\n",
+            "sourceCode": "import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { Link } from \"./link.directive\";\nimport { LinkIconDirective } from \"./link-icon.directive\";\n\n@NgModule({\n\tdeclarations: [\n\t\tLink,\n\t\tLinkIconDirective\n\t],\n\texports: [\n\t\tLink,\n\t\tLinkIconDirective\n\t],\n\timports: [\n\t\tCommonModule\n\t]\n})\nexport class LinkModule {}\n",
             "children": [
                 {
                     "type": "providers",
@@ -70350,6 +70402,9 @@
                     "elements": [
                         {
                             "name": "Link"
+                        },
+                        {
+                            "name": "LinkIconDirective"
                         }
                     ]
                 },
@@ -70362,6 +70417,9 @@
                     "elements": [
                         {
                             "name": "Link"
+                        },
+                        {
+                            "name": "LinkIconDirective"
                         }
                     ]
                 },
@@ -72623,7 +72681,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/button/button-set.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -72633,7 +72691,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button-set.stories.ts",
+                "file": "src/button/button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -72643,7 +72701,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button.stories.ts",
+                "file": "src/button/icon-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -72653,7 +72711,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/icon-button.stories.ts",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -72993,7 +73051,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/table/table.stories.ts",
+                "file": "src/tabs/tabs.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -73003,7 +73061,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tabs/tabs.stories.ts",
+                "file": "src/tag/tag.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -73013,7 +73071,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tag/tag.stories.ts",
+                "file": "src/table/table.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -73930,6 +73988,16 @@
                 "type": "",
                 "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<app-treeview-icon-component></app-treeview-icon-component>\n\t`\n})"
             },
+            {
+                "name": "IconTemplate",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/link/link.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<a\n\t\t\thref=\"#\"\n\t\t\tcdsLink\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[inline]=\"inline\">\n\t\t\tLink\n\t\t\t<svg cdsLinkIcon cdsIcon=\"close\" size=\"16\"></svg>\n\t\t</a>\n\t`\n})"
+            },
             {
                 "name": "Indeterminate",
                 "ctype": "miscellaneous",
@@ -75165,7 +75233,7 @@
                 "name": "Skeleton",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/table/table.stories.ts",
+                "file": "src/tabs/tabs.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75175,7 +75243,7 @@
                 "name": "Skeleton",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tabs/tabs.stories.ts",
+                "file": "src/table/table.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75285,21 +75353,21 @@
                 "name": "SkeletonTemplate",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/table/table.stories.ts",
+                "file": "src/tabs/tabs.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n\t\t-->\n\t\t<app-skeleton-table\n\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t[size]=\"size\"\n\t\t\t[striped]=\"striped\">\n\t\t</app-skeleton-table>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
             },
             {
                 "name": "SkeletonTemplate",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tabs/tabs.stories.ts",
+                "file": "src/table/table.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n\t\t-->\n\t\t<app-skeleton-table\n\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t[size]=\"size\"\n\t\t\t[striped]=\"striped\">\n\t\t</app-skeleton-table>\n\t`\n})"
             },
             {
                 "name": "SkeletonTemplate",
@@ -75395,41 +75463,41 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/button/button-set.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button-set.stories.ts",
+                "file": "src/button/button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button.stories.ts",
+                "file": "src/button/icon-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-icon-button\n\t\t\tbuttonId=\"icon-btn1\"\n\t\t\ttype=\"button\"\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[align]=\"align\"\n\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\tdescription=\"Icon Description\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t</cds-icon-button>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/icon-button.stories.ts",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-icon-button\n\t\t\tbuttonId=\"icon-btn1\"\n\t\t\ttype=\"button\"\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[align]=\"align\"\n\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\tdescription=\"Icon Description\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t</cds-icon-button>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -75765,31 +75833,31 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/table/table.stories.ts",
+                "file": "src/tabs/tabs.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tabs/tabs.stories.ts",
+                "file": "src/tag/tag.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag [type]=\"type\" [size]=\"size\">Tag</cds-tag>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/tag/tag.stories.ts",
+                "file": "src/table/table.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag [type]=\"type\" [size]=\"size\">Tag</cds-tag>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -76263,6 +76331,16 @@
                 "type": "",
                 "defaultValue": "WithIconTemplate.bind({})"
             },
+            {
+                "name": "WithIcon",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/link/link.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "IconTemplate.bind({})"
+            },
             {
                 "name": "withIcons",
                 "ctype": "miscellaneous",
@@ -79195,199 +79273,199 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"width: 500px\">\n\t\t\t<cds-accordion>\n\t\t\t\t<cds-accordion-item [title]=\"title\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t\t<cds-accordion-item [title]=\"titleWithContext\" [context]=\"{ index: 2 }\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t</cds-accordion>\n\t\t</div>\n\t\t<ng-template #title>\n\t\t\t<p class=\"cds--accordion__title\">Section 1 title</p>\n\t\t</ng-template>\n\t\t<ng-template #titleWithContext let-index=\"index\">\n\t\t\t<p class=\"cds--accordion__title\">Section {{ index }} title</p>\n\t\t</ng-template>\n\t`\n})"
                 }
             ],
-            "src/breadcrumb/breadcrumb.stories.ts": [
+            "src/button/button-set.stories.ts": [
                 {
                     "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button-set.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "breadcrumbItems",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button-set.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": ""
-                },
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
+                }
+            ],
+            "src/button/button.stories.ts": [
                 {
-                    "name": "createBreadcrumbItems",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(count: number, content = \"Breadcrumb\"): Array<BreadcrumbItem> => {\n\tif (breadcrumbItems && count === breadcrumbItems.length) {\n\t\treturn breadcrumbItems;\n\t}\n\tbreadcrumbItems = Array(count).fill(0).map((x, i) => ({\n\t\tcontent: `${content} ${i + 1}`,\n\t\thref: \"#\" + (i + 1)\n\t}));\n\treturn breadcrumbItems;\n}"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "CurrentPage",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "CurrentPageTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
                 },
                 {
-                    "name": "CurrentPageTemplate",
+                    "name": "WithIcon",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb>\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item current=\"true\" href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "WithIconTemplate.bind({})"
                 },
                 {
-                    "name": "Model",
+                    "name": "WithIconTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "ModelTemplate.bind({})"
-                },
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
+                }
+            ],
+            "src/breadcrumb/breadcrumb.stories.ts": [
                 {
-                    "name": "ModelTemplate",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems\n\t},\n\ttemplate: `\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"createBreadcrumbItems(itemCount, content)\">\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "ModelWithTemplate",
+                    "name": "breadcrumbItems",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "ModelWTemplate.bind({})"
+                    "type": ""
                 },
                 {
-                    "name": "ModelWTemplate",
+                    "name": "createBreadcrumbItems",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems,\n\t\twithTemplate\n\t},\n\ttemplate: `\n\t\t<ng-template #breadcrumbTemplate let-item>\n\t\t\t{{ templateContent }}{{ item.content }}\n\t\t</ng-template>\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"withTemplate(breadcrumbTemplate, createBreadcrumbItems(itemCount, content))\">\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "(count: number, content = \"Breadcrumb\"): Array<BreadcrumbItem> => {\n\tif (breadcrumbItems && count === breadcrumbItems.length) {\n\t\treturn breadcrumbItems;\n\t}\n\tbreadcrumbItems = Array(count).fill(0).map((x, i) => ({\n\t\tcontent: `${content} ${i + 1}`,\n\t\thref: \"#\" + (i + 1)\n\t}));\n\treturn breadcrumbItems;\n}"
                 },
                 {
-                    "name": "Skeleton",
+                    "name": "CurrentPage",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "WithSkeleton.bind({})"
+                    "defaultValue": "CurrentPageTemplate.bind({})"
                 },
                 {
-                    "name": "Template",
+                    "name": "CurrentPageTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb>\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item current=\"true\" href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "WithSkeleton",
+                    "name": "Model",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb skeleton=\"true\" [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "ModelTemplate.bind({})"
                 },
                 {
-                    "name": "withTemplate",
+                    "name": "ModelTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
-                }
-            ],
-            "src/button/button-set.stories.ts": [
+                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems\n\t},\n\ttemplate: `\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"createBreadcrumbItems(itemCount, content)\">\n\t\t</cds-breadcrumb>\n\t`\n})"
+                },
                 {
-                    "name": "Basic",
+                    "name": "ModelWithTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button-set.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "ModelWTemplate.bind({})"
                 },
                 {
-                    "name": "Template",
+                    "name": "ModelWTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button-set.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
-                }
-            ],
-            "src/button/button.stories.ts": [
+                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems,\n\t\twithTemplate\n\t},\n\ttemplate: `\n\t\t<ng-template #breadcrumbTemplate let-item>\n\t\t\t{{ templateContent }}{{ item.content }}\n\t\t</ng-template>\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"withTemplate(breadcrumbTemplate, createBreadcrumbItems(itemCount, content))\">\n\t\t</cds-breadcrumb>\n\t`\n})"
+                },
                 {
-                    "name": "Basic",
+                    "name": "Skeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "WithSkeleton.bind({})"
                 },
                 {
                     "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "WithIcon",
+                    "name": "WithSkeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "WithIconTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb skeleton=\"true\" [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "WithIconTemplate",
+                    "name": "withTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
+                    "defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
                 }
             ],
             "src/checkbox/checkbox.stories.ts": [
@@ -80403,6 +80481,16 @@
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
+                {
+                    "name": "IconTemplate",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/link/link.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<a\n\t\t\thref=\"#\"\n\t\t\tcdsLink\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[inline]=\"inline\">\n\t\t\tLink\n\t\t\t<svg cdsLinkIcon cdsIcon=\"close\" size=\"16\"></svg>\n\t\t</a>\n\t`\n})"
+                },
                 {
                     "name": "Template",
                     "ctype": "miscellaneous",
@@ -80412,6 +80500,16 @@
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<a href=\"#\" cdsLink [disabled]=\"disabled\" [inline]=\"inline\">link</a>\n\t`\n})"
+                },
+                {
+                    "name": "WithIcon",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/link/link.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "IconTemplate.bind({})"
                 }
             ],
             "src/list/list.stories.ts": [
@@ -81112,440 +81210,440 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list [condensed]=\"condensed\">\n\t\t\t<cds-list-header>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Column 2</cds-list-column>\n\t\t\t\t<cds-list-column>Column 3</cds-list-column>\n\t\t\t</cds-list-header>\n\t\t\t<cds-list-row>\n\t\t\t\t<cds-list-column>Row 1</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t\t<cds-list-row>\n\t\t\t\t<cds-list-column>Row 2</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Two</cds-list-column>\n\t\t\t\t<cds-list-column>\n\t\t\t\t\tLorem ipsum dolor sit amet,\n\t\t\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t\t\t</cds-list-column>\n\t\t\t</cds-list-row>\n\t\t</cds-structured-list>\n\t`\n})"
                 }
             ],
-            "src/table/table.stories.ts": [
+            "src/tabs/tabs.stories.ts": [
                 {
                     "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "DisabledRowsTemplate",
+                    "name": "BeforeAndAfter",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar [model]=\"model\" [batchText]=\"batchText\" #toolbar>\n\t\t\t\t<cds-table-toolbar-actions>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<svg cdsIcon=\"delete\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-actions>\n\t\t\t\t<cds-table-toolbar-content *ngIf=\"!toolbar.selected\">\n\t\t\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n\t\t\t\t\t<button cdsButton=\"ghost\" class=\"toolbar-action\">\n\t\t\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data-table.component.ts\n\t\t\t-->\n\t\t\t<app-no-data-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"lg\"\n\t\t\t\t[showSelectionColumn]=\"true\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-no-data-table>\n\t\t</cds-table-container>\n\t`\n})"
+                    "defaultValue": "BeforeAndAfterTemplate.bind({})"
                 },
                 {
-                    "name": "DyanmicContentTemplate",
+                    "name": "BeforeAndAfterTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-custom-table.component.ts\n\t\t\t-->\n\t\t\t<app-custom-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-custom-table>\n\t\t</cds-table-container>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">before</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">after</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">both</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t`\n})"
                 },
                 {
-                    "name": "emptyModel",
+                    "name": "Skeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "new TableModel()"
+                    "defaultValue": "SkeletonTemplate.bind({})"
                 },
                 {
-                    "name": "ExpansionTemplate",
+                    "name": "SkeletonTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-expansion-table.component.ts\n\t\t\t-->\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t\t[showExpandAllToggle]=\"showExpandAllToggle\">\n\t\t\t</app-expansion-table>\n\t\t</cds-table-container>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
                 },
                 {
-                    "name": "Filtering",
+                    "name": "TabheaderGroup",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "FilteringTemplate.bind({})"
+                    "defaultValue": "TabHeaderGroupTemplate.bind({})"
                 },
                 {
-                    "name": "FilteringOverriding",
+                    "name": "TabHeaderGroupTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "FilteringOverridingTemplate.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/stories/pagination.component.ts\n\t\t-->\n\t\t<app-header-group\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t[isNavigation]=\"isNavigation\">\n\t\t</app-header-group>\n\t`\n})"
                 },
                 {
-                    "name": "FilteringOverridingTemplate",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-function-override-filter-table.component.ts\n\t\t-->\n\t\t<app-function-override-filter-table\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t</app-function-override-filter-table>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
                 },
                 {
-                    "name": "FilteringTemplate",
+                    "name": "With",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-model-filter-table.component.ts\n\t\t-->\n\t\t<app-model-filter-table\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t</app-model-filter-table>\n\t`\n})"
+                    "defaultValue": "WithTemplate.bind({})"
                 },
                 {
-                    "name": "FromComponents",
+                    "name": "WithTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tabs/tabs.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "FromComponentsTemplate.bind({})"
-                },
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<ng-template #customTabs let-item>\n\t\t\t{{item ? item.name : \"wait for it\"}}\n\t\t</ng-template>\n\t\t<ng-template #iconTab>\n\t\t\t<div style=\"height: 14px;\">\n\t\t\t\tSomething custom\n\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n\t\t\t\tstyle=\"height: 14px; width: 14px; fill: #3d70b2;\">\n\t\t\t\t\t<path d=\"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z\"></path>\n\t\t\t\t\t<path d=\"M9 13H7V7h2z\"></path>\n\t\t\t\t\t<path d=\"M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab\n\t\t\t\t*ngFor=\"let item of data; let i = index;\"\n\t\t\t\t[heading]=\"customTabs\"\n\t\t\t\ttitle=\"Tab Content\"\n\t\t\t\t[context]=\"item\">\n\t\t\t\tTab Content {{i + 1}}\n\t\t\t</cds-tab>\n\t\t\t<cds-tab [heading]=\"iconTab\" title=\"Custom tab content\">Tab Content Custom</cds-tab>\n\t\t</cds-tabs>\n\t`\n})"
+                }
+            ],
+            "src/tag/tag.stories.ts": [
                 {
-                    "name": "FromComponentsTemplate",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<table cdsTable [sortable]=\"false\">\n\t\t\t<thead cdsTableHead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th\n\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\tcdsTableHeadCell\n\t\t\t\t\t\t*ngFor=\"let column of model.header\"\n\t\t\t\t\t\t[column]=\"column\">\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody cdsTableBody>\n\t\t\t\t<tr\n\t\t\t\t\t*ngFor=\"let row of model.data\"\n\t\t\t\t\tcdsTableRow\n\t\t\t\t\t[row]=\"row\">\n\t\t\t\t\t<td\n\t\t\t\t\t\t*ngFor=\"let item of row; let j = index\"\n\t\t\t\t\t\tcdsTableData\n\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t[class]=\"model.header[j].className\"\n\t\t\t\t\t\t[ngStyle]=\"model.header[j].style\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t`\n})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "getProps",
+                    "name": "Filter",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(more = {}, type: \"args\" | \"argTypes\") => {\n\tconst defaultProps = type === \"args\" ? {\n\t\tmodel: simpleModel,\n\t\ttitle: \"Table title\",\n\t\tdescription: \"\",\n\t\tsize: \"md\",\n\t\tshowSelectionColumn: true,\n\t\tstriped: false,\n\t\tsortable: true,\n\t\tisDataGrid: true,\n\t\tstickyHeader: false,\n\t\tskeleton: false\n\t} : {\n\t\tsize: {\n\t\t\toptions: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n\t\t\tcontrol: \"select\"\n\t\t}\n\t};\n\treturn { ...defaultProps, ...more };\n}"
+                    "defaultValue": "FilteredTemplate.bind({})"
                 },
                 {
-                    "name": "NoDataTemplate",
+                    "name": "FilteredTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle id=\"table-header\">{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription id=\"table-description\">{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data.component.ts\n\t\t\t-->\n\t\t\t<app-no-data-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\tariaLabelledby=\"table-header\"\n\t\t\t\tariaDescribedby=\"table-description\">\n\t\t\t\t<tbody><tr><td class=\"no-data\" colspan=\"3\"><div>No data.</div></td></tr></tbody>\n\t\t\t</app-no-data-table>\n\t\t</cds-table-container>\n\t`,\n\tstyles: [`\n\t\t.no-data {\n\t\t\twidth: 100%;\n\t\t\theight: 150px;\n\t\t\ttext-align: center;\n\t\t}\n\t`]\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-filter\n\t\t\t[type]=\"type\"\n\t\t\t[size]=\"size\"\n\t\t\ttitle=\"Filter\"\n\t\t\tcloseButtonLabel=\"Clear\">\n\t\t\tfilter\n\t\t</cds-tag-filter>\n\t`\n})"
                 },
                 {
-                    "name": "OverflowMenuTemplate",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/table/table.stories.ts",
+                    "file": "src/tag/tag.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...getProps({\n\t\t\tdescription: \"With overflow menu\"\n\t\t}, \"args\")\n\t},\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-overflow-table.component.ts\n\t\t\t-->\n\t\t\t<app-overflow-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-overflow-table>\n\t\t</cds-table-container>\n\t`\n})"
-                },
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag [type]=\"type\" [size]=\"size\">Tag</cds-tag>\n\t`\n})"
+                }
+            ],
+            "src/table/table.stories.ts": [
                 {
-                    "name": "PaginationTemplate",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-pagination-table.component.ts\n\t\t\t-->\n\t\t\t<app-pagination-table\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[model]=\"model\">\n\t\t\t</app-pagination-table>\n\t\t</cds-table-container>\n\t`\n})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "simpleModel",
+                    "name": "DisabledRowsTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "new TableModel()"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar [model]=\"model\" [batchText]=\"batchText\" #toolbar>\n\t\t\t\t<cds-table-toolbar-actions>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<svg cdsIcon=\"delete\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-actions>\n\t\t\t\t<cds-table-toolbar-content *ngIf=\"!toolbar.selected\">\n\t\t\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n\t\t\t\t\t<button cdsButton=\"ghost\" class=\"toolbar-action\">\n\t\t\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data-table.component.ts\n\t\t\t-->\n\t\t\t<app-no-data-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"lg\"\n\t\t\t\t[showSelectionColumn]=\"true\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-no-data-table>\n\t\t</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "Skeleton",
+                    "name": "DyanmicContentTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "SkeletonTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-custom-table.component.ts\n\t\t\t-->\n\t\t\t<app-custom-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-custom-table>\n\t\t</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "SkeletonTemplate",
+                    "name": "emptyModel",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n\t\t-->\n\t\t<app-skeleton-table\n\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t[size]=\"size\"\n\t\t\t[striped]=\"striped\">\n\t\t</app-skeleton-table>\n\t`\n})"
+                    "defaultValue": "new TableModel()"
                 },
                 {
-                    "name": "Template",
+                    "name": "ExpansionTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-expansion-table.component.ts\n\t\t\t-->\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t\t[showExpandAllToggle]=\"showExpandAllToggle\">\n\t\t\t</app-expansion-table>\n\t\t</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "ToolbarTemplate",
+                    "name": "Filtering",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[batchText]=\"batchText\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t(cancel)=\"cancelMethod()\"\n\t\t\t\t#toolbar>\n\t\t\t\t<cds-table-toolbar-actions>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-actions>\n\t\t\t\t<cds-table-toolbar-content *ngIf=\"!toolbar.selected\">\n\t\t\t\t\t<cds-table-toolbar-search\n\t\t\t\t\t\tngDefaultControl\n\t\t\t\t\t\t[expandable]=\"searchExpandable\"\n\t\t\t\t\t\t[(ngModel)]=\"searchModel\">\n\t\t\t\t\t</cds-table-toolbar-search>\n\t\t\t\t\t<cds-overflow-menu\n\t\t\t\t\t\ttriggerClass=\"cds--toolbar-action\"\n\t\t\t\t\t\t[customTrigger]=\"customTrigger\"\n\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t[offset]=\"size === 'sm' ? null : offset\">\n\t\t\t\t\t\t<cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option disabled=\"true\">Disabled</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option type=\"danger\">Danger option</cds-overflow-menu-option>\n\t\t\t\t\t</cds-overflow-menu>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\" [tabindex]=\"toolbar.selected ? -1 : 0\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t\t<ng-template #customTrigger><svg cdsIcon=\"settings\" size=\"16\"></svg></ng-template>\n\t\t</cds-table-container>\n\t`\n})"
+                    "defaultValue": "FilteringTemplate.bind({})"
                 },
                 {
-                    "name": "WithDisabledRows",
+                    "name": "FilteringOverriding",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "DisabledRowsTemplate.bind({})"
+                    "defaultValue": "FilteringOverridingTemplate.bind({})"
                 },
                 {
-                    "name": "WithDynamicContent",
+                    "name": "FilteringOverridingTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "DyanmicContentTemplate.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/table/stories/app-function-override-filter-table.component.ts\n\t\t-->\n\t\t<app-function-override-filter-table\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t</app-function-override-filter-table>\n\t`\n})"
                 },
                 {
-                    "name": "WithExpansion",
+                    "name": "FilteringTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "ExpansionTemplate.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/table/stories/app-model-filter-table.component.ts\n\t\t-->\n\t\t<app-model-filter-table\n\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t[size]=\"size\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t[striped]=\"striped\"\n\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t</app-model-filter-table>\n\t`\n})"
                 },
                 {
-                    "name": "WithoutActionTemplate",
+                    "name": "FromComponents",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle id=\"table-header\">{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription id=\"table-description\">{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar>\n\t\t\t\t<cds-table-toolbar-content>\n\t\t\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n\t\t\t\t\t<button cdsButton=\"ghost\" class=\"toolbar-action\">\n\t\t\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t\tariaLabelledby=\"table-header\"\n\t\t\t\tariaDescribedby=\"table-description\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
+                    "defaultValue": "FromComponentsTemplate.bind({})"
                 },
                 {
-                    "name": "WithoutData",
+                    "name": "FromComponentsTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "NoDataTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<table cdsTable [sortable]=\"false\">\n\t\t\t<thead cdsTableHead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th\n\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\tcdsTableHeadCell\n\t\t\t\t\t\t*ngFor=\"let column of model.header\"\n\t\t\t\t\t\t[column]=\"column\">\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody cdsTableBody>\n\t\t\t\t<tr\n\t\t\t\t\t*ngFor=\"let row of model.data\"\n\t\t\t\t\tcdsTableRow\n\t\t\t\t\t[row]=\"row\">\n\t\t\t\t\t<td\n\t\t\t\t\t\t*ngFor=\"let item of row; let j = index\"\n\t\t\t\t\t\tcdsTableData\n\t\t\t\t\t\t[item]=\"item\"\n\t\t\t\t\t\t[class]=\"model.header[j].className\"\n\t\t\t\t\t\t[ngStyle]=\"model.header[j].style\">\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t`\n})"
                 },
                 {
-                    "name": "WithOverflowMenu",
+                    "name": "getProps",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "OverflowMenuTemplate.bind({})"
+                    "defaultValue": "(more = {}, type: \"args\" | \"argTypes\") => {\n\tconst defaultProps = type === \"args\" ? {\n\t\tmodel: simpleModel,\n\t\ttitle: \"Table title\",\n\t\tdescription: \"\",\n\t\tsize: \"md\",\n\t\tshowSelectionColumn: true,\n\t\tstriped: false,\n\t\tsortable: true,\n\t\tisDataGrid: true,\n\t\tstickyHeader: false,\n\t\tskeleton: false\n\t} : {\n\t\tsize: {\n\t\t\toptions: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"],\n\t\t\tcontrol: \"select\"\n\t\t}\n\t};\n\treturn { ...defaultProps, ...more };\n}"
                 },
                 {
-                    "name": "WithPagination",
+                    "name": "NoDataTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "PaginationTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle id=\"table-header\">{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription id=\"table-description\">{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-no-data.component.ts\n\t\t\t-->\n\t\t\t<app-no-data-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\tariaLabelledby=\"table-header\"\n\t\t\t\tariaDescribedby=\"table-description\">\n\t\t\t\t<tbody><tr><td class=\"no-data\" colspan=\"3\"><div>No data.</div></td></tr></tbody>\n\t\t\t</app-no-data-table>\n\t\t</cds-table-container>\n\t`,\n\tstyles: [`\n\t\t.no-data {\n\t\t\twidth: 100%;\n\t\t\theight: 150px;\n\t\t\ttext-align: center;\n\t\t}\n\t`]\n})"
                 },
                 {
-                    "name": "WithToolbar",
+                    "name": "OverflowMenuTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "ToolbarTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...getProps({\n\t\t\tdescription: \"With overflow menu\"\n\t\t}, \"args\")\n\t},\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-overflow-table.component.ts\n\t\t\t-->\n\t\t\t<app-overflow-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-overflow-table>\n\t\t</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "WithToolbarWithoutToolbarAction",
+                    "name": "PaginationTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "WithoutActionTemplate.bind({})"
-                }
-            ],
-            "src/tabs/tabs.stories.ts": [
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-pagination-table.component.ts\n\t\t\t-->\n\t\t\t<app-pagination-table\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[totalDataLength]=\"totalDataLength\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[model]=\"model\">\n\t\t\t</app-pagination-table>\n\t\t</cds-table-container>\n\t`\n})"
+                },
                 {
-                    "name": "Basic",
+                    "name": "simpleModel",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "new TableModel()"
                 },
                 {
-                    "name": "BeforeAndAfter",
+                    "name": "Skeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "BeforeAndAfterTemplate.bind({})"
+                    "defaultValue": "SkeletonTemplate.bind({})"
                 },
                 {
-                    "name": "BeforeAndAfterTemplate",
+                    "name": "SkeletonTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">before</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">after</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">both</div>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab heading=\"one\">foo</cds-tab>\n\t\t\t<cds-tab heading=\"two\">bar</cds-tab>\n\t\t\t<span before>content before</span>\n\t\t\t<span after>content after</span>\n\t\t</cds-tabs>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-skeleton-table.component.ts\n\t\t-->\n\t\t<app-skeleton-table\n\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t[size]=\"size\"\n\t\t\t[striped]=\"striped\">\n\t\t</app-skeleton-table>\n\t`\n})"
                 },
                 {
-                    "name": "Skeleton",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "SkeletonTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "SkeletonTemplate",
+                    "name": "ToolbarTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs skeleton=\"true\">\n\t\t\t<cds-tab></cds-tab>\n\t\t\t<cds-tab></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<div style=\"margin-top: 5rem\">\n\t\t\t<p>Tab skeleton component for cds-tab-header-group:</p>\n\t\t\t<cds-tabs-skeleton></cds-tabs-skeleton>\n\t\t</div>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription>{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[batchText]=\"batchText\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t(cancel)=\"cancelMethod()\"\n\t\t\t\t#toolbar>\n\t\t\t\t<cds-table-toolbar-actions>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<svg cdsIcon=\"trash-can\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<svg cdsIcon=\"save\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" [tabindex]=\"toolbar.selected ? 0 : -1\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<svg cdsIcon=\"download\" size=\"16\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-actions>\n\t\t\t\t<cds-table-toolbar-content *ngIf=\"!toolbar.selected\">\n\t\t\t\t\t<cds-table-toolbar-search\n\t\t\t\t\t\tngDefaultControl\n\t\t\t\t\t\t[expandable]=\"searchExpandable\"\n\t\t\t\t\t\t[(ngModel)]=\"searchModel\">\n\t\t\t\t\t</cds-table-toolbar-search>\n\t\t\t\t\t<cds-overflow-menu\n\t\t\t\t\t\ttriggerClass=\"cds--toolbar-action\"\n\t\t\t\t\t\t[customTrigger]=\"customTrigger\"\n\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t[offset]=\"size === 'sm' ? null : offset\">\n\t\t\t\t\t\t<cds-overflow-menu-option>Option 1</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option>Option 2</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option disabled=\"true\">Disabled</cds-overflow-menu-option>\n\t\t\t\t\t\t<cds-overflow-menu-option type=\"danger\">Danger option</cds-overflow-menu-option>\n\t\t\t\t\t</cds-overflow-menu>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\" [tabindex]=\"toolbar.selected ? -1 : 0\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t\t<ng-template #customTrigger><svg cdsIcon=\"settings\" size=\"16\"></svg></ng-template>\n\t\t</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "TabheaderGroup",
+                    "name": "WithDisabledRows",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "TabHeaderGroupTemplate.bind({})"
+                    "defaultValue": "DisabledRowsTemplate.bind({})"
                 },
                 {
-                    "name": "TabHeaderGroupTemplate",
+                    "name": "WithDynamicContent",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<!--\n\t\tapp-* components are for demo purposes only.\n\t\tYou can create your own implementation by using the component source found at:\n\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/pagination/stories/pagination.component.ts\n\t\t-->\n\t\t<app-header-group\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t[isNavigation]=\"isNavigation\">\n\t\t</app-header-group>\n\t`\n})"
+                    "defaultValue": "DyanmicContentTemplate.bind({})"
                 },
                 {
-                    "name": "Template",
+                    "name": "WithExpansion",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tabs\n\t\t\t[type]=\"type\"\n\t\t\t[followFocus]=\"followFocus\"\n\t\t\t[isNavigation]=\"isNavigation\"\n\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t<cds-tab heading=\"one\">Tab Content 1</cds-tab>\n\t\t\t<cds-tab heading=\"two\">Tab Content 2</cds-tab>\n\t\t\t<cds-tab heading=\"three\" [tabContent]=\"three\"></cds-tab>\n\t\t\t<cds-tab heading=\"four\" [tabContent]=\"four\"></cds-tab>\n\t\t</cds-tabs>\n\n\t\t<!-- Use templates if you would like to have lifecycle hooks called when cacheActive is false -->\n\t\t<ng-template #three>\n\t\t\tTab Content 3\n\t\t</ng-template>\n\n\t\t<ng-template #four>\n\t\t\tTab Content 4\n\t\t</ng-template>\n\t`\n})"
+                    "defaultValue": "ExpansionTemplate.bind({})"
                 },
                 {
-                    "name": "With",
+                    "name": "WithoutActionTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "WithTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-table-container>\n\t\t\t<cds-table-header>\n\t\t\t\t<h4 cdsTableHeaderTitle id=\"table-header\">{{title}}</h4>\n\t\t\t\t<p cdsTableHeaderDescription id=\"table-description\">{{description}}</p>\n\t\t\t</cds-table-header>\n\t\t\t<cds-table-toolbar>\n\t\t\t\t<cds-table-toolbar-content>\n\t\t\t\t\t<cds-table-toolbar-search [expandable]=\"true\"></cds-table-toolbar-search>\n\t\t\t\t\t<button cdsButton=\"ghost\" class=\"toolbar-action\">\n\t\t\t\t\t\t<svg cdsIcon=\"settings\" size=\"16\" class=\"cds--toolbar-action__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button cdsButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary button<svg cdsIcon=\"add\" size=\"20\" class=\"cds--btn__icon\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</cds-table-toolbar-content>\n\t\t\t</cds-table-toolbar>\n\n\t\t\t<!--\n\t\t\tapp-* components are for demo purposes only.\n\t\t\tYou can create your own implementation by using the component source found at:\n\t\t\thttps://github.com/IBM/carbon-components-angular/tree/master/src/table/stories/app-table.component.ts\n\t\t\t-->\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[enableSingleSelect]=\"enableSingleSelect\"\n\t\t\t\t[stickyHeader]=\"stickyHeader\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\"\n\t\t\t\tariaLabelledby=\"table-header\"\n\t\t\t\tariaDescribedby=\"table-description\">\n\t\t\t</app-table>\n\t\t</cds-table-container>\n\t`\n})"
                 },
                 {
-                    "name": "WithTemplate",
+                    "name": "WithoutData",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tabs/tabs.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<ng-template #customTabs let-item>\n\t\t\t{{item ? item.name : \"wait for it\"}}\n\t\t</ng-template>\n\t\t<ng-template #iconTab>\n\t\t\t<div style=\"height: 14px;\">\n\t\t\t\tSomething custom\n\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n\t\t\t\tstyle=\"height: 14px; width: 14px; fill: #3d70b2;\">\n\t\t\t\t\t<path d=\"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z\"></path>\n\t\t\t\t\t<path d=\"M9 13H7V7h2z\"></path>\n\t\t\t\t\t<path d=\"M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<cds-tabs [type]=\"type\" [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t<cds-tab\n\t\t\t\t*ngFor=\"let item of data; let i = index;\"\n\t\t\t\t[heading]=\"customTabs\"\n\t\t\t\ttitle=\"Tab Content\"\n\t\t\t\t[context]=\"item\">\n\t\t\t\tTab Content {{i + 1}}\n\t\t\t</cds-tab>\n\t\t\t<cds-tab [heading]=\"iconTab\" title=\"Custom tab content\">Tab Content Custom</cds-tab>\n\t\t</cds-tabs>\n\t`\n})"
-                }
-            ],
-            "src/tag/tag.stories.ts": [
+                    "defaultValue": "NoDataTemplate.bind({})"
+                },
                 {
-                    "name": "Basic",
+                    "name": "WithOverflowMenu",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "OverflowMenuTemplate.bind({})"
                 },
                 {
-                    "name": "Filter",
+                    "name": "WithPagination",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "FilteredTemplate.bind({})"
+                    "defaultValue": "PaginationTemplate.bind({})"
                 },
                 {
-                    "name": "FilteredTemplate",
+                    "name": "WithToolbar",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag-filter\n\t\t\t[type]=\"type\"\n\t\t\t[size]=\"size\"\n\t\t\ttitle=\"Filter\"\n\t\t\tcloseButtonLabel=\"Clear\">\n\t\t\tfilter\n\t\t</cds-tag-filter>\n\t`\n})"
+                    "defaultValue": "ToolbarTemplate.bind({})"
                 },
                 {
-                    "name": "Template",
+                    "name": "WithToolbarWithoutToolbarAction",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/tag/tag.stories.ts",
+                    "file": "src/table/table.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-tag [type]=\"type\" [size]=\"size\">Tag</cds-tag>\n\t`\n})"
+                    "defaultValue": "WithoutActionTemplate.bind({})"
                 }
             ],
             "src/theme/theme.stories.ts": [
@@ -86913,6 +87011,15 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/link/link-icon.directive.ts",
+                "type": "directive",
+                "linktype": "directive",
+                "name": "LinkIconDirective",
+                "coveragePercent": 0,
+                "coverageCount": "0/3",
+                "status": "low"
+            },
             {
                 "filePath": "src/link/link.directive.ts",
                 "type": "directive",
@@ -86932,6 +87039,16 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/link/link.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "IconTemplate",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/link/link.stories.ts",
                 "type": "variable",
@@ -86942,6 +87059,16 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/link/link.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "WithIcon",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/list/list-item.directive.ts",
                 "type": "directive",