@scania/tegel 1.5.0 → 1.6.0

package/dist/components/tds-modal.js

@@ -3,6 +3,7 @@ import { h as hasSlot } from './hasSlot.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const modalCss = ":root,.tds-mode-light{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-white);--tds-modal-text:var(--tds-grey-958);--tds-modal-icon:var(--tds-black);--tds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-mode-dark{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-grey-900);--tds-modal-text:var(--tds-grey-50);--tds-modal-icon:var(--tds-white);--tds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-modal{box-sizing:border-box;background-color:var(--tds-modal-background);margin:auto;position:relative;border-radius:4px;padding:16px;max-height:85vh;overflow-y:auto;pointer-events:auto;}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-track{background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500);border-radius:0 1em 1em 0}.tds-modal__actions-sticky{overflow:hidden}.tds-modal__actions-sticky .body{font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);padding-bottom:96px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{position:absolute;bottom:-1px;left:0;right:0;background-color:var(--tds-modal-background);padding:var(--tds-spacing-element-16);display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--tds-modal-background);display:flex;gap:16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:50%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding-bottom:var(--tds-spacing-element-8);position:sticky;top:0;background-color:var(--tds-modal-background);z-index:1}.header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--tds-modal-background)}.header,slot[name=header]::slotted(*){color:var(--tds-modal-text);font:var(--tds-headline-05) !important;letter-spacing:var(--tds-headline-05-ls) !important;margin:0;flex:1}.body{color:var(--tds-modal-text);font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);padding-bottom:40px;overflow-y:visible;padding-right:16px;}.body::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-track{background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500)}@media (min-width: 1056px){.body{padding-right:64px}}.tds-modal-backdrop{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--tds-modal-backdrop);pointer-events:auto}.tds-modal-backdrop *{box-sizing:border-box}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--tds-modal-icon);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media (min-width: 320px){.tds-modal-close{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn svg{fill:var(--tds-modal-icon)}.tds-modal-overflow{overflow:hidden}:host{box-sizing:border-box;position:fixed;top:0;right:0;bottom:0;left:0;padding:0 16px;z-index:700;pointer-events:none}:host *{box-sizing:border-box}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host(.show){display:flex}:host(.hide){display:none}";
+const TdsModalStyle0 = modalCss;
 
 const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends HTMLElement {
     constructor() {
@@ -89,10 +90,10 @@ const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends HTMLE
     render() {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { class: `${this.isShown ? 'show' : 'hide'}`, onClick: (event) => this.handleOverlayClick(event) }, h("div", { class: "tds-modal-backdrop" }), h("div", { class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { class: "header" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), h("button", { class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { name: "cross", size: "20px" }))), h("div", { class: "body" }, h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: "actions" }))));
+        return (h(Host, { key: 'd3e0d4d6611134126de12944c238e96acce8dc58', class: `${this.isShown ? 'show' : 'hide'}`, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: 'c3b155f003be30978deefd302a0db9f20c319367', class: "tds-modal-backdrop" }), h("div", { key: '4606f040cd26d18b6cea7a1ef3af036b917a622c', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '5f281f96937c5459ef6de75a240769f95a607739', class: "header" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), h("button", { key: 'd3cd87c242e5974886591241a8895780a0ee89a2', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: 'bc9cc1be58288d800e36e66b53033f1991322cce', name: "cross", size: "20px" }))), h("div", { key: 'd30c37f23034e17dd4bb6a1a824f06147ba7982d', class: "body" }, h("slot", { key: '51e0253c5082db0f65504f45446a0aec33b4b1a2', name: "body" })), usesActionsSlot && h("slot", { name: "actions" }))));
     }
     get host() { return this; }
