carbon-components-angular 5.49.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",
@@ -15172,12 +15224,12 @@
         },
         {
             "name": "PasswordInput",
-            "id": "directive-PasswordInput-d408fdbe8dc2402fa997e784118a8b04f7d2fc0de29add0dc1bd5ecd1356a6f4c6897e00c84e722c4ef8db9fadb62f1b918f0b94899b134e73113410d06eb1d4",
+            "id": "directive-PasswordInput-ff3f658fbcddc4e1f391934db19db0a8c63fa6f399034fc6b6f4fa2ea2e2eb9455b086a06183c142d06f61bcfdc9d2844178364c097b8473542f645c527389d3",
             "file": "src/input/password.directive.ts",
             "type": "directive",
             "description": "",
             "rawdescription": "\n",
-            "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput,\n\tRenderer2,\n\tElementRef,\n\tAfterViewInit\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsPassword], [ibmPassword]\"\n})\nexport class PasswordInput implements AfterViewInit {\n\n\t@Input() set type(type: string) {\n\t\tif (type) {\n\t\t\tthis._type = type;\n\t\t\tif (this.elementRef) {\n\t\t\t\tthis.renderer.setAttribute(this.elementRef.nativeElement, \"type\", this._type);\n\t\t\t}\n\t\t}\n\t}\n\t@HostBinding(\"class.cds--password-input\") passwordInputClass = true;\n\n\t/**\n\t * @todo - remove `cds--text-input--${size}` classes in v12\n\t */\n\t@HostBinding(\"class.cds--text-input--sm\") get isSizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--text-input--md\") get isSizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--text-input--lg\") get isSizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t// Size\n\t@HostBinding(\"class.cds--layout--size-sm\") get sizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get sizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get sizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\t@HostBinding(\"class.cds--text-input--light\") get isLightTheme() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\t@HostBinding(\"class.cds--text-input\") inputClass = true;\n\t@HostBinding(\"class.cds--text-input--invalid\") @Input() invalid = false;\n\t@HostBinding(\"class.cds--text-input__field-wrapper--warning\") @Input() warn = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` input theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\tprivate _type = \"password\";\n\n\tconstructor(protected elementRef: ElementRef, protected renderer: Renderer2) { }\n\n\tngAfterViewInit(): void {\n\t\tthis.renderer.setAttribute(this.elementRef.nativeElement, \"type\", this._type);\n\t}\n}\n",
+            "sourceCode": "import {\n\tDirective,\n\tHostBinding,\n\tInput,\n\tRenderer2,\n\tElementRef,\n\tAfterViewInit\n} from \"@angular/core\";\n\n@Directive({\n\tselector: \"[cdsPassword], [ibmPassword]\"\n})\nexport class PasswordInput implements AfterViewInit {\n\n\t@Input() set type(type: string) {\n\t\tif (type) {\n\t\t\tthis._type = type;\n\t\t\tif (this.elementRef) {\n\t\t\t\tthis.renderer.setAttribute(this.elementRef.nativeElement, \"type\", this._type);\n\t\t\t}\n\t\t}\n\t}\n\t@HostBinding(\"class.cds--password-input\") passwordInputClass = true;\n\n\t/**\n\t * @todo - remove `cds--text-input--${size}` classes in v12\n\t */\n\t@HostBinding(\"class.cds--text-input--sm\") get isSizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--text-input--md\") get isSizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--text-input--lg\") get isSizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t// Size\n\t@HostBinding(\"class.cds--layout--size-sm\") get sizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get sizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get sizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\t@HostBinding(\"class.cds--text-input--light\") get isLightTheme() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\t@HostBinding(\"class.cds--text-input\") inputClass = true;\n\t@HostBinding(\"class.cds--text-input--invalid\") @Input() invalid = false;\n\t@HostBinding(\"class.cds--text-input--warning\") @Input() warn = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` input theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@HostBinding(\"attr.data-invalid\") get getInvalidAttribute() {\n\t\treturn this.invalid ? true : undefined;\n\t}\n\n\tprivate _type = \"password\";\n\n\tconstructor(protected elementRef: ElementRef, protected renderer: Renderer2) { }\n\n\tngAfterViewInit(): void {\n\t\tthis.renderer.setAttribute(this.elementRef.nativeElement, \"type\", this._type);\n\t}\n}\n",
             "selector": "[cdsPassword], [ibmPassword]",
             "providers": [],
             "hostDirectives": [],
@@ -15219,15 +15271,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` input theme",
                     "jsdoctags": [
                         {
-                            "pos": 1510,
-                            "end": 1602,
+                            "pos": 1495,
+                            "end": 1587,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 338,
                             "tagName": {
-                                "pos": 1511,
-                                "end": 1521,
+                                "pos": 1496,
+                                "end": 1506,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -15263,6 +15315,14 @@
             "deprecated": false,
             "deprecationMessage": "",
             "hostBindings": [
+                {
+                    "name": "attr.data-invalid",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 68,
+                    "type": "boolean",
+                    "decorators": []
+                },
                 {
                     "name": "class.cds--layout--size-lg",
                     "deprecated": false,
@@ -15423,7 +15483,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 68,
+                "line": 72,
                 "jsdoctags": [
                     {
                         "name": "elementRef",
@@ -15560,6 +15620,15 @@
                         "returnType": "",
                         "line": 48
                     }
+                },
+                "getInvalidAttribute": {
+                    "name": "getInvalidAttribute",
+                    "getSignature": {
+                        "name": "getInvalidAttribute",
+                        "type": "",
+                        "returnType": "",
+                        "line": 68
+                    }
                 }
             }
         },
@@ -17516,12 +17585,12 @@
         },
         {
             "name": "TextInput",
-            "id": "directive-TextInput-b2f306ed92d28dadc94046064f37d699ff82321bf5073de8f0f01f28ed6199366f7827ef1bb87c4a3fc788a7a252d603153161582a0a04986b8f67a9624e88d8",
+            "id": "directive-TextInput-65a35808bf737a7b8eba08b1b54da0b59becf4132bc81901e672afb6e36e121fe507d68be484b85e05a1f6f916a845db77c8ccf0491beb0a7929260ea6418521",
             "file": "src/input/input.directive.ts",
             "type": "directive",
             "description": "<p>A directive for applying styling to an input element.</p>\n<p>Example:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;input cdsText/&gt;</code></pre></div><p>See the <a href=\"http://www.carbondesignsystem.com/components/text-input/code\">vanilla carbon docs</a> for more detail.</p>\n",
             "rawdescription": "\n\nA directive for applying styling to an input element.\n\nExample:\n\n```html\n<input cdsText/>\n```\n\nSee the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.\n",
-            "sourceCode": "import { Directive, HostBinding, Input } from \"@angular/core\";\n\n/**\n * A directive for applying styling to an input element.\n *\n * Example:\n *\n * ```html\n * <input cdsText/>\n * ```\n *\n * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.\n */\n@Directive({\n\tselector: \"[cdsText], [ibmText]\"\n})\nexport class TextInput {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` input theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@HostBinding(\"class.cds--text-input\") inputClass = true;\n\n\t/**\n\t * @todo - remove `cds--text-input--${size}` classes in v12\n\t */\n\t@HostBinding(\"class.cds--text-input--sm\") get isSizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--text-input--md\") get isSizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--text-input--lg\") get isSizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t// Size\n\t@HostBinding(\"class.cds--layout--size-sm\") get sizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get sizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get sizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t@HostBinding(\"class.cds--text-input--invalid\") @Input() invalid = false;\n\t@HostBinding(\"class.cds--text-input__field-wrapper--warning\") @Input() warn = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\t@HostBinding(\"class.cds--text-input--light\") get isLightTheme() {\n\t\treturn this.theme === \"light\";\n\t}\n}\n",
+            "sourceCode": "import { Directive, HostBinding, Input } from \"@angular/core\";\n\n/**\n * A directive for applying styling to an input element.\n *\n * Example:\n *\n * ```html\n * <input cdsText/>\n * ```\n *\n * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/text-input/code) for more detail.\n */\n@Directive({\n\tselector: \"[cdsText], [ibmText]\"\n})\nexport class TextInput {\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` input theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@HostBinding(\"class.cds--text-input\") inputClass = true;\n\n\t/**\n\t * @todo - remove `cds--text-input--${size}` classes in v12\n\t */\n\t@HostBinding(\"class.cds--text-input--sm\") get isSizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--text-input--md\") get isSizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--text-input--lg\") get isSizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t// Size\n\t@HostBinding(\"class.cds--layout--size-sm\") get sizeSm() {\n\t\treturn this.size === \"sm\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-md\") get sizeMd() {\n\t\treturn this.size === \"md\";\n\t}\n\t@HostBinding(\"class.cds--layout--size-lg\") get sizelg() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\t@HostBinding(\"class.cds--text-input--invalid\") @Input() invalid = false;\n\t@HostBinding(\"class.cds--text-input--warning\") @Input() warn = false;\n\t@HostBinding(\"class.cds--skeleton\") @Input() skeleton = false;\n\t@HostBinding(\"class.cds--text-input--light\") get isLightTheme() {\n\t\treturn this.theme === \"light\";\n\t}\n\n\t@HostBinding(\"attr.data-invalid\") get getInvalidAttribute() {\n\t\treturn this.invalid ? true : undefined;\n\t}\n\n}\n",
             "selector": "[cdsText], [ibmText]",
             "providers": [],
             "hostDirectives": [],
@@ -17599,6 +17668,14 @@
             "deprecated": false,
             "deprecationMessage": "",
             "hostBindings": [
+                {
+                    "name": "attr.data-invalid",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 62,
+                    "type": "boolean",
+                    "decorators": []
+                },
                 {
                     "name": "class.cds--layout--size-lg",
                     "deprecated": false,
@@ -17794,6 +17871,15 @@
                         "returnType": "",
                         "line": 58
                     }
+                },
+                "getInvalidAttribute": {
+                    "name": "getInvalidAttribute",
+                    "getSignature": {
+                        "name": "getInvalidAttribute",
+                        "type": "",
+                        "returnType": "",
+                        "line": 62
+                    }
                 }
             }
         },
