@scania/tegel 1.49.2 → 1.50.0-dev-test-beta.0

package/dist/collection/assets/icons/traton/edit_inactive.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m23 3-6 6L4.13 21.87 3 29l7.13-1.13L23 15l6-6-6-6ZM9.18 26l-3.77.6.59-3.77 12.41-12.42 3.17 3.18L9.18 26ZM23 12.17 19.83 9 23 5.83 26.17 9 23 12.17ZM3.41 2 2 3.41 28.59 30 30 28.59Z" fill="#001D21"/></svg>

package/dist/collection/assets/icons/traton/skip_backwards.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.41 7.41 23 6 13 16l10 10 1.41-1.41L15.83 16l8.58-8.59ZM8 6H6v20h2V6Z" fill="#001D21"/></svg>

package/dist/collection/assets/icons/traton/skip_forward.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.59 7.41 9 6l10 10-10 10-1.41-1.41L16.17 16l-8.58-8.59ZM26 6h-2v20h2V6Z" fill="#001D21"/></svg>

package/dist/collection/collection-manifest.json

@@ -86,7 +86,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.42.0",
+    "version": "4.43.0",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/accordion/accordion-item/accordion-item.js

@@ -53,12 +53,12 @@ export class TdsAccordionItem {
     render() {
         const primaryElementId = generateUniqueId();
         const secondaryElementId = generateUniqueId();
-        return (h(Host, { key: '17e9a722992b69661f77c0aec843fa117111eed1' }, h("div", { key: 'b292c495ceb21cc538678716975e41cdfa40cbcf', class: `tds-accordion-item
+        return (h(Host, { key: '6733b23d208d64c32383bded58043a8add5c62c4' }, h("div", { key: '1b07da30e6a6699919d82f3884a7f6f515e61dd6', class: `tds-accordion-item
         ${this.disabled ? 'disabled' : ''}
         ${this.expanded ? 'expanded' : ''}
-        ` }, h("div", { key: '3a5c926bfbefc218d8c60dca53c94dd246b7ff05', role: "heading", "aria-level": this.ariaLevelValue }, h("button", { key: 'ce3f4e699dc2e8d777439edb7e0b6ea66315dc25', id: secondaryElementId, "aria-controls": primaryElementId, type: "button", "aria-expanded": this.expanded ? 'true' : 'false', "aria-disabled": this.disabled, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { key: '6c6dada270be17a214475e0a4c8de0ef34f45a61', class: "tds-accordion-title" }, this.header, h("slot", { key: '7c9a9fc36bc1b0fc1a4e95ba21fb470a8ec17a95', name: "header" })), h("div", { key: 'eddcc635b64da34b2137206f1eb5f20add5a9b62', class: "tds-accordion-icon" }, h("tds-icon", { key: '0a640885ea799bd06666e503aa3ecf111fc2adb7', tdsAriaHidden: true, svgTitle: "Chevron Down", name: "chevron_down", size: "16px" })))), h("div", { key: '851c381810b1ea21451f2beff668c44a145cbd70', role: "region", "aria-live": "polite", "aria-labelledby": secondaryElementId, id: primaryElementId, class: `tds-accordion-panel
+        ` }, h("div", { key: '4f0efdd82b550f8ace20bf50d3624d9572aae2bf', role: "heading", "aria-level": this.ariaLevelValue }, h("button", { key: '3828dde9b72e98d98c4b318bfe37b97a92cee430', id: secondaryElementId, "aria-controls": primaryElementId, type: "button", "aria-expanded": this.expanded ? 'true' : 'false', "aria-disabled": this.disabled, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { key: '2c173f5a0823d1140cf8e76931c63d2aae5fbe75', class: "tds-accordion-title" }, this.header, h("slot", { key: 'f34e105a8fa430571b735769768a29b254aa72fa', name: "header" })), h("div", { key: '4b3cda4e7d28dc5eedc799eb88440a3b069e426d', class: "tds-accordion-icon" }, h("tds-icon", { key: '52810cba94e741d9feaa74d58fd1764d17395b8a', tdsAriaHidden: true, svgTitle: "Chevron Down", name: "chevron_down", size: "16px" })))), h("div", { key: '2b899fe29eb5e04d3b99e0f41e8dd959d240d8c7', role: "region", "aria-live": "polite", "aria-labelledby": secondaryElementId, id: primaryElementId, class: `tds-accordion-panel
             ${this.paddingReset ? 'tds-accordion-panel--padding-reset ' : ''}
-            ` }, h("slot", { key: '3ace67e98a6a24daad4557079d7b3a8b7f927381' })))));
+            ` }, h("slot", { key: 'fa903edc9100750ddace26ea1e12e921868df1d1' })))));
     }
     static get is() { return "tds-accordion-item"; }
     static get encapsulation() { return "shadow"; }