-    static get style() { return modalCss; }
+    static get style() { return TdsModalStyle0; }
 }, [1, "tds-modal", {
         "header": [1],
         "prevent": [4],

package/dist/components/tds-navigation-tab.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const navigationTabCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color) !important;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:26px 4px}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:26px;bottom:26px;outline:2px solid var(--tds-blue-400)}:host .navigation-tab-item:not(.selected)::after{width:0%;transition:width 0.15s ease-in-out 0s}:host .navigation-tab-item{position:relative;margin-right:32px}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-navigation-tabs-tab-indicator-background-hover);z-index:1}:host .selected ::slotted(*){color:var(--tds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-navigation-tabs-tab-color-disabled)}:host .disabled ::slotted(*){opacity:var(--tds-navigation-tabs-tab-color-opacity-disabled)}:host .disabled::after{content:none}:host .disabled ::slotted(*:hover){cursor:not-allowed}:host .disabled ::slotted(*:focus-visible){outline:none}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
+const TdsNavigationTabStyle0 = navigationTabCss;
 
 const TdsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTab extends HTMLElement {
     constructor() {
@@ -15,10 +16,10 @@ const TdsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationT
         this.selected = selected;
     }
     render() {
-        return (h(Host, { role: "listitem" }, h("div", { class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
+        return (h(Host, { key: 'a1eb1fdb72301a4ac46ecd367908651b87bb7352', role: "listitem" }, h("div", { key: '866b67d7bdcf4586e6d6f7e9af31bb1588c3f342', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '1879d29a8fffb9ecf91c57c7a1714138344b7459' }))));
     }
-    static get style() { return navigationTabCss; }
+    static get style() { return TdsNavigationTabStyle0; }
 }, [1, "tds-navigation-tab", {
         "disabled": [4],
         "selected": [32],

package/dist/components/tds-navigation-tabs.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './icon.js';
 
 const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);opacity:var(--tds-inline-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
+const TdsNavigationTabsStyle0 = navigationTabsCss;
 
 const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTabs extends HTMLElement {
     constructor() {
@@ -136,15 +137,15 @@ const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigation
         this.addResizeObserver();
     }
     render() {
-        return (h(Host, { role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '0ebc32eb685a718fd072e2875e76db089d3e0a67', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'c198b4934264d0d961ccc4216f030fb8800e0b48', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: 'ac7ed834e57afe5bb8422ef861d3984f49c199cc', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '6aa99d22388b928edc9c3c97557f8b219cf9498c', name: "chevron_left", size: "20px" })), h("slot", { key: 'cd492ce2b51e1efd994f85405a2f3d6b8a4172d7' }), h("button", { key: 'a28528c08c767347ce59ae2a4efcd23b14a593f0', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '7e1d80299b44ea94e5420f26b14183989520d95d', name: "chevron_right", size: "20px" })))));
     }
     get host() { return this; }
     static get watchers() { return {
         "selectedIndex": ["handleSelectedIndexUpdate"]
     }; }
-    static get style() { return navigationTabsCss; }
+    static get style() { return TdsNavigationTabsStyle0; }
 }, [1, "tds-navigation-tabs", {
         "modeVariant": [1, "mode-variant"],
         "defaultSelectedIndex": [2, "default-selected-index"],

package/dist/components/tds-popover-menu-item.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const popoverMenuItemCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host .wrapper{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-popover-menu-color);position:relative;width:100%;display:flex;align-items:center}:host .wrapper:hover{cursor:pointer;background-color:var(--tds-popover-menu-background-hover)}:host .wrapper.disabled{pointer-events:none;color:var(--tds-popover-menu-divider-disabled-color)}:host .wrapper.disabled ::slotted(tds-icon){color:var(--tds-popover-menu-divider-disabled-icon-color)}:host ::slotted(*:not(tds-icon)){all:unset;width:100%;display:inline-flex;display:flex;align-items:center;gap:10px;padding:10px 16px}:host ::slotted(*:focus-visible)::before{z-index:-1;content:\"\";display:block;position:absolute;width:calc(100% - 4px);height:100%;top:0;left:2px;outline:1px solid var(--tds-blue-400);outline-offset:1px}";
+const TdsPopoverMenuItemStyle0 = popoverMenuItemCss;
 
 const TdsPopoverMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenuItem extends HTMLElement {
     constructor() {
@@ -10,12 +11,12 @@ const TdsPopoverMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMe
         this.disabled = false;
     }
     render() {
-        return (h(Host, { role: "listitem" }, h("div", { class: {
+        return (h(Host, { key: 'b7094f420d522c9e1bca7c4121725fef8e9ce9f9', role: "listitem" }, h("div", { key: '94b4032e8f3c257e4c16ecf271163aed77fafa8d', class: {
                 wrapper: true,
                 disabled: this.disabled,
-            } }, h("slot", null))));
+            } }, h("slot", { key: 'd9280a3c2939c5620ef5f097b5c434f321f7a51e' }))));
     }
-    static get style() { return popoverMenuItemCss; }
+    static get style() { return TdsPopoverMenuItemStyle0; }
 }, [1, "tds-popover-menu-item", {
         "disabled": [4]
     }]);

package/dist/components/tds-popover-menu.js

@@ -3,6 +3,7 @@ import { i as inheritAttributes } from './inheritAttributes.js';
 import { d as defineCustomElement$2 } from './popover-core.js';
 
 const popoverMenuCss = ".tds-popover-menu.sc-tds-popover-menu{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:16px 6px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:900}.tds-popover-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}.tds-popover-menu.fluid-width.sc-tds-popover-menu{width:unset}tds-popover-core.sc-tds-popover-menu{padding:6px 0 !important}.sc-tds-popover-menu-s>tds-divider{display:block;padding:6px !important}";
+const TdsPopoverMenuStyle0 = popoverMenuCss;
 
 const TdsPopoverMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenu extends HTMLElement {
     constructor() {
@@ -22,14 +23,14 @@ const TdsPopoverMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenu e
     }
     render() {
         var _a;
-        return (h(Host, null, h("tds-popover-core", { class: {
+        return (h(Host, { key: '478be0089e62be878b3085bbda009fb87d5ccade' }, h("tds-popover-core", { key: '1e70eae5df4937ba0bb4b13f53ea81a2a45ffea7', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
-            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance }, h("div", { role: "list" }, h("slot", null)))));
+            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance }, h("div", { key: '038691370cdd8162cf24c6268b69c1c611030dac', role: "list" }, h("slot", { key: 'fad59409fba2f35e5324fd755bb03a1ccc65ca2c' })))));
     }
     get host() { return this; }
-    static get style() { return popoverMenuCss; }
+    static get style() { return TdsPopoverMenuStyle0; }
 }, [6, "tds-popover-menu", {
         "selector": [1],
         "referenceEl": [16],

package/dist/components/tds-radio-button.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { g as generateUniqueId } from './generateUniqueId.js';
 
 const radioButtonCss = ".sc-tds-radio-button:root,.tds-mode-light.sc-tds-radio-button{--tds-radio-button-color:var(--tds-grey-958);--tds-radio-button-interaction-01:var(--tds-blue-800);--tds-radio-button-interaction-02:var(--tds-white);--tds-radio-button-background-hover:var(--tds-blue-800);--tds-radio-button-background-focus:var(--tds-blue-800);--tds-radio-button-disabled:var(--tds-grey-600);--tds-radio-button-border-color-disabled-after:var(--tds-grey-500);--tds-radio-button-color-disabled-after:var(--tds-grey-700);--tds-radio-button-color-disabled-before:var(--tds-grey-700)}.tds-mode-dark.sc-tds-radio-button{--tds-radio-button-color:var(--tds-white);--tds-radio-button-interaction-01:var(--tds-white);--tds-radio-button-interaction-02:var(--tds-grey-958);--tds-radio-button-background-hover:var(--tds-white);--tds-radio-button-background-focus:var(--tds-white);--tds-radio-button-disabled:var(--tds-grey-600);--tds-radio-button-border-color-disabled-after:var(--tds-grey-700);--tds-radio-button-color-disabled-after:var(--tds-grey-700)}.tds-radio-button.sc-tds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-radio-button-color)}.tds-radio-button.sc-tds-radio-button *.sc-tds-radio-button{box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button{appearance:none;outline:none;margin:0;border:0;width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button+label.sc-tds-radio-button{padding:var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);cursor:pointer}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{content:\"\";position:absolute;border-radius:50%;box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before{width:24px;height:24px;left:0;top:0}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{border:1px solid var(--tds-radio-button-interaction-01);background-color:var(--tds-radio-button-interaction-02);width:16px;height:16px;left:4px;top:4px}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:hover::before{background-color:var(--tds-radio-button-background-hover);opacity:0.12}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:focus::before{background-color:var(--tds-radio-button-background-focus);opacity:0.24;animation:rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button{cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button::after{border-color:var(--tds-radio-button-border-color-disabled-after);background-color:var(--tds-radio-button-interaction-02)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled+label.sc-tds-radio-button,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button+label.sc-tds-radio-button{color:var(--tds-radio-button-disabled);cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button:hover::before{display:none;opacity:1}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked::after{border:4px solid var(--tds-radio-button-interaction-01)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid var(--tds-radio-button-color-disabled-before);box-sizing:content-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::after{border:4px solid var(--tds-radio-button-interaction-02);background-color:var(--tds-radio-button-color-disabled-after);left:5px;top:5px}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:0.24}}";
+const TdsRadioButtonStyle0 = radioButtonCss;
 
 const TdsRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsRadioButton extends HTMLElement {
     constructor() {
@@ -22,10 +23,10 @@ const TdsRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsRadioButton e
         this.disabled = false;
     }
     render() {
-        return (h("div", { class: "tds-radio-button" }, h("input", { class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
+        return (h("div", { key: '94a76d67c971bcc9d5e45cd64ad49f87267ec584', class: "tds-radio-button" }, h("input", { key: '73bb8fa6fabede809f55ea63d956efb6f776bd68', class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { key: '2bc4fb9747aa4207f0082680b9c2ab720f802844', htmlFor: this.radioId }, h("slot", { key: '0b0c2bb6e2cbd67e307a4bc603dc48a699aa2202', name: "label" }))));
     }
     get host() { return this; }
-    static get style() { return radioButtonCss; }
+    static get style() { return TdsRadioButtonStyle0; }
 }, [6, "tds-radio-button", {
         "name": [1],
         "value": [1],

package/dist/components/tds-side-menu-close-button.js

@@ -3,6 +3,7 @@ import { i as inheritAriaAttributes } from './inheritAriaAttributes.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const sideMenuCloseButtonCss = ":host button{height:64px;width:100%;text-align:left;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host button:hover{cursor:pointer;background-color:var(--tds-sidebar-item-state-hover)}:host button:focus-visible{cursor:pointer;border:1px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}";
+const TdsSideMenuCloseButtonStyle0 = sideMenuCloseButtonCss;
 
 const TdsSideMenuCloseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuCloseButton extends HTMLElement {
     constructor() {
@@ -12,10 +13,10 @@ const TdsSideMenuCloseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideM
     }
     render() {
         const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
-        return (h(Host, null, h("button", Object.assign({}, buttonProps), h("tds-icon", { name: "cross", size: "20px" }))));
+        return (h(Host, { key: 'af2986a1df94f1c537dfafdb851829380a21b475' }, h("button", Object.assign({ key: 'e4838583f4c2c13415bf0a73112e0a8a07dbe597' }, buttonProps), h("tds-icon", { key: '47a2f2750155b166766dc493066c764e81122653', name: "cross", size: "20px" }))));
     }
     get host() { return this; }
-    static get style() { return sideMenuCloseButtonCss; }
+    static get style() { return TdsSideMenuCloseButtonStyle0; }
 }, [1, "tds-side-menu-close-button"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-side-menu-collapse-button.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './side-menu-item.js';
 
 const sideMenuCollapseButtonCss = ":host{position:sticky;bottom:0;display:none;height:68px;border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .icon{transform:rotateZ(90deg);transition:all 0.2s ease-in-out;width:20px;height:20px}:host .state-collapsed .icon{transform:translateX(-50%) rotateZ(90deg) rotateX(180deg);color:var(--tds-sidebar-side-menu-single-item-color);margin-left:0;position:absolute;left:50%}@media (min-width: 992px){:host{display:block}}";
+const TdsSideMenuCollapseButtonStyle0 = sideMenuCollapseButtonCss;
 
 const TdsSideMenuCollapseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuCollapseButton extends HTMLElement {
     constructor() {
@@ -34,17 +35,17 @@ const TdsSideMenuCollapseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSi
         this.collapsed = this.sideMenuEl.collapsed;
     }
     render() {
-        return (h(Host, { role: "button", tabindex: "0", onClick: () => {
+        return (h(Host, { key: 'e48ec8fc6347ae78b23c2a3e889f5197ede47f66', role: "button", tabindex: "0", onClick: () => {
                 this.handleClick();
-            } }, h("div", { class: {
+            } }, h("div", { key: 'e9db12048f2b2291d001e4b5531a2a0e2ae94869', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { class: {
+            } }, h("tds-side-menu-item", { key: '43e3d501c4df6701f17b48496d1ffca86b0f4bd5', class: {
                 button: true,
-            } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", null))))));
+            } }, h("a", { key: '9455d2a2e177eec134267ae09a60fad14d1f0d8a' }, h("svg", { key: '90a0d1b9b9ec1b75fb1c66b2f27f0004921b8699', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'b804ec026cfc18f90b04d6d363e7221c3417317a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", null))))));
     }
     get host() { return this; }
-    static get style() { return sideMenuCollapseButtonCss; }
+    static get style() { return TdsSideMenuCollapseButtonStyle0; }
 }, [1, "tds-side-menu-collapse-button", {
         "collapsed": [32]
     }, [[16, "internalTdsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);

package/dist/components/tds-side-menu-dropdown-list-item.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const sideMenuDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:48px;width:100%}:host .component{height:100%;width:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--tds-nav-item-border-color);display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-header-nav-item-dropdown-opened-background);color:var(--tds-header-nav-item-dropdown-opened-color);border:none}:host .component ::slotted(a:hover),:host .component ::slotted(button:hover){background-color:var(--tds-header-nav-item-dropdown-opened-background-hover);cursor:pointer}:host .component ::slotted(a:active),:host .component ::slotted(button:active){background-color:var(--tds-header-nav-item-dropdown-opened-background-active) !important;cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component.component-selected ::slotted(a),:host .component.component-selected ::slotted(button){border-left:4px solid var(--tds-nav-item-border-color-active);padding-left:20px;background-color:var(--tds-header-nav-item-dropdown-opened-background-selected)}:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button){padding-left:56px}";
+const TdsSideMenuDropdownListItemStyle0 = sideMenuDropdownListItemCss;
 
 const TdsSideMenuDropdownListItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdownListItem extends HTMLElement {
     constructor() {
@@ -31,15 +32,15 @@ const TdsSideMenuDropdownListItem$1 = /*@__PURE__*/ proxyCustomElement(class Tds
         }
     }
     render() {
-        return (h(Host, { role: "listitem" }, h("div", { class: {
+        return (h(Host, { key: 'f9a26ee973ab394933e507602d55e4ab78ac2a1a', role: "listitem" }, h("div", { key: '28ad60d22c28fc9fd7c5b607b95a2864c90dd5c5', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-dropdown-has-icon': this.dropdownHasIcon,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", null))));
+            } }, h("slot", { key: 'a76c94db492969a407c8e43e9d04ff44af615422' }))));
     }
     get host() { return this; }
-    static get style() { return sideMenuDropdownListItemCss; }
+    static get style() { return TdsSideMenuDropdownListItemStyle0; }
 }, [1, "tds-side-menu-dropdown-list-item", {
         "selected": [4],
         "dropdownHasIcon": [32],

package/dist/components/tds-side-menu-dropdown-list.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const sideMenuDropdownListCss = ":host{display:block;width:190px}:host [role=list]{padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--tds-header-app-launcher-menu-bg)}:host .state-collapsed ::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}";
+const TdsSideMenuDropdownListStyle0 = sideMenuDropdownListCss;
 
 const TdsSideMenuDropdownList$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdownList extends HTMLElement {
     constructor() {
@@ -18,12 +19,12 @@ const TdsSideMenuDropdownList$1 = /*@__PURE__*/ proxyCustomElement(class TdsSide
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     render() {
-        return (h(Host, { role: "list" }, h("div", { class: {
+        return (h(Host, { key: '6d19bf90638236d3d26b58a79e0621f82077dba7', role: "list" }, h("div", { key: 'cd7bc4480d019604b214443f8f0df688a906d8ab', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", null))));
+            } }, h("slot", { key: '47d1ea3415f77ffbbb407e4ae17a90444b340b65' }))));
     }
     get host() { return this; }
-    static get style() { return sideMenuDropdownListCss; }
+    static get style() { return TdsSideMenuDropdownListStyle0; }
 }, [1, "tds-side-menu-dropdown-list", {
         "collapsed": [32]
     }, [[16, "internalTdsSideMenuPropChange", "collapsedSideMenuEventHandler"]]]);

package/dist/components/tds-side-menu-dropdown.js

@@ -3,6 +3,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './side-menu-item.js';
 
 const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:68px;position:absolute;left:var(--side-menu-width);box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-sidebar-side-menu-subnav-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
+const TdsSideMenuDropdownStyle0 = sideMenuDropdownCss;
 
 const TdsSideMenuDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdown extends HTMLElement {
     constructor() {
@@ -53,16 +54,16 @@ const TdsSideMenuDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenu
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { key: '6fe745525d89abd54dd170f56a9ba5f0ca3fc139' }, h("div", { key: 'cc11b904347ae67bd54e6545e37b60a587ab6f6e', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, h("tds-side-menu-item", { key: '857d5f11306ee2fba67b55c5e3319aa8b43f1440', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            } }, h("button", null, h("slot", { name: "icon" }), !this.collapsed && (h(Fragment, null, this.buttonLabel, h("slot", { name: "label" }), h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { class: "menu" }, this.collapsed && (h("h3", { class: "heading-collapsed" }, this.buttonLabel, h("slot", { name: "label" }))), h("slot", null)))));
+            } }, h("button", { key: 'c09abf0607ef27872783bf97a61e95727ecbfe93' }, h("slot", { key: 'a90c19a33327ef5a33ca1688c50ae8f16c536482', name: "icon" }), !this.collapsed && (h(Fragment, null, this.buttonLabel, h("slot", { name: "label" }), h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { key: '9b4f45f0ee9076a39a0792576bc5e4a4e8368a48', class: "menu" }, this.collapsed && (h("h3", { class: "heading-collapsed" }, this.buttonLabel, h("slot", { name: "label" }))), h("slot", { key: '7603c91608ff39ed9712d52e46cc573a06949078' })))));
     }
     get host() { return this; }
-    static get style() { return sideMenuDropdownCss; }
+    static get style() { return TdsSideMenuDropdownStyle0; }
 }, [1, "tds-side-menu-dropdown", {
         "defaultOpen": [4, "default-open"],
         "buttonLabel": [1, "button-label"],

package/dist/components/tds-side-menu-overlay.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const sideMenuOverlayCss = ":host{position:fixed;width:100%;height:100%;background-color:black}div{position:fixed;width:100%;height:100%;pointer-events:none}";
+const TdsSideMenuOverlayStyle0 = sideMenuOverlayCss;
 
 const TdsSideMenuOverlay$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuOverlay extends HTMLElement {
     constructor() {
@@ -9,9 +10,9 @@ const TdsSideMenuOverlay$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuO
         this.__attachShadow();
     }
     render() {
-        return (h(Host, null, h("div", null)));
+        return (h(Host, { key: '598597cc04bbf02b861489cd8ad282ece6b8145b' }, h("div", { key: '03fa1dc0991e1cd5721b993a75ea7d8065e3a235' })));
     }
-    static get style() { return sideMenuOverlayCss; }
+    static get style() { return TdsSideMenuOverlayStyle0; }
 }, [1, "tds-side-menu-overlay"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-side-menu-user.js

@@ -3,6 +3,7 @@ import { d as defineCustomElement$3 } from './side-menu-user-image.js';
 import { d as defineCustomElement$2 } from './side-menu-user-label.js';
 
 const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host tds-side-menu-user-image{margin-left:-4px}";
+const TdsSideMenuUserStyle0 = sideMenuUserCss;
 
 const TdsSideMenuUser$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUser extends HTMLElement {
     constructor() {
@@ -15,9 +16,9 @@ const TdsSideMenuUser$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUser
         this.imgAlt = undefined;
     }
     render() {
-        return (h(Host, null, h("tds-side-menu-user-image", { src: this.imgSrc, alt: this.imgAlt }, h("slot", { name: "image" })), h("tds-side-menu-user-label", { heading: this.heading, subheading: this.subheading })));
+        return (h(Host, { key: 'b540444dcb88b0b0bc0835a7deafd50328b1e0db' }, h("tds-side-menu-user-image", { key: '22ed67e02a8e0787d6b683fd2afb0e71b1e58a18', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '9d0ab8c849cd83722b4b766944498c857fbc42c7', name: "image" })), h("tds-side-menu-user-label", { key: 'e455a9edd906f8b702fb2ffd6d1cfaad0596bde3', heading: this.heading, subheading: this.subheading })));
     }
-    static get style() { return sideMenuUserCss; }
+    static get style() { return TdsSideMenuUserStyle0; }
 }, [1, "tds-side-menu-user", {
         "heading": [1],
         "subheading": [1],

package/dist/components/tds-side-menu.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
 const sideMenuCss = ":host{pointer-events:none;display:block;position:fixed;top:0;width:100%;height:100%;z-index:500}:host .wrapper{height:inherit;}:host .wrapper slot:not([name])::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper .tds-side-menu-list-end{margin-top:68px}:host .state-closed{display:none}:host .state-open slot[name=overlay]::slotted(tds-side-menu-overlay){opacity:0.4}:host .state-open slot[name=close-button]::slotted(tds-side-menu-close-button){opacity:1}:host .state-upper-slot-empty .tds-side-menu-list-upper{display:none}:host .state-upper-slot-empty .tds-side-menu-list-end{margin-top:0}:host .state-upper-slot-empty ::slotted([slot=end]){border-top:none;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}@media (max-width: 992px){:host(.menu-opened){pointer-events:auto;z-index:500}}@media (min-width: 992px){:host(.menu-persistent){pointer-events:auto;position:static;width:272px;height:auto;border-right:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host(.menu-persistent) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay){display:none}:host(.menu-persistent) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button){display:none}:host(.menu-persistent) .menu{width:272px}:host(.menu-persistent) .state-closed{display:block}:host(.menu-persistent):host(.menu-collapsed){width:69px}:host(.menu-persistent):host(.menu-collapsed) .menu{width:68px}:host(.menu-persistent) slot[name=end]::slotted(*){display:none}}.menu{width:80%;height:inherit;position:relative;left:0;display:flex;flex-direction:column;justify-content:space-between}.menu *{padding:0;margin:0;box-sizing:border-box}@media (max-width: 384px){.menu{width:100%}}aside .tds-side-menu-wrapper{display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;background-color:var(--tds-sidebar-side-menu-background-cover);overflow-y:auto}aside .tds-side-menu-wrapper::-webkit-scrollbar{width:4px;background-color:inherit}aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}aside .tds-side-menu-wrapper ::-webkit-scrollbar-button{height:0;width:0}";
+const TdsSideMenuStyle0 = sideMenuCss;
 
 const GRID_LG_BREAKPOINT = 992;
 const TdsSideMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenu extends HTMLElement {
@@ -59,22 +60,22 @@ const TdsSideMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenu extends
         this.collapsed = event.detail.collapsed;
     }
     render() {
-        return (h(Host, { role: "navigation", class: {
+        return (h(Host, { key: 'ed2a20dcd884744ac411ea9e51903f0fb8120c90', role: "navigation", class: {
                 'menu-opened': this.open,
                 'menu-persistent': this.persistent,
                 'menu-collapsed': this.collapsed,
-            } }, h("div", { class: {
+            } }, h("div", { key: 'bf4c5f42a4ee78f5e6af782bcf4382a5d5978f3c', class: {
                 'wrapper': true,
                 'state-upper-slot-empty': this.isUpperSlotEmpty,
                 'state-open': this.open,
                 'state-closed': !this.open,
-            } }, h("slot", { name: "overlay" }), h("aside", { class: `menu` }, h("slot", { name: "close-button" }), h("div", { class: "tds-side-menu-wrapper" }, h("ul", { class: `tds-side-menu-list tds-side-menu-list-upper` }, h("slot", null)), h("ul", { class: `tds-side-menu-list tds-side-menu-list-end` }, h("slot", { name: "end" }))), h("slot", { name: "sticky-end" })))));
+            } }, h("slot", { key: '7ba1a82ae21a7c2a22c2a470c67ed5acc0dfcad9', name: "overlay" }), h("aside", { key: 'c794132de394376c6b525cee5c1e58939c9159b5', class: `menu` }, h("slot", { key: 'ebd07545d79267ea3daa8a931eca6e46431a8993', name: "close-button" }), h("div", { key: '4d19ee85e6ae60ad4a745169e3690d022db26871', class: "tds-side-menu-wrapper" }, h("ul", { key: '055d5d0004aecbfa6abf5ff83025ce147b941ce0', class: `tds-side-menu-list tds-side-menu-list-upper` }, h("slot", { key: 'e8e8827959284214c469edd16b8b2ccb7e0f2daa' })), h("ul", { key: 'c1b4f82c9446e11c4d454336690c4b71998bdffd', class: `tds-side-menu-list tds-side-menu-list-end` }, h("slot", { key: 'ee1d129567b8c11b9355dfbfebffa76674f8d281', name: "end" }))), h("slot", { key: '3b320259f8ea48744d3698e7271931671810f1b9', name: "sticky-end" })))));
     }
     get host() { return this; }
     static get watchers() { return {
         "collapsed": ["onCollapsedChange"]
     }; }
-    static get style() { return sideMenuCss; }
+    static get style() { return TdsSideMenuStyle0; }
 }, [1, "tds-side-menu", {
         "open": [4],
         "persistent": [4],

package/dist/components/tds-slider.js

@@ -3,6 +3,7 @@ import { g as generateUniqueId } from './generateUniqueId.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-grey-700);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg{fill:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-disabled);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-disabled)}";
+const TdsSliderStyle0 = sliderCss;
 
 const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends HTMLElement {
     constructor() {
@@ -294,29 +295,29 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends HTM
         this.updateTrack();
     }
     render() {
-        return (h("div", { class: {
+        return (h("div", { key: '08af5b4825c074a283e570796c508aa72dd55bca', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { class: {
+            } }, h("input", { key: '28e28c09a2f975fe884c10d3d4101f13bad69d74', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '0e500280ad8d0aa77fae11d44f25cda5506576fb', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-minus", onClick: () => this.stepLeft() }, h("tds-icon", { name: "minus", size: "16px" })))), h("div", { class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "tds-slider__value-dividers-wrapper" }, h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "tds-slider__track", ref: (el) => {
+            } }, h("label", { key: '6a8bd064dbdaef1868a2b7c204490309075a3760', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-minus", onClick: () => this.stepLeft() }, h("tds-icon", { name: "minus", size: "16px" })))), h("div", { key: '6a6edf11ee88faf3fd1a9730023f7a89e90abe66', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "tds-slider__value-dividers-wrapper" }, h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '6bceaaa53bed86067f596ca13b7c00ed88d06282', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
-            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { class: "tds-slider__track-fill", ref: (el) => {
+            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '327ebb76dce92a13eccee7fd3dd7219bbed43d6c', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: 'c40c1cdedbb20dcd1491f5f1db1f8d4c6dafad49', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { class: "tds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { class: "tds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '6f963c34cf9ecd038f829969a4c19c90e1c32eff', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
             } })))), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { class: "tds-slider__input-value", onClick: () => this.stepLeft() }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { class: "tds-slider__control tds-slider__control-plus", onClick: () => this.stepRight() }, h("tds-icon", { name: "plus", size: "16px" })))))));
     }
     static get watchers() { return {
         "value": ["handleValueUpdate"]
     }; }
-    static get style() { return sliderCss; }
+    static get style() { return TdsSliderStyle0; }
 }, [0, "tds-slider", {
         "label": [1],
         "value": [1025],

package/dist/components/tds-spinner.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const spinnerCss = ":root{--tds-spinner-background:var(--tds-blue-400);--tds-spinner-background-inverted:var(--tds-white);--tds-spinner-speed:1.8s;--tds-spinner-speed-lg:2s;--tds-spinner-radius-xs:8px;--tds-spinner-radius-sm:12px;--tds-spinner-radius-md:26px;--tds-spinner-radius-lg:42px;--tds-spinner-radius:var(--tds-spinner-radius-lg);--tds-spinner-stroke-width-xs:3px;--tds-spinner-stroke-width-sm:4px;--tds-spinner-stroke-width-md:6px;--tds-spinner-stroke-width-lg:8px;--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-spinner-svg{width:calc(var(--tds-spinner-radius) * 2);height:calc(var(--tds-spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.tds-spinner-svg-xs{--tds-spinner-radius:var(--tds-spinner-radius-xs);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-xs);--tds-spinner-animation-speed:var(--tds-spinner-speed)}.tds-spinner-svg-sm{--tds-spinner-radius:var(--tds-spinner-radius-sm);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-sm);--tds-spinner-animation-speed:var(--tds-spinner-speed)}.tds-spinner-svg-md{--tds-spinner-radius:var(--tds-spinner-radius-md);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-md);--tds-spinner-animation-speed:var(--tds-spinner-speed)}.tds-spinner-svg-lg{--tds-spinner-radius:var(--tds-spinner-radius-lg);--tds-spinner-stroke-width:var(--tds-spinner-stroke-width-lg);--tds-spinner-animation-speed:var(--tds-spinner-speed-lg)}.tds-spinner-circle{cx:var(--tds-spinner-radius);cy:var(--tds-spinner-radius);r:calc(var(--tds-spinner-radius) - var(--tds-spinner-stroke-width) / 2);fill:none;--tds-spinner-stroke-dash:calc((2 * var(--PI)) * var(--tds-spinner-radius));stroke-dasharray:var(--tds-spinner-stroke-dash);stroke-width:var(--tds-spinner-stroke-width);animation:dash var(--tds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.tds-spinner-circle-standard{stroke:var(--tds-spinner-background)}.tds-spinner-circle-inverted{stroke:var(--tds-spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--tds-spinner-stroke-dash))}to{stroke-dashoffset:var(--tds-spinner-stroke-dash)}}";
+const TdsSpinnerStyle0 = spinnerCss;
 
 const TdsSpinner$1 = /*@__PURE__*/ proxyCustomElement(class TdsSpinner extends HTMLElement {
     constructor() {
@@ -10,9 +11,9 @@ const TdsSpinner$1 = /*@__PURE__*/ proxyCustomElement(class TdsSpinner extends H
         this.variant = 'standard';
     }
     render() {
-        return (h("div", { "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+        return (h("div", { key: '152350d165fc9410c715b967c928f40487a0f636', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: '3b02495d7d68735181e0cce975d6717d0d75bd89', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'dd68d0e6b90d2a32752d4499145f766d3ada79bc', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
     }
-    static get style() { return spinnerCss; }
+    static get style() { return TdsSpinnerStyle0; }
 }, [0, "tds-spinner", {
         "size": [1],
         "variant": [1]

package/dist/components/tds-step.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$2 } from './icon.js';
 
 const stepCss = ":host{position:relative;display:table-cell}:host tds-icon{line-height:1}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);display:flex;justify-content:center;align-items:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-negative);color:var(--tds-negative)}:host [role=listitem] .content-container.success{background-color:var(--tds-positive);border-color:var(--tds-positive);color:var(--tds-white)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(.last) [role=listitem].sm::after,:host(.last) [role=listitem].lg::after{display:none}:host(.last) [role=listitem].sm.vertical::before{display:none}:host(.first) [role=listitem].sm::before,:host(.first) [role=listitem].lg::before{display:none}";
+const TdsStepStyle0 = stepCss;
 
 const propToStateMap = {
     orientation: 'orientation',
@@ -43,10 +44,10 @@ const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends HTMLEle
         }
     }
     render() {
-        return (h(Host, null, h("div", { role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("div", { class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabels && (h("div", { class: `label ${this.size} ${this.state}` }, h("slot", { name: "label" }))))));
+        return (h(Host, { key: '1a28ad519601ffc63918ca1ed585c68c7fe0a99a' }, h("div", { key: 'dd3afe46dfd76674833be41e9eaa98c400769081', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("div", { key: '5d4534ca241ddf43653ffb97c9784127bd6752dd', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabels && (h("div", { class: `label ${this.size} ${this.state}` }, h("slot", { name: "label" }))))));
     }
     get el() { return this; }
-    static get style() { return stepCss; }
+    static get style() { return TdsStepStyle0; }
 }, [1, "tds-step", {
         "index": [1],
         "state": [1],

package/dist/components/tds-stepper.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { g as generateUniqueId } from './generateUniqueId.js';
 
 const stepperCss = ":host [role=list]{display:flex;justify-content:space-evenly;min-width:100%}:host [role=list]:not(.text-position-aside){display:table;table-layout:fixed;width:100%;list-style:none}:host [role=list].vertical{height:100%;display:flex;flex-direction:column;justify-content:unset;gap:52px}:host [role=list].vertical.sm{gap:36px}:host [role=list].horizontal.text-position-aside{justify-content:unset}";
+const TdsStepperStyle0 = stepperCss;
 
 const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends HTMLElement {
     constructor() {
@@ -51,7 +52,7 @@ const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends H
         });
     }
     render() {
-        return (h(Host, null, h("div", { role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", null))));
+        return (h(Host, { key: 'dcc6fc6be2e37bc4dcd4f0ab5dbe643ae26a1cbb' }, h("div", { key: '030eec1bc0b3075f7158f6936faad30c33272e02', role: "list", class: `${this.orientation} text-position-${this.labelPosition} ${this.size}` }, h("slot", { key: 'e4460b2a26a98cad97915059e2c4628a0e91a97e' }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -60,7 +61,7 @@ const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends H
         "size": ["handleSizeChange"],
         "hideLabels": ["handleHideLabelsChange"]
     }; }
-    static get style() { return stepperCss; }
+    static get style() { return TdsStepperStyle0; }
 }, [1, "tds-stepper", {
         "orientation": [1],
         "labelPosition": [1, "label-position"],