@scania/tegel 0.0.6 → 0.0.8

package/dist/components/sdds-header-cell.js

@@ -9,15 +9,17 @@ const relevantTableProps = [
   'noMinWidth',
   'verticalDividers',
 ];
-const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class TableHeaderCell extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.sddsSortChange = createEvent(this, "sddsSortChange", 6);
+    this.sddsSortChange = createEvent(this, "sddsSortChange", 7);
+    this.internalSortButtonClicked = createEvent(this, "internalSortButtonClicked", 6);
+    this.internalSddsSortChange = createEvent(this, "internalSddsSortChange", 6);
     this.internalSddsTextAlign = createEvent(this, "internalSddsTextAlign", 6);
     this.internalSddsHover = createEvent(this, "internalSddsHover", 6);
-    this.sortButtonClick = (key) => {
+    this.sortButtonClick = () => {
       // Toggling direction of sorting as we only use one button for sorting
       if (this.sortingDirection !== 'asc') {
         this.sortingDirection = 'asc';
@@ -27,17 +29,41 @@ const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       }
       // Setting to true we can set enable CSS class for "active" state of column
       this.sortedByMyKey = true;
-      // Use array to send both key and sorting direction
-      this.sddsSortChange.emit([this.tableId, key, this.sortingDirection]);
+      /* Emit sort event */
+      const sddsSortEvent = this.sddsSortChange.emit({
+        tableId: this.tableId,
+        columnKey: this.columnKey,
+        sortingDirection: this.sortingDirection,
+      });
+      /**
+       * Emits sortButtonClicked event which is listened to by all the header-cells.
+       * This resets the sorting button in the header-cell that was not clicked.
+       */
+      this.internalSortButtonClicked.emit({
+        tableId: this.tableId,
+        key: this.columnKey,
+      });
+      /* If the user has not prevented the sort event. */
+      if (!sddsSortEvent.defaultPrevented) {
+        /* Emit internal sort event, which is listened to in table-body <- this does the actual sorting.  */
+        this.internalSddsSortChange.emit({
+          tableId: this.tableId,
+          columnKey: this.columnKey,
+          sortingDirection: this.sortingDirection,
+        });
+      }
     };
     this.headerCellContent = () => {
       if (this.sortable && !this.disableSortingBtn) {
-        return (h("button", { class: "sdds-table__header-button", onClick: () => this.sortButtonClick(this.columnKey) }, h("span", { class: "sdds-table__header-button-text", style: { textAlign: this.textAlignState } }, this.columnTitle), this.sortingDirection === '' && (h("svg", { class: "sdds-table__header-button-icon", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 15" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.07 10.28a.5.5 0 0 1 .7.08l2.1 2.66a.1.1 0 0 0 .15 0l2.09-2.66a.5.5 0 1 1 .78.62l-2.08 2.66a1.1 1.1 0 0 1-1.73 0l-2.1-2.66a.5.5 0 0 1 .1-.7ZM3.55.4v9.04a.5.5 0 1 1-1 0V.39h1Z" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.93 3.78a.5.5 0 0 1-.7-.08l-2.1-2.66a.1.1 0 0 0-.15 0L.89 3.7a.5.5 0 0 1-.78-.62L2.19.42a1.1 1.1 0 0 1 1.73 0l2.1 2.66a.5.5 0 0 1-.1.7Z" }))), this.sortingDirection !== '' && (h("svg", { class: `sdds-table__header-button-icon ${this.sortingDirection === 'desc' ? 'sdds-table__header-button-icon--rotate' : ''}`, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17 2.974a1 1 0 0 0-2 0v24.3l-9.312-9.312a1 1 0 0 0-1.414 1.414l9.887 9.888a2.6 2.6 0 0 0 3.677 0l9.888-9.888a1 1 0 0 0-1.414-1.414L17 27.274v-24.3Z" })))));
+        return (h("button", { class: "sdds-table__header-button", onClick: () => this.sortButtonClick() }, h("span", { class: "sdds-table__header-button-text", style: { textAlign: this.textAlignState } }, this.columnTitle), this.sortingDirection === null && (h("svg", { class: "sdds-table__header-button-icon", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 15" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.07 10.28a.5.5 0 0 1 .7.08l2.1 2.66a.1.1 0 0 0 .15 0l2.09-2.66a.5.5 0 1 1 .78.62l-2.08 2.66a1.1 1.1 0 0 1-1.73 0l-2.1-2.66a.5.5 0 0 1 .1-.7ZM3.55.4v9.04a.5.5 0 1 1-1 0V.39h1Z" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.93 3.78a.5.5 0 0 1-.7-.08l-2.1-2.66a.1.1 0 0 0-.15 0L.89 3.7a.5.5 0 0 1-.78-.62L2.19.42a1.1 1.1 0 0 1 1.73 0l2.1 2.66a.5.5 0 0 1-.1.7Z" }))), this.sortingDirection && (h("svg", { class: `sdds-table__header-button-icon ${this.sortingDirection === 'desc' ? 'sdds-table__header-button-icon--rotate' : ''}`, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M17 2.974a1 1 0 0 0-2 0v24.3l-9.312-9.312a1 1 0 0 0-1.414 1.414l9.887 9.888a2.6 2.6 0 0 0 3.677 0l9.888-9.888a1 1 0 0 0-1.414-1.414L17 27.274v-24.3Z" })))));
       }
       return (h("p", { class: "sdds-table__header-text", style: { textAlign: this.textAlignState } }, this.columnTitle));
     };
     this.onHeadCellHover = (key) => {
-      this.internalSddsHover.emit([this.tableId, key]);
+      this.internalSddsHover.emit({
+        tableId: this.tableId,
+        key,
+      });
     };
     this.columnKey = undefined;
     this.columnTitle = undefined;
