carbon-components-angular 5.62.1 → 5.64.0

package/docs/documentation/modules/TreeviewModule.html

@@ -131,101 +131,101 @@
 <text text-anchor="start" x="429.73" y="-15.4" font-family="Times-12" font-size="14.00"> &#160;Exports</text>
 <g id="clust1" class="cluster">
 <title>cluster_TreeviewModule</title>
-<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="18,-70 18,-333 478,-333 478,-70 18,-70"/>
-</g>
-<g id="clust6" class="cluster">
-<title>cluster_TreeviewModule_exports</title>
-<polygon fill="none" stroke="black" points="97,-273 97,-325 412,-325 412,-273 97,-273"/>
+<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="31.5,-70 31.5,-333 464.5,-333 464.5,-70 31.5,-70"/>
 </g>
 <g id="clust5" class="cluster">
 <title>cluster_TreeviewModule_imports</title>
-<polygon fill="none" stroke="black" points="370,-143 370,-195 470,-195 470,-143 370,-143"/>
-</g>
-<g id="clust4" class="cluster">
-<title>cluster_TreeviewModule_TreeViewComponent_providers</title>
-<polygon fill="none" stroke="black" points="188,-78 188,-195 362,-195 362,-78 188,-78"/>
+<polygon fill="none" stroke="black" points="356.5,-143 356.5,-195 456.5,-195 456.5,-143 356.5,-143"/>
 </g>
 <g id="clust2" class="cluster">
 <title>cluster_TreeviewModule_declarations</title>
-<polygon fill="none" stroke="black" points="26,-143 26,-195 180,-195 180,-143 26,-143"/>
+<polygon fill="none" stroke="black" points="39.5,-143 39.5,-195 348.5,-195 348.5,-143 39.5,-143"/>
+</g>
+<g id="clust6" class="cluster">
+<title>cluster_TreeviewModule_exports</title>
+<polygon fill="none" stroke="black" points="90.5,-273 90.5,-325 405.5,-325 405.5,-273 90.5,-273"/>
+</g>
+<g id="clust4" class="cluster">
+<title>cluster_TreeviewModule_TreeViewComponent_providers</title>
+<polygon fill="none" stroke="black" points="39.5,-78 39.5,-130 213.5,-130 213.5,-78 39.5,-78"/>
 </g>
 <!-- TreeNodeComponent -->
 <g id="node1" class="node">
 <title>TreeNodeComponent</title>
-<polygon fill="#ffffb3" stroke="black" points="171.8,-187 34.2,-187 34.2,-151 171.8,-151 171.8,-187"/>
-<text text-anchor="middle" x="103" y="-164.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent</text>
+<polygon fill="#ffffb3" stroke="black" points="340.3,-187 202.7,-187 202.7,-151 340.3,-151 340.3,-187"/>
+<text text-anchor="middle" x="271.5" y="-164.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent</text>
 </g>
 <!-- TreeviewModule -->
 <g id="node3" class="node">
 <title>TreeviewModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="331.4,-252 328.4,-256 307.4,-256 304.4,-252 218.6,-252 218.6,-216 331.4,-216 331.4,-252"/>
-<text text-anchor="middle" x="275" y="-229.8" font-family="Times,serif" font-size="14.00">TreeviewModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="327.9,-252 324.9,-256 303.9,-256 300.9,-252 215.1,-252 215.1,-216 327.9,-216 327.9,-252"/>
+<text text-anchor="middle" x="271.5" y="-229.8" font-family="Times,serif" font-size="14.00">TreeviewModule</text>
 </g>
 <!-- TreeNodeComponent&#45;&gt;TreeviewModule -->
 <g id="edge1" class="edge">
 <title>TreeNodeComponent&#45;&gt;TreeviewModule</title>
-<path fill="none" stroke="black" d="M138.13,-187.11C138.13,-206.34 138.13,-234 138.13,-234 138.13,-234 208.54,-234 208.54,-234"/>
-<polygon fill="black" stroke="black" points="208.54,-237.5 218.54,-234 208.54,-230.5 208.54,-237.5"/>
+<path fill="none" stroke="black" d="M271.5,-187.11C271.5,-187.11 271.5,-205.99 271.5,-205.99"/>
+<polygon fill="black" stroke="black" points="268,-205.99 271.5,-215.99 275,-205.99 268,-205.99"/>
 </g>
 <!-- TreeViewComponent -->
 <g id="node2" class="node">
 <title>TreeViewComponent</title>