@@ -90,7 +90,7 @@ export class TdsAccordionItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "header",
                 "defaultValue": "''"
             },
@@ -110,7 +110,7 @@ export class TdsAccordionItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "expand-icon-position",
                 "defaultValue": "'end'"
             },
@@ -130,7 +130,7 @@ export class TdsAccordionItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -170,7 +170,7 @@ export class TdsAccordionItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "padding-reset",
                 "defaultValue": "false"
             },

package/dist/collection/components/accordion/accordion.js

@@ -10,11 +10,11 @@ export class TdsAccordion {
         this.hideLastBorder = false;
     }
     render() {
-        return (h(Host, { key: '403d93cb3ca1cdb1d11d53eebd22207e330dd527', class: {
+        return (h(Host, { key: '07fa8bf06435570bdf6ba1170e6f55baecc3cf98', class: {
                 'tds-accordion': true,
                 [`tds-mode-variant-${this.modeVariant || ''}`]: Boolean(this.modeVariant),
                 'hide-last-border': this.hideLastBorder,
-            } }, h("slot", { key: '3e5e516531cf5a1d456b7cd1605a4ce4c57f397a' })));
+            } }, h("slot", { key: 'd04a5c6767081b816b39eab3f6f02b69810990cd' })));
     }
     static get is() { return "tds-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +46,7 @@ export class TdsAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "mode-variant",
                 "defaultValue": "null"
             },
@@ -66,7 +66,7 @@ export class TdsAccordion {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "hide-last-border",
                 "defaultValue": "false"
             }

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

@@ -28,12 +28,12 @@ export class TdsBadge {
         }
     }
     render() {
-        return (h("host", { key: '718d8c1583ad75a49fb5f24bb8efbdad4e3228a7', role: "status", class: {
+        return (h("host", { key: '094da9af01d8141863e4a85ae23ad27d5c02ac4a', role: "status", class: {
                 'tds-badge': true,
                 [`tds-badge-${this.size}`]: true,
                 'tds-badge-pill': this.shape === 'pill',
                 'tds-badge-hidden': this.hidden,
-            }, "aria-label": this.tdsAriaLabel, "aria-live": this.tdsAriaLive }, h("div", { key: 'd76ae168c4f5926a170472162ecd611b5e6e4639', class: "tds-badge-text", "aria-hidden": "true" }, this.text)));
+            }, "aria-label": this.tdsAriaLabel, "aria-live": this.tdsAriaLive }, h("div", { key: '6094bed99d589f4f24a85588937973618265a3ab', class: "tds-badge-text", "aria-hidden": "true" }, this.text)));
     }
     static get is() { return "tds-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -65,7 +65,7 @@ export class TdsBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value",
                 "defaultValue": "''"
             },
@@ -105,7 +105,7 @@ export class TdsBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'lg'"
             },
@@ -125,7 +125,7 @@ export class TdsBadge {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-aria-live",
                 "defaultValue": "'polite'"
             }

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

