carbon-components-angular 5.40.4 → 5.41.0

package/docs/documentation.json

@@ -36495,7 +36495,7 @@
         },
         {
             "name": "Modal",
-            "id": "component-Modal-39d89f7b96682943cc5211bbad0f72e1cda6048d2ee16a985cea597be1fcc9c564060999eb6dc066cb59f6d762a7ce797fcd7be7ecc6fc822c33d480ab805327",
+            "id": "component-Modal-d663fa490124907b8f4786b306e4f13e35fa203fdb5b0803e85cc9992b3e894706f64d58c9e98c6ed81a94ed4b85633f2965afdcd6910d7ae15822ada350fe54",
             "file": "src/modal/modal.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -36505,7 +36505,7 @@
             "selector": "cds-modal, ibm-modal",
             "styleUrls": [],
             "styles": [],
-            "template": "<cds-overlay\n\t[theme]=\"theme\"\n\t[open]=\"open\"\n\t(overlaySelect)=\"overlaySelected.emit()\">\n\t<div\n\t\tclass=\"cds--modal-container\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--modal-container--xs': size === 'xs',\n\t\t\t'cds--modal-container--sm': size === 'sm',\n\t\t\t'cds--modal-container--md': size === 'md',\n\t\t\t'cds--modal-container--lg': size === 'lg'\n\t\t}\"\n\t\trole=\"dialog\"\n\t\taria-modal=\"true\"\n\t\tstyle=\"z-index:1;\"\n\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t#modal>\n\t\t<ng-content></ng-content>\n\t\t<div\n\t\t\t*ngIf=\"hasScrollingContent !== null ? hasScrollingContent : shouldShowScrollbar\"\n\t\t\tclass=\"cds--modal-content--overflow-indicator\">\n\t\t</div>\n\t</div>\n</cds-overlay>\n\t",
+            "template": "<cds-overlay\n\t[theme]=\"theme\"\n\t[open]=\"open\"\n\t(overlaySelect)=\"overlaySelected.emit()\">\n\t<div\n\t\tclass=\"cds--modal-container\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--modal-container--xs': size === 'xs',\n\t\t\t'cds--modal-container--sm': size === 'sm',\n\t\t\t'cds--modal-container--md': size === 'md',\n\t\t\t'cds--modal-container--lg': size === 'lg'\n\t\t}\"\n\t\trole=\"dialog\"\n\t\taria-modal=\"true\"\n\t\tstyle=\"z-index:1;\"\n\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t#modal>\n\t\t<ng-content></ng-content>\n\t</div>\n</cds-overlay>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -36517,7 +36517,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nLabel for the modal.\n",
                     "description": "<p>Label for the modal.</p>\n",
-                    "line": 120,
+                    "line": 116,
                     "type": "string",
                     "decorators": []
                 },
@@ -36528,7 +36528,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecify whether the modal contains scrolling content. This property overrides the automatic\ndetection of the existence of scrolling content. Set this property to `true` to force\noverflow indicator to show up or to `false` to force overflow indicator to disappear.\nIt is set to `null` by default which indicates not to override automatic detection.\n",
                     "description": "<p>Specify whether the modal contains scrolling content. This property overrides the automatic\ndetection of the existence of scrolling content. Set this property to <code>true</code> to force\noverflow indicator to show up or to <code>false</code> to force overflow indicator to disappear.\nIt is set to <code>null</code> by default which indicates not to override automatic detection.</p>\n",
-                    "line": 138,
+                    "line": 134,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -36539,7 +36539,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nControls the visibility of the modal when used directly in a template\n",
                     "description": "<p>Controls the visibility of the modal when used directly in a template</p>\n",
-                    "line": 125,
+                    "line": 121,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -36550,7 +36550,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the modal to display.\n",
                     "description": "<p>Size of the modal to display.</p>\n",
-                    "line": 111,
+                    "line": 107,
                     "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -36561,7 +36561,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nClassification of the modal.\n",
                     "description": "<p>Classification of the modal.</p>\n",
-                    "line": 115,
+                    "line": 111,
                     "type": "\"default\" | \"danger\"",
                     "decorators": []
                 },
@@ -36571,7 +36571,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe element that triggers the modal, which should receive focus when the modal closes\n",
                     "description": "<p>The element that triggers the modal, which should receive focus when the modal closes</p>\n",
-                    "line": 130,
+                    "line": 126,
                     "type": "HTMLElement",
                     "decorators": []
                 }
@@ -36584,7 +36584,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTo emit the closing event of the modal window.\n",
                     "description": "<p>To emit the closing event of the modal window.</p>\n",
-                    "line": 147,
+                    "line": 143,
                     "type": "EventEmitter"
                 },
                 {
@@ -36594,7 +36594,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits event when click occurs within `n-overlay` element. This is to track click events occurring outside bounds of the `Modal` object.\n",
                     "description": "<p>Emits event when click occurs within <code>n-overlay</code> element. This is to track click events occurring outside bounds of the <code>Modal</code> object.</p>\n",
-                    "line": 143,
+                    "line": 139,
                     "type": "EventEmitter"
                 }
             ],
@@ -36606,7 +36606,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "<p>Maintains a reference to the view DOM element of the <code>Modal</code>.</p>\n",
-                    "line": 151,
+                    "line": 147,
                     "rawdescription": "\n\nMaintains a reference to the view DOM element of the `Modal`.\n",
                     "decorators": [
                         {
@@ -36625,7 +36625,7 @@
                     "type": "BaseModalService",
                     "optional": false,
                     "description": "",
-                    "line": 162,
+                    "line": 158,
                     "modifierKind": [
                         125
                     ]
@@ -36638,7 +36638,7 @@
                     "type": "string",
                     "optional": false,
                     "description": "<p>An element should have &#39;modal-primary-focus&#39; as an attribute to receive initial focus within the <code>Modal</code> component.</p>\n",
-                    "line": 156,
+                    "line": 152,
                     "rawdescription": "\n\nAn element should have 'modal-primary-focus' as an attribute to receive initial focus within the `Modal` component.\n"
                 }
             ],
