@scania/tegel 1.38.0 → 1.40.0-stencil-core-4.38.1-beta.0

package/dist/collection/components/badge/badge.js

@@ -1,9 +1,13 @@
 import { h } from "@stencil/core";
 export class TdsBadge {
     constructor() {
+        /** Value shown in Badge */
         this.value = '';
+        /** Changes visibility of Badge */
         this.hidden = false;
+        /** Sets component size. */
         this.size = 'lg';
+        /** Defines aria-live attribute */
         this.tdsAriaLive = 'polite';
         this.tdsAriaLabel = '';
         this.shape = '';
@@ -59,8 +63,10 @@ export class TdsBadge {
                     "tags": [],
                     "text": "Value shown in Badge"
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "''"
             },
             "hidden": {
@@ -77,8 +83,10 @@ export class TdsBadge {
                     "tags": [],
                     "text": "Changes visibility of Badge"
                 },
-                "attribute": "hidden",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "hidden",
                 "defaultValue": "false"
             },
             "size": {
@@ -95,8 +103,10 @@ export class TdsBadge {
                     "tags": [],
                     "text": "Sets component size."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "tdsAriaLive": {
@@ -113,8 +123,10 @@ export class TdsBadge {
                     "tags": [],
                     "text": "Defines aria-live attribute"
                 },
-                "attribute": "tds-aria-live",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-aria-live",
                 "defaultValue": "'polite'"
             }
         };

package/dist/collection/components/banner/banner.js

@@ -8,6 +8,20 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsBanner {
     constructor() {
+        /** Variant of Banner */
+        this.variant = 'default';
+        /** ID used for internal table functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for Banner close events, you need to set this ID yourself to identify the Banner,
+         * as the default ID is random and will be different every time.
+         */
+        this.bannerId = generateUniqueId();
+        /** Hides the Banner */
+        this.hidden = false;
+        /** Defines the ARIA role of the banner. Defaults to "banner" for global use,
+         * but can be set to "region" or "alert" if used differently.
+         */
+        this.roleType = 'banner';
         this.handleClose = () => {
             const tdsCloseEvent = this.tdsClose.emit({
                 bannerId: this.bannerId,
@@ -16,13 +30,6 @@ export class TdsBanner {
                 this.hidden = true;
             }
         };
-        this.icon = undefined;
-        this.header = undefined;
-        this.subheader = undefined;
-        this.variant = 'default';
-        this.bannerId = generateUniqueId();
-        this.hidden = false;
-        this.roleType = 'banner';
     }
     /** Hides the Banner. */
     async hideBanner() {
@@ -69,7 +76,7 @@ export class TdsBanner {
                 "mutable": false,
                 "complexType": {
                     "original": "IconNames",
-                    "resolved": "\"profile\" | \"expand\" | \"info\" | \"error\" | \"global\" | \"merge\" | \"copy\" | \"document\" | \"audio\" | \"link\" | \"video\" | \"image\" | \"text\" | \"download\" | \"target\" | \"placeholder\" | \"history\" | \"print\" | \"key\" | \"24v_battery_inactive\" | \"24v_battery\" | \"acceleration_inactive\" | \"acceleration\" | \"adblue_inactive\" | \"adblue\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward_inactive\" | \"backward\" | \"bento\" | \"bug_inactive\" | \"bug\" | \"burger\" | \"bus_inactive\" | \"bus\" | \"calendar_inactive\" | \"calendar\" | \"camera_inactive\" | \"camera\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed_inactive\" | \"charging_speed\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock_inactive\" | \"clock\" | \"configurator\" | \"contact_inactive\" | \"contact\" | \"cookie_inactive\" | \"cookie\" | \"coolant_level_inactive\" | \"coolant_level\" | \"cross\" | \"cup_inactive\" | \"cup\" | \"dashboard\" | \"department_inactive\" | \"department\" | \"departure_scheduling_inactive\" | \"departure_scheduling\" | \"diamond_inactive\" | \"diamond\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus_inactive\" | \"document_plus\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"driving_licence_inactive\" | \"driving_licence\" | \"drop_inactive\" | \"drop\" | \"edit_inactive\" | \"edit\" | \"email\" | \"engine_inactive\" | \"engine\" | \"environment_inactive\" | \"environment\" | \"exit\" | \"expand_inactive\" | \"export_inactive\" | \"export\" | \"eye_inactive\" | \"eye\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory_inactive\" | \"factory\" | \"ferry_inactive\" | \"ferry\" | \"filters_inactive\" | \"filters\" | \"flash_inactive\" | \"flash\" | \"folder\" | \"forward_inactive\" | \"forward\" | \"fuel_gauge_inactive\" | \"fuel_gauge\" | \"fuel_inactive\" | \"fuel\" | \"gift inactive\" | \"gift\" | \"guided_tour_inactive\" | \"guided_tour\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"hatch_open\" | \"heart_inactive\" | \"heart\" | \"heating_inactive_screen\" | \"history_inactive\" | \"home_inactive\" | \"home\" | \"idea_inactive\" | \"idea\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"insights\" | \"kebab\" | \"key_inactive\" | \"layer_inactive\" | \"layer\" | \"link_broken\" | \"list_inactive\" | \"list\" | \"lock_inactive\" | \"lock\" | \"map_cursor_inactive\" | \"map_cursor\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge_inactive\" | \"message_inactive\" | \"message\" | \"mileage_inactive\" | \"mileage\" | \"minimize_fullscreen\" | \"minus\" | \"navigate_inactive\" | \"navigate\" | \"notification_inactive\" | \"notification\" | \"oil_level_inactive\" | \"oil_level\" | \"pause_inactive\" | \"pause\" | \"phone_inactive\" | \"phone\" | \"pie_chart\" | \"pin_inactive\" | \"pin\" | \"play_inactive\" | \"play\" | \"plus\" | \"powerplug_inactive\" | \"powerplug\" | \"print_inactive\" | \"privacy_inactive\" | \"privacy\" | \"profile_inactive\" | \"proportions_inactive\" | \"proportions\" | \"range_inactive\" | \"range\" | \"redirect\" | \"refresh_inactive\" | \"refresh\" | \"reload_inactive\" | \"reload\" | \"repeat\" | \"report_inactive\" | \"report\" | \"route_inactive\" | \"route\" | \"save_inactive\" | \"save\" | \"search\" | \"send_inactive\" | \"send\" | \"settings\" | \"share\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone_inactive\" | \"smartphone\" | \"sorting\" | \"speedometer_inactive\" | \"speedometer\" | \"star\" | \"support\" | \"target_inactive\" | \"temperature_inactive\" | \"temperature\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool_inactive\" | \"tool\" | \"trailer_inactive\" | \"trailer\" | \"trash_inactive\" | \"trash\" | \"truck_inactive\" | \"truck\" | \"undo_inactive\" | \"undo\" | \"unlock\" | \"upload\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight_inactive\" | \"weight\" | \"wifi_inactive\" | \"wifi\" | \"windscreen_heating_inactive\" | \"windscreen_heating\"",
+                    "resolved": "\"profile\" | \"expand\" | \"info\" | \"error\" | \"global\" | \"document\" | \"audio\" | \"link\" | \"video\" | \"image\" | \"text\" | \"download\" | \"target\" | \"key\" | \"list\" | \"placeholder\" | \"merge\" | \"copy\" | \"history\" | \"print\" | \"24v_battery_inactive\" | \"24v_battery\" | \"acceleration_inactive\" | \"acceleration\" | \"adblue_inactive\" | \"adblue\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward_inactive\" | \"backward\" | \"bento\" | \"bug_inactive\" | \"bug\" | \"burger\" | \"bus_inactive\" | \"bus\" | \"calendar_inactive\" | \"calendar\" | \"camera_inactive\" | \"camera\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed_inactive\" | \"charging_speed\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock_inactive\" | \"clock\" | \"configurator\" | \"contact_inactive\" | \"contact\" | \"cookie_inactive\" | \"cookie\" | \"coolant_level_inactive\" | \"coolant_level\" | \"cross\" | \"cup_inactive\" | \"cup\" | \"dashboard\" | \"department_inactive\" | \"department\" | \"departure_scheduling_inactive\" | \"departure_scheduling\" | \"diamond_inactive\" | \"diamond\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus_inactive\" | \"document_plus\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"driving_licence_inactive\" | \"driving_licence\" | \"drop_inactive\" | \"drop\" | \"edit_inactive\" | \"edit\" | \"email\" | \"engine_inactive\" | \"engine\" | \"environment_inactive\" | \"environment\" | \"exit\" | \"expand_inactive\" | \"export_inactive\" | \"export\" | \"eye_inactive\" | \"eye\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory_inactive\" | \"factory\" | \"ferry_inactive\" | \"ferry\" | \"filters_inactive\" | \"filters\" | \"flash_inactive\" | \"flash\" | \"folder\" | \"forward_inactive\" | \"forward\" | \"fuel_gauge_inactive\" | \"fuel_gauge\" | \"fuel_inactive\" | \"fuel\" | \"gift inactive\" | \"gift\" | \"guided_tour_inactive\" | \"guided_tour\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"hatch_open\" | \"heart_inactive\" | \"heart\" | \"heating_inactive_screen\" | \"history_inactive\" | \"home_inactive\" | \"home\" | \"idea_inactive\" | \"idea\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"insights\" | \"kebab\" | \"key_inactive\" | \"layer_inactive\" | \"layer\" | \"link_broken\" | \"list_inactive\" | \"lock_inactive\" | \"lock\" | \"map_cursor_inactive\" | \"map_cursor\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge_inactive\" | \"message_inactive\" | \"message\" | \"mileage_inactive\" | \"mileage\" | \"minimize_fullscreen\" | \"minus\" | \"navigate_inactive\" | \"navigate\" | \"notification_inactive\" | \"notification\" | \"oil_level_inactive\" | \"oil_level\" | \"pause_inactive\" | \"pause\" | \"phone_inactive\" | \"phone\" | \"pie_chart\" | \"pin_inactive\" | \"pin\" | \"play_inactive\" | \"play\" | \"plus\" | \"powerplug_inactive\" | \"powerplug\" | \"print_inactive\" | \"privacy_inactive\" | \"privacy\" | \"profile_inactive\" | \"proportions_inactive\" | \"proportions\" | \"range_inactive\" | \"range\" | \"redirect\" | \"refresh_inactive\" | \"refresh\" | \"reload_inactive\" | \"reload\" | \"repeat\" | \"report_inactive\" | \"report\" | \"route_inactive\" | \"route\" | \"save_inactive\" | \"save\" | \"search\" | \"send_inactive\" | \"send\" | \"settings\" | \"share\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone_inactive\" | \"smartphone\" | \"sorting\" | \"speedometer_inactive\" | \"speedometer\" | \"star\" | \"support\" | \"target_inactive\" | \"temperature_inactive\" | \"temperature\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool_inactive\" | \"tool\" | \"trailer_inactive\" | \"trailer\" | \"trash_inactive\" | \"trash\" | \"truck_inactive\" | \"truck\" | \"undo_inactive\" | \"undo\" | \"unlock\" | \"upload\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight_inactive\" | \"weight\" | \"wifi_inactive\" | \"wifi\" | \"windscreen_heating_inactive\" | \"windscreen_heating\"",
                     "references": {
                         "IconNames": {
                             "location": "import",
@@ -84,8 +91,10 @@ export class TdsBanner {
                     "tags": [],
                     "text": "Name of the icon for the component. For error and information variant, the icon is predefined."
                 },
-                "attribute": "icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
             },
             "header": {
                 "type": "string",
@@ -101,8 +110,10 @@ export class TdsBanner {
                     "tags": [],
                     "text": "Header text."
                 },
-                "attribute": "header",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
             },
             "subheader": {
                 "type": "string",
@@ -118,8 +129,10 @@ export class TdsBanner {
                     "tags": [],
                     "text": "Subheader text."
                 },
-                "attribute": "subheader",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subheader"
             },
             "variant": {
                 "type": "string",
@@ -135,8 +148,10 @@ export class TdsBanner {
                     "tags": [],
                     "text": "Variant of Banner"
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'default'"
             },
             "bannerId": {
@@ -153,8 +168,10 @@ export class TdsBanner {
                     "tags": [],
                     "text": "ID used for internal table functionality and events, must be unique.\n\n**NOTE**: If you're listening for Banner close events, you need to set this ID yourself to identify the Banner,\nas the default ID is random and will be different every time."
                 },
-                "attribute": "banner-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "banner-id",
                 "defaultValue": "generateUniqueId()"
             },
             "hidden": {
@@ -171,8 +188,10 @@ export class TdsBanner {
                     "tags": [],
                     "text": "Hides the Banner"
                 },
-                "attribute": "hidden",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "hidden",
                 "defaultValue": "false"
             },
             "roleType": {
@@ -189,8 +208,10 @@ export class TdsBanner {
                     "tags": [],
                     "text": "Defines the ARIA role of the banner. Defaults to \"banner\" for global use,\nbut can be set to \"region\" or \"alert\" if used differently."
                 },
-                "attribute": "role-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "role-type",
                 "defaultValue": "'banner'"
             }
         };

package/dist/collection/components/block/block.js

@@ -9,7 +9,9 @@ import { h } from "@stencil/core";
  */
 export class TdsBlock {
     constructor() {
+        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
+        /** Specifies the HTML tag to be used for the component wrapper. */
         this.componentTag = 'div';
     }
     getNestingLevel() {
@@ -65,8 +67,10 @@ export class TdsBlock {
                     "tags": [],
                     "text": "Mode variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "componentTag": {
@@ -83,8 +87,10 @@ export class TdsBlock {
                     "tags": [],
                     "text": "Specifies the HTML tag to be used for the component wrapper."
                 },
-                "attribute": "component-tag",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "component-tag",
                 "defaultValue": "'div'"
             }
         };

package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.js

@@ -4,6 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsBreadcrumb {
     constructor() {
+        /** Boolean for the current link */
         this.current = false;
     }
     render() {
@@ -37,8 +38,10 @@ export class TdsBreadcrumb {
                     "tags": [],
                     "text": "Boolean for the current link"
                 },
-                "attribute": "current",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "current",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -3,9 +3,6 @@ import { h } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> For the breadcrumb elements.
  */
 export class TdsBreadcrumbs {
-    constructor() {
-        this.tdsAriaLabel = undefined;
-    }
     render() {
         var _a;
         (_a = this.host.children[this.host.children.length - 1]) === null || _a === void 0 ? void 0 : _a.classList.add('last');
@@ -39,8 +36,10 @@ export class TdsBreadcrumbs {
                     "tags": [],
                     "text": "The value to be used for the aria-label attribute"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }

package/dist/collection/components/button/button.css

@@ -33,29 +33,29 @@
   --tds-btn-secondary-background-focus: var(--tds-blue-700);
   --tds-btn-secondary-color-focus: var(--tds-white);
   --tds-btn-secondary-border-color-focus: var(--tds-white);
-  --tds-btn-secondary-outline-color: var(--tds-black-38);
+  --tds-btn-secondary-outline-color: var(--tds-grey-350);
   --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
   --tds-btn-secondary-background-disabled: transparent;
   --tds-btn-secondary-color-disabled: var(--tds-grey-250);
   --tds-btn-secondary-border-color-disabled: var(--tds-grey-250);
   --tds-btn-icon-secondary-color-focus: var(--tds-black);
   --tds-btn-icon-secondary-fill-focus: var(--tds-black);
-  --tds-btn-icon-secondary-fill-active: var(--tds-grey-958);
+  --tds-btn-icon-secondary-fill-active: var(--tds-grey-950);
   /* ICON */
-  --tds-btn-icon-secondary-fill: var(--tds-grey-958);
-  --tds-btn-icon-secondary-color: var(--tds-grey-958);
+  --tds-btn-icon-secondary-fill: var(--tds-grey-950);
+  --tds-btn-icon-secondary-color: var(--tds-grey-950);
   /* ICON HOVER */
   --tds-btn-icon-secondary-fill-hover: var(--tds-grey-50);
   --tds-btn-icon-secondary-color-hover: var(--tds-grey-50);
   /* ICON HOVER */
-  --tds-btn-icon-secondary-color-active: var(--tds-grey-958);
+  --tds-btn-icon-secondary-color-active: var(--tds-grey-950);
   --tds-btn-ghost-background: transparent;
   --tds-btn-ghost-color: var(--tds-grey-950);
   --tds-btn-ghost-border-color: transparent;
   --tds-btn-ghost-background-hover: transparent;
   --tds-btn-ghost-color-hover: var(--tds-grey-950);
   --tds-btn-ghost-border-color-hover: var(--tds-grey-350);
-  --tds-btn-ghost-outline-color-hover: var(--tds-black-48);
+  --tds-btn-ghost-outline-color-hover: var(--tds-grey-350);
   --tds-btn-ghost-background-active: transparent;
   --tds-btn-ghost-color-active: var(--tds-grey-950);
   --tds-btn-ghost-border-color-active: var(--tds-grey-650);
@@ -64,11 +64,11 @@
   --tds-btn-ghost-border-color-focus: var(--tds-grey-350);
   --tds-btn-ghost-outline-color-focus: var(--tds-blue-400);
   --tds-btn-ghost-background-disabled: transparent;
-  --tds-btn-ghost-color-disabled: var(--tds-black-38);
+  --tds-btn-ghost-color-disabled: var(--tds-grey-250);
   --tds-btn-ghost-border-color-disabled: transparent;
   /* ICON */
-  --tds-btn-icon-ghost-fill: var(--tds-grey-958);
-  --tds-btn-icon-ghost-color: var(--tds-grey-958);
+  --tds-btn-icon-ghost-fill: var(--tds-grey-950);
+  --tds-btn-icon-ghost-color: var(--tds-grey-950);
   --tds-btn-danger-background: var(--scania-extended-red-400);
   --tds-btn-danger-color: var(--tds-white);
   --tds-btn-danger-border-color: transparent;
@@ -82,10 +82,10 @@
   --tds-btn-danger-color-focus: var(--tds-white);
   --tds-btn-danger-border-color-focus: var(--tds-red-500);
   --tds-btn-danger-outline-color-focus: var(--tds-blue-400);
-  --tds-btn-danger-background-disabled-primary: var(--scania-neutral-solid-50);
+  --tds-btn-danger-background-disabled-primary: var(--tds-grey-50);
   --tds-btn-danger-background-disabled-secondary: var(--tds-white);
   --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
-  --tds-btn-danger-color-disabled: var(--tds-black-38);
+  --tds-btn-danger-color-disabled: var(--tds-grey-250);
   --tds-btn-danger-border-color-disabled: transparent;
   /* ICON */
   --tds-btn-icon-danger-fill: var(--tds-grey-50);
@@ -145,11 +145,11 @@
   --tds-btn-ghost-border-color: transparent;
   --tds-btn-ghost-background-hover: transparent;
   --tds-btn-ghost-color-hover: var(--tds-white);
-  --tds-btn-ghost-border-color-hover: var(--scania-neutral-transparent-inverse-400);
-  --tds-btn-ghost-outline-color-hover: var(--tds-white-48);
+  --tds-btn-ghost-border-color-hover: var(--tds-grey-400);
+  --tds-btn-ghost-outline-color-hover: var(--scania-neutral-transparent-inverse-400);
   --tds-btn-ghost-background-active: transparent;
   --tds-btn-ghost-color-active: var(--tds-white);
-  --tds-btn-ghost-border-color-active: var(--scania-neutral-transparent-inverse-200);
+  --tds-btn-ghost-border-color-active: var(--tds-grey-200);
   --tds-btn-ghost-background-focus: transparent;
   --tds-btn-ghost-color-focus: var(--tds-white);
   --tds-btn-ghost-border-color-focus: var(--tds-white);

package/dist/collection/components/button/button.js

@@ -6,17 +6,20 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsButton {
     constructor() {
-        this.text = undefined;
+        /** Button's type */
         this.type = 'button';
+        /** Variation of Button's design */
         this.variant = 'primary';
+        /** Size of a Button */
         this.size = 'lg';
+        /** Control for disabled state of a component */
         this.disabled = false;
+        /** When enabled, the Button takes 100% width */
         this.fullbleed = false;
+        /** Set the mode variant of the Button. */
         this.modeVariant = null;
+        /** Determines if and how the button should animate. */
         this.animation = 'none';
-        this.tdsAriaLabel = undefined;
-        this.name = undefined;
-        this.value = undefined;
         this.onlyIcon = false;
     }
     handleKeyDown(event) {
@@ -83,8 +86,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Text displayed inside the Button"
                 },
-                "attribute": "text",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
             },
             "type": {
                 "type": "string",
@@ -100,8 +105,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Button's type"
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "type",
                 "defaultValue": "'button'"
             },
             "variant": {
@@ -118,8 +125,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Variation of Button's design"
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'primary'"
             },
             "size": {
@@ -136,8 +145,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Size of a Button"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "disabled": {
@@ -154,8 +165,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Control for disabled state of a component"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "fullbleed": {
@@ -172,8 +185,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "When enabled, the Button takes 100% width"
                 },
-                "attribute": "fullbleed",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "fullbleed",
                 "defaultValue": "false"
             },
             "modeVariant": {
@@ -190,8 +205,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Set the mode variant of the Button."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "animation": {
@@ -208,8 +225,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "Determines if and how the button should animate."
                 },
-                "attribute": "animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "animation",
                 "defaultValue": "'none'"
             },
             "tdsAriaLabel": {
@@ -226,8 +245,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "The value to be used for the aria-label attribute if onlyIcon is set to true"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             },
             "name": {
                 "type": "string",
@@ -243,8 +264,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "The name attribute allows for different ways of accessing the button element"
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "value": {
                 "type": "string",
@@ -260,8 +283,10 @@ export class TdsButton {
                     "tags": [],
                     "text": "The value attribute can be used when handling a form submission"
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             }
         };
     }

package/dist/collection/components/card/card.css

@@ -37,6 +37,14 @@
 .card .card-header.below {
   padding-top: 16px;
 }
+.card .card-header.expandable tds-icon {
+  cursor: pointer;
+  margin-left: auto;
+  transition: transform 160ms ease-in-out, opacity 120ms ease-in-out;
+}
+.card .card-header.expandable tds-icon.rotated {
+  transform: rotate(180deg);
+}
 .card .header-subheader {
   display: flex;
   flex-direction: column;
@@ -115,4 +123,8 @@ button:active {
 .above-header-stretch .card-body slot[name=body]::slotted(*) {
   max-width: unset;
   flex-grow: 1;
+}
+
+:host([expandable]:not([expanded])) .card-body slot[name=body] {
+  display: none;
 }