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

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

@@ -1,20 +1,22 @@
-import { p as proxyCustomElement, H, h, F as Fragment, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$3 } from './p-b390ece5.js';
-import { d as defineCustomElement$2 } from './p-92c2da85.js';
+import { p as proxyCustomElement, H, h, F as Fragment, a as Host } from './index.js';
+import { d as defineCustomElement$3 } from './p-CPDv0bBc.js';
+import { d as defineCustomElement$2 } from './p-BxmFjTxG.js';
 
 const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:69px;position:absolute;left:var(--side-menu-width);box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-sidebar-side-menu-subnav-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
-const TdsSideMenuDropdownStyle0 = sideMenuDropdownCss;
 
 const TdsSideMenuDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdown extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** If the dropdown should be open from the start. */
         this.defaultOpen = false;
-        this.buttonLabel = undefined;
+        /** If the button that opens the dropdown should appear selected. */
         this.selected = false;
+        /** Toggle open state programmatically */
         this.open = false;
-        this.hoverState = undefined;
         this.collapsed = false;
     }
     collapsedSideMenuEventHandler(event) {
@@ -60,17 +62,17 @@ const TdsSideMenuDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenu
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: '78a5c58e58b38e84cae96a9afd8166bfe3125a02' }, h("div", { key: '70e8e68e6db938cb2177169ca1836e84eb48cce6', class: {
+        return (h(Host, { key: '2c3887fe8ec9334f7f3b3f46b3bce64712957ae3' }, h("div", { key: 'bedb9fc6f22d0c608b77c2d0d2fe7c8c17eadd59', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '5834d5e804ad422937f2971637b3a70fb1fb676e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, h("tds-side-menu-item", { key: '83cb1486e99c0f699b02be91bf53df1249076902', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'd454e6148a12c0bd1864b6c148f169ac342e9da2' }, h("slot", { key: '8a2579b751421d9df8e3dd5a84b04a5f844d383c', name: "icon" }), !this.collapsed && (h(Fragment, { key: 'f3419cc2993191186dccc9a208ff8150bf592eeb' }, this.buttonLabel, h("slot", { key: 'ff616384d76d6f3df82ac6abb12d65e4f6a5906d', name: "label" }), h("tds-icon", { key: 'a4acd9c0de3f437766673c57b4d73ac13cc8917b', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: 'db1ec059f4f1910d1fef432baff29810883ec2ef', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: 'a9f35f976da7ceaf38eb1c1641b43617e4e583c6', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: 'ef8b02b77b93b54f0a9aa4c5fb367356c12e9b82', name: "label" }))), h("slot", { key: '15c7c9e5a6a0615f478c5f93de8753211d17b3c3' })))));
+            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'e21c03415c48022813b3289f8dd80f21486414f0' }, h("slot", { key: '4462d95bf8e7945741cb54d9f363b8d9cac158e0', name: "icon" }), !this.collapsed && (h(Fragment, { key: '1a65252df105ef6ad9bca35f873fe19e71289b80' }, this.buttonLabel, h("slot", { key: 'e35a184bae5c65fde366ed287062becbc6633cac', name: "label" }), h("tds-icon", { key: '7a4328715c67aaf91a3675574f5aadca9ce8ae3d', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: '1e4e674c5e9b8901b5306bee36bf121aa37112e3', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: '54a5f5f89d595aeae6ac6e41ac553e96466fe4a1', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '20477b6be2c477c48412d0f4bc34f1181bcb00d3', name: "label" }))), h("slot", { key: '9740e5c9cb493e52c104223ec62b47bffc8adc5d' })))));
     }
     get host() { return this; }
-    static get style() { return TdsSideMenuDropdownStyle0; }
-}, [1, "tds-side-menu-dropdown", {
+    static get style() { return sideMenuDropdownCss; }
+}, [257, "tds-side-menu-dropdown", {
         "defaultOpen": [4, "default-open"],
         "buttonLabel": [1, "button-label"],
         "selected": [4],

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

@@ -1,4 +1,4 @@
-import { T as TdsSideMenuItem$1, d as defineCustomElement$1 } from './p-92c2da85.js';
+import { T as TdsSideMenuItem$1, d as defineCustomElement$1 } from './p-BxmFjTxG.js';
 
 const TdsSideMenuItem = TdsSideMenuItem$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,19 +1,20 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 
 const sideMenuOverlayCss = ":host{position:fixed;width:100%;height:100%;background-color:black}div{position:fixed;width:100%;height:100%;pointer-events:none}";
-const TdsSideMenuOverlayStyle0 = sideMenuOverlayCss;
 
 const TdsSideMenuOverlay$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuOverlay extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '3ead27185a3cba465ce4789a58d9f5081a3ba476' }, h("div", { key: '5da2afb06899169815745785b3c9dc766a7b51bd' })));
