@duetds/components 8.0.6 → 8.1.1

package/lib/cjs/duet-scrollable_3.cjs.entry.js

@@ -5,432 +5,432 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2cce7b13.js');
-const themeableComponent = require('./themeable-component-0be6d1f4.js');
-const languageUtils = require('./language-utils-dc19e8b6.js');
-const createId = require('./create-id-167cd350.js');
-const keyboardUtils = require('./keyboard-utils-02441bc5.js');
-require('./string-utils-51a2f59f.js');
+const index = require('./index-2dc54a15.js');
+const themeableComponent = require('./themeable-component-83a2a0d4.js');
+const languageUtils = require('./language-utils-e8a527e5.js');
+const createId = require('./create-id-1f8c438f.js');
+const keyboardUtils = require('./keyboard-utils-7248dd0a.js');
+require('./string-utils-053749ff.js');
 
 const duetScrollableCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{display:flex}:host .duet-scrollable-items .duet-scrollable-button{position:relative;flex:0 0 auto;flex-basis:40px;padding:10px;cursor:pointer}:host .duet-scrollable-items .duet-scrollable-button:active{transform:scale(0.8)}:host .duet-scrollable-items .duet-scrollable-button--left{left:-12px}:host .duet-scrollable-items .duet-scrollable-button--right{right:-12px}:host .duet-scrollable-items .duet-scrollable-button--occluded{visibility:hidden}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;gap:20px;padding-top:2px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;}:host .duet-scrollable-items .duet-scrollable-list:not(.buttons){white-space:normal}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}:host .duet-scrollable-items .duet-scrollable-list.collapsed{flex-wrap:wrap}:host .duet-scrollable-items.center{justify-content:center}:host .duet-scrollable-items.center .duet-scrollable-list.collapsed{justify-content:center}.collapse{width:100%;text-align:center}.collapse.hide{visibility:hidden}::slotted(*){scroll-snap-align:center;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out}";
 
 const DuetScrollable = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Private variables and constants index
