@scania/tegel 0.0.61 → 0.0.72

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, e 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 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;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();
@@ -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

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

@@ -1,16 +1,32 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './side-menu-item.js';
 
 const sideMenuCollapseButtonCss = ":host{position:sticky;bottom:0;display:none;height:68px;border-top:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host .icon{transform:rotateZ(90deg);transition:all 0.2s ease-in-out;width:20px;height:20px}:host .state-collapsed .icon{transform:translateX(-50%) rotateZ(90deg) rotateX(180deg);color:var(--sdds-sidebar-side-menu-single-item-color);margin-left:0;position:absolute;left:50%}@media (min-width: 992px){:host{display:block}}";
 
-const SideMenuCollapseButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const SideMenuCollapseButton = /*@__PURE__*/ proxyCustomElement(class SideMenuCollapseButton extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.sddsCollapse = createEvent(this, "sddsCollapse", 3);
+    this.internalSddsCollapse = createEvent(this, "internalSddsCollapse", 6);
+    this.handleClick = () => {
+      /** Emit public event that the user can prevent. */
+      const sddsCollapseEvent = this.sddsCollapse.emit({
+        collapsed: !this.collapsed,
+      });
+      /** If the public event was not prevented. */
+      if (!sddsCollapseEvent.defaultPrevented) {
+        /** Emit internal event that is listened to by other side-menu components */
+        this.collapsed = !this.collapsed;
+        this.internalSddsCollapse.emit({
+          collapsed: this.collapsed,
+        });
+      }
+    };
     this.collapsed = false;
   }
-  collapsedSideMenuEventHandler(event) {
+  collapseSideMenuEventHandler(event) {
     this.collapsed = event.detail.collapsed;
   }
   connectedCallback() {
@@ -18,18 +34,20 @@ const SideMenuCollapseButton = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.collapsed = this.sideMenuEl.collapsed;
   }
   render() {
-    return (h(Host, { role: "button", tabindex: "0" }, h("div", { class: {
+    return (h(Host, { role: "button", tabindex: "0", onClick: () => {
+        this.handleClick();
+      } }, h("div", { class: {
         'wrapper': true,
         'state-collapsed': this.collapsed,
       } }, h("sdds-side-menu-item", { class: {
         button: true,
-      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), "Collapse")))));
+      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), h("slot", null))))));
   }
   get host() { return this; }
   static get style() { return sideMenuCollapseButtonCss; }
 }, [1, "sdds-side-menu-collapse-button", {
     "collapsed": [32]
-  }, [[16, "sddsSideMenuCollapsed", "collapsedSideMenuEventHandler"]]]);
+  }, [[16, "internalSddsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
@@ -53,5 +71,3 @@ const SddsSideMenuCollapseButton = SideMenuCollapseButton;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsSideMenuCollapseButton, defineCustomElement };
-
-//# sourceMappingURL=sdds-side-menu-collapse-button.js.map

package/dist/components/sdds-side-menu-dropdown-list-item.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sideMenuDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:48px;width:100%}:host .component{height:100%;width:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--sdds-nav-item-border-color);display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);background-color:var(--sdds-header-nav-item-dropdown-opened-background);color:var(--sdds-header-nav-item-dropdown-opened-color);border:none}:host .component ::slotted(a:hover),:host .component ::slotted(button:hover){background-color:var(--sdds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component.component-selected ::slotted(a),:host .component.component-selected ::slotted(button){border-left:4px solid var(--sdds-nav-item-border-color-active);padding-left:20px;background-color:var(--sdds-nav-item-background-selected)}:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button){padding-left:56px}";
+const sideMenuDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:48px;width:100%}:host .component{height:100%;width:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--sdds-nav-item-border-color);display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);background-color:var(--sdds-header-nav-item-dropdown-opened-background);color:var(--sdds-header-nav-item-dropdown-opened-color);border:none}:host .component ::slotted(a:hover),:host .component ::slotted(button:hover){background-color:var(--sdds-header-nav-item-dropdown-opened-background-hover);cursor:pointer}:host .component ::slotted(a:active),:host .component ::slotted(button:active){background-color:var(--sdds-header-nav-item-dropdown-opened-background-active) !important;cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component.component-selected ::slotted(a),:host .component.component-selected ::slotted(button){border-left:4px solid var(--sdds-nav-item-border-color-active);padding-left:20px;background-color:var(--sdds-header-nav-item-dropdown-opened-background-selected)}:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button){padding-left:56px}";
 