-<polygon fill="#ffffb3" stroke="black" points="343.79,-187 206.21,-187 206.21,-151 343.79,-151 343.79,-187"/>
-<text text-anchor="middle" x="275" y="-164.8" font-family="Times,serif" font-size="14.00">TreeViewComponent</text>
+<polygon fill="#ffffb3" stroke="black" points="185.29,-187 47.71,-187 47.71,-151 185.29,-151 185.29,-187"/>
+<text text-anchor="middle" x="116.5" y="-164.8" font-family="Times,serif" font-size="14.00">TreeViewComponent</text>
 </g>
 <!-- TreeViewComponent&#45;&gt;TreeviewModule -->
 <g id="edge2" class="edge">
 <title>TreeViewComponent&#45;&gt;TreeviewModule</title>
-<path fill="none" stroke="black" d="M275,-187.11C275,-187.11 275,-205.99 275,-205.99"/>
-<polygon fill="black" stroke="black" points="271.5,-205.99 275,-215.99 278.5,-205.99 271.5,-205.99"/>
+<path fill="none" stroke="black" d="M141.62,-187.11C141.62,-206.34 141.62,-234 141.62,-234 141.62,-234 205.29,-234 205.29,-234"/>
+<polygon fill="black" stroke="black" points="205.29,-237.5 215.29,-234 205.29,-230.5 205.29,-237.5"/>
 </g>
 <!-- TreeNodeComponent  -->
 <g id="node6" class="node">
 <title>TreeNodeComponent </title>
-<polygon fill="#fb8072" stroke="black" points="404.3,-317 263.7,-317 263.7,-281 404.3,-281 404.3,-317"/>
-<text text-anchor="middle" x="334" y="-294.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent </text>
+<polygon fill="#fb8072" stroke="black" points="397.8,-317 257.2,-317 257.2,-281 397.8,-281 397.8,-317"/>
+<text text-anchor="middle" x="327.5" y="-294.8" font-family="Times,serif" font-size="14.00">TreeNodeComponent </text>
 </g>
 <!-- TreeviewModule&#45;&gt;TreeNodeComponent  -->
 <g id="edge5" class="edge">
 <title>TreeviewModule&#45;&gt;TreeNodeComponent </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M297.4,-252.11C297.4,-252.11 297.4,-270.99 297.4,-270.99"/>
-<polygon fill="black" stroke="black" points="293.9,-270.99 297.4,-280.99 300.9,-270.99 293.9,-270.99"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M292.4,-252.11C292.4,-252.11 292.4,-270.99 292.4,-270.99"/>
+<polygon fill="black" stroke="black" points="288.9,-270.99 292.4,-280.99 295.9,-270.99 288.9,-270.99"/>
 </g>
 <!-- TreeViewComponent  -->
 <g id="node7" class="node">
 <title>TreeViewComponent </title>
-<polygon fill="#fb8072" stroke="black" points="245.29,-317 104.71,-317 104.71,-281 245.29,-281 245.29,-317"/>
-<text text-anchor="middle" x="175" y="-294.8" font-family="Times,serif" font-size="14.00">TreeViewComponent </text>
+<polygon fill="#fb8072" stroke="black" points="238.79,-317 98.21,-317 98.21,-281 238.79,-281 238.79,-317"/>
+<text text-anchor="middle" x="168.5" y="-294.8" font-family="Times,serif" font-size="14.00">TreeViewComponent </text>
 </g>
 <!-- TreeviewModule&#45;&gt;TreeViewComponent  -->
 <g id="edge6" class="edge">
 <title>TreeviewModule&#45;&gt;TreeViewComponent </title>
-<path fill="none" stroke="black" stroke-dasharray="5,2" d="M232.1,-252.11C232.1,-252.11 232.1,-270.99 232.1,-270.99"/>
-<polygon fill="black" stroke="black" points="228.6,-270.99 232.1,-280.99 235.6,-270.99 228.6,-270.99"/>
+<path fill="none" stroke="black" stroke-dasharray="5,2" d="M227.1,-252.11C227.1,-252.11 227.1,-270.99 227.1,-270.99"/>
+<polygon fill="black" stroke="black" points="223.6,-270.99 227.1,-280.99 230.6,-270.99 223.6,-270.99"/>
 </g>
 <!-- TreeViewService -->
 <g id="node4" class="node">
 <title>TreeViewService</title>
-<ellipse fill="#fdb462" stroke="black" cx="275" cy="-104" rx="78.69" ry="18"/>
-<text text-anchor="middle" x="275" y="-99.8" font-family="Times,serif" font-size="14.00">TreeViewService</text>
+<ellipse fill="#fdb462" stroke="black" cx="126.5" cy="-104" rx="78.69" ry="18"/>
+<text text-anchor="middle" x="126.5" y="-99.8" font-family="Times,serif" font-size="14.00">TreeViewService</text>
 </g>
 <!-- TreeViewService&#45;&gt;TreeViewComponent -->
 <g id="edge3" class="edge">
 <title>TreeViewService&#45;&gt;TreeViewComponent</title>