-     */
-    this.currentIndex = 0;
-    this.tabListElement = undefined;
-    this.tabListClass = "duet-scrollable-list";
-    this.hasCollapseButtonLabelSlot = false;
-    this.resizeObserver = new ResizeObserver(entries => {
-      var _a, _b, _c, _d;
-      // otherwise, something is wrong, expecting 1 element only
-      if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
-        const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
-        const scrollWidth = (_d = (_c = entries[0]) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.scrollWidth;
-        // in order to avoid state "jumping" on the boundary condition we add a few pixels to the comparison
-        this.isTabContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
-      }
-    });
-    this.collapsedOnClick = () => {
-      this.collapsed = !this.collapsed;
-    };
-    this.tablistAtStart = true;
-    this.isTabContentSmallerThanWrapper = false;
-    this.tablistAtEnd = false;
-    this.childrenData = {};
-    this.theme = "";
-    this.identifier = "";
-    this.collapsed = false;
-    this.buttons = true;
-    this.center = false;
-    this.selected = 0;
-  }
-  watchPropHandler(newValue) {
-    this.scrollToTab(newValue, "center");
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    themeableComponent.inheritGlobalTheme(this);
-    this.hasCollapseButtonLabelSlot = !!this.element.querySelector(":scope > [slot='collapse-button-label']");
-    const slotted = this.element.querySelectorAll(":scope > :not([slot='collapse-button-label'])");
-    this.childrenData = { hasChildren: slotted && slotted.length > 0, numberOfChildren: slotted && slotted.length };
-  }
-  componentDidLoad() {
-    this.resizeObserver.observe(this.tabListElement);
-  }
-  disconnectedCallback() {
-    this.resizeObserver.disconnect();
-  }
-  /**
-   * Private methods.
-   */
-  getLastVisibleElement() {
-    const clientWidth = this.tabListElement.clientWidth;
-    const xValues = Array.from(this.element.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
-    return xValues;
-  }
-  getFirstVisibleElement() {
-    const buttonCollection = this.element.querySelectorAll("button");
-    // reverse the array because we want the first invisible element form the middle, not the first in the list
-    const arrayOfXValues = Array.from(buttonCollection).map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
-    const xValues = arrayOfXValues.findIndex(element => {
-      return element > 0;
-    });
-    return xValues;
-  }
-  updateScrollButtons(container = this.tabListElement) {
-    if (!this.buttons) {
-      return;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Private variables and constants index
+         */
+        this.currentIndex = 0;
+        this.tabListElement = undefined;
+        this.tabListClass = "duet-scrollable-list";
+        this.hasCollapseButtonLabelSlot = false;
+        this.resizeObserver = new ResizeObserver(entries => {
+            var _a, _b, _c, _d;
+            // otherwise, something is wrong, expecting 1 element only
+            if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
+                const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+                const scrollWidth = (_d = (_c = entries[0]) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.scrollWidth;
+                // in order to avoid state "jumping" on the boundary condition we add a few pixels to the comparison
+                this.isTabContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
+            }
+        });
+        this.collapsedOnClick = () => {
+            this.collapsed = !this.collapsed;
+        };
+        this.tablistAtStart = true;
+        this.isTabContentSmallerThanWrapper = false;
+        this.tablistAtEnd = false;
+        this.childrenData = {};
+        this.theme = "";
+        this.identifier = "";
+        this.collapsed = false;
+        this.buttons = true;
+        this.center = false;
+        this.selected = 0;
     }
-    if (container.scrollLeft <= 0) {
-      this.tablistAtStart = true;
+    watchPropHandler(newValue) {
+        this.scrollToTab(newValue, "center");
     }
-    else if (container.scrollLeft > 0) {
-      this.tablistAtStart = false;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        themeableComponent.inheritGlobalTheme(this);
+        this.hasCollapseButtonLabelSlot = !!this.element.querySelector(":scope > [slot='collapse-button-label']");
+        const slotted = this.element.querySelectorAll(":scope > :not([slot='collapse-button-label'])");
+        this.childrenData = { hasChildren: slotted && slotted.length > 0, numberOfChildren: slotted && slotted.length };
     }
-    if (container.clientWidth + container.scrollLeft + 10 >= container.scrollWidth) {
-      this.tablistAtEnd = true;
+    componentDidLoad() {
+        this.resizeObserver.observe(this.tabListElement);
     }
-    else if (container.clientWidth + container.scrollLeft + 10 < container.scrollWidth) {
-      this.tablistAtEnd = false;
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
     }
-  }
-  scrollToTab(index = this.currentIndex, inline) {
-    if (!this.childrenData.hasChildren) {
-      return;
+    /**
+     * Private methods.
+     */
+    getLastVisibleElement() {
+        const clientWidth = this.tabListElement.clientWidth;
+        const xValues = Array.from(this.element.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
+        return xValues;
     }
-    if (index + 1 >= this.childrenData.numberOfChildren) {
-      index = this.childrenData.numberOfChildren - 1;
+    getFirstVisibleElement() {
+        const buttonCollection = this.element.querySelectorAll("button");
+        // reverse the array because we want the first invisible element form the middle, not the first in the list
+        const arrayOfXValues = Array.from(buttonCollection).map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
+        const xValues = arrayOfXValues.findIndex(element => {
+            return element > 0;
+        });
+        return xValues;
     }
-    if (index < 0) {
-      index = 0;
+    updateScrollButtons(container = this.tabListElement) {
+        if (!this.buttons) {
+            return;
+        }
+        if (container.scrollLeft <= 0) {
+            this.tablistAtStart = true;
+        }
+        else if (container.scrollLeft > 0) {
+            this.tablistAtStart = false;
+        }
+        if (container.clientWidth + container.scrollLeft + 10 >= container.scrollWidth) {
+            this.tablistAtEnd = true;
+        }
+        else if (container.clientWidth + container.scrollLeft + 10 < container.scrollWidth) {
+            this.tablistAtEnd = false;
+        }
     }
-    const buttons = this.element.querySelectorAll("button");
-    // store previous position
-    let prevPosition = buttons[0].getBoundingClientRect().x;
-    // iterations to run
-    let ticksWhereScrollDidNotHappen = 5;
-    const getAnimationFrame = () => {
-      // if we get the same value enter the logic loop
-      if (buttons[0].getBoundingClientRect().x === prevPosition) {
-        ticksWhereScrollDidNotHappen--;
-        // When iteration is not complete run the calculation again
-        if (ticksWhereScrollDidNotHappen !== 0) {
-          window.requestAnimationFrame(getAnimationFrame);
-          return;
+    scrollToTab(index = this.currentIndex, inline) {
+        if (!this.childrenData.hasChildren) {
+            return;
+        }
+        if (index + 1 >= this.childrenData.numberOfChildren) {
+            index = this.childrenData.numberOfChildren - 1;
         }
-        this.updateScrollButtons();
-      }
-      else {
+        if (index < 0) {
+            index = 0;
+        }
+        const buttons = this.element.querySelectorAll("button");
+        // store previous position
+        let prevPosition = buttons[0].getBoundingClientRect().x;
+        // iterations to run
+        let ticksWhereScrollDidNotHappen = 5;
+        const getAnimationFrame = () => {
+            // if we get the same value enter the logic loop
+            if (buttons[0].getBoundingClientRect().x === prevPosition) {
+                ticksWhereScrollDidNotHappen--;
+                // When iteration is not complete run the calculation again
+                if (ticksWhereScrollDidNotHappen !== 0) {
+                    window.requestAnimationFrame(getAnimationFrame);
+                    return;
+                }
+                this.updateScrollButtons();
+            }
+            else {
+                window.requestAnimationFrame(getAnimationFrame);
+                prevPosition = buttons[0].getBoundingClientRect().x;
+            }
+        };
+        buttons[index].scrollIntoView({ behavior: "smooth", inline });
         window.requestAnimationFrame(getAnimationFrame);
-        prevPosition = buttons[0].getBoundingClientRect().x;
-      }
-    };
-    buttons[index].scrollIntoView({ behavior: "smooth", inline });
-    window.requestAnimationFrame(getAnimationFrame);
-  }
-  scrollLeft() {
-    this.tablistAtEnd = false;
-    const first = this.getFirstVisibleElement() - 1;
-    this.scrollToTab(first, "center");
-  }
-  scrollRight() {
-    this.tablistAtStart = false;
-    const last = this.getLastVisibleElement() + 1;
-    this.scrollToTab(last, "center");
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (index.h(index.Host, { class: {
-        "duet-theme-turva": this.theme === "turva",
-        "duet-theme-default": this.theme === "default",
-      } }, this.hasCollapseButtonLabelSlot && (index.h("div", { class: {
-        collapse: true,
-        hide: !this.isTabContentSmallerThanWrapper && !this.collapsed,
-      } }, index.h("duet-button", { variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, index.h("slot", { name: "collapse-button-label" })))), index.h("div", { class: {
-        "duet-scrollable-items": true,
-        buttons: this.buttons,
-        center: this.center,
-      } }, index.h("button", { part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
-        "duet-scrollable-button": true,
-        "duet-scrollable-button--left": true,
-        "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
-      }, onClick: () => this.scrollLeft(), disabled: this.tablistAtStart, tabindex: "-1", hidden: !this.buttons }, index.h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), index.h("div", { class: {
-        [this.tabListClass]: true,
-        collapsed: this.collapsed,
-      }, onScroll: () => this.updateScrollButtons(), ref: element => (this.tabListElement = element) }, index.h("slot", null)), index.h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
-        "duet-scrollable-button": true,
-        "duet-scrollable-button--right": true,
-        "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
-      }, onClick: () => this.scrollRight(), disabled: this.tablistAtEnd, tabindex: "-1", hidden: !this.buttons }, index.h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "selected": ["watchPropHandler"]
-  }; }
+    }
+    scrollLeft() {
+        this.tablistAtEnd = false;
+        const first = this.getFirstVisibleElement() - 1;
+        this.scrollToTab(first, "center");
+    }
+    scrollRight() {
+        this.tablistAtStart = false;
+        const last = this.getLastVisibleElement() + 1;
+        this.scrollToTab(last, "center");
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        return (index.h(index.Host, { class: {
+                "duet-theme-turva": this.theme === "turva",
+                "duet-theme-default": this.theme === "default",
+            } }, this.hasCollapseButtonLabelSlot && (index.h("div", { class: {
+                collapse: true,
+                hide: !this.isTabContentSmallerThanWrapper && !this.collapsed,
+            } }, index.h("duet-button", { variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, index.h("slot", { name: "collapse-button-label" })))), index.h("div", { class: {
+                "duet-scrollable-items": true,
+                buttons: this.buttons,
+                center: this.center,
+            } }, index.h("button", { part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
+                "duet-scrollable-button": true,
+                "duet-scrollable-button--left": true,
+                "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
+            }, onClick: () => this.scrollLeft(), disabled: this.tablistAtStart, tabindex: "-1", hidden: !this.buttons }, index.h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), index.h("div", { class: {
+                [this.tabListClass]: true,
+                collapsed: this.collapsed,
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.tabListElement = element) }, index.h("slot", null)), index.h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
+                "duet-scrollable-button": true,
+                "duet-scrollable-button--right": true,
+                "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
+            }, onClick: () => this.scrollRight(), disabled: this.tablistAtEnd, tabindex: "-1", hidden: !this.buttons }, index.h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
+    }
+    get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "selected": ["watchPropHandler"]
+    }; }
 };
 DuetScrollable.style = duetScrollableCss;
 
 const duetTabCss = ".sc-duet-tab-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-tab.sc-duet-tab{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:none;width:100%}.duet-tab.selected.sc-duet-tab{display:block}";
 
 const DuetTab = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.label = undefined;
-    this.caption = undefined;
-    this.selected = undefined;
-    this.accessibleDescriptionDefault = null;
-    this.accessibleDescription = this
-      .accessibleDescriptionDefault
-      ? languageUtils.getLocaleString(this.accessibleDescriptionDefault)
-      : null;
-    this.accessibleLabelledBy = undefined;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  connectedCallback() {
-    languageUtils.connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
-  }
-  disconnectedCallback() {
-    languageUtils.disconnectLanguageChangeObserver(this);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    {
-      return (index.h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy }, index.h("slot", null)));
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.label = undefined;
+        this.caption = undefined;
+        this.selected = undefined;
+        this.accessibleDescriptionDefault = null;
+        this.accessibleDescription = this
+            .accessibleDescriptionDefault
+            ? languageUtils.getLocaleString(this.accessibleDescriptionDefault)
+            : null;
+        this.accessibleLabelledBy = undefined;
+    }
+    /**
+     * Component lifecycle events.
+     */
+    connectedCallback() {
+        languageUtils.connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
+    }
+    disconnectedCallback() {
+        languageUtils.disconnectLanguageChangeObserver(this);
     }
-  }
-  get element() { return index.getElement(this); }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        return (index.h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy }, index.h("slot", null)));
+    }
+    get element() { return index.getElement(this); }
 };
 DuetTab.style = duetTabCss;
 
 const duetTabGroupCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;display:block;width:100%}.duet-tab-group-tabs{margin-bottom:28px !important;display:block;width:100%;max-width:100%;padding-top:2px;list-style:none}.duet-tab-group-tabs.duet-m-0{margin:0 !important}.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden{display:none}@media (min-width: 36em){.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden{display:block}}.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom:1px solid rgb(225, 227, 230)}.duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom-color:rgb(228, 228, 230)}.duet-tab-variation-checked .duet-tab-group-tabs{display:flex;gap:4px;padding-right:12px;padding-left:12px;overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;}.duet-tab-variation-checked .duet-tab-group-tabs::-webkit-scrollbar{display:none}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-group-tabs{gap:8px;padding-right:16px;padding-left:16px;overflow:visible}}.duet-tab-plain-scrolling .duet-tab-group-tabs{display:flex;overflow-x:scroll;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;}.duet-tab-plain-scrolling .duet-tab-group-tabs::-webkit-scrollbar{display:none}@media (min-width: 36em){.duet-tab-plain-scrolling .duet-tab-group-tabs{display:block;overflow:auto}}@media (min-width: 36em){duet-select{display:none !important}}.duet-tab-button{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:20px;margin-top:-2px;overflow:visible;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.1;color:rgb(0, 41, 77);text-align:left;text-decoration:none;cursor:pointer;background:rgb(255, 255, 255);border:2px solid rgb(225, 227, 230);border-radius:0;transition:150ms ease}.duet-tab-button.duet-p-0{padding:0 !important}.duet-tab-button.duet-m-0{margin:0 !important}.duet-theme-turva .duet-tab-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);border-color:rgb(228, 228, 230)}.duet-tab-button.duet-p-0{padding:0 !important}@media (min-width: 36em){.duet-tab-button{display:inline-block;width:auto;margin-left:-2px;border-right:2px solid rgb(225, 227, 230);border-radius:0}}.duet-tab-button:hover{z-index:200;border-color:rgb(144, 149, 153)}.duet-theme-turva .duet-tab-button:hover{border-color:rgb(116, 116, 117)}.duet-tab-button:active{opacity:0.75;transition:none}.duet-tab-button.selected{z-index:201;color:rgb(255, 255, 255);background:rgb(0, 41, 77);border-color:rgb(0, 41, 77);outline:0;box-shadow:none !important}.duet-theme-turva .duet-tab-button.selected{color:rgb(255, 255, 255);background-color:rgb(23, 28, 58);border-color:rgb(23, 28, 58)}.duet-tab-button:focus{z-index:200;outline:0}:host(.user-is-tabbing) .duet-tab-button:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}:host(.user-is-tabbing) .duet-theme-turva .duet-tab-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-button:first-child{border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.duet-tab-button:first-child{border-top-right-radius:0;border-bottom-left-radius:4px}}.duet-tab-button:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-tab-button:last-child{border-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}}.duet-tab-variation-plain .duet-tab-button{display:inline-block;width:auto;padding-right:0;padding-left:0;margin-left:0;border:0;border-radius:0;transition:none}.duet-tab-variation-plain .duet-tab-button+.duet-tab-button{margin-left:36px}.duet-tab-variation-plain .duet-tab-button.selected{color:rgb(0, 119, 179);background:rgb(255, 255, 255);border-bottom:3px solid rgb(0, 119, 179)}.duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected{color:rgb(198, 12, 48);border-bottom-color:rgb(198, 12, 48)}.duet-tab-variation-checked .duet-tab-button{position:relative;display:inline-block;flex-basis:0;flex-grow:1;width:200px;min-width:200px;padding:8px 4px;border-color:rgb(207, 210, 212);border-bottom-color:rgb(0, 119, 179);border-radius:4px 4px 0 0;transition:none}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button{border-color:rgb(207, 210, 212);border-bottom-color:rgb(68, 68, 69)}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button{min-width:0;padding:16px}}.duet-tab-variation-checked .duet-tab-button.stackable-tab{min-width:0}.duet-tab-variation-checked .duet-tab-button:first-child{margin-left:auto}.duet-tab-variation-checked .duet-tab-button:last-child{margin-right:auto}.duet-tab-variation-checked .duet-tab-button:active{opacity:1;transition:none}.duet-tab-variation-checked .duet-tab-button.selected{color:rgb(0, 119, 179);background:linear-gradient(180deg, rgb(243, 249, 252) 0%, rgb(255, 255, 255) 100%);border-color:rgb(0, 119, 179);border-bottom-color:#fff}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button.selected{color:rgb(23, 28, 58);background:linear-gradient(180deg, rgb(245, 245, 247) 0%, rgb(255, 255, 255) 100%);border-color:rgb(68, 68, 69);border-bottom-color:#fff}.duet-tab-variation-checked .duet-tab-button .checked-tab-content{display:flex;flex-direction:row;justify-content:space-between}.duet-tab-variation-checked .duet-tab-button .checked-tab-content.stackable-checked-tab-content{flex-direction:column;height:100%}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content.stackable-checked-tab-content{flex-direction:row}}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description{display:flex;flex-direction:column;overflow:hidden;overflow-wrap:break-word}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description.stackable-description{text-align:center}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description.stackable-description{text-align:left}}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption{margin-top:4px;font-size:0.875rem;font-weight:400;color:rgb(101, 119, 135)}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption{font-size:1rem;text-align:left}}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption{color:rgb(68, 68, 69)}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected{color:rgb(0, 119, 179)}.duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected{color:rgb(68, 68, 69)}.duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark{order:-1;margin-top:8px;margin-bottom:8px}@media (min-width: 36em){.duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark{order:1}}.duet-tab-group-content{position:relative;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(0, 41, 77);text-align:left}.duet-tab-group-content:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}.duet-theme-turva .duet-tab-group-content:focus,.duet-tab-group-content:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-group-content.checked-group-content{padding:28px 0 28px 0}.duet-tab-group-content.checked-group-content::after{position:absolute;top:-2px;left:0;width:100%;height:2px;content:\" \";background-color:rgb(0, 119, 179)}.duet-theme-turva .duet-tab-group-content{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-theme-turva .duet-tab-group-content.checked-group-content::after{background-color:rgb(68, 68, 69)}";
 
 const DuetTabGroup = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.duetChange = index.createEvent(this, "duetChange", 3);
-    this.duetTabChange = index.createEvent(this, "duetTabChange", 7);
-    this.duetTabChangeRequested = index.createEvent(this, "duetTabChangeRequested", 7);
-    this.id = createId.createID("DuetTabGroup");
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.duetChange = index.createEvent(this, "duetChange", 3);
+        this.duetTabChange = index.createEvent(this, "duetTabChange", 7);
+        this.duetTabChangeRequested = index.createEvent(this, "duetTabChangeRequested", 7);
+        this.id = createId.createID("DuetTabGroup");
+        /**
+         * Component event handling.
+         */
+        this.handleKeyDown = ev => {
+            let button;
+            if (keyboardUtils.isArrowLeftKey(ev) || keyboardUtils.isArrowUpKey(ev)) {
+                button = ev.target.previousElementSibling;
+            }
+            else if (keyboardUtils.isArrowRightKey(ev) || keyboardUtils.isArrowDownKey(ev)) {
+                button = ev.target.nextElementSibling;
+            }
+            if (button) {
+                ev.preventDefault();
+                button.click();
+                button.focus();
+            }
+        };
+        this.onTabSelect = (tabIndex) => {
+            if (this.tabChangeConfirm) {
+                if (tabIndex !== this.selected) {
+                    const event = {
+                        value: tabIndex,
+                        component: "duet-tab-group",
+                    };
+                    this.duetTabChangeRequested.emit(event);
+                }
+            }
+            else {
+                this.openTab(tabIndex);
+            }
+        };
+        this.scrollToActive = () => {
+            if (this.variation === "checked" || this.variation === "plain-scrolling") {
+                setTimeout(() => {
+                    const active = this.tabsContainer.querySelector(".selected");
+                    if (active) {
+                        active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+                    }
+                }, 50);
+            }
+        };
+        this.renderTab = () => {
+            const renderedTabs = this.tabs.map((element, index$1) => {
+                return (index.h("button", { role: "tab", id: this.getButtonId(index$1), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index$1), tabindex: index$1 === 0 ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
+                        "duet-p-0": this.padding === "none",
+                        "duet-tab-button": true,
+                        "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
+                        selected: element.selected,
+                    }, onClick: () => this.onTabSelect(index$1), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (index.h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, index.h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, index.h("p", null, element.label), index.h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), index.h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, index.h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label)));
+            });
+            if (this.scrolls) {
+                return (index.h("duet-scrollable", { selected: this.selected, identifier: this.identifier }, renderedTabs));
+            }
+            return renderedTabs;
+        };
+        this.tabs = [];
+        this.selected = undefined;
+        this.theme = "";
+        this.scrolls = false;
+        this.collapses = true;
+        this.accessibleLabel = undefined;
+        this.variation = "default";
+        this.language = languageUtils.getLanguage();
+        this.labelDefaults = {
+            fi: "Valitse",
+            en: "Choose",
+            sv: "Välj",
+        };
+        this.label = languageUtils.getLocaleString(this.labelDefaults, this.language);
+        this.labelHidden = true;
+        this.identifier = this.id;
+        this.margin = "auto";
+        this.padding = "auto";
+        this.setTabIndex = false;
+        this.tabChangeConfirm = false;
+    }
+    /**
+     * Component lifecycle events.
+     */
+    async connectedCallback() {
+        if (typeof MutationObserver !== "undefined") {
+            this.mutationO = new MutationObserver(() => {
+                this.updateTabs();
+            });
+            this.mutationO.observe(this.element, {
+                attributes: true,
+                attributeFilter: ["label"],
+                childList: true,
+                characterData: true,
+                subtree: true,
+            });
+        }
+        await this.updateTabs();
+        keyboardUtils.subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        if (this.mutationO) {
+            this.mutationO.disconnect();
+            this.mutationO = undefined;
+        }
+        keyboardUtils.unsubscribeTabbingChange(this);
+    }
+    componentWillLoad() {
+        themeableComponent.inheritGlobalTheme(this);
+    }
+    componentDidLoad() {
+        this.scrollToActive();
+    }
     /**
-     * Component event handling.
+     * This method allows you to open any of the tabs by calling the method and
+     * passing the index of the tab. Please note that index starts from zero.
      */