@@ -36712,7 +36712,7 @@
             "description": "<p>Component to create modals for presenting content.</p>\n<p><a href=\"../../?path=/story/components-modal--basic\">See demo</a></p>\n<p>Using a modal in your application requires <code>cds-placeholder</code> which would generally be\nplaced near the end of your app component template (app.component.ts or app.component.html) as:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-placeholder&gt;&lt;/cds-placeholder&gt;</code></pre></div><p>A more complete example for <code>Modal</code> is given as follows:</p>\n<p>Example modal definition:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">&#64;Component({\nselector: &quot;app-sample-modal&quot;,\ntemplate: `\n&lt;cds-modal size=&quot;xl&quot; (overlaySelected)=&quot;closeModal()&quot;&gt;\n&lt;cds-modal-header (closeSelect)=&quot;closeModal()&quot;&gt;Header text&lt;/cds-modal-header&gt;\n&lt;section class=&quot;modal-body&quot;&gt;\n&lt;h1&gt;Sample modal works.&lt;/h1&gt;\n&lt;button class=&quot;btn--icon-link&quot; nPopover=&quot;Hello there&quot; title=&quot;Popover title&quot; placement=&quot;right&quot; appendInline=&quot;true&quot;&gt;\n&lt;svg cdsIcon=&quot;info&quot; size=&quot;sm&quot;&gt;&lt;/svg&gt;\n&lt;/button&gt;\n{{modalText}}\n&lt;/section&gt;\n&lt;cds-modal-footer&gt;&lt;button cdsButton=&quot;primary&quot; (click)=&quot;closeModal()&quot;&gt;Close&lt;/button&gt;&lt;/cds-modal-footer&gt;\n&lt;/cds-modal&gt;`,\nstyleUrls: [&quot;./sample-modal.component.scss&quot;]\n})\nexport class SampleModal extends BaseModal {\nmodalText: string;\nconstructor(protected injector: Injector) {\nsuper();\nthis.modalText = this.injector.get(&quot;modalText&quot;);\n}\n}</code></pre></div><p>Example of opening the modal:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">&#64;Component({\nselector: &quot;app-modal-demo&quot;,\ntemplate: `\n&lt;button cdsButton=&quot;primary&quot; (click)=&quot;openModal(&#39;drill&#39;)&quot;&gt;Drill-down modal&lt;/button&gt;\n&lt;cds-placeholder&gt;&lt;/cds-placeholder&gt;`\n})\nexport class ModalDemo {\nopenModal() {\nthis.modalService.create({component: SampleModal, inputs: {modalText: &quot;Hello universe.&quot;}});\n}\n}</code></pre></div>",
             "rawdescription": "\n\nComponent to create modals for presenting content.\n\n[See demo](../../?path=/story/components-modal--basic)\n\nUsing a modal in your application requires `cds-placeholder` which would generally be\nplaced near the end of your app component template (app.component.ts or app.component.html) as:\n\n```html\n<cds-placeholder></cds-placeholder>\n```\n\nA more complete example for `Modal` is given as follows:\n\nExample modal definition:\n\n```typescript\n@Component({\nselector: \"app-sample-modal\",\ntemplate: `\n<cds-modal size=\"xl\" (overlaySelected)=\"closeModal()\">\n<cds-modal-header (closeSelect)=\"closeModal()\">Header text</cds-modal-header>\n<section class=\"modal-body\">\n<h1>Sample modal works.</h1>\n<button class=\"btn--icon-link\" nPopover=\"Hello there\" title=\"Popover title\" placement=\"right\" appendInline=\"true\">\n<svg cdsIcon=\"info\" size=\"sm\"></svg>\n</button>\n{{modalText}}\n</section>\n<cds-modal-footer><button cdsButton=\"primary\" (click)=\"closeModal()\">Close</button></cds-modal-footer>\n</cds-modal>`,\nstyleUrls: [\"./sample-modal.component.scss\"]\n})\nexport class SampleModal extends BaseModal {\nmodalText: string;\nconstructor(protected injector: Injector) {\nsuper();\nthis.modalText = this.injector.get(\"modalText\");\n}\n}\n```\n\nExample of opening the modal:\n\n```typescript\n@Component({\nselector: \"app-modal-demo\",\ntemplate: `\n<button cdsButton=\"primary\" (click)=\"openModal('drill')\">Drill-down modal</button>\n<cds-placeholder></cds-placeholder>`\n})\nexport class ModalDemo {\nopenModal() {\nthis.modalService.create({component: SampleModal, inputs: {modalText: \"Hello universe.\"}});\n}\n}\n```\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tEventEmitter,\n\tHostListener,\n\tInput,\n\tOutput,\n\tElementRef,\n\tViewChild,\n\tSimpleChanges,\n\tOnChanges,\n\tRenderer2,\n\tInject,\n\tOnDestroy\n} from \"@angular/core\";\nimport { DOCUMENT } from \"@angular/common\";\nimport { cycleTabs, getFocusElementList } from \"carbon-components-angular/common\";\nimport { BaseModalService } from \"./base-modal.service\";\n\n/**\n * Component to create modals for presenting content.\n *\n * [See demo](../../?path=/story/components-modal--basic)\n *\n * Using a modal in your application requires `cds-placeholder` which would generally be\n * placed near the end of your app component template (app.component.ts or app.component.html) as:\n *\n```html\n<cds-placeholder></cds-placeholder>\n```\n *\n * A more complete example for `Modal` is given as follows:\n *\n * Example modal definition:\n *\n```typescript\n@Component({\n\tselector: \"app-sample-modal\",\n\ttemplate: `\n\t\t\t\t<cds-modal size=\"xl\" (overlaySelected)=\"closeModal()\">\n\t\t\t\t\t<cds-modal-header (closeSelect)=\"closeModal()\">Header text</cds-modal-header>\n\t\t\t\t\t\t<section class=\"modal-body\">\n\t\t\t\t\t\t\t<h1>Sample modal works.</h1>\n\t\t\t\t\t\t\t<button class=\"btn--icon-link\" nPopover=\"Hello there\" title=\"Popover title\" placement=\"right\" appendInline=\"true\">\n\t\t\t\t\t\t\t\t<svg cdsIcon=\"info\" size=\"sm\"></svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t{{modalText}}\n\t\t\t\t\t\t</section>\n\t\t\t\t\t<cds-modal-footer><button cdsButton=\"primary\" (click)=\"closeModal()\">Close</button></cds-modal-footer>\n\t\t\t\t</cds-modal>`,\n\tstyleUrls: [\"./sample-modal.component.scss\"]\n})\nexport class SampleModal extends BaseModal {\n\tmodalText: string;\n\tconstructor(protected injector: Injector) {\n\t\tsuper();\n\t\tthis.modalText = this.injector.get(\"modalText\");\n\t}\n}\n```\n *\n * Example of opening the modal:\n *\n```typescript\n@Component({\n\tselector: \"app-modal-demo\",\n\ttemplate: `\n\t\t\t\t<button cdsButton=\"primary\" (click)=\"openModal('drill')\">Drill-down modal</button>\n\t\t\t\t<cds-placeholder></cds-placeholder>`\n})\nexport class ModalDemo {\n\topenModal() {\n\t\tthis.modalService.create({component: SampleModal, inputs: {modalText: \"Hello universe.\"}});\n\t}\n}\n```\n */\n@Component({\n\tselector: \"cds-modal, ibm-modal\",\n\ttemplate: `\n\t\t<cds-overlay\n\t\t\t[theme]=\"theme\"\n\t\t\t[open]=\"open\"\n\t\t\t(overlaySelect)=\"overlaySelected.emit()\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--modal-container\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--modal-container--xs': size === 'xs',\n\t\t\t\t\t'cds--modal-container--sm': size === 'sm',\n\t\t\t\t\t'cds--modal-container--md': size === 'md',\n\t\t\t\t\t'cds--modal-container--lg': size === 'lg'\n\t\t\t\t}\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\tstyle=\"z-index:1;\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t#modal>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"hasScrollingContent !== null ? hasScrollingContent : shouldShowScrollbar\"\n\t\t\t\t\tclass=\"cds--modal-content--overflow-indicator\">\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</cds-overlay>\n\t`\n})\nexport class Modal implements AfterViewInit, OnChanges, OnDestroy {\n\t/**\n\t * Size of the modal to display.\n\t */\n\t@Input() size: \"xs\" | \"sm\"| \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Classification of the modal.\n\t */\n\t@Input() theme: \"default\" | \"danger\" = \"default\";\n\n\t/**\n\t * Label for the modal.\n\t */\n\t@Input() ariaLabel = \"default\";\n\n\t/**\n\t * Controls the visibility of the modal when used directly in a template\n\t */\n\t@Input() open = false;\n\n\t/**\n\t * The element that triggers the modal, which should receive focus when the modal closes\n\t */\n\t@Input() trigger: HTMLElement;\n\n\t/**\n\t * Specify whether the modal contains scrolling content. This property overrides the automatic\n\t * detection of the existence of scrolling content. Set this property to `true` to force\n\t * overflow indicator to show up or to `false` to force overflow indicator to disappear.\n\t * It is set to `null` by default which indicates not to override automatic detection.\n\t */\n\t@Input() hasScrollingContent: boolean = null;\n\n\t/**\n\t * Emits event when click occurs within `n-overlay` element. This is to track click events occurring outside bounds of the `Modal` object.\n\t */\n\t@Output() overlaySelected = new EventEmitter();\n\t/**\n\t * To emit the closing event of the modal window.\n\t */\n\t@Output() close = new EventEmitter();\n\t/**\n\t * Maintains a reference to the view DOM element of the `Modal`.\n\t */\n\t@ViewChild(\"modal\", { static: true }) modal: ElementRef;\n\n\t/**\n\t * An element should have 'modal-primary-focus' as an attribute to receive initial focus within the `Modal` component.\n\t */\n\tselectorPrimaryFocus = \"[modal-primary-focus]\";\n\n\t/**\n\t * Creates an instance of `Modal`.\n\t */\n\tconstructor(\n\t\tpublic modalService: BaseModalService,\n\t\t@Inject(DOCUMENT) private document: Document,\n\t\tprivate renderer: Renderer2\n\t) { }\n\n\tngOnChanges({ open }: SimpleChanges) {\n\t\tif (open) {\n\t\t\tif (open.currentValue) {\n\t\t\t\t// `100` is just enough time to allow the modal\n\t\t\t\t// to become visible, so that we can set focus\n\t\t\t\tsetTimeout(() => this.focusInitialElement(), 100);\n\t\t\t\t// Prevent scrolling on open\n\t\t\t\tthis.renderer.addClass(this.document.body, \"cds--body--with-modal-open\");\n\t\t\t} else if (!open.currentValue) {\n\t\t\t\t// Enable scrolling on close\n\t\t\t\tthis.renderer.removeClass(this.document.body, \"cds--body--with-modal-open\");\n\t\t\t} else if (this.trigger) {\n\t\t\t\tthis.trigger.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Set document focus to be on the modal component after it is initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.focusInitialElement();\n\t}\n\n\t/**\n\t * Handle keyboard events to close modal and tab through the content within the modal.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thandleKeyboardEvent(event: KeyboardEvent) {\n\t\tswitch (event.key) {\n\t\t\tcase \"Escape\": {\n\t\t\t\tevent.stopImmediatePropagation();  // prevents events being fired for multiple modals if more than 2 open\n\t\t\t\t// Manually close modal\n\t\t\t\tthis.open = false;\n\t\t\t\tthis.close.emit();\n\t\t\t\tthis.modalService.destroy();  // destroy top (latest) modal\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase \"Tab\": {\n\t\t\t\tcycleTabs(event, this.modal.nativeElement);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * This detects whether or not the modal contains scrolling content.\n\t *\n\t * To force trigger a detection (ie. on window resize), change or reset the value of the modal content.\n\t *\n\t * Use the `hasScrollingContent` input to manually override the overflow indicator.\n\t */\n\tget shouldShowScrollbar() {\n\t\tconst modalContent = this.modal ? this.modal.nativeElement.querySelector(\".cds--modal-content\") : null;\n\t\tif (modalContent) {\n\t\t\t// get rounded value from height to match integer returned from scrollHeight\n\t\t\tconst modalContentHeight = Math.ceil(modalContent.getBoundingClientRect().height);\n\t\t\tconst modalContentScrollHeight = modalContent.scrollHeight;\n\t\t\treturn modalContentScrollHeight > modalContentHeight;\n\t\t} else {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t// Remove class preventing scrolling\n\tngOnDestroy() {\n\t\tthis.renderer.removeClass(this.document.body, \"cds--body--with-modal-open\");\n\t}\n\n\tprotected focusInitialElement() {\n\t\tconst primaryFocusElement = this.modal.nativeElement.querySelector(this.selectorPrimaryFocus);\n\t\tif (primaryFocusElement && primaryFocusElement.focus) {\n\t\t\tsetTimeout(() => primaryFocusElement.focus());\n\t\t} else if (getFocusElementList(this.modal.nativeElement).length > 0) {\n\t\t\tsetTimeout(() => getFocusElementList(this.modal.nativeElement)[0].focus());\n\t\t} else {\n\t\t\tsetTimeout(() => this.modal.nativeElement.focus());\n\t\t}\n\t}\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tEventEmitter,\n\tHostListener,\n\tInput,\n\tOutput,\n\tElementRef,\n\tViewChild,\n\tSimpleChanges,\n\tOnChanges,\n\tRenderer2,\n\tInject,\n\tOnDestroy\n} from \"@angular/core\";\nimport { DOCUMENT } from \"@angular/common\";\nimport { cycleTabs, getFocusElementList } from \"carbon-components-angular/common\";\nimport { BaseModalService } from \"./base-modal.service\";\n\n/**\n * Component to create modals for presenting content.\n *\n * [See demo](../../?path=/story/components-modal--basic)\n *\n * Using a modal in your application requires `cds-placeholder` which would generally be\n * placed near the end of your app component template (app.component.ts or app.component.html) as:\n *\n```html\n<cds-placeholder></cds-placeholder>\n```\n *\n * A more complete example for `Modal` is given as follows:\n *\n * Example modal definition:\n *\n```typescript\n@Component({\n\tselector: \"app-sample-modal\",\n\ttemplate: `\n\t\t\t\t<cds-modal size=\"xl\" (overlaySelected)=\"closeModal()\">\n\t\t\t\t\t<cds-modal-header (closeSelect)=\"closeModal()\">Header text</cds-modal-header>\n\t\t\t\t\t\t<section class=\"modal-body\">\n\t\t\t\t\t\t\t<h1>Sample modal works.</h1>\n\t\t\t\t\t\t\t<button class=\"btn--icon-link\" nPopover=\"Hello there\" title=\"Popover title\" placement=\"right\" appendInline=\"true\">\n\t\t\t\t\t\t\t\t<svg cdsIcon=\"info\" size=\"sm\"></svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t{{modalText}}\n\t\t\t\t\t\t</section>\n\t\t\t\t\t<cds-modal-footer><button cdsButton=\"primary\" (click)=\"closeModal()\">Close</button></cds-modal-footer>\n\t\t\t\t</cds-modal>`,\n\tstyleUrls: [\"./sample-modal.component.scss\"]\n})\nexport class SampleModal extends BaseModal {\n\tmodalText: string;\n\tconstructor(protected injector: Injector) {\n\t\tsuper();\n\t\tthis.modalText = this.injector.get(\"modalText\");\n\t}\n}\n```\n *\n * Example of opening the modal:\n *\n```typescript\n@Component({\n\tselector: \"app-modal-demo\",\n\ttemplate: `\n\t\t\t\t<button cdsButton=\"primary\" (click)=\"openModal('drill')\">Drill-down modal</button>\n\t\t\t\t<cds-placeholder></cds-placeholder>`\n})\nexport class ModalDemo {\n\topenModal() {\n\t\tthis.modalService.create({component: SampleModal, inputs: {modalText: \"Hello universe.\"}});\n\t}\n}\n```\n */\n@Component({\n\tselector: \"cds-modal, ibm-modal\",\n\ttemplate: `\n\t\t<cds-overlay\n\t\t\t[theme]=\"theme\"\n\t\t\t[open]=\"open\"\n\t\t\t(overlaySelect)=\"overlaySelected.emit()\">\n\t\t\t<div\n\t\t\t\tclass=\"cds--modal-container\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--modal-container--xs': size === 'xs',\n\t\t\t\t\t'cds--modal-container--sm': size === 'sm',\n\t\t\t\t\t'cds--modal-container--md': size === 'md',\n\t\t\t\t\t'cds--modal-container--lg': size === 'lg'\n\t\t\t\t}\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\tstyle=\"z-index:1;\"\n\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t#modal>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</cds-overlay>\n\t`\n})\nexport class Modal implements AfterViewInit, OnChanges, OnDestroy {\n\t/**\n\t * Size of the modal to display.\n\t */\n\t@Input() size: \"xs\" | \"sm\"| \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Classification of the modal.\n\t */\n\t@Input() theme: \"default\" | \"danger\" = \"default\";\n\n\t/**\n\t * Label for the modal.\n\t */\n\t@Input() ariaLabel = \"default\";\n\n\t/**\n\t * Controls the visibility of the modal when used directly in a template\n\t */\n\t@Input() open = false;\n\n\t/**\n\t * The element that triggers the modal, which should receive focus when the modal closes\n\t */\n\t@Input() trigger: HTMLElement;\n\n\t/**\n\t * Specify whether the modal contains scrolling content. This property overrides the automatic\n\t * detection of the existence of scrolling content. Set this property to `true` to force\n\t * overflow indicator to show up or to `false` to force overflow indicator to disappear.\n\t * It is set to `null` by default which indicates not to override automatic detection.\n\t */\n\t@Input() hasScrollingContent: boolean = null;\n\n\t/**\n\t * Emits event when click occurs within `n-overlay` element. This is to track click events occurring outside bounds of the `Modal` object.\n\t */\n\t@Output() overlaySelected = new EventEmitter();\n\t/**\n\t * To emit the closing event of the modal window.\n\t */\n\t@Output() close = new EventEmitter();\n\t/**\n\t * Maintains a reference to the view DOM element of the `Modal`.\n\t */\n\t@ViewChild(\"modal\", { static: true }) modal: ElementRef;\n\n\t/**\n\t * An element should have 'modal-primary-focus' as an attribute to receive initial focus within the `Modal` component.\n\t */\n\tselectorPrimaryFocus = \"[modal-primary-focus]\";\n\n\t/**\n\t * Creates an instance of `Modal`.\n\t */\n\tconstructor(\n\t\tpublic modalService: BaseModalService,\n\t\t@Inject(DOCUMENT) private document: Document,\n\t\tprivate renderer: Renderer2\n\t) { }\n\n\tngOnChanges({ open, hasScrollingContent }: SimpleChanges) {\n\t\tif (open) {\n\t\t\tif (open.currentValue) {\n\t\t\t\t// `100` is just enough time to allow the modal\n\t\t\t\t// to become visible, so that we can set focus\n\t\t\t\tsetTimeout(() => this.focusInitialElement(), 100);\n\t\t\t\t// Prevent scrolling on open\n\t\t\t\tthis.renderer.addClass(this.document.body, \"cds--body--with-modal-open\");\n\t\t\t} else if (!open.currentValue) {\n\t\t\t\t// Enable scrolling on close\n\t\t\t\tthis.renderer.removeClass(this.document.body, \"cds--body--with-modal-open\");\n\t\t\t} else if (this.trigger) {\n\t\t\t\tthis.trigger.focus();\n\t\t\t}\n\t\t}\n\t\tif (hasScrollingContent) {\n\t\t\tthis.updateScrollbar();\n\t\t}\n\t}\n\n\t/**\n\t * Set document focus to be on the modal component after it is initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.focusInitialElement();\n\t\tthis.updateScrollbar();\n\t}\n\n\t/**\n\t * Handle keyboard events to close modal and tab through the content within the modal.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\thandleKeyboardEvent(event: KeyboardEvent) {\n\t\tswitch (event.key) {\n\t\t\tcase \"Escape\": {\n\t\t\t\tevent.stopImmediatePropagation();  // prevents events being fired for multiple modals if more than 2 open\n\t\t\t\t// Manually close modal\n\t\t\t\tthis.open = false;\n\t\t\t\tthis.close.emit();\n\t\t\t\tthis.modalService.destroy();  // destroy top (latest) modal\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tcase \"Tab\": {\n\t\t\t\tcycleTabs(event, this.modal.nativeElement);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * This detects whether or not the modal contains scrolling content.\n\t *\n\t * To force trigger a detection (ie. on window resize), change or reset the value of the modal content.\n\t *\n\t * Use the `hasScrollingContent` input to manually override the overflow indicator.\n\t */\n\tget shouldShowScrollbar() {\n\t\tconst modalContent = this.modal ? this.modal.nativeElement.querySelector(\".cds--modal-content\") : null;\n\t\tif (modalContent) {\n\t\t\t// get rounded value from height to match integer returned from scrollHeight\n\t\t\tconst modalContentHeight = Math.ceil(modalContent.getBoundingClientRect().height);\n\t\t\tconst modalContentScrollHeight = modalContent.scrollHeight;\n\t\t\treturn modalContentScrollHeight > modalContentHeight;\n\t\t} else {\n\t\t\treturn false;\n\t\t}\n\t}\n\n\t// Remove class preventing scrolling\n\tngOnDestroy() {\n\t\tthis.renderer.removeClass(this.document.body, \"cds--body--with-modal-open\");\n\t}\n\n\tprotected focusInitialElement() {\n\t\tconst primaryFocusElement = this.modal.nativeElement.querySelector(this.selectorPrimaryFocus);\n\t\tif (primaryFocusElement && primaryFocusElement.focus) {\n\t\t\tsetTimeout(() => primaryFocusElement.focus());\n\t\t} else if (getFocusElementList(this.modal.nativeElement).length > 0) {\n\t\t\tsetTimeout(() => getFocusElementList(this.modal.nativeElement)[0].focus());\n\t\t} else {\n\t\t\tsetTimeout(() => this.modal.nativeElement.focus());\n\t\t}\n\t}\n\n\tprivate updateScrollbar() {\n\t\tconst modalContent = this.modal ? this.modal.nativeElement.querySelector(\".cds--modal-content\") : null;\n\t\tconst showScrollbar = this.hasScrollingContent !== null ? this.hasScrollingContent : this.shouldShowScrollbar;\n\t\tif (modalContent) {\n\t\t\tif (showScrollbar) {\n\t\t\t\tthis.renderer.addClass(modalContent, \"cds--modal-scroll-content\");\n\t\t\t} else {\n\t\t\t\tthis.renderer.removeClass(modalContent, \"cds--modal-scroll-content\");\n\t\t\t}\n\t\t}\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -36741,7 +36741,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 156,