-<path fill="none" stroke="black" d="M275,-122.11C275,-122.11 275,-140.99 275,-140.99"/>
-<polygon fill="black" stroke="black" points="271.5,-140.99 275,-150.99 278.5,-140.99 271.5,-140.99"/>
+<path fill="none" stroke="black" d="M116.53,-122.11C116.53,-122.11 116.53,-140.99 116.53,-140.99"/>
+<polygon fill="black" stroke="black" points="113.03,-140.99 116.53,-150.99 120.03,-140.99 113.03,-140.99"/>
 </g>
 <!-- IconModule -->
 <g id="node5" class="node">
 <title>IconModule</title>
-<polygon fill="#8dd3c7" stroke="black" points="462.43,-187 459.43,-191 438.43,-191 435.43,-187 377.57,-187 377.57,-151 462.43,-151 462.43,-187"/>
-<text text-anchor="middle" x="420" y="-164.8" font-family="Times,serif" font-size="14.00">IconModule</text>
+<polygon fill="#8dd3c7" stroke="black" points="448.93,-187 445.93,-191 424.93,-191 421.93,-187 364.07,-187 364.07,-151 448.93,-151 448.93,-187"/>
+<text text-anchor="middle" x="406.5" y="-164.8" font-family="Times,serif" font-size="14.00">IconModule</text>
 </g>
 <!-- IconModule&#45;&gt;TreeviewModule -->
 <g id="edge4" class="edge">
 <title>IconModule&#45;&gt;TreeviewModule</title>
-<path fill="none" stroke="black" d="M391.09,-187.11C391.09,-206.34 391.09,-234 391.09,-234 391.09,-234 341.35,-234 341.35,-234"/>
-<polygon fill="black" stroke="black" points="341.35,-230.5 331.35,-234 341.35,-237.5 341.35,-230.5"/>
+<path fill="none" stroke="black" d="M381.09,-187.11C381.09,-206.34 381.09,-234 381.09,-234 381.09,-234 337.9,-234 337.9,-234"/>
+<polygon fill="black" stroke="black" points="337.9,-230.5 327.9,-234 337.9,-237.5 337.9,-230.5"/>
 </g>
 </g>
 </svg>

package/docs/documentation/modules/UIShellModule/dependencies.svg

@@ -24,14 +24,14 @@
 <title>cluster_UIShellModule</title>
 <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="13,-70 13,-268 483,-268 483,-70 13,-70"/>
 </g>
-<g id="clust4" class="cluster">
-<title>cluster_UIShellModule_exports</title>
-<polygon fill="none" stroke="black" points="67,-208 67,-260 429,-260 429,-208 67,-208"/>
-</g>
 <g id="clust3" class="cluster">
 <title>cluster_UIShellModule_imports</title>
 <polygon fill="none" stroke="black" points="21,-78 21,-130 475,-130 475,-78 21,-78"/>
 </g>
+<g id="clust4" class="cluster">
+<title>cluster_UIShellModule_exports</title>
+<polygon fill="none" stroke="black" points="67,-208 67,-260 429,-260 429,-208 67,-208"/>
+</g>
 <!-- HeaderModule -->
 <g id="node1" class="node">
 <title>HeaderModule</title>

package/docs/documentation/modules/UIShellModule.html

@@ -133,14 +133,14 @@
 <title>cluster_UIShellModule</title>
 <polygon fill="none" stroke="black" stroke-dasharray="1,5" points="13,-70 13,-268 483,-268 483,-70 13,-70"/>
 </g>
-<g id="clust4" class="cluster">
-<title>cluster_UIShellModule_exports</title>
-<polygon fill="none" stroke="black" points="67,-208 67,-260 429,-260 429,-208 67,-208"/>
-</g>
 <g id="clust3" class="cluster">
 <title>cluster_UIShellModule_imports</title>
 <polygon fill="none" stroke="black" points="21,-78 21,-130 475,-130 475,-78 21,-78"/>
 </g>
+<g id="clust4" class="cluster">
+<title>cluster_UIShellModule_exports</title>
+<polygon fill="none" stroke="black" points="67,-208 67,-260 429,-260 429,-208 67,-208"/>
+</g>
 <!-- HeaderModule -->
 <g id="node1" class="node">
 <title>HeaderModule</title>

package/docs/documentation.json

@@ -75528,7 +75528,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/button/button-set.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75538,7 +75538,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button-set.stories.ts",
+                "file": "src/button/button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75548,7 +75548,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button.stories.ts",
+                "file": "src/button/icon-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75558,7 +75558,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/icon-button.stories.ts",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -78440,41 +78440,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\t[showTooltipWhenDisabled]=\"showTooltipWhenDisabled\"\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\t[showTooltipWhenDisabled]=\"showTooltipWhenDisabled\"\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",
@@ -82302,199 +82302,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": [