@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.75

package/components/hy-tabs2.js

@@ -1,348 +1,347 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './index3.js';
 import { d as defineCustomElement$2 } from './hy-box2.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const hyTabsCss = ":root{--brand-main:#0e688b;--brand-main-soft:#b1e7ff;--brand-main-bright:#48c5f8;--brand-main-light:#107eab;--brand-main-active:#005379;--brand-main-dark:#003146;--brand-main-nearly-black:#000222;--link-blue:#0479a4;--link-disabled:#767676;--grayscale-white:#fff;--grayscale-slightly-gray:#fefefe;--grayscale-light:#f8f8f8;--grayscale-medium:#d2d2d2;--grayscale-background-box:#f5f5f5;--grayscale-tabs-border:#e6e6e6;--grayscale-background-arrow:#dfdfdf;--grayscale-medium-dark:#979797;--grayscale-dark:#555555;--grayscale-dark-text:#222222;--grayscale-black:#000000;--additional-red-light:#e5053a;--additional-red-dark:#a31621;--additional-purple-light:#420039;--additional-yellow-light:#f9a21a;--additional-yellow:#c47f1b;--additional-skyblue:#48c5f8;--additional-orange:#d14600;--additional-green-light:#96ba3c;--additional-green-dark:#006400;--hover-gray:#eaeaea}*{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--gutter-mobile:16px;--gutter-narrow:24px;--gutter-medium:24px;--gutter-wide:24px;--gutter-extrawide:32px}:root{--breakpoint-extrawide:75.0625rem;--breakpoint-max-width:75.0625rem;--breakpoint-medium:48rem;--breakpoint-narrow:30rem;--breakpoint-wide:60rem}:host{display:block}.hy-tabs__container .hy-tablist-container{border-bottom:1px solid var(--grayscale-tabs-border);position:relative}.hy-tabs__container .hy-tab-scroll{background-color:rgba(255, 255, 255, 0.8);border:0;height:100%;margin:0;padding:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:4}.hy-tabs__container .hy-tab-scroll.is-hidden{display:none;visibility:hidden}.hy-tabs__container .hy-tab-scroll.is-disabled{background-color:var(--grayscale-medium)}.hy-tabs__container .hy-tab-scroll.is-disabled:hover{cursor:none}.hy-tabs__container .hy-tab-scroll:focus,.hy-tabs__container .hy-tab-scroll:hover{outline:none;cursor:pointer}.hy-tabs__container .hy-tab-scroll span{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-black);border-radius:100%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:32px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:32px}.hy-tabs__container .hy-tab-scroll span svg{fill:var(--grayscale-white);height:16px;width:16px}.hy-tabs__container .hy-tab-scroll__left{left:0;padding-right:8px}.hy-tabs__container .hy-tab-scroll__left svg{-webkit-transform:translateX(-1px);transform:translateX(-1px)}.hy-tabs__container .hy-tab-scroll__right{padding-left:8px;right:0}.hy-tabs__container .hy-tab-scroll__right svg{-webkit-transform:translateX(1px);transform:translateX(1px)}.hy-tabs__container [role=tablist]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin:0 0 -0.1em;overflow:scroll;position:relative;scrollbar-width:none;white-space:nowrap}.hy-tabs__container [role=tablist]::-webkit-scrollbar{display:none}.hy-tabs__container [role=tablist] a{display:-webkit-box;display:-ms-flexbox;display:flex;max-width:47.56%;text-decoration:none;-ms-flex-negative:0;flex-shrink:0}.hy-tabs__container [role=tablist] a:not(:first-of-type){margin-left:6px}@media (min-width: 30rem){.hy-tabs__container [role=tablist] a{max-width:35.37%}}@media (min-width: 60rem){.hy-tabs__container [role=tablist] a{max-width:23.13%}}@media (min-width: 75.0625rem){.hy-tabs__container [role=tablist] a{max-width:23.03%}}.hy-tabs__container [role=tab]{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;background-color:transparent;border:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:6px;padding:0}.hy-tabs__container [role=tab]>span{font-size:0.875rem;line-height:14px;font-weight:700;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--grayscale-background-box);border:0;color:var(--link-blue);display:-webkit-box;display:-ms-flexbox;display:flex;font-family:var(--main-font-family);-ms-hyphens:auto;hyphens:auto;letter-spacing:-0.5px;padding:8px 8px 7px;pointer-events:none;position:relative;text-align:left;white-space:normal;word-break:break-word;overflow-wrap:break-word;overflow-wrap:break-word}@media (min-width: 30rem){.hy-tabs__container [role=tab]>span{font-size:1rem;line-height:18px;padding:16px 12px 10px}}@media (min-width: 75.0625rem){.hy-tabs__container [role=tab]>span{font-size:1.125rem;line-height:20px;letter-spacing:-0.6px;padding:16px 16px 14px}}@supports (overflow-wrap: anywhere){.hy-tabs__container [role=tab]>span{overflow-wrap:anywhere}}@supports (overflow-wrap: anywhere){.hy-tabs__container [role=tab]>span{overflow-wrap:anywhere}}@media (min-width: 75.0625rem){.hy-tabs__container [role=tab].large{margin:0 12px 0 0}}.hy-tabs__container [role=tab][aria-selected=true]{border-bottom-width:0;border:1px solid var(--grayscale-dark);margin-bottom:0;z-index:3}.hy-tabs__container [role=tab][aria-selected=true]>span{background-color:var(--grayscale-white);color:var(--grayscale-black);padding-bottom:13px}@media (min-width: 30rem){.hy-tabs__container [role=tab][aria-selected=true]>span{padding-bottom:16px}}@media (min-width: 75.0625rem){.hy-tabs__container [role=tab][aria-selected=true]>span{padding-bottom:20px}}.hy-tabs__container [role=tab][aria-selected=true]>span:before{background-color:var(--grayscale-white);bottom:0;content:\"\";height:4px;left:0;position:absolute;right:0;-webkit-transform:translateY(50%);transform:translateY(50%)}.hy-tabs__container [role=tab][aria-selected=true]>span:after{background-color:var(--grayscale-black);bottom:0;content:\"\";height:4px;left:8px;position:absolute;right:8px}.hy-tabs__container [role=tab]:hover{border-radius:0;color:inherit;cursor:pointer;text-decoration:none}.hy-tabs__container [role=tab]:hover span{background-color:var(--hover-gray);color:var(--brand-main-active)}.hy-tabs__container [role=tabpanel]{border:1px solid var(--grayscale-dark);padding:28px 12px;position:relative;z-index:2}@media (min-width: 30rem){.hy-tabs__container [role=tabpanel]{padding:38px 15px}}@media (min-width: 60rem){.hy-tabs__container [role=tabpanel]{padding:40px 20px}}.hy-tabs__container [role=tabpanel]:focus{outline:1px solid var(--brand-main-active)}";