@@ -51,11 +51,11 @@ export class TdsBanner {
         const usesHeaderSlot = hasSlot('subheader', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '5b89bedb919ed799da1701cae1c152e310865b43', role: this.roleType, "aria-hidden": `${this.hidden}`, "aria-live": this.roleType === 'alert' ? 'assertive' : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: {
+        return (h(Host, { key: '4a2775ec0a13d095bb193cbaeeccb63886887910', role: this.roleType, "aria-hidden": `${this.hidden}`, "aria-live": this.roleType === 'alert' ? 'assertive' : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: {
                 [this.variant]: true,
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, this.icon && (h("div", { key: 'b17e4c4986ccb9afde8ad9609465fdad1f5f78fe', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: '2d43b52d72b874809d48b40ab2faae796e3c7d08', name: this.icon, size: "20px", svgTitle: this.icon }))), h("div", { key: '3f1d0b8493aaf41e1fe78837c937d56bb4d4d6af', class: "content" }, h("div", { key: '3fd4dac5928d5f588eff7cc9cf8a64c401b75875', class: "header-subheader" }, this.header && h("div", { key: 'f356b4218fba0c42c97e728fe6fc91bb14c8a3d7', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '74659c5c0b33bbc81f90d79c9cb80d3dcd1839fa', name: "header" }), this.subheader && h("div", { key: 'b91ba944f6c41ccf62002a2dade85968dd5b34f4', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'e8854a51dc158cba747abca51d79828ee419732e', name: "subheader" })), usesActionsSlot && h("slot", { key: '60fe1b1b75a7cc169d71b97d5d91086d7ae96a07', name: "actions" })), h("div", { key: 'bf664cd50d34e9ac4c3061d1670d0607cd326bef', class: `banner-close` }, h("button", { key: '0ddfadbfe00ecf7ec1376fdfbc2d70ff0cffb919', "aria-label": "Close banner", onClick: this.handleClose }, h("tds-icon", { key: '7e45115cd682e035227b486442c4fe4c67dfec4b', name: "cross", size: "20px", svgTitle: "Close" })))));
+            } }, this.icon && (h("div", { key: '426e5c69aac5250d72d28bd114205e0fe1841f76', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: 'e44a0fc389b8013a572b25b13fd7a6d1f501522c', name: this.icon, size: "20px", svgTitle: this.icon }))), h("div", { key: '72cf07172fdb0785b4d45267abd163917d4271c8', class: "content" }, h("div", { key: 'ae45c2cf9282fcdd94f23b1aab5138b30b0ad887', class: "header-subheader" }, this.header && h("div", { key: 'f05b93067f80e03b84284227884d9802dd2f16ac', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'c17f884559cd3f09d2447d4816709ebc7a940b07', name: "header" }), this.subheader && h("div", { key: '1397b96c39a88439814387390e8715164f44b616', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '73df212519a15ef97688e4fcc65e7e5235e7054a', name: "subheader" })), usesActionsSlot && h("slot", { key: 'dc11f989a674a05addb163b3085af0194fe83d53', name: "actions" })), h("div", { key: '929c4ecaf02e7e14990179e07399459ef41e6ae4', class: `banner-close` }, h("button", { key: 'f9595bff00be2618df765e4f7901c74e83a5d1eb', "aria-label": "Close banner", onClick: this.handleClose }, h("tds-icon", { key: '4d8d00a93c55db4d4a92aaa113510afc00ec9aad', name: "cross", size: "20px", svgTitle: "Close" })))));
     }
     static get is() { return "tds-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -94,7 +94,7 @@ export class TdsBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "icon"
             },
             "header": {
@@ -113,7 +113,7 @@ export class TdsBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "header"
             },
             "subheader": {
@@ -132,7 +132,7 @@ export class TdsBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "subheader"
             },
             "variant": {
@@ -151,7 +151,7 @@ export class TdsBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "variant",
                 "defaultValue": "'default'"
             },
@@ -171,7 +171,7 @@ export class TdsBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "banner-id",
                 "defaultValue": "generateUniqueId()"
             },
