@scania/tegel 0.0.10 → 0.0.11

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { a as appendChildElement, b as appendHiddenInput, f as findNextFocusableItem, c as findPreviousFocusableItem } from './utils-74fb1bed.js';
+import { a as appendChildElement, b as appendHiddenInput, f as findNextFocusableItem, c as findPreviousFocusableItem } from './utils-8544b156.js';
 
 const dropdownCss = ":host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:4px 4px 0 0}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color)}:host button.value{color:var(--tds-dropdown-value-color)}:host button:focus{border-bottom-color:transparent}:host button:focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom-color:transparent}:host .filter.focus::before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{margin-right:16px;z-index:101}:host{display:block;position:relative;z-index:100;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{position:absolute;margin-top:1px;width:100%;transform-origin:top;transition:transform 0.2s ease-in-out;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:0 0 4px 4px;overflow-y:auto}:host .dropdown-list::-webkit-scrollbar{width:4px;background-color:inherit}:host .dropdown-list::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .dropdown-list ::-webkit-scrollbar-button{height:0;width:0}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:4px 4px 0 0}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);visibility:hidden}:host .dropdown-list.open{transform:scaleY(1)}:host .dropdown-list .no-result{display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host tds-icon{transition:transform 0.2s ease-in-out}:host tds-icon.open{transform:rotateZ(180deg)}";
 
@@ -25,18 +25,22 @@ const TdsDropdown = class {
                 ? [...this.selection, { value: element.value, label: element.textContent }]
                 : [{ value: element.value, label: element.textContent }];
             }
+            else {
+              element.setSelected(false);
+            }
           });
         }
         else {
           if (this.defaultValue === element.value) {
-            this.reset();
             element.setSelected(true);
             this.selection = [{ value: element.value, label: element.textContent }];
           }
+          else {
+            element.setSelected(false);
+          }
         }
         return element;
       });