+        return (h(Host, { key: '15e4b102af83962079d9bc9104c3e4d243cea947' }, h("div", { key: '52ed88b0ccf8ae02c3d83849f610475b0ad55065' })));
     }
-    static get style() { return TdsSideMenuOverlayStyle0; }
-}, [1, "tds-side-menu-overlay"]);
+    static get style() { return sideMenuOverlayCss; }
+}, [257, "tds-side-menu-overlay"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1,4 +1,4 @@
-import { T as TdsSideMenuUserImage$1, d as defineCustomElement$1 } from './p-b609e7a7.js';
+import { T as TdsSideMenuUserImage$1, d as defineCustomElement$1 } from './p-DuxH3vDC.js';
 
 const TdsSideMenuUserImage = TdsSideMenuUserImage$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { T as TdsSideMenuUserLabel$1, d as defineCustomElement$1 } from './p-927cf777.js';
+import { T as TdsSideMenuUserLabel$1, d as defineCustomElement$1 } from './p-CMsPXG7a.js';
 
 const TdsSideMenuUserLabel = TdsSideMenuUserLabel$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,25 +1,22 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$3 } from './p-b609e7a7.js';
-import { d as defineCustomElement$2 } from './p-927cf777.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$3 } from './p-DuxH3vDC.js';
+import { d as defineCustomElement$2 } from './p-CMsPXG7a.js';
 
 const sideMenuUserCss = ":host{display:flex;align-items:center;gap:16px;height:68px}";
-const TdsSideMenuUserStyle0 = sideMenuUserCss;
 
 const TdsSideMenuUser$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUser extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
-        this.heading = undefined;
-        this.subheading = undefined;
-        this.imgSrc = undefined;
-        this.imgAlt = undefined;
     }
     render() {
-        return (h(Host, { key: '768662a142cf0f40f24566fedff52e1e25df8bee' }, h("tds-side-menu-user-image", { key: 'fb02fcf45d21aa198bcba356f0502a3aa8cf3d0b', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '658ba6d53ded1f760c2ec2327de765374ba5b6b9', name: "image" })), h("tds-side-menu-user-label", { key: '1ab756a2538fd7bdde5a1714e25dc0d0fae9f7ea', heading: this.heading, subheading: this.subheading })));
+        return (h(Host, { key: 'fe3a852379cfa0e6822cac54e84937b5c8365115' }, h("tds-side-menu-user-image", { key: 'd5c702b1f3dcc8d2d46d411c72e13becaab1062d', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '4ded196cd1d6ab0e13488787bbb1d4aa5feb3ebd', name: "image" })), h("tds-side-menu-user-label", { key: 'efee803dbe911144f11660ff1529a2de8c3cca62', heading: this.heading, subheading: this.subheading })));
     }