+const HyTabsStyle0 = hyTabsCss;
 
 // For easy reference
 let keys = {
-  end: 35,
-  home: 36,
-  left: 37,
-  up: 38,
-  right: 39,
-  down: 40,
-  delete: 46,
+    end: 35,
+    home: 36,
+    left: 37,
+    up: 38,
+    right: 39,
+    down: 40,
+    delete: 46,
 };
 // Add or substract depending on key pressed
 let direction = {
-  37: -1,
-  38: -1,
-  39: 1,
-  40: 1,
+    37: -1,
+    38: -1,
+    39: 1,
+    40: 1,
 };
 let checkTimeout;
 let focusTimeout;
 let scrollTimeout;
-const HyTabs = /*@__PURE__*/ proxyCustomElement(class HyTabs extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.tabId = undefined;
-    this.tabListLabel = "";
-    this.focusTimeoutCleared = true;
-    this.tabButtonTitles = undefined;
-    this.tabPanelsState = undefined;
-    this.tabButtons = undefined;
-    this.tabList = undefined;
-    this.headerstyle = "common";
-  }
-  componentWillLoad() {
-    const tabItems = this.el.querySelectorAll("hy-tabs-item");
-    if (tabItems) {
-      this.tabButtonTitles = Array.from(tabItems).map((panel) => {
-        return {
-          title: panel.getAttribute("tab-title"),
-          id: panel.getAttribute("tab-title").toLowerCase().replace(/\W/g, "-"),
-        };
-      });
+const HyTabs = /*@__PURE__*/ proxyCustomElement(class HyTabs extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.tabId = undefined;
+        this.tabListLabel = "";
+        this.focusTimeoutCleared = true;
+        this.tabButtonTitles = undefined;
+        this.tabPanelsState = undefined;
+        this.tabButtons = undefined;
+        this.tabList = undefined;
+        this.headerstyle = "common";
     }
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
-    }
-    const tabContainer = this.el.querySelector(".hy-tabs__container");
-    if (tabContainer) {
-      this.generateArrays(tabContainer);
-      const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
-      const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
-      const tabList = this.tabList;
-      this.checkScrollHidden(tabList, leftButton, rightButton);
-      tabList.addEventListener("scroll", () => {
-        scrollTimeout = setTimeout(() => {
-          window.clearTimeout(scrollTimeout);
-          this.checkScrollHidden(tabList, leftButton, rightButton);
-        }, 250);
-      }, false);
-      if (tabList.offSetWidth <= document.body.scrollWidth) {
-        leftButton.classList.add("is-hidden");
-        rightButton.classList.add("is-hidden");
-      }
-      const oneTabWidth = 250;
-      rightButton.addEventListener("click", (e) => {
-        e.preventDefault();
-        rightButton.classList.add("is-disabled");
-        tabList.scrollBy({
-          top: 0,
-          left: +oneTabWidth,
-          behavior: "smooth",
-        });
-        checkTimeout = window.setTimeout(() => {
-          window.clearTimeout(checkTimeout);
-          this.checkScrollHidden(tabList, leftButton, rightButton);
-          rightButton.classList.remove("is-disabled");
-        }, 250);
-      });
-      leftButton.addEventListener("click", (e) => {
-        e.preventDefault();
-        leftButton.classList.add("is-disabled");
-        tabList.scrollBy({
-          top: 0,
-          left: -oneTabWidth,
-          behavior: "smooth",
-        });
-        checkTimeout = window.setTimeout(() => {
-          window.clearTimeout(checkTimeout);
-          this.checkScrollHidden(tabList, leftButton, rightButton);
-          leftButton.classList.remove("is-disabled");
-        }, 250);
-      });
+    componentWillLoad() {
+        const tabItems = this.el.querySelectorAll("hy-tabs-item");
+        if (tabItems) {
+            this.tabButtonTitles = Array.from(tabItems).map((panel) => {
+                return {
+                    title: panel.getAttribute("tab-title"),
+                    id: panel.getAttribute("tab-title").toLowerCase().replace(/\W/g, "-"),
+                };
+            });
+        }
     }
-  }
-  generateArrays(tc) {
-    this.tabList = tc.querySelectorAll('[role="tablist"]')[0];
-    this.tabButtons = tc.querySelectorAll('[role="tab"]');
-    this.tabPanelsState = [tc.querySelectorAll('[role="tabpanel"]')];
-    if (this.tabButtons.length > 0) {
-      this.addListeners(this.tabButtons, 1);
-      this.activateTab(this.tabButtons[0], true);
+    componentDidLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
+        }
+        const tabContainer = this.el.querySelector(".hy-tabs__container");
+        if (tabContainer) {
+            this.generateArrays(tabContainer);
+            const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
+            const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
+            const tabList = this.tabList;
+            this.checkScrollHidden(tabList, leftButton, rightButton);
+            tabList.addEventListener("scroll", () => {
+                scrollTimeout = setTimeout(() => {
+                    window.clearTimeout(scrollTimeout);
+                    this.checkScrollHidden(tabList, leftButton, rightButton);
+                }, 250);
+            }, false);
+            if (tabList.offSetWidth <= document.body.scrollWidth) {
+                leftButton.classList.add("is-hidden");
+                rightButton.classList.add("is-hidden");
+            }
+            const oneTabWidth = 250;
+            rightButton.addEventListener("click", (e) => {
+                e.preventDefault();
+                rightButton.classList.add("is-disabled");
+                tabList.scrollBy({
+                    top: 0,
+                    left: +oneTabWidth,
+                    behavior: "smooth",
+                });
+                checkTimeout = window.setTimeout(() => {
+                    window.clearTimeout(checkTimeout);
+                    this.checkScrollHidden(tabList, leftButton, rightButton);
+                    rightButton.classList.remove("is-disabled");
+                }, 250);
+            });
+            leftButton.addEventListener("click", (e) => {
+                e.preventDefault();
+                leftButton.classList.add("is-disabled");
+                tabList.scrollBy({
+                    top: 0,
+                    left: -oneTabWidth,
+                    behavior: "smooth",
+                });
+                checkTimeout = window.setTimeout(() => {
+                    window.clearTimeout(checkTimeout);
+                    this.checkScrollHidden(tabList, leftButton, rightButton);
+                    leftButton.classList.remove("is-disabled");
+                }, 250);
+            });
+        }
     }
-  }
-  addListeners(tabs, index) {
-    if (tabs.length > 1) {
-      for (let i = 0; i < tabs.length; ++i) {
-        tabs[index].addEventListener("click", this.clickEventListener);
-        tabs[index].addEventListener("keydown", this.keydownEventListener);
-        //tabs[index].addEventListener('keyup', this.keyupEventListener);
-        tabs[index].index = index;
-      }
+    generateArrays(tc) {
+        this.tabList = tc.querySelectorAll('[role="tablist"]')[0];
+        this.tabButtons = tc.querySelectorAll('[role="tab"]');
+        this.tabPanelsState = [tc.querySelectorAll('[role="tabpanel"]')];
+        if (this.tabButtons.length > 0) {
+            this.addListeners(this.tabButtons, 1);
+            this.activateTab(this.tabButtons[0], true);
+        }
     }
-  }
-  checkScrollHidden(tablist, leftButton, rightButton) {
-    if (tablist.scrollLeft === 0) {
-      leftButton.classList.add("is-hidden");
+    addListeners(tabs, index) {
+        if (tabs.length > 1) {
+            for (let i = 0; i < tabs.length; ++i) {
+                tabs[index].addEventListener("click", this.clickEventListener);
+                tabs[index].addEventListener("keydown", this.keydownEventListener);
+                //tabs[index].addEventListener('keyup', this.keyupEventListener);
+                tabs[index].index = index;
+            }
+        }
     }
-    else {
-      leftButton.classList.remove("is-hidden");
+    checkScrollHidden(tablist, leftButton, rightButton) {
+        if (tablist.scrollLeft === 0) {
+            leftButton.classList.add("is-hidden");
+        }
+        else {
+            leftButton.classList.remove("is-hidden");
+        }
+        if (tablist.scrollLeft + tablist.clientWidth >= tablist.scrollWidth - 1) {
+            rightButton.classList.add("is-hidden");
+        }
+        else {
+            rightButton.classList.remove("is-hidden");
+        }
     }
-    if (tablist.scrollLeft + tablist.clientWidth >= tablist.scrollWidth - 1) {
-      rightButton.classList.add("is-hidden");
+    // When a tab is clicked, activateTab is fired to activate it
+    clickEventListener(event) {
+        if (event) {
+            const target = event.target;
+            const tabs = this.tabButtonTitles;
+            if (tabs) {
+                tabs.forEach((tab) => {
+                    const id = Object.values(tab)[1];
+                    if (id === target.id) {
+                        this.activateTab(target, true);
+                    }
+                });
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+            }
+        }
     }
-    else {
-      rightButton.classList.remove("is-hidden");
+    keydownEventListener(event) {
+        const key = event.keyCode;
+        const tabs = this.tabButtonTitles;
+        switch (key) {
+            case keys.end:
+                event.preventDefault();
+                // Activate last tab
+                this.activateTab(tabs[tabs.length - 1], true);
+                break;
+            case keys.home:
+                event.preventDefault();
+                // Activate first tab
+                this.activateTab(tabs[0], true);
+                break;
+            // Up and down are in keydown
+            // because we need to prevent page scroll >:)
+            case keys.up:
+            case keys.down:
+                if (this.focusTimeoutCleared) {
+                    this.determineOrientation(event);
+                }
+                break;
+        }
     }
-  }
-  // When a tab is clicked, activateTab is fired to activate it
-  clickEventListener(event) {
-    if (event) {
-      const target = event.target;
-      const tabs = this.tabButtonTitles;
-      if (tabs) {
-        tabs.forEach((tab) => {
-          const id = Object.values(tab)[1];
-          if (id === target.id) {
-            this.activateTab(target, true);
-          }
-        });
+    keyupEventListener(event) {
+        const key = event.keyCode;
+        switch (key) {
+            case keys.left:
+            case keys.right:
+                if (event.target.role === "tab") {
+                    event.preventDefault();
+                    if (this.focusTimeoutCleared) {
+                        this.determineOrientation(event);
+                    }
+                }
+                break;
+        }
         event.stopPropagation();
         event.stopImmediatePropagation();
-      }
     }
-  }
-  keydownEventListener(event) {
-    const key = event.keyCode;
-    const tabs = this.tabButtonTitles;
-    switch (key) {
-      case keys.end:
-        event.preventDefault();
-        // Activate last tab
-        this.activateTab(tabs[tabs.length - 1], true);
-        break;
-      case keys.home:
-        event.preventDefault();
-        // Activate first tab
-        this.activateTab(tabs[0], true);
-        break;
-      // Up and down are in keydown
-      // because we need to prevent page scroll >:)
-      case keys.up:
-      case keys.down:
-        if (this.focusTimeoutCleared) {
-          this.determineOrientation(event);
+    determineOrientation(event) {
+        const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
+        const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
+        const tabList = this.tabList;
+        this.checkScrollHidden(tabList, leftButton, rightButton);
+        const key = event.keyCode;
+        const vertical = tabList.getAttribute("aria-orientation") == "vertical";
+        let proceed = false;
+        if (vertical) {
+            if (key === keys.up || key === keys.down) {
+                event.preventDefault();
+                proceed = true;
+            }
         }
-        break;
-    }
-  }
-  keyupEventListener(event) {
-    const key = event.keyCode;
-    switch (key) {
-      case keys.left:
-      case keys.right:
-        if (event.target.role === "tab") {
-          event.preventDefault();
-          if (this.focusTimeoutCleared) {
-            this.determineOrientation(event);
-          }
+        else {
+            if (key === keys.left || key === keys.right) {
+                proceed = true;
+            }
+        }
+        if (proceed) {
+            this.switchTabOnArrowPress(event);
         }
-        break;
-    }
-    event.stopPropagation();
-    event.stopImmediatePropagation();
-  }
-  determineOrientation(event) {
-    const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
-    const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
-    const tabList = this.tabList;
-    this.checkScrollHidden(tabList, leftButton, rightButton);
-    const key = event.keyCode;
-    const vertical = tabList.getAttribute("aria-orientation") == "vertical";
-    let proceed = false;
-    if (vertical) {
-      if (key === keys.up || key === keys.down) {
-        event.preventDefault();
-        proceed = true;
-      }
-    }
-    else {
-      if (key === keys.left || key === keys.right) {
-        proceed = true;
-      }
-    }
-    if (proceed) {
-      this.switchTabOnArrowPress(event);
     }
-  }
-  switchTabOnArrowPress(event) {
-    const pressed = event.keyCode;
-    if (direction[pressed]) {
-      const target = event.target;
-      const tabs = this.tabButtons;
-      for (let i = 0; i < tabs.length; i++) {
-        if (tabs[i].id === target.id) {
-          if (i > 0) {
-            if (direction[pressed] === -1) {
-              tabs[i - 1].focus();
-              this.focusEventHandler(tabs[i - 1]);
-              break;
-            }
-          }
-          if (i < tabs.length - 1) {
-            if (direction[pressed] === 1) {
-              tabs[i + 1].focus();
-              this.focusEventHandler(tabs[i + 1]);
-              break;
+    switchTabOnArrowPress(event) {
+        const pressed = event.keyCode;
+        if (direction[pressed]) {
+            const target = event.target;
+            const tabs = this.tabButtons;
+            for (let i = 0; i < tabs.length; i++) {
+                if (tabs[i].id === target.id) {
+                    if (i > 0) {
+                        if (direction[pressed] === -1) {
+                            tabs[i - 1].focus();
+                            this.focusEventHandler(tabs[i - 1]);
+                            break;
+                        }
+                    }
+                    if (i < tabs.length - 1) {
+                        if (direction[pressed] === 1) {
+                            tabs[i + 1].focus();
+                            this.focusEventHandler(tabs[i + 1]);
+                            break;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
-  // Activates any given tab panel
-  activateTab(tab, setFocus) {
-    setFocus = setFocus || true;
-    // Deactivate all other tabs
-    this.deactivateTabs(this.tabButtons);
-    // Remove tabindex attribute
-    tab.removeAttribute("tabindex");
-    tab.setAttribute("aria-selected", "true");
-    const controls = tab.getAttribute("aria-controls");
-    this.el.querySelector(`#${controls}`).removeAttribute("hidden");
-    if (setFocus) {
-      tab.focus();
+    // Activates any given tab panel
+    activateTab(tab, setFocus) {
+        setFocus = setFocus || true;
+        // Deactivate all other tabs
+        this.deactivateTabs(this.tabButtons);
+        // Remove tabindex attribute
+        tab.removeAttribute("tabindex");
+        tab.setAttribute("aria-selected", "true");
+        const controls = tab.getAttribute("aria-controls");
+        this.el.querySelector(`#${controls}`).removeAttribute("hidden");
+        if (setFocus) {
+            tab.focus();
+        }
     }
-  }
-  // Deactivate all tabs and tab panels
-  deactivateTabs(tabs) {
-    for (let t = 0; t < tabs.length; t++) {
-      tabs[t].setAttribute("tabindex", "-1");
-      tabs[t].setAttribute("aria-selected", "false");
-      tabs[t].removeEventListener("focus", this.focusEventHandler);
+    // Deactivate all tabs and tab panels
+    deactivateTabs(tabs) {
+        for (let t = 0; t < tabs.length; t++) {
+            tabs[t].setAttribute("tabindex", "-1");
+            tabs[t].setAttribute("aria-selected", "false");
+            tabs[t].removeEventListener("focus", this.focusEventHandler);
+        }
+        const panels = this.tabPanelsState[0];
+        for (let p = 0; p < panels.length; p++) {
+            panels[p].setAttribute("hidden", "hidden");
+        }
     }
-    const panels = this.tabPanelsState[0];
-    for (let p = 0; p < panels.length; p++) {
-      panels[p].setAttribute("hidden", "hidden");
+    focusEventHandler(tab) {
+        const target = tab;
+        this.focusTimeoutCleared = false;
+        focusTimeout = window.setTimeout(() => {
+            window.clearTimeout(focusTimeout);
+            this.focusTimeoutCleared = true;
+            const focused = document.activeElement;
+            if (target === focused) {
+                this.activateTab(target, false);
+            }
+        }, 250);
     }
-  }
-  focusEventHandler(tab) {
-    const target = tab;
-    this.focusTimeoutCleared = false;
-    focusTimeout = window.setTimeout(() => {
-      window.clearTimeout(focusTimeout);
-      this.focusTimeoutCleared = true;
-      const focused = document.activeElement;
-      if (target === focused) {
-        this.activateTab(target, false);
-      }
-    }, 250);
-  }
-  render() {
-    const classComponentAttributes = ["hy-tabs__container", `hy-tabs__container__${this.headerstyle}`].join(" ");
-    const id = this.tabId.toLowerCase().replace(/\W/g, "-");
-    if (window.location.hash) {
-      const tabHash = window.location.hash.substring(1);
-      const isUrlHashed = this.tabButtonTitles.some((tab) => tab["id"] === tabHash);
-      if (isUrlHashed) {
-        const hashElement = document.getElementById(tabHash);
-        if (hashElement) {
-          this.activateTab(hashElement, true);
-          const hashElementRect = hashElement.getBoundingClientRect();
-          window.scrollTo({ top: window.scrollY + hashElementRect.top - 200, behavior: "smooth" });
+    render() {
+        const classComponentAttributes = ["hy-tabs__container", `hy-tabs__container__${this.headerstyle}`].join(" ");
+        const id = this.tabId.toLowerCase().replace(/\W/g, "-");
+        if (window.location.hash) {
+            const tabHash = window.location.hash.substring(1);
+            const isUrlHashed = this.tabButtonTitles.some((tab) => tab["id"] === tabHash);
+            if (isUrlHashed) {
+                const hashElement = document.getElementById(tabHash);
+                if (hashElement) {
+                    this.activateTab(hashElement, true);
+                    const hashElementRect = hashElement.getBoundingClientRect();
+                    window.scrollTo({ top: window.scrollY + hashElementRect.top - 200, behavior: "smooth" });
+                }
+            }
         }
-      }
+        return [
+            h("hy-box", { key: '683a5479d2a708bb3d0cdaf68a54aa9bd801bb8a', pt: "1.25, 1.25, 1.5, 2.5" }),
+            h("div", { key: '41d787351d1ed5c07911584ed1a6f8dfd371ee64', id: id, class: classComponentAttributes }, h("div", { key: '451e17551576064418127d5bf9f837a5a8754c52', class: "hy-tablist-container" }, h("button", { key: 'c7e7f80d87ac1d9a67745d52788444adc89daa4e', tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__left is-hidden", "aria-hidden": "true" }, h("span", { key: 'aad02a75f2158552f9144f166779f78faf650242' }, h("hy-icon", { key: '47edc4178e962779da31830f6112e9e33e41b121', icon: "hy-icon-caret-left", size: 16 }))), h("div", { key: '13eef5d285c5676ee8f30306d6e86c369971c051', role: "tablist", "aria-label": this.tabListLabel }, this.tabButtonTitles &&
+                this.tabButtonTitles.map((item) => {
+                    const title = Object.values(item)[0];
+                    const id = title.toLowerCase().replace(/\W/g, "-");
+                    const titleAsId = title.toLowerCase().replace(/\W/g, "-");
+                    const tabItemHref = "#" + titleAsId;
+                    return (h("a", { href: tabItemHref, tabindex: "-1" }, h("button", { "aria-selected": "false", "aria-controls": `${id}-tab`, class: this.headerstyle, role: "tab", id: id }, h("span", null, title))));
+                })), h("button", { key: '44a95a82583d97ffa5b39630b2a49cb50aa1cea0', tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__right", "aria-hidden": "true" }, h("span", { key: 'd1f51ef899ea7471e3bfd4d5ae7358375012bc56' }, h("hy-icon", { key: '4942edbc2baba197b2dc5b0752052ebd4ede474d', icon: "hy-icon-caret-right", size: 16 })))), h("slot", { key: '90eb5de9ef6acda255b97db747f92b2d08f7702c' })),
+            h("hy-box", { key: '6e6aeac055c32cd5ef1e582f849ee1426424463d', mb: "1.75, 1.75, 2, 2.5" }),
+        ];
     }
-    return [
-      h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }),
-      h("div", { id: id, class: classComponentAttributes }, h("div", { class: "hy-tablist-container" }, h("button", { tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__left is-hidden", "aria-hidden": "true" }, h("span", null, h("hy-icon", { icon: "hy-icon-caret-left", size: 16 }))), h("div", { role: "tablist", "aria-label": this.tabListLabel }, this.tabButtonTitles &&
-        this.tabButtonTitles.map((item) => {
-          const title = Object.values(item)[0];
-          const id = title.toLowerCase().replace(/\W/g, "-");
-          const titleAsId = title.toLowerCase().replace(/\W/g, "-");
-          const tabItemHref = "#" + titleAsId;
-          return (h("a", { href: tabItemHref, tabindex: "-1" }, h("button", { "aria-selected": "false", "aria-controls": `${id}-tab`, class: this.headerstyle, role: "tab", id: id }, h("span", null, title))));
-        })), h("button", { tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__right", "aria-hidden": "true" }, h("span", null, h("hy-icon", { icon: "hy-icon-caret-right", size: 16 })))), h("slot", null)),
-      h("hy-box", { mb: "1.75, 1.75, 2, 2.5" }),
-    ];
-  }
-  get el() { return this; }
-  static get style() { return hyTabsCss; }
+    get el() { return this; }
+    static get style() { return HyTabsStyle0; }
 }, [4, "hy-tabs", {
-    "tabId": [1, "tab-id"],
-    "tabListLabel": [1, "tab-list-label"],
-    "headerstyle": [1],
-    "focusTimeoutCleared": [32],
-    "tabButtonTitles": [32],
-    "tabPanelsState": [32],
-    "tabButtons": [32],
-    "tabList": [32]
-  }, [[0, "click", "clickEventListener"], [0, "keydown", "keydownEventListener"], [0, "keydown", "keyupEventListener"], [0, "focus", "focusEventHandler"]]]);
+        "tabId": [1, "tab-id"],
+        "tabListLabel": [1, "tab-list-label"],
+        "headerstyle": [1],
+        "focusTimeoutCleared": [32],
+        "tabButtonTitles": [32],
+        "tabPanelsState": [32],
+        "tabButtons": [32],
+        "tabList": [32]
+    }, [[0, "click", "clickEventListener"], [0, "keydown", "keydownEventListener"], [0, "keydown", "keyupEventListener"], [0, "focus", "focusEventHandler"]]]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["hy-tabs", "hy-box", "hy-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "hy-tabs":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HyTabs);
-      }
-      break;
-    case "hy-box":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "hy-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["hy-tabs", "hy-box", "hy-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "hy-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, HyTabs);
+            }
+            break;
+        case "hy-box":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "hy-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 
 export { HyTabs as H, defineCustomElement as d };
-
-//# sourceMappingURL=hy-tabs2.js.map