@@ -36053,7 +36139,7 @@
         },
         {
             "name": "ListRow",
-            "id": "component-ListRow-a4df99227a20b8139056c28b5a99ebf53dc7674812b105f3176175e3e6adeb92949dc089ce6c7a525c4d3c15715b9a62b42538cd998a0dd0eb25e615143f5722",
+            "id": "component-ListRow-f0012d4f39660aab1eaadab444c33388b76c8676e6f7f27424b27672a115ff901dd52d638fd867189e5f05a38898f5baf387b7d7f1f2669e08d8f7390ce89a6c",
             "file": "src/structured-list/list-row.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -36330,7 +36416,7 @@
             "description": "<p><code>ListRow</code> provides a container for the <code>ListColumn</code>s that make up the body of a structured list.</p>\n<p>Example:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">    &lt;cds-list-row&gt;\n        &lt;cds-list-column&gt;Row 1&lt;/cds-list-column&gt;\n        &lt;cds-list-column nowrap=&quot;true&quot;&gt;Row One&lt;/cds-list-column&gt;\n        &lt;cds-list-column&gt;\n            Lorem ipsum dolor sit amet,\n            consectetur adipiscing elit. Nunc dui magna,\n            finibus id tortor sed, aliquet bibendum augue.\n            Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n            Pellentesque vulputate nisl a porttitor interdum.\n        &lt;/cds-list-column&gt;\n    &lt;/cds-list-row&gt;</code></pre></div>",
             "rawdescription": "\n\n`ListRow` provides a container for the `ListColumn`s that make up the body of a structured list.\n\nExample:\n```html\n\t<cds-list-row>\n\t\t<cds-list-column>Row 1</cds-list-column>\n\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n\t\t<cds-list-column>\n\t\t\tLorem ipsum dolor sit amet,\n\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n\t\t\tPellentesque vulputate nisl a porttitor interdum.\n\t\t</cds-list-column>\n\t</cds-list-row>\n```\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tInput,\n\tHostListener,\n\tViewChild,\n\tElementRef,\n\tEventEmitter,\n\tOutput\n} from \"@angular/core\";\nimport { ListColumn } from \"./list-column.component\";\n\n/**\n * `ListRow` provides a container for the `ListColumn`s that make up the body of a structured list.\n *\n * Example:\n * ```html\n * \t<cds-list-row>\n *\t\t<cds-list-column>Row 1</cds-list-column>\n *\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n *\t\t<cds-list-column>\n *\t\t\tLorem ipsum dolor sit amet,\n *\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t</cds-list-column>\n *\t</cds-list-row>\n * ```\n */\n@Component({\n\tselector: \"cds-list-row, ibm-list-row\",\n\ttemplate: `\n\t\t<ng-content></ng-content>\n\t\t<ng-container *ngIf=\"selection\">\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\tclass=\"cds--structured-list-input cds--visually-hidden\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[name]=\"name\"\n\t\t\t\t[title]=\"label\"\n\t\t\t\t(focus)=\"handleFocus(true)\"\n\t\t\t\t(blur)=\"handleFocus(false)\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t[checked]=\"selected\"/>\n\t\t\t<div class=\"cds--structured-list-td\">\n\t\t\t\t<svg cdsIcon=\"checkmark--filled\" size=\"16\" class=\"cds--structured-list-svg\"></svg>\n\t\t\t</div>\n\t\t</ng-container>\n\t`\n})\nexport class ListRow implements AfterContentInit {\n\t@HostBinding(\"class.cds--structured-list-row--focused-within\") get focusClass() {\n\t\treturn this.isFocused;\n\t}\n\t@Input() @HostBinding(\"class.cds--structured-list-row--selected\") selected = false;\n\t/**\n\t * Applies an accessible label to the row. Defaults to no label.\n\t */\n\t@Input() @HostBinding(\"attr.aria-label\") label;\n\t/**\n\t * The value for the row. Returned via `ngModel` or `selected` event on the containing `StructuredList`.\n\t */\n\t@Input() value;\n\t/**\n\t * Internal event used to notify the containing `StructuredList` of changes.\n\t */\n\t@Output() change: EventEmitter<Event> = new EventEmitter();\n\n\t/**\n\t * Set by the containing `StructuredList`. Enables or disables row level selection features.\n\t */\n\tselection = false;\n\t/**\n\t * Set by the containing `StructuredList`. When `selection = true`, used for the `name` property on the radio input.\n\t */\n\tname = \"list\";\n\n\t@HostBinding(\"class.cds--structured-list-row\") wrapper = true;\n\t@HostBinding(\"attr.role\") role = \"row\";\n\n\t@ContentChildren(ListColumn) columns: QueryList<ListColumn>;\n\n\t@ViewChild(\"input\") input: ElementRef;\n\n\tprivate isFocused = false;\n\n\tngAfterContentInit() {\n\t\tthis.columns.forEach(column => {\n\t\t\tcolumn.isBodyColumn = true;\n\t\t\tcolumn.isHeaderColumn = false;\n\t\t});\n\t}\n\n\t@HostListener(\"click\")\n\tonclick() {\n\t\tif (this.selection) {\n\t\t\tthis.input.nativeElement.click();\n\t\t}\n\t}\n\t\n\tonChange(event) {\n\t\tthis.change.emit(event);\n\t}\n\n\thandleFocus(isFocused) {\n\t\tif (this.selection) {\n\t\t\tthis.isFocused = isFocused;\n\t\t\tif (this.isFocused) {\n\t\t\t\tthis.input.nativeElement.click();\n\t\t\t}\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tHostBinding,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tInput,\n\tHostListener,\n\tViewChild,\n\tElementRef,\n\tEventEmitter,\n\tOutput\n} from \"@angular/core\";\nimport { ListColumn } from \"./list-column.component\";\n\n/**\n * `ListRow` provides a container for the `ListColumn`s that make up the body of a structured list.\n *\n * Example:\n * ```html\n * \t<cds-list-row>\n *\t\t<cds-list-column>Row 1</cds-list-column>\n *\t\t<cds-list-column nowrap=\"true\">Row One</cds-list-column>\n *\t\t<cds-list-column>\n *\t\t\tLorem ipsum dolor sit amet,\n *\t\t\tconsectetur adipiscing elit. Nunc dui magna,\n *\t\t\tfinibus id tortor sed, aliquet bibendum augue.\n *\t\t\tAenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.\n *\t\t\tPellentesque vulputate nisl a porttitor interdum.\n *\t\t</cds-list-column>\n *\t</cds-list-row>\n * ```\n */\n@Component({\n\tselector: \"cds-list-row, ibm-list-row\",\n\ttemplate: `\n\t\t<ng-content></ng-content>\n\t\t<ng-container *ngIf=\"selection\">\n\t\t\t<input\n\t\t\t\t#input\n\t\t\t\tclass=\"cds--structured-list-input cds--visually-hidden\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[name]=\"name\"\n\t\t\t\t[title]=\"label\"\n\t\t\t\t(focus)=\"handleFocus(true)\"\n\t\t\t\t(blur)=\"handleFocus(false)\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t[checked]=\"selected\"/>\n\t\t\t<div class=\"cds--structured-list-td\">\n\t\t\t\t<svg cdsIcon=\"checkmark--filled\" size=\"16\" class=\"cds--structured-list-svg\"></svg>\n\t\t\t</div>\n\t\t</ng-container>\n\t`\n})\nexport class ListRow implements AfterContentInit {\n\t@HostBinding(\"class.cds--structured-list-row--focused-within\") get focusClass() {\n\t\treturn this.isFocused;\n\t}\n\t@Input() @HostBinding(\"class.cds--structured-list-row--selected\") selected = false;\n\t/**\n\t * Applies an accessible label to the row. Defaults to no label.\n\t */\n\t@Input() @HostBinding(\"attr.aria-label\") label;\n\t/**\n\t * The value for the row. Returned via `ngModel` or `selected` event on the containing `StructuredList`.\n\t */\n\t@Input() value;\n\t/**\n\t * Internal event used to notify the containing `StructuredList` of changes.\n\t */\n\t@Output() change: EventEmitter<Event> = new EventEmitter();\n\n\t/**\n\t * Set by the containing `StructuredList`. Enables or disables row level selection features.\n\t */\n\tselection = false;\n\t/**\n\t * Set by the containing `StructuredList`. When `selection = true`, used for the `name` property on the radio input.\n\t */\n\tname = \"list\";\n\n\t@HostBinding(\"class.cds--structured-list-row\") wrapper = true;\n\t@HostBinding(\"attr.role\") role = \"row\";\n\n\t@ContentChildren(ListColumn) columns: QueryList<ListColumn>;\n\n\t@ViewChild(\"input\") input: ElementRef;\n\n\tprivate isFocused = false;\n\n\tngAfterContentInit() {\n\t\tthis.columns.forEach(column => {\n\t\t\tcolumn.isBodyColumn = true;\n\t\t\tcolumn.isHeaderColumn = false;\n\t\t});\n\t}\n\n\t@HostListener(\"click\")\n\tonclick() {\n\t\tif (this.selection) {\n\t\t\tthis.input.nativeElement.click();\n\t\t}\n\t}\n\n\tonChange(event) {\n\t\tthis.change.emit(event);\n\t}\n\n\thandleFocus(isFocused) {\n\t\tif (this.selection) {\n\t\t\tthis.isFocused = isFocused;\n\t\t\tif (this.isFocused) {\n\t\t\t\tthis.input.nativeElement.click();\n\t\t\t}\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -42898,7 +42984,7 @@
         },
         {
             "name": "PasswordInputLabelComponent",
-            "id": "component-PasswordInputLabelComponent-bdf59639f1e7e3881c59e6c091bbac5cd869c69dea799b0ccee5cabb9a1b1bacca79e8946a89b275174e24d1b802f6931d7ece15aa95b8f171dde4453403e6c1",
+            "id": "component-PasswordInputLabelComponent-66bc6cdf361c02f00c681dad885fc33fd946196e164238ef7762e4784d4261bc77288a93ecc65c7b88a2f10aa34b41ad11c685094cddc10f623ccd2daa75684b",
             "file": "src/input/password-input-label.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -42908,7 +42994,7 @@
             "selector": "cds-password-label, ibm-password-label",
             "styleUrls": [],
             "styles": [],
-            "template": "<label\n\t[for]=\"labelInputID\"\n\t[attr.aria-label]=\"ariaLabel\"\n\tclass=\"cds--label\"\n\t[ngClass]=\"{\n\t\t'cds--label--disabled': disabled,\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t<ng-template #labelContent>\n\t\t<ng-content></ng-content>\n\t</ng-template>\n</label>\n\n<div class=\"cds--text-input__field-outer-wrapper\">\n\t<div\n\tclass=\"cds--text-input__field-wrapper\"\n\t[ngClass]=\"{\n\t\t'cds--text-input__field-wrapper--warning': warn\n\t}\"\n\t[attr.data-invalid]=\"invalid ? true : null\"\n\t#wrapper>\n\t\t<svg\n\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t</svg>\n\t\t<ng-content select=\"[cdsPassword], [ibmPassword]\"></ng-content>\n\t\t<cds-tooltip\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t[description]=\"passwordIsVisible ? hidePasswordLabel : showPasswordLabel\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[dropShadow]=\"dropShadow\"\n\t\t\t[highContrast]=\"highContrast\"\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t[autoAlign]=\"autoAlign\"\n\t\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\t\tclass=\"cds--toggle-password-tooltip\">\n\t\t\t\t<div class=\"cds--tooltip-trigger__wrapper\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--text-input--password__visibility__toggle cds--btn cds--tooltip__trigger cds--tooltip--a11y\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t(click)=\"handleTogglePasswordVisibility($event)\">\n\t\t\t\t\t\t<svg *ngIf=\"passwordIsVisible\" cdsIcon=\"view--off\" class=\"cds--icon-visibility-off\" size=\"16\"></svg>\n\t\t\t\t\t\t<svg *ngIf=\"!passwordIsVisible\" cdsIcon=\"view\" class=\"cds--icon-visibility-on\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t</cds-tooltip>\n\t</div>\n\t<div\n\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{ 'cds--form__helper-text--disabled': disabled }\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{ helperText }}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\n\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</div>\n",
+            "template": "<ng-container *ngIf=\"skeleton\">\n\t<span class=\"cds--label cds--skeleton\"></span>\n\t<div class=\"cds--text-input cds--skeleton\"></div>\n</ng-container>\n<label\n\t*ngIf=\"!skeleton\"\n\t[for]=\"labelInputID\"\n\t[attr.aria-label]=\"ariaLabel\"\n\tclass=\"cds--label\"\n\t[ngClass]=\"{\n\t\t'cds--label--disabled': disabled\n\t}\">\n\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t<ng-template #labelContent>\n\t\t<ng-content></ng-content>\n\t</ng-template>\n</label>\n\n<div *ngIf=\"!skeleton\" class=\"cds--text-input__field-outer-wrapper\">\n\t<div\n\tclass=\"cds--text-input__field-wrapper\"\n\t[ngClass]=\"{\n\t\t'cds--text-input__field-wrapper--warning': warn\n\t}\"\n\t[attr.data-invalid]=\"invalid ? true : null\"\n\t#wrapper>\n\t\t<svg\n\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t</svg>\n\t\t<ng-content select=\"[cdsPassword], [ibmPassword]\"></ng-content>\n\t\t<cds-tooltip\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t[description]=\"passwordIsVisible ? hidePasswordLabel : showPasswordLabel\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[caret]=\"caret\"\n\t\t\t[dropShadow]=\"dropShadow\"\n\t\t\t[highContrast]=\"highContrast\"\n\t\t\t[isOpen]=\"isOpen\"\n\t\t\t[align]=\"align\"\n\t\t\t[autoAlign]=\"autoAlign\"\n\t\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\t\tclass=\"cds--toggle-password-tooltip\">\n\t\t\t\t<div class=\"cds--tooltip-trigger__wrapper\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"cds--text-input--password__visibility__toggle cds--btn cds--tooltip__trigger cds--tooltip--a11y\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t(click)=\"handleTogglePasswordVisibility($event)\">\n\t\t\t\t\t\t<svg *ngIf=\"passwordIsVisible\" cdsIcon=\"view--off\" class=\"cds--icon-visibility-off\" size=\"16\"></svg>\n\t\t\t\t\t\t<svg *ngIf=\"!passwordIsVisible\" cdsIcon=\"view\" class=\"cds--icon-visibility-on\" size=\"16\"></svg>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t</cds-tooltip>\n\n\t\t<ng-container *ngIf=\"fluid\">\n\t\t\t<hr class=\"cds--text-input__divider\" />\n\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</ng-container>\n\t</div>\n\t<ng-container *ngIf=\"!fluid\">\n\t\t<div\n\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{ 'cds--form__helper-text--disabled': disabled }\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{ helperText }}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\n\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t</ng-container>\n</div>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -42919,7 +43005,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAria label for label.\n",
                     "description": "<p>Aria label for label.</p>\n",
-                    "line": 188,
+                    "line": 206,
                     "type": "string",
                     "decorators": []
                 },
