npm - carbon-components-angular - Versions diffs - 5.42.0 → 5.43.0 - Mend

carbon-components-angular 5.42.0 → 5.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/docs/documentation.json CHANGED Viewed

@@ -48072,7 +48072,7 @@
         },
         {
             "name": "Select",
-            "id": "component-Select-a8a6aae51793162f41b32c2eaf5df8d974b99126b971714fb6d30709bbc9b741e78d609f84b0a66faf6864d6e876999f10d0892e0b4c21ac628f16a6620511be",
+            "id": "component-Select-1e2d51c6aa5587000b16796804ed1f037899fa0a087b582a31939dce30d877ec70027b593f8dd0a00a6ecb3c6f4407523beb9a9199b9e9f32c5171a66f733cbd",
             "file": "src/select/select.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -48086,7 +48086,7 @@
             "selector": "cds-select, ibm-select",
             "styleUrls": [],
             "styles": [],
-            "template": "<div class=\"cds--form-item\">\n\t<ng-template [ngIf]=\"skeleton\">\n\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t</ng-template>\n\t<div\n\t\t*ngIf=\"!skeleton\"\n\t\tclass=\"cds--select\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t'cds--select--light': theme === 'light',\n\t\t\t'cds--select--invalid': invalid,\n\t\t\t'cds--select--warning': warn,\n\t\t\t'cds--select--disabled': disabled,\n\t\t\t'cds--select--readonly': readonly\n\t\t}\">\n\t\t<label\n\t\t\t*ngIf=\"label\"\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</label>\n\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"helperText\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t</div>\n</div>\n\n<!-- select element: dynamically projected based on 'display' variant -->\n<ng-template #noInline>\n\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t<select\n\t\t\t#select\n\t\t\t[attr.id]=\"id\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\t[attr.aria-readonly]=\"readonly ? 'true' : null\"\n\t\t\tclass=\"cds--select-input\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t}\"\n\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t<ng-content></ng-content>\n\t\t</select>\n\t\t<svg\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\tstyle=\"will-change: transform;\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tclass=\"cds--select__arrow\"\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\taria-hidden=\"true\">\n\t\t\t<path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--select__invalid-icon\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t</svg>\n\t</div>\n\t<div\n\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n</ng-template>\n\t",
+            "template": "<div\n\t[ngClass]=\"{\n\t\t'cds--form-item': !skeleton,\n\t\t'cds--select--fluid': fluid && !skeleton\n\t}\">\n\t<ng-container *ngIf=\"skeleton && !fluid\">\n\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t</ng-container>\n\t<ng-container *ngIf=\"skeleton && fluid\">\n\t\t<div class=\"cds--list-box__wrapper--fluid\">\n\t\t\t<div class=\"cds--list-box cds--skeleton\">\n\t\t\t\t<div class=\"cds--list-box__label\"></div>\n\t\t\t\t<div class=\"cds--list-box__field\"></div>\n\t\t\t</div>\n\t\t</div>\n\t</ng-container>\n\t<div\n\t\t*ngIf=\"!skeleton\"\n\t\tclass=\"cds--select\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t'cds--select--light': theme === 'light',\n\t\t\t'cds--select--invalid': invalid,\n\t\t\t'cds--select--warning': warn,\n\t\t\t'cds--select--disabled': disabled,\n\t\t\t'cds--select--readonly': readonly,\n\t\t\t'cds--select--fluid--invalid': fluid && invalid,\n\t\t\t'cds--select--fluid--focus': fluid && focused\n\t\t}\">\n\t\t<label\n\t\t\t*ngIf=\"label\"\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</label>\n\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"helperText && !invalid && !warn && !skeleton && !fluid\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t}\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t</div>\n</div>\n\n<!-- select element: dynamically projected based on 'display' variant -->\n<ng-template #noInline>\n\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t<select\n\t\t\t#select\n\t\t\t[attr.id]=\"id\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\t[attr.aria-readonly]=\"readonly ? 'true' : null\"\n\t\t\tclass=\"cds--select-input\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t}\"\n\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t(keydown)=\"onKeyDown($event)\"\n\t\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t(blur)=\"fluid ? handleFocus($event) : null\">\n\t\t\t<ng-content></ng-content>\n\t\t</select>\n\t\t<svg\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\tstyle=\"will-change: transform;\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tclass=\"cds--select__arrow\"\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\taria-hidden=\"true\">\n\t\t\t<path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"invalid\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--select__invalid-icon\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t</svg>\n\t\t<ng-container *ngIf=\"fluid\">\n\t\t\t<hr class=\"cds--select__divider\" />\n\t\t\t<div\n\t\t\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</ng-container>\n\t</div>\n\t<ng-container *ngIf=\"!fluid\">\n\t\t<div\n\t\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t</ng-container>\n</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -48095,7 +48095,7 @@
                     "name": "ariaLabel",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 210,
