@scania/tegel 0.0.5 → 0.0.6

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

@@ -13,95 +13,91 @@ const NavigationTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.componentWidth = 0; // visible width of this component
     this.buttonsWidth = 0; // total width of all nav items combined
     this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
+    this.addResizeObserver = () => {
+      const resizeObserver = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          const componentWidth = entry.contentRect.width;
+          let buttonsWidth = 0;
+          const navButtons = Array.from(this.host.children);
+          navButtons.forEach((navButton) => {
+            const style = window.getComputedStyle(navButton);
+            buttonsWidth +=
+              navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+            navButton.classList.add('sdds-navigation-tabs-tab');
+          });
+          this.componentWidth = componentWidth;
+          this.buttonsWidth = buttonsWidth;
+          this.scrollWidth = buttonsWidth - componentWidth;
+          if (this.buttonsWidth > this.componentWidth) {
+            this.evaluateScrollButtons();
+          }
+          else {
+            this.showLeftScroll = false;
+            this.showRightScroll = false;
+          }
+        });
+      });
+      resizeObserver.observe(this.navWrapperElement);
+    };
+    this.addEventListenerToTabs = () => {
+      this.children = Array.from(this.host.children);
+      this.children = this.children.map((item, index) => {
+        item.addEventListener('click', () => {
+          const sddsChangeEvent = this.sddsChange.emit({
+            selectedTabIndex: this.children.indexOf(item)
+          });
+          if (!sddsChangeEvent.defaultPrevented) {
+            if (!item.disabled) {
+              this.children.forEach((element) => element.setSelected(false));
+              item.setSelected(true);
+              this.selectedIndex = index;
+              this.sddsChange.emit({
+                selectedTabIndex: this.selectedIndex,
+              });
+            }
+          }
+        });
+        return item;
+      });
+    };
+    this.componentDidLoad = () => {
+      if (this.selectedIndex === undefined) {
+        this.addEventListenerToTabs();
+        this.children[this.defaultSelectedIndex].setSelected(true);
+        this.selectedIndex = this.defaultSelectedIndex;
+        this.sddsChange.emit({
+          selectedTabIndex: this.selectedIndex,
+        });
+      }
+      else {
+        this.children[this.selectedIndex].setSelected(true);
+        this.sddsChange.emit({
+          selectedTabIndex: this.selectedIndex,
+        });
+      }
+    };
     this.modeVariant = 'primary';
+    this.defaultSelectedIndex = 0;
+    this.selectedIndex = undefined;
     this.showLeftScroll = false;
     this.showRightScroll = false;
-    this.selectedTab = undefined;
   }
-  /** Selects a tab based on tabindex, will not select a disabled tab. */
+  /** Sets the passed tabindex as the selected tab. */
   async selectTab(tabIndex) {
     if (!this.children[tabIndex].disabled) {
-      this.children.forEach((element) => element.removeAttribute('selected'));
+      this.children.forEach((element) => element.setSelected(false));
       this.children = this.children.map((element, index) => {
         if (index === tabIndex) {
-          element.setAttribute('selected', '');
-          this.selectedTab = {
-            tab: element.innerText,
-            tabIndex: index,
-          };
+          element.setSelected(true);
+          this.selectedIndex = tabIndex;
         }
         return element;
       });
     }
     return {
-      selectedTab: this.selectedTab.tab,
-      selectedTabIndex: this.selectedTab.tabIndex,
+      selectedTabIndex: this.selectedIndex,
     };
   }
-  handleSelectedTabChange() {
-    this.host.setAttribute('selected-tab', this.selectedTab.tab);
-    this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);
-    this.sddsChange.emit({
-      selectedTab: this.selectedTab,
-    });
-  }
-  connectedCallback() {
-    this.children = Array.from(this.host.children);
-    this.children = this.children.map((item, index) => {
-      item.addEventListener('click', () => {
-        if (!item.disabled) {
-          this.children.forEach((element) => element.removeAttribute('selected'));
-          item.setAttribute('selected', '');
-          this.selectedTab = {
-            tab: item.innerText,
-            tabIndex: index,
-          };
-        }
-      });
-      if (index === 0) {
-        item.classList.add('first');
-      }
-      if (index === this.children.length - 1) {
-        item.classList.add('last');
-      }
-      if (item.selected) {
-        this.selectedTab = {
-          tab: item.innerText,
-          tabIndex: index,
-        };
-      }
-      return item;
-    });
-    this.children = Array.from(this.host.children);
-    this.children[0].classList.add('first');
-    this.children[this.children.length - 1].classList.add('last');
-  }
-  componentDidLoad() {
-    const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = Array.from(this.host.children);
-        navButtons.forEach((navButton) => {
-          const style = window.getComputedStyle(navButton);
-          buttonsWidth +=
-            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-          navButton.classList.add('sdds-navigation-tabs-tab');
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this.evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-      });
-    });
-    resizeObserver.observe(this.navWrapperElement);
-  }
   scrollRight() {
     const scroll = this.navWrapperElement.scrollLeft;
     this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
@@ -127,21 +123,27 @@ const NavigationTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       this.showLeftScroll = true;
     }
   }
