@scania/tegel 1.5.0 → 1.6.1

package/dist/components/popover-canvas.js

@@ -3,6 +3,7 @@ import { i as inheritAttributes } from './inheritAttributes.js';
 import { d as defineCustomElement$1 } from './popover-core.js';
 
 const popoverCanvasCss = ".tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);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-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
+const TdsPopoverCanvasStyle0 = popoverCanvasCss;
 
 const TdsPopoverCanvas = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCanvas extends HTMLElement {
     constructor() {
@@ -22,13 +23,13 @@ const TdsPopoverCanvas = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCanvas
     }
     render() {
         var _a;
-        return (h(Host, null, h("tds-popover-core", Object.assign({}, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '45b6b6b51a9c37d4692b2d3d5418fb3c57fd7bbd' }, h("tds-popover-core", Object.assign({ key: '580397a3b0ee7aa04911644418f347dde7a67f1c' }, this.inheritedAttributes, { class: {
                 'tds-popover-canvas': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
-            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click' }), h("div", null, h("slot", null)))));
+            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click' }), h("div", { key: 'aaf09175958e1496d7e9ba685ac66a54320e8c7c' }, h("slot", { key: 'fb6ca5a14c2365b6c8ecac6f05c1c51f4ee20147' })))));
     }
     get host() { return this; }
-    static get style() { return popoverCanvasCss; }
+    static get style() { return TdsPopoverCanvasStyle0; }
 }, [6, "tds-popover-canvas", {
         "selector": [1],
         "referenceEl": [16],

package/dist/components/popover-core.js

@@ -1940,7 +1940,7 @@ const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore ext
         if (this.autoHide) {
             hostStyle = { display: this.isShown ? 'block' : 'none' };
         }
-        return (h(Host, { style: hostStyle }, h("slot", null)));
+        return (h(Host, { key: '37933e24ca1b3ef534043364efe070074b934588', style: hostStyle }, h("slot", { key: 'fe4498e8b3cc2e3bd12f1080edea75b1d502e832' })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as dfs } from './dfs.js';
 
 const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;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);cursor:pointer}:host .component tds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center;position:relative}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--tds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
+const TdsSideMenuItemStyle0 = sideMenuItemCss;
 
 const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem extends HTMLElement {
     constructor() {
@@ -57,15 +58,15 @@ const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem e
         this.updateSlottedElements();
     }
     render() {
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { key: 'b94e2117fa05134a3aff5fd15b5eae90203d4570' }, h("div", { key: '02ebe255b0c72bdbf709c45739acfeebddec54de', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", null))));
+            } }, h("slot", { key: '97412b94539aaa451cd5dcb8f9d962e5e0c73e0c' }))));
     }
     get host() { return this; }
-    static get style() { return sideMenuItemCss; }
+    static get style() { return TdsSideMenuItemStyle0; }
 }, [1, "tds-side-menu-item", {
         "selected": [4],
         "active": [4],

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
+const TdsSideMenuUserImageStyle0 = sideMenuUserImageCss;
 
 const TdsSideMenuUserImage = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUserImage extends HTMLElement {
     constructor() {
@@ -11,9 +12,9 @@ const TdsSideMenuUserImage = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuU
         this.alt = undefined;
     }
     render() {
-        return (h(Host, null, h("slot", null), this.src && h("img", { src: this.src, alt: this.alt })));
+        return (h(Host, { key: '3d31dd530f0a93513c30f970c81c1cfb47949096' }, h("slot", { key: 'b9cac74d3f6fd7ba404c88fd729b50dc1771e07d' }), this.src && h("img", { src: this.src, alt: this.alt })));
     }
-    static get style() { return sideMenuUserImageCss; }
+    static get style() { return TdsSideMenuUserImageStyle0; }
 }, [1, "tds-side-menu-user-image", {
         "src": [1],
         "alt": [1]

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const sideMenuUserLabelCss = ":host{display:block;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--tds-grey-500)}";
+const TdsSideMenuUserLabelStyle0 = sideMenuUserLabelCss;
 
 const TdsSideMenuUserLabel = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUserLabel extends HTMLElement {
     constructor() {
@@ -11,9 +12,9 @@ const TdsSideMenuUserLabel = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuU
         this.subheading = undefined;
     }
     render() {
-        return (h(Host, null, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
+        return (h(Host, { key: '22d584ce36ff543f4e3c30176098591044da165d' }, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
     }
-    static get style() { return sideMenuUserLabelCss; }
+    static get style() { return TdsSideMenuUserLabelStyle0; }
 }, [1, "tds-side-menu-user-label", {
         "heading": [1],
         "subheading": [1]

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

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './icon.js';
 
 const accordionItemCss = ".tds-accordion-item{box-sizing:border-box;list-style:none;color:var(--tds-accordion-color);position:relative;border-top:1px solid var(--tds-accordion-border)}.tds-accordion-item *{box-sizing:border-box}.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{all:unset}.tds-accordion-item .tds-accordion-header-icon-start,.tds-accordion-item .tds-accordion-header-icon-end,.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding:var(--tds-spacing-element-16);background-color:var(--tds-accordion-background)}.tds-accordion-item .tds-accordion-header-icon-start *,.tds-accordion-item .tds-accordion-header-icon-end *,.tds-accordion-item button.tds-accordion-header-icon-start *,.tds-accordion-item button.tds-accordion-header-icon-end *{box-sizing:border-box}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--tds-accordion-icon-color)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon>tds-icon{display:block}.tds-accordion-item .tds-accordion-title{flex-grow:2}.tds-accordion-item .tds-accordion-panel{cursor:default;padding:var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);display:none;font:var(--tds-detail-03);letter-spacing:var(--tds-detail-03-ls)}.tds-accordion-item .tds-accordion-panel p{margin:0;padding:0}.tds-accordion-item .tds-accordion-panel--padding-reset{padding-right:var(--tds-spacing-element-16)}.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon{margin:0 0 0 var(--tds-spacing-element-32)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-title{order:1}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon{order:0;margin:0 var(--tds-spacing-element-16) 0 0}.tds-accordion-item.disabled,.tds-accordion-item.disabled .tds-accordion-header-icon-end,.tds-accordion-item.disabled .tds-accordion-header-icon-start,.tds-accordion-item.disabled .tds-accordion-panel{color:var(--tds-accordion-color-disabled);cursor:not-allowed}.tds-accordion-item.disabled .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-panel .tds-accordion-icon{color:var(--tds-accordion-color-disabled)}.tds-accordion-item.disabled:hover,.tds-accordion-item.disabled:hover *,.tds-accordion-item.disabled:focus,.tds-accordion-item.disabled:focus *,.tds-accordion-item.disabled:active,.tds-accordion-item.disabled:active *,.tds-accordion-item.disabled.active,.tds-accordion-item.disabled.active *{cursor:not-allowed}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-start,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end::after{border-color:transparent}.tds-accordion-item.expanded .tds-accordion-panel{display:block;padding-bottom:31px}.tds-accordion-item.expanded .tds-accordion-icon{transform:rotate(180deg)}.tds-accordion-item.expanded .tds-accordion-header-icon-end .tds-accordion-icon{margin-right:0;margin-left:var(--tds-spacing-element-32)}.tds-accordion-item.expanded .tds-accordion-header-icon-start .tds-accordion-icon{margin-left:0;margin-right:var(--tds-spacing-element-16)}.tds-accordion-item:focus{border-top:1px solid var(--tds-accordion-border-focus)}.tds-accordion-item[disabled=true]:focus{border-color:var(--tds-accordion-border)}:host(:focus) .tds-accordion-item{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-focus);outline:none}:host(:hover) .tds-accordion-header-icon-start,:host(:hover) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-hover)}:host(:active) .tds-accordion-header-icon-start,:host(:active) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-active);outline:none}";
+const TdsAccordionItemStyle0 = accordionItemCss;
 
 const TdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordionItem extends HTMLElement {
     constructor() {
@@ -26,14 +27,14 @@ const TdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordionIt
         }
     }
     render() {
-        return (h(Host, null, h("div", { class: `tds-accordion-item
+        return (h(Host, { key: '628336db584f9488762b6073af5fc05b18a064bd' }, h("div", { key: '15807da09f006149732d53a7f9aab2f86be788cd', class: `tds-accordion-item
         ${this.disabled ? 'disabled' : ''}
         ${this.expanded ? 'expanded' : ''}
-        ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { class: "tds-accordion-title" }, this.header, h("slot", { name: "header" })), h("div", { class: "tds-accordion-icon" }, h("tds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `tds-accordion-panel
+        ` }, h("button", { key: 'f2f5941332be588effc795862d4136077b51122e', type: "button", "aria-expanded": this.expanded, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { key: '3cfa2d6066875270211f75879effd48b88932ce8', class: "tds-accordion-title" }, this.header, h("slot", { key: '3c5cb389c8df24b1cb0cd20bfcb3c0b1154d3e38', name: "header" })), h("div", { key: 'a6a8189fc018d2629989165b3bb49ab111318628', class: "tds-accordion-icon" }, h("tds-icon", { key: 'a7cf540846b381a4925a754ea7b915c7df5d1208', name: "chevron_down", size: "16px" }))), h("div", { key: 'd3eb2219f67e69c54f55428950b976ba282845dc', class: `tds-accordion-panel
             ${this.paddingReset ? 'tds-accordion-panel--padding-reset ' : ''}
-            ` }, h("slot", null)))));
+            ` }, h("slot", { key: '21625afeae6b8342aaa7d56c05ed965c29cc709d' })))));
     }
-    static get style() { return accordionItemCss; }
+    static get style() { return TdsAccordionItemStyle0; }
 }, [1, "tds-accordion-item", {
         "header": [1],
         "expandIconPosition": [1, "expand-icon-position"],

package/dist/components/tds-accordion.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const accordionCss = ":host{display:block;box-sizing:border-box}:host *{box-sizing:border-box}:host .tds-accordion-header-icon-start,:host .tds-accordion-header-icon-end{position:relative}:host(:focus){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-focus);outline:none}:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start::after,:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end::after{border-color:var(--tds-accordion-border-focus)}:host(:focus) .disabled,:host(:focus) .disabled *{cursor:not-allowed}:host(:focus) .disabled .tds-accordion-header-icon-start,:host(:focus) .disabled .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}:host(:focus) .disabled .tds-accordion-header-icon-start::after,:host(:focus) .disabled .tds-accordion-header-icon-end::after{border-color:transparent}:host(:active) .tds-accordion-header-icon-start,:host(:active) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-active);outline:none}:host(:active) .disabled,:host(:active) .disabled *{cursor:not-allowed}:host(:active) .disabled .tds-accordion-header-icon-start,:host(:active) .disabled .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}:host(:active) .disabled .tds-accordion-header-icon-start::after,:host(:active) .disabled .tds-accordion-header-icon-end::after{border-color:transparent}:host(:last-child){border-bottom:1px solid var(--tds-accordion-border)}";
+const TdsAccordionStyle0 = accordionCss;
 
 const TdsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordion extends HTMLElement {
     constructor() {
@@ -10,9 +11,9 @@ const TdsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordion exten
         this.modeVariant = null;
     }
     render() {
-        return (h(Host, { class: `tds-accordion ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+        return (h(Host, { key: '241502efbb7136e417b81b7e5d86a45bb27cb765', class: `tds-accordion ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '2dd930e5c359015f3496663db864f14251226284' })));
     }
-    static get style() { return accordionCss; }
+    static get style() { return TdsAccordionStyle0; }
 }, [1, "tds-accordion", {
         "modeVariant": [1, "mode-variant"]
     }]);

package/dist/components/tds-badge.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const badgeCss = ":host{--tds-badge-background-color:var(--tds-negative);--tds-badge-color-text:var(--tds-white);box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-badge{display:block;border-radius:12px;background-color:var(--tds-badge-background-color);text-align:center}.tds-badge.tds-badge-sm{height:8px;width:8px;line-height:8px}.tds-badge.tds-badge-lg{height:20px;line-height:20px;width:20px}.tds-badge.tds-badge-pill{display:inline-block;width:unset;padding-left:8px;padding-right:8px}.tds-badge.tds-badge-hidden{display:none}.tds-badge-text{font-family:var(--tds-font-family-semi-condensed-bold);font-size:12px;color:var(--tds-badge-color-text);font-weight:bold}";
+const TdsBadgeStyle0 = badgeCss;
 
 const TdsBadge$1 = /*@__PURE__*/ proxyCustomElement(class TdsBadge extends HTMLElement {
     constructor() {
@@ -34,13 +35,13 @@ const TdsBadge$1 = /*@__PURE__*/ proxyCustomElement(class TdsBadge extends HTMLE
         }
     }
     render() {
-        return (h("host", { class: `tds-badge tds-badge-${this.size} ${this.shape === 'pill' ? 'tds-badge-pill' : ''} ${this.hidden ? 'tds-badge-hidden' : ''}` }, h("div", { class: "tds-badge-text" }, this.text)));
+        return (h("host", { key: 'edf6347da9742ae8353a33fa1613c0dd9170357b', class: `tds-badge tds-badge-${this.size} ${this.shape === 'pill' ? 'tds-badge-pill' : ''} ${this.hidden ? 'tds-badge-hidden' : ''}` }, h("div", { key: '223c0b81e4de5e790daa011481bc45d7565e5cfc', class: "tds-badge-text" }, this.text)));
     }
     static get watchers() { return {
         "value": ["watchProps"],
         "size": ["watchProps"]
     }; }
-    static get style() { return badgeCss; }
+    static get style() { return TdsBadgeStyle0; }
 }, [1, "tds-badge", {
         "value": [1],
         "hidden": [516],

package/dist/components/tds-banner.js

@@ -4,6 +4,7 @@ import { h as hasSlot } from './hasSlot.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const bannerCss = ":root,.tds-mode-light{--tds-link:var(--tds-blue-500);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-grey-900);--tds-link-disabled:var(--tds-grey-400)}:root tds-toast,.tds-mode-light tds-toast{--tds-link:var(--tds-blue-300);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-blue-100);--tds-link-disabled:var(--tds-grey-800)}.tds-mode-dark{--tds-link:var(--tds-blue-300);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-blue-100);--tds-link-disabled:var(--tds-grey-800)}.tds-mode-dark tds-toast{--tds-link:var(--tds-blue-500);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-grey-900);--tds-link-disabled:var(--tds-grey-400)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=actions]::slotted(*){display:block;width:fit-content;margin-top:16px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
+const TdsBannerStyle0 = bannerCss;
 
 const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends HTMLElement {
     constructor() {
@@ -46,12 +47,12 @@ const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends HTM
         const usesHeaderSlot = hasSlot('subheader', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.variant} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { class: `banner-icon ${this.variant}` }, h("tds-icon", { name: this.icon, size: "20px" }))), h("div", { class: "content" }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesActionsSlot && h("slot", { name: "actions" })), h("div", { class: `banner-close` }, h("button", { onClick: () => {
+        return (h(Host, { key: '58253d8f6cc0c4e39517bd8ed75e1e1489c21bfd', role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.variant} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { class: `banner-icon ${this.variant}` }, h("tds-icon", { name: this.icon, size: "20px" }))), h("div", { key: 'cf4e72dc5c335b78970eb635b5a422aa950a4d89', class: "content" }, h("div", { key: '9920521bb4e0981217867efe14bcc7a0e41cb6f3', class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesActionsSlot && h("slot", { name: "actions" })), h("div", { key: '8f08b41affa066e583adc9461f24746be3fc2a36', class: `banner-close` }, h("button", { key: '0aef5455186f0df39f30994cf4bc806dddde26c9', onClick: () => {
                 this.handleClose();
-            } }, h("tds-icon", { name: "cross", size: "20px" })))));
+            } }, h("tds-icon", { key: 'e540219e999ffc9a1bb52a94a10dc09c0684f15b', name: "cross", size: "20px" })))));
     }
     get host() { return this; }
-    static get style() { return bannerCss; }
+    static get style() { return TdsBannerStyle0; }
 }, [1, "tds-banner", {
         "icon": [1],
         "header": [1],

package/dist/components/tds-block.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const blockCss = ".tds-block{box-sizing:border-box;color:var(--tds-block-color);border-radius:4px;padding:16px;font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);background-color:var(--tds-block-background)}.tds-block *{box-sizing:border-box}.tds-mode-variant-primary{--tds-block-background:var(--tds-block-background-primary);--tds-block-background-nested:var(--tds-block-background-nested-primary)}.tds-mode-variant-secondary{--tds-block-background:var(--tds-block-background-secondary);--tds-block-background-nested:var(--tds-block-background-nested-secondary)}";
+const TdsBlockStyle0 = blockCss;
 
 const TdsBlock$1 = /*@__PURE__*/ proxyCustomElement(class TdsBlock extends HTMLElement {
     constructor() {
@@ -23,10 +24,10 @@ const TdsBlock$1 = /*@__PURE__*/ proxyCustomElement(class TdsBlock extends HTMLE
     }
     render() {
         this.setModeVariantOnChildBlocks();
-        return (h("div", { class: `tds-block ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+        return (h("div", { key: '8c521a49d01a0a3100efd8ab21ab5a22b7f78e59', class: `tds-block ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: 'b50e9967a4a1304a69aaf575333a8443ca57a21c' })));
     }
     get host() { return this; }
-    static get style() { return blockCss; }
+    static get style() { return TdsBlockStyle0; }
 }, [1, "tds-block", {
         "modeVariant": [1, "mode-variant"]
     }]);

package/dist/components/tds-body-cell.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const tableBodyCellCss = ":host(.tds-table__body-cell){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.tds-table__body-cell) *{box-sizing:border-box}:host(.tds-table__body-cell--no-padding){padding:0}:host(.tds-table__body-cell--hover){background-color:var(--tds-table-body-cell-background-hover)}:host(.tds-table__compact){padding:var(--tds-spacing-element-8) var(--tds-spacing-element-16)}:host(.tds-table--divider){border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}";
+const TdsBodyCellStyle0 = tableBodyCellCss;
 
 const relevantTableProps = [
     'verticalDividers',
@@ -61,17 +62,17 @@ const TdsTableBodyCell = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyCell
         });
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: '70e15157b5cdb058c0bb1a57bc45ba2a63a7cf1e', class: {
                 'tds-table__body-cell': true,
                 'tds-table__body-cell--hover': this.activeSorting,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--no-min-width': this.noMinWidth,
                 'tds-table__body-cell--no-padding': this.disablePadding,
-            }, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", null)));
+            }, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", { key: '2f006a87a5c0ed1b7212ab96913b40683df4c8a6' })));
     }
     get host() { return this; }
-    static get style() { return tableBodyCellCss; }
+    static get style() { return TdsBodyCellStyle0; }
 }, [1, "tds-body-cell", {
         "cellValue": [520, "cell-value"],
         "cellKey": [520, "cell-key"],

package/dist/components/tds-breadcrumb.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const breadcrumbCss = "@charset \"UTF-8\";[role=listitem] ::slotted(*){color:var(--tds-breadcrumb-color);text-decoration:none}[role=listitem]:hover ::slotted(*){color:var(--tds-breadcrumb-color-hover);text-decoration:underline}[role=listitem] ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px;outline-offset:0}[role=listitem].current ::slotted(*),[role=listitem] [aria-current=page] ::slotted(*){pointer-events:none;cursor:default;color:var(--tds-breadcrumb-color-current)}[role=listitem].current:hover ::slotted(*),[role=listitem] [aria-current=page]:hover ::slotted(*){text-decoration:none;cursor:not-allowed}[role=listitem]::after{content:\"›\";color:var(--tds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}:host(.last) [role=listitem]::after{display:none}";
+const TdsBreadcrumbStyle0 = breadcrumbCss;
 
 const TdsBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class TdsBreadcrumb extends HTMLElement {
     constructor() {
@@ -10,9 +11,9 @@ const TdsBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class TdsBreadcrumb ext
         this.current = false;
     }
     render() {
-        return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''}` }, h("slot", null)));
+        return (h("div", { key: '871567fde45bbc9a1c079367e89f5b2bb8af9928', role: "listitem", class: `${this.current ? 'current' : ''}` }, h("slot", { key: 'fed41c1f472f4585732bd0155d1376a402dbc48b' })));
     }
-    static get style() { return breadcrumbCss; }
+    static get style() { return TdsBreadcrumbStyle0; }
 }, [1, "tds-breadcrumb", {
         "current": [4]
     }]);

package/dist/components/tds-breadcrumbs.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const breadcrumbsCss = ":host{box-sizing:border-box}:host *{box-sizing:border-box}:host [role=list]{padding:0;margin:0;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;flex-wrap:wrap;list-style-type:none}";
+const TdsBreadcrumbsStyle0 = breadcrumbsCss;
 
 const TdsBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class TdsBreadcrumbs extends HTMLElement {
     constructor() {
@@ -11,10 +12,10 @@ const TdsBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class TdsBreadcrumbs e
     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", null, h("div", { role: "list", class: 'tds-breadcrumb' }, h("slot", null))));
+        return (h("nav", { key: 'b6ebfa793e8c456f6f94b3043939505a3e149026' }, h("div", { key: '3cfa35978e3b71cf825cb1bbff54731c253cfb9c', role: "list", class: 'tds-breadcrumb' }, h("slot", { key: 'c386ee1c9369f10b5c4f08ab5fd43c3eae077f5d' }))));
     }
     get host() { return this; }
-    static get style() { return breadcrumbsCss; }
+    static get style() { return TdsBreadcrumbsStyle0; }
 }, [1, "tds-breadcrumbs"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-button.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { h as hasSlot } from './hasSlot.js';
 
 const buttonCss = ".sc-tds-button:root,.tds-mode-light.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-600);--tds-btn-primary-color:var(--tds-white);--tds-btn-primary-border-color:transparent;--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-color-hover:var(--tds-white);--tds-btn-primary-border-color-hover:transparent;--tds-btn-primary-background-active:var(--tds-blue-700);--tds-btn-primary-color-active:var(--tds-white);--tds-btn-primary-border-color-active:var(--tds-blue-700);--tds-btn-primary-background-focus:var(--tds-blue-400);--tds-btn-primary-color-focus:var(--tds-white);--tds-btn-primary-border-color-focus:var(--tds-blue-600);--tds-btn-primary-outline-color-focus:var(--tds-blue-600);--tds-btn-primary-background-disabled-primary:var(--tds-grey-50);--tds-btn-primary-background-disabled-secondary:var(--tds-white);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-grey-400);--tds-btn-primary-border-color-disabled:transparent;--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-black);--tds-btn-secondary-border-color:var(--tds-black-48);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-black);--tds-btn-secondary-border-color-active:var(--tds-black-87);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-black);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:var(--tds-black-38);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:var(--tds-black-38);--tds-btn-secondary-border-color-disabled:var(--tds-black-38);--tds-btn-icon-secondary-color-focus:var(--tds-black);--tds-btn-icon-secondary-fill-focus:var(--tds-black);--tds-btn-icon-secondary-fill-active:var(--tds-grey-958);--tds-btn-icon-secondary-fill:var(--tds-grey-958);--tds-btn-icon-secondary-color:var(--tds-grey-958);--tds-btn-icon-secondary-fill-hover:var(--tds-grey-50);--tds-btn-icon-secondary-color-hover:var(--tds-grey-50);--tds-btn-icon-secondary-color-active:var(--tds-grey-958);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-black);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-black);--tds-btn-ghost-border-color-hover:var(--tds-black-48);--tds-btn-ghost-outline-color-hover:var(--tds-black-48);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-black);--tds-btn-ghost-border-color-active:var(--tds-black-87);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-black);--tds-btn-ghost-border-color-focus:var(--tds-blue-400);--tds-btn-ghost-outline-color-focus:var(--tds-blue-400);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:var(--tds-black-38);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-958);--tds-btn-icon-ghost-color:var(--tds-grey-958);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:var(--tds-red-700);--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-50);--tds-btn-danger-background-disabled-secondary:var(--tds-white);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:var(--tds-black-38);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-grey-50);--tds-btn-icon-danger-color:var(--tds-grey-50)}.sc-tds-button:root .tds-mode-variant-primary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.sc-tds-button:root .tds-mode-variant-secondary.sc-tds-button,.tds-mode-light.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}.tds-mode-dark.sc-tds-button{--tds-btn-primary-background:var(--tds-blue-400);--tds-btn-primary-background-hover:var(--tds-blue-500);--tds-btn-primary-background-active:var(--tds-blue-300);--tds-btn-primary-background-focus:var(--tds-blue-600);--tds-btn-primary-border-color-focus:var(--tds-blue-400);--tds-btn-primary-outline-color-focus:var(--tds-blue-400);--tds-btn-primary-background-disabled-primary:var(--tds-grey-900);--tds-btn-primary-background-disabled-secondary:var(--tds-grey-868);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary);--tds-btn-primary-color-disabled:var(--tds-white-38);--tds-btn-icon-primary-fill:var(--tds-grey-50);--tds-btn-icon-primary-color:var(--tds-grey-50);--tds-btn-secondary-background:transparent;--tds-btn-secondary-color:var(--tds-white);--tds-btn-secondary-border-color:var(--tds-white-48);--tds-btn-secondary-background-hover:var(--tds-blue-500);--tds-btn-secondary-color-hover:var(--tds-white);--tds-btn-secondary-border-color-hover:var(--tds-blue-500);--tds-btn-secondary-background-active:transparent;--tds-btn-secondary-color-active:var(--tds-white);--tds-btn-secondary-border-color-active:var(--tds-white-87);--tds-btn-secondary-background-focus:transparent;--tds-btn-secondary-color-focus:var(--tds-white);--tds-btn-secondary-border-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color-focus:var(--tds-blue-400);--tds-btn-secondary-outline-color:var(--tds-white);--tds-btn-secondary-background-disabled:transparent;--tds-btn-secondary-color-disabled:var(--tds-white-38);--tds-btn-secondary-border-color-disabled:var(--tds-white-38);--tds-btn-icon-secondary-color-focus:var(--tds-white);--tds-btn-icon-secondary-fill-focus:var(--tds-white);--tds-btn-icon-secondary-fill:var(--tds-grey-50);--tds-btn-icon-secondary-color:var(--tds-grey-50);--tds-btn-ghost-background:transparent;--tds-btn-ghost-color:var(--tds-white);--tds-btn-ghost-border-color:transparent;--tds-btn-ghost-background-hover:transparent;--tds-btn-ghost-color-hover:var(--tds-white);--tds-btn-ghost-border-color-hover:var(--tds-white-48);--tds-btn-ghost-outline-color-hover:var(--tds-white-48);--tds-btn-ghost-background-active:transparent;--tds-btn-ghost-color-active:var(--tds-white);--tds-btn-ghost-border-color-active:var(--tds-white-87);--tds-btn-ghost-background-focus:transparent;--tds-btn-ghost-color-focus:var(--tds-white);--tds-btn-ghost-border-color-focus:var(--tds-blue-300);--tds-btn-ghost-outline-color-focus:var(--tds-blue-300);--tds-btn-ghost-background-disabled:transparent;--tds-btn-ghost-color-disabled:var(--tds-white-38);--tds-btn-ghost-border-color-disabled:transparent;--tds-btn-icon-ghost-fill:var(--tds-grey-50);--tds-btn-icon-ghost-color:var(--tds-grey-50);--tds-btn-danger-background:var(--tds-negative);--tds-btn-danger-color:var(--tds-white);--tds-btn-danger-border-color:transparent;--tds-btn-danger-background-hover:var(--tds-red-600);--tds-btn-danger-color-hover:var(--tds-white);--tds-btn-danger-border-color-hover:transparent;--tds-btn-danger-background-active:var(--tds-red-700);--tds-btn-danger-color-active:var(--tds-white);--tds-btn-danger-border-color-active:transparent;--tds-btn-danger-background-focus:var(--tds-red-400);--tds-btn-danger-color-focus:var(--tds-white);--tds-btn-danger-border-color-focus:var(--tds-red-400);--tds-btn-danger-outline-color-focus:var(--tds-red-700);--tds-btn-danger-background-disabled-primary:var(--tds-grey-900);--tds-btn-danger-background-disabled-secondary:var(--tds-grey-868);--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-danger-color-disabled:var(--tds-white-38);--tds-btn-danger-border-color-disabled:transparent;--tds-btn-icon-danger-fill:var(--tds-white);--tds-btn-icon-danger-color:var(--tds-white)}.tds-mode-dark.sc-tds-button .tds-mode-variant-primary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-primary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-primary)}.tds-mode-dark.sc-tds-button .tds-mode-variant-secondary.sc-tds-button{--tds-btn-danger-background-disabled:var(--tds-btn-danger-background-disabled-secondary);--tds-btn-primary-background-disabled:var(--tds-btn-primary-background-disabled-secondary)}button.sc-tds-button{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--tds-spacing-element-20);border:1px solid}button.sc-tds-button *.sc-tds-button{box-sizing:border-box}button.sc-tds-button:disabled,button.disabled.sc-tds-button{cursor:unset}button.sc-tds-button:focus{outline:none}button.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.xs.sc-tds-button{padding:var(--tds-spacing-element-4) var(--tds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}button.xs.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.sm.sc-tds-button{padding:var(--tds-spacing-element-12);height:40px}button.sm.icon.sc-tds-button{padding:10px var(--tds-spacing-element-12)}button.sm.only-icon.sc-tds-button{padding:11px}button.sm.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.md.sc-tds-button{padding:var(--tds-spacing-element-16);height:48px}button.md.icon.sc-tds-button{padding:14px var(--tds-spacing-element-16)}button.md.only-icon.sc-tds-button{padding:13px}button.md.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.lg.sc-tds-button{padding:var(--tds-spacing-element-20);height:56px}button.lg.icon.sc-tds-button{padding:18px var(--tds-spacing-element-20)}button.lg.only-icon.sc-tds-button{padding:17px}button.lg.sc-tds-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button.fullbleed.sc-tds-button{width:inherit;display:flex;justify-content:center}button.primary.sc-tds-button{background:var(--tds-btn-primary-background);border-color:var(--tds-btn-primary-border-color);color:var(--tds-btn-primary-color);outline-color:var(--tds-btn-primary-outline-color)}button.primary.icon.sc-tds-button{fill:var(--tds-btn-icon-primary-fill);color:var(--tds-btn-icon-primary-fill);fill:var(--tds-btn-icon-primary-color);color:var(--tds-btn-icon-primary-color)}button.primary.sc-tds-button:hover{background:var(--tds-btn-primary-background-hover);border-color:var(--tds-btn-primary-border-color-hover);color:var(--tds-btn-primary-color-hover);outline-color:var(--tds-btn-primary-outline-color-hover)}button.primary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-hover);color:var(--tds-btn-icon-primary-fill-hover);fill:var(--tds-btn-icon-primary-color-hover);color:var(--tds-btn-icon-primary-color-hover)}button.primary.sc-tds-button:focus-visible{background:var(--tds-btn-primary-background-focus);border-color:var(--tds-btn-primary-border-color-focus);color:var(--tds-btn-primary-color-focus);outline-color:var(--tds-btn-primary-outline-color-focus)}button.primary:focus-visible.sc-tds-button-s>[slot=icon],button.primary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-focus);color:var(--tds-btn-icon-primary-fill-focus);fill:var(--tds-btn-icon-primary-color-focus);color:var(--tds-btn-icon-primary-color-focus)}button.primary.sc-tds-button:active,button.primary.active.sc-tds-button{background:var(--tds-btn-primary-background-active);border-color:var(--tds-btn-primary-border-color-active);color:var(--tds-btn-primary-color-active);outline-color:var(--tds-btn-primary-outline-color-active)}button.primary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.primary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-primary-fill-active);color:var(--tds-btn-icon-primary-fill-active);fill:var(--tds-btn-icon-primary-color-active);color:var(--tds-btn-icon-primary-color-active)}button.primary.disabled.sc-tds-button,button.primary.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-primary-outline-color-disabled)}button.secondary.sc-tds-button{background:var(--tds-btn-secondary-background);border-color:var(--tds-btn-secondary-border-color);color:var(--tds-btn-secondary-color);outline-color:var(--tds-btn-secondary-outline-color)}button.secondary.icon.sc-tds-button{fill:var(--tds-btn-icon-secondary-fill);color:var(--tds-btn-icon-secondary-fill);fill:var(--tds-btn-icon-secondary-color);color:var(--tds-btn-icon-secondary-color)}button.secondary.sc-tds-button:hover{background:var(--tds-btn-secondary-background-hover);border-color:var(--tds-btn-secondary-border-color-hover);color:var(--tds-btn-secondary-color-hover);outline-color:var(--tds-btn-secondary-outline-color-hover)}button.secondary:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-hover);color:var(--tds-btn-icon-secondary-fill-hover);fill:var(--tds-btn-icon-secondary-color-hover);color:var(--tds-btn-icon-secondary-color-hover)}button.secondary.sc-tds-button:focus-visible{background:var(--tds-btn-secondary-background-focus);border-color:var(--tds-btn-secondary-border-color-focus);color:var(--tds-btn-secondary-color-focus);outline-color:var(--tds-btn-secondary-outline-color-focus)}button.secondary:focus-visible.sc-tds-button-s>[slot=icon],button.secondary:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-focus);color:var(--tds-btn-icon-secondary-fill-focus);fill:var(--tds-btn-icon-secondary-color-focus);color:var(--tds-btn-icon-secondary-color-focus)}button.secondary.sc-tds-button:active,button.secondary.active.sc-tds-button{background:var(--tds-btn-secondary-background-active);border-color:var(--tds-btn-secondary-border-color-active);color:var(--tds-btn-secondary-color-active);outline-color:var(--tds-btn-secondary-outline-color-active)}button.secondary:active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled).sc-tds-button-s>[slot=icon],button.secondary.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-secondary-fill-active);color:var(--tds-btn-icon-secondary-fill-active);fill:var(--tds-btn-icon-secondary-color-active);color:var(--tds-btn-icon-secondary-color-active)}button.secondary.disabled.sc-tds-button,button.secondary.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-secondary-outline-color-disabled)}button.ghost.sc-tds-button{background:var(--tds-btn-ghost-background);border-color:var(--tds-btn-ghost-border-color);color:var(--tds-btn-ghost-color);outline-color:var(--tds-btn-ghost-outline-color)}button.ghost.icon.sc-tds-button{fill:var(--tds-btn-icon-ghost-fill);color:var(--tds-btn-icon-ghost-fill);fill:var(--tds-btn-icon-ghost-color);color:var(--tds-btn-icon-ghost-color)}button.ghost.sc-tds-button:hover{background:var(--tds-btn-ghost-background-hover);border-color:var(--tds-btn-ghost-border-color-hover);color:var(--tds-btn-ghost-color-hover);outline-color:var(--tds-btn-ghost-outline-color-hover)}button.ghost:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-hover);color:var(--tds-btn-icon-ghost-fill-hover);fill:var(--tds-btn-icon-ghost-color-hover);color:var(--tds-btn-icon-ghost-color-hover)}button.ghost.sc-tds-button:focus-visible{background:var(--tds-btn-ghost-background-focus);border-color:var(--tds-btn-ghost-border-color-focus);color:var(--tds-btn-ghost-color-focus);outline-color:var(--tds-btn-ghost-outline-color-focus)}button.ghost:focus-visible.sc-tds-button-s>[slot=icon],button.ghost:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-focus);color:var(--tds-btn-icon-ghost-fill-focus);fill:var(--tds-btn-icon-ghost-color-focus);color:var(--tds-btn-icon-ghost-color-focus)}button.ghost.sc-tds-button:active,button.ghost.active.sc-tds-button{background:var(--tds-btn-ghost-background-active);border-color:var(--tds-btn-ghost-border-color-active);color:var(--tds-btn-ghost-color-active);outline-color:var(--tds-btn-ghost-outline-color-active)}button.ghost:active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled).sc-tds-button-s>[slot=icon],button.ghost.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-ghost-fill-active);color:var(--tds-btn-icon-ghost-fill-active);fill:var(--tds-btn-icon-ghost-color-active);color:var(--tds-btn-icon-ghost-color-active)}button.ghost.disabled.sc-tds-button,button.ghost.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-ghost-outline-color-disabled)}button.danger.sc-tds-button{background:var(--tds-btn-danger-background);border-color:var(--tds-btn-danger-border-color);color:var(--tds-btn-danger-color);outline-color:var(--tds-btn-danger-outline-color)}button.danger.icon.sc-tds-button{fill:var(--tds-btn-icon-danger-fill);color:var(--tds-btn-icon-danger-fill);fill:var(--tds-btn-icon-danger-color);color:var(--tds-btn-icon-danger-color)}button.danger.sc-tds-button:hover{background:var(--tds-btn-danger-background-hover);border-color:var(--tds-btn-danger-border-color-hover);color:var(--tds-btn-danger-color-hover);outline-color:var(--tds-btn-danger-outline-color-hover)}button.danger:hover:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:hover:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-hover);color:var(--tds-btn-icon-danger-fill-hover);fill:var(--tds-btn-icon-danger-color-hover);color:var(--tds-btn-icon-danger-color-hover)}button.danger.sc-tds-button:focus-visible{background:var(--tds-btn-danger-background-focus);border-color:var(--tds-btn-danger-border-color-focus);color:var(--tds-btn-danger-color-focus);outline-color:var(--tds-btn-danger-outline-color-focus)}button.danger:focus-visible.sc-tds-button-s>[slot=icon],button.danger:focus-visible .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-focus);color:var(--tds-btn-icon-danger-fill-focus);fill:var(--tds-btn-icon-danger-color-focus);color:var(--tds-btn-icon-danger-color-focus)}button.danger.sc-tds-button:active,button.danger.active.sc-tds-button{background:var(--tds-btn-danger-background-active);border-color:var(--tds-btn-danger-border-color-active);color:var(--tds-btn-danger-color-active);outline-color:var(--tds-btn-danger-outline-color-active)}button.danger:active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger:active:not(.disabled) .sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled).sc-tds-button-s>[slot=icon],button.danger.active:not(.disabled) .sc-tds-button-s>[slot=icon]{fill:var(--tds-btn-icon-danger-fill-active);color:var(--tds-btn-icon-danger-fill-active);fill:var(--tds-btn-icon-danger-color-active);color:var(--tds-btn-icon-danger-color-active)}button.danger.disabled.sc-tds-button,button.danger.sc-tds-button:disabled{cursor:not-allowed;background:var(--tds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--tds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--tds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--tds-btn-danger-outline-color-disabled)}tds-button.sc-tds-button-h{display:inline-flex;align-items:center}.sc-tds-button-htds-button.sc-tds-button-s>[slot=icon],.sc-tds-button-htds-button .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}.sc-tds-button-htds-button .sm.sc-tds-button-s>[slot=icon],.sc-tds-button-htds-button .sm .sc-tds-button-s>[slot=icon]{width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button[disabled=true].sc-tds-button-h{pointer-events:none}.sc-tds-button-htds-button[disabled=true].sc-tds-button-s>[slot=icon],.sc-tds-button-htds-button[disabled=true] .sc-tds-button-s>[slot=icon]{pointer-events:none}tds-button[fullbleed].sc-tds-button-h{width:100%;justify-content:center}tds-button.sc-tds-button .sc-tds-button:not(.only-icon){display:inline-flex;align-items:center}tds-button :not(.only-icon).sm.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).sm .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-12);width:var(--tds-spacing-element-16);height:var(--tds-spacing-element-16)}tds-button :not(.only-icon).md.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).md .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-16);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}tds-button :not(.only-icon).lg.sc-tds-button-s>[slot=icon],tds-button :not(.only-icon).lg .sc-tds-button-s>[slot=icon]{margin-left:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);height:var(--tds-spacing-element-20)}";
+const TdsButtonStyle0 = buttonCss;
 
 const TdsButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsButton extends HTMLElement {
     constructor() {
@@ -22,7 +23,7 @@ const TdsButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsButton extends HTM
         if (!this.text && !hasLabelSlot) {
             this.onlyIcon = true;
         }
-        return (h(Host, { class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { type: this.type, disabled: this.disabled, class: {
+        return (h(Host, { key: 'f3e7039fbc6a6d319f4d051c04ae4cca4dd59294', class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { key: '497a7f684cf62d2c33975d04a40ed06a68e521e6', type: this.type, disabled: this.disabled, class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -38,7 +39,7 @@ const TdsButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsButton extends HTM
             } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { name: "label" }), hasIconSlot && h("slot", { name: "icon" }))));
     }
     get host() { return this; }
-    static get style() { return buttonCss; }
+    static get style() { return TdsButtonStyle0; }
 }, [6, "tds-button", {
         "text": [1],
         "type": [1],

package/dist/components/tds-card.js

@@ -4,6 +4,7 @@ import { h as hasSlot } from './hasSlot.js';
 import { d as defineCustomElement$2 } from './divider.js';
 
 const cardCss = ".card{box-sizing:border-box;box-shadow:var(--tds-card-box);background-color:var(--tds-card-background);display:block;border-radius:4px;overflow:hidden}.card *{box-sizing:border-box}.card.clickable:hover{box-shadow:var(--tds-card-box-hover);cursor:pointer}.card .card-header{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-header slot[name=thumbnail]::slotted(*){width:36px;height:36px;border-radius:100%;margin-right:16px}.card .card-header .card-top-header{padding-left:16px;display:flex;flex-direction:column}.card .card-header .card-top-header.no-header-img{padding-left:0}.card .card-header.below{padding-top:16px}.card .header-subheader{display:flex;flex-direction:column;gap:4px}.card .header-subheader .header,.card .header-subheader slot[name=header]{color:var(--tds-card-headline)}.card .header-subheader .subheader,.card .header-subheader slot[name=subheader]{color:var(--tds-card-sub-headline)}.card .card-body-img{width:100%}.card .tds-divider{margin:16px 16px 0;background-color:var(--tds-card-divider);height:1px}.card .card-body{display:block;word-wrap:break-word}.card slot[name=body]::slotted(*){font:var(--tds-detail-03) !important;letter-spacing:var(--tds-detail-03-ls) !important;color:var(--tds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px;max-width:336px}.card slot[name=actions]::slotted(*){display:flex;padding:16px;color:var(--tds-card-icon-color)}button{width:100%;border:none;text-align:left;padding:0}button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--tds-card-box-pressed)}";
+const TdsCardStyle0 = cardCss;
 
 const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends HTMLElement {
     constructor() {
@@ -39,14 +40,14 @@ const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends HTMLEle
         this.cardId = generateUniqueId();
     }
     render() {
-        return (h(Host, { class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}`, onClick: () => {
+        return (h(Host, { key: '9c5083535652428bb360891eea04a41bf49d1f01', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}`, onClick: () => {
                 if (this.clickable) {
                     this.handleClick();
                 }
             } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}` }, this.getCardContent()))));
     }
     get host() { return this; }
-    static get style() { return cardCss; }
+    static get style() { return TdsCardStyle0; }
 }, [1, "tds-card", {
         "modeVariant": [1, "mode-variant"],
         "imagePlacement": [1, "image-placement"],

package/dist/components/tds-chip.js

@@ -3,6 +3,7 @@ import { g as generateUniqueId } from './generateUniqueId.js';
 import { h as hasSlot } from './hasSlot.js';
 
 const chipCss = ".sc-tds-chip-s>*{display:inline-flex;align-items:center}.sc-tds-chip-h.sc-tds-chip-s>[slot=label],.sc-tds-chip-h .sc-tds-chip-s>[slot=label]{padding-top:2px}.component.sc-tds-chip .tds-chip-component.sc-tds-chip{display:inline-flex}.component.sc-tds-chip .tds-chip-component.sc-tds-chip label.sc-tds-chip{background-color:var(--tds-chips-background);color:var(--tds-chips-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:inline-flex;align-items:center;border-radius:16px;cursor:pointer;white-space:nowrap}.component.sc-tds-chip .tds-chip-component.sc-tds-chip label.sc-tds-chip:hover{background-color:var(--tds-chips-background-hover)}.component.sc-tds-chip .tds-chip-component.lg.sc-tds-chip label.sc-tds-chip{height:32px;padding:0 16px;gap:8px}.component.sc-tds-chip .tds-chip-component.sm.sc-tds-chip label.sc-tds-chip{height:24px;padding:0 12px;gap:6px}.component.sc-tds-chip .tds-chip-component.sm.prefix.sc-tds-chip label.sc-tds-chip{padding:0 12px 0 6px}.component.sc-tds-chip .tds-chip-component.sm.suffix.sc-tds-chip label.sc-tds-chip{padding:0 6px 0 12px}.component.sc-tds-chip .tds-chip-component.lg.prefix.sc-tds-chip label.sc-tds-chip{padding:0 16px 0 8px}.component.sc-tds-chip .tds-chip-component.lg.suffix.sc-tds-chip label.sc-tds-chip{padding:0 8px 0 16px}.component.sc-tds-chip .tds-chip-component.lg.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:0 8px}.component.sc-tds-chip .tds-chip-component.sm.prefix.suffix.sc-tds-chip label.sc-tds-chip{padding:0 6px}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip{opacity:0;position:absolute;z-index:-1}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:focus-visible+label.sc-tds-chip{outline:2px solid var(--tds-blue-400);outline-offset:-2px;background-color:var(--tds-chips-background-focus)}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip{background-color:var(--tds-chips-background-active);color:var(--tds-chips-color-active)}.component.sc-tds-chip .tds-chip-component.sc-tds-chip input.sc-tds-chip:checked+label.sc-tds-chip:hover{background-color:var(--tds-chips-background-active-hover)}";
+const TdsChipStyle0 = chipCss;
 
 const TdsChip$1 = /*@__PURE__*/ proxyCustomElement(class TdsChip extends HTMLElement {
     constructor() {
@@ -58,16 +59,16 @@ const TdsChip$1 = /*@__PURE__*/ proxyCustomElement(class TdsChip extends HTMLEle
         const hasPrefixSlot = hasSlot('prefix', this.host);
         const hasLabelSlot = hasSlot('label', this.host);
         const hasSuffixSlot = hasSlot('suffix', this.host);
-        return (h(Host, null, h("div", { class: "component" }, h("div", { class: {
+        return (h(Host, { key: '9bbcbc750f70b6644985fab7c3e480d626c77e02' }, h("div", { key: '37633a4897ae7a657e65474a4aa1525ec1d3ee85', class: "component" }, h("div", { key: '89239d3f8f0e215f91154927b65ae054eacfcbd2', class: {
                 'tds-chip-component': true,
                 'sm': this.size === 'sm',
                 'lg': this.size === 'lg',
                 'prefix': hasPrefixSlot,
                 'suffix': hasSuffixSlot,
-            } }, h("input", Object.assign({ type: this.type, id: this.chipId }, inputAttributes)), h("label", { onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { name: "prefix" }), hasLabelSlot && h("slot", { name: "label" }), hasSuffixSlot && h("slot", { name: "suffix" }))))));
+            } }, h("input", Object.assign({ key: '09f4aa0094cababe19a96e1a3c33d96d75bb97fc', type: this.type, id: this.chipId }, inputAttributes)), h("label", { key: '2a45508bf2ae0dcf28d02d049815022154c17cb0', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { name: "prefix" }), hasLabelSlot && h("slot", { name: "label" }), hasSuffixSlot && h("slot", { name: "suffix" }))))));
     }
     get host() { return this; }
-    static get style() { return chipCss; }
+    static get style() { return TdsChipStyle0; }
 }, [6, "tds-chip", {
         "type": [1],
         "size": [1],

package/dist/components/tds-datetime.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { d as defineCustomElement$2 } from './icon.js';
 
 const datetimeCss = ".tds-datetime-input[type=datetime-local].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-md[type=datetime-local].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-sm[type=datetime-local].sc-tds-datetime~.icon-time.sc-tds-datetime{display:none}.tds-datetime-input[type=date].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-md[type=date].sc-tds-datetime~.icon-time.sc-tds-datetime,.tds-datetime-input-sm[type=date].sc-tds-datetime~.icon-time.sc-tds-datetime{display:none}.tds-datetime-input[type=time].sc-tds-datetime~.icon-datetime-local.sc-tds-datetime,.tds-datetime-input-md[type=time].sc-tds-datetime~.icon-datetime-local.sc-tds-datetime,.tds-datetime-input-sm[type=time].sc-tds-datetime~.icon-datetime-local.sc-tds-datetime{display:none}.tds-datetime-input.sc-tds-datetime{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-datetime-color);background-color:var(--tds-datetime-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.tds-datetime-input.sc-tds-datetime *.sc-tds-datetime{box-sizing:border-box}.tds-datetime-input.sc-tds-datetime::placeholder{opacity:1;color:var(--tds-datetime-placeholder)}.tds-datetime-input.sc-tds-datetime:focus::placeholder{color:var(--tds-datetime-placeholder-color-focus)}.tds-datetime-input.sc-tds-datetime:disabled{background-color:var(--tds-datetime-background-disabled);color:var(--tds-datetime-color-disabled);cursor:not-allowed}.tds-datetime-input.sc-tds-datetime:disabled::placeholder{color:var(--tds-datetime-placeholder-disabled)}.tds-datetime-input.sc-tds-datetime:disabled~.tds-datetime-label-inside.sc-tds-datetime{color:var(--tds-datetime-label-disabled)}.tds-datetime-input-md.sc-tds-datetime{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-datetime-color);background-color:var(--tds-datetime-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.tds-datetime-input-md.sc-tds-datetime *.sc-tds-datetime{box-sizing:border-box}.tds-datetime-input-md.sc-tds-datetime::placeholder{opacity:1;color:var(--tds-datetime-placeholder)}.tds-datetime-input-md.sc-tds-datetime:focus::placeholder{color:var(--tds-datetime-placeholder-color-focus)}.tds-datetime-input-md.sc-tds-datetime:disabled{background-color:var(--tds-datetime-background-disabled);color:var(--tds-datetime-color-disabled);cursor:not-allowed}.tds-datetime-input-md.sc-tds-datetime:disabled::placeholder{color:var(--tds-datetime-placeholder-disabled)}.tds-datetime-input-md.sc-tds-datetime:disabled~.tds-datetime-label-inside.sc-tds-datetime{color:var(--tds-datetime-label-disabled)}.tds-datetime-input-sm.sc-tds-datetime{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-datetime-color);background-color:var(--tds-datetime-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.tds-datetime-input-sm.sc-tds-datetime *.sc-tds-datetime{box-sizing:border-box}.tds-datetime-input-sm.sc-tds-datetime::placeholder{opacity:1;color:var(--tds-datetime-placeholder)}.tds-datetime-input-sm.sc-tds-datetime:focus::placeholder{color:var(--tds-datetime-placeholder-color-focus)}.tds-datetime-input-sm.sc-tds-datetime:disabled{background-color:var(--tds-datetime-background-disabled);color:var(--tds-datetime-color-disabled);cursor:not-allowed}.tds-datetime-input-sm.sc-tds-datetime:disabled::placeholder{color:var(--tds-datetime-placeholder-disabled)}.tds-datetime-input-sm.sc-tds-datetime:disabled~.tds-datetime-label-inside.sc-tds-datetime{color:var(--tds-datetime-label-disabled)}.tds-datetime-container.sc-tds-datetime{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-datetime-background);border-bottom:1px solid var(--tds-datetime-border-bottom);transition:border-bottom-color 200ms ease}.tds-datetime-container.sc-tds-datetime:hover{border-bottom-color:var(--tds-datetime-border-bottom-hover)}.tds-form-datetime-md.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{height:48px}.tds-form-datetime-sm.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{height:40px}.tds-datetime-input-container.sc-tds-datetime{position:relative;width:100%}.tds-datetime-input-container.sc-tds-datetime .datetime-icon.sc-tds-datetime{height:20px;width:20px;position:absolute;top:50%;transform:translateY(-50%);right:18px;pointer-events:none;color:var(--tds-datetime-icon)}.tds-datetime-label.sc-tds-datetime{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-datetime-label-color)}.tds-datetime-label-inside.sc-tds-datetime{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-datetime-label-inside-color);left:16px}.tds-form-datetime.sc-tds-datetime{display:block;min-width:208px;background:unset}.tds-form-datetime-nomin.sc-tds-datetime{min-width:auto}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{top:20px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime::placeholder{color:transparent}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime .sc-tds-datetime::placeholder{color:transparent}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input.sc-tds-datetime:focus::placeholder{transition:color 0.35s ease;color:var(--tds-datetime-placeholder-color-focus)}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{top:16px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime::placeholder{color:transparent}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime .sc-tds-datetime::placeholder{color:transparent}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime:focus::placeholder{transition:color 0.35s ease;color:var(--tds-datetime-placeholder-color-focus)}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{top:16px}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime::placeholder{color:transparent}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime .sc-tds-datetime::placeholder{color:transparent}.tds-form-datetime.tds-datetime-container-label-inside.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime:focus::placeholder{transition:color 0.35s ease;color:var(--tds-datetime-placeholder-color-focus)}.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-focus.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime,.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-data.sc-tds-datetime .tds-datetime-input-sm.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-focus.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime,.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-data.sc-tds-datetime .tds-datetime-input-md.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-focus.sc-tds-datetime .tds-datetime-input.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime,.tds-form-datetime.tds-datetime-container-label-inside.tds-datetime-data.sc-tds-datetime .tds-datetime-input.sc-tds-datetime~.tds-datetime-label-inside.sc-tds-datetime{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.tds-datetime-bar.sc-tds-datetime{position:absolute;width:100%}.tds-datetime-bar.sc-tds-datetime::before,.tds-datetime-bar.sc-tds-datetime::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--tds-datetime-bar);transition:0.35s ease all}.tds-form-datetime-md.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::before,.tds-form-datetime-md.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::after{top:46px}.tds-form-datetime-sm.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::before,.tds-form-datetime-sm.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::after{top:40px}.tds-datetime-bar.sc-tds-datetime::before{left:50%}.tds-datetime-bar.sc-tds-datetime::after{right:50%}.tds-datetime-focus.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::before,.tds-datetime-focus.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::after{width:50%}.tds-datetime-helper.sc-tds-datetime{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-datetime-helper)}.tds-datetime-helper.sc-tds-datetime .tds-helper.sc-tds-datetime{display:inline-flex;gap:8px}.tds-form-datetime-disabled.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{border-bottom-color:transparent}.tds-form-datetime-disabled.sc-tds-datetime .datetime-icon.sc-tds-datetime tds-icon.sc-tds-datetime{color:var(--tds-datetime-icon-disabled)}.tds-form-datetime-disabled.sc-tds-datetime .tds-datetime-label.sc-tds-datetime{color:var(--tds-datetime-label-disabled);cursor:not-allowed}.tds-form-datetime-success.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{border-bottom-color:var(--tds-datetime-border-bottom-success);color:var(--tds-datetime-color-success)}.tds-form-datetime-success.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::before,.tds-form-datetime-success.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::after{background:var(--tds-datetime-bar-sucess)}.tds-form-datetime-error.sc-tds-datetime .tds-datetime-helper.sc-tds-datetime{color:var(--tds-datetime-helper-error)}.tds-form-datetime-error.sc-tds-datetime .tds-datetime-container.sc-tds-datetime{border-bottom-color:var(--tds-datetime-border-bottom-error)}.tds-form-datetime-error.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::before,.tds-form-datetime-error.sc-tds-datetime .tds-datetime-bar.sc-tds-datetime::after{background:var(--tds-datetime-bar-error)}.tds-form-datetime-error.sc-tds-datetime .datetime-icon.sc-tds-datetime tds-icon.sc-tds-datetime{color:var(--tds-datetime-icon-error)}.tds-datetime-textcounter.sc-tds-datetime{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-datetime-textcounter);float:right}.tds-datetime-textcounter.sc-tds-datetime .tds-datetime-textcounter-divider.sc-tds-datetime{letter-spacing:var(--tds-detail-05-ls);color:var(--tds-datetime-textcounter-divider)}input[type=datetime-local].sc-tds-datetime::-webkit-inner-spin-button,input[type=datetime-local].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}input[type=date].sc-tds-datetime::-webkit-inner-spin-button,input[type=date].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}input[type=time].sc-tds-datetime::-webkit-inner-spin-button,input[type=time].sc-tds-datetime::-webkit-calendar-picker-indicator{opacity:0}";
+const TdsDatetimeStyle0 = datetimeCss;
 
 const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends HTMLElement {
     constructor() {
@@ -10,6 +11,7 @@ const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends
         this.tdsChange = createEvent(this, "tdsChange", 6);
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.tdsFocus = createEvent(this, "tdsFocus", 6);
+        this.tdsInput = createEvent(this, "tdsInput", 6);
         this.getDefaultValue = () => {
             const dateTimeObj = {
                 year: this.defaultValue.slice(0, 4),
@@ -45,6 +47,10 @@ const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends
         this.helper = '';
         this.focusInput = undefined;
     }
+    /** Method that sets the value of the datetime element */
+    async setValue(newValue) {
+        this.value = newValue;
+    }
     componentWillLoad() {
         if (this.defaultValue !== 'none') {
             this.value = this.getDefaultValue();
@@ -61,7 +67,7 @@ const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends
     // Data input event in value prop
     handleInput(e) {
         this.value = e.target.value;
-        this.tdsChange.emit(e);
+        this.tdsInput.emit(e);
     }
     // Change event isn't a composed:true by default in for input
     handleChange(e) {
@@ -85,7 +91,7 @@ const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends
         if (this.size === 'sm') {
             className += `${className}-sm`;
         }
-        return (h("div", { class: `
+        return (h("div", { key: '9b718024979e3b9832c8ca0ff06d7323f843aeea', class: `
         ${this.noMinWidth ? 'tds-form-datetime-nomin' : ''}
         ${this.focusInput ? 'tds-form-datetime tds-datetime-focus' : ' tds-form-datetime'}
         ${this.value.length > 0 ? 'tds-datetime-data' : ''}
@@ -95,12 +101,12 @@ const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends
         ${this.state === 'error' || this.state === 'success'
                 ? `tds-form-datetime-${this.state}`
                 : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { class: "tds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("tds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("tds-icon", { size: "20px", name: "clock" }))), h("div", { class: "tds-datetime-bar" })), this.helper && (h("div", { class: "tds-datetime-helper" }, h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: 'dcee80da3ff4538aa1a0437643ce91b07c46d968', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '61ccbe13370a32ff54380ba8704d0044f1b2c904', class: "tds-datetime-input-container" }, h("input", { key: '78268cb880af401218303b65bce2d0c761de640f', ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { key: 'e161409fd2ea7f3f1da695b87062580275d94afb', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: 'bb439960caf01ce31eba02f78669965392f65c19', size: "20px", name: "calendar" })), h("div", { key: 'c8967bc660ac4d1cf724cf6bf6651d2756041756', class: "datetime-icon icon-time" }, h("tds-icon", { key: '27cbb876130856fbada4602c4c783580aa7d95b9', size: "20px", name: "clock" }))), h("div", { key: '0309a22195d629a5e1b551f4e848dbc37596b647', class: "tds-datetime-bar" })), this.helper && (h("div", { class: "tds-datetime-helper" }, h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
     }
-    static get style() { return datetimeCss; }
+    static get style() { return TdsDatetimeStyle0; }
 }, [2, "tds-datetime", {
         "type": [513],
-        "value": [513],
+        "value": [1537],
         "min": [1],
         "max": [1],
         "defaultValue": [1, "default-value"],
@@ -113,7 +119,8 @@ const TdsDatetime$1 = /*@__PURE__*/ proxyCustomElement(class TdsDatetime extends
         "autofocus": [4],
         "label": [1],
         "helper": [1],
-        "focusInput": [32]
+        "focusInput": [32],
+        "setValue": [64]
     }, [[0, "focus", "handleFocusIn"], [0, "focusout", "handleFocusOut"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-dropdown-option.js

@@ -3,6 +3,7 @@ import { d as defineCustomElement$3 } from './checkbox.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option:hover{background-color:var(--tds-dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--tds-dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";
+const TdsDropdownOptionStyle0 = dropdownOptionCss;
 
 const TdsDropdownOption$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOption extends HTMLElement {
     constructor() {
@@ -70,7 +71,7 @@ const TdsDropdownOption$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOp
         this.selected = selected;
     }
     render() {
-        return (h(Host, { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { class: `dropdown-option 
+        return (h(Host, { key: '1f5f9d34955f65caa0ba5ec261368fa20277fc8f', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'ccab6344954996ec23558a2e39826008873d2827', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -88,7 +89,7 @@ const TdsDropdownOption$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOp
     }
     static get delegatesFocus() { return true; }
     get host() { return this; }
-    static get style() { return dropdownOptionCss; }
+    static get style() { return TdsDropdownOptionStyle0; }
 }, [17, "tds-dropdown-option", {
         "value": [1],
         "disabled": [4],