@scania/tegel 1.33.0 → 1.34.0-internal-variables-demo.0

package/dist/esm/tds-side-menu.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
 
-const sideMenuCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}: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;box-sizing:border-box}: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:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}aside .tds-side-menu-wrapper::-webkit-scrollbar{width:var(--tds-scrollbar-width)}aside .tds-side-menu-wrapper::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}aside .tds-side-menu-wrapper::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){aside .tds-side-menu-wrapper{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}aside [role=navigation]{height:100%;display:flex;flex-direction:column}aside li{list-style:none;padding:0;margin:0}";
+const sideMenuCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}: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(--side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--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 .tds-side-menu-list li{display:flex;flex-direction:column;gap:var(--side-menu-space-top-level-vertical-gap-padding)}: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(--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(--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:calc(var(--side-menu-collapsed-button-size) + 1px);box-sizing:border-box}:host(.menu-persistent):host(.menu-collapsed) .menu{width:var(--side-menu-collapsed-button-size)}: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{background-color:var(--side-menu-background-cover)}aside .tds-side-menu-wrapper{padding:0 var(--side-menu-space-top-level-left);padding-top:var(--component-side-menu-space-top-level-top);display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;overflow-y:auto}aside .tds-side-menu-wrapper:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--color-foreground-icon-discrete);background-clip:padding-box}aside .tds-side-menu-wrapper::-webkit-scrollbar{width:var(--tds-scrollbar-width)}aside .tds-side-menu-wrapper::-webkit-scrollbar-track{background:var(--color-background-layer-01)}aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb{border-radius:40px;background:var(--color-foreground-icon-discrete);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}aside .tds-side-menu-wrapper::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){aside .tds-side-menu-wrapper{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}aside [role=navigation]{height:100%;display:flex;flex-direction:column}aside li{list-style:none;padding:0;margin:0}";
 const TdsSideMenuStyle0 = sideMenuCss;
 
 const GRID_LG_BREAKPOINT = 992;

package/dist/esm/tds-slider.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-51d04e39.js';
 import { g as generateUniqueId } from './generateUniqueId-7934d315.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 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider-wrapper:focus-within{outline:2px solid var(--tds-blue-400);outline-offset:2px;border-radius:var(--tds-spacing-element-4)}.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;cursor:pointer}.tds-slider .tds-slider__track::after{content:\"\";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.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 .tds-slider__track .tds-slider__thumb{z-index:1}.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{cursor:not-allowed}.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 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 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}tds-slider .slider-primary .tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--slider-inputfield-background)}tds-slider .slider-secondary .tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--slider-inputfield-background-secondary)}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider-wrapper.slider-success .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{box-shadow:var(--slider-input-field-box-shadow-success);color:var(--slider-input-success-text)}.tds-slider-wrapper.slider-success .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:var(--slider-input-field-box-shadow-success)}.tds-slider-wrapper:focus-within{border-radius:var(--tds-spacing-element-4);outline:2px solid var(--tds-blue-400);outline-offset:2px}.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{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform);color:var(--slider-input-value);padding:18px;user-select:none}.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(--slider-inputfield-background);border-radius:var(--slider-border-radius);display:flex;align-items:center;justify-content:center}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform);border-left:1px solid var(--slider-border-left);border-right:1px solid var(--slider-border-right);border-bottom:1px solid var(--slider-border-bottom);border-top:1px solid var(--slider-border-top);border-radius:var(--slider-border-radius);box-shadow:var(--slider-input-field-box-shadow);color:var(--slider-input-inputfield);border:0;background-color:transparent;text-align:center;padding:12px;transition:box-shadow 200ms ease}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:var(--slider-input-field-box-shadow-hover)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:var(--slider-input-field-box-shadow-focus);outline:var(--slider-border-outline)}.tds-slider label{font-family:var(--detail-05-font-family);font-size:var(--detail-05-font-size);line-height:var(--detail-05-line-height);font-weight:var(--detail-05-font-weight);letter-spacing:var(--detail-05-letter-spacing);text-transform:var(--detail-05-text-transform);color:var(--slider-label);user-select:none;position:absolute;padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font-family:var(--detail-01-font-family);font-size:var(--detail-01-font-size);line-height:var(--detail-01-line-height);font-weight:var(--detail-01-font-weight);letter-spacing:var(--detail-01-letter-spacing);text-transform:var(--detail-01-text-transform);background-color:var(--slider-value-tooltip-background);color:var(--slider-value-tooltip);z-index:2;user-select:none;border-radius:4px;padding:8px 11px;position:absolute;transform:translate(-50%, -100%);top:-24px}.tds-slider .tds-slider__value svg{color:var(--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{background-color:var(--slider-thumb);width:20px;height:20px;border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{background-color:var(--slider-thumb);content:\" \";display:none;width:48px;height:48px;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{background-color:var(--slider-divider);color:var(--slider-divider-values);transform:translateY(-50%);height:16px;width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{font-family:var(--detail-05-font-family);font-size:var(--detail-05-font-size);line-height:var(--detail-05-line-height);font-weight:var(--detail-05-font-weight);letter-spacing:var(--detail-05-letter-spacing);text-transform:var(--detail-05-text-transform);letter-spacing:var(--tds-detail-05-ls);display:block;user-select:none;color:var(-tds-grey-700);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{background-color:var(--slider-track);width:100%;height:2px;border-radius:1px;position:relative;cursor:pointer}.tds-slider .tds-slider__track::after{content:\"\";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.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(--slider-track-fill);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider .tds-slider__track .tds-slider__thumb{z-index:1}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--slider-disabled-text)}.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(--slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--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(--slider-disabled);pointer-events:none;box-shadow:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--slider-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--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(--slider-controls)}.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(--slider-disabled)}";
 const TdsSliderStyle0 = sliderCss;
 
 const TdsSlider = class {
@@ -34,6 +34,8 @@ const TdsSlider = class {
         this.value = '0';
         this.min = '0';
         this.max = '100';
+        this.state = 'default';
+        this.modeVariant = null;
         this.ticks = '0';
         this.showTickNumbers = false;
         this.tooltip = false;
@@ -406,30 +408,34 @@ const TdsSlider = class {
     }
     render() {
         const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (h("div", { key: 'b4dd7706df0be052f0028a5f8ba6b6158f403b13', class: {
+        return (h("div", { key: 'bd4183c7e9ab8598f2f1e00ff7d6d395847400d5', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: '672c2aaa6dfee6489cd5e764ef151728c2af10fc', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '8c7200436a9ef6524a3b2d554a2556bda8cc6afd', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+                'slider-default': this.state === 'default',
+                'slider-success': this.state === 'success',
+                'slider-primary': this.modeVariant === 'primary',
+                'slider-secondary': this.modeVariant === 'secondary',
+            } }, h("input", { key: '26336c8cae0fa98a4afd3971c85d606bc19ef1d8', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '81b4037332a2cd014499aab8e0a736f6b29466ad', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), h("div", { key: '1ce8e7ddccd19ca15733683768900c8fcde514d3', class: {
+            } }), h("div", { key: '45076b1377c6ed50ca30bb54ea6813e0bbe86823', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '54616f1cb5e4c13541f6f5fa700ddf4b1c4a9493', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'f6b8283409e9fb74ebf5fe89af5d88c29fde904d', class: "tds-slider__input-values" }, h("div", { key: '30532947c70dc8e0612fea3c01c25a5e86dacfca', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '6c001b8caba4a396bb9f4f4f3ba7b9ee6ca36f84', class: "tds-slider__controls" }, h("div", { key: '7a5804b789f84a4cd749c21d0ecc4b73bf7bae09', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '41db4dc1a8fda4972303fd48400078035648ca5c', name: "minus", size: "16px" })))), h("div", { key: 'f3cb2039ec4245b1d5c58bb819675381c4490197', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '38bf8ca015894f3a42a0e9e33800cc7f0ff9c8d5', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '6a5aaa5d652d55f23db24b1b531664d125fc2a23', 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: '0c99475a8bdb1fdec04358421ec34630111a63b8', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '986444a64e1254c9fe7e48d92439dfbf68e1cd9c', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '78958c70f9f18a68e5a652cab122ce69390a7638', class: "tds-slider__input-values" }, h("div", { key: '7488b615ae3f989e89819418e95a0e50f6870f39', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'b13a12af4fa8b1256bff7df615f870295604fcb8', class: "tds-slider__controls" }, h("div", { key: '6d8f516d30ef263971969b2034d132e47254e7a8', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '29be5d68dc58887ca806d2e871e21abd49f8bc6b', name: "minus", size: "16px" })))), h("div", { key: '2082aa0ebf30e5e32c9d5f2dcfc092cf51f486f7', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '78894f9a5ec898237bad37507ceb0e719829e835', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '28b5650b22efe479753a15585266daba70e8fe99', 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: '4c3345c0729d8b2fc8dc41d7d341649a3456e431', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
             }, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
                 if (this.thumbElement) {
                     this.thumbElement.focus();
                 }
-            } }, h("div", { key: 'd3ece50db5fbc17e4ebbf4272faa17fcf201dccf', class: "tds-slider__track-fill", ref: (el) => {
+            } }, h("div", { key: '93c0ab45f73c0c2ee8dbdaf75dcc0b36a5d8c5e6', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: 'c304176e6a240820418d80aa8bfad35fbbdaf0f4', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: '0ad854c25663ba050dc1aedb737a209d43046e50', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: '7c46c4f8b3cc3bf3aeae7c841a2f38e7b3d1dfbb', class: "tds-slider__value" }, this.value, h("svg", { key: '871a05a8fc1560c8e94071172c57563d63e10f22', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0c99295a2049b3aac5d0472880e63acc4318fa07', 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: 'bf42f5b512d3041a88bd8cc420a5a4aaeb875e49', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: 'b80b3f6e542820507f5b75cc458475ded9f3d917', class: "tds-slider__value" }, this.value, h("svg", { key: 'e3144dc00d812cb4ea7c2b1be1ac5e79e70d9022', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '940b3dc10755cb6b66d793e1fe03201a4661dbfd', 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: 'a6da99482099afd5b4a36f51e43cd83184a80e4f', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '9a1ed941f13b84e738500921b12aeb21ace2464c', class: "tds-slider__input-values" }, h("div", { key: '2bdf5b0fb2687075b2fc12ce931859d2f26a0685', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '480825ddccd550527ac18f046c6a8ce26baaba87', class: "tds-slider__input-field-wrapper" }, h("input", { key: '94a1446990ea0ae3955e8db9f0119e4a0ec71970', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, "aria-label": this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max, step: this.step })))), this.useControls && (h("div", { key: 'b7415e621df023ffe0eca844d9970454d01c72ce', class: "tds-slider__controls" }, h("div", { key: '044a984a7212d56f8c1bcb5709608d90677d7647', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '0b6410f7fb4af32681c3f49f29c9696e871bfd5a', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: 'c80e10049d55a5457ddbfdbccc107e26a48d44b1', class: "tds-slider__input-values" }, h("div", { key: '31892d55b7ffb5db331bbb273ff9ade5ff5ce187', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '5cfd66b7016d413a52b884d61ba585e25e6d8e53', class: "tds-slider__input-field-wrapper" }, h("input", { key: '0110bd5e6bf77baf28e621145fa4b683b488ee62', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, "aria-label": this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max, step: this.step })))), this.useControls && (h("div", { key: 'b4acf1abc7c3ec847e385ce3e71c396975efbbc0', class: "tds-slider__controls" }, h("div", { key: '41d053f1471824dc3e6acdd143dc15a3b29dcb62', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '9f78191d97f05e5e3ee1dc10243beb5435671116', name: "plus", size: "16px" })))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/tds-spinner.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
 
-const spinnerCss = ":root{--spinner-background-inverted:var(--tds-white)}:root,.scania,.scania .tds-mode-light{--spinner-background:var(--tds-blue-400)}.scania .tds-mode-dark{--spinner-background:var(--tds-blue-400)}.traton,.traton .tds-mode-light{--spinner-background:rgba(0, 72, 82, 1)}.traton .tds-mode-dark{--spinner-background:rgba(194, 191, 182, 1)}:root{--spinner-speed:1.8s;--spinner-speed-lg:2s;--spinner-radius-xs:8px;--spinner-radius-sm:12px;--spinner-radius-md:26px;--spinner-radius-lg:42px;--spinner-radius:var(--spinner-radius-lg);--spinner-stroke-width-xs:3px;--spinner-stroke-width-sm:4px;--spinner-stroke-width-md:6px;--spinner-stroke-width-lg:8px;--spinner-stroke-width:var(--spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-spinner-svg{display:block;width:calc(var(--spinner-radius) * 2);height:calc(var(--spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.tds-spinner-svg-xs{--spinner-radius:var(--spinner-radius-xs);--spinner-stroke-width:var(--spinner-stroke-width-xs);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-sm{--spinner-radius:var(--spinner-radius-sm);--spinner-stroke-width:var(--spinner-stroke-width-sm);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-md{--spinner-radius:var(--spinner-radius-md);--spinner-stroke-width:var(--spinner-stroke-width-md);--spinner-animation-speed:var(--spinner-speed)}.tds-spinner-svg-lg{--spinner-radius:var(--spinner-radius-lg);--spinner-stroke-width:var(--spinner-stroke-width-lg);--spinner-animation-speed:var(--spinner-speed-lg)}.tds-spinner-circle{cx:var(--spinner-radius);cy:var(--spinner-radius);r:calc(var(--spinner-radius) - var(--spinner-stroke-width) / 2);fill:none;--spinner-stroke-dash:calc((2 * var(--PI)) * var(--spinner-radius));stroke-dasharray:var(--spinner-stroke-dash);stroke-width:var(--spinner-stroke-width);animation:dash var(--spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.tds-spinner-circle-standard{stroke:var(--spinner-background)}.tds-spinner-circle-inverted{stroke:var(--spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--spinner-stroke-dash))}to{stroke-dashoffset:var(--spinner-stroke-dash)}}";
+const spinnerCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-spinner-svg{--radius:var(--radius-lg);--stroke-width:var(--stroke-width-lg);--animation-speed:var(--speed-lg);--PI:3.14159265358979;display:block;width:calc(var(--radius) * 2);height:calc(var(--radius) * 2);transform:scale(-1, 1) rotate(-90deg);}.tds-spinner-svg-xs{--radius:8px;--stroke-width:3px;--animation-speed:1.8s}.tds-spinner-svg-sm{--radius:12px;--stroke-width:4px;--animation-speed:1.8s}.tds-spinner-svg-md{--radius:26px;--stroke-width:6px;--animation-speed:1.8s}.tds-spinner-svg-lg{--radius:42px;--stroke-width:8px;--animation-speed:2s}.tds-spinner-circle{animation:dash var(--animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;cx:var(--radius);cy:var(--radius);r:calc(var(--radius) - var(--stroke-width) / 2);fill:none;--stroke-dash:calc((2 * var(--PI)) * var(--radius));stroke-dasharray:var(--stroke-dash);stroke-width:var(--stroke-width);}.tds-spinner-circle-standard{stroke:var(--spinner-background)}.tds-spinner-circle-inverted{stroke:var(--spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--stroke-dash))}to{stroke-dashoffset:var(--stroke-dash)}}";
 const TdsSpinnerStyle0 = spinnerCss;
 
 const TdsSpinner = class {
@@ -10,7 +10,7 @@ const TdsSpinner = class {
         this.variant = 'standard';
     }
     render() {
-        return (h("div", { key: 'de6aa9263fc0e7189002156e7e0f24b58a615149', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: '40d43902392034b39f7497369ade14caf6259385', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'ef94a92d9b0fe8cbf468a6dbce51ab19de071e43', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+        return (h(Host, { key: '258284f4a0e66ef317ebf68f1e84535bf4525b2f', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: '4c5543d50a45c97f658d9328df8ed957d1e074c9', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: 'ccf4e40860c20df27d693e2c613a965278ac1d6c', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
     }
 };
 TdsSpinner.style = TdsSpinnerStyle0;

package/dist/esm/tds-step.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
 
-const stepCss = ":host{position:relative;display:table-cell}: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 .content-container tds-icon{vertical-align:bottom}:host [role=listitem].lg .content-container .index-container{vertical-align:sub}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);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-divider-line);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-divider-line);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 .index-container{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm .tds-step-icon{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;margin-top:-2px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);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-divider-line);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-divider-line);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-divider-line);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);text-align:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-stepper-icon-step-border-color-warning);color:var(--tds-stepper-icon-step-border-color-warning)}:host [role=listitem] .content-container.success{background-color:var(--tds-stepper-icon-step-border-color-success);border-color:var(--tds-stepper-icon-step-border-color-success);color:var(--tds-white)}:host [role=listitem] .content-container.current{background-color:var(--tds-stepper-background);color:var(--tds-stepper-color)}: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)}: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-of-type) [role=listitem].horizontal{padding-right:0}:host(:last-of-type) [role=listitem].sm::after,:host(:last-of-type) [role=listitem].lg::after{display:none}:host(:last-of-type) [role=listitem].sm.vertical::before{display:none}:host(:first-of-type) [role=listitem].horizontal{padding-left:0}:host(:first-of-type) [role=listitem].sm::before,:host(:first-of-type) [role=listitem].lg::before{display:none}";
+const stepCss = ":host{position:relative;display:table-cell}: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-family:var(--detail-01-font-family);font-size:var(--detail-01-font-size);line-height:var(--detail-01-line-height);font-weight:var(--detail-01-font-weight);letter-spacing:var(--detail-01-letter-spacing);text-transform:var(--detail-01-text-transform)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--stepper-divider-line);height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--stepper-divider-line);height:1px;left:calc(50% + 24px);right:0;top:16px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--stepper-divider-line);height:1px;right:calc(50% + 24px);left:0;top:16px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--stepper-divider-line);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(--stepper-divider-line);height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;font-family:var(--detail-05-font-family);font-size:var(--detail-05-font-size);line-height:var(--detail-05-line-height);font-weight:var(--detail-05-font-weight);letter-spacing:var(--detail-05-letter-spacing);text-transform:var(--detail-05-text-transform)}:host [role=listitem].sm .index-container{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm .tds-step-icon{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;margin-top:-2px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--stepper-divider-line);height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--stepper-divider-line);height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--stepper-divider-line);height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--stepper-divider-line);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(--stepper-divider-line);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(--stepper-divider-line);height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{display:flex;align-items:center;justify-content:space-around;border-radius:100px;border-width:1px;border-style:solid;text-align:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--stepper-icon-step-border-warning);color:var(--stepper-icon-step-border-warning)}:host [role=listitem] .content-container.success{background-color:var(--stepper-icon-step-border-success);border-color:var(--stepper-icon-step-border-success);color:var(--tds-white)}:host [role=listitem] .content-container.current{color:var(--stepper-current-number-with-border)}:host [role=listitem] .content-container.upcoming{border-color:var(--stepper-label-border-upcoming);color:var(--stepper-label-text-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font-family:var(--detail-01-font-family);font-size:var(--detail-01-font-size);line-height:var(--detail-01-line-height);font-weight:var(--detail-01-font-weight);letter-spacing:var(--detail-01-letter-spacing);text-transform:var(--detail-01-text-transform)}:host [role=listitem] .label.sm{font-family:var(--detail-05-font-family);font-size:var(--detail-05-font-size);line-height:var(--detail-05-line-height);font-weight:var(--detail-05-font-weight);letter-spacing:var(--detail-05-letter-spacing);text-transform:var(--detail-05-text-transform)}:host [role=listitem] .label.upcoming{color:var(--stepper-label-text-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(:last-of-type) [role=listitem].horizontal{padding-right:0}:host(:last-of-type) [role=listitem].sm::after,:host(:last-of-type) [role=listitem].lg::after{display:none}:host(:last-of-type) [role=listitem].sm.vertical::before{display:none}:host(:first-of-type) [role=listitem].horizontal{padding-left:0}:host(:first-of-type) [role=listitem].sm::before,:host(:first-of-type) [role=listitem].lg::before{display:none}";
 const TdsStepStyle0 = stepCss;
 
 const propToStateMap = {
@@ -42,7 +42,7 @@ const TdsStep = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f049d976121a1179979026cd3087ad459183de06' }, h("div", { key: '1f961578e8e54ffc9e0d0c2966c86e3e32f8ddd8', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'f83033e0a0761227d911ac77cac9c64c31fe4c11', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '83c92f388cfebe37e0fb94c81d14adc391fbbbfa', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '1c6381a25f8af42afe54c0c8eaff4090bf14ee80', name: "label" }))))));
+        return (h(Host, { key: '63f48cb400926167cb53d6913e1b0edac574c2dc' }, h("div", { key: 'a9483ebdd03951cf1828cdac06ef86cd6b4e27ba', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'a23c61ecdf87f217d94264e93318de8020e30fc7', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '0366447fa1a632cc011de046eaf1577c30bca23f', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '4cc352a04e2851c9517099a974451cc75ed4d87e', name: "label" }))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/tds-stepper.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
 import { g as generateUniqueId } from './generateUniqueId-7934d315.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 stepperCss = ":host [role=list]{display:flex;justify-content:space-evenly;min-width:100%}:host [role=list]:not(.text-position-aside){width:100%}: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 = class {

package/dist/esm/tds-table-body-input-wrapper.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
 
-const tableBodyInputWrapperCss = ":host{position:relative}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.show-icon) ::slotted(input){padding-right:var(--tds-spacing-element-24)}:host(:hover) tds-icon{display:inline-block}:host(:hover) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}tds-icon.edit-icon{display:none;position:absolute;right:10px;top:1px;pointer-events:none;cursor:pointer}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);color:var(--tds-table-color);background-color:transparent;height:48px;border-radius:0;border:0;border-bottom:2px solid transparent;width:100%;cursor:pointer}::slotted(input)::placeholder{color:var(--tds-table-color)}::slotted(input:disabled){background-color:var(--tds-table-input-background-disabled)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
+const tableBodyInputWrapperCss = ":host{position:relative}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.show-icon) ::slotted(input){padding-right:var(--tds-spacing-element-24)}:host(:hover) tds-icon{display:inline-block}:host(:hover) ::slotted(input:not(:focus)){background-color:var(--table-input-hover)}tds-icon.edit-icon{display:none;position:absolute;right:10px;top:1px;pointer-events:none;cursor:pointer}::slotted(input){font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform);color:var(--table-text);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);box-sizing:border-box;background-color:transparent;height:48px;border-radius:0;border:0;border-bottom:2px solid transparent;width:100%;cursor:pointer}::slotted(input)::placeholder{color:var(--table-text)}::slotted(input:disabled){background-color:var(--table-input-disabled);color:var(--table-input-text-disabled);cursor:not-allowed}::slotted(input:focus){background-color:var(--table-input-focus);border-bottom:2px solid var(--tds-text-field-bar);outline:none}:host(.tds-table__compact) ::slotted(input){height:32px;}";
 const TdsTableBodyInputWrapperStyle0 = tableBodyInputWrapperCss;
 
 const relevantTableProps = ['compactDesign'];
@@ -86,11 +86,11 @@ const TdsTableBodyInputWrapper = class {
         }
     }
     render() {
-        return (h(Host, { key: '47496dfe7467e43cede5af53d6c30fe17c116eaf', class: {
+        return (h(Host, { key: '9fabe030017ee975b37b1d0c26adbffa092bb739', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
-            } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { class: "edit-icon", slot: "icon", size: "16px", name: "edit" })) : null));
+            } }, this.renderSlot && h("slot", { key: 'bf8e229f4e82bf5cfff7f10e6a42122c55c571a3', onSlotchange: () => this.handleSlotChange() }), this.showIcon && h("tds-icon", { key: '1f03e14af874769b376c3fb3c631791d80bb8eef', class: "edit-icon", slot: "icon", size: "16px", name: "edit" })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-table-body-row-expandable.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
 import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
 
-const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host .tds-table__row--expanded{border-bottom:none}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{max-width:1px;overflow:auto;padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host .tds-table__row-expand .tds-table__cell-expand--overflow-visible{overflow:visible}:host .tds-table__row-expand .tds-table__cell-expand--overflow-hidden{overflow:hidden}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
+const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{background-color:var(--table-body-row);border-bottom:1px solid var(--table-divider);color:var(--table-text);display:table-row;transition:background-color 200ms ease}:host .tds-table__row--expanded{border-bottom:none}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--table-body-row-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);box-shadow:0 0 0 1px var(--color-brand-neutral-white);outline-offset:1px}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{color:var(--table-text);max-width:1px;overflow:auto;padding:16px 16px 16px 66px}:host .tds-table__row-expand .tds-table__cell-expand--overflow-visible{overflow:visible}:host .tds-table__row-expand .tds-table__cell-expand--overflow-hidden{overflow:hidden}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--table-body-row-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--table-body-row-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--table-divider)}";
 const TdsTableBodyRowExpandableStyle0 = tableBodyRowExpandableCss;
 
 const relevantTableProps = [
@@ -100,26 +100,26 @@ const TdsTableBodyRowExpandable = class {
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '36be80e7cd0916cb8e196f52676281fcabc1996e', class: {
+        return (h(Host, { key: 'ce2f0459371d7b5ae0e61850a023eb550ea1918b', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { key: '868377d055d9d66fcf1824ed811e4a56f67b79e0', id: `expandable-content-${this.rowId}`, class: {
+            } }, h("tr", { key: '945cc2da086748eeb743c2b953cbc2439187ff2a', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: '059858ff5293deda48d039fdc81dd4a5d8ae6fce', class: {
+            }, part: "row" }, h("td", { key: 'f6ef8298bf105ca9d2f3370f82ac374237b67a41', class: {
                 'tds-table__cell-expand': true,
-            } }, h("label", { key: '6e05d93a509cb77cb3fd76f3d869b820b5d83163', class: "tds-table__expand-control-container" }, h("input", { key: 'ed7091d4dfdac43c082ee63548c7bff2e87379dd', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: '84622275a00b28685834e0de8552f5c7a36bc983', class: "tds-expendable-row-icon" }, h("svg", { key: '633d1030453895343295b30142410ece7f15dec3', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'e4d21588ca0bb6fbcd68af3a7afb48bafe180bc1', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '5c66154a24fe8d21bb6b9d91930ad7efd4cb1ec5' })), h("tr", { key: '1417c7143b8aaafbb2143557e53443cde9afcbde', class: {
+            } }, h("label", { key: '9952502bf560b48421ee37ae122ece5f0da3ef97', class: "tds-table__expand-control-container" }, h("input", { key: 'a7369527c6b2ef079837c63b22274dda8e62fefc', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: 'de8cc51db3ea6d5ff6936fe34664d5d96fc60ab3', class: "tds-expendable-row-icon" }, h("svg", { key: '62b247929999b2a01f05592826835bd70048d370', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '843c725fd0f9404752d4f4e7694c342f44f687c5', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '210f15581be86a7b1ec185eddb3127052011b5dd' })), h("tr", { key: 'e5093efd395986a9756d8642e9df1acf61102bae', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: 'b72d532f22b5c7c0bc7c7b23caf5887d4228b9d0', class: {
+            }, part: "expand-row" }, h("td", { key: 'e3c982507e9a9e9d188c546d28b2eaf1a35ea483', class: {
                 'tds-table__cell-expand': true,
                 'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
                 'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
-            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: '256a827b43a8099b9ea4e5a5a43023ff9bf0b828', style: {
+            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: 'f56682afa6d59fd03d42526859309e286458b539', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: '6bbc0eeca7b7a654da9c1b7da6992aa8928e1974', name: "expand-row" }))))));
+            } }, h("slot", { key: '722cbdebb09838b5e1ea045f6d3066d24368e419', name: "expand-row" }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/tds-table-body-row.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
 
-const tableBodyRowCss = ":host(.tds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host(.tds-table__row) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){background-color:var(--tds-table-body-row-background-hover)}:host(.tds-table__row--selected){background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row--selected:hover){background-color:var(--tds-table-body-row-background-selected-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%;background-color:pink}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table__row--clickable){cursor:pointer}:host(.tds-table__row--clickable:focus-visible){outline:var(--focus-outline, 2px solid blue)}";
+const tableBodyRowCss = ":host(.tds-table__row){box-sizing:border-box;background-color:var(--table-body-row);border-bottom:1px solid var(--table-divider);color:var(--table-text);display:table-row;transition:background-color 200ms ease}:host(.tds-table__row) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){background-color:var(--table-body-row-hover)}:host(.tds-table__row--selected){background-color:var(--table-body-row-selected)}:host(.tds-table__row--selected:hover){background-color:var(--table-body-row-selected-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--table-divider)}:host(.tds-table__row--clickable){cursor:pointer}:host(.tds-table__row--clickable:focus-visible){outline:var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);box-shadow:0 0 0 1px var(--color-brand-neutral-white);outline-offset:1px}";
 const TdsTableBodyRowStyle0 = tableBodyRowCss;
 
 const relevantTableProps = [
@@ -72,13 +72,13 @@ const TdsTableBodyRow = class {
         }
     }
     render() {
-        return (h(Host, { key: '13b790e1c4586e110853125bb2856166f8090cc3', tabindex: this.clickable ? '0' : null, class: {
+        return (h(Host, { key: '7ba4597616440e7767243890c79864259f494809', tabindex: this.clickable ? '0' : null, class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table__row--clickable': this.clickable,
-            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '3a966516c5a227907f9530d047e6e1c19eb5362c', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '90811b5dd064a36dfe9363dae55376fb7b4ca78d', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '4a16bce9add5ec4b9e4119e5361d556f5ee104f9' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: 'd21a3062ed62bf5f3ecfbcf0fdecf09164b51a2f', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'c77ff16d0a994cc06ea7cb2268e519b86d64f085', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: 'f17bed1fc5675e091e18d51745f654189773f11d' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-table-body.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
 
-const tableBodyCss = ":host,tds-table-body{box-sizing:border-box;display:table-row-group}:host *,tds-table-body *{box-sizing:border-box}:host .tds-table__info-message,tds-table-body .tds-table__info-message{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}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell.tds-table__body-cell--hover:nth-child(odd){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell.tds-table__body-cell--hover:nth-child(even){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-table-body-row:hover tds-body-cell,tds-table-body.tds-table--zebra-mode-columns-odd tds-table-body-row:hover tds-body-cell{background-color:transparent}";
+const tableBodyCss = ":host,tds-table-body{box-sizing:border-box;display:table-row-group}:host *,tds-table-body *{box-sizing:border-box}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd){background-color:var(--table-zebra-mode)}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd):hover{background-color:var(--table-body-row-hover)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even){background-color:var(--table-zebra-mode)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even):hover{background-color:var(--table-body-row-hover)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd){background-color:var(--table-zebra-mode)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell.tds-table__body-cell--hover:nth-child(odd){background-color:var(--table-body-cell-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even){background-color:var(--table-zebra-mode)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell.tds-table__body-cell--hover:nth-child(even){background-color:var(--table-body-cell-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-table-body-row:hover tds-body-cell,tds-table-body.tds-table--zebra-mode-columns-odd tds-table-body-row:hover tds-body-cell{background-color:transparent}";
 const TdsTableBodyStyle0 = tableBodyCss;
 
 const relevantTableProps = [
@@ -62,12 +62,12 @@ const TdsTableBody = class {
         }
     }
     render() {
-        return (h(Host, { key: '22e2e49b6db83c7c71e1e674b3dbfcb1ffd04e66', "data-selected-rows": this.multiselectArrayJSON, class: {
+        return (h(Host, { key: '1a7e07924ed9f36b8c4359789148963ab3851ae7', "data-selected-rows": this.multiselectArrayJSON, class: {
                 'tds-table--zebra-mode-rows-odd': this.zebraMode === 'rows-odd',
                 'tds-table--zebra-mode-rows-even': this.zebraMode === 'rows-even',
                 'tds-table--zebra-mode-columns-odd': this.zebraMode === 'columns-odd',
                 'tds-table--zebra-mode-columns-even': this.zebraMode === 'columns-even',
-            } }, h("slot", { key: 'deb2aa129f332b48f7b9a38b0de25c2076fd86d9' })));
+            } }, h("slot", { key: 'a8da63114252a56f50b4823baf90a9eae0eb414b' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-table-footer.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
 
-const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:74px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}";
+const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--table-footer);color:var(--table-text)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{margin-right:var(--tds-spacing-element-16);display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform);background-color:var(--table-footer-page-selector-input);border-radius:var(--tds-spacing-element-4);color:var(--table-text);margin-right:var(--tds-spacing-element-4);padding-right:var(--tds-spacing-element-8);width:74px;height:30px;border:none;transition:background-color 250ms ease}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--table-footer-page-selector-input-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform);padding:1px 22px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{border-radius:var(--tds-spacing-element-4);color:var(--table-icon);height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;transition:background-color 250ms ease}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--table-footer-button-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{color:var(--table-icon-disabled);cursor:default}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{fill:var(--table-text);height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}";
 const TdsTableFooterStyle0 = tableFooterCss;
 
 const relevantTableProps = [
@@ -133,12 +133,12 @@ const TdsTableFooter = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'fd6a5604adc116a78c9723ce3f16535ea6fa7edf', class: {
+        return (h(Host, { key: 'ef10157de8bd21d020eab709b8b1cfbd0497cf12', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: '5ec3649f1e76f54a1d09cc023f52f165bf55a175', class: "tds-table__footer-row" }, h("td", { key: '0815d2e9083b0b3793dbf3572869b76c2445396e', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '3bdc6acf5b034f8ee141e1fde58e32cb76e7ab33', class: "tds-table__pagination" }, h("div", { key: 'd8bd734bb3890593404d7950b5cb353e0af1b37f', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '0cc09dd7662a2ceba454fb1e1c3eb3a389e9eb4d', class: "rows-per-page" }, h("p", { key: '57ae73ac509c9cd7ce9c93ae60737724035fb376' }, "Rows per page"), h("tds-dropdown", { key: '6fc1d8794bb2cecc406d9143c1e501733a990993', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            }, style: this.getStyles() }, h("tr", { key: '25987ea6cf6cdb1116fa1a18303553e168675a26', class: "tds-table__footer-row" }, h("td", { key: 'dc2e516eb866d3f8618593cb902b1616be26702e', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '1f72626867f49dd3dfb6a75d1c5c9ae442a5dca0', class: "tds-table__pagination" }, h("div", { key: '46c99c1e03eaa2c72b01b5476097f67542dcf873', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '4126adc0bc4629e7f9244c5f74fa9c03b8ca9475', class: "rows-per-page" }, h("p", { key: '795fe282730d46353c66c3aca916760d7bf5ad56' }, "Rows per page"), h("tds-dropdown", { key: '43e70ffc5418c48d87fb69c7b070d84ac78b4a2e', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
             return (h("tds-dropdown-option", { value: `${value}` }, value));
-        }))))), h("div", { key: '71e30ccac9cb36acf61f46de47fc39d4b45c49d3', class: "tds-table__page-selector" }, h("input", { key: 'fe99cbdae18c4b297e0823de2f2a5529f24ed7f4', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: 'd49b93524aeaddacd2e6c431d8f191fd87c768be', class: "tds-table__footer-text" }, "of ", h("span", { key: '1d6f7429e0837f200db90259e1e23cb879643756' }, this.pages), " pages"), h("button", { key: 'b5e0a8d72a1e7ff35570dfd2c131735f91ebb824', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '06ffe814de254c6c194ab88d89fe5f6da5239c44', name: "skip_backwards", size: "20px" })), h("button", { key: '271a59221429937f24873f984526fe55dd12c874', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'b2231b490bdd4234d62399f2785edf3136789af5', name: "chevron_left", size: "20px" })), h("button", { key: '6b06a0fad602d8593bb834672e934afb00d45edf', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '384751f9299ce4078e35fc15be37d2d529ddeffa', name: "chevron_right", size: "20px" })), h("button", { key: 'cf0fa5f2967d7f249ffbd548039e8021e4121bec', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '6da11c4f01f58a7e39698b7a91034567527464e6', name: "skip_forward", size: "20px" })))))))));
+        }))))), h("div", { key: '8e5ad50f7acde8786633ae3e1bfc743e3dcff64c', class: "tds-table__page-selector" }, h("input", { key: 'fd91b13f5c9c9ef0a6ecce7613cf9e1805c90a60', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '6a14f3235cf6d95e7b733b424c94a91304ea9a6e', class: "tds-table__footer-text" }, "of ", h("span", { key: 'b844edce0c9d68ba0a4b3bcf95be7b6acbb17616' }, this.pages), " pages"), h("button", { key: 'f808fa27c7ce60ec963355442550b2ee4b684254', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '8b795215e40ff0f5dffd3c053c791b9bc19035aa', name: "skip_backwards", size: "20px" })), h("button", { key: 'f30422518268f30195f8411b70c91dd58cd8ea3c', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '2d024cea17fd5a7e021fc0c7e244ffaecdb10062', name: "chevron_left", size: "20px" })), h("button", { key: 'c6e8733c92c9d36fe807916c1af69e2f0e3a9604', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '23e0c5bd4c97ded51a5d346e1492997dedf77fa5', name: "chevron_right", size: "20px" })), h("button", { key: '81fcc39bbf208f610d06151614c90fbd0bb1951e', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: 'ce19da46b8345c9ceb69ff2e775a85d78ad3b6fb', name: "skip_forward", size: "20px" })))))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-table-header-input-wrapper.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
 
-const tableHeaderInputWrapperCss = ":host{position:relative}:host(:hover) tds-icon{display:inline-block}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.focused-input-wrapper) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}:host(.show-icon) ::slotted(input){padding-left:35px}tds-icon.search-icon{color:var(--tds-table-input-header-icon);position:absolute;left:15px;top:1px}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);height:48px;border-radius:0;background-color:transparent;border:0;border-bottom:2px solid transparent}::slotted(input)::placeholder{color:var(--tds-table-input-header-placeholder)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-header-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
+const tableHeaderInputWrapperCss = ":host{position:relative}:host(:hover) tds-icon{display:inline-block}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.focused-input-wrapper) ::slotted(input:not(:focus)){background-color:var(--table-input-hover)}:host(.show-icon) ::slotted(input){padding-left:35px}tds-icon.search-icon{color:var(--table-input-header-icon);position:absolute;left:15px;top:1px}::slotted(input){font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform);color:var(--table-text);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);box-sizing:border-box;height:48px;border-radius:0;background-color:transparent;border:0;border-bottom:2px solid transparent}::slotted(input)::placeholder{color:var(--table-input-header-placeholder)}::slotted(input:focus){background-color:var(--table-input-header-focus);border-bottom:2px solid var(--tds-text-field-bar);outline:none}:host(.tds-table__compact) ::slotted(input){height:32px;}";
 const TdsTableHeaderInputWrapperStyle0 = tableHeaderInputWrapperCss;
 
 const relevantTableProps = ['compactDesign'];
@@ -68,7 +68,7 @@ const TdsTableHeaderInputWrapper = class {
         }
     }
     render() {
-        return (h(Host, { key: 'e92640dc4c88b52574960d7234b377d7e5eaaa8e', class: {
+        return (h(Host, { key: '13e05f7cd1dbe0a06611ffacc4e4b842d6469eba', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,

package/dist/esm/tds-table-header.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
 
-const tableHeaderCss = ":host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .tds-table__header-cell--checkbox{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input{display:none}:host .tds-table__expand-control-container .tds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__expand-control-container .tds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(tds-header-cell:hover){background-color:var(--tds-table-header-background-hover)}:host(.tds-table--compact) .tds-table__header-cell--checkbox{height:32px}:host(.tds-table--compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__header-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox{border-top-left-radius:0}";
+const tableHeaderCss = ":host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .tds-table__header-cell--checkbox{font-family:var(--headline-07-font-family);font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);font-weight:var(--headline-07-font-weight);letter-spacing:var(--headline-07-letter-spacing);text-transform:var(--headline-07-text-transform);background-color:var(--table-header);border-bottom:1px solid var(--table-divider);color:var(--table-text);display:table-cell;text-align:left;height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input{display:none}:host .tds-table__expand-control-container .tds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__expand-control-container .tds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(tds-header-cell:hover){background-color:var(--table-header-hover)}:host(.tds-table--compact) .tds-table__header-cell--checkbox{height:32px}:host(.tds-table--compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__header-cell--checkbox{border-right:1px solid var(--table-divider)}:host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox{border-top-left-radius:0}";
 const TdsTableHeaderStyle0 = tableHeaderCss;
 
 const relevantTableProps = [
@@ -85,11 +85,11 @@ const TdsTableHeaderRow = class {
         });
     }
     render() {
-        return (h(Host, { key: '968ef371db492d005ac3156d8b4a15de0966d117', class: {
+        return (h(Host, { key: '75f1971a9e5da0235c05bd6df404e00ef5e00ebe', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: 'cc9fdb8e36b29c4dccf01961060df330fb50c6f2' }, this.multiselect && (h("th", { key: 'e306755b170ef4edc6d3c2f32941dfbb51eefaf6', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '2903d76304e4f3428aa63ba7e0aa65e48d21f232', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'd9acae7cae023f412395663c607b3293ce40a2e2', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: 'cea8e7da2c5a4a728ea55ead114f790674fc1a0c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '5ad238c2ceaabc721970c28ea9d58ecedac8152d' }))));
+            } }, h("tr", { key: 'b5a11da2da4150e10670bd337d54a52ff374f0c4' }, this.multiselect && (h("th", { key: '4e3306cac508165e6275f1d25003ded464f46d96', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '3a56745e002253a5c5600f84c1ca5079a7f3b337', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'fdcaf57c308efe9fef3ac0769903cd0803b48b71', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: 'fa98bc0ad7ae71ab5e0dc68aee1d75ca36b1e83a', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '0b5f62c41e92984f42db820a57a89be2f5a57993' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-table-toolbar.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
 
-const tableToolbarCss = ":host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--tds-table-toolbar-background);color:var(--tds-table-color);padding:0 var(--tds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .tds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .tds-table__actionbar-left{display:flex}:host .tds-table__title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding-top:var(--tds-spacing-element-16);text-align:left;margin-right:var(--tds-spacing-element-8)}:host .tds-table__actionbar,:host slot[name=end]::slotted(*),:host slot[name=start]::slotted(*){display:flex;align-self:center}:host .tds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .tds-table__searchbar::after{content:\"\";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--tds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .tds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .tds-table__searchbar:focus-within,:host .tds-table__searchbar.tds-table__searchbar--active{width:208px;background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:focus-within:hover,:host .tds-table__searchbar.tds-table__searchbar--active:hover{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar .tds-table__searchbar-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .tds-table__searchbar .tds-table__searchbar-input :focus{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:hover{background-color:var(--tds-table-toolbar-searchbar-background-hover)}:host .tds-table__searchbar .tds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.toolbar__horizontal-scroll){position:absolute;top:var(--tds-spacing-element-16)}:host(.tds-table--compact){height:56px}";
+const tableToolbarCss = ":host{box-sizing:border-box;background-color:var(--table-toolbar);color:var(--table-text);padding:0 var(--tds-spacing-element-16);display:table-caption;position:relative;height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .tds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .tds-table__actionbar-left{display:flex}:host .tds-table__title{font-family:var(--headline-07-font-family);font-size:var(--headline-07-font-size);line-height:var(--headline-07-line-height);font-weight:var(--headline-07-font-weight);letter-spacing:var(--headline-07-letter-spacing);text-transform:var(--headline-07-text-transform);padding-top:var(--tds-spacing-element-16);margin-right:var(--tds-spacing-element-8);text-align:left}:host .tds-table__actionbar,:host slot[name=end]::slotted(*),:host slot[name=start]::slotted(*){display:flex;align-self:center}:host .tds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .tds-table__searchbar::after{background-color:var(--table-toolbar-searchbar-border-bottom);content:\"\";width:100%;height:2px;position:absolute;bottom:0;transform:scaleX(0);transition:transform 150ms ease}:host .tds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .tds-table__searchbar:focus-within,:host .tds-table__searchbar.tds-table__searchbar--active{background-color:var(--table-toolbar-searchbar);width:208px}:host .tds-table__searchbar:focus-within:hover,:host .tds-table__searchbar.tds-table__searchbar--active:hover{background-color:var(--table-toolbar-searchbar)}:host .tds-table__searchbar .tds-table__searchbar-input{font-family:var(--detail-02-font-family);font-size:var(--detail-02-font-size);line-height:var(--detail-02-line-height);font-weight:var(--detail-02-font-weight);letter-spacing:var(--detail-02-letter-spacing);text-transform:var(--detail-02-text-transform);color:var(--table-text);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .tds-table__searchbar .tds-table__searchbar-input :focus{background-color:var(--table-toolbar-searchbar)}:host .tds-table__searchbar:hover{background-color:var(--table-toolbar-searchbar-hover)}:host .tds-table__searchbar .tds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.toolbar__horizontal-scroll){position:absolute;top:var(--tds-spacing-element-16)}:host(.tds-table--compact){height:56px}";
 const TdsTableToolbarStyle0 = tableToolbarCss;
 
 const relevantTableProps = [
@@ -70,10 +70,10 @@ const TdsTableToolbar = class {
         return styles;
     }
     render() {
-        return (h(Host, { key: '76acde1b3c55f421cedae9bf932f923813272fe3', class: {
+        return (h(Host, { key: '7b33de1426988b4bf97d3856c135945859783b6f', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'e6fe2f411ebde77befeb99992b5157bba3651fbf', class: "tds-table__upper-bar-flex" }, h("div", { key: 'f61dc1de54a73c28a2ef10dcae2a5a629ae76c57', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'ca50269d08eab742cb759d371937739fd0a87eff', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '275b233ff233a9f90d936553fa31015f72f21899', name: "start" })), h("div", { key: 'd2ed2b7918e8f8d8e23c34bd8114ee1e69cdb681', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'cd0bd112e3ab6b31c96e10bc4b2eb32715766d58', class: "tds-table__searchbar" }, h("input", { key: '3dbcdf5394477fb55d41c2ee0ddcea1e50ffcd64', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '0a34bfd7cd50c88604af01dfc9bef1adae7d8999', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '98a376c6db7d249e060dafffef18c9345730e25c', name: "search", size: "20px" })))), h("slot", { key: 'e4400d9ddb0f6435315569e1f64f34bc04d8054f', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '7c176540ee9476479de7a818de7f46258c94142d', class: "tds-table__upper-bar-flex" }, h("div", { key: '95eef4de54dd8d5507354f695b8420a4951f4c1b', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'c58973635367598d3f8b4a52881003157381d94a', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: 'e39d96b2f21a7f1645041acbd99b618debde089e', name: "start" })), h("div", { key: '24df42114518c53b2ed16376272207d02a8631d8', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '58860c836dfd8baecb98f9ee494c34a542bde347', class: "tds-table__searchbar" }, h("input", { key: '418e9cbc47efa12dbef046b08adb4ef676b1b9ca', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '6c090c782535c42fd0e7ccd439835f550ddfaa0b', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: 'e0e115652f69cc8a39d77b2e81f94e7789d868e6', name: "search", size: "20px" })))), h("slot", { key: '50e519e153bcb2d3a56303171e9db06c47735dd6', name: "end" })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/tds-table.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
 import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
 
-const tableCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host,.tds-table{border-collapse:collapse;display:table;box-sizing:border-box}:host *,.tds-table *{box-sizing:border-box}:host(.tds-table--responsive),.tds-table--responsive{width:100%}.tds-table--horizontal-scroll{display:block;overflow-x:scroll;white-space:nowrap}.tds-table--horizontal-scroll:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}.tds-table--horizontal-scroll::-webkit-scrollbar{height:var(--tds-scrollbar-height)}.tds-table--horizontal-scroll::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.tds-table--horizontal-scroll::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.tds-table--horizontal-scroll::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.tds-table--horizontal-scroll{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-table--horizontal-scroll-toolbar{margin-top:64px}.tds-table--horizontal-scroll-toolbar-compact{margin-top:56px}.tds-table--horizontal-scroll-footer{margin-bottom:49px}.tds-table--horizontal-scroll-footer-compact{margin-bottom:33px}";
+const tableCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host,.tds-table{box-sizing:border-box;border-collapse:collapse;display:table}:host *,.tds-table *{box-sizing:border-box}:host(.tds-table--responsive),.tds-table--responsive{width:100%}.tds-table--horizontal-scroll{display:block;overflow-x:scroll;white-space:nowrap}.tds-table--horizontal-scroll:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--color-foreground-icon-discrete);background-clip:padding-box}.tds-table--horizontal-scroll::-webkit-scrollbar{height:var(--tds-scrollbar-height)}.tds-table--horizontal-scroll::-webkit-scrollbar-track{background:var(--color-background-layer-01)}.tds-table--horizontal-scroll::-webkit-scrollbar-thumb{border-radius:40px;background:var(--color-foreground-icon-discrete);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.tds-table--horizontal-scroll::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.tds-table--horizontal-scroll{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-table--horizontal-scroll-toolbar{margin-top:64px}.tds-table--horizontal-scroll-toolbar-compact{margin-top:56px}.tds-table--horizontal-scroll-footer{margin-bottom:49px}.tds-table--horizontal-scroll-footer-compact{margin-bottom:33px}";
 const TdsTableStyle0 = tableCss;
 
 const TdsTable = class {