@@ -42930,7 +43016,18 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFlag for disabled label.\n",
                     "description": "<p>Flag for disabled label.</p>\n",
-                    "line": 143,
+                    "line": 161,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "fluid",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nExperimental: enable fluid state\n",
+                    "description": "<p>Experimental: enable fluid state</p>\n",
+                    "line": 221,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -42940,7 +43037,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOptional helper text under the label.\n",
                     "description": "<p>Optional helper text under the label.</p>\n",
-                    "line": 163,
+                    "line": 181,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -42951,7 +43048,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTooltip text for hiding password.\n",
                     "description": "<p>Tooltip text for hiding password.</p>\n",
-                    "line": 193,
+                    "line": 211,
                     "type": "string",
                     "decorators": []
                 },
@@ -42962,7 +43059,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFlag for an invalid label component.\n",
                     "description": "<p>Flag for an invalid label component.</p>\n",
-                    "line": 173,
+                    "line": 191,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -42972,7 +43069,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the invalid text.\n",
                     "description": "<p>Sets the invalid text.</p>\n",
-                    "line": 168,
+                    "line": 186,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -42983,7 +43080,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nID for the input item associated with the label.\n",
                     "description": "<p>ID for the input item associated with the label.</p>\n",
-                    "line": 128,
+                    "line": 146,
                     "type": "string",
                     "decorators": []
                 },