@@ -211,7 +211,7 @@ export class TdsBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "role-type",
                 "defaultValue": "'banner'"
             }

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

@@ -37,7 +37,7 @@ export class TdsBlock {
                 evenOddClass = 'tds-block-odd';
             }
         }
-        return (h(TagType, { key: '01743312d4accf10f2d372e149880bb8b53a9a97', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '84c2a61a6f4fc4c118ce73c83d78ca18a1607d0c' })));
+        return (h(TagType, { key: '7f07ad2391246677a60d6e1f243bb399c1b97559', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: 'b106075c5d159dbd679f5936e6e644d11c997492' })));
     }
     static get is() { return "tds-block"; }
     static get encapsulation() { return "shadow"; }
@@ -69,7 +69,7 @@ export class TdsBlock {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "mode-variant",
                 "defaultValue": "null"
             },
@@ -89,7 +89,7 @@ export class TdsBlock {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "component-tag",
                 "defaultValue": "'div'"
             }

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

@@ -8,7 +8,7 @@ export class TdsBreadcrumb {
         this.current = false;
     }
     render() {
-        return (h(Host, { key: 'f1a223cf44e435b547b42382e8b3d47979c71793', role: "listitem" }, h("div", Object.assign({ key: '41baa33ae1474121ae4512ddf89fb960670d1cea', class: { current: this.current } }, (this.current ? { 'aria-current': 'page' } : {})), h("slot", { key: '8f14f28f7e9824e76886a1d49f15d3404666771a' }))));
+        return (h(Host, { key: 'afa74a56d694fdf4a453e60747c89c8c4ba710cc', role: "listitem" }, h("div", Object.assign({ key: 'de5404a711784ce5eb4b64596cf9c90c2aab3fb0', class: { current: this.current } }, (this.current ? { 'aria-current': 'page' } : {})), h("slot", { key: '06a7ff8a55a3534a7aa7593e39452f1c4949424c' }))));
     }
     static get is() { return "tds-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -40,7 +40,7 @@ export class TdsBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "current",
                 "defaultValue": "false"
             }

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

@@ -6,7 +6,7 @@ export class TdsBreadcrumbs {
     render() {
         var _a;
         (_a = this.host.children[this.host.children.length - 1]) === null || _a === void 0 ? void 0 : _a.classList.add('last');
-        return (h("nav", { key: 'f24c1dd40a5bf741d3538c1bc5e536c45a9a6b12', "aria-label": this.tdsAriaLabel }, h("div", { key: '955ea954c1a161e2c4b639947f191b3b4a22957a', role: "list", class: "tds-breadcrumb" }, h("slot", { key: '9466ab7b58a6953d79af70ac38cdc5466362dc6c' }))));
+        return (h("nav", { key: '926e3735bc890e200960ff8d5a5efaea9d59a3e2', "aria-label": this.tdsAriaLabel }, h("div", { key: '7d683be9b78ea51e055de0fee2638ac51d91d905', role: "list", class: "tds-breadcrumb" }, h("slot", { key: '7cb331d224d454cb928ff52af047c69393cf7410' }))));
     }
     static get is() { return "tds-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -38,7 +38,7 @@ export class TdsBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-aria-label"
             }
         };

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