+  connectedCallback() {
+    this.children = Array.from(this.host.children);
+    this.children[0].classList.add('first');
+    this.children[this.children.length - 1].classList.add('last');
+  }
+  componentDidRender() {
+    this.addResizeObserver();
+  }
   render() {
-    return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { role: "list", class: "wrapper", ref: (el) => {
+    return (h(Host, { role: "list", class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
         this.navWrapperElement = el;
       } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
   }
   get host() { return this; }
-  static get watchers() { return {
-    "selectedTab": ["handleSelectedTabChange"]
-  }; }
   static get style() { return navigationTabsCss; }
 }, [1, "sdds-navigation-tabs", {
     "modeVariant": [1, "mode-variant"],
+    "defaultSelectedIndex": [2, "default-selected-index"],
+    "selectedIndex": [514, "selected-index"],
     "showLeftScroll": [32],
     "showRightScroll": [32],
-    "selectedTab": [32],
     "selectTab": [64]
   }]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"sdds-navigation-tabs.js","mappings":"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","names":[],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs.scss?tag=sdds-navigation-tabs&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: flex;\n  background-color: var(--sdds-inline-tabs-background);\n  position: relative;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-inline-tabs-horizontal-divider-background);\n    opacity: var(--sdds-inline-tabs-horizontal-divider-opacity);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .scroll-right-button {\n    right: 0;\n    z-index: calc(z(tab) + 1);\n  }\n\n  .scroll-left-button {\n    left: 0;\n    z-index: calc(z(tab) + 1);\n  }\n\n  .scroll-right-button,\n  .scroll-left-button {\n    color: var(--sdds-folder-tabs-scroll-btn-color);\n    cursor: pointer;\n    border: 0;\n    width: 0;\n    background-color: var(--sdds-inline-tabs-scroll-btn-background);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n    position: sticky;\n\n    &.show {\n      min-width: 48px;\n      display: block;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    svg {\n      fill: var(--sdds-folder-tabs-scroll-btn-color);\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  State,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs',\n  styleUrl: 'navigation-tabs.scss',\n  shadow: true,\n})\nexport class NavigationTabs {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = 'primary';\n\n  @Element() host: HTMLElement;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  @State() selectedTab: {\n    tab: string;\n    tabIndex: number;\n  };\n\n  private navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  private componentWidth: number = 0; // visible width of this component\n\n  private buttonsWidth: number = 0; // total width of all nav items combined\n\n  private scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  private children: Array<HTMLSddsNavigationTabsLinkElement | HTMLSddsNavigationTabsButtonElement>;\n\n  /** Selects a tab based on tabindex, will not select a disabled tab. */\n  @Method()\n  async selectTab(tabIndex: number) {\n    if (!this.children[tabIndex].disabled) {\n      this.children.forEach((element) => element.removeAttribute('selected'));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setAttribute('selected', '');\n          this.selectedTab = {\n            tab: element.innerText,\n            tabIndex: index,\n          };\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTab: this.selectedTab.tab,\n      selectedTabIndex: this.selectedTab.tabIndex,\n    };\n  }\n\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTab: {\n      tab: string;\n      tabIndex: number;\n    };\n  }>;\n\n  @Watch('selectedTab')\n  handleSelectedTabChange() {\n    this.host.setAttribute('selected-tab', this.selectedTab.tab);\n    this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);\n    this.sddsChange.emit({\n      selectedTab: this.selectedTab,\n    });\n  }\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<\n      HTMLSddsFolderTabsLinkElement | HTMLSddsFolderTabsButtonElement\n    >;\n    this.children = this.children.map((item, index) => {\n      item.addEventListener('click', () => {\n        if (!item.disabled) {\n          this.children.forEach((element) => element.removeAttribute('selected'));\n          item.setAttribute('selected', '');\n          this.selectedTab = {\n            tab: item.innerText,\n            tabIndex: index,\n          };\n        }\n      });\n      if (index === 0) {\n        item.classList.add('first');\n      }\n      if (index === this.children.length - 1) {\n        item.classList.add('last');\n      }\n      if (item.selected) {\n        this.selectedTab = {\n          tab: item.innerText,\n          tabIndex: index,\n        };\n      }\n      return item;\n    });\n\n    this.children = Array.from(this.host.children) as Array<\n      HTMLSddsNavigationTabsLinkElement | HTMLSddsNavigationTabsButtonElement\n    >;\n    this.children[0].classList.add('first');\n    this.children[this.children.length - 1].classList.add('last');\n  }\n\n  componentDidLoad() {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n          navButton.classList.add('sdds-navigation-tabs-tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n        <div\n          role=\"list\"\n          class=\"wrapper\"\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLElement;\n          }}\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            onClick={() => this.scrollLeft()}\n            disabled={!this.showLeftScroll}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot />\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            onClick={() => this.scrollRight()}\n            disabled={!this.showRightScroll}\n          >\n            <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-navigation-tabs.js","mappings":"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","names":[],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs.scss?tag=sdds-navigation-tabs&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: flex;\n  background-color: var(--sdds-inline-tabs-background);\n  position: relative;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-inline-tabs-horizontal-divider-background);\n    opacity: var(--sdds-inline-tabs-horizontal-divider-opacity);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .scroll-right-button {\n    right: 0;\n    z-index: calc(z(tab) + 1);\n  }\n\n  .scroll-left-button {\n    left: 0;\n    z-index: calc(z(tab) + 1);\n  }\n\n  .scroll-right-button,\n  .scroll-left-button {\n    color: var(--sdds-folder-tabs-scroll-btn-color);\n    cursor: pointer;\n    border: 0;\n    width: 0;\n    background-color: var(--sdds-inline-tabs-scroll-btn-background);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n    position: sticky;\n\n    &.show {\n      min-width: 48px;\n      display: block;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    svg {\n      fill: var(--sdds-folder-tabs-scroll-btn-color);\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  State,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs',\n  styleUrl: 'navigation-tabs.scss',\n  shadow: true,\n})\nexport class NavigationTabs {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = 'primary';\n\n  /** Sets the default selected tab. */\n  @Prop() defaultSelectedIndex: number = 0;\n\n  /** Sets the selected tab.\n   * If this is set all tab changes needs to be handled by the user. */\n  @Prop({ reflect: true }) selectedIndex: number;\n\n  @Element() host: HTMLElement;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  private navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  private componentWidth: number = 0; // visible width of this component\n\n  private buttonsWidth: number = 0; // total width of all nav items combined\n\n  private scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  private children: Array<HTMLSddsNavigationTabElement>;\n\n  /** Sets the passed tabindex as the selected tab. */\n  @Method()\n  async selectTab(tabIndex: number) {\n    if (!this.children[tabIndex].disabled) {\n      this.children.forEach((element) => element.setSelected(false));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setSelected(true);\n          this.selectedIndex = tabIndex;\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTabIndex: this.selectedIndex,\n    };\n  }\n\n  /** Event emitted when the selected tab is changed. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTabIndex: number;\n  }>;\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  addResizeObserver = () => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n          navButton.classList.add('sdds-navigation-tabs-tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n    resizeObserver.observe(this.navWrapperElement);\n  };\n\n  addEventListenerToTabs = () => {\n    this.children = Array.from(this.host.children) as Array<HTMLSddsNavigationTabElement>;\n    this.children = this.children.map((item, index) => {\n      item.addEventListener('click', () => {\n        const sddsChangeEvent = this.sddsChange.emit({\n          selectedTabIndex: this.children.indexOf(item)\n        });\n        if(!sddsChangeEvent.defaultPrevented) {\n          if (!item.disabled) {\n            this.children.forEach((element) => element.setSelected(false));\n            item.setSelected(true);\n            this.selectedIndex = index;\n            this.sddsChange.emit({\n              selectedTabIndex: this.selectedIndex,\n            });\n          }\n        }\n      });\n      return item;\n    });\n  };\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<any>;\n    this.children[0].classList.add('first');\n    this.children[this.children.length - 1].classList.add('last');\n  }\n\n  componentDidLoad = () => {\n    if (this.selectedIndex === undefined) {\n      this.addEventListenerToTabs();\n      this.children[this.defaultSelectedIndex].setSelected(true);\n      this.selectedIndex = this.defaultSelectedIndex;\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    } else {\n      this.children[this.selectedIndex].setSelected(true);\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    }\n  };\n\n  componentDidRender() {\n    this.addResizeObserver();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"list\"\n        class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}\n      >\n        <div\n          class=\"wrapper\"\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLElement;\n          }}\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            onClick={() => this.scrollLeft()}\n            disabled={!this.showLeftScroll}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot />\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            onClick={() => this.scrollRight()}\n            disabled={!this.showRightScroll}\n          >\n            <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,135 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createPopper } from './popper.js';
-
-const popoverCanvasCss = ":host{box-sizing:border-box;color:var(--sdds-popover-canvas-color);background-color:var(--sdds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){display:block}";
-
-const PopoverCanvas = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.initialize = (referenceEl) => {
-      this.popperInstance = createPopper(referenceEl, this.host, {
-        placement: this.placement,
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [this.offsetSkidding, this.offsetDistance],
-            },
-          },
-          ...this.modifiers,
-        ],
-      });
-      if (this.show === null) {
-        referenceEl.addEventListener('click', (event) => {
-          event.stopPropagation();
-          if (this.isShown) {
-            this.isShown = false;
-          }
-          else {
-            this.isShown = true;
-          }
-        });
-      }
-    };
-    this.selector = '';
-    this.referenceEl = undefined;
-    this.show = null;
-    this.placement = 'auto';
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.modifiers = [];
-    this.renderedShowValue = false;
-    this.popperInstance = undefined;
-    this.target = undefined;
-    this.isShown = false;
-  }
-  onShowChange(newValue) {
-    this.isShown = newValue;
-  }
-  onReferenceElChange(newValue, oldValue) {
-    var _a;
-    if (newValue !== oldValue) {
-      (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-      if (newValue) {
-        this.initialize(newValue);
-      }
-    }
-  }
-  onAnyClick(event) {
-    if (this.isShown && this.show === null) {
-      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
-      const isClickOutside = !event.composedPath().includes(this.host);
-      if (isClickOutside) {
-        this.isShown = false;
-      }
-    }
-  }
-  connectedCallback() {
-    if (this.show !== null) {
-      this.isShown = this.show;
-    }
-  }
-  componentDidLoad() {
-    var _a;
-    if (this.selector || this.referenceEl) {
-      const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-      if (referenceEl) {
-        this.initialize(referenceEl);
-      }
-      else {
-        console.error(`Could not initialize popover-canvas: element with selector '${this.selector}' not found.`);
-      }
-    }
-  }
-  componentDidRender() {
-    if (this.isShown && !this.renderedShowValue) {
-      // Here we update the popper position since its position is wrong
-      // before it is rendered.
-      this.popperInstance.update();
-    }
-    this.renderedShowValue = this.isShown;
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-  }
-  render() {
-    return (h(Host, { class: `sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}` }, h("slot", null)));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "show": ["onShowChange"],
-    "referenceEl": ["onReferenceElChange"]
-  }; }
-  static get style() { return popoverCanvasCss; }
-}, [1, "sdds-popover-canvas", {
-    "selector": [1],
-    "referenceEl": [16],
-    "show": [4],
-    "placement": [1],
-    "offsetSkidding": [2, "offset-skidding"],
-    "offsetDistance": [2, "offset-distance"],
-    "modifiers": [16],
-    "renderedShowValue": [32],
-    "popperInstance": [32],
-    "target": [32],
-    "isShown": [32]
-  }, [[8, "click", "onAnyClick"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-popover-canvas"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-popover-canvas":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PopoverCanvas);
-      }
-      break;
-  } });
-}
+import { P as PopoverCanvas, d as defineCustomElement$1 } from './popover-canvas.js';
 
 const SddsPopoverCanvas = PopoverCanvas;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"sdds-popover-canvas.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,4TAA4T;;MCSxU,aAAa;;;;;IA6DxB,eAAU,GAAG,CAAC,WAAW;MACvB,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,EAAE;QACzD,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,SAAS,EAAE;UACT;YACE,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE;cACP,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC;aACnD;WACF;UACD,GAAG,IAAI,CAAC,SAAS;SAClB;OACF,CAAC,CAAC;MAEH,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;QACtB,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK;UAC1C,KAAK,CAAC,eAAe,EAAE,CAAC;UACxB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;WACtB;eAAM;YACL,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;WACrB;SACF,CAAC,CAAC;OACJ;KACF,CAAC;oBAjFyB,EAAE;;gBAQL,IAAI;qBAGG,MAAM;0BAGJ,CAAC;0BAGD,CAAC;qBAGJ,EAAE;6BAEM,KAAK;;;mBAMf,KAAK;;EAGjC,YAAY,CAAC,QAAiB;IAC5B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;GACzB;EAGD,mBAAmB,CAAC,QAAqB,EAAE,QAAqB;;IAC9D,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;MAE/B,IAAI,QAAQ,EAAE;QACZ,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;OAC3B;KACF;GACF;EAGD,UAAU,CAAC,KAAiB;IAC1B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;;MAEtC,MAAM,cAAc,GAAG,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAW,CAAC,CAAC;MACxE,IAAI,cAAc,EAAE;QAClB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;OACtB;KACF;GACF;EA4BD,iBAAiB;IACf,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE;MACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;KAC1B;GACF;EAED,gBAAgB;;IACd,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE;MACrC,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;MAE9E,IAAI,WAAW,EAAE;QACf,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;OAC9B;WAAM;QACL,OAAO,CAAC,KAAK,CACX,+DAA+D,IAAI,CAAC,QAAQ,cAAc,CAC3F,CAAC;OACH;KACF;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;;;MAG3C,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;KAC9B;IACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC;GACvC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,uBAAuB,IAAI,CAAC,OAAO,GAAG,0BAA0B,GAAG,EAAE,EAAE,IAClF,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/popover-canvas/popover-canvas.scss?tag=sdds-popover-canvas&encapsulation=shadow","./src/components/popover-canvas/popover-canvas.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  color: var(--sdds-popover-canvas-color);\n  background-color: var(--sdds-popover-canvas-background);\n  box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n  border-radius: 4px;\n  z-index: z(tooltip);\n  display: none;\n}\n\n:host(.sdds-popover-canvas-show) {\n  display: block;\n}\n","import { Component, Host, Element, Listen, h, Prop, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-canvas',\n  styleUrl: 'popover-canvas.scss',\n  shadow: true,\n})\nexport class PopoverCanvas {\n  @Element() host!: HTMLSddsPopoverCanvasElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls wether the popover is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside.\n   */\n  @Prop() show: boolean = null;\n\n  /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */\n  @Prop() modifiers: Object[] = [];\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @State() isShown: boolean = false;\n\n  @Watch('show')\n  onShowChange(newValue: boolean) {\n    this.isShown = newValue;\n  }\n\n  @Watch('referenceEl')\n  onReferenceElChange(newValue: HTMLElement, oldValue: HTMLElement) {\n    if (newValue !== oldValue) {\n      this.popperInstance?.destroy();\n\n      if (newValue) {\n        this.initialize(newValue);\n      }\n    }\n  }\n\n  @Listen('click', { target: 'window' })\n  onAnyClick(event: MouseEvent) {\n    if (this.isShown && this.show === null) {\n      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n      const isClickOutside = !event.composedPath().includes(this.host as any);\n      if (isClickOutside) {\n        this.isShown = false;\n      }\n    }\n  }\n\n  initialize = (referenceEl) => {\n    this.popperInstance = createPopper(referenceEl, this.host, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n        ...this.modifiers,\n      ],\n    });\n\n    if (this.show === null) {\n      referenceEl.addEventListener('click', (event) => {\n        event.stopPropagation();\n        if (this.isShown) {\n          this.isShown = false;\n        } else {\n          this.isShown = true;\n        }\n      });\n    }\n  };\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n\n      if (referenceEl) {\n        this.initialize(referenceEl);\n      } else {\n        console.error(\n          `Could not initialize popover-canvas: element with selector '${this.selector}' not found.`,\n        );\n      }\n    }\n  }\n\n  componentDidRender() {\n    if (this.isShown && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.isShown;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-popover-canvas.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -6,7 +6,13 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.sddsChange = createEvent(this, "sddsChange", 7);