+                "line": 152,
                 "rawdescription": "\n\nCreates an instance of `Modal`.\n",
                 "jsdoctags": [
                     {
@@ -47100,7 +47100,7 @@
         },
         {
             "name": "Search",
-            "id": "component-Search-8499a76483757feb0524f273b8757af7429d3a794a471c9e4d7fea429ae77a3cc2d0f6d07535fa2fb4b43012df7906ee6d702f9b6b2b3d4131b3a184b66263fe",
+            "id": "component-Search-50eb883dd9468f438a09dbaec39151320387b8bbf504ec26ca69233c1232556a4585fcff76fc6f903e834f675dbf07ac1845828c775c4c71f56ecc86cb51e3cf",
             "file": "src/search/search.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -47127,7 +47127,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to expand the toolbar search component.\n",
                     "description": "<p>Set to <code>true</code> to expand the toolbar search component.</p>\n",
-                    "line": 75,
+                    "line": 79,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47137,7 +47137,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the aria label on the `div` element with the `search` role.\n",
                     "description": "<p>Sets the aria label on the <code>div</code> element with the <code>search</code> role.</p>\n",
-                    "line": 120,
+                    "line": 124,
                     "type": "string",
                     "decorators": []
                 },
@@ -47148,7 +47148,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the autocomplete attribute on the `input` element.\nFor reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\n",
                     "description": "<p>Sets the autocomplete attribute on the <code>input</code> element.\nFor reference: <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values</a></p>\n",
-                    "line": 100,
+                    "line": 104,
                     "type": "string",
                     "decorators": []
                 },