@@ -42993,7 +43090,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTemplate for label content.\n",
                     "description": "<p>Template for label content.</p>\n",
-                    "line": 153,
+                    "line": 171,
                     "type": "TemplateRef<any>",
                     "decorators": []
                 },
@@ -43003,7 +43100,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTemplate for password input.\n",
                     "description": "<p>Template for password input.</p>\n",
-                    "line": 158,
+                    "line": 176,
                     "type": "TemplateRef<any>",
                     "decorators": []
                 },
@@ -43014,7 +43111,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTooltip text for showing password.\n",
                     "description": "<p>Tooltip text for showing password.</p>\n",
-                    "line": 198,
+                    "line": 216,
                     "type": "string",
                     "decorators": []
                 },
@@ -43025,7 +43122,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFlag for loading (skeleton) label.\n",
                     "description": "<p>Flag for loading (skeleton) label.</p>\n",
-                    "line": 148,
+                    "line": 166,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -43036,7 +43133,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFlag for showing a warning.\n",
                     "description": "<p>Flag for showing a warning.</p>\n",
-                    "line": 178,
+                    "line": 196,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -43046,7 +43143,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nWarning text.\n",
                     "description": "<p>Warning text.</p>\n",
-                    "line": 183,
+                    "line": 201,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -43173,7 +43270,7 @@
                     "type": "\"password\" | \"text\"",
                     "optional": false,
                     "description": "<p>Type for input field, either password or text.</p>\n",
