@scania/tegel 1.40.0-stencil-core-4.38.1-beta.0 → 1.40.0-ts-strict-mode-beta.0

package/dist/cjs/tds-side-menu-item.cjs.entry.js

@@ -1,23 +1,26 @@
 'use strict';
 
-var index = require('./index-Cpz8G-hs.js');
-var dfs = require('./dfs-Clg9RCmq.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca8040ad.js');
+const dfs = require('./dfs-84f7f63e.js');
 
 const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:10px;padding:0 22px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component ::slotted(tds-side-menu-user),:host .component-has-user ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:16px;padding:0 22px 0 16px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component tds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px;z-index:1}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button),:host .component:hover ::slotted(tds-side-menu-user){background-color:var(--tds-sidebar-item-state-hover);position:relative}:host .component:hover ::slotted(a)::before,:host .component:hover ::slotted(button)::before,:host .component:hover ::slotted(tds-side-menu-user)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-side-menu-item-hover-indicator)}:host .component:hover ::slotted(a:focus-visible),:host .component:hover ::slotted(button:focus-visible),:host .component:hover ::slotted(tds-side-menu-user:focus-visible){background-color:var(--tds-sidebar-item-state-hover);position:relative}:host .component:hover ::slotted(a:focus-visible)::before,:host .component:hover ::slotted(button:focus-visible)::before,:host .component:hover ::slotted(tds-side-menu-user:focus-visible)::before{content:\"\";position:absolute;top:3px;left:3px;width:4px;height:calc(100% - 6px);background-color:var(--tds-side-menu-item-hover-indicator)}:host .component:active ::slotted(a),:host .component:active ::slotted(button),:host .component:active ::slotted(tds-side-menu-user){background-color:var(--tds-sidemenu-item-state-active);position:relative}:host .component:active ::slotted(a)::before,:host .component:active ::slotted(button)::before,:host .component:active ::slotted(tds-side-menu-user)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-side-menu-item-pressed-indicator)}:host .component:active ::slotted(a:focus-visible),:host .component:active ::slotted(button:focus-visible),:host .component:active ::slotted(tds-side-menu-user:focus-visible){background-color:var(--tds-sidemenu-item-state-active);position:relative}:host .component:active ::slotted(a:focus-visible)::before,:host .component:active ::slotted(button:focus-visible)::before,:host .component:active ::slotted(tds-side-menu-user:focus-visible)::before{content:\"\";position:absolute;top:3px;left:3px;width:4px;height:calc(100% - 6px);background-color:var(--tds-side-menu-item-pressed-indicator)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center;position:relative}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button),:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user){background-color:var(--tds-sidebar-item-state-selected);position:relative}:host .component-selected:not(:host .component-active) ::slotted(a)::before,:host .component-selected:not(:host .component-active) ::slotted(button)::before,:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}:host .component-selected:not(:host .component-active) ::slotted(a:focus-visible),:host .component-selected:not(:host .component-active) ::slotted(button:focus-visible),:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user:focus-visible){background-color:var(--tds-sidebar-item-state-selected);position:relative}:host .component-selected:not(:host .component-active) ::slotted(a:focus-visible)::before,:host .component-selected:not(:host .component-active) ::slotted(button:focus-visible)::before,:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user:focus-visible)::before{content:\"\";position:absolute;top:3px;left:3px;width:4px;height:calc(100% - 6px);background-color:var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
+const TdsSideMenuItemStyle0 = sideMenuItemCss;
 
 const TdsSideMenuItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /** If the item should appear selected. */
         this.selected = false;
-        /** If the item should appear active. Can be used when the item is
-         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
         this.collapsed = false;
         this.hasUserComponent = false;
     }
     findSlottedAndExecute(searchPredicate, callback) {
-        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        var _a;
+        const assignedElements = (_a = this.slotEl) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true });
+        if (!(assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.length))
+            return;
         const firstSlottedElement = assignedElements[0];
         if (firstSlottedElement) {
             const foundElement = dfs.dfs(firstSlottedElement, searchPredicate);
@@ -58,16 +61,19 @@ const TdsSideMenuItem = class {
         // closest() will return null if side-menu-item is inside a shadowRoot that
         // does not contain a side-menu. This is the case for the side-menu-dropdown.
         this.sideMenuEl = this.host.closest('tds-side-menu');
-        this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+        this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     componentDidLoad() {
-        this.slotEl = this.host.shadowRoot.querySelector('slot');
+        var _a, _b;
+        this.slotEl = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) !== null && _b !== void 0 ? _b : null;
         this.updateSlottedElements();
         this.updateHasUserComponent();
-        this.slotEl.addEventListener('slotchange', () => {
-            this.updateSlottedElements();
-            this.updateHasUserComponent();
-        });
+        if (this.slotEl) {
+            this.slotEl.addEventListener('slotchange', () => {
+                this.updateSlottedElements();
+                this.updateHasUserComponent();
+            });
+        }
     }
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
@@ -75,16 +81,16 @@ const TdsSideMenuItem = class {
         this.updateHasUserComponent();
     }
     render() {
-        return (index.h(index.Host, { key: '94dc12f57a0eedb5ab1528394352c4a7fcea55ff' }, index.h("div", { key: '3336a6d1af3c573fdbbbf590fae2be3381c89163', class: {
+        return (index.h(index.Host, { key: 'ff51604316231f08db7135c89336aa40a34ca780' }, index.h("div", { key: '7ba6d6ad1646cdcca89ba014eb20115ead57a9cc', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
                 'component-has-user': this.hasUserComponent,
-            } }, index.h("slot", { key: '5c92976a5aa367142e2af23fdacb6d67c3d2b36c' }))));
+            } }, index.h("slot", { key: '43b400894c86a51cc1dbe910f8eecab31fad4c45' }))));
     }
     get host() { return index.getElement(this); }
 };
-TdsSideMenuItem.style = sideMenuItemCss;
+TdsSideMenuItem.style = TdsSideMenuItemStyle0;
 
 exports.tds_side_menu_item = TdsSideMenuItem;

package/dist/cjs/tds-side-menu-overlay.cjs.entry.js

@@ -1,8 +1,11 @@
 'use strict';
 
-var index = require('./index-Cpz8G-hs.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca8040ad.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 = class {
     constructor(hostRef) {
@@ -12,6 +15,6 @@ const TdsSideMenuOverlay = class {
         return (index.h(index.Host, { key: '15e4b102af83962079d9bc9104c3e4d243cea947' }, index.h("div", { key: '52ed88b0ccf8ae02c3d83849f610475b0ad55065' })));
     }
 };
-TdsSideMenuOverlay.style = sideMenuOverlayCss;
+TdsSideMenuOverlay.style = TdsSideMenuOverlayStyle0;
 
 exports.tds_side_menu_overlay = TdsSideMenuOverlay;

package/dist/cjs/tds-side-menu-user-image_2.cjs.entry.js

@@ -1,30 +1,38 @@
 'use strict';
 
-var index = require('./index-Cpz8G-hs.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca8040ad.js');
 
 const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
+const TdsSideMenuUserImageStyle0 = sideMenuUserImageCss;
 
 const TdsSideMenuUserImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.src = undefined;
+        this.alt = undefined;
     }
     render() {
         return (index.h(index.Host, { key: '62b6a38f0705b052cb4d5b9379bc77662f66c505' }, index.h("slot", { key: '99aeba48272e512ce419a934cb4147052a5e0190' }), this.src && index.h("img", { key: '352e0a3f93558b298835afbfe72193cdbebcffa4', src: this.src, alt: this.alt })));
     }
 };
-TdsSideMenuUserImage.style = sideMenuUserImageCss;
+TdsSideMenuUserImage.style = TdsSideMenuUserImageStyle0;
 
 const sideMenuUserLabelCss = ":host{display:block;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--tds-grey-500)}";
+const TdsSideMenuUserLabelStyle0 = sideMenuUserLabelCss;
 
 const TdsSideMenuUserLabel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.heading = undefined;
+        this.subheading = undefined;
     }
     render() {
         return (index.h(index.Host, { key: '5b045eb527ee378f50f6a1bec3a383b9c0f352ef' }, this.heading, this.subheading && index.h("div", { key: '3e106d0bdbe62438e8d2edbf73f43324cb78ffdd', class: "subheading" }, this.subheading)));
     }
 };
-TdsSideMenuUserLabel.style = sideMenuUserLabelCss;
+TdsSideMenuUserLabel.style = TdsSideMenuUserLabelStyle0;
 
 exports.tds_side_menu_user_image = TdsSideMenuUserImage;
 exports.tds_side_menu_user_label = TdsSideMenuUserLabel;

package/dist/cjs/tds-side-menu-user.cjs.entry.js

@@ -1,17 +1,24 @@
 'use strict';
 
-var index = require('./index-Cpz8G-hs.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca8040ad.js');
 
 const sideMenuUserCss = ":host{display:flex;align-items:center;gap:16px;height:68px}";
+const TdsSideMenuUserStyle0 = sideMenuUserCss;
 
 const TdsSideMenuUser = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.heading = undefined;
+        this.subheading = undefined;
+        this.imgSrc = undefined;
+        this.imgAlt = undefined;
     }
     render() {
         return (index.h(index.Host, { key: 'fe3a852379cfa0e6822cac54e84937b5c8365115' }, index.h("tds-side-menu-user-image", { key: 'd5c702b1f3dcc8d2d46d411c72e13becaab1062d', src: this.imgSrc, alt: this.imgAlt }, index.h("slot", { key: '4ded196cd1d6ab0e13488787bbb1d4aa5feb3ebd', name: "image" })), index.h("tds-side-menu-user-label", { key: 'efee803dbe911144f11660ff1529a2de8c3cca62', heading: this.heading, subheading: this.subheading })));
     }
 };
-TdsSideMenuUser.style = sideMenuUserCss;
+TdsSideMenuUser.style = TdsSideMenuUserStyle0;
 
 exports.tds_side_menu_user = TdsSideMenuUser;

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

@@ -1,8 +1,11 @@
 'use strict';
 
-var index = require('./index-Cpz8G-hs.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca8040ad.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 = class {
@@ -11,19 +14,6 @@ const TdsSideMenu = class {
         this.tdsCollapse = index.createEvent(this, "tdsCollapse", 7);
         this.internalTdsCollapse = index.createEvent(this, "internalTdsCollapse", 6);
         this.internalTdsSideMenuPropChange = index.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) {
@@ -34,6 +24,13 @@ const TdsSideMenu = class {
                 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) {
@@ -47,7 +44,8 @@ const TdsSideMenu = class {
         this.initialCollapsedState = this.collapsed;
     }
     componentDidLoad() {
-        const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
+        var _a;
+        const upperSlot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
         const upperSlotElements = upperSlot.assignedElements();
         const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
         if (!hasUpperSlotElements) {
@@ -91,7 +89,7 @@ const TdsSideMenu = class {
         }
     }
     getFocusableElements() {
-        var _a;
+        var _a, _b, _c;
         const focusableSelectors = [
             'a[href]',
             'button:not([disabled])',
@@ -100,11 +98,13 @@ const TdsSideMenu = class {
             'select:not([disabled])',
             '[tabindex]:not([tabindex="-1"])',
         ].join(',');
-        const focusableInShadowRoot = Array.from(this.host.shadowRoot.querySelectorAll(focusableSelectors));
+        const focusableInShadowRoot = Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelectors)) !== null && _b !== void 0 ? _b : []);
         const focusableInSlots = Array.from(this.host.querySelectorAll(focusableSelectors));
-        const closeBtn = (_a = this.host
-            .querySelector('[slot="close-button"]')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('button');
-        let focusableElements = [...focusableInShadowRoot, ...focusableInSlots];
+        const slottedBtn = this.host.querySelector('[slot="close-button"]');
+        let closeBtn;
+        if (slottedBtn)
+            closeBtn = (_c = slottedBtn.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('button');
+        const focusableElements = [...focusableInShadowRoot, ...focusableInSlots];
         if (closeBtn)
             focusableElements.push(closeBtn);
         /** Focusable elements */
@@ -145,16 +145,16 @@ const TdsSideMenu = class {
         this.collapsed = event.detail.collapsed;
     }
     render() {
-        return (index.h(index.Host, { key: '62d159fdff0e4dd3d2a93e0c5542b8e672e3f287', class: {
+        return (index.h(index.Host, { key: '9e5d7f1ba74c0d6cbc0718e3ee484e158dd285c4', class: {
                 'menu-opened': this.open,
                 'menu-persistent': this.persistent,
                 'menu-collapsed': this.collapsed,
-            }, "aria-expanded": !this.collapsed ? 'true' : 'false' }, index.h("div", { key: '17134ffc1c3ca6658f4ff87c203ca3b6ba991b83', class: {
+            }, "aria-expanded": !this.collapsed ? 'true' : 'false' }, index.h("div", { key: '2232f6fdde0d7bf4b6225b3007feeb5b86699dda', class: {
                 'wrapper': true,
                 'state-upper-slot-empty': this.isUpperSlotEmpty,
                 'state-open': this.open,
                 'state-closed': !this.open,
-            } }, index.h("slot", { key: '8ed1f309c2188e6de12b874198c36a4698d7a69f', name: "overlay" }), index.h("aside", { key: '45702b7ff79693b31565550fc1985bfd64e45f92', class: `menu` }, index.h("div", { key: 'e799983a07a07ad0f4cac8e962e1748d08107b6b', role: "navigation" }, index.h("slot", { key: '4550b56dae039b94005dd58c8c5cb9818c3ab48a', name: "close-button" }), index.h("div", { key: 'ad2457482eb6dc9b08428f36078d53143f7b5168', class: "tds-side-menu-wrapper" }, index.h("ul", { key: '541323ca57ed67565c848a984bd3ac210ce6f135', class: `tds-side-menu-list tds-side-menu-list-upper` }, index.h("li", { key: '6248720390640a1166e1158caa0f50164fe1dfad' }, index.h("slot", { key: 'b3d24d582d4781fef041a2c099681fd538d01910' }))), index.h("ul", { key: '0a5f76474b4b3851d790ab8f698dbea9fd0fda05', class: `tds-side-menu-list tds-side-menu-list-end` }, index.h("li", { key: '576cf3e91cac7c1a21e6b35105475f1f443c2f45' }, index.h("slot", { key: '71f9c2d1c061401ef26daf68c7801b5665a25d03', name: "end" })))), index.h("slot", { key: '41805c2bb7c66f74f47edd2393a9a3452132c769', name: "sticky-end" }))))));
+            } }, index.h("slot", { key: '26fc446848ef685421cb9fed4b9c633d76104c1c', name: "overlay" }), index.h("aside", { key: 'd91e1e9d72b8adfa9cd4fb432145cc3ca80574bf', class: `menu` }, index.h("div", { key: '2b7c94d205caec161cf6cf0442f917828fe3d665', role: "navigation" }, index.h("slot", { key: 'c7e11cd09171a49363a765fac87da5333247943d', name: "close-button" }), index.h("div", { key: 'd7273516d1b4104c0736ec547cf47aba5f094d99', class: "tds-side-menu-wrapper" }, index.h("ul", { key: '46cb7afded919e25b9419cfffb85cbfd06c99b6f', class: `tds-side-menu-list tds-side-menu-list-upper` }, index.h("li", { key: 'b337af4217469b83d70faf380c3f36d6689c071d' }, index.h("slot", { key: 'f5fb8d9a9be3d1e121c9ccad7086a56993d739b6' }))), index.h("ul", { key: '159157ffa0881b8731c3b62644007dcefd72670f', class: `tds-side-menu-list tds-side-menu-list-end` }, index.h("li", { key: '3e9fbf4ba3823ee12c9d5b9bfbc4c6b45a7599de' }, index.h("slot", { key: '385756d7a9f855921cfa835e26ab02bc7cc01833', name: "end" })))), index.h("slot", { key: '53c64695d4e490bf180fe8e1dd52ab6b5e0f0447', name: "sticky-end" }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -162,6 +162,6 @@ const TdsSideMenu = class {
         "open": ["onOpenChange"]
     }; }
 };
-TdsSideMenu.style = sideMenuCss;
+TdsSideMenu.style = TdsSideMenuStyle0;
 
 exports.tds_side_menu = TdsSideMenu;

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

@@ -1,51 +1,18 @@
 'use strict';
 
-var index = require('./index-Cpz8G-hs.js');
-var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca8040ad.js');
+const generateUniqueId = require('./generateUniqueId-e3fc9863.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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tdsChange = index.createEvent(this, "tdsChange", 6);
         this.tdsInput = index.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.generateUniqueId();
-        /** Sets the read only aria label for the input field */
-        this.tdsReadOnlyAriaLabel = '';
         this.wrapperElement = null;
         this.thumbElement = null;
         this.thumbInnerElement = null;
@@ -61,12 +28,30 @@ const TdsSlider = class {
         this.supposedValueSlot = -1;
         this.resizeObserverAdded = false;
         this.resetEventListenerAdded = false;
+        this.formElement = null;
         this.ariaLiveElement = null;
-        this.announcementDebounceTimeout = null;
         this.resetToInitialValue = () => {
             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.generateUniqueId();
+        this.tdsReadOnlyAriaLabel = '';
     }
     roundToStep(val) {
         const stepNum = parseFloat(this.step);
@@ -107,21 +92,22 @@ const TdsSlider = class {
         }
     }
     handleRelease(event) {
+        var _a, _b, _c;
         if (!this.thumbGrabbed) {
             const clickedOnTrack = event.target === this.trackElement || event.target === this.trackFillElement;
             if (clickedOnTrack) {
                 this.thumbCore(event);
-                this.trackElement.focus();
+                (_a = this.trackElement) === null || _a === void 0 ? void 0 : _a.focus();
             }
             return;
         }
         this.thumbGrabbed = false;
-        this.thumbInnerElement.classList.remove('pressed');
+        (_b = this.thumbInnerElement) === null || _b === void 0 ? void 0 : _b.classList.remove('pressed');
         if (this.thumbElement) {
             this.thumbElement.setAttribute('aria-grabbed', 'false');
         }
         this.updateValue(event);
-        this.trackElement.focus();
+        (_c = this.trackElement) === null || _c === void 0 ? void 0 : _c.focus();
     }
     handleMove(event) {
         if (!this.thumbGrabbed) {
@@ -165,8 +151,11 @@ const TdsSlider = class {
         return snappedLocalLeft;
     }
     thumbCore(event) {
+        var _a;
         const numTicks = parseInt(this.ticks);
-        const trackRect = this.trackElement.getBoundingClientRect();
+        const trackRect = (_a = this.trackElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!trackRect)
+            return;
         let localLeft = 0;
         if (event.type === 'mousemove' || event.type === 'mouseup') {
             localLeft = event.clientX - trackRect.left;
@@ -181,7 +170,9 @@ const TdsSlider = class {
             localLeft = this.updateSupposedValueSlot(localLeft);
         }
         this.thumbLeft = this.constrainThumb(localLeft);
-        this.thumbElement.style.left = `${this.thumbLeft}px`;
+        if (this.thumbElement) {
+            this.thumbElement.style.left = `${this.thumbLeft}px`;
+        }
         this.updateValue(event);
     }
     updateTrack() {
@@ -197,6 +188,8 @@ const TdsSlider = class {
         // Debounce announcements to prevent too many rapid announcements
         clearTimeout(this.announcementDebounceTimeout);
         this.announcementDebounceTimeout = setTimeout(() => {
+            if (!this.ariaLiveElement)
+                return;
             this.ariaLiveElement.textContent = `${this.label ? this.label + ' ' : ''}${this.value} of ${this.max}`;
         }, 50);
     }
@@ -320,11 +313,12 @@ const TdsSlider = class {
         }
     }
     grabThumb() {
+        var _a;
         if (this.readOnly) {
             return;
         }
         this.thumbGrabbed = true;
-        this.thumbInnerElement.classList.add('pressed');
+        (_a = this.thumbInnerElement) === null || _a === void 0 ? void 0 : _a.classList.add('pressed');
         if (this.thumbElement) {
             this.thumbElement.setAttribute('aria-grabbed', 'true');
         }
@@ -417,7 +411,8 @@ const TdsSlider = class {
                 this.calculateThumbLeftFromValue(this.value);
                 this.updateTrack();
             });
-            resizeObserver.observe(this.wrapperElement);
+            if (this.wrapperElement)
+                resizeObserver.observe(this.wrapperElement);
         }
         this.calculateThumbLeftFromValue(this.value);
         this.updateTrack();
@@ -454,36 +449,36 @@ const TdsSlider = class {
     }
     render() {
         const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (index.h("div", { key: '3a496ff494a47cb2e7f777145731b2b0a99619e5', class: {
+        return (index.h("div", { key: '24887d4b2784913aed5eca30aad868b29bc3dc71', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, index.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 }), index.h("div", { key: '38d7dc7f03e4ce5398f47382ac44b159d03cc9a9', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+            } }, index.h("input", { key: 'a30068ce649a2a4154df73f076b0d889898e2220', 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 }), index.h("div", { key: '38a8a4993efb95dc74a6b998a4a6dce68a57193d', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), index.h("div", { key: '564131065550bb6ef78b813791696af866275b60', class: {
+            } }), index.h("div", { key: 'dbdcd7a7524249488066f6cbc7ccda1edc125348', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            }, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("label", { key: 'cc0dd61feaeb64fa866ceee68f03e59844572327', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (index.h("div", { key: 'd95cfd517b1d810ba60f47d8f79f27fbcb11cb84', class: "tds-slider__input-values" }, index.h("div", { key: '253ecd4768fe8ac57e8fb342ed1e363abc9da5cb', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (index.h("div", { key: '84a35f8c63bf5b723d4244ec8f7ea1dd7cbffc20', class: "tds-slider__controls" }, index.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' }, index.h("tds-icon", { key: '70e6604021a651eadcbaf7767b03f2e62034abe5', name: "minus", size: "16px" })))), index.h("div", { key: '53550f817e1a032e0e91200752e7d1eeb23ded34', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (index.h("div", { key: 'f59130b6cdb011c01eb81d5e18cf7e952b96c68e', class: "tds-slider__value-dividers-wrapper" }, index.h("div", { key: '66f66ceae09f21462e3f28c49844b10e0182ec49', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { key: '00f9d38e9aba338091af66ced5f559378354cffd', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("label", { key: '703fef163564db3dab89f7ef62c8ec8ae849091a', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (index.h("div", { key: '61e0a370c74b04c29b7c3d8f227727df2d72e2e1', class: "tds-slider__input-values" }, index.h("div", { key: '080c7a8d5fe68231a33946284eaf0b42509ae2aa', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (index.h("div", { key: 'c281e3c27afb09bbde92bb45b95494bda73a2d1e', class: "tds-slider__controls" }, index.h("div", { key: '43388973041f6257683c1e95c28273b36329584b', 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' }, index.h("tds-icon", { key: 'be17662d98c4e89ac549d7604fb8ef039ec1a4ff', name: "minus", size: "16px" })))), index.h("div", { key: '2d34951d542b45ff4fce0869bd9877626b414641', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (index.h("div", { key: '991096492d690f53e0d597bd05d4f9f3fa875831', class: "tds-slider__value-dividers-wrapper" }, index.h("div", { key: 'e2362ac7b9af796e0d4b2961c99d6ef850f873fc', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { key: '303410bc80f3fc1a49c1a1954f287151ba1397df', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
             }, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
                 if (this.thumbElement) {
                     this.thumbElement.focus();
                 }
-            } }, index.h("div", { key: '20ea7060588fc4e81be9e2e3d6e5a7c585b6b867', class: "tds-slider__track-fill", ref: (el) => {
+            } }, index.h("div", { key: '458f4a54a0ffc5eef7ad1933ba1713f378e03bb2', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), index.h("div", { key: 'd6c6155ee44d443dc58ed1c463e927e8de6808b6', class: "tds-slider__thumb", ref: (el) => {
+            } }), index.h("div", { key: '09f5c914b3e31f40cbc5114ba11ac8ed6b6c10e3', 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 && (index.h("div", { key: '8ddf95ae707a6bf086f6c414fca62098f7974caf', class: "tds-slider__value" }, this.value, index.h("svg", { key: '9193dc47663210d904271d10a1e3ffbaad3073bf', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" })))), index.h("div", { key: '183f49eda3134b87e5b65334265d44fe404a9e1d', 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 && (index.h("div", { key: '915c5a0873d719e716a9eda6f24df4f289dcc3e3', class: "tds-slider__value" }, this.value, index.h("svg", { key: 'd1ad51a448a9314c8a9dc87e5b4c969d9699833f', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '84dd5e1bfdddb3f96ce260fde63ec01979e2e8f7', 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" })))), index.h("div", { key: '3c2bd4378b7d2f894bd04af1d0d4f68472d94129', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (index.h("div", { key: '00e135462f95a4ee21070c25e0b507e4931257ed', class: "tds-slider__input-values" }, index.h("div", { key: 'ad8029ecff8f448380f291629ee803ee5634bf6e', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), index.h("div", { key: 'cb7460d3946debbc138b2ae88b61ff9a288ca2ae', class: "tds-slider__input-field-wrapper" }, index.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 && (index.h("div", { key: '2b85ddaf9e31f702773212326f55e8eb4737e3da', class: "tds-slider__controls" }, index.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' }, index.h("tds-icon", { key: 'd66d1a1d49da54d1cafca2872b8462b126154684', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (index.h("div", { key: '8d7b06d47eb9c5b8adef909a63b4017143025477', class: "tds-slider__input-values" }, index.h("div", { key: '1e5e6cb7d0522ca0e89e67fd0125684b32e2c4f6', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), index.h("div", { key: 'e3a5d242963f2868f2f26674243c36c634422501', class: "tds-slider__input-field-wrapper" }, index.h("tds-text-field", { key: '840ddc76488d4d1de29be8d3b2032d57894d2b7a', 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 && (index.h("div", { key: 'c71f7b90d4565cccdb41ef56e1dc3485506baad1', class: "tds-slider__controls" }, index.h("div", { key: 'c968cc1187252f95b5953a7a91437a09d0255d72', 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' }, index.h("tds-icon", { key: '8e3488bcad15f4f6dd7182b066a905019d87d20d', name: "plus", size: "16px" })))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["handleValueUpdate"]
     }; }
 };
-TdsSlider.style = sliderCss;
+TdsSlider.style = TdsSliderStyle0;
 
 exports.tds_slider = TdsSlider;

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

@@ -1,21 +1,22 @@
 'use strict';
 
-var index = require('./index-Cpz8G-hs.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca8040ad.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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /** Size of the Spinner */
         this.size = 'lg';
-        /** Variant of the Spinner */
         this.variant = 'standard';
     }
     render() {
         return (index.h("div", { key: '2d27b4a94cd9dc205e11f18ecc6b249572912eac', "aria-live": "assertive", role: "status", "aria-label": "loading" }, index.h("svg", { key: 'a372dada808ed13b8c2c6ef4de9c559f59d9e9f2', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, index.h("circle", { key: '153f00da5e87ba55dc569b511cd184f93c1740c7', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
     }
 };
-TdsSpinner.style = spinnerCss;
+TdsSpinner.style = TdsSpinnerStyle0;
 
 exports.tds_spinner = TdsSpinner;