+                    "line": 240,
                     "type": "string",
                     "decorators": []
                 },
@@ -48106,7 +48106,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to true to disable component.\n",
                     "description": "<p>Set to true to disable component.</p>\n",
-                    "line": 191,
+                    "line": 221,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48117,17 +48117,28 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`inline` or `default` select displays\n",
                     "description": "<p><code>inline</code> or <code>default</code> select displays</p>\n",
-                    "line": 159,
+                    "line": 189,
                     "type": "\"inline\" | \"default\"",
                     "decorators": []
                 },
+                {
+                    "name": "fluid",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nExperimental: enable fluid state\n",
+                    "description": "<p>Experimental: enable fluid state</p>\n",
+                    "line": 245,
+                    "type": "boolean",
+                    "decorators": []
+                },
                 {
                     "name": "helperText",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOptional helper text that appears under the label.\n",
                     "description": "<p>Optional helper text that appears under the label.</p>\n",
-                    "line": 167,
+                    "line": 197,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -48138,7 +48149,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the unique ID. Defaults to `select-${total count of selects instantiated}`\n",
                     "description": "<p>Sets the unique ID. Defaults to <code>select-${total count of selects instantiated}</code></p>\n",
-                    "line": 183,
+                    "line": 213,
                     "type": "string",
                     "decorators": []
                 },
@@ -48149,7 +48160,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for an invalid select component.\n",
                     "description": "<p>Set to <code>true</code> for an invalid select component.</p>\n",
-                    "line": 199,
+                    "line": 229,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48159,7 +48170,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the invalid text.\n",
                     "description": "<p>Sets the invalid text.</p>\n",
-                    "line": 171,
+                    "line": 201,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -48169,7 +48180,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nLabel for the select. Appears above the input.\n",
                     "description": "<p>Label for the select. Appears above the input.</p>\n",
-                    "line": 163,
+                    "line": 193,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -48180,7 +48191,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for readonly state.\n",
                     "description": "<p>Set to <code>true</code> for readonly state.</p>\n",
-                    "line": 203,
+                    "line": 233,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48191,7 +48202,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nNumber input field render size\n",
                     "description": "<p>Number input field render size</p>\n",
-                    "line": 187,
+                    "line": 217,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -48202,7 +48213,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to true for a loading select.\n",
                     "description": "<p>Set to true for a loading select.</p>\n",
-                    "line": 195,
+                    "line": 225,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48213,15 +48224,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\n`light` or `dark` select theme",
                     "jsdoctags": [
                         {
-                            "pos": 5728,
-                            "end": 5821,
+                            "pos": 7049,
+                            "end": 7142,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 338,
                             "tagName": {
-                                "pos": 5729,
-                                "end": 5739,
+                                "pos": 7050,
+                                "end": 7060,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -48231,7 +48242,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\n<code>light</code> or <code>dark</code> select theme</p>\n"
                         }
                     ],
-                    "line": 209,
+                    "line": 239,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -48239,7 +48250,7 @@
                     "name": "value",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 140,
+                    "line": 170,
                     "type": "any",
                     "decorators": []
                 },