@@ -40,11 +40,11 @@ export class TdsButton {
         if (!this.text && !hasLabelSlot) {
             this.onlyIcon = true;
         }
-        return (h(Host, { key: '35c60edf5c2e4769e8995a47e90b8e99ef4482f6', class: {
+        return (h(Host, { key: '7f8c8462a61bc5faf9ad2d6d9bf2e358aa3cf98e', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
                 disabled: Boolean(this.disabled),
                 fullbleed: Boolean(this.fullbleed),
-            }, disabled: this.disabled }, h("button", Object.assign({ key: '819e795be3cdd3c435f54f1f9c0e13ae091aec98', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
+            }, disabled: this.disabled }, h("button", Object.assign({ key: '4875490d582b2d7b56761d4926677a875898448b', type: this.type, name: this.name ? this.name : undefined, value: this.value ? this.value : undefined, disabled: this.disabled, class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -58,7 +58,7 @@ export class TdsButton {
                 'icon': hasIconSlot,
                 'only-icon': this.onlyIcon,
                 [`animation-${this.animation}`]: this.animation !== 'none',
-            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '1c43f0358cfa491bf3b2061e7891f17bc8f0aac4', name: "label" }), hasIconSlot && h("slot", { key: '40fb5ffa1bb25c098f413e672fb28ccc11a0d3d0', name: "icon" }))));
+            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: 'c2784c3405118a239965bf5ab95dd341ab10d5f0', name: "label" }), hasIconSlot && h("slot", { key: 'ba5b742b82d3879c01cdee53219daf3d2571768a', name: "icon" }))));
     }
     static get is() { return "tds-button"; }
     static get encapsulation() { return "scoped"; }
@@ -90,7 +90,7 @@ export class TdsButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "text"
             },
             "type": {
@@ -109,7 +109,7 @@ export class TdsButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "type",
                 "defaultValue": "'button'"
             },
@@ -129,7 +129,7 @@ export class TdsButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "variant",
                 "defaultValue": "'primary'"
             },
@@ -149,7 +149,7 @@ export class TdsButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'lg'"
             },
@@ -169,7 +169,7 @@ export class TdsButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -189,7 +189,7 @@ export class TdsButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "fullbleed",
                 "defaultValue": "false"
             },
@@ -209,7 +209,7 @@ export class TdsButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "mode-variant",
                 "defaultValue": "null"
             },
@@ -229,7 +229,7 @@ export class TdsButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "animation",
                 "defaultValue": "'none'"
             },
@@ -249,7 +249,7 @@ export class TdsButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-aria-label"
             },
             "name": {
@@ -268,7 +268,7 @@ export class TdsButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name"
             },
             "value": {
@@ -287,7 +287,7 @@ export class TdsButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value"
             }
         };

package/dist/collection/components/card/card.js

@@ -67,7 +67,7 @@ export class TdsCard {
             [`${this.imagePlacement}-stretch`]: this.stretch,
         };
         const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
-        return (h(Host, { key: 'a02da4f8704ad22664fec6ba0b97421094e4cda0', class: { [`tds-mode-variant-${this.modeVariant}`]: !!this.modeVariant } }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
+        return (h(Host, { key: 'e652c7d625691932e9b39c83a730f614195cb17c', class: { [`tds-mode-variant-${this.modeVariant}`]: !!this.modeVariant } }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
     }
     static get is() { return "tds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -99,7 +99,7 @@ export class TdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "mode-variant",
                 "defaultValue": "null"
             },
@@ -119,7 +119,7 @@ export class TdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "image-placement",
                 "defaultValue": "'below-header'"
             },
@@ -139,7 +139,7 @@ export class TdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "header"
             },
             "subheader": {
@@ -158,7 +158,7 @@ export class TdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "subheader"
             },
             "bodyImg": {
@@ -177,7 +177,7 @@ export class TdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "body-img"
             },
             "bodyImgAlt": {
@@ -196,7 +196,7 @@ export class TdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "body-img-alt"
             },
             "bodyDivider": {
@@ -215,7 +215,7 @@ export class TdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "body-divider",
                 "defaultValue": "false"
             },
@@ -235,7 +235,7 @@ export class TdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "clickable",
                 "defaultValue": "false"
             },
@@ -255,7 +255,7 @@ export class TdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "stretch",
                 "defaultValue": "false"
             },
@@ -275,7 +275,7 @@ export class TdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "card-id",
                 "defaultValue": "generateUniqueId()"
             },
@@ -295,7 +295,7 @@ export class TdsCard {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "expandable",
                 "defaultValue": "false"
             },

package/dist/collection/components/checkbox/checkbox.js