@@ -45,7 +71,7 @@ const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.sortable = false;
     this.textAlign = undefined;
     this.textAlignState = undefined;
-    this.sortingDirection = '';
+    this.sortingDirection = 'asc';
     this.sortedByMyKey = false;
     this.disableSortingBtn = false;
     this.verticalDividers = false;
@@ -75,15 +101,14 @@ const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       this.disableSortingBtn = receivedSortingStatus;
     }
   }
-  // target is set to body so other instances of same component "listen" and react to the change
   updateOptionsContent(event) {
-    if (this.tableId === event.detail[0]) {
-      // grab only value at position 1 as it is the "key"
-      if (this.columnKey !== event.detail[1]) {
+    const { tableId, key } = event.detail;
+    if (this.tableId === tableId) {
+      if (this.columnKey !== key) {
         this.sortedByMyKey = false;
         // To sync with CSS transition timing
         setTimeout(() => {
-          this.sortingDirection = '';
+          this.sortingDirection = null;
         }, 200);
       }
     }
@@ -145,7 +170,7 @@ const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "enableToolbarDesign": [32],
     "tableId": [32],
     "enableExpandableRows": [32]
-  }, [[16, "internalSddsPropChange", "internalSddsPropChangeListener"], [16, "internalSddsSortingChange", "internalSddsSortingChangeListener"], [16, "sddsSortChange", "updateOptionsContent"]]]);
+  }, [[16, "internalSddsPropChange", "internalSddsPropChangeListener"], [16, "internalSddsSortingChange", "internalSddsSortingChangeListener"], [16, "internalSortButtonClicked", "updateOptionsContent"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
@@ -164,5 +189,3 @@ const SddsHeaderCell = TableHeaderCell;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderCell, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-cell.js.map

package/dist/components/sdds-header-dropdown-list-item.js

@@ -4,5 +4,3 @@ const SddsHeaderDropdownListItem = HeaderDropdownListItem;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderDropdownListItem, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-dropdown-list-item.js.map

package/dist/components/sdds-header-dropdown-list-user.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const headerDropdownListUserCss = ":host{background-color:var(--sdds-header-avatar-item-background);display:flex;height:84px}:host .user-box{gap:16px;width:100%;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color)}:host img,:host slot[name=image]::slotted(*){width:34px;border-radius:100%}:host .user-content{display:flex;flex-direction:column;gap:4px}:host .user-content .header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host .user-content .subheader{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-header-avatar-item-color)}";
 
-const HeaderDropdownListLgUser = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const HeaderDropdownListLgUser = /*@__PURE__*/ proxyCustomElement(class HeaderDropdownListLgUser extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -41,5 +41,3 @@ const SddsHeaderDropdownListUser = HeaderDropdownListLgUser;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderDropdownListUser, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-dropdown-list-user.js.map

package/dist/components/sdds-header-dropdown-list.js

@@ -4,5 +4,3 @@ const SddsHeaderDropdownList = HeaderDropdownList;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderDropdownList, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-dropdown-list.js.map

package/dist/components/sdds-header-dropdown.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$2 } from './popover-canvas.js';
 
 const headerDropdownCss = ":host{height:var(--sdds-header-height);position:relative}:host .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--sdds-header-height));box-shadow:var(--sdds-nav-dropdown-menu-box);background-color:var(--sdds-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(--sdds-grey-300)}:host .menu ::-webkit-scrollbar-button{height:0;width:0}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .button{position:relative;z-index:801}";
 
-const HeaderDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const HeaderDropdown = /*@__PURE__*/ proxyCustomElement(class HeaderDropdown extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -91,5 +91,3 @@ const SddsHeaderDropdown = HeaderDropdown;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderDropdown, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-dropdown.js.map

package/dist/components/sdds-header-hamburger.js

@@ -4,9 +4,9 @@ import { d as defineCustomElement$4 } from './core-header-item.js';
 import { d as defineCustomElement$3 } from './header-item.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const headerHamburgerCss = ":host{color:var(--sdds-white)}:host sdds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}@media screen and (min-width: 992px){:host sdds-header-item{display:none}:host([persistent]) sdds-header-item{display:block}}";
+const headerHamburgerCss = ":host{color:var(--sdds-white)}:host sdds-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 sdds-header-item{display:none}:host([persistent]) sdds-header-item{display:block}}";
 
-const HeaderHamburger = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const HeaderHamburger = /*@__PURE__*/ proxyCustomElement(class HeaderHamburger extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -52,5 +52,3 @@ const SddsHeaderHamburger = HeaderHamburger;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderHamburger, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-hamburger.js.map

package/dist/components/sdds-header-item.js

@@ -4,5 +4,3 @@ const SddsHeaderItem = HeaderItem;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderItem, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-item.js.map

package/dist/components/sdds-header-launcher-button.js

@@ -4,5 +4,3 @@ const SddsHeaderLauncherButton = HeaderLauncherButton;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderLauncherButton, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-launcher-button.js.map

package/dist/components/sdds-header-launcher-grid-item.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const headerLauncherGridItemCss = ":host{display:block;width:96px;height:96px}:host ::slotted(a),:host ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--sdds-nav-item-border-color);width:100%;height:100%;border:none;padding:0 12px;display:flex;text-align:center;justify-content:center;align-items:center;flex-direction:column;gap:8px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);background-color:var(--sdds-header-app-launcher-menu-bg);color:var(--sdds-grey-800);border-radius:4px;transition:background-color 150ms ease}:host ::slotted(a:hover),:host ::slotted(button:hover){background-color:var(--sdds-grey-100);cursor:pointer}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}";
+const headerLauncherGridItemCss = ":host{display:block;width:96px;height:96px}:host ::slotted(a),:host ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--sdds-nav-item-border-color);width:100%;height:100%;border:none;padding:0 12px;display:flex;text-align:center;justify-content:center;align-items:center;flex-direction:column;gap:8px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);background-color:var(--sdds-header-app-launcher-menu-bg);color:var(--sdds-header-app-launcher-grid-color);border-radius:4px;transition:background-color 150ms ease}:host ::slotted(a:hover),:host ::slotted(button:hover){background-color:var(--sdds-header-app-launcher-grid-hover-background);cursor:pointer}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}";
 
-const HeaderLauncherGridItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const HeaderLauncherGridItem = /*@__PURE__*/ proxyCustomElement(class HeaderLauncherGridItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -31,5 +31,3 @@ const SddsHeaderLauncherGridItem = HeaderLauncherGridItem;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderLauncherGridItem, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-launcher-grid-item.js.map

package/dist/components/sdds-header-launcher-grid-title.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const headerLauncherGridTitleCss = ".sdds-header-launcher-grid-title{all:unset;box-sizing:border-box;font:var(--sdds-detail-04);letter-spacing:var(--sdds-detail-04-ls);color:var(--sdds-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(--sdds-nav-dropdown-item-border-color);margin:0}";
 
-const HeaderLauncherGridTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const HeaderLauncherGridTitle = /*@__PURE__*/ proxyCustomElement(class HeaderLauncherGridTitle extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -31,5 +31,3 @@ const SddsHeaderLauncherGridTitle = HeaderLauncherGridTitle;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderLauncherGridTitle, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-launcher-grid-title.js.map

package/dist/components/sdds-header-launcher-grid.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getPreviousNestedChildOfSiblingsMatching, a as isHeadingElement } from './utils.js';
+import { g as getPreviousNestedChildOfSiblingsMatching, h as isHeadingElement } from './utils.js';
 
 const headerLauncherGridCss = ".sdds-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}";
 
-const HeaderLauncherGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const HeaderLauncherGrid = /*@__PURE__*/ proxyCustomElement(class HeaderLauncherGrid extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -54,5 +54,3 @@ const SddsHeaderLauncherGrid = HeaderLauncherGrid;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderLauncherGrid, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-launcher-grid.js.map

package/dist/components/sdds-header-launcher-list-item.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$2 } from './header-dropdown-list-item.js';
 
 const headerLauncherListItemCss = ":host{display:block;border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color)}";
 
-const HeaderLauncherListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const HeaderLauncherListItem = /*@__PURE__*/ proxyCustomElement(class HeaderLauncherListItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -37,5 +37,3 @@ const SddsHeaderLauncherListItem = HeaderLauncherListItem;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderLauncherListItem, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-launcher-list-item.js.map

package/dist/components/sdds-header-launcher-list-title.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const headerLauncherListTitleCss = ".sdds-header-launcher-list-title{all:unset;box-sizing:border-box;font:var(--sdds-detail-06);letter-spacing:var(--sdds-detail-06-ls);color:var(--sdds-header-app-launcher-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color);margin:0}";
 
-const HeaderLauncherListTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const HeaderLauncherListTitle = /*@__PURE__*/ proxyCustomElement(class HeaderLauncherListTitle extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -32,5 +32,3 @@ const SddsHeaderLauncherListTitle = HeaderLauncherListTitle;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderLauncherListTitle, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-launcher-list-title.js.map

package/dist/components/sdds-header-launcher-list.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './header-dropdown-list.js';
 
-const HeaderLauncherList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const HeaderLauncherList = /*@__PURE__*/ proxyCustomElement(class HeaderLauncherList extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -34,5 +34,3 @@ const SddsHeaderLauncherList = HeaderLauncherList;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderLauncherList, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-launcher-list.js.map

package/dist/components/sdds-header-launcher.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$2 } from './popover-canvas.js';
 
 const headerLauncherCss = ":host .wrapper{height:var(--sdds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--sdds-header-height));box-shadow:var(--sdds-nav-dropdown-menu-box);background-color:var(--sdds-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(--sdds-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(--sdds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:801}";
 
-const HeaderLauncher = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const HeaderLauncher = /*@__PURE__*/ proxyCustomElement(class HeaderLauncher extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -106,5 +106,3 @@ const SddsHeaderLauncher = HeaderLauncher;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderLauncher, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-launcher.js.map

package/dist/components/sdds-header-title.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const headerTitleCss = ":host{display:block;flex-shrink:1;box-sizing:border-box;color:var(--sdds-header-nav-item-color);font-weight:normal;font-family:var(--sdds-font-family-headline);letter-spacing:normal;position:relative}:host .component ::after{content:\" \";display:block;height:100%;width:24px;position:absolute;top:0;right:0;background:linear-gradient(to right, transparent, var(--sdds-header-background))}:host slot{min-width:inherit;display:block;align-items:center;white-space:nowrap;text-overflow:fade;padding:0 24px}";
+const headerTitleCss = ":host{display:block;flex-shrink:1;box-sizing:border-box;color:var(--sdds-header-nav-item-color);font-weight:normal;font-family:var(--sdds-font-family-headline);letter-spacing:normal;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host slot{display:block;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 32px 0 16px}";
 
-const HeaderTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const HeaderTitle = /*@__PURE__*/ proxyCustomElement(class HeaderTitle extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -31,5 +31,3 @@ const SddsHeaderTitle = HeaderTitle;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderTitle, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-title.js.map

package/dist/components/sdds-header.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { u as updateListChildrenRoles, i as inheritAriaAttributes } from './utils.js';
 
-const headerComponentCss = "sdds-header{display:block;height:var(--sdds-header-height);background-color:var(--sdds-header-background);width:100%;z-index:300}nav{box-sizing:border-box;background-color:var(--sdds-header-background);width:100%;display:block}nav *{box-sizing:border-box}nav .sdds-header-component-list{height:var(--sdds-header-height);all:unset;display:flex;justify-content:start;align-items:center}nav sdds-header-dropdown,nav sdds-header-item{display:none}nav .sdds-header-middle-spacer{all:unset;display:block;flex-grow:1;height:var(--sdds-header-height);border-right:1px solid var(--sdds-header--basic-element-border)}@media screen and (min-width: 992px){nav sdds-header-dropdown,nav sdds-header-item{display:block}}nav sdds-header-item:nth-child(3),nav sdds-header-dropdown:nth-child(3){border-left:1px solid var(--sdds-header--basic-element-border)}";
+const headerComponentCss = "html,:root{--sdds-nav-dropdown-menu-box:0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);--sdds-nav-dropdown-item-border-radius:0 0 4px 4px;--sdds-font-family-headline:\"Scania Sans Headline\", arial, helvetica, sans-serif}sdds-header{display:block;height:var(--sdds-header-height);background-color:var(--sdds-header-background);width:100%;z-index:300}nav{box-sizing:border-box;background-color:var(--sdds-header-background);width:100%;display:block}nav *{box-sizing:border-box}nav .sdds-header-component-list{height:var(--sdds-header-height);all:unset;display:flex;justify-content:start;align-items:center}nav sdds-header-dropdown,nav sdds-header-item{display:none}nav .sdds-header-middle-spacer{all:unset;display:block;flex-grow:1;height:var(--sdds-header-height);border-right:1px solid var(--sdds-header--basic-element-border)}@media screen and (min-width: 992px){nav sdds-header-dropdown,nav sdds-header-item{display:block}}nav sdds-header-item:nth-child(3),nav sdds-header-dropdown:nth-child(3){border-left:1px solid var(--sdds-header--basic-element-border)}";
 
-const SddsHeader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const SddsHeader$1 = /*@__PURE__*/ proxyCustomElement(class SddsHeader extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -53,5 +53,3 @@ const SddsHeader = SddsHeader$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeader, defineCustomElement };
-
-//# sourceMappingURL=sdds-header.js.map

package/dist/components/sdds-icon.js

@@ -4,5 +4,3 @@ const SddsIcon = Icon;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsIcon, defineCustomElement };
-
-//# sourceMappingURL=sdds-icon.js.map

package/dist/components/sdds-inline-tab.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const sddsInlineTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;margin:20px 4px}:host ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .inline-tab-item{position:relative;margin-right:32px}:host .inline-tab-item:hover{cursor:pointer}:host .inline-tab-item:hover::after{width:100%}:host .inline-tab-item::after{content:\" \";position:absolute;bottom:-20px;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host .selected ::slotted(*){color:var(--sdds-inline-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}:host .disabled{color:var(--sdds-inline-tabs-tab-color-disabled);pointer-events:none}:host .disabled ::slotted(*){opacity:var(--sdds-inline-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
 
-const SddsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const SddsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class SddsInlineTab extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -42,5 +42,3 @@ const SddsInlineTab = SddsInlineTab$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsInlineTab, defineCustomElement };
-
-//# sourceMappingURL=sdds-inline-tab.js.map

package/dist/components/sdds-inline-tabs.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$2 } from './icon.js';
 
 const inlineTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--sdds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--sdds-inline-tabs-horizontal-divider-background);opacity:var(--sdds-inline-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:201}:host .scroll-left-button{left:0;z-index:201}:host .scroll-right-button,:host .scroll-left-button{color:var(--sdds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--sdds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--sdds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--sdds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--sdds-folder-tabs-scroll-btn-color)}";
 
-const InlineTabsFullbleed = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const InlineTabsFullbleed = /*@__PURE__*/ proxyCustomElement(class InlineTabsFullbleed extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -42,7 +42,7 @@ const InlineTabsFullbleed = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       this.children = this.children.map((item, index) => {
         item.addEventListener('click', () => {
           const sddsChangeEvent = this.sddsChange.emit({
-            selectedTabIndex: this.children.indexOf(item)
+            selectedTabIndex: this.children.indexOf(item),
           });
           if (!sddsChangeEvent.defaultPrevented) {
             if (!item.disabled) {
@@ -179,5 +179,3 @@ const SddsInlineTabs = InlineTabsFullbleed;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsInlineTabs, defineCustomElement };
-
-//# sourceMappingURL=sdds-inline-tabs.js.map

package/dist/components/sdds-link.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 
 const sddsLinkCss = ".sdds-link-component{all:unset;cursor:pointer;outline:none;color:var(--sdds-link);text-decoration:underline}.sdds-link-component.active,.sdds-link-component:active{color:var(--sdds-link);text-decoration:underline;text-decoration-color:var(--sdds-link)}.sdds-link-component:hover{color:var(--sdds-link-hover);text-decoration:underline;text-decoration-color:var(--sdds-link-hover)}.sdds-link-component:visited{color:var(--sdds-link-visited);text-decoration-color:var(--sdds-link-visited)}.sdds-link-component:focus{color:var(--sdds-link-focus);text-decoration:none;outline:2px solid var(--sdds-link-focus);outline-offset:-2px}.disabled .sdds-link-component{color:var(--sdds-link-disabled);text-decoration-color:var(--sdds-link-disabled);pointer-events:none}.no-underline .sdds-link-component{text-decoration:none}.no-underline:hover .sdds-link-component{text-decoration:none}";
 
-const SddsLink$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const SddsLink$1 = /*@__PURE__*/ proxyCustomElement(class SddsLink extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -42,5 +42,3 @@ const SddsLink = SddsLink$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsLink, defineCustomElement };
-
-//# sourceMappingURL=sdds-link.js.map

package/dist/components/sdds-message.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$2 } from './icon.js';
 
 const sddsMessageCss = ":host .message-wrapper{display:flex;padding:16px;background-color:var(--sdds-message-background);border-radius:4px}:host .message-wrapper.information{border-left:4px solid var(--sdds-information)}:host .message-wrapper.information sdds-icon{color:var(--sdds-information)}:host .message-wrapper.success{border-left:4px solid var(--sdds-positive)}:host .message-wrapper.success sdds-icon{color:var(--sdds-positive)}:host .message-wrapper.error{background-color:var(--sdds-message-type-error-background);border-left:4px solid var(--sdds-negative)}:host .message-wrapper.error sdds-icon{color:var(--sdds-negative)}:host .message-wrapper.warning{border-left:4px solid var(--sdds-warning)}:host .message-wrapper.warning sdds-icon{color:var(--sdds-warning)}:host .message-wrapper.message-minimal{border:none;display:flex;align-items:center;padding:0;background-color:transparent}:host .message-wrapper.message-minimal .message-header{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .message-wrapper.message-minimal sdds-icon{padding-right:8px}:host sdds-icon{padding-right:16px}:host .message-content{display:flex;flex-direction:column;gap:4px;color:var(--sdds-message-color);padding:2px 0}:host .message-content .message-header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host .message-content .message-extended-message{color:var(--sdds-message-color);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .sdds-mode-variant-primary{--sdds-message-background:var(--sdds-message-background-primary)}:host .sdds-mode-variant-secondary{--sdds-message-background:var(--sdds-message-background-secondary)}";
 
-const SddsMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const SddsMessage$1 = /*@__PURE__*/ proxyCustomElement(class SddsMessage extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -65,5 +65,3 @@ const SddsMessage = SddsMessage$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsMessage, defineCustomElement };
-
-//# sourceMappingURL=sdds-message.js.map

package/dist/components/sdds-modal.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$2 } from './icon.js';
 
 const modalCss = ":root,.sdds-mode-light{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-white);--sdds-modal-text:var(--sdds-grey-958);--sdds-modal-icon:var(--sdds-black);--sdds-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\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-mode-dark{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-grey-900);--sdds-modal-text:var(--sdds-grey-50);--sdds-modal-icon:var(--sdds-white);--sdds-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\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-modal{box-sizing:border-box;background-color:var(--sdds-modal-background);margin:auto;position:relative;border-radius:4px;padding:16px;max-height:85vh;overflow-y:auto;}.sdds-modal *{box-sizing:border-box}.sdds-modal::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-track{background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500);border-radius:0 1em 1em 0}.sdds-modal__actions-sticky{overflow:hidden}.sdds-modal__actions-sticky .sdds-modal-body{font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:96px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.sdds-modal__actions-sticky .sdds-modal-actions{position:absolute;bottom:-1px;left:0;right:0;background-color:var(--sdds-modal-background);padding:var(--sdds-spacing-element-16);display:flex;gap:16px}.sdds-modal__actions-static .sdds-modal-actions{background-color:var(--sdds-modal-background);display:flex;gap:16px}@media (min-width: 320px){.sdds-modal-xs{width:100%}.sdds-modal-sm{width:100%}.sdds-modal-md{width:100%}.sdds-modal-lg{width:100%}}@media (min-width: 672px){.sdds-modal-xs{width:75%}.sdds-modal-sm{width:62.5%}.sdds-modal-md{width:75%}.sdds-modal-lg{width:100%}}@media (min-width: 1056px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:43.75%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1312px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1584px){.sdds-modal-xs{width:25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:50%}.sdds-modal-lg{width:75%}}@media (max-width: 320px){.sdds-modal-md,.sdds-modal-lg,.sdds-modal-sm{height:100%}.sdds-modal-md slot[name=sdds-modal-actions]::slotted(*),.sdds-modal-lg slot[name=sdds-modal-actions]::slotted(*),.sdds-modal-sm slot[name=sdds-modal-actions]::slotted(*){display:flex}}.sdds-modal-header{display:flex;padding-bottom:var(--sdds-spacing-element-8);position:sticky;top:0;background-color:var(--sdds-modal-background);z-index:1}.sdds-modal-header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--sdds-modal-background)}.sdds-modal-headline{color:var(--sdds-modal-text);font:var(--sdds-headline-05);letter-spacing:var(--sdds-headline-05-ls);margin:0;flex:1;color:var(--sdds-modal-text)}.sdds-modal-body{color:var(--sdds-modal-text);font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:40px;overflow-y:visible;padding-right:16px;}.sdds-modal-body::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-track{background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500)}@media (min-width: 1056px){.sdds-modal-body{padding-right:64px}}.sdds-modal-backdrop{box-sizing:border-box;left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}.sdds-modal-backdrop *{box-sizing:border-box}@media (max-width: 320px){.sdds-modal-backdrop{padding:0}}.sdds-modal-backdrop.show{display:flex}.sdds-modal-backdrop.hide{display:none}button.sdds-modal-close{background-color:transparent;border:0;padding:0;appearance:unset}.sdds-modal-close{display:inline-block;height:auto;color:var(--sdds-modal-icon);cursor:pointer}.sdds-modal-close:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}@media (min-width: 320px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn svg{fill:var(--sdds-modal-icon)}.sdds-modal-overflow{overflow:hidden}:host{left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host .sdds-modal-close{border:none;background-color:transparent}:host .sdds-modal-close-btn{border:none;background-color:transparent}:host(.show){display:flex}:host(.hide){display:none}";
 
-const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -123,5 +123,3 @@ const SddsModal = Modal;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsModal, defineCustomElement };
-
-//# sourceMappingURL=sdds-modal.js.map

package/dist/components/sdds-navigation-tab.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const sddsNavigationTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;margin:26px 4px}:host ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .navigation-tab-item{position:relative;margin-right:32px}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:-26px;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host .selected ::slotted(*){color:var(--sdds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host .disabled ::slotted(*){opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
 
-const SddsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const SddsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class SddsNavigationTab extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -42,5 +42,3 @@ const SddsNavigationTab = SddsNavigationTab$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsNavigationTab, defineCustomElement };
-
-//# sourceMappingURL=sdds-navigation-tab.js.map

package/dist/components/sdds-navigation-tabs.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$2 } from './icon.js';
 
 const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--sdds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--sdds-inline-tabs-horizontal-divider-background);opacity:var(--sdds-inline-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:201}:host .scroll-left-button{left:0;z-index:201}:host .scroll-right-button,:host .scroll-left-button{color:var(--sdds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--sdds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--sdds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--sdds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--sdds-folder-tabs-scroll-btn-color)}";
 
-const NavigationTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const NavigationTabs = /*@__PURE__*/ proxyCustomElement(class NavigationTabs extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -169,5 +169,3 @@ const SddsNavigationTabs = NavigationTabs;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsNavigationTabs, defineCustomElement };
-
-//# sourceMappingURL=sdds-navigation-tabs.js.map

package/dist/components/sdds-popover-canvas.js

@@ -4,5 +4,3 @@ const SddsPopoverCanvas = PopoverCanvas;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsPopoverCanvas, defineCustomElement };
-
-//# sourceMappingURL=sdds-popover-canvas.js.map

package/dist/components/sdds-popover-menu.js

@@ -3,7 +3,7 @@ import { c as createPopper } from './popper.js';
 
 const popoverMenuCss = ":host{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--sdds-popover-menu-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;display:none;z-index:800}:host *{box-sizing:border-box}:host(.sdds-popover-menu-show){opacity:1;display:block}";
 
-const PopoverMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const PopoverMenu = /*@__PURE__*/ proxyCustomElement(class PopoverMenu extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -107,5 +107,3 @@ const SddsPopoverMenu = PopoverMenu;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsPopoverMenu, defineCustomElement };
-
-//# sourceMappingURL=sdds-popover-menu.js.map

package/dist/components/sdds-radio-button.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 
-const radioButtonComponentCss = ".sc-sdds-radio-button:root,.sdds-mode-light.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-grey-958);--sdds-radio-button-interaction-01:var(--sdds-blue-800);--sdds-radio-button-interaction-02:var(--sdds-white);--sdds-radio-button-background-hover:var(--sdds-blue-800);--sdds-radio-button-background-focus:var(--sdds-blue-800);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-before:var(--sdds-grey-700)}.sdds-mode-dark.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-white);--sdds-radio-button-interaction-01:var(--sdds-white);--sdds-radio-button-interaction-02:var(--sdds-grey-958);--sdds-radio-button-background-hover:var(--sdds-white);--sdds-radio-button-background-focus:var(--sdds-white);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700)}.sdds-radio-button.sc-sdds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-radio-button-color)}.sdds-radio-button.sc-sdds-radio-button *.sc-sdds-radio-button{box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button{appearance:none;outline:none;margin:0;border:0;width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button+label.sc-sdds-radio-button{padding:var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4) var(--sdds-spacing-element-4);cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{content:\"\";position:absolute;border-radius:50%;box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before{width:24px;height:24px;left:0;top:0}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{border:1px solid var(--sdds-radio-button-interaction-01);background-color:var(--sdds-radio-button-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:hover::before{background-color:var(--sdds-radio-button-background-hover);opacity:0.12}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:focus::before{background-color:var(--sdds-radio-button-background-focus);opacity:0.24;animation:rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button{cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button::after{border-color:var(--sdds-radio-button-border-color-disabled-after);background-color:var(--sdds-radio-button-interaction-02)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled+label.sc-sdds-radio-button,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button+label.sc-sdds-radio-button{color:var(--sdds-radio-button-disabled);cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button:hover::before{display:none;opacity:1}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked::after{border:4px solid var(--sdds-radio-button-interaction-01)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid var(--sdds-radio-button-color-disabled-before);box-sizing:content-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::after{border:4px solid var(--sdds-radio-button-interaction-02);background-color:var(--sdds-radio-button-color-disabled-after);left:5px;top:5px}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:0.24}}";
+const radioButtonCss = ".sc-sdds-radio-button:root,.sdds-mode-light.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-grey-958);--sdds-radio-button-interaction-01:var(--sdds-blue-800);--sdds-radio-button-interaction-02:var(--sdds-white);--sdds-radio-button-background-hover:var(--sdds-blue-800);--sdds-radio-button-background-focus:var(--sdds-blue-800);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-before:var(--sdds-grey-700)}.sdds-mode-dark.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-white);--sdds-radio-button-interaction-01:var(--sdds-white);--sdds-radio-button-interaction-02:var(--sdds-grey-958);--sdds-radio-button-background-hover:var(--sdds-white);--sdds-radio-button-background-focus:var(--sdds-white);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700)}.sdds-radio-button.sc-sdds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-radio-button-color)}.sdds-radio-button.sc-sdds-radio-button *.sc-sdds-radio-button{box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button{appearance:none;outline:none;margin:0;border:0;width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button+label.sc-sdds-radio-button{padding:var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4) var(--sdds-spacing-element-4);cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{content:\"\";position:absolute;border-radius:50%;box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before{width:24px;height:24px;left:0;top:0}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{border:1px solid var(--sdds-radio-button-interaction-01);background-color:var(--sdds-radio-button-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:hover::before{background-color:var(--sdds-radio-button-background-hover);opacity:0.12}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:focus::before{background-color:var(--sdds-radio-button-background-focus);opacity:0.24;animation:rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button{cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button::after{border-color:var(--sdds-radio-button-border-color-disabled-after);background-color:var(--sdds-radio-button-interaction-02)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled+label.sc-sdds-radio-button,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button+label.sc-sdds-radio-button{color:var(--sdds-radio-button-disabled);cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button:hover::before{display:none;opacity:1}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked::after{border:4px solid var(--sdds-radio-button-interaction-01)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid var(--sdds-radio-button-color-disabled-before);box-sizing:content-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::after{border:4px solid var(--sdds-radio-button-interaction-02);background-color:var(--sdds-radio-button-color-disabled-after);left:5px;top:5px}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:0.24}}";
 
-const RadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -28,7 +28,7 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
   }
   get host() { return this; }
-  static get style() { return radioButtonComponentCss; }
+  static get style() { return radioButtonCss; }
 }, [6, "sdds-radio-button", {
     "name": [1],
     "value": [1],
@@ -55,5 +55,3 @@ const SddsRadioButton = RadioButton;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsRadioButton, defineCustomElement };
-
-//# sourceMappingURL=sdds-radio-button.js.map

package/dist/components/sdds-side-menu-close-button.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$2 } from './icon.js';
 
 const sideMenuCloseButtonCss = ":host{opacity:0;transition:opacity 0.15s ease}:host button{height:64px;width:100%;text-align:left;padding:0 24px;border:none;background-color:var(--sdds-sidebar-side-menu-background-cover);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color);display:flex;align-items:center;border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host button:hover{cursor:pointer;background-color:var(--sdds-sidebar-item-state-hover)}:host button:focus-visible{cursor:pointer;border:1px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color)}";
 
-const SideMenuCloseButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const SideMenuCloseButton = /*@__PURE__*/ proxyCustomElement(class SideMenuCloseButton extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -40,5 +40,3 @@ const SddsSideMenuCloseButton = SideMenuCloseButton;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsSideMenuCloseButton, defineCustomElement };
-
-//# sourceMappingURL=sdds-side-menu-close-button.js.map