-                    "line": 133,
+                    "line": 151,
                     "rawdescription": "\n\nType for input field, either password or text.\n"
                 },
                 {
@@ -43184,7 +43281,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Binding for applying class to host element.</p>\n",
-                    "line": 208,
+                    "line": 231,
                     "rawdescription": "\n\nBinding for applying class to host element.\n",
                     "decorators": [
                         {
@@ -43204,7 +43301,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Counter for generating unique labelInputID.</p>\n",
-                    "line": 121,
+                    "line": 139,
                     "rawdescription": "\n\nCounter for generating unique labelInputID.\n",
                     "modifierKind": [
                         126
@@ -43218,7 +43315,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 209,
+                    "line": 232,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -43237,7 +43334,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Flag for checking if password is visible.</p>\n",
-                    "line": 138,
+                    "line": 156,
                     "rawdescription": "\n\nFlag for checking if password is visible.\n"
                 },
                 {
@@ -43247,7 +43344,7 @@
                     "type": "PasswordInput",
                     "optional": false,
                     "description": "",
-                    "line": 123,
+                    "line": 141,
                     "decorators": [
                         {
                             "name": "ContentChild",
@@ -43266,7 +43363,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 210,
+                    "line": 233,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -43284,7 +43381,7 @@
                     "type": "ElementRef<HTMLDivElement>",
                     "optional": false,
                     "description": "<p>Reference to the wrapper element.</p>\n",
-                    "line": 203,
+                    "line": 226,
                     "rawdescription": "\n\nReference to the wrapper element.\n",
                     "decorators": [
                         {
@@ -43304,7 +43401,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 253,
+                    "line": 284,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandler for toggling password visibility.\n",
@@ -43326,7 +43423,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 246,
+                    "line": 277,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nFunction to check if a value is a TemplateRef.\n",
@@ -43337,8 +43434,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 6424,
-                                "end": 6429,
+                                "pos": 7573,
+                                "end": 7578,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -43349,8 +43446,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 6418,
-                                "end": 6423,
+                                "pos": 7567,
+                                "end": 7572,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -43361,8 +43458,8 @@
                         },
                         {
                             "tagName": {
-                                "pos": 6453,
-                                "end": 6460,
+                                "pos": 7602,
+                                "end": 7609,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -43384,7 +43481,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nBinding for applying class to host element.\n",
                     "description": "<p>Binding for applying class to host element.</p>\n",
-                    "line": 208,
+                    "line": 231,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -43393,7 +43490,23 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 209,
+                    "line": 232,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--text-input--fluid",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 238,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--text-input--fluid__skeleton",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 242,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -43402,7 +43515,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 210,
+                    "line": 233,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -43410,7 +43523,7 @@
                     "name": "class.cds--text-input-wrapper--readonly",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 211,
+                    "line": 234,
                     "type": "any",
                     "decorators": []
                 }
@@ -43421,7 +43534,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { InputModule } from &#39;carbon-components-angular&#39;;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-password-label&gt;\n    Label\n    &lt;input cdsPassword&gt;\n&lt;/cds-password-label&gt;</code></pre></div><p><a href=\"../../?path=/story/components-input--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InputModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-password-label>\n\tLabel\n\t<input cdsPassword>\n</cds-password-label>\n```\n\n[See demo](../../?path=/story/components-input--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef,\n\tContentChild\n} from \"@angular/core\";\nimport { PasswordInput } from \"./password.directive\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-password-label>\n * \tLabel\n *\t<input cdsPassword>\n * </cds-password-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-password-label, ibm-password-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\n\t\t<div class=\"cds--text-input__field-outer-wrapper\">\n\t\t\t<div\n\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"invalid ? true : null\"\n\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-content select=\"[cdsPassword], [ibmPassword]\"></ng-content>\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t[description]=\"passwordIsVisible ? hidePasswordLabel : showPasswordLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[dropShadow]=\"dropShadow\"\n\t\t\t\t\t[highContrast]=\"highContrast\"\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"autoAlign\"\n\t\t\t\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t\t\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\t\t\t\tclass=\"cds--toggle-password-tooltip\">\n\t\t\t\t\t\t<div class=\"cds--tooltip-trigger__wrapper\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"cds--text-input--password__visibility__toggle cds--btn cds--tooltip__trigger cds--tooltip--a11y\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t(click)=\"handleTogglePasswordVisibility($event)\">\n\t\t\t\t\t\t\t\t<svg *ngIf=\"passwordIsVisible\" cdsIcon=\"view--off\" class=\"cds--icon-visibility-off\" size=\"16\"></svg>\n\t\t\t\t\t\t\t\t<svg *ngIf=\"!passwordIsVisible\" cdsIcon=\"view\" class=\"cds--icon-visibility-on\" size=\"16\"></svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{ 'cds--form__helper-text--disabled': disabled }\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{ helperText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n    `\n})\n/**\n * Represents the Password Input Label Component.\n */\nexport class PasswordInputLabelComponent extends BaseIconButton implements AfterViewInit {\n\t/**\n\t * Counter for generating unique labelInputID.\n\t */\n\tstatic labelCounter = 0;\n\n\t@ContentChild(PasswordInput) textInput: PasswordInput;\n\n\t/**\n\t * ID for the input item associated with the label.\n\t */\n\t@Input() labelInputID = \"cds-password-input-\" + PasswordInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Type for input field, either password or text.\n\t */\n\tinputType: \"password\" | \"text\" = \"password\";\n\n\t/**\n\t* Flag for checking if password is visible.\n\t*/\n\tpasswordIsVisible = false;\n\n\t/**\n\t * Flag for disabled label.\n\t */\n\t@Input() disabled = false;\n\n\t/**\n\t * Flag for loading (skeleton) label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Template for label content.\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\n\t/**\n\t * Template for password input.\n\t */\n\t@Input() passwordInputTemplate: TemplateRef<any>;\n\n\t/**\n\t * Optional helper text under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t/**\n\t * Flag for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * Flag for showing a warning.\n\t */\n\t@Input() warn = false;\n\n\t/**\n\t * Warning text.\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Aria label for label.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Tooltip text for hiding password.\n\t */\n\t@Input() hidePasswordLabel = \"Hide password\";\n\n\t/**\n\t * Tooltip text for showing password.\n\t */\n\t@Input() showPasswordLabel = \"Show password\";\n\n\t/**\n\t * Reference to the wrapper element.\n\t */\n\t@ViewChild(\"wrapper\", { static: true }) wrapper: ElementRef<HTMLDivElement>;\n\n\t/**\n\t * Binding for applying class to host element.\n\t */\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\t@HostBinding(\"class.cds--password-input-wrapper\") passwordInputWrapper = true;\n\t@HostBinding(\"class.cds--text-input-wrapper\") textInputWrapper = true;\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly ?? false;\n\t}\n\n\t/**\n\t * Constructor for PasswordInputLabelComponent.\n\t * @param changeDetectorRef - Reference to ChangeDetectorRef.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {\n\t\tsuper();\n\t}\n\n\t/**\n\t * Lifecycle hook called after the view has been initialized to set the ID of the input element\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\tconst inputElement =\n\t\t\t\tthis.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Function to check if a value is a TemplateRef.\n\t * @param value - Value to check.\n\t * @returns Whether the value is a TemplateRef.\n\t */\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handler for toggling password visibility.\n\t */\n\tpublic handleTogglePasswordVisibility() {\n\t\tthis.inputType = this.inputType === \"password\" ? \"text\" : \"password\";\n\t\tthis.textInput.type = this.inputType;\n\t\tthis.passwordIsVisible = this.inputType === \"text\";\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef,\n\tContentChild\n} from \"@angular/core\";\nimport { PasswordInput } from \"./password.directive\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-password-label>\n * \tLabel\n *\t<input cdsPassword>\n * </cds-password-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-password-label, ibm-password-label\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t<span class=\"cds--label cds--skeleton\"></span>\n\t\t\t<div class=\"cds--text-input cds--skeleton\"></div>\n\t\t</ng-container>\n\t\t<label\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--text-input__field-outer-wrapper\">\n\t\t\t<div\n\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"invalid ? true : null\"\n\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-content select=\"[cdsPassword], [ibmPassword]\"></ng-content>\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t[description]=\"passwordIsVisible ? hidePasswordLabel : showPasswordLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[dropShadow]=\"dropShadow\"\n\t\t\t\t\t[highContrast]=\"highContrast\"\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"autoAlign\"\n\t\t\t\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t\t\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\t\t\t\tclass=\"cds--toggle-password-tooltip\">\n\t\t\t\t\t\t<div class=\"cds--tooltip-trigger__wrapper\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"cds--text-input--password__visibility__toggle cds--btn cds--tooltip__trigger cds--tooltip--a11y\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t(click)=\"handleTogglePasswordVisibility($event)\">\n\t\t\t\t\t\t\t\t<svg *ngIf=\"passwordIsVisible\" cdsIcon=\"view--off\" class=\"cds--icon-visibility-off\" size=\"16\"></svg>\n\t\t\t\t\t\t\t\t<svg *ngIf=\"!passwordIsVisible\" cdsIcon=\"view\" class=\"cds--icon-visibility-on\" size=\"16\"></svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t</cds-tooltip>\n\n\t\t\t\t<ng-container *ngIf=\"fluid\">\n\t\t\t\t\t<hr class=\"cds--text-input__divider\" />\n\t\t\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<ng-container *ngIf=\"!fluid\">\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{ 'cds--form__helper-text--disabled': disabled }\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{ helperText }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\n\t\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\n\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</div>\n    `\n})\n/**\n * Represents the Password Input Label Component.\n */\nexport class PasswordInputLabelComponent extends BaseIconButton implements AfterViewInit {\n\t/**\n\t * Counter for generating unique labelInputID.\n\t */\n\tstatic labelCounter = 0;\n\n\t@ContentChild(PasswordInput) textInput: PasswordInput;\n\n\t/**\n\t * ID for the input item associated with the label.\n\t */\n\t@Input() labelInputID = \"cds-password-input-\" + PasswordInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Type for input field, either password or text.\n\t */\n\tinputType: \"password\" | \"text\" = \"password\";\n\n\t/**\n\t* Flag for checking if password is visible.\n\t*/\n\tpasswordIsVisible = false;\n\n\t/**\n\t * Flag for disabled label.\n\t */\n\t@Input() disabled = false;\n\n\t/**\n\t * Flag for loading (skeleton) label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Template for label content.\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\n\t/**\n\t * Template for password input.\n\t */\n\t@Input() passwordInputTemplate: TemplateRef<any>;\n\n\t/**\n\t * Optional helper text under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t/**\n\t * Flag for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * Flag for showing a warning.\n\t */\n\t@Input() warn = false;\n\n\t/**\n\t * Warning text.\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Aria label for label.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Tooltip text for hiding password.\n\t */\n\t@Input() hidePasswordLabel = \"Hide password\";\n\n\t/**\n\t * Tooltip text for showing password.\n\t */\n\t@Input() showPasswordLabel = \"Show password\";\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\n\t/**\n\t * Reference to the wrapper element.\n\t */\n\t@ViewChild(\"wrapper\", { static: true }) wrapper: ElementRef<HTMLDivElement>;\n\n\t/**\n\t * Binding for applying class to host element.\n\t */\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\t@HostBinding(\"class.cds--password-input-wrapper\") passwordInputWrapper = true;\n\t@HostBinding(\"class.cds--text-input-wrapper\") textInputWrapper = true;\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly ?? false;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid\") get fluidClass() {\n\t\treturn this.fluid && !this.skeleton;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeletonClass() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\t/**\n\t * Constructor for PasswordInputLabelComponent.\n\t * @param changeDetectorRef - Reference to ChangeDetectorRef.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {\n\t\tsuper();\n\t}\n\n\t/**\n\t * Lifecycle hook called after the view has been initialized to set the ID of the input element\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\tconst inputElement =\n\t\t\t\tthis.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Function to check if a value is a TemplateRef.\n\t * @param value - Value to check.\n\t * @returns Whether the value is a TemplateRef.\n\t */\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handler for toggling password visibility.\n\t */\n\tpublic handleTogglePasswordVisibility() {\n\t\tthis.inputType = this.inputType === \"password\" ? \"text\" : \"password\";\n\t\tthis.textInput.type = this.inputType;\n\t\tthis.passwordIsVisible = this.inputType === \"text\";\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -43438,13 +43551,13 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 213,
+                "line": 244,
                 "rawdescription": "\n\nConstructor for PasswordInputLabelComponent.\n",
                 "jsdoctags": [
                     {
                         "name": {
-                            "pos": 5769,
-                            "end": 5786,
+                            "pos": 6918,
+                            "end": 6935,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
@@ -43455,8 +43568,8 @@
                         "deprecated": false,
                         "deprecationMessage": "",
                         "tagName": {
-                            "pos": 5763,
-                            "end": 5768,
+                            "pos": 6912,
+                            "end": 6917,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
@@ -43480,7 +43593,25 @@
                         "name": "isReadonly",
                         "type": "",
                         "returnType": "",
-                        "line": 211
+                        "line": 234
+                    }
+                },
+                "fluidClass": {
+                    "name": "fluidClass",
+                    "getSignature": {
+                        "name": "fluidClass",
+                        "type": "",
+                        "returnType": "",
+                        "line": 238
+                    }
+                },
+                "fluidSkeletonClass": {
+                    "name": "fluidSkeletonClass",
+                    "getSignature": {
+                        "name": "fluidSkeletonClass",
+                        "type": "",
+                        "returnType": "",
+                        "line": 242
                     }
                 }
             }
@@ -61867,7 +61998,7 @@
         },
         {
             "name": "TextInputLabelComponent",
-            "id": "component-TextInputLabelComponent-40a5fa4a99975f64709f8c663f9f594f16d2aef26597ae1695aeb483431ffb3d85328e3802a0c33cf1aafce2bb9ab78987fa1a1f0c477d2c40cf6413467f0102",
+            "id": "component-TextInputLabelComponent-f14584fce8ba15041c0135a0a64c5baa5afb8391618e7ef829969d866a2a97415598f29236a4b0a802d28233400d80b76e8a4865f168ffa1e26c3e267ce8b538",
             "file": "src/input/text-input-label.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -61877,7 +62008,7 @@
             "selector": "cds-text-label, ibm-text-label",
             "styleUrls": [],
             "styles": [],
-            "template": "<label\n\t[for]=\"labelInputID\"\n\t[attr.aria-label]=\"ariaLabel\"\n\tclass=\"cds--label\"\n\t[ngClass]=\"{\n\t\t'cds--label--disabled': disabled,\n\t\t'cds--skeleton': skeleton\n\t}\">\n\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t<ng-template #labelContent>\n\t\t<ng-content></ng-content>\n\t</ng-template>\n</label>\n<div\n\tclass=\"cds--text-input__field-wrapper\"\n\t[ngClass]=\"{\n\t\t'cds--text-input__field-wrapper--warning': warn\n\t}\"\n\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t#wrapper>\n\t<svg\n\t\t*ngIf=\"invalid\"\n\t\tcdsIcon=\"warning--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--text-input__invalid-icon\">\n\t</svg>\n\t<svg\n\t\t*ngIf=\"!invalid && warn\"\n\t\tcdsIcon=\"warning--alt--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t</svg>\n\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t<ng-template #textInputContent>\n\t\t<ng-content select=\"[cdsText],[ibmText],input[type=text],div\"></ng-content>\n\t</ng-template>\n</div>\n<div\n\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\tclass=\"cds--form__helper-text\"\n\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n</div>\n<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n</div>\n<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n</div>\n\t",
+            "template": "<ng-container *ngIf=\"skeleton\">\n\t<span class=\"cds--label cds--skeleton\"></span>\n\t<div class=\"cds--text-input cds--skeleton\"></div>\n</ng-container>\n<label\n\t*ngIf=\"!skeleton\"\n\t[for]=\"labelInputID\"\n\t[attr.aria-label]=\"ariaLabel\"\n\tclass=\"cds--label\"\n\t[ngClass]=\"{\n\t\t'cds--label--disabled': disabled\n\t}\">\n\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t<ng-template #labelContent>\n\t\t<ng-content></ng-content>\n\t</ng-template>\n</label>\n<div *ngIf=\"!skeleton\" class=\"cds--text-input__field-outer-wrapper\">\n\t<div\n\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t}\"\n\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t#wrapper>\n\t\t<svg\n\t\t\t*ngIf=\"invalid && !warn\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t</svg>\n\t\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t\t<ng-template #textInputContent>\n\t\t\t<ng-content select=\"[cdsText],[ibmText],input[type=text],div\"></ng-content>\n\t\t</ng-template>\n\n\t\t<ng-container *ngIf=\"fluid\">\n\t\t\t<hr class=\"cds--text-input__divider\" />\n\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</ng-container>\n\t</div>\n\t<ng-container *ngIf=\"!fluid\">\n\t\t<div\n\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t</ng-container>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -61888,7 +62019,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet the arialabel for label\n",
                     "description": "<p>Set the arialabel for label</p>\n",
-                    "line": 134,
+                    "line": 154,
                     "type": "string",
                     "decorators": []
                 },
@@ -61899,7 +62030,18 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a disabled label.\n",
                     "description": "<p>Set to <code>true</code> for a disabled label.</p>\n",
-                    "line": 99,
+                    "line": 119,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "fluid",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nExperimental: enable fluid state\n",
+                    "description": "<p>Experimental: enable fluid state</p>\n",
+                    "line": 159,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61909,7 +62051,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOptional helper text that appears under the label.\n",
                     "description": "<p>Optional helper text that appears under the label.</p>\n",
-                    "line": 114,
+                    "line": 134,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -61920,7 +62062,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for an invalid label component.\n",
                     "description": "<p>Set to <code>true</code> for an invalid label component.</p>\n",
-                    "line": 122,
+                    "line": 142,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61930,7 +62072,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the invalid text.\n",
                     "description": "<p>Sets the invalid text.</p>\n",
-                    "line": 118,
+                    "line": 138,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -61941,7 +62083,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe id of the input item associated with the `Label`. This value is also used to associate the `Label` with\nits input counterpart through the 'for' attribute.\n",
                     "description": "<p>The id of the input item associated with the <code>Label</code>. This value is also used to associate the <code>Label</code> with\nits input counterpart through the &#39;for&#39; attribute.</p>\n",
-                    "line": 94,
+                    "line": 114,
                     "type": "string",
                     "decorators": []
                 },
@@ -61951,7 +62093,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHelper input property for ease of migration\nSince we cannot pass ng-content down easily from label component, we will accept the templates\n",
                     "description": "<p>Helper input property for ease of migration\nSince we cannot pass ng-content down easily from label component, we will accept the templates</p>\n",
-                    "line": 109,
+                    "line": 129,
                     "type": "TemplateRef<any>",
                     "decorators": []
                 },
@@ -61962,7 +62104,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a loading label.\n",
                     "description": "<p>Set to <code>true</code> for a loading label.</p>\n",
-                    "line": 103,
+                    "line": 123,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61970,7 +62112,7 @@
                     "name": "textInputTemplate",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 110,
+                    "line": 130,
                     "type": "TemplateRef<any>",
                     "decorators": []
                 },
@@ -61981,7 +62123,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
-                    "line": 126,
+                    "line": 146,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -61991,7 +62133,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text\n",
                     "description": "<p>Sets the warning text</p>\n",
-                    "line": 130,
+                    "line": 150,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 }
@@ -62006,7 +62148,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 139,
+                    "line": 164,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -62025,12 +62167,31 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Used to build the id of the input item associated with the <code>Label</code>.</p>\n",
-                    "line": 89,
+                    "line": 109,
                     "rawdescription": "\n\nUsed to build the id of the input item associated with the `Label`.\n",
                     "modifierKind": [
                         126
                     ]
                 },
+                {
+                    "name": "textInputWrapper",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 166,
+                    "decorators": [
+                        {
+                            "name": "HostBinding",
+                            "stringifiedArguments": "'class.cds--text-input-wrapper'"
+                        }
+                    ],
+                    "modifierKind": [
+                        170
+                    ]
+                },
                 {
                     "name": "wrapper",
                     "deprecated": false,
@@ -62038,7 +62199,7 @@
                     "type": "ElementRef<HTMLDivElement>",
                     "optional": false,
                     "description": "",
-                    "line": 137,
+                    "line": 162,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -62064,7 +62225,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 178,
+                    "line": 213,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -62091,7 +62252,32 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 139,
+                    "line": 164,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--text-input--fluid",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 172,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--text-input--fluid__skeleton",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 176,
+                    "type": "boolean",
+                    "decorators": []
+                },
+                {
+                    "name": "class.cds--text-input-wrapper",
+                    "defaultValue": "true",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 166,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -62099,7 +62285,7 @@
                     "name": "class.cds--text-input-wrapper--readonly",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 141,
+                    "line": 168,
                     "type": "any",
                     "decorators": []
                 }
@@ -62110,7 +62296,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { InputModule } from &#39;carbon-components-angular&#39;;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-text-label&gt;\n    Label\n    &lt;input cdsText type=&quot;text&quot; class=&quot;input-field&quot;&gt;\n&lt;/cds-text-label&gt;</code></pre></div><p><a href=\"../../?path=/story/components-input--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InputModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-text-label>\n\tLabel\n\t<input cdsText type=\"text\" class=\"input-field\">\n</cds-text-label>\n```\n\n[See demo](../../?path=/story/components-input--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-text-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-text-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-text-label, ibm-text-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t#wrapper>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t\t\t<ng-template #textInputContent>\n\t\t\t\t<ng-content select=\"[cdsText],[ibmText],input[type=text],div\"></ng-content>\n\t\t\t</ng-template>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t`\n})\nexport class TextInputLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-text-input-\" + TextInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textInputTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly ?? false;\n\t}\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tHostBinding,\n\tInput,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-text-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-text-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-text-label, ibm-text-label\",\n\ttemplate: `\n\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t<span class=\"cds--label cds--skeleton\"></span>\n\t\t\t<div class=\"cds--text-input cds--skeleton\"></div>\n\t\t</ng-container>\n\t\t<label\n\t\t\t*ngIf=\"!skeleton\"\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div *ngIf=\"!skeleton\" class=\"cds--text-input__field-outer-wrapper\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t\t}\"\n\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"invalid && !warn\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t\t\t\t<ng-template #textInputContent>\n\t\t\t\t\t<ng-content select=\"[cdsText],[ibmText],input[type=text],div\"></ng-content>\n\t\t\t\t</ng-template>\n\n\t\t\t\t<ng-container *ngIf=\"fluid\">\n\t\t\t\t\t<hr class=\"cds--text-input__divider\" />\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<ng-container *ngIf=\"!fluid\">\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</div>\n\t`\n})\nexport class TextInputLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-text-input-\" + TextInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textInputTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t@HostBinding(\"class.cds--text-input-wrapper\") textInputWrapper = true;\n\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly ?? false;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid\") get fluidClass() {\n\t\treturn this.fluid && !this.skeleton;\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeletonClass() {\n\t\treturn this.fluid && this.skeleton;\n\t}\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -62127,7 +62313,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 143,
+                "line": 178,
                 "rawdescription": "\n\nCreates an instance of Label.\n",
                 "jsdoctags": [
                     {
@@ -62152,7 +62338,25 @@
                         "name": "isReadonly",
                         "type": "",
                         "returnType": "",
-                        "line": 141
+                        "line": 168
+                    }
+                },
+                "fluidClass": {
+                    "name": "fluidClass",
+                    "getSignature": {
+                        "name": "fluidClass",
+                        "type": "",
+                        "returnType": "",
+                        "line": 172
+                    }
+                },
+                "fluidSkeletonClass": {
+                    "name": "fluidSkeletonClass",
+                    "getSignature": {
+                        "name": "fluidSkeletonClass",
+                        "type": "",
+                        "returnType": "",
+                        "line": 176
                     }
                 }
             }
@@ -70181,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",
@@ -70198,6 +70402,9 @@
                     "elements": [
                         {
                             "name": "Link"
+                        },
+                        {
+                            "name": "LinkIconDirective"
                         }
                     ]
                 },
@@ -70210,6 +70417,9 @@
                     "elements": [
                         {
                             "name": "Link"
+                        },
+                        {
+                            "name": "LinkIconDirective"
                         }
                     ]
                 },