@@ -60,12 +60,12 @@ export class TdsCheckbox {
         }
     }
     render() {
-        return (h("div", { key: 'dfffd2e58507c14f16d9c0979d1cf794296b83eb', class: "tds-checkbox" }, h("input", { key: '6003dd1ba8c0ffc40a7f3f692867e47801ebfb0d', ref: (inputElement) => {
+        return (h("div", { key: '97afce57b6f6ce0d66dabd227f7271b5dc8fe707', class: "tds-checkbox" }, h("input", { key: '8c97381eacc2c9d914cd02877e44dc0a7a456b48', ref: (inputElement) => {
                 if (inputElement)
                     this.inputElement = inputElement;
             }, indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-label": this.tdsAriaLabel, "aria-describedby": this.tdsAriaDescribedby, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
                 this.handleChange();
-            } }), h("label", { key: '0fb389206bd35497737b14a0cf12093a32de7881', htmlFor: this.checkboxId }, h("slot", { key: '7a085546f31a1aa6f4dd2ddab4f053bf86663dda', name: "label" }))));
+            } }), h("label", { key: '15a08109078c67717cf428c0f773ff7946b417a8', htmlFor: this.checkboxId }, h("slot", { key: '8ecde64bfea05475817019e4bd67ab50c571e328', name: "label" }))));
     }
     static get is() { return "tds-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -97,7 +97,7 @@ export class TdsCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name"
             },
             "checkboxId": {
@@ -116,7 +116,7 @@ export class TdsCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "checkbox-id",
                 "defaultValue": "generateUniqueId()"
             },
@@ -136,7 +136,7 @@ export class TdsCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -156,7 +156,7 @@ export class TdsCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "required",
                 "defaultValue": "false"
             },
@@ -196,7 +196,7 @@ export class TdsCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "indeterminate",
                 "defaultValue": "false"
             },
@@ -216,7 +216,7 @@ export class TdsCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value"
             },
             "tdsAriaLabel": {
@@ -235,7 +235,7 @@ export class TdsCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-aria-label"
             },
             "tdsAriaDescribedby": {
@@ -254,7 +254,7 @@ export class TdsCheckbox {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-aria-describedby"
             }
         };

package/dist/collection/components/chip/chip.css

@@ -24,7 +24,7 @@
   letter-spacing: var(--tds-detail-02-ls);
   display: inline-flex;
   align-items: center;
-  border-radius: 32px;
+  border-radius: var(--tds-chips-border-radius);
   border: 1px solid var(--tds-chips-border);
   cursor: pointer;
   white-space: nowrap;
@@ -33,26 +33,16 @@
   background-color: var(--tds-chips-background-hover);
   border-color: var(--tds-chips-border-hover);
 }
+.tds-chip-component.disabled {
+  opacity: var(--tds-chips-opacity-disabled);
+}
 .tds-chip-component.disabled label {
-  background-color: var(--tds-chips-background-disabled);
-  color: var(--tds-chips-text-disabled);
-  border-color: transparent;
   cursor: default;
   pointer-events: none;
 }
 .tds-chip-component.disabled input {
   pointer-events: none;
 }
-.tds-chip-component.disabled input[type=radio]:checked:disabled + label {
-  background-color: var(--tds-chips-background-active-disabled);
-  color: var(--tds-chips-text-checked-disabled);
-  border-color: transparent;
-}
-.tds-chip-component.disabled input[type=checkbox]:checked:disabled + label {
-  background-color: var(--tds-chips-background-active-disabled);
-  color: var(--tds-chips-text-checked-disabled);
-  border-color: transparent;
-}
 .tds-chip-component.lg label {
   height: 16px;
   padding: 8px 16px;
@@ -97,7 +87,7 @@
 .tds-chip-component input:checked + label {
   background-color: var(--tds-chips-background-active);
   color: var(--tds-chips-color-active);
-  border-color: var(--tds-chips-background-active);
+  border-color: var(--tds-chips-border-selected);
 }
 .tds-chip-component input:checked + label:hover {
   background-color: var(--tds-chips-background-active-hover);