-      this.handleChange();
     };
     this.getOpenDirection = () => {
       var _a, _b, _c, _d, _e;
@@ -61,14 +65,14 @@ const TdsDropdown = class {
     this.handleFilter = (event) => {
       this.tdsInput.emit(event);
       const query = event.target.value.toLowerCase();
-      /* Check if the query is empty, and if so show all options */
+      /* Check if the query is empty, and if so, show all options */
       if (query === '') {
         this.children = this.children.map((element) => {
           element.removeAttribute('hidden');
           return element;
         });
         this.filterResult = null;
-        /* Hide the options that does not match the query */
+        /* Hide the options that do not match the query */
       }
       else {
         this.filterResult = this.children.filter((element) => {
@@ -176,7 +180,7 @@ const TdsDropdown = class {
       return;
     }
     if (event.key === 'ArrowDown') {
-      /* Get the index of the currently focus index, if there is no
+      /* Get the index of the current focus index, if there is no
       nextElementSibling return the index for the first child in our Dropdown.  */
       const startingIndex = activeElement.nextElementSibling
         ? this.children.findIndex((element) => element === activeElement.nextElementSibling)
@@ -185,7 +189,7 @@ const TdsDropdown = class {
       this.children[elementIndex].focus();
     }
     else if (event.key === 'ArrowUp') {
-      /* Get the index of the currently focus index, if there is no
+      /* Get the index of the current focus index, if there is no
       previousElementSibling return the index for the first last in our Dropdown.  */
       const startingIndex = activeElement.nextElementSibling
         ? this.children.findIndex((element) => element === activeElement.previousElementSibling)
@@ -197,7 +201,8 @@ const TdsDropdown = class {
       this.open = false;
     }
   }
-  // If the Dropdown gets closed this sets the value of the drodpown to the current selection labels or null if no selection is made.
+  // If the Dropdown gets closed,
+  // this sets the value of the dropdown to the current selection labels or null if no selection is made.
   handleOpenState() {
     var _a, _b;
     if (this.filter && this.multiselect) {

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { h as hasSlot } from './utils-74fb1bed.js';
+import { h as hasSlot } from './utils-8544b156.js';
 
-const footerCss = ":host{display:block}:host slot[name=top]::slotted(*){background-color:var(--tds-footer-top-background);padding:40px;display:grid;grid-template-columns:repeat(4, 1fr);row-gap:40px;width:100%}:host .footer-main{background-color:var(--tds-footer-main-background);padding:0 40px}:host .footer-main-top{padding:40px 0;display:flex;justify-content:space-between}:host slot[name=start]::slotted(*),:host slot[name=end]::slotted(*){display:flex;column-gap:24px}:host .footer-main-bottom{padding:40px 0;display:flex;justify-content:space-between;border-top:1px solid var(--tds-footer-main-divider)}:host .footer-main-bottom small.copyright{margin:0;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-footer-main-copyright)}:host .footer-main-bottom .brand{background-image:var(--tds-background-image-scania-wordmark-white-svg);background-repeat:no-repeat;background-size:117px;background-position:right;width:117px;height:20px}:host .footer-main-bottom .brand p{color:transparent;padding:0;margin:0;height:100%;visibility:hidden}@media all and (max-width: 992px){:host slot[name=top]::slotted(*){display:block;width:100%;padding:0}:host .footer-main{padding:0 24px}:host .footer-main-top{flex-direction:column;row-gap:48px;padding:24px 0}:host slot[name=end]::slotted(*){flex-direction:row;gap:8px}:host .footer-main-bottom{flex-direction:column;padding-bottom:32px}:host .footer-main-bottom p.copyright{padding-bottom:96px}:host .footer-main-bottom .brand{width:100%}}";
+const footerCss = ":host{display:block}:host slot[name=top]::slotted(*){box-sizing:border-box;background-color:var(--tds-footer-top-background);padding:40px;display:grid;grid-template-columns:repeat(4, 1fr);row-gap:40px;width:100%}:host .footer-main{background-color:var(--tds-footer-main-background);padding:0 40px}:host .footer-main-top{padding:40px 0;display:flex;justify-content:space-between}:host slot[name=start]::slotted(*),:host slot[name=end]::slotted(*){display:flex;column-gap:24px}:host .footer-main-bottom{padding:40px 0;display:flex;justify-content:space-between;border-top:1px solid var(--tds-footer-main-divider)}:host .footer-main-bottom small.copyright{margin:0;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-footer-main-copyright)}:host .footer-main-bottom .brand{background-image:var(--tds-background-image-scania-wordmark-white-svg);background-repeat:no-repeat;background-size:117px;background-position:right;width:117px;height:20px}:host .footer-main-bottom .brand p{color:transparent;padding:0;margin:0;height:100%;visibility:hidden}@media all and (max-width: 992px){:host slot[name=top]::slotted(*){display:block;width:100%;padding:0}:host .footer-main{padding:0 24px}:host .footer-main-top{flex-direction:column;row-gap:48px;padding:24px 0}:host slot[name=end]::slotted(*){flex-direction:row;gap:8px}:host .footer-main-bottom{flex-direction:column;padding-bottom:32px}:host .footer-main-bottom p.copyright{padding-bottom:96px}:host .footer-main-bottom .brand{width:100%}}";
 
 const TdsFooter = class {
   constructor(hostRef) {

package/dist/esm/tds-header-dropdown-list-item.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
 
-const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([type=lg]){height:var(--tds-header-height)}:host([type=lg]) ::slotted(a),:host([type=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
+const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([size=lg]){height:var(--tds-header-height)}:host([size=lg]) ::slotted(a),:host([size=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
 
 const TdsHeaderDropdownListItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.selected = false;
-    this.type = 'md';
+    this.size = 'md';
   }
   render() {
     return (h(Host, null, h("div", { class: {

package/dist/esm/tds-header-dropdown-list.entry.js

@@ -1,23 +1,23 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { d as getPreviousNestedChildOfSiblingsMatching, e as isHeadingElement } from './utils-74fb1bed.js';
+import { d as getPreviousNestedChildOfSiblingsMatching, e as isHeadingElement } from './utils-8544b156.js';
 
-const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([type=lg]){width:320px}";
+const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:unset;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([size=lg]){width:320px}";
 
 const TdsHeaderDropdownList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     // A Map to store the slots and their associated slotchange listeners.
     this.slotListeners = new Map();
-    this.type = 'md';
+    this.size = 'md';
     this.headingElement = undefined;
   }
   componentWillLoad() {
     const { children } = this.host;
-    // Set the type prop for each child, if they have such a property
+    // Set the size prop for each child, if they have such a property
     for (let i = 0; i < children.length; i++) {
       const child = children[i];
-      if ('type' in child) {
-        child.type = this.type;
+      if ('size' in child) {
+        child.size = this.size;
       }
     }
     let listRoot = this.host;

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { g as generateUniqueId } from './utils-74fb1bed.js';
+import { g as generateUniqueId } from './utils-8544b156.js';
 
 const headerDropdownCss = ":host{height:var(--tds-header-height);position:relative}:host .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-top-right-radius:0;border-top-left-radius:0}:host .menu::-webkit-scrollbar{width:4px;background-color:inherit}:host .menu::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .menu ::-webkit-scrollbar-button{height:0;width:0}:host .state-open .dropdown-icon{transform:rotatetds-z-index(180deg)}:host .state-open .button{position:relative;z-index:801}";
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { i as inheritAriaAttributes } from './utils-74fb1bed.js';
+import { i as inheritAriaAttributes } from './utils-8544b156.js';
 
 const headerHamburgerCss = ":host{color:var(--tds-white)}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:background 0.2s ease-in-out, color 0.2s ease-in-out}@media screen and (min-width: 992px){:host tds-header-item{display:none}:host([persistent]) tds-header-item{display:block}}";
 

package/dist/esm/tds-header-launcher-button.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { i as inheritAriaAttributes } from './utils-74fb1bed.js';
+import { i as inheritAriaAttributes } from './utils-8544b156.js';
 
 const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
 

package/dist/esm/tds-header-launcher-grid-title.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-23ee700b.js';
-import { g as generateUniqueId } from './utils-74fb1bed.js';
+import { g as generateUniqueId } from './utils-8544b156.js';
 
 const headerLauncherGridTitleCss = ".tds-header-launcher-grid-title{all:unset;box-sizing:border-box;font:var(--tds-detail-04);letter-spacing:var(--tds-detail-04-ls);color:var(--tds-header-app-launcher-grid-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color);margin:0}";
 

package/dist/esm/tds-header-launcher-grid.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { d as getPreviousNestedChildOfSiblingsMatching, e as isHeadingElement } from './utils-74fb1bed.js';
+import { d as getPreviousNestedChildOfSiblingsMatching, e as isHeadingElement } from './utils-8544b156.js';
 
 const headerLauncherGridCss = ".tds-header-launcher-grid{box-sizing:border-box;padding:12px;margin:0;list-style:none;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;border-radius:none}";
 

package/dist/esm/tds-header-launcher-list-item.entry.js

@@ -7,7 +7,7 @@ const TdsHeaderLauncherListItem = class {
     registerInstance(this, hostRef);
   }
   render() {
-    return (h(Host, null, h("tds-header-dropdown-list-item", { type: "lg" }, h("slot", null))));
+    return (h(Host, null, h("tds-header-dropdown-list-item", { size: "lg" }, h("slot", null))));
   }
 };
 TdsHeaderLauncherListItem.style = headerLauncherListItemCss;

package/dist/esm/tds-header-launcher-list-title.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { g as generateUniqueId } from './utils-74fb1bed.js';
+import { g as generateUniqueId } from './utils-8544b156.js';
 
 const headerLauncherListTitleCss = ".tds-header-launcher-list-title{all:unset;box-sizing:border-box;font:var(--tds-detail-06);letter-spacing:var(--tds-detail-06-ls);color:var(--tds-header-app-launcher-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color);margin:0}";
 

package/dist/esm/tds-header-launcher-list.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-23ee700b.js';
-import { g as generateUniqueId } from './utils-74fb1bed.js';
+import { g as generateUniqueId } from './utils-8544b156.js';
 
 const TdsHeaderLauncherList = class {
   constructor(hostRef) {
@@ -7,7 +7,7 @@ const TdsHeaderLauncherList = class {
     this.uuid = generateUniqueId();
   }
   render() {
-    return (h(Host, null, h("tds-header-dropdown-list", { type: "lg" }, h("slot", null))));
+    return (h(Host, null, h("tds-header-dropdown-list", { size: "lg" }, h("slot", null))));
   }
 };
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { g as generateUniqueId, i as inheritAriaAttributes } from './utils-74fb1bed.js';
+import { g as generateUniqueId, i as inheritAriaAttributes } from './utils-8544b156.js';
 
 const headerLauncherCss = ":host .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-radius:0}:host .wrapper .menu::-webkit-scrollbar{width:4px;background-color:inherit}:host .wrapper .menu::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .wrapper .menu ::-webkit-scrollbar-button{height:0;width:0}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:801}";
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { u as updateListChildrenRoles, i as inheritAriaAttributes } from './utils-74fb1bed.js';
+import { u as updateListChildrenRoles, i as inheritAriaAttributes } from './utils-8544b156.js';
 
 const headerCss = "html,:root{--tds-nav-dropdown-menu-box:0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);--tds-nav-dropdown-item-border-radius:0 0 4px 4px;--tds-font-family-headline:\"Scania Sans Headline\", arial, helvetica, sans-serif}tds-header{display:block;height:var(--tds-header-height);background-color:var(--tds-header-background);width:100%;z-index:300}nav{box-sizing:border-box;background-color:var(--tds-header-background);width:100%;display:block}nav *{box-sizing:border-box}nav .tds-header-component-list{height:var(--tds-header-height);all:unset;display:flex;justify-content:start;align-items:center}nav tds-header-dropdown,nav tds-header-item{display:none}nav .tds-header-middle-spacer{all:unset;display:block;flex-grow:1;height:var(--tds-header-height);border-right:1px solid var(--tds-header--basic-element-border)}@media screen and (min-width: 992px){nav tds-header-dropdown,nav tds-header-item{display:block}}nav tds-header-item:nth-child(3),nav tds-header-dropdown:nth-child(3){border-left:1px solid var(--tds-header--basic-element-border)}";
 

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

@@ -12,7 +12,7 @@ const TdsLink = class {
     this.host.children[0].classList.add('tds-link-component');
   }
   render() {
-    return (h("div", { class: `
+    return (h("span", { class: `        
           ${this.disabled ? 'disabled' : ''}
           ${!this.underline ? 'no-underline' : ''}
           ` }, h("slot", null)));

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

@@ -6,7 +6,7 @@ const TdsMessage = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.getIconName = () => {
-      switch (this.type) {
+      switch (this.variant) {
         case 'information':
           return 'info';
         case 'error':
@@ -21,13 +21,13 @@ const TdsMessage = class {
     };
     this.header = undefined;
     this.modeVariant = null;
-    this.type = 'information';
+    this.variant = 'information';
     this.noIcon = false;
     this.minimal = false;
   }
   render() {
     return (h(Host, null, h("div", { class: `
-        wrapper ${this.type}
+        wrapper ${this.variant}
         ${this.minimal ? 'minimal' : ''}
         ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, this.header && h("div", { class: "header" }, this.header), !this.minimal && (h("div", { class: "extended-message" }, h("slot", null)))))));
   }

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { h as hasSlot } from './utils-74fb1bed.js';
+import { h as hasSlot } from './utils-8544b156.js';
 
 const modalCss = ":root,.tds-mode-light{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-white);--tds-modal-text:var(--tds-grey-958);--tds-modal-icon:var(--tds-black);--tds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-mode-dark{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-grey-900);--tds-modal-text:var(--tds-grey-50);--tds-modal-icon:var(--tds-white);--tds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-modal{box-sizing:border-box;background-color:var(--tds-modal-background);margin:auto;position:relative;border-radius:4px;padding:16px;max-height:85vh;overflow-y:auto;}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-track{background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500);border-radius:0 1em 1em 0}.tds-modal__actions-sticky{overflow:hidden}.tds-modal__actions-sticky .body{font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);padding-bottom:96px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky slot[name=actions]{position:absolute;bottom:-1px;left:0;right:0;background-color:var(--tds-modal-background);padding:var(--tds-spacing-element-16);display:flex;gap:16px}.tds-modal__actions-static slot[name=actions]{background-color:var(--tds-modal-background);display:flex;gap:16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:75%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=actions]::slotted(*),.tds-modal-lg slot[name=actions]::slotted(*),.tds-modal-sm slot[name=actions]::slotted(*){display:flex}}.header{display:flex;padding-bottom:var(--tds-spacing-element-8);position:sticky;top:0;background-color:var(--tds-modal-background);z-index:1}.header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--tds-modal-background)}.header,slot[name=header]::slotted(*){color:var(--tds-modal-text);font:var(--tds-headline-05);letter-spacing:var(--tds-headline-05-ls);margin:0;flex:1}.body{color:var(--tds-modal-text);font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);padding-bottom:40px;overflow-y:visible;padding-right:16px;}.body::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-track{background-color:var(--tds-grey-300)}.body::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500)}@media (min-width: 1056px){.body{padding-right:64px}}.tds-modal-backdrop{box-sizing:border-box;left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--tds-modal-backdrop);padding:0 16px}.tds-modal-backdrop *{box-sizing:border-box}@media (max-width: 320px){.tds-modal-backdrop{padding:0}}.tds-modal-backdrop.show{display:flex}.tds-modal-backdrop.hide{display:none}button.tds-modal-close{margin:0 0 auto auto;background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--tds-modal-icon);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media (min-width: 320px){.tds-modal-close{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn svg{fill:var(--tds-modal-icon)}.tds-modal-overflow{overflow:hidden}:host{left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--tds-modal-backdrop);padding:0 16px}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}:host(.show){display:flex}:host(.hide){display:none}";
 

package/dist/esm/tds-popover-canvas.entry.js

@@ -1,31 +1,12 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-23ee700b.js';
-import { c as createPopper } from './popper-15e448b4.js';
+import { j as inheritAttributes } from './utils-8544b156.js';
 
-const popoverCanvasCss = ":host{box-sizing:border-box;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.tds-popover-canvas-show){display:block}";
+const popoverCanvasCss = ".tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
 
 const TdsPopoverCanvas = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.initialize = (referenceEl) => {
-      this.popperInstance = createPopper(referenceEl, this.host, {
-        placement: this.placement,
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [this.offsetSkidding, this.offsetDistance],
-            },
-          },
-          ...this.modifiers,
-        ],
-      });
-      if (this.show === null) {
-        referenceEl.addEventListener('click', (event) => {
-          event.stopPropagation();
-          this.isShown = !this.isShown;
-        });
-      }
-    };
+    this.inheritedAttributes = [];
     this.selector = '';
     this.referenceEl = undefined;
     this.show = null;
@@ -33,69 +14,18 @@ const TdsPopoverCanvas = class {
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
     this.modifiers = [];
-    this.renderedShowValue = false;
-    this.popperInstance = undefined;
-    this.target = undefined;
-    this.isShown = false;
   }
-  onShowChange(newValue) {
-    this.isShown = newValue;
-  }
-  onReferenceElChange(newValue, oldValue) {
-    var _a;
-    if (newValue !== oldValue) {
-      (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-      if (newValue) {
-        this.initialize(newValue);
-      }
-    }
-  }
-  onAnyClick(event) {
-    if (this.isShown && this.show === null) {
-      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
-      const isClickOutside = !event.composedPath().includes(this.host);
-      if (isClickOutside) {
-        this.isShown = false;
-      }
-    }
-  }
-  connectedCallback() {
-    if (this.show !== null) {
-      this.isShown = this.show;
-    }
-  }
-  componentDidLoad() {
-    var _a;
-    if (this.selector || this.referenceEl) {
-      const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-      if (referenceEl) {
-        this.initialize(referenceEl);
-      }
-      else {
-        console.error(`Could not initialize popover-canvas: element with selector '${this.selector}' not found.`);
-      }
-    }
-  }
-  componentDidRender() {
-    if (this.isShown && !this.renderedShowValue) {
-      // Here we update the popper position since its position is wrong
-      // before it is rendered.
-      this.popperInstance.update();
-    }
-    this.renderedShowValue = this.isShown;
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
   }
   render() {
-    return (h(Host, { class: `tds-popover-canvas ${this.isShown ? 'tds-popover-canvas-show' : ''}` }, h("slot", null)));
+    var _a;
+    return (h(Host, null, h("tds-popover-core", Object.assign({}, this.inheritedAttributes, { class: {
+        'tds-popover-canvas': true,
+        [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
+      }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click' }), h("div", null, h("slot", null)))));
   }
   get host() { return getElement(this); }
-  static get watchers() { return {
-    "show": ["onShowChange"],
-    "referenceEl": ["onReferenceElChange"]
-  }; }
 };
 TdsPopoverCanvas.style = popoverCanvasCss;
 

package/dist/{cjs/popper-d7adcfc6.js → esm/tds-popover-core.entry.js}

@@ -1,4 +1,4 @@
-'use strict';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-23ee700b.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -1791,4 +1791,157 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-exports.createPopper = createPopper;
+const TdsPopoverCore = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tdsShow = createEvent(this, "internalTdsShow", 0);
+    this.tdsClose = createEvent(this, "internalTdsClose", 0);
+    this.setIsShown = function setIsShown(isShown) {
+      if (typeof isShown === 'function') {
+        this.isShown = isShown(this.isShown);
+      }
+      else {
+        this.isShown = isShown;
+      }
+      if (this.isShown) {
+        this.tdsShow.emit();
+      }
+      else {
+        this.tdsClose.emit();
+      }
+    }.bind(this);
+    this.onClickTarget = function onClickTarget(event) {
+      event.stopPropagation();
+      this.setIsShown((isShown) => !isShown);
+    }.bind(this);
+    this.handleShow = function handleShow(event) {
+      event.stopPropagation();
+      this.setIsShown(true);
+    }.bind(this);
+    this.handleHide = function handleShow(event) {
+      event.stopPropagation();
+      this.setIsShown(false);
+    }.bind(this);
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.show = null;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.modifiers = [];
+    this.trigger = 'click';
+    this.autoHide = true;
+    this.renderedShowValue = false;
+    this.popperInstance = undefined;
+    this.target = undefined;
+    this.isShown = false;
+  }
+  onAnyClick(event) {
+    if (this.trigger === 'click' && this.isShown && this.show === null) {
+      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
+      const isClickOutside = !event.composedPath().includes(this.host);
+      if (isClickOutside) {
+        this.setIsShown(false);
+      }
+    }
+  }
+  onShowChange(newValue) {
+    this.setIsShown(newValue);
+  }
+  onReferenceElChanged(newValue, oldValue) {
+    if (newValue !== oldValue)
+      this.initialize({ referenceEl: newValue, trigger: this.trigger });
+  }
+  onTriggerChanged(newValue) {
+    this.initialize({
+      referenceEl: this.referenceEl,
+      trigger: newValue,
+    });
+  }
+  initialize({ referenceEl, trigger, }) {
+    this.cleanUp();
+    if (typeof referenceEl !== 'undefined') {
+      this.target = referenceEl;
+    }
+    else {
+      this.target = this.selector ? document.querySelector(this.selector) : null;
+    }
+    this.popperInstance = this.target
+      ? createPopper(this.target, this.host, {
+        strategy: 'fixed',
+        placement: this.placement,
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [this.offsetSkidding, this.offsetDistance],
+            },
+          },
+          ...this.modifiers,
+        ],
+      })
+      : null;
+    if (!this.popperInstance) {
+      console.error(`Could not initialize: reference element not found.`);
+    }
+    if (trigger === 'click' && this.show === null) {
+      this.target.addEventListener('click', this.onClickTarget);
+    }
+    if (trigger === 'hover' || trigger === 'hover-popover') {
+      // For tabbing over element
+      this.target.addEventListener('focusin', this.handleShow);
+      this.target.addEventListener('focusout', this.handleHide);
+      // For hovering over element with selector
+      this.target.addEventListener('mouseenter', this.handleShow);
+      this.target.addEventListener('mouseleave', this.handleHide);
+      // For hovering over Popover itself
+      if (trigger === 'hover-popover') {
+        this.host.addEventListener('mouseenter', this.handleShow);
+        this.host.addEventListener('mouseleave', this.handleHide);
+      }
+    }
+  }
+  cleanUp() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    (_a = this.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.onClickTarget);
+    (_b = this.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('focusin', this.handleShow);
+    (_c = this.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusout', this.handleHide);
+    (_d = this.target) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseenter', this.handleShow);
+    (_e = this.target) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseleave', this.handleHide);
+    (_f = this.host) === null || _f === void 0 ? void 0 : _f.removeEventListener('mouseenter', this.handleShow);
+    (_g = this.host) === null || _g === void 0 ? void 0 : _g.removeEventListener('mouseleave', this.handleHide);
+    (_h = this.popperInstance) === null || _h === void 0 ? void 0 : _h.destroy();
+  }
+  componentDidLoad() {
+    this.initialize({
+      referenceEl: this.referenceEl,
+      trigger: this.trigger,
+    });
+  }
+  componentDidRender() {
+    if (this.isShown && !this.renderedShowValue) {
+      // Here we update the popper position since its position is wrong
+      // before it is rendered.
+      this.popperInstance.update();
+    }
+    this.renderedShowValue = this.isShown;
+  }
+  disconnectedCallback() {
+    this.cleanUp();
+  }
+  render() {
+    let hostStyle = {};
+    if (this.autoHide) {
+      hostStyle = { display: this.isShown ? 'block' : 'none' };
+    }
+    return (h(Host, { style: hostStyle }, h("slot", null)));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "show": ["onShowChange"],
+    "referenceEl": ["onReferenceElChanged"],
+    "trigger": ["onTriggerChanged"]
+  }; }
+};
+
+export { TdsPopoverCore as tds_popover_core };