@@ -72471,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": "",
@@ -72481,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": "",
@@ -72491,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": "",
@@ -72501,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": "",
@@ -72841,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": "",
@@ -72851,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": "",
@@ -72861,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": "",
@@ -73508,6 +73718,26 @@
                 "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})"
             },
+            {
+                "name": "Fluid",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/input/input.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "Template.bind({})"
+            },
+            {
+                "name": "Fluid",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/input/password.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "Template.bind({})"
+            },
             {
                 "name": "Fluid",
                 "ctype": "miscellaneous",
@@ -73758,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",
@@ -74717,7 +74957,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list\n\t\t\t[border]=\"border\"\n\t\t\t[condensed]=\"condensed\"\n\t\t\t[nowrap]=\"nowrap\"\n\t\t\tselection=\"true\"\n\t\t\t[(ngModel)]=\"valueSelected\">\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 value=\"row1\">\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 value=\"row2\">\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\t<cds-list-row value=\"row3\">\n\t\t\t\t<cds-list-column>Row 3</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Three</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 value=\"row4\">\n\t\t\t\t<cds-list-column>Row 4</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Four</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\t<p>{{valueSelected}}</p>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list\n\t\t\t[condensed]=\"condensed\"\n\t\t\t[selection]=\"true\"\n\t\t\t[(ngModel)]=\"valueSelected\">\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 value=\"row1\">\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 value=\"row2\">\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\t<cds-list-row value=\"row3\">\n\t\t\t\t<cds-list-column>Row 3</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Three</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 value=\"row4\">\n\t\t\t\t<cds-list-column>Row 4</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Four</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\t<p>{{valueSelected}}</p>\n\t`\n})"
             },
             {
                 "name": "SideNavigation",
@@ -74993,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": "",
@@ -75003,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": "",
@@ -75113,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",
@@ -75223,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",
@@ -75387,7 +75627,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-text-label\n\t\t[helperText]=\"helperText\"\n\t\t[invalid]=\"invalid\"\n\t\t[invalidText]=\"invalidText\"\n\t\t[warn]=\"warn\"\n\t\t[disabled]=\"disabled\"\n\t\t[warnText]=\"warnText\">\n\t\t{{label}}\n\t\t<input\n\t\t\tcdsText\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[autocomplete]=\"autocomplete\">\n\t\t</cds-text-label>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-text-label\n\t\t[helperText]=\"helperText\"\n\t\t[invalid]=\"invalid\"\n\t\t[invalidText]=\"invalidText\"\n\t\t[warn]=\"warn\"\n\t\t[disabled]=\"disabled\"\n\t\t[fluid]=\"fluid\"\n\t\t[skeleton]=\"skeleton\"\n\t\t[warnText]=\"warnText\">\n\t\t{{label}}\n\t\t<input\n\t\t\tcdsText\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[autocomplete]=\"autocomplete\">\n\t\t</cds-text-label>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -75397,7 +75637,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-password-label\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[warnText]=\"warnText\">\n\t\t\t{{ label }}\n\t\t\t<input\n\t\t\t\tcdsPassword\n\t\t\t\ttype=\"password\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[warn]=\"warn\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t\t[readonly]=\"readonly\">\n\t\t</cds-password-label>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-password-label\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[warnText]=\"warnText\">\n\t\t\t{{ label }}\n\t\t\t<input\n\t\t\t\tcdsPassword\n\t\t\t\ttype=\"password\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[warn]=\"warn\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t\t[readonly]=\"readonly\">\n\t\t</cds-password-label>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -75587,37 +75827,37 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list [border]=\"border\" [condensed]=\"condensed\" [nowrap]=\"nowrap\">\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})"
+                "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})"
             },
             {
                 "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",
@@ -76091,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",
@@ -79023,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": [
@@ -80011,6 +80261,16 @@
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
+                {
+                    "name": "Fluid",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/input/input.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
                 {
                     "name": "Skeleton",
                     "ctype": "miscellaneous",
@@ -80039,7 +80299,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-text-label\n\t\t[helperText]=\"helperText\"\n\t\t[invalid]=\"invalid\"\n\t\t[invalidText]=\"invalidText\"\n\t\t[warn]=\"warn\"\n\t\t[disabled]=\"disabled\"\n\t\t[warnText]=\"warnText\">\n\t\t{{label}}\n\t\t<input\n\t\t\tcdsText\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[autocomplete]=\"autocomplete\">\n\t\t</cds-text-label>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-text-label\n\t\t[helperText]=\"helperText\"\n\t\t[invalid]=\"invalid\"\n\t\t[invalidText]=\"invalidText\"\n\t\t[warn]=\"warn\"\n\t\t[disabled]=\"disabled\"\n\t\t[fluid]=\"fluid\"\n\t\t[skeleton]=\"skeleton\"\n\t\t[warnText]=\"warnText\">\n\t\t{{label}}\n\t\t<input\n\t\t\tcdsText\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[autocomplete]=\"autocomplete\">\n\t\t</cds-text-label>\n\t`\n})"
                 }
             ],
             "src/input/password.stories.ts": [
@@ -80053,6 +80313,16 @@
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
+                {
+                    "name": "Fluid",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/input/password.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
                 {
                     "name": "Skeleton",
                     "ctype": "miscellaneous",
@@ -80081,7 +80351,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-password-label\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[warnText]=\"warnText\">\n\t\t\t{{ label }}\n\t\t\t<input\n\t\t\t\tcdsPassword\n\t\t\t\ttype=\"password\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[warn]=\"warn\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t\t[readonly]=\"readonly\">\n\t\t</cds-password-label>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-password-label\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[warnText]=\"warnText\">\n\t\t\t{{ label }}\n\t\t\t<input\n\t\t\t\tcdsPassword\n\t\t\t\ttype=\"password\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[warn]=\"warn\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t\t[readonly]=\"readonly\">\n\t\t</cds-password-label>\n\t`\n})"
                 }
             ],
             "src/input/textarea.stories.ts": [
@@ -80211,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",
@@ -80220,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": [
@@ -80887,7 +81177,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list\n\t\t\t[border]=\"border\"\n\t\t\t[condensed]=\"condensed\"\n\t\t\t[nowrap]=\"nowrap\"\n\t\t\tselection=\"true\"\n\t\t\t[(ngModel)]=\"valueSelected\">\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 value=\"row1\">\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 value=\"row2\">\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\t<cds-list-row value=\"row3\">\n\t\t\t\t<cds-list-column>Row 3</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Three</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 value=\"row4\">\n\t\t\t\t<cds-list-column>Row 4</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Four</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\t<p>{{valueSelected}}</p>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list\n\t\t\t[condensed]=\"condensed\"\n\t\t\t[selection]=\"true\"\n\t\t\t[(ngModel)]=\"valueSelected\">\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 value=\"row1\">\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 value=\"row2\">\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\t<cds-list-row value=\"row3\">\n\t\t\t\t<cds-list-column>Row 3</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Three</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 value=\"row4\">\n\t\t\t\t<cds-list-column>Row 4</cds-list-column>\n\t\t\t\t<cds-list-column nowrap=\"true\">Row Four</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\t<p>{{valueSelected}}</p>\n\t`\n})"
                 },
                 {
                     "name": "Skeleton",
@@ -80917,443 +81207,443 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-structured-list [border]=\"border\" [condensed]=\"condensed\" [nowrap]=\"nowrap\">\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})"
+                    "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": [
@@ -86425,8 +86715,8 @@
                 "type": "directive",
                 "linktype": "directive",
                 "name": "TextInput",
-                "coveragePercent": 13,
-                "coverageCount": "2/15",
+                "coveragePercent": 12,
+                "coverageCount": "2/16",
                 "status": "low"
             },
             {
@@ -86439,6 +86729,16 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/input/input.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Fluid",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/input/input.stories.ts",
                 "type": "variable",
@@ -86483,8 +86783,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "PasswordInputLabelComponent",
-                "coveragePercent": 83,
-                "coverageCount": "31/37",
+                "coveragePercent": 80,
+                "coverageCount": "32/40",
                 "status": "very-good"
             },
             {
@@ -86493,7 +86793,7 @@
                 "linktype": "directive",
                 "name": "PasswordInput",
                 "coveragePercent": 5,
-                "coverageCount": "1/19",
+                "coverageCount": "1/20",
                 "status": "low"
             },
             {
@@ -86506,6 +86806,16 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/input/password.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Fluid",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/input/password.stories.ts",
                 "type": "variable",
@@ -86550,8 +86860,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TextInputLabelComponent",
-                "coveragePercent": 68,
-                "coverageCount": "13/19",
+                "coveragePercent": 58,
+                "coverageCount": "14/24",
                 "status": "good"
             },
             {
@@ -86701,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",
@@ -86720,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",
@@ -86730,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",