@@ -48250,7 +48261,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
-                    "line": 175,
+                    "line": 205,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -48260,7 +48271,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text\n",
                     "description": "<p>Sets the warning text</p>\n",
-                    "line": 179,
+                    "line": 209,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 }
@@ -48271,11 +48282,21 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 212,
+                    "line": 247,
                     "type": "EventEmitter"
                 }
             ],
             "propertiesClass": [
+                {
+                    "name": "focused",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 251
+                },
                 {
                     "name": "select",
                     "deprecated": false,
@@ -48283,7 +48304,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 214,
+                    "line": 249,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -48302,7 +48323,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Tracks the total number of selects instantiated. Used to generate unique IDs</p>\n",
-                    "line": 154,
+                    "line": 184,
                     "rawdescription": "\n\nTracks the total number of selects instantiated. Used to generate unique IDs\n",
                     "modifierKind": [
                         126
@@ -48316,7 +48337,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 271,
+                    "line": 308,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nListens for the host blurring, and notifies the model\n",
@@ -48331,6 +48352,34 @@
                         170
                     ]
                 },
+                {
+                    "name": "handleFocus",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "FocusEvent",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 336,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "name": "event",
+                            "type": "FocusEvent",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
                 {
                     "name": "isTemplate",
                     "args": [
@@ -48344,7 +48393,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 275,
+                    "line": 312,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -48375,7 +48424,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 261,
+                    "line": 298,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the change event from the `select`.\nSends events to the change handler and emits a `selected` event.\n",
@@ -48405,7 +48454,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 289,
+                    "line": 326,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -48433,7 +48482,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 279,
+                    "line": 316,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -48461,7 +48510,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 239,
+                    "line": 276,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a listener that notifies the model when the control updates\n",
@@ -48491,7 +48540,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 246,
+                    "line": 283,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a listener that notifies the model when the control is blurred\n",
@@ -48521,7 +48570,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 253,
+                    "line": 290,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the disabled state through the model\n",
@@ -48551,7 +48600,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 232,
+                    "line": 269,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReceives a value from the model.\n",
@@ -48581,7 +48630,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nListens for the host blurring, and notifies the model\n",
                     "description": "<p>Listens for the host blurring, and notifies the model</p>\n",
-                    "line": 271
+                    "line": 308
                 }
             ],
             "standalone": false,
@@ -48589,7 +48638,7 @@
             "description": "<p><code>cds-select</code> provides a styled <code>select</code> component. Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { SelectModule } from &#39;carbon-components-angular&#39;;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-select [(ngModel)]=&quot;model&quot;&gt;\n    &lt;option value=&quot;default&quot; disabled selected hidden&gt;Choose an option&lt;/option&gt;\n    &lt;option value=&quot;option1&quot;&gt;Option 1&lt;/option&gt;\n    &lt;option value=&quot;option2&quot;&gt;Option 2&lt;/option&gt;\n    &lt;option value=&quot;option3&quot;&gt;Option 3&lt;/option&gt;\n&lt;/cds-select&gt;\n    ```\n\n[See demo](../../?path=/story/components-select--basic)</code></pre></div>",
             "rawdescription": "\n\n`cds-select` provides a styled `select` component. Get started with importing the module:\n\n```typescript\nimport { SelectModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-select [(ngModel)]=\"model\">\n\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t<option value=\"option1\">Option 1</option>\n\t<option value=\"option2\">Option 2</option>\n\t<option value=\"option3\">Option 3</option>\n</cds-select>\n\t```\n\n[See demo](../../?path=/story/components-select--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tElementRef,\n\tInput,\n\tOutput,\n\tHostListener,\n\tEventEmitter,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/**\n * `cds-select` provides a styled `select` component. Get started with importing the module:\n *\n * ```typescript\n * import { SelectModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-select [(ngModel)]=\"model\">\n * \t<option value=\"default\" disabled selected hidden>Choose an option</option>\n * \t<option value=\"option1\">Option 1</option>\n *\t<option value=\"option2\">Option 2</option>\n * \t<option value=\"option3\">Option 3</option>\n * </cds-select>\n *\t```\n *\n * [See demo](../../?path=/story/components-select--basic)\n */\n@Component({\n\tselector: \"cds-select, ibm-select\",\n\ttemplate: `\n\t\t<div class=\"cds--form-item\">\n\t\t\t<ng-template [ngIf]=\"skeleton\">\n\t\t\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t\t\t</ng-template>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\tclass=\"cds--select\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t\t\t'cds--select--light': theme === 'light',\n\t\t\t\t\t'cds--select--invalid': invalid,\n\t\t\t\t\t'cds--select--warning': warn,\n\t\t\t\t\t'cds--select--disabled': disabled,\n\t\t\t\t\t'cds--select--readonly': readonly\n\t\t\t\t}\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- select element: dynamically projected based on 'display' variant -->\n\t\t<ng-template #noInline>\n\t\t\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<select\n\t\t\t\t\t#select\n\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\t\t\t[attr.aria-readonly]=\"readonly ? 'true' : null\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t\t\t}\"\n\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Select,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Select implements ControlValueAccessor, AfterViewInit {\n\t@Input() set value(v) {\n\t\tthis._value = v;\n\t\tif (this.select) {\n\t\t\tthis.select.nativeElement.value = this._value;\n\t\t}\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Tracks the total number of selects instantiated. Used to generate unique IDs\n\t */\n\tstatic selectCount = 0;\n\n\t/**\n\t * `inline` or `default` select displays\n\t */\n\t@Input() display: \"inline\" | \"default\" = \"default\";\n\t/**\n\t * Label for the select. Appears above the input.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`\n\t */\n\t@Input() id = `select-${Select.selectCount++}`;\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to true to disable component.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to true for a loading select.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid select component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` select theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t@Input() ariaLabel: string;\n\n\t@Output() valueChange = new EventEmitter();\n\n\t@ViewChild(\"select\") select: ElementRef;\n\n\tprotected _value;\n\n\tngAfterViewInit() {\n\t\tif (\n\t\t\tthis.value !== undefined &&\n\t\t\tthis.value !== null &&\n\t\t\tthis.select &&\n\t\t\tthis.select.nativeElement.value !== this.value\n\t\t) {\n\t\t\tthis.select.nativeElement.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Receives a value from the model.\n\t */\n\twriteValue(obj: any) {\n\t\tthis.value = obj;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control updates\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeHandler = fn;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control is blurred\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedHandler = fn;\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Handles the change event from the `select`.\n\t * Sends events to the change handler and emits a `selected` event.\n\t */\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.onChangeHandler(event.target.value);\n\t\tthis.valueChange.emit(event.target.value);\n\t}\n\n\t/**\n\t * Listens for the host blurring, and notifies the model\n\t */\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouchedHandler();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tonMouseDown(event: MouseEvent) {\n\t\t/**\n\t\t * This prevents the select from opening with mouse\n\t\t */\n\t\tif (this.readonly) {\n\t\t\tevent.preventDefault();\n\t\t\t(<HTMLElement>event.target).focus();\n\t\t}\n\t}\n\n\tonKeyDown(event: KeyboardEvent) {\n\t\tconst selectAccessKeys = [\"ArrowDown\", \"ArrowUp\", \"ArrowLeft\", \"ArrowRight\", \" \"];\n\t\t/**\n\t\t * This prevents the select from opening for the above keys\n\t\t */\n\t\tif (this.readonly && selectAccessKeys.includes(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\t/**\n\t * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`\n\t */\n\tprotected onChangeHandler = (_: any) => { };\n\tprotected onTouchedHandler = () => { };\n}\n",
+            "sourceCode": "import {\n\tAfterViewInit,\n\tComponent,\n\tElementRef,\n\tInput,\n\tOutput,\n\tHostListener,\n\tEventEmitter,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n/**\n * `cds-select` provides a styled `select` component. Get started with importing the module:\n *\n * ```typescript\n * import { SelectModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-select [(ngModel)]=\"model\">\n * \t<option value=\"default\" disabled selected hidden>Choose an option</option>\n * \t<option value=\"option1\">Option 1</option>\n *\t<option value=\"option2\">Option 2</option>\n * \t<option value=\"option3\">Option 3</option>\n * </cds-select>\n *\t```\n *\n * [See demo](../../?path=/story/components-select--basic)\n */\n@Component({\n\tselector: \"cds-select, ibm-select\",\n\ttemplate: `\n\t\t<div\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--form-item': !skeleton,\n\t\t\t\t'cds--select--fluid': fluid && !skeleton\n\t\t\t}\">\n\t\t\t<ng-container *ngIf=\"skeleton && !fluid\">\n\t\t\t\t<div *ngIf=\"label\" class=\"cds--label cds--skeleton\"></div>\n\t\t\t\t<div class=\"cds--select cds--skeleton\"></div>\n\t\t\t</ng-container>\n\t\t\t<ng-container *ngIf=\"skeleton && fluid\">\n\t\t\t\t<div class=\"cds--list-box__wrapper--fluid\">\n\t\t\t\t\t<div class=\"cds--list-box cds--skeleton\">\n\t\t\t\t\t\t<div class=\"cds--list-box__label\"></div>\n\t\t\t\t\t\t<div class=\"cds--list-box__field\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\tclass=\"cds--select\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--select--inline': display === 'inline',\n\t\t\t\t\t'cds--select--light': theme === 'light',\n\t\t\t\t\t'cds--select--invalid': invalid,\n\t\t\t\t\t'cds--select--warning': warn,\n\t\t\t\t\t'cds--select--disabled': disabled,\n\t\t\t\t\t'cds--select--readonly': readonly,\n\t\t\t\t\t'cds--select--fluid--invalid': fluid && invalid,\n\t\t\t\t\t'cds--select--fluid--focus': fluid && focused\n\t\t\t\t}\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div *ngIf=\"display === 'inline'; else noInline\" class=\"cds--select-input--inline__wrapper\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"noInline\"></ng-container>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn && !skeleton && !fluid\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t\t\t\t}\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- select element: dynamically projected based on 'display' variant -->\n\t\t<ng-template #noInline>\n\t\t\t<div class=\"cds--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t<select\n\t\t\t\t\t#select\n\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t[attr.aria-invalid]=\"invalid ? 'true' : null\"\n\t\t\t\t\t[attr.aria-readonly]=\"readonly ? 'true' : null\"\n\t\t\t\t\tclass=\"cds--select-input\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--select-input--sm': size === 'sm',\n\t\t\t\t\t\t'cds--select-input--md': size === 'md',\n\t\t\t\t\t\t'cds--select-input--lg': size === 'lg'\n\t\t\t\t\t}\"\n\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t(keydown)=\"onKeyDown($event)\"\n\t\t\t\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t\t\t(blur)=\"fluid ? handleFocus($event) : null\">\n\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tclass=\"cds--select__arrow\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z\"></path>\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--select__invalid-icon cds--select__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-container *ngIf=\"fluid\">\n\t\t\t\t\t<hr class=\"cds--select__divider\" />\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-container>\n\t\t\t</div>\n\t\t\t<ng-container *ngIf=\"!fluid\">\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"invalid && invalidText\" role=\"alert\" class=\"cds--form-requirement\" aria-live=\"polite\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t</ng-template>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Select,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Select implements ControlValueAccessor, AfterViewInit {\n\t@Input() set value(v) {\n\t\tthis._value = v;\n\t\tif (this.select) {\n\t\t\tthis.select.nativeElement.value = this._value;\n\t\t}\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Tracks the total number of selects instantiated. Used to generate unique IDs\n\t */\n\tstatic selectCount = 0;\n\n\t/**\n\t * `inline` or `default` select displays\n\t */\n\t@Input() display: \"inline\" | \"default\" = \"default\";\n\t/**\n\t * Label for the select. Appears above the input.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`\n\t */\n\t@Input() id = `select-${Select.selectCount++}`;\n\t/**\n\t * Number input field render size\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to true to disable component.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to true for a loading select.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an invalid select component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Set to `true` for readonly state.\n\t */\n\t@Input() readonly = false;\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` select theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@Input() fluid = false;\n\n\t@Output() valueChange = new EventEmitter();\n\n\t@ViewChild(\"select\") select: ElementRef;\n\n\tfocused = false;\n\n\tprotected _value;\n\n\tngAfterViewInit() {\n\t\tif (\n\t\t\tthis.value !== undefined &&\n\t\t\tthis.value !== null &&\n\t\t\tthis.select &&\n\t\t\tthis.select.nativeElement.value !== this.value\n\t\t) {\n\t\t\tthis.select.nativeElement.value = this.value;\n\t\t}\n\t}\n\n\t/**\n\t * Receives a value from the model.\n\t */\n\twriteValue(obj: any) {\n\t\tthis.value = obj;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control updates\n\t */\n\tregisterOnChange(fn: any) {\n\t\tthis.onChangeHandler = fn;\n\t}\n\n\t/**\n\t * Registers a listener that notifies the model when the control is blurred\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedHandler = fn;\n\t}\n\n\t/**\n\t * Sets the disabled state through the model\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Handles the change event from the `select`.\n\t * Sends events to the change handler and emits a `selected` event.\n\t */\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.onChangeHandler(event.target.value);\n\t\tthis.valueChange.emit(event.target.value);\n\t}\n\n\t/**\n\t * Listens for the host blurring, and notifies the model\n\t */\n\t@HostListener(\"focusout\")\n\tfocusOut() {\n\t\tthis.onTouchedHandler();\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tonMouseDown(event: MouseEvent) {\n\t\t/**\n\t\t * This prevents the select from opening with mouse\n\t\t */\n\t\tif (this.readonly) {\n\t\t\tevent.preventDefault();\n\t\t\t(<HTMLElement>event.target).focus();\n\t\t}\n\t}\n\n\tonKeyDown(event: KeyboardEvent) {\n\t\tconst selectAccessKeys = [\"ArrowDown\", \"ArrowUp\", \"ArrowLeft\", \"ArrowRight\", \" \"];\n\t\t/**\n\t\t * This prevents the select from opening for the above keys\n\t\t */\n\t\tif (this.readonly && selectAccessKeys.includes(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis.focused = event.type === \"focus\";\n\t}\n\n\t/**\n\t * placeholder declarations. Replaced by the functions provided to `registerOnChange` and `registerOnTouched`\n\t */\n\tprotected onChangeHandler = (_: any) => { };\n\tprotected onTouchedHandler = () => { };\n\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -48615,7 +48664,7 @@
                             }
                         ],
                         "returnType": "void",