-const SideMenuDropdownListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const SideMenuDropdownListItem = /*@__PURE__*/ proxyCustomElement(class SideMenuDropdownListItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -11,12 +11,11 @@ const SideMenuDropdownListItem = /*@__PURE__*/ proxyCustomElement(class extends
     this.dropdownHasIcon = false;
     this.collapsed = false;
   }
-  collapsedSideMenuEventHandeler(event) {
+  collapseSideMenuEventHandler(event) {
     this.collapsed = event.detail.collapsed;
   }
   connectedCallback() {
     this.sideMenuEl = this.host.closest('sdds-side-menu');
-    this.collapsed = this.sideMenuEl.collapsed;
   }
   componentDidLoad() {
     var _a;
@@ -43,7 +42,7 @@ const SideMenuDropdownListItem = /*@__PURE__*/ proxyCustomElement(class extends
     "selected": [4],
     "dropdownHasIcon": [32],
     "collapsed": [32]
-  }, [[16, "sddsSideMenuCollapsed", "collapsedSideMenuEventHandeler"]]]);
+  }, [[16, "internalSddsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
@@ -62,5 +61,3 @@ const SddsSideMenuDropdownListItem = SideMenuDropdownListItem;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsSideMenuDropdownListItem, defineCustomElement };
-
-//# sourceMappingURL=sdds-side-menu-dropdown-list-item.js.map

package/dist/components/sdds-side-menu-dropdown-list.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const sideMenuDropdownListCss = ":host{display:block;width:190px}:host [role=list]{padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--sdds-header-app-launcher-menu-bg)}:host .state-collapsed ::slotted(*){border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}";
 
-const SideMenuDropdownList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const SideMenuDropdownList = /*@__PURE__*/ proxyCustomElement(class SideMenuDropdownList extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -14,7 +14,6 @@ const SideMenuDropdownList = /*@__PURE__*/ proxyCustomElement(class extends HTML
   }
   connectedCallback() {
     this.sideMenuEl = this.host.closest('sdds-side-menu');
-    this.collapsed = this.sideMenuEl.collapsed;
   }
   render() {
     return (h(Host, { role: "list" }, h("div", { class: {
@@ -25,7 +24,7 @@ const SideMenuDropdownList = /*@__PURE__*/ proxyCustomElement(class extends HTML
   static get style() { return sideMenuDropdownListCss; }
 }, [1, "sdds-side-menu-dropdown-list", {
     "collapsed": [32]
-  }, [[16, "sddsSideMenuCollapsed", "collapsedSideMenuEventHandler"]]]);
+  }, [[16, "internalSddsSideMenuPropChange", "collapsedSideMenuEventHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
@@ -44,5 +43,3 @@ const SddsSideMenuDropdownList = SideMenuDropdownList;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsSideMenuDropdownList, defineCustomElement };
-
-//# sourceMappingURL=sdds-side-menu-dropdown-list.js.map

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

@@ -2,9 +2,9 @@ import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/cor
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './side-menu-item.js';
 
-const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:68px;position:absolute;left:var(--side-menu-width);box-shadow:var(--sdds-nav-dropdown-menu-box);background-color:var(--sdds-header-app-launcher-menu-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(sdds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
+const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:68px;position:absolute;left:var(--side-menu-width);box-shadow:var(--sdds-nav-dropdown-menu-box);background-color:var(--sdds-grey-958)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(sdds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
 
-const SideMenuDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const SideMenuDropdown = /*@__PURE__*/ proxyCustomElement(class SideMenuDropdown extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -49,7 +49,6 @@ const SideMenuDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   }
   connectedCallback() {
     this.sideMenuEl = this.host.closest('sdds-side-menu');
-    this.collapsed = this.sideMenuEl.collapsed;
     this.open = this.defaultOpen;
   }
   render() {
@@ -70,7 +69,7 @@ const SideMenuDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "open": [32],
     "hoverState": [32],
     "collapsed": [32]
-  }, [[16, "sddsSideMenuCollapsed", "collapsedSideMenuEventHandler"], [1, "pointerenter", "onEventPointerEnter"], [0, "focusin", "onEventFocus"], [1, "pointerleave", "onEventPointerLeave"], [0, "focusout", "onEventBlur"]]]);
+  }, [[16, "internalSddsSideMenuPropChange", "collapsedSideMenuEventHandler"], [1, "pointerenter", "onEventPointerEnter"], [0, "focusin", "onEventFocus"], [1, "pointerleave", "onEventPointerLeave"], [0, "focusout", "onEventBlur"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
@@ -99,5 +98,3 @@ const SddsSideMenuDropdown = SideMenuDropdown;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsSideMenuDropdown, defineCustomElement };
-
-//# sourceMappingURL=sdds-side-menu-dropdown.js.map

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

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

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const sideMenuOverlayCss = ":host{position:absolute;width:100%;height:100%;background-color:black;transition:opacity 0.4s linear;opacity:0}";
 
-const SideMenuOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const SideMenuOverlay = /*@__PURE__*/ proxyCustomElement(class SideMenuOverlay extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -31,5 +31,3 @@ const SddsSideMenuOverlay = SideMenuOverlay;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsSideMenuOverlay, defineCustomElement };
-
-//# sourceMappingURL=sdds-side-menu-overlay.js.map

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

@@ -4,5 +4,3 @@ const SddsSideMenuUserImage = SideMenuUserImage;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsSideMenuUserImage, defineCustomElement };
-
-//# sourceMappingURL=sdds-side-menu-user-image.js.map

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

@@ -4,5 +4,3 @@ const SddsSideMenuUserLabel = SideMenuUserLabel;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsSideMenuUserLabel, defineCustomElement };
-
-//# sourceMappingURL=sdds-side-menu-user-label.js.map