+    this.sddsChange = createEvent(this, "sddsChange", 6);
+    this.handleChange = () => {
+      this.sddsChange.emit({
+        radioId: this.radioId,
+        value: this.value,
+      });
+    };
     this.name = undefined;
     this.value = undefined;
     this.radioId = crypto.randomUUID();
@@ -17,14 +23,9 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     return (h("div", { class: "sdds-radio-button" }, h("input", { class: "sdds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked,
       // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!
-      // aria-labelledby={this.ariaLabelledBy} 
+      // aria-labelledby={this.ariaLabelledBy}
       // aria-describedby={this.host.getAttribute('aria-describedby')}
-      required: this.required, disabled: this.disabled, onChange: () => {
-        this.sddsChange.emit({
-          radioId: this.radioId,
-          value: this.value,
-        });
-      } }), h("label", { htmlFor: this.radioId }, h("slot", null))));
+      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; }

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

@@ -1 +1 @@
-{"file":"sdds-radio-button.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,smKAAsmK;;MCSznK,WAAW;;;;;;;mBAiBI,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAgBjC,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,aACA,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO;;;;MAK1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE;QACR,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;UAClB,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CAAA;OACH,GAAI,EACL,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,eAAa,CACP,CACF,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/radio-button/radio-button-component.scss?tag=sdds-radio-button&encapsulation=scoped","./src/components/radio-button/radio-button.tsx"],"sourcesContent":["@import './radio-button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-radio-button {\n  @include sdds-box-sizing;\n\n  display: flex;\n  align-items: center;\n  margin-left: -4px;\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-radio-button-color);\n\n  .sdds-form-input[type='radio'] {\n    appearance: none;\n    outline: none;\n    margin: 0;\n    border: 0;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    position: relative;\n    cursor: pointer;\n\n    + label {\n      padding: var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4)\n        var(--sdds-spacing-element-4);\n      cursor: pointer;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: 50%;\n      box-sizing: border-box;\n    }\n\n    &::before {\n      width: 24px;\n      height: 24px;\n      left: 0;\n      top: 0;\n    }\n\n    &::after {\n      border: 1px solid var(--sdds-radio-button-interaction-01);\n      background-color: var(--sdds-radio-button-interaction-02);\n      width: 16px;\n      height: 16px;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:hover {\n      &::before {\n        background-color: var(--sdds-radio-button-background-hover);\n        opacity: 0.12;\n      }\n    }\n\n    &:focus {\n      &::before {\n        background-color: var(--sdds-radio-button-background-focus);\n        opacity: 0.24;\n        animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      cursor: not-allowed;\n\n      &::after {\n        border-color: var(--sdds-radio-button-border-color-disabled-after);\n        background-color: var(--sdds-radio-button-interaction-02);\n      }\n\n      + label {\n        color: var(--sdds-radio-button-disabled);\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        &::before {\n          display: none;\n          opacity: 1;\n        }\n      }\n    }\n  }\n\n  .sdds-form-input[type='radio']:checked {\n    &::after {\n      border: 4px solid var(--sdds-radio-button-interaction-01);\n    }\n\n    &:disabled,\n    &.disabled {\n      &:hover::before,\n      &::before {\n        display: block;\n        width: 16px;\n        height: 16px;\n        left: 4px;\n        top: 4px;\n        border: 1px solid var(--sdds-radio-button-color-disabled-before);\n        box-sizing: content-box;\n      }\n\n      &::after {\n        border: 4px solid var(--sdds-radio-button-interaction-02);\n        background-color: var(--sdds-radio-button-color-disabled-after);\n        left: calc(4px + 1px);\n        top: calc(4px + 1px);\n      }\n    }\n  }\n\n  @keyframes rb-focus {\n    0% {\n      transform: scale(0);\n      opacity: 0;\n    }\n\n    100% {\n      transform: scale(1);\n      opacity: 0.24;\n    }\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-radio-button',\n  styleUrl: 'radio-button-component.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class RadioButton {\n\n  /** Name of radio button, used for reference. */\n  @Prop() name: string;\n\n  /** Value of input. */\n  @Prop() value: string;\n\n  /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaLabelledBy: string;\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaDescribedBy: string;\n\n  /** Unique radio button identifier. */\n  @Prop() radioId: string = crypto.randomUUID();\n  \n  /** Decides if the radio button is checked or not. */\n  @Prop({ reflect: true }) checked: boolean = false;\n  \n  /** Decides if the radio button is required or not. */\n  @Prop() required: boolean = false;\n  \n  /** Decides if the radio button is disabled or not. */\n  @Prop() disabled: boolean = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    radioId: string;\n    value: string;\n  }>;\n\n  render() {\n    return (\n      <div class=\"sdds-radio-button\">\n        <input \n        class=\"sdds-form-input\" \n        type=\"radio\" \n        name={this.name}\n        id={this.radioId} \n        value={this.value}\n        checked={this.checked} \n        aria-checked={this.checked} \n\n        // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n        // aria-labelledby={this.ariaLabelledBy} \n        // aria-describedby={this.host.getAttribute('aria-describedby')}\n        required={this.required} \n        disabled={this.disabled}\n        onChange={() => {\n          this.sddsChange.emit({\n             radioId: this.radioId,\n             value: this.value,\n          })\n        }} />\n        <label htmlFor={this.radioId}>\n          <slot></slot>\n        </label>\n        </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-radio-button.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,smKAAsmK;;MCSznK,WAAW;;;;;IAyCtB,iBAAY,GAAG;MACb,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAC;;;mBA9BwB,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAuBjC,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,aACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO;;;;MAI1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GACnC,EACF,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/radio-button/radio-button-component.scss?tag=sdds-radio-button&encapsulation=scoped","./src/components/radio-button/radio-button.tsx"],"sourcesContent":["@import './radio-button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-radio-button {\n  @include sdds-box-sizing;\n\n  display: flex;\n  align-items: center;\n  margin-left: -4px;\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-radio-button-color);\n\n  .sdds-form-input[type='radio'] {\n    appearance: none;\n    outline: none;\n    margin: 0;\n    border: 0;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    position: relative;\n    cursor: pointer;\n\n    + label {\n      padding: var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4)\n        var(--sdds-spacing-element-4);\n      cursor: pointer;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: 50%;\n      box-sizing: border-box;\n    }\n\n    &::before {\n      width: 24px;\n      height: 24px;\n      left: 0;\n      top: 0;\n    }\n\n    &::after {\n      border: 1px solid var(--sdds-radio-button-interaction-01);\n      background-color: var(--sdds-radio-button-interaction-02);\n      width: 16px;\n      height: 16px;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:hover {\n      &::before {\n        background-color: var(--sdds-radio-button-background-hover);\n        opacity: 0.12;\n      }\n    }\n\n    &:focus {\n      &::before {\n        background-color: var(--sdds-radio-button-background-focus);\n        opacity: 0.24;\n        animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      cursor: not-allowed;\n\n      &::after {\n        border-color: var(--sdds-radio-button-border-color-disabled-after);\n        background-color: var(--sdds-radio-button-interaction-02);\n      }\n\n      + label {\n        color: var(--sdds-radio-button-disabled);\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        &::before {\n          display: none;\n          opacity: 1;\n        }\n      }\n    }\n  }\n\n  .sdds-form-input[type='radio']:checked {\n    &::after {\n      border: 4px solid var(--sdds-radio-button-interaction-01);\n    }\n\n    &:disabled,\n    &.disabled {\n      &:hover::before,\n      &::before {\n        display: block;\n        width: 16px;\n        height: 16px;\n        left: 4px;\n        top: 4px;\n        border: 1px solid var(--sdds-radio-button-color-disabled-before);\n        box-sizing: content-box;\n      }\n\n      &::after {\n        border: 4px solid var(--sdds-radio-button-interaction-02);\n        background-color: var(--sdds-radio-button-color-disabled-after);\n        left: calc(4px + 1px);\n        top: calc(4px + 1px);\n      }\n    }\n  }\n\n  @keyframes rb-focus {\n    0% {\n      transform: scale(0);\n      opacity: 0;\n    }\n\n    100% {\n      transform: scale(1);\n      opacity: 0.24;\n    }\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-radio-button',\n  styleUrl: 'radio-button-component.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class RadioButton {\n  /** Name of radio button, used for reference. */\n  @Prop() name: string;\n\n  /** Value of input. */\n  @Prop() value: string;\n\n  /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaLabelledBy: string;\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaDescribedBy: string;\n\n  /** Unique radio button identifier. */\n  @Prop() radioId: string = crypto.randomUUID();\n\n  /** Decides if the radio button is checked or not. */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Decides if the radio button is required or not. */\n  @Prop() required: boolean = false;\n\n  /** Decides if the radio button is disabled or not. */\n  @Prop() disabled: boolean = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    radioId: string;\n    value: string;\n  }>;\n\n  handleChange = () => {\n    this.sddsChange.emit({\n      radioId: this.radioId,\n      value: this.value,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"sdds-radio-button\">\n        <input\n          class=\"sdds-form-input\"\n          type=\"radio\"\n          name={this.name}\n          id={this.radioId}\n          value={this.value}\n          checked={this.checked}\n          aria-checked={this.checked}\n          // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n          // aria-labelledby={this.ariaLabelledBy}\n          // aria-describedby={this.host.getAttribute('aria-describedby')}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={() => this.handleChange()}\n        />\n        <label htmlFor={this.radioId}>\n          <slot name=\"label\"></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-side-menu-close-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuCloseButton extends Components.SddsSideMenuCloseButton, HTMLElement {}
+export const SddsSideMenuCloseButton: {
+  prototype: SddsSideMenuCloseButton;
+  new (): SddsSideMenuCloseButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as inheritAriaAttributes } from './utils.js';
+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 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("button", Object.assign({}, buttonProps), h("sdds-icon", { name: "cross", size: "20px" }))));
+  }
+  get host() { return this; }
+  static get style() { return sideMenuCloseButtonCss; }
+}, [1, "sdds-side-menu-close-button"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-close-button", "sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-close-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuCloseButton);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsSideMenuCloseButton = SideMenuCloseButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuCloseButton, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu-close-button.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-close-button.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,+nBAA+nB;;MCQjpB,mBAAmB;;;;;;EAG9B,MAAM;IACJ,MAAM,WAAW,mBACf,YAAY,EAAE,OAAO,IAClB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IACF,QACE,EAAC,IAAI,QACH,8BAAY,WAAW,GACrB,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.scss?tag=sdds-side-menu-close-button&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.tsx"],"sourcesContent":[":host {\n  opacity: 0;\n  transition: opacity 0.15s ease;\n\n  button {\n    height: 64px;\n    width: 100%;\n    text-align: left;\n    padding: 0 24px;\n    border: none;\n    background-color: var(--sdds-sidebar-side-menu-background-cover);\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-sidebar-side-menu-single-item-color);\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n\n    &:hover {\n      cursor: pointer;\n      background-color: var(--sdds-sidebar-item-state-hover);\n    }\n\n    &:focus-visible {\n      cursor: pointer;\n      border: 1px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);\n    }\n  }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\nimport { inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-side-menu-close-button',\n  styleUrl: 'side-menu-close-button.scss',\n  shadow: true,\n})\nexport class SideMenuCloseButton {\n  @Element() host: HTMLElement;\n\n  render() {\n    const buttonProps = {\n      'aria-label': 'Close',\n      ...inheritAriaAttributes(this.host),\n    };\n    return (\n      <Host>\n        <button {...buttonProps}>\n          <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-side-menu-collapse-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuCollapseButton extends Components.SddsSideMenuCollapseButton, HTMLElement {}
+export const SddsSideMenuCollapseButton: {
+  prototype: SddsSideMenuCollapseButton;
+  new (): SddsSideMenuCollapseButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, 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 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  render() {
+    return (h(Host, { role: "button", tabindex: "0" }, 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")))));
+  }
+  get host() { return this; }
+  static get style() { return sideMenuCollapseButtonCss; }
+}, [1, "sdds-side-menu-collapse-button", {
+    "collapsed": [32]
+  }, [[16, "sddsSideMenuCollapsed", "collapsedSideMenuEventHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-collapse-button", "sdds-side-menu-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-collapse-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuCollapseButton);
+      }
+      break;
+    case "sdds-side-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsSideMenuCollapseButton = SideMenuCollapseButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuCollapseButton, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu-collapse-button.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-collapse-button.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,qcAAqc;;MCQ1d,sBAAsB;;;;;qBAGH,KAAK;;EAKnC,6BAA6B,CAAC,KAAkC;IAC9D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;GACzC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACtD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;GAC5C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG,IAC9B,WACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,iBAAiB,EAAE,IAAI,CAAC,SAAS;OAClC,IAED,2BACE,KAAK,EAAE;QACL,MAAM,EAAE,IAAI;OACb,IAED,aACE,WACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,IAEnB,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,2NAA2N,EAC7N,IAAI,EAAC,cAAc,GACnB,CACE,aAEJ,CACgB,CAClB,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.scss?tag=sdds-side-menu-collapse-button&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n@import '../../../../global/_variables.scss';\n\n:host {\n  position: sticky;\n  bottom: 0;\n  display: none;\n  height: 68px;\n  border-top: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n\n  .icon {\n    transform: rotateZ(90deg);\n    transition: all 0.2s ease-in-out;\n    width: 20px;\n    height: 20px;\n  }\n\n  .state-collapsed {\n    .icon {\n      transform: translateX(-50%) rotateZ(90deg) rotateX(180deg);\n      color: var(--sdds-sidebar-side-menu-single-item-color);\n      margin-left: 0;\n      position: absolute;\n      left: 50%;\n    }\n  }\n}\n\n@media (min-width: $grid-lg) {\n  :host {\n    display: block;\n  }\n}\n","import { Component, Element, h, Host, Listen, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\n\n@Component({\n  tag: 'sdds-side-menu-collapse-button',\n  styleUrl: 'side-menu-collapse-button.scss',\n  shadow: true,\n})\nexport class SideMenuCollapseButton {\n  @Element() host: HTMLElement;\n\n  @State() collapsed: boolean = false;\n\n  private sideMenuEl: HTMLSddsSideMenuElement;\n\n  @Listen('sddsSideMenuCollapsed', { target: 'body' })\n  collapsedSideMenuEventHandler(event: CustomEvent<CollapsedEvent>) {\n    this.collapsed = event.detail.collapsed;\n  }\n\n  connectedCallback() {\n    this.sideMenuEl = this.host.closest('sdds-side-menu');\n    this.collapsed = this.sideMenuEl.collapsed;\n  }\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\">\n        <div\n          class={{\n            'wrapper': true,\n            'state-collapsed': this.collapsed,\n          }}\n        >\n          <sdds-side-menu-item\n            class={{\n              button: true,\n            }}\n          >\n            <a>\n              <svg\n                class=\"icon\"\n                slot=\"icon\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 32 32\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  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\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Collapse\n            </a>\n          </sdds-side-menu-item>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuDropdownListItem extends Components.SddsSideMenuDropdownListItem, HTMLElement {}
+export const SddsSideMenuDropdownListItem: {
+  prototype: SddsSideMenuDropdownListItem;
+  new (): SddsSideMenuDropdownListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;