-                        "line": 140,
+                        "line": 170,
                         "jsdoctags": [
                             {
                                 "name": "v",
@@ -48632,7 +48681,7 @@
                         "name": "value",
                         "type": "",
                         "returnType": "",
-                        "line": 147
+                        "line": 177
                     }
                 }
             }
@@ -62461,7 +62510,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to true to disable component.\n",
                     "description": "<p>Set to true to disable component.</p>\n",
-                    "line": 191,
+                    "line": 221,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -62475,20 +62524,34 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\n`inline` or `default` select displays\n",
                     "description": "<p><code>inline</code> or <code>default</code> select displays</p>\n",
-                    "line": 159,
+                    "line": 189,
                     "type": "\"inline\" | \"default\"",
                     "decorators": [],
                     "inheritance": {
                         "file": "Select"
                     }
                 },
+                {
+                    "name": "fluid",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "rawdescription": "\n\nExperimental: enable fluid state\n",
+                    "description": "<p>Experimental: enable fluid state</p>\n",
+                    "line": 245,
+                    "type": "boolean",
+                    "decorators": [],
+                    "inheritance": {
+                        "file": "Select"
+                    }
+                },
                 {
                     "name": "helperText",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nOptional helper text that appears under the label.\n",
                     "description": "<p>Optional helper text that appears under the label.</p>\n",
-                    "line": 167,
+                    "line": 197,
                     "type": "string | TemplateRef<any>",
                     "decorators": [],
                     "inheritance": {
@@ -62502,7 +62565,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for an invalid select component.\n",
                     "description": "<p>Set to <code>true</code> for an invalid select component.</p>\n",
-                    "line": 199,
+                    "line": 229,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -62515,7 +62578,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the invalid text.\n",
                     "description": "<p>Sets the invalid text.</p>\n",
-                    "line": 171,
+                    "line": 201,
                     "type": "string | TemplateRef<any>",
                     "decorators": [],
                     "inheritance": {
@@ -62529,7 +62592,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for readonly state.\n",
                     "description": "<p>Set to <code>true</code> for readonly state.</p>\n",
-                    "line": 203,
+                    "line": 233,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -62543,7 +62606,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nNumber input field render size\n",
                     "description": "<p>Number input field render size</p>\n",
-                    "line": 187,
+                    "line": 217,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": [],
                     "inheritance": {
@@ -62554,7 +62617,7 @@
                     "name": "value",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 140,
+                    "line": 170,
                     "type": "any",
                     "decorators": [],
                     "inheritance": {
@@ -62568,7 +62631,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning (contents set by warningText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning (contents set by warningText)</p>\n",
-                    "line": 175,
+                    "line": 205,
                     "type": "boolean",
                     "decorators": [],
                     "inheritance": {
@@ -62581,7 +62644,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text\n",
                     "description": "<p>Sets the warning text</p>\n",
-                    "line": 179,
+                    "line": 209,
                     "type": "string | TemplateRef<any>",
                     "decorators": [],
                     "inheritance": {
@@ -62595,7 +62658,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 212,
+                    "line": 247,
                     "type": "EventEmitter",
                     "inheritance": {
                         "file": "Select"
@@ -62660,6 +62723,19 @@
                         170
                     ]
                 },
+                {
+                    "name": "focused",
+                    "defaultValue": "false",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 251,
+                    "inheritance": {
+                        "file": "Select"
+                    }
+                },
                 {
                     "name": "select",
                     "deprecated": false,
@@ -62667,7 +62743,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 214,
+                    "line": 249,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -62689,7 +62765,7 @@
                     "type": "number",
                     "optional": false,
                     "description": "<p>Tracks the total number of selects instantiated. Used to generate unique IDs</p>\n",
-                    "line": 154,
+                    "line": 184,
                     "rawdescription": "\n\nTracks the total number of selects instantiated. Used to generate unique IDs\n",
                     "modifierKind": [
                         126
@@ -62706,7 +62782,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 271,
+                    "line": 308,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nListens for the host blurring, and notifies the model\n",
@@ -62724,6 +62800,37 @@
                         "file": "Select"
                     }
                 },
+                {
+                    "name": "handleFocus",
+                    "args": [
+                        {
+                            "name": "event",
+                            "type": "FocusEvent",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 336,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "name": "event",
+                            "type": "FocusEvent",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ],
+                    "inheritance": {
+                        "file": "Select"
+                    }
+                },
                 {
                     "name": "isTemplate",
                     "args": [
@@ -62737,7 +62844,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 275,
+                    "line": 312,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -62771,7 +62878,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 261,
+                    "line": 298,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nHandles the change event from the `select`.\nSends events to the change handler and emits a `selected` event.\n",
@@ -62804,7 +62911,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 289,
+                    "line": 326,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -62835,7 +62942,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 279,
+                    "line": 316,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -62866,7 +62973,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 239,
+                    "line": 276,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a listener that notifies the model when the control updates\n",
@@ -62899,7 +63006,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 246,
+                    "line": 283,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nRegisters a listener that notifies the model when the control is blurred\n",
@@ -62932,7 +63039,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 253,
+                    "line": 290,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the disabled state through the model\n",
@@ -62965,7 +63072,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 232,
+                    "line": 269,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "rawdescription": "\n\nReceives a value from the model.\n",
@@ -63034,7 +63141,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nListens for the host blurring, and notifies the model\n",
                     "description": "<p>Listens for the host blurring, and notifies the model</p>\n",
-                    "line": 271,
+                    "line": 308,
                     "inheritance": {
                         "file": "Select"
                     }
@@ -71755,7 +71862,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/button/button-set.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -71765,7 +71872,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button-set.stories.ts",
+                "file": "src/button/button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -71775,7 +71882,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button.stories.ts",
+                "file": "src/button/icon-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -71785,7 +71892,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/icon-button.stories.ts",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -72812,6 +72919,16 @@
                 "type": "",
                 "defaultValue": "Template.bind({})"
             },
+            {
+                "name": "Fluid",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "src/select/select.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "",
+                "defaultValue": "Template.bind({})"
+            },
             {
                 "name": "FormModal",
                 "ctype": "miscellaneous",
@@ -73526,7 +73643,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[display]=\"display\"\n\t\t\tariaLabel='ngModel select'>\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t<option value=\"option3\">Option 3</option>\n\t\t</cds-select>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t[display]=\"display\"\n\t\t\tariaLabel='ngModel select'>\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t<option value=\"option3\">Option 3</option>\n\t\t</cds-select>\n\t`\n})"
             },
             {
                 "name": "NgTemplate",
@@ -74487,41 +74604,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",
@@ -74821,7 +74938,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[display]=\"display\">\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"solong\">A much longer option that is worth having around to check how text flows</option>\n\t\t\t<optgroup label=\"Category 1\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t\t<optgroup label=\"Category 2\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t</cds-select>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t[display]=\"display\">\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"solong\">A much longer option that is worth having around to check how text flows</option>\n\t\t\t<optgroup label=\"Category 1\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t\t<optgroup label=\"Category 2\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t</cds-select>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -78287,199 +78404,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": [
@@ -79947,6 +80064,16 @@
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
+                {
+                    "name": "Fluid",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/select/select.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
                 {
                     "name": "NgModel",
                     "ctype": "miscellaneous",
@@ -79965,7 +80092,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[display]=\"display\"\n\t\t\tariaLabel='ngModel select'>\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t<option value=\"option3\">Option 3</option>\n\t\t</cds-select>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t[display]=\"display\"\n\t\t\tariaLabel='ngModel select'>\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t<option value=\"option3\">Option 3</option>\n\t\t</cds-select>\n\t`\n})"
                 },
                 {
                     "name": "OptionsSelected",
@@ -80015,7 +80142,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[display]=\"display\">\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"solong\">A much longer option that is worth having around to check how text flows</option>\n\t\t\t<optgroup label=\"Category 1\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t\t<optgroup label=\"Category 2\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t</cds-select>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-select\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[size]=\"size\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t[display]=\"display\">\n\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t<option value=\"solong\">A much longer option that is worth having around to check how text flows</option>\n\t\t\t<optgroup label=\"Category 1\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t\t<optgroup label=\"Category 2\">\n\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t</optgroup>\n\t\t</cds-select>\n\t`\n})"
                 },
                 {
                     "name": "ValueProperty",
@@ -87442,8 +87569,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "Select",
-                "coveragePercent": 72,
-                "coverageCount": "21/29",
+                "coveragePercent": 68,
+                "coverageCount": "22/32",
                 "status": "good"
             },
             {
@@ -87456,6 +87583,16 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "src/select/select.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Fluid",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "src/select/select.stories.ts",
                 "type": "variable",
@@ -89048,8 +89185,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "TimePickerSelect",
-                "coveragePercent": 52,
-                "coverageCount": "19/36",
+                "coveragePercent": 51,
+                "coverageCount": "20/39",
                 "status": "good"
             },
             {