@@ -47159,7 +47159,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to set the `title` attribute of the clear button.\n",
                     "description": "<p>Used to set the <code>title</code> attribute of the clear button.</p>\n",
-                    "line": 112,
+                    "line": 116,
                     "type": "any",
                     "decorators": []
                 },
@@ -47170,7 +47170,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a disabled search input.\n",
                     "description": "<p>Set to <code>true</code> for a disabled search input.</p>\n",
-                    "line": 58,
+                    "line": 62,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47181,7 +47181,18 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to make the search component expandable.\n`expandable` would override `toolbar` property behaviours.\n",
                     "description": "<p>Set to <code>true</code> to make the search component expandable.\n<code>expandable</code> would override <code>toolbar</code> property behaviours.</p>\n",
-                    "line": 67,
+                    "line": 71,
+                    "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": 128,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47192,7 +47203,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe unique id for the search component.\n",
                     "description": "<p>The unique id for the search component.</p>\n",
-                    "line": 87,
+                    "line": 91,
                     "type": "string",
                     "decorators": []
                 },
@@ -47203,7 +47214,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the text inside the `label` tag.\n",
                     "description": "<p>Sets the text inside the <code>label</code> tag.</p>\n",
-                    "line": 104,
+                    "line": 108,
                     "type": "any",
                     "decorators": []
                 },
@@ -47213,7 +47224,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the name attribute on the `input` element.\n",
                     "description": "<p>Sets the name attribute on the <code>input</code> element.</p>\n",
-                    "line": 83,
+                    "line": 87,
                     "type": "string",
                     "decorators": []
                 },
@@ -47224,7 +47235,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the placeholder attribute on the `input` element.\n",
                     "description": "<p>Sets the placeholder attribute on the <code>input</code> element.</p>\n",
-                    "line": 108,
+                    "line": 112,
                     "type": "any",
                     "decorators": []
                 },
@@ -47234,7 +47245,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReflects the required attribute of the `input` element.\n",
                     "description": "<p>Reflects the required attribute of the <code>input</code> element.</p>\n",
-                    "line": 91,
+                    "line": 95,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47245,7 +47256,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTitle for the search trigger\n",
                     "description": "<p>Title for the search trigger</p>\n",
-                    "line": 116,
+                    "line": 120,
                     "type": "string",
                     "decorators": []
                 },
@@ -47256,7 +47267,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the search field.\n",
                     "description": "<p>Size of the search field.</p>\n",
-                    "line": 53,
+                    "line": 57,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -47267,7 +47278,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a loading search component.\n",
                     "description": "<p>Set to <code>true</code> for a loading search component.</p>\n",
-                    "line": 71,
+                    "line": 75,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47278,7 +47289,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecifies whether the search component is used in the table toolbar.\n",
                     "description": "<p>Specifies whether the search component is used in the table toolbar.</p>\n",