-    this.handleKeyDown = ev => {
-      let button;
-      if (keyboardUtils.isArrowLeftKey(ev) || keyboardUtils.isArrowUpKey(ev)) {
-        button = ev.target.previousElementSibling;
-      }
-      else if (keyboardUtils.isArrowRightKey(ev) || keyboardUtils.isArrowDownKey(ev)) {
-        button = ev.target.nextElementSibling;
-      }
-      if (button) {
-        ev.preventDefault();
-        button.click();
-        button.focus();
-      }
-    };
-    this.onTabSelect = (tabIndex) => {
-      if (this.tabChangeConfirm) {
-        if (tabIndex !== this.selected) {
-          const event = {
+    async openTab(tabIndex) {
+        if (tabIndex >= this.tabs.length) {
+            throw new Error(`[duet-tabs] Index ${tabIndex} is out of bounds of tabs length`);
+        }
+        this.selected = tabIndex;
+        this.tabs.forEach((tab, i) => {
+            tab.selected = i === tabIndex;
+        });
+        this.scrollToActive();
+        const event = {
             value: tabIndex,
             component: "duet-tab-group",
-          };
-          this.duetTabChangeRequested.emit(event);
+        };
+        this.duetChange.emit(event);
+        this.duetTabChange.emit(event);
+    }
+    /**
+     * This method used to refresh the contents of the tab group
+     * but is now deprecated as this is done automatically.
+     * @deprecated
+     */
+    async refresh() {
+        console.log("[duet-tabs] Refresh method is deprecated and will be removed in the future version.");
+    }
+    /**
+     * Local methods.
+     */
+    getTabs() {
+        const allTabs = Array.from(this.element.querySelectorAll("duet-tab"));
+        const localTabs = allTabs.filter(tab => tab.closest("duet-tab-group") === this.element);
+        if (localTabs.length === 0) {
+            throw new Error("[duet-tabs] Must have at least one tab");
         }
-      }
-      else {
-        this.openTab(tabIndex);
-      }
-    };
-    this.scrollToActive = () => {
-      if (this.variation === "checked" || this.variation === "plain-scrolling") {
-        setTimeout(() => {
-          const active = this.tabsContainer.querySelector(".selected");
-          if (active) {
-            active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
-          }
-        }, 50);
-      }
-    };
-    this.renderTab = () => {
-      const renderedTabs = this.tabs.map((element, index$1) => {
-        return (index.h("button", { role: "tab", id: this.getButtonId(index$1), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index$1), tabindex: index$1 === 0 ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
-            "duet-p-0": this.padding === "none",
-            "duet-tab-button": true,
-            "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
-            selected: element.selected,
-          }, onClick: () => this.onTabSelect(index$1), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (index.h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, index.h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, index.h("p", null, element.label), index.h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), index.h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, index.h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label)));
-      });
-      if (this.scrolls) {
-        return (index.h("duet-scrollable", { selected: this.selected, identifier: this.identifier }, renderedTabs));
-      }
-      return renderedTabs;
-    };
-    this.tabs = [];
-    this.selected = undefined;
-    this.theme = "";
-    this.scrolls = false;
-    this.collapses = true;
-    this.accessibleLabel = undefined;
-    this.variation = "default";
-    this.language = languageUtils.getLanguage();
-    this.labelDefaults = {
-      fi: "Valitse",
-      en: "Choose",
-      sv: "Välj",
-    };
-    this.label = languageUtils.getLocaleString(this.labelDefaults, this.language);
-    this.labelHidden = true;
-    this.identifier = this.id;
-    this.margin = "auto";
-    this.padding = "auto";
-    this.setTabIndex = false;
-    this.tabChangeConfirm = false;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  async connectedCallback() {
-    if (typeof MutationObserver !== "undefined") {
-      this.mutationO = new MutationObserver(() => {
-        this.updateTabs();
-      });
-      this.mutationO.observe(this.element, {
-        attributes: true,
-        attributeFilter: ["label"],
-        childList: true,
-        characterData: true,
-        subtree: true,
-      });
+        // filter out any nested tabs
+        return localTabs;
     }
-    await this.updateTabs();
-  }
-  disconnectedCallback() {
-    if (this.mutationO) {
-      this.mutationO.disconnect();
-      this.mutationO = undefined;
+    getButtonId(index) {
+        return `${this.id}-button-${index}`;
     }
-  }
-  componentWillLoad() {
-    themeableComponent.inheritGlobalTheme(this);
-  }
-  componentDidLoad() {
-    this.scrollToActive();
-  }
-  /**
-   * This method allows you to open any of the tabs by calling the method and
-   * passing the index of the tab. Please note that index starts from zero.
-   */
-  async openTab(tabIndex) {
-    if (tabIndex >= this.tabs.length) {
-      throw new Error(`[duet-tabs] Index ${tabIndex} is out of bounds of tabs length`);
+    getTabId(index) {
+        return `${this.id}-tab-${index}`;
     }
-    this.selected = tabIndex;
-    this.tabs.forEach((tab, i) => {
-      tab.selected = i === tabIndex;
-    });
-    this.scrollToActive();
-    const event = {
-      value: tabIndex,
-      component: "duet-tab-group",
-    };
-    this.duetChange.emit(event);
-    this.duetTabChange.emit(event);
-  }
-  /**
-   * This method used to refresh the contents of the tab group
-   * but is now deprecated as this is done automatically.
-   * @deprecated
-   */
-  async refresh() {
-    console.log("[duet-tabs] Refresh method is deprecated and will be removed in the future version.");
-  }
-  /**
-   * Local methods.
-   */
-  getTabs() {
-    const allTabs = Array.from(this.element.querySelectorAll("duet-tab"));
-    const localTabs = allTabs.filter(tab => tab.closest("duet-tab-group") === this.element);
-    if (localTabs.length === 0) {
-      throw new Error("[duet-tabs] Must have at least one tab");
+    getAccessibleDescription(index) {
+        const description = this.tabs[index].getAttribute("accessible-description") || null;
+        return description;
     }
-    // filter out any nested tabs
-    return localTabs;
-  }
-  getButtonId(index) {
-    return `${this.id}-button-${index}`;
-  }
-  getTabId(index) {
-    return `${this.id}-tab-${index}`;
-  }
-  getAccessibleDescription(index) {
-    const description = this.tabs[index].getAttribute("accessible-description") || null;
-    return description;
-  }
-  async updateTabs() {
-    this.selected = undefined;
-    this.tabs = this.getTabs();
-    this.tabs.forEach((tab, index) => {
-      tab.id = this.getTabId(index);
-      if (tab.selected) {
+    async updateTabs() {
+        this.selected = undefined;
+        this.tabs = this.getTabs();
+        this.tabs.forEach((tab, index) => {
+            tab.id = this.getTabId(index);
+            if (tab.selected) {
+                if (this.selected === undefined) {
+                    this.selected = index;
+                }
+                else {
+                    tab.selected = false;
+                }
+            }
+        });
         if (this.selected === undefined) {
-          this.selected = index;
-        }
-        else {
-          tab.selected = false;
+            this.selected = 0;
+            this.tabs[0].selected = true;
         }
-      }
-    });
-    if (this.selected === undefined) {
-      this.selected = 0;
-      this.tabs[0].selected = true;
+        return;
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
+        const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
+        return (index.h("div", { class: {
+                "duet-tab-group": true,
+                "duet-theme-turva": this.theme === "turva",
+                [variationClass]: true,
+                "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
+                "duet-tab-group-scrolls": this.scrolls,
+                "duet-tab-group-collapses": this.collapses,
+            }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (index.h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
+                return { label: tab.label, value: index.toString() };
+            }) })), index.h("div", { role: "tablist", class: {
+                "duet-m-0": this.margin === "none" || this.variation === "checked",
+                "duet-tab-group-tabs": true,
+                "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
+                "duet-tab-group-collapses": this.collapses,
+            }, ref: el => {
+                this.tabsContainer = el;
+            } }, this.renderTab()), index.h("div", { role: "tabpanel", tabindex: this.setTabIndex ? null : "0", class: {
+                "duet-tab-group-content": true,
+                "duet-m-0": this.margin === "none",
+                "checked-group-content": this.variation === "checked",
+            } }, index.h("slot", null))));
     }
-    return;
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
-    const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
-    return (index.h("div", { class: {
-        "duet-tab-group": true,
-        "duet-theme-turva": this.theme === "turva",
-        [variationClass]: true,
-        "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
-        "duet-tab-group-scrolls": this.scrolls,
-        "duet-tab-group-collapses": this.collapses,
-      }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (index.h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
-        return { label: tab.label, value: index.toString() };
-      }) })), index.h("div", { role: "tablist", class: {
-        "duet-m-0": this.margin === "none" || this.variation === "checked",
-        "duet-tab-group-tabs": true,
-        "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
-        "duet-tab-group-collapses": this.collapses,
-      }, ref: el => {
-        this.tabsContainer = el;
-      } }, this.renderTab()), index.h("div", { role: "tabpanel", tabindex: this.setTabIndex ? null : "0", class: {
-        "duet-tab-group-content": true,
-        "duet-m-0": this.margin === "none",
-        "checked-group-content": this.variation === "checked",
-      } }, index.h("slot", null))));
-  }
-  get element() { return index.getElement(this); }
+    get element() { return index.getElement(this); }
 };
 DuetTabGroup.style = duetTabGroupCss;