-    static get style() { return TdsSideMenuUserStyle0; }
-}, [1, "tds-side-menu-user", {
+    static get style() { return sideMenuUserCss; }
+}, [257, "tds-side-menu-user", {
         "heading": [1],
         "subheading": [1],
         "imgSrc": [1, "img-src"],

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

@@ -1,17 +1,31 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.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 TdsSideMenuStyle0 = sideMenuCss;
 
 const GRID_LG_BREAKPOINT = 992;
 const TdsSideMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenu extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsCollapse = createEvent(this, "tdsCollapse", 7);
         this.internalTdsCollapse = createEvent(this, "internalTdsCollapse", 6);
         this.internalTdsSideMenuPropChange = createEvent(this, "internalTdsSideMenuPropChange", 6);
+        /** Applicable only for mobile. If the Side Menu is open or not. */
+        this.open = false;
+        /** Applicable only for desktop. If the Side Menu should always be shown. */
+        this.persistent = false;
+        /** If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.
+         * NOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tdsCollapse event. */
+        this.collapsed = false;
+        this.isUpperSlotEmpty = false;
+        this.isCollapsed = false;
+        /* To preserved initial state of collapsed prop as it is changed in runtime */
+        this.initialCollapsedState = false;
+        /** @internal Tracks the currently focused element index for keyboard navigation */
+        this.activeElementIndex = 0;
         this.handleMatchesLgBreakpointChange = (e) => {
             const isBelowLg = !e.matches;
             if (isBelowLg) {
@@ -22,13 +36,6 @@ const TdsSideMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenu extends
                 this.open = false;
             }
         };
-        this.open = false;
-        this.persistent = false;
-        this.collapsed = false;
-        this.isUpperSlotEmpty = false;
-        this.isCollapsed = false;
-        this.initialCollapsedState = false;
-        this.activeElementIndex = 0;
     }
     handleKeyDown(event) {
         if (event.key === 'Escape' && this.open) {
@@ -156,8 +163,8 @@ const TdsSideMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenu extends
         "collapsed": ["onCollapsedChange"],
         "open": ["onOpenChange"]
     }; }
-    static get style() { return TdsSideMenuStyle0; }
-}, [1, "tds-side-menu", {
+    static get style() { return sideMenuCss; }
+}, [257, "tds-side-menu", {
         "open": [1028],
         "persistent": [4],
         "collapsed": [1028],

package/dist/components/tds-slider.js

@@ -1,19 +1,56 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
-import { d as defineCustomElement$5 } from './p-b390ece5.js';
-import { d as defineCustomElement$4 } from './p-d3866be7.js';
-import { d as defineCustomElement$3 } from './p-3b58a9f3.js';
-import { d as defineCustomElement$2 } from './p-40253725.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
+import { d as defineCustomElement$5 } from './p-CPDv0bBc.js';
+import { d as defineCustomElement$4 } from './p-X1sPx4t5.js';
+import { d as defineCustomElement$3 } from './p-Ip9G3co9.js';
+import { d as defineCustomElement$2 } from './p-DnzQe_HU.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{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-inner:focus-within .tds-slider__thumb-inner{outline:var(--tds-slider-thumb-focus-outline);box-shadow:var(--tds-slider-thumb-focus-box-shadow);outline-offset:var(--tds-slider-thumb-focus-outline-offset);z-index:1}.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-slider-input-value-color);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 tds-text-field .text-field-input[type=number]{width:auto;padding:12px;text-align:center;appearance:textfield}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only{text-align:left}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly{right:12px}.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 11px;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:hover .tds-slider__value{display:block}.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;background-color:var(--tds-slider-thumb-hover)}.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;background-color:var(--tds-slider-thumb-pressed)}.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-label-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-input-value-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-inputfield-number-disabled);box-shadow:none;pointer-events:none;background:var(--tds-slider-inputfield-background-disabled)}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed;background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider{background-color:var(--tds-slider-divider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-divider-values-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-thumb-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:pointer}.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-controls-disabled)}";
-const TdsSliderStyle0 = sliderCss;
 
 const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.tdsChange = createEvent(this, "tdsChange", 6);
         this.tdsInput = createEvent(this, "tdsInput", 6);
+        /** Text for label */
+        this.label = '';
+        /** Initial value */
+        this.value = '0';
+        /** Minimum value */
+        this.min = '0';
+        /** Maximum value */
+        this.max = '100';
+        /** Number of tick markers (tick for min- and max-value will be added automatically) */
+        this.ticks = '0';
+        /** Decide to show numbers above the tick markers or not  */
+        this.showTickNumbers = false;
+        /** Decide to show the tooltip or not */
+        this.tooltip = false;
+        /** Sets the disabled state for the whole component  */
+        this.disabled = false;
+        /** Sets the read only state for the whole component  */
+        this.readOnly = false;
+        /** Decide to show the controls or not */
+        this.controls = false;
+        /** Decide to show the input field or not */
+        this.input = false;
+        /** Defines how much to increment/decrement the value when using controls */
+        this.step = '1';
+        /** Name property (will be inherited by the native slider component) */
+        this.name = '';
+        /** Sets the size of the thumb */
+        this.thumbSize = 'lg';
+        /** Snap to the tick's grid */
+        this.snap = false;
+        /** Sets the aria-label for the slider control. */
+        this.tdsAriaLabel = '';
+        /** ID for the Slider's input element, randomly generated if not specified. */
+        this.sliderId = generateUniqueId();
+        /** Sets the read only aria label for the input field */
+        this.tdsReadOnlyAriaLabel = '';
         this.wrapperElement = null;
         this.thumbElement = null;
         this.thumbInnerElement = null;
@@ -35,24 +72,6 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
             this.forceValueUpdate(this.initialValue);
             this.reset();
         };
-        this.label = '';
-        this.value = '0';
-        this.min = '0';
-        this.max = '100';
-        this.ticks = '0';
-        this.showTickNumbers = false;
-        this.tooltip = false;
-        this.disabled = false;
-        this.readOnly = false;
-        this.controls = false;
-        this.input = false;
-        this.step = '1';
-        this.name = '';
-        this.thumbSize = 'lg';
-        this.snap = false;
-        this.tdsAriaLabel = '';
-        this.sliderId = generateUniqueId();
-        this.tdsReadOnlyAriaLabel = '';
     }
     roundToStep(val) {
         const stepNum = parseFloat(this.step);
@@ -440,37 +459,37 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
     }
     render() {
         const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (h("div", { key: '6077f356c7723ce54bdee208039af07154499684', class: {
+        return (h("div", { key: '3a496ff494a47cb2e7f777145731b2b0a99619e5', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: '0ee6d0f1c8661bdcae6a3df5eca7b154306338eb', 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: 'cfb2700cf9d16c204182a72f9f00ccd03b58ef89', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+            } }, h("input", { key: 'b1afaaf8c2c20278e5897d3973bc2267bd277f85', 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: '38d7dc7f03e4ce5398f47382ac44b159d03cc9a9', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), h("div", { key: 'b90c1d06afd96682a108b24506660e7544c4be38', class: {
+            } }), h("div", { key: '564131065550bb6ef78b813791696af866275b60', 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: '3d0bc3f42de59e4397dc8da0edf7ec29802ee8ab', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'c3868e2225cc4dacf60d23e31bdb2b106b85ce22', class: "tds-slider__input-values" }, h("div", { key: 'af100279435087101f37043ea083e5e33d930079', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '83c0078ec0ae39d29582e1ff1f4c3fc5f3a09483', class: "tds-slider__controls" }, h("div", { key: '31947e6cd76c35b8b8e7c0fb92b777e3bf8538b7', 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: '4c005f8c628236482eecdac51bd43a860f9e38d9', name: "minus", size: "16px" })))), h("div", { key: 'c6f21ded71244d202e255a90039f03872af09d5a', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: 'df1e820e1077ccec24826e38ba1b1fdd8dc0ae90', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'f8cadf57f46068f61d1afc2bbcc30997a750705b', 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: '389ba385948b6772e803b7b9ec858061451f7534', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: 'cc0dd61feaeb64fa866ceee68f03e59844572327', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'd95cfd517b1d810ba60f47d8f79f27fbcb11cb84', class: "tds-slider__input-values" }, h("div", { key: '253ecd4768fe8ac57e8fb342ed1e363abc9da5cb', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '84a35f8c63bf5b723d4244ec8f7ea1dd7cbffc20', class: "tds-slider__controls" }, h("div", { key: '754a34b2b234d7e2354c00f34b86db02d4f114a0', 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: '70e6604021a651eadcbaf7767b03f2e62034abe5', name: "minus", size: "16px" })))), h("div", { key: '53550f817e1a032e0e91200752e7d1eeb23ded34', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: 'f59130b6cdb011c01eb81d5e18cf7e952b96c68e', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '66f66ceae09f21462e3f28c49844b10e0182ec49', 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: '00f9d38e9aba338091af66ced5f559378354cffd', 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: '5409aec334156fc5c5ac6a2cdbcb38ee50e35259', class: "tds-slider__track-fill", ref: (el) => {
+            } }, h("div", { key: '20ea7060588fc4e81be9e2e3d6e5a7c585b6b867', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: '8e0953ed9771846db11b9f79f6844065494f1b01', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: 'd6c6155ee44d443dc58ed1c463e927e8de6808b6', 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: 'ed08cca6219adff68babc9c535aff278a1b3325e', class: "tds-slider__value" }, this.value, h("svg", { key: 'dc46d041d7c123400a42ea9c9472cf0a329eb4a1', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3d46edb2069bd056a2ae09efa4bfa7f6319afe3b', 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: '202f2b005a969cd7eb3396c14ef6f72224fcd56a', 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: '8ddf95ae707a6bf086f6c414fca62098f7974caf', class: "tds-slider__value" }, this.value, h("svg", { key: '9193dc47663210d904271d10a1e3ffbaad3073bf', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '6d5c154ec0dd136ee3898e8350fd65c30794571b', 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: '183f49eda3134b87e5b65334265d44fe404a9e1d', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: 'ca2e84c4bccc24ebbc58a4915f62b5ecb77462c9', class: "tds-slider__input-values" }, h("div", { key: '58fdb8a9a25b9f15314aab8ffaee9424fbb26458', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '4cba8f4c2b8a89922dbaa9eec4c2f9d12f43b62c', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '65d311769aa5202134676cf9c4652132fbfc364d', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: 'da8881158bee1aec2724a0e71af3faa88bc0eb17', class: "tds-slider__controls" }, h("div", { key: '241b11a3bee6ce8cf3e53ba77a095e2fb0cdb8a6', 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: 'c8e5466b53a1fe6abaaab77741e4adb7ec197341', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: '00e135462f95a4ee21070c25e0b507e4931257ed', class: "tds-slider__input-values" }, h("div", { key: 'ad8029ecff8f448380f291629ee803ee5634bf6e', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'cb7460d3946debbc138b2ae88b61ff9a288ca2ae', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '226a0bbdee3910431c4d72065e2ca9d09abf2fa1', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: '2b85ddaf9e31f702773212326f55e8eb4737e3da', class: "tds-slider__controls" }, h("div", { key: '7376eac80ff3955ddc6c0b27eb99b463bc0d5985', 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: 'd66d1a1d49da54d1cafca2872b8462b126154684', name: "plus", size: "16px" })))))));
     }
     get host() { return this; }
     static get watchers() { return {
         "value": ["handleValueUpdate"]
     }; }
-    static get style() { return TdsSliderStyle0; }
-}, [0, "tds-slider", {
+    static get style() { return sliderCss; }
+}, [256, "tds-slider", {
         "label": [1],
         "value": [1025],
         "min": [1],

package/dist/components/tds-spinner.js

@@ -1,20 +1,23 @@
-import { p as proxyCustomElement, H, h } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h } from './index.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 TdsSpinnerStyle0 = spinnerCss;
 
 const TdsSpinner$1 = /*@__PURE__*/ proxyCustomElement(class TdsSpinner extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** Size of the Spinner */
         this.size = 'lg';
+        /** Variant of the Spinner */
         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("div", { key: '2d27b4a94cd9dc205e11f18ecc6b249572912eac', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: 'a372dada808ed13b8c2c6ef4de9c559f59d9e9f2', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: '153f00da5e87ba55dc569b511cd184f93c1740c7', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
     }
-    static get style() { return TdsSpinnerStyle0; }
-}, [0, "tds-spinner", {
+    static get style() { return spinnerCss; }
+}, [256, "tds-spinner", {
         "size": [1],
         "variant": [1]
     }]);

package/dist/components/tds-step.js

@@ -1,8 +1,7 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-b390ece5.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.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 TdsStepStyle0 = stepCss;
 
 const propToStateMap = {
     orientation: 'orientation',
@@ -11,17 +10,14 @@ const propToStateMap = {
     hideLabels: 'hideLabels',
 };
 const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
-        this.index = undefined;
+        /** State of the Step */
         this.state = 'upcoming';
-        this.tdsAriaCurrent = undefined;
-        this.hideLabels = undefined;
-        this.size = undefined;
-        this.orientation = undefined;
-        this.labelPosition = undefined;
     }
     /* Needs to be onload to do this on any updates. */
     componentWillLoad() {
@@ -45,11 +41,11 @@ const TdsStep$1 = /*@__PURE__*/ proxyCustomElement(class TdsStep extends H {
         }
     }
     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: '871df74d99ed0bdf15fa82e0c2980b08b94735a8' }, h("div", { key: 'e108eb5e43390635fbd6020195cb7e6a4912c7c2', 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: '8940a00dcd0001d6d264aff8cbc9331d4d890d49', 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: 'daa62f4d9347c571d214b1b9eb68b7d56418aed2', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '68a20d3daded858cf1188f43747edb77ed2c9cbf', name: "label" }))))));
     }
     get el() { return this; }
-    static get style() { return TdsStepStyle0; }
-}, [1, "tds-step", {
+    static get style() { return stepCss; }
+}, [257, "tds-step", {
         "index": [1],
         "state": [1],
         "tdsAriaCurrent": [1, "tds-aria-current"],

package/dist/components/tds-stepper.js

@@ -1,20 +1,31 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.js';
 
 const stepperCss = ":host [role=list]{display:flex;justify-content:space-evenly;min-width:100%}:host [role=list]:not(.text-position-aside){display:table;table-layout:fixed;width:100%;list-style:none}:host [role=list].vertical{height:100%;display:flex;flex-direction:column;justify-content:unset;gap:52px}:host [role=list].vertical.sm{gap:36px}:host [role=list].horizontal.text-position-aside{justify-content:unset}";
-const TdsStepperStyle0 = stepperCss;
 
 const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.internalTdsPropsChange = createEvent(this, "internalTdsPropsChange", 6);
+        /** The orientation the Steps */
         this.orientation = 'horizontal';
+        /** Text position, only available on a direction: horizontal */
         this.labelPosition = 'below';
+        /** Size of the component and it's children. */
         this.size = 'lg';
+        /** Hides the label for the child components if true. */
         this.hideLabels = false;
+        /** ID used for internal Stepper functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,
+         * as the default ID is random and will be different every time.
+         */
         this.stepperId = generateUniqueId();
+        /** Label for the stepper component, for screen reader users */
         this.tdsAriaLabel = 'Progress steps';
     }
     componentWillLoad() {
@@ -60,8 +71,8 @@ const TdsStepper$1 = /*@__PURE__*/ proxyCustomElement(class TdsStepper extends H
         "size": ["handleSizeChange"],
         "hideLabels": ["handleHideLabelsChange"]
     }; }
-    static get style() { return TdsStepperStyle0; }
-}, [1, "tds-stepper", {
+    static get style() { return stepperCss; }
+}, [257, "tds-stepper", {
         "orientation": [1],
         "labelPosition": [1, "label-position"],
         "size": [1],

package/dist/components/tds-table-body-input-wrapper.js

@@ -1,15 +1,17 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-b390ece5.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.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 TdsTableBodyInputWrapperStyle0 = tableBodyInputWrapperCss;
 
 const relevantTableProps = ['compactDesign'];
 const TdsTableBodyInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyInputWrapper extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Controls if the edit icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -89,15 +91,15 @@ const TdsTableBodyInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsTab
         }
     }
     render() {
-        return (h(Host, { key: '47496dfe7467e43cede5af53d6c30fe17c116eaf', class: {
+        return (h(Host, { key: '8030b00df873e3a242708a9b4fe88b4ad618d069', 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));
     }
     get host() { return this; }
-    static get style() { return TdsTableBodyInputWrapperStyle0; }
-}, [1, "tds-table-body-input-wrapper", {
+    static get style() { return tableBodyInputWrapperCss; }
+}, [257, "tds-table-body-input-wrapper", {
         "showIcon": [4, "show-icon"],
         "renderSlot": [32],
         "inputFocused": [32],