-                    "line": 79,
+                    "line": 83,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47289,15 +47300,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` search theme.",
                     "jsdoctags": [
                         {
-                            "pos": 921,
-                            "end": 1015,
+                            "pos": 1046,
+                            "end": 1140,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 338,
                             "tagName": {
-                                "pos": 922,
-                                "end": 932,
+                                "pos": 1047,
+                                "end": 1057,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -47307,7 +47318,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\n<code>light</code> or <code>dark</code> search theme.</p>\n"
                         }
                     ],
-                    "line": 48,
+                    "line": 52,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -47318,7 +47329,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a toolbar search component.\n",
                     "description": "<p>Set to <code>true</code> for a toolbar search component.</p>\n",
-                    "line": 62,
+                    "line": 66,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -47329,7 +47340,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the value attribute on the `input` element.\n",
                     "description": "<p>Sets the value attribute on the <code>input</code> element.</p>\n",
-                    "line": 95,
+                    "line": 99,
                     "type": "string",
                     "decorators": []
                 }
@@ -47342,7 +47353,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event when the clear button is clicked.\n",
                     "description": "<p>Emits an event when the clear button is clicked.</p>\n",
-                    "line": 129,
+                    "line": 137,
                     "type": "EventEmitter"
                 },
                 {
@@ -47350,7 +47361,7 @@
                     "defaultValue": "new EventEmitter<boolean>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 125,
+                    "line": 133,
                     "type": "EventEmitter"
                 },
                 {
@@ -47360,7 +47371,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event on enter.\n",
                     "description": "<p>Emits an event on enter.</p>\n",
-                    "line": 133,
+                    "line": 141,
                     "type": "EventEmitter"
                 },
                 {
@@ -47370,7 +47381,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event when value is changed.\n",
                     "description": "<p>Emits an event when value is changed.</p>\n",
-                    "line": 124,
+                    "line": 132,
                     "type": "EventEmitter"
                 }
             ],
@@ -47382,7 +47393,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 135,
+                    "line": 143,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -47401,7 +47412,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>Called when search input is blurred. Needed to properly implement <code>ControlValueAccessor</code>.</p>\n",
-                    "line": 176,
+                    "line": 184,
                     "rawdescription": "\n\nCalled when search input is blurred. Needed to properly implement `ControlValueAccessor`.\n"
                 },
                 {
@@ -47412,7 +47423,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Method set in <code>registerOnChange</code> to propagate changes back to the form.</p>\n",
-                    "line": 181,
+                    "line": 189,
                     "rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n"
                 },
                 {
@@ -47437,7 +47448,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 205,
+                    "line": 213,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when clear button is clicked.\n",
@@ -47456,7 +47467,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 277,
+                    "line": 285,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when IME composition finishes.\n",
@@ -47495,7 +47506,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 269,
+                    "line": 277,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when using IME composition.\n",
@@ -47527,7 +47538,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 211,
+                    "line": 219,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -47544,7 +47555,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 255,
+                    "line": 263,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -47581,7 +47592,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 243,
+                    "line": 251,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -47618,7 +47629,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 223,
+                    "line": 231,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -47648,7 +47659,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 198,
+                    "line": 206,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled on enter.\n",
@@ -47667,7 +47678,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 187,
+                    "line": 195,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when text is written in the input.\n",
@@ -47675,8 +47686,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 4396,
-                                "end": 4402,
+                                "pos": 4593,
+                                "end": 4599,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -47687,8 +47698,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 4390,
-                                "end": 4395,
+                                "pos": 4587,
+                                "end": 4592,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -47705,7 +47716,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 216,
+                    "line": 224,
                     "deprecated": false,
                     "deprecationMessage": ""
                 },
@@ -47722,7 +47733,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 161,
+                    "line": 169,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n",
@@ -47755,7 +47766,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 169,
+                    "line": 177,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n",
@@ -47766,8 +47777,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3942,
-                                "end": 3944,
+                                "pos": 4139,
+                                "end": 4141,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -47778,8 +47789,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3936,
-                                "end": 3941,
+                                "pos": 4133,
+                                "end": 4138,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -47803,7 +47814,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 154,
+                    "line": 162,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThis is the initial value set to the component\n",
@@ -47814,8 +47825,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3618,
-                                "end": 3623,
+                                "pos": 3815,
+                                "end": 3820,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -47826,8 +47837,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3612,
-                                "end": 3617,
+                                "pos": 3809,
+                                "end": 3814,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -47849,6 +47860,14 @@
                     "line": 40,
                     "type": "boolean",
                     "decorators": []
+                },
+                {
+                    "name": "class.cds--text-input--fluid__skeleton",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 44,
+                    "type": "boolean",
+                    "decorators": []
                 }
             ],
             "hostListeners": [
@@ -47869,7 +47888,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when IME composition finishes.\n",
                     "description": "<p>Called when IME composition finishes.</p>\n",
-                    "line": 277
+                    "line": 285
                 },
                 {
                     "name": "compositionstart",
@@ -47888,7 +47907,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when using IME composition.\n",
                     "description": "<p>Called when using IME composition.</p>\n",
-                    "line": 269
+                    "line": 277
                 },
                 {
                     "name": "focusin",
@@ -47905,7 +47924,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 255
+                    "line": 263
                 },
                 {
                     "name": "focusout",
@@ -47922,7 +47941,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 243
+                    "line": 251
                 },
                 {
                     "name": "keydown",
@@ -47939,7 +47958,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 223
+                    "line": 231
                 }
             ],
             "standalone": false,
@@ -47947,7 +47966,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { SearchModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-search--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { SearchModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-search--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tEventEmitter,\n\tOutput,\n\tHostBinding,\n\tElementRef,\n\tHostListener,\n\tViewChild\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { SearchModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-search--basic)\n */\n@Component({\n\tselector: \"cds-search, ibm-search\",\n\ttemplateUrl: \"search.component.html\",\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Search,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Search implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for search components.\n\t */\n\tstatic searchCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") get containerClass() {\n\t\treturn !(this.toolbar || this.expandable);\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` search theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Size of the search field.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t/**\n\t * Set to `true` for a disabled search input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a toolbar search component.\n\t */\n\t@Input() toolbar = false;\n\t/**\n\t * Set to `true` to make the search component expandable.\n\t * `expandable` would override `toolbar` property behaviours.\n\t */\n\t@Input() expandable = false;\n\t/**\n\t * Set to `true` for a loading search component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` to expand the toolbar search component.\n\t */\n\t@Input() active = false;\n\t/**\n\t * Specifies whether the search component is used in the table toolbar.\n\t */\n\t@Input() tableSearch = false;\n\t/**\n\t * Sets the name attribute on the `input` element.\n\t */\n\t@Input() name: string;\n\t/**\n\t * The unique id for the search component.\n\t */\n\t@Input() id = `search-${Search.searchCount}`;\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() value = \"\";\n\t/**\n\t * Sets the autocomplete attribute on the `input` element.\n\t * For reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\n\t */\n\t@Input() autocomplete = \"on\";\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label = this.i18n.get().SEARCH.LABEL;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = this.i18n.get().SEARCH.PLACEHOLDER;\n\t/**\n\t * Used to set the `title` attribute of the clear button.\n\t */\n\t@Input() clearButtonTitle = this.i18n.get().SEARCH.CLEAR_BUTTON;\n\t/**\n\t * Title for the search trigger\n\t */\n\t@Input() searchTitle = \"\";\n\t/**\n\t * Sets the aria label on the `div` element with the `search` role.\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Emits an event when value is changed.\n\t */\n\t@Output() valueChange = new EventEmitter<string>();\n\t@Output() open = new EventEmitter<boolean>();\n\t/**\n\t * Emits an event when the clear button is clicked.\n\t */\n\t@Output() clear = new EventEmitter();\n\t/**\n\t * Emits an event on enter.\n\t */\n\t@Output() search = new EventEmitter<string>();\n\n\t@ViewChild(\"input\") inputRef: ElementRef;\n\n\t/**\n\t * Sets `true` when composing text via IME.\n\t */\n\tprotected isComposing = false;\n\n\t/**\n\t * Creates an instance of `Search`.\n\t * @param i18n The i18n translations.\n\t */\n\tconstructor(protected elementRef: ElementRef, protected i18n: I18n) {\n\t\tSearch.searchCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the search input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/**\n\t * Called when search input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\t/**\n\t * Called when text is written in the input.\n\t * @param search The input text.\n\t */\n\tonSearch(search: string) {\n\t\tif (this.isComposing) { // check for IME use\n\t\t\treturn;\n\t\t}\n\t\tthis.value = search;\n\t\tthis.doValueChange();\n\t}\n\n\t/**\n\t * Called on enter.\n\t */\n\tonEnter() {\n\t\tthis.search.emit(this.value);\n\t}\n\n\t/**\n\t * Called when clear button is clicked.\n\t */\n\tclearSearch(): void {\n\t\tthis.value = \"\";\n\t\tthis.clear.emit();\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tdoValueChange() {\n\t\tthis.valueChange.emit(this.value);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\topenSearch() {\n\t\tthis.active = true;\n\t\tthis.open.emit(this.active);\n\t\tsetTimeout(() => this.inputRef.nativeElement.focus());\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\tkeyDown(event: KeyboardEvent) {\n\t\tif (this.toolbar || this.expandable) {\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\tif (this.value === \"\") {\n\t\t\t\t\tthis.active = false;\n\t\t\t\t\tthis.open.emit(this.active);\n\t\t\t\t}\n\t\t\t} else if (event.key === \"Enter\") {\n\t\t\t\tthis.openSearch();\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Escape\") {\n\t\t\tif (this.value !== \"\") {\n\t\t\t\tthis.clearSearch();\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\", [\"$event\"])\n\tfocusOut(event) {\n\t\tthis.onTouched();\n\t\tif ((this.expandable || this.toolbar) &&\n\t\t\tthis.inputRef &&\n\t\t\tthis.inputRef.nativeElement.value === \"\" &&\n\t\t\t!(this.elementRef.nativeElement as HTMLElement).contains(event.relatedTarget)) {\n\t\t\tthis.active = false;\n\t\t\tthis.open.emit(this.active);\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\", [\"$event\"])\n\tfocusIn(event) {\n\t\tthis.onTouched();\n\t\t// set input focus if search icon get focus from tab key press event.\n\t\tif ((this.expandable || this.toolbar) &&\n\t\t\tthis.inputRef && !event.relatedTarget &&\n\t\t\t!(this.elementRef.nativeElement as HTMLElement).contains(event.relatedTarget) ) {\n\t\t\tthis.openSearch();\n\t\t}\n\t}\n\n\t/**\n\t * Called when using IME composition.\n\t */\n\t@HostListener(\"compositionstart\", [\"$event\"])\n\tcompositionStart(event) {\n\t\tthis.isComposing = true;\n\t}\n\n\t/**\n\t * Called when IME composition finishes.\n\t */\n\t@HostListener(\"compositionend\", [\"$event\"])\n\tcompositionEnd(event) {\n\t\tthis.isComposing = false;\n\t\tthis.onSearch(this.value + event.data);\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tEventEmitter,\n\tOutput,\n\tHostBinding,\n\tElementRef,\n\tHostListener,\n\tViewChild\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { SearchModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-search--basic)\n */\n@Component({\n\tselector: \"cds-search, ibm-search\",\n\ttemplateUrl: \"search.component.html\",\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Search,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Search implements ControlValueAccessor {\n\t/**\n\t * Variable used for creating unique ids for search components.\n\t */\n\tstatic searchCount = 0;\n\n\t@HostBinding(\"class.cds--form-item\") get containerClass() {\n\t\treturn !(this.toolbar || this.expandable);\n\t}\n\n\t@HostBinding(\"class.cds--text-input--fluid__skeleton\") get fluidSkeletonClass() {\n\t\treturn this.skeleton && this.fluid;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` search theme.\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t/**\n\t * Size of the search field.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t/**\n\t * Set to `true` for a disabled search input.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a toolbar search component.\n\t */\n\t@Input() toolbar = false;\n\t/**\n\t * Set to `true` to make the search component expandable.\n\t * `expandable` would override `toolbar` property behaviours.\n\t */\n\t@Input() expandable = false;\n\t/**\n\t * Set to `true` for a loading search component.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` to expand the toolbar search component.\n\t */\n\t@Input() active = false;\n\t/**\n\t * Specifies whether the search component is used in the table toolbar.\n\t */\n\t@Input() tableSearch = false;\n\t/**\n\t * Sets the name attribute on the `input` element.\n\t */\n\t@Input() name: string;\n\t/**\n\t * The unique id for the search component.\n\t */\n\t@Input() id = `search-${Search.searchCount}`;\n\t/**\n\t * Reflects the required attribute of the `input` element.\n\t */\n\t@Input() required: boolean;\n\t/**\n\t * Sets the value attribute on the `input` element.\n\t */\n\t@Input() value = \"\";\n\t/**\n\t * Sets the autocomplete attribute on the `input` element.\n\t * For reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\n\t */\n\t@Input() autocomplete = \"on\";\n\t/**\n\t * Sets the text inside the `label` tag.\n\t */\n\t@Input() label = this.i18n.get().SEARCH.LABEL;\n\t/**\n\t * Sets the placeholder attribute on the `input` element.\n\t */\n\t@Input() placeholder = this.i18n.get().SEARCH.PLACEHOLDER;\n\t/**\n\t * Used to set the `title` attribute of the clear button.\n\t */\n\t@Input() clearButtonTitle = this.i18n.get().SEARCH.CLEAR_BUTTON;\n\t/**\n\t * Title for the search trigger\n\t */\n\t@Input() searchTitle = \"\";\n\t/**\n\t * Sets the aria label on the `div` element with the `search` role.\n\t */\n\t@Input() ariaLabel: string;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\t/**\n\t * Emits an event when value is changed.\n\t */\n\t@Output() valueChange = new EventEmitter<string>();\n\t@Output() open = new EventEmitter<boolean>();\n\t/**\n\t * Emits an event when the clear button is clicked.\n\t */\n\t@Output() clear = new EventEmitter();\n\t/**\n\t * Emits an event on enter.\n\t */\n\t@Output() search = new EventEmitter<string>();\n\n\t@ViewChild(\"input\") inputRef: ElementRef;\n\n\t/**\n\t * Sets `true` when composing text via IME.\n\t */\n\tprotected isComposing = false;\n\n\t/**\n\t * Creates an instance of `Search`.\n\t * @param i18n The i18n translations.\n\t */\n\tconstructor(protected elementRef: ElementRef, protected i18n: I18n) {\n\t\tSearch.searchCount++;\n\t}\n\n\t/**\n\t * This is the initial value set to the component\n\t * @param value The input value.\n\t */\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\t/**\n\t * Sets a method in order to propagate changes back to the form.\n\t */\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registers a callback to be triggered when the control has been touched.\n\t * @param fn Callback to be triggered when the search input is touched.\n\t */\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\t/**\n\t * Called when search input is blurred. Needed to properly implement `ControlValueAccessor`.\n\t */\n\tonTouched: () => any = () => {};\n\n\t/**\n\t * Method set in `registerOnChange` to propagate changes back to the form.\n\t */\n\tpropagateChange = (_: any) => {};\n\n\t/**\n\t * Called when text is written in the input.\n\t * @param search The input text.\n\t */\n\tonSearch(search: string) {\n\t\tif (this.isComposing) { // check for IME use\n\t\t\treturn;\n\t\t}\n\t\tthis.value = search;\n\t\tthis.doValueChange();\n\t}\n\n\t/**\n\t * Called on enter.\n\t */\n\tonEnter() {\n\t\tthis.search.emit(this.value);\n\t}\n\n\t/**\n\t * Called when clear button is clicked.\n\t */\n\tclearSearch(): void {\n\t\tthis.value = \"\";\n\t\tthis.clear.emit();\n\t\tthis.propagateChange(this.value);\n\t}\n\n\tdoValueChange() {\n\t\tthis.valueChange.emit(this.value);\n\t\tthis.propagateChange(this.value);\n\t}\n\n\topenSearch() {\n\t\tthis.active = true;\n\t\tthis.open.emit(this.active);\n\t\tsetTimeout(() => this.inputRef.nativeElement.focus());\n\t}\n\n\t@HostListener(\"keydown\", [\"$event\"])\n\tkeyDown(event: KeyboardEvent) {\n\t\tif (this.toolbar || this.expandable) {\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\tif (this.value === \"\") {\n\t\t\t\t\tthis.active = false;\n\t\t\t\t\tthis.open.emit(this.active);\n\t\t\t\t}\n\t\t\t} else if (event.key === \"Enter\") {\n\t\t\t\tthis.openSearch();\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Escape\") {\n\t\t\tif (this.value !== \"\") {\n\t\t\t\tthis.clearSearch();\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\", [\"$event\"])\n\tfocusOut(event) {\n\t\tthis.onTouched();\n\t\tif ((this.expandable || this.toolbar) &&\n\t\t\tthis.inputRef &&\n\t\t\tthis.inputRef.nativeElement.value === \"\" &&\n\t\t\t!(this.elementRef.nativeElement as HTMLElement).contains(event.relatedTarget)) {\n\t\t\tthis.active = false;\n\t\t\tthis.open.emit(this.active);\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\", [\"$event\"])\n\tfocusIn(event) {\n\t\tthis.onTouched();\n\t\t// set input focus if search icon get focus from tab key press event.\n\t\tif ((this.expandable || this.toolbar) &&\n\t\t\tthis.inputRef && !event.relatedTarget &&\n\t\t\t!(this.elementRef.nativeElement as HTMLElement).contains(event.relatedTarget) ) {\n\t\t\tthis.openSearch();\n\t\t}\n\t}\n\n\t/**\n\t * Called when using IME composition.\n\t */\n\t@HostListener(\"compositionstart\", [\"$event\"])\n\tcompositionStart(event) {\n\t\tthis.isComposing = true;\n\t}\n\n\t/**\n\t * Called when IME composition finishes.\n\t */\n\t@HostListener(\"compositionend\", [\"$event\"])\n\tcompositionEnd(event) {\n\t\tthis.isComposing = false;\n\t\tthis.onSearch(this.value + event.data);\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -47970,7 +47989,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 140,
+                "line": 148,
                 "rawdescription": "\n\nCreates an instance of `Search`.\n",
                 "jsdoctags": [
                     {
@@ -47984,8 +48003,8 @@
                     },
                     {
                         "name": {
-                            "pos": 3419,
-                            "end": 3423,
+                            "pos": 3616,
+                            "end": 3620,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
@@ -47996,8 +48015,8 @@
                         "deprecated": false,
                         "deprecationMessage": "",
                         "tagName": {
-                            "pos": 3413,
-                            "end": 3418,
+                            "pos": 3610,
+                            "end": 3615,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
@@ -48021,9 +48040,18 @@
                         "returnType": "",
                         "line": 40
                     }
+                },
+                "fluidSkeletonClass": {
+                    "name": "fluidSkeletonClass",
+                    "getSignature": {
+                        "name": "fluidSkeletonClass",
+                        "type": "",
+                        "returnType": "",
+                        "line": 44
+                    }
                 }
             },
-            "templateData": "<div\n\tclass=\"cds--search\"\n\t[ngClass]=\"{\n\t\t'cds--search--sm': size === 'sm',\n\t\t'cds--search--md': size === 'md',\n\t\t'cds--search--lg': size === 'lg',\n\t\t'cds--search--light': theme === 'light',\n\t\t'cds--skeleton': skeleton,\n\t\t'cds--search--expandable': expandable && !tableSearch,\n\t\t'cds--search--expanded': expandable && !tableSearch && active,\n\t\t'cds--toolbar-search': toolbar && !expandable,\n\t\t'cds--toolbar-search--active': toolbar && !expandable && active,\n\t\t'cds--toolbar-search-container-persistent': tableSearch && !expandable,\n\t\t'cds--toolbar-search-container-expandable': tableSearch && expandable,\n\t\t'cds--toolbar-search-container-active': tableSearch && expandable && active\n\t}\"\n\trole=\"search\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(click)=\"openSearch()\">\n\t<label class=\"cds--label\" [for]=\"id\">{{label}}</label>\n\n\t<div *ngIf=\"skeleton; else enableInput\" class=\"cds--search-input\"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\tclass=\"cds--search-input\"\n\t\t\t[type]=\"tableSearch || !toolbar ? 'text' : 'search'\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t(keyup.enter)=\"onEnter()\"/>\n\t\t<button\n\t\t\t*ngIf=\"!tableSearch && toolbar\"\n\t\t\tclass=\"cds--toolbar-search__btn\"\n\t\t\t(click)=\"openSearch()\"\n\t\t\taria-label=\"Open search\">\n\t\t\t<svg cdsIcon=\"search\" size=\"16\" class=\"cds--search-magnifier-icon\"></svg>\n\t\t</button>\n\t\t<svg\n\t\t\tcdsIcon=\"search\"\n\t\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\t\tclass=\"cds--search-magnifier-icon\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\tclass=\"cds--search-close\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--search-close--hidden': !value || value.length === 0\n\t\t}\"\n\t\t[title]=\"clearButtonTitle\"\n\t\t(click)=\"clearSearch()\">\n\t\t<span class=\"cds--visually-hidden\">{{ clearButtonTitle }}</span>\n\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t</button>\n</div>\n"
+            "templateData": "<div\n\tclass=\"cds--search\"\n\t[ngClass]=\"{\n\t\t'cds--search--sm': size === 'sm',\n\t\t'cds--search--md': size === 'md',\n\t\t'cds--search--lg': size === 'lg',\n\t\t'cds--search--light': theme === 'light',\n\t\t'cds--skeleton': skeleton && !fluid,\n\t\t'cds--search--expandable': expandable && !tableSearch,\n\t\t'cds--search--expanded': expandable && !tableSearch && active,\n\t\t'cds--toolbar-search': toolbar && !expandable,\n\t\t'cds--toolbar-search--active': toolbar && !expandable && active,\n\t\t'cds--toolbar-search-container-persistent': tableSearch && !expandable,\n\t\t'cds--toolbar-search-container-expandable': tableSearch && expandable,\n\t\t'cds--toolbar-search-container-active': tableSearch && expandable && active,\n\t\t'cds--search--fluid': fluid,\n\t\t'cds--search--disabled': disabled\n\t}\"\n\trole=\"search\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(click)=\"openSearch()\">\n\t<label\n\t\tclass=\"cds--label\"\n\t\t[for]=\"id\"\n\t\t[ngClass]=\"{ 'cds--skeleton': skeleton && fluid }\">\n\t\t{{ !skeleton ? label : ''}}\n\t</label>\n\n\t<div *ngIf=\"skeleton; else enableInput\" class=\"cds--text-input cds--skeleton\"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\tclass=\"cds--search-input\"\n\t\t\t[type]=\"tableSearch || !toolbar ? 'text' : 'search'\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t(keyup.enter)=\"onEnter()\"/>\n\t\t<button\n\t\t\t*ngIf=\"!tableSearch && toolbar\"\n\t\t\tclass=\"cds--toolbar-search__btn\"\n\t\t\t(click)=\"openSearch()\"\n\t\t\taria-label=\"Open search\">\n\t\t\t<svg cdsIcon=\"search\" size=\"16\" class=\"cds--search-magnifier-icon\"></svg>\n\t\t</button>\n\t\t<svg\n\t\t\tcdsIcon=\"search\"\n\t\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\t\tclass=\"cds--search-magnifier-icon\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\tclass=\"cds--search-close\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--search-close--hidden': !value || value.length === 0\n\t\t}\"\n\t\t[title]=\"clearButtonTitle\"\n\t\t(click)=\"clearSearch()\">\n\t\t<span class=\"cds--visually-hidden\">{{ clearButtonTitle }}</span>\n\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t</button>\n</div>\n"
         },
         {
             "name": "Select",
@@ -59051,7 +59079,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to expand the toolbar search component.\n",
                     "description": "<p>Set to <code>true</code> to expand the toolbar search component.</p>\n",
-                    "line": 75,
+                    "line": 79,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -59064,7 +59092,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the aria label on the `div` element with the `search` role.\n",
                     "description": "<p>Sets the aria label on the <code>div</code> element with the <code>search</code> role.</p>\n",
-                    "line": 120,
+                    "line": 124,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -59078,7 +59106,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the autocomplete attribute on the `input` element.\nFor reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\n",
                     "description": "<p>Sets the autocomplete attribute on the <code>input</code> element.\nFor reference: <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values\">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#Values</a></p>\n",
-                    "line": 100,
+                    "line": 104,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -59092,7 +59120,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nUsed to set the `title` attribute of the clear button.\n",
                     "description": "<p>Used to set the <code>title</code> attribute of the clear button.</p>\n",
-                    "line": 112,
+                    "line": 116,
                     "type": "any",
                     "decorators": [],
                     "inheritance": {
@@ -59106,7 +59134,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a disabled search input.\n",
                     "description": "<p>Set to <code>true</code> for a disabled search input.</p>\n",
-                    "line": 58,
+                    "line": 62,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -59120,7 +59148,21 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to make the search component expandable.\n`expandable` would override `toolbar` property behaviours.\n",
                     "description": "<p>Set to <code>true</code> to make the search component expandable.\n<code>expandable</code> would override <code>toolbar</code> property behaviours.</p>\n",
-                    "line": 67,
+                    "line": 71,
+                    "type": "boolean",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "Search"
+                    }
+                },
+                {
+                    "name": "fluid",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nExperimental: enable fluid state\n",
+                    "description": "<p>Experimental: enable fluid state</p>\n",
+                    "line": 128,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -59134,7 +59176,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThe unique id for the search component.\n",
                     "description": "<p>The unique id for the search component.</p>\n",
-                    "line": 87,
+                    "line": 91,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -59148,7 +59190,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the text inside the `label` tag.\n",
                     "description": "<p>Sets the text inside the <code>label</code> tag.</p>\n",
-                    "line": 104,
+                    "line": 108,
                     "type": "any",
                     "decorators": [],
                     "inheritance": {
@@ -59161,7 +59203,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the name attribute on the `input` element.\n",
                     "description": "<p>Sets the name attribute on the <code>input</code> element.</p>\n",
-                    "line": 83,
+                    "line": 87,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -59175,7 +59217,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the placeholder attribute on the `input` element.\n",
                     "description": "<p>Sets the placeholder attribute on the <code>input</code> element.</p>\n",
-                    "line": 108,
+                    "line": 112,
                     "type": "any",
                     "decorators": [],
                     "inheritance": {
@@ -59188,7 +59230,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReflects the required attribute of the `input` element.\n",
                     "description": "<p>Reflects the required attribute of the <code>input</code> element.</p>\n",
-                    "line": 91,
+                    "line": 95,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -59202,7 +59244,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nTitle for the search trigger\n",
                     "description": "<p>Title for the search trigger</p>\n",
-                    "line": 116,
+                    "line": 120,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -59216,7 +59258,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSize of the search field.\n",
                     "description": "<p>Size of the search field.</p>\n",
-                    "line": 53,
+                    "line": 57,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": [],
                     "inheritance": {
@@ -59230,7 +59272,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a loading search component.\n",
                     "description": "<p>Set to <code>true</code> for a loading search component.</p>\n",
-                    "line": 71,
+                    "line": 75,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -59244,7 +59286,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSpecifies whether the search component is used in the table toolbar.\n",
                     "description": "<p>Specifies whether the search component is used in the table toolbar.</p>\n",
-                    "line": 79,
+                    "line": 83,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -59258,15 +59300,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` search theme.",
                     "jsdoctags": [
                         {
-                            "pos": 921,
-                            "end": 1015,
+                            "pos": 1046,
+                            "end": 1140,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 338,
                             "tagName": {
-                                "pos": 922,
-                                "end": 932,
+                                "pos": 1047,
+                                "end": 1057,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -59276,7 +59318,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\n<code>light</code> or <code>dark</code> search theme.</p>\n"
                         }
                     ],
-                    "line": 48,
+                    "line": 52,
                     "type": "\"light\" | \"dark\"",
                     "decorators": [],
                     "inheritance": {
@@ -59290,7 +59332,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for a toolbar search component.\n",
                     "description": "<p>Set to <code>true</code> for a toolbar search component.</p>\n",
-                    "line": 62,
+                    "line": 66,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -59304,7 +59346,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the value attribute on the `input` element.\n",
                     "description": "<p>Sets the value attribute on the <code>input</code> element.</p>\n",
-                    "line": 95,
+                    "line": 99,
                     "type": "string",
                     "decorators": [],
                     "inheritance": {
@@ -59320,7 +59362,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event when the clear button is clicked.\n",
                     "description": "<p>Emits an event when the clear button is clicked.</p>\n",
-                    "line": 129,
+                    "line": 137,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Search"
@@ -59331,7 +59373,7 @@
                     "defaultValue": "new EventEmitter<boolean>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 125,
+                    "line": 133,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Search"
@@ -59344,7 +59386,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event on enter.\n",
                     "description": "<p>Emits an event on enter.</p>\n",
-                    "line": 133,
+                    "line": 141,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Search"
@@ -59357,7 +59399,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nEmits an event when value is changed.\n",
                     "description": "<p>Emits an event when value is changed.</p>\n",
-                    "line": 124,
+                    "line": 132,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Search"
@@ -59411,7 +59453,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 135,
+                    "line": 143,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -59433,7 +59475,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "<p>Called when search input is blurred. Needed to properly implement <code>ControlValueAccessor</code>.</p>\n",
-                    "line": 176,
+                    "line": 184,
                     "rawdescription": "\n\nCalled when search input is blurred. Needed to properly implement `ControlValueAccessor`.\n",
                     "inheritance": {
                         "file": "Search"
@@ -59447,7 +59489,7 @@
                     "type": "",
                     "optional": false,
                     "description": "<p>Method set in <code>registerOnChange</code> to propagate changes back to the form.</p>\n",
-                    "line": 181,
+                    "line": 189,
                     "rawdescription": "\n\nMethod set in `registerOnChange` to propagate changes back to the form.\n",
                     "inheritance": {
                         "file": "Search"
@@ -59478,7 +59520,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 205,
+                    "line": 213,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when clear button is clicked.\n",
@@ -59500,7 +59542,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 277,
+                    "line": 285,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when IME composition finishes.\n",
@@ -59542,7 +59584,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 269,
+                    "line": 277,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when using IME composition.\n",
@@ -59577,7 +59619,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 211,
+                    "line": 219,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "inheritance": {
@@ -59597,7 +59639,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 255,
+                    "line": 263,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -59637,7 +59679,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 243,
+                    "line": 251,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -59677,7 +59719,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 223,
+                    "line": 231,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "decorators": [
@@ -59710,7 +59752,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 198,
+                    "line": 206,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled on enter.\n",
@@ -59732,7 +59774,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 187,
+                    "line": 195,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when text is written in the input.\n",
@@ -59740,8 +59782,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 4396,
-                                "end": 4402,
+                                "pos": 4593,
+                                "end": 4599,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -59752,8 +59794,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 4390,
-                                "end": 4395,
+                                "pos": 4587,
+                                "end": 4592,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -59773,7 +59815,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 216,
+                    "line": 224,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "inheritance": {
@@ -59793,7 +59835,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 161,
+                    "line": 169,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets a method in order to propagate changes back to the form.\n",
@@ -59829,7 +59871,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 169,
+                    "line": 177,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a callback to be triggered when the control has been touched.\n",
@@ -59840,8 +59882,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3942,
-                                "end": 3944,
+                                "pos": 4139,
+                                "end": 4141,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -59852,8 +59894,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3936,
-                                "end": 3941,
+                                "pos": 4133,
+                                "end": 4138,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -59880,7 +59922,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 154,
+                    "line": 162,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nThis is the initial value set to the component\n",
@@ -59891,8 +59933,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 3618,
-                                "end": 3623,
+                                "pos": 3815,
+                                "end": 3820,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -59903,8 +59945,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 3612,
-                                "end": 3617,
+                                "pos": 3809,
+                                "end": 3814,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -59941,6 +59983,17 @@
                     "inheritance": {
                         "file": "Search"
                     }
+                },
+                {
+                    "name": "class.cds--text-input--fluid__skeleton",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "line": 44,
+                    "type": "boolean",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "Search"
+                    }
                 }
             ],
             "hostListeners": [
@@ -59961,7 +60014,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when IME composition finishes.\n",
                     "description": "<p>Called when IME composition finishes.</p>\n",
-                    "line": 277,
+                    "line": 285,
                     "inheritance": {
                         "file": "Search"
                     }
@@ -59983,7 +60036,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nCalled when using IME composition.\n",
                     "description": "<p>Called when using IME composition.</p>\n",
-                    "line": 269,
+                    "line": 277,
                     "inheritance": {
                         "file": "Search"
                     }
@@ -60003,7 +60056,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 255,
+                    "line": 263,
                     "inheritance": {
                         "file": "Search"
                     }
@@ -60023,7 +60076,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 243,
+                    "line": 251,
                     "inheritance": {
                         "file": "Search"
                     }
@@ -60043,7 +60096,7 @@
                     ],
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 223,
+                    "line": 231,
                     "inheritance": {
                         "file": "Search"
                     }
@@ -60064,7 +60117,7 @@
             "implements": [
                 "AfterViewInit"
             ],
-            "templateData": "<div\n\tclass=\"cds--search\"\n\t[ngClass]=\"{\n\t\t'cds--search--sm': size === 'sm',\n\t\t'cds--search--md': size === 'md',\n\t\t'cds--search--lg': size === 'lg',\n\t\t'cds--search--light': theme === 'light',\n\t\t'cds--skeleton': skeleton,\n\t\t'cds--search--expandable': expandable && !tableSearch,\n\t\t'cds--search--expanded': expandable && !tableSearch && active,\n\t\t'cds--toolbar-search': toolbar && !expandable,\n\t\t'cds--toolbar-search--active': toolbar && !expandable && active,\n\t\t'cds--toolbar-search-container-persistent': tableSearch && !expandable,\n\t\t'cds--toolbar-search-container-expandable': tableSearch && expandable,\n\t\t'cds--toolbar-search-container-active': tableSearch && expandable && active\n\t}\"\n\trole=\"search\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(click)=\"openSearch()\">\n\t<label class=\"cds--label\" [for]=\"id\">{{label}}</label>\n\n\t<div *ngIf=\"skeleton; else enableInput\" class=\"cds--search-input\"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\tclass=\"cds--search-input\"\n\t\t\t[type]=\"tableSearch || !toolbar ? 'text' : 'search'\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t(keyup.enter)=\"onEnter()\"/>\n\t\t<button\n\t\t\t*ngIf=\"!tableSearch && toolbar\"\n\t\t\tclass=\"cds--toolbar-search__btn\"\n\t\t\t(click)=\"openSearch()\"\n\t\t\taria-label=\"Open search\">\n\t\t\t<svg cdsIcon=\"search\" size=\"16\" class=\"cds--search-magnifier-icon\"></svg>\n\t\t</button>\n\t\t<svg\n\t\t\tcdsIcon=\"search\"\n\t\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\t\tclass=\"cds--search-magnifier-icon\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\tclass=\"cds--search-close\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--search-close--hidden': !value || value.length === 0\n\t\t}\"\n\t\t[title]=\"clearButtonTitle\"\n\t\t(click)=\"clearSearch()\">\n\t\t<span class=\"cds--visually-hidden\">{{ clearButtonTitle }}</span>\n\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t</button>\n</div>\n"
+            "templateData": "<div\n\tclass=\"cds--search\"\n\t[ngClass]=\"{\n\t\t'cds--search--sm': size === 'sm',\n\t\t'cds--search--md': size === 'md',\n\t\t'cds--search--lg': size === 'lg',\n\t\t'cds--search--light': theme === 'light',\n\t\t'cds--skeleton': skeleton && !fluid,\n\t\t'cds--search--expandable': expandable && !tableSearch,\n\t\t'cds--search--expanded': expandable && !tableSearch && active,\n\t\t'cds--toolbar-search': toolbar && !expandable,\n\t\t'cds--toolbar-search--active': toolbar && !expandable && active,\n\t\t'cds--toolbar-search-container-persistent': tableSearch && !expandable,\n\t\t'cds--toolbar-search-container-expandable': tableSearch && expandable,\n\t\t'cds--toolbar-search-container-active': tableSearch && expandable && active,\n\t\t'cds--search--fluid': fluid,\n\t\t'cds--search--disabled': disabled\n\t}\"\n\trole=\"search\"\n\t[attr.aria-label]=\"ariaLabel\"\n\t(click)=\"openSearch()\">\n\t<label\n\t\tclass=\"cds--label\"\n\t\t[for]=\"id\"\n\t\t[ngClass]=\"{ 'cds--skeleton': skeleton && fluid }\">\n\t\t{{ !skeleton ? label : ''}}\n\t</label>\n\n\t<div *ngIf=\"skeleton; else enableInput\" class=\"cds--text-input cds--skeleton\"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\tclass=\"cds--search-input\"\n\t\t\t[type]=\"tableSearch || !toolbar ? 'text' : 'search'\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t(input)=\"onSearch($event.target.value)\"\n\t\t\t(keyup.enter)=\"onEnter()\"/>\n\t\t<button\n\t\t\t*ngIf=\"!tableSearch && toolbar\"\n\t\t\tclass=\"cds--toolbar-search__btn\"\n\t\t\t(click)=\"openSearch()\"\n\t\t\taria-label=\"Open search\">\n\t\t\t<svg cdsIcon=\"search\" size=\"16\" class=\"cds--search-magnifier-icon\"></svg>\n\t\t</button>\n\t\t<svg\n\t\t\tcdsIcon=\"search\"\n\t\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\t\tclass=\"cds--search-magnifier-icon\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\tclass=\"cds--search-close\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--search-close--hidden': !value || value.length === 0\n\t\t}\"\n\t\t[title]=\"clearButtonTitle\"\n\t\t(click)=\"clearSearch()\">\n\t\t<span class=\"cds--visually-hidden\">{{ clearButtonTitle }}</span>\n\t\t<svg cdsIcon=\"close\" size=\"16\"></svg>\n\t</button>\n</div>\n"
         },
         {
             "name": "Tabs",
@@ -71640,7 +71693,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/button/button-set.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -71650,7 +71703,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button-set.stories.ts",
+                "file": "src/button/button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -71660,7 +71713,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button.stories.ts",
+                "file": "src/button/icon-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -71670,7 +71723,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/icon-button.stories.ts",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -72677,6 +72730,16 @@
                 "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/search/search.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "Template.bind({})"
+            },
             {
                 "name": "FormModal",
                 "ctype": "miscellaneous",
@@ -74352,41 +74415,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",
@@ -74676,7 +74739,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-search\n\t\t\t[theme]=\"theme\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t(valueChange)=\"valueChange($event)\"\n\t\t\t(clear)=\"clear()\"\n\t\t\t[expandable]=\"expandable\">\n\t\t</cds-search>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-search\n\t\t\t[theme]=\"theme\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t(valueChange)=\"valueChange($event)\"\n\t\t\t(clear)=\"clear()\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[expandable]=\"expandable\">\n\t\t</cds-search>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -78152,199 +78215,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": [
@@ -79770,6 +79833,16 @@
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
+                {
+                    "name": "Fluid",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/search/search.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
                 {
                     "name": "Template",
                     "ctype": "miscellaneous",
@@ -79778,7 +79851,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-search\n\t\t\t[theme]=\"theme\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t(valueChange)=\"valueChange($event)\"\n\t\t\t(clear)=\"clear()\"\n\t\t\t[expandable]=\"expandable\">\n\t\t</cds-search>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-search\n\t\t\t[theme]=\"theme\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[size]=\"size\"\n\t\t\t(valueChange)=\"valueChange($event)\"\n\t\t\t(clear)=\"clear()\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[expandable]=\"expandable\">\n\t\t</cds-search>\n\t`\n})"
                 }
             ],
             "src/select/select.stories.ts": [
@@ -87220,8 +87293,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "Search",
-                "coveragePercent": 74,
-                "coverageCount": "35/47",
+                "coveragePercent": 73,
+                "coverageCount": "36/49",
                 "status": "good"
             },
             {
@@ -87234,6 +87307,16 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/search/search.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Fluid",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/search/search.stories.ts",
                 "type": "variable",
@@ -88255,8 +88338,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TableToolbarSearch",
-                "coveragePercent": 66,
-                "coverageCount": "33/50",
+                "coveragePercent": 65,
+                "coverageCount": "34/52",
                 "status": "good"
             },
             {