@duetds/components 4.34.1 → 4.35.0

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const isInternetExplorer = require('./is-internet-explorer-91361c56.js');
 
 const duetLayoutCss = "*,*::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;display:block;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-layout-has-top{margin-top:0}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout.duet-center{display:flex;align-items:center;justify-content:center;width:100%;max-width:888px}@media (min-width: 36em){.duet-layout.duet-center{padding:0 48px}}@media (min-width: 48em){.duet-layout.duet-center{padding:0 72px}}@media (min-width: 62em){.duet-layout.duet-center{width:100%}}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main,.duet-sidebar,.duet-layout-top,.duet-layout-bottom{display:block;width:100%}.duet-layout-top{position:relative;display:block;width:100%;margin:72px auto 0}.duet-layout-top.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout-top .duet-layout-top-wrapper{padding:0 20px;margin:0 auto}@media (min-width: 36em){.duet-layout-top .duet-layout-top-wrapper{padding:0 28px}}@media (min-width: 62em){.duet-layout-top .duet-layout-top-wrapper{padding:0 56px}}@media (min-width: 76.25em){.duet-layout-top .duet-layout-top-wrapper{max-width:1110px;padding:0}}.duet-center .duet-layout-top-wrapper{max-width:888px}@media (min-width: 36em){.duet-center .duet-layout-top-wrapper{padding:0 48px}}@media (min-width: 48em){.duet-center .duet-layout-top-wrapper{padding:0 72px}}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}@media (min-width: 62em){.duet-sidebar{min-width:256px;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container{width:auto;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container.has-tabs{margin-top:89px}}@media (min-width: 62em){.duet-sidebar-container.sticky{position:sticky}.duet-sidebar-container.sticky.with-links{top:calc(3rem + 20px)}.duet-sidebar-container.sticky.without-links{top:calc(4rem + 20px)}}";

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 const watchOptions = require('./watch-options-d88afac0.js');
 

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

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-6ef1142a.js');
 const createId = require('./create-id-c3b984b1.js');
-const focusUtils = require('./focus-utils-30f5dc06.js');
+const focusUtils = require('./focus-utils-adf0830f.js');
 const keyboardUtils = require('./keyboard-utils-b4e3d1d3.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
@@ -112,6 +112,10 @@ let DuetModal = class {
      * Use this property when you need to have the modal dialog initially active.
      */
     this.active = false;
+    /**
+     * Use this property when you want the modal to close when clicked outside of modal.
+     */
+    this.closeOnBlur = false;
   }
   openChanged() {
     if (this.open) {
@@ -224,7 +228,15 @@ let DuetModal = class {
       } }, index.h(focusUtils.FocusGuard, { moveFocusTo: this.buttonEl }), index.h("div", { class: {
         "duet-modal-inner": true,
         "duet-modal-large": this.size === "large",
-      }, role: "document" }, index.h("div", { class: { "duet-modal": true, [this.size]: true } }, index.h("duet-spacer", null), index.h("div", { class: "duet-modal-close" }, index.h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), index.h("div", { class: {
+      }, role: "document", onClick: e => {
+        if (this.closeOnBlur) {
+          this.closeModal(e);
+        }
+      } }, index.h("div", { class: { "duet-modal": true, [this.size]: true }, onClick: e => {
+        if (this.closeOnBlur) {
+          e.stopPropagation();
+        }
+      } }, index.h("duet-spacer", null), index.h("div", { class: "duet-modal-close" }, index.h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), index.h("div", { class: {
         "duet-modal-body": true,
         "duet-modal-gutter-small": this.gutterSize === "small",
         "duet-modal-gutter-medium": this.gutterSize === "medium",

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 const actionArrowDownSmall = require('./action-arrow-down-small-ef77a2d1.js');

package/lib/cjs/duet-number-input.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-b4e3d1d3.js');
 const languageUtils = require('./language-utils-aa282901.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const createId = require('./create-id-c3b984b1.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 const watchOptions = require('./watch-options-d88afac0.js');

package/lib/cjs/duet-range-slider.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const tokens_module = require('./tokens.module-6b2df1c2.js');
 const createId = require('./create-id-c3b984b1.js');
 const isInternetExplorer = require('./is-internet-explorer-91361c56.js');

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

@@ -0,0 +1,406 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ebc216a6.js');
+const themeableComponent = require('./themeable-component-0c1be552.js');
+const languageUtils = require('./language-utils-aa282901.js');
+const createId = require('./create-id-c3b984b1.js');
+const keyboardUtils = require('./keyboard-utils-b4e3d1d3.js');
+require('./string-utils-267e3dbb.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{display:none}: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::-webkit-scrollbar{display:none}::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}";
+
+let 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.tablistAtStart = true;
+    this.isTabContentSmallerThanWrapper = false;
+    this.tablistAtEnd = false;
+    this.childrenData = {};
+    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;
+      }
+    });
+    /**
+     * Theme of duet-tab-scrollable. When used this will override the color setting and
+     * use "primary" or "primary-turva" as the color depending on which theme
+     * is chosen.
+     */
+    this.theme = "";
+    /**
+     * Selected element
+     */
+    this.selected = 0;
+  }
+  watchPropHandler(newValue) {
+    this.scrollToTab(newValue, "center");
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+    const slotted = this.host.children;
+    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.host.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
+    return xValues;
+  }
+  getFirstVisibleElement() {
+    const buttonCollection = this.host.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 (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;
+    }
+  }
+  scrollToTab(index = this.currentIndex, inline) {
+    if (!this.childrenData.hasChildren) {
+      return;
+    }
+    if (index + 1 >= this.childrenData.numberOfChildren) {
+      index = this.childrenData.numberOfChildren - 1;
+    }
+    if (index < 0) {
+      index = 0;
+    }
+    const buttons = this.host.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);
+  }
+  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",
+      } }, index.h("div", { class: "duet-scrollable-items" }, index.h("button", { "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" }, index.h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), index.h("div", { class: this.tabListClass, onScroll: () => this.updateScrollButtons(), ref: element => (this.tabListElement = element) }, index.h("slot", null)), index.h("button", { "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" }, index.h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
+  }
+  get host() { 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}";
+
+let DuetTab = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Defaults for AccessibleLabel
+     * @default null
+     */
+    this.accessibleDescriptionDefault = null;
+    /**
+     * String for AccessibleLabel
+     * @default null
+     */
+    this.accessibleDescription = this.accessibleDescriptionDefault
+      ? languageUtils.getLocaleString(this.accessibleDescriptionDefault)
+      : null;
+  }
+  /**
+   * 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 }, index.h("slot", null)));
+    }
+  }
+};
+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 #e1e3e6}.duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom-color:#e4e4e6 !important}@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;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:#00294d !important;text-align:left;text-decoration:none;cursor:pointer;background:white;border:2px solid #e1e3e6;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:#171c3a !important;border-color:#e4e4e6}.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 #e1e3e6;border-radius:0}}.duet-tab-button:hover{z-index:200;border-color:#909599}.duet-theme-turva .duet-tab-button:hover{border-color:#747475 !important}.duet-tab-button:active{opacity:0.75;transition:none}.duet-tab-button.selected{z-index:201;color:white !important;background:#00294d;border-color:#00294d;outline:0;box-shadow:none !important}.duet-theme-turva .duet-tab-button.selected{color:white !important;background-color:#171c3a;border-color:#171c3a !important}.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;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:#0077b3 !important;background:white;border-bottom:3px solid #0077b3}.duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected{color:#c60c30 !important;border-bottom-color:#c60c30 !important}.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:#00294d;text-align:left}.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:#171c3a}";
+
+let DuetTabGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.duetChange = index.createEvent(this, "duetChange", 3);
+    this.duetTabChange = index.createEvent(this, "duetTabChange", 7);
+    this.id = createId.createID("DuetTabGroup");
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    this.tabs = [];
+    this.selected = 0;
+    /**
+     * Theme of the component.
+     */
+    this.theme = "";
+    /**
+     * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens),
+     * if this is a number instead of true it will be used as "amount of items to scroll"
+     */
+    this.scrolls = false;
+    /**
+     * Whether the tab-group collapses to a select dropwdown in minor breakpoints
+     */
+    this.collapses = true;
+    /**
+     * Style variation of the tab group.
+     */
+    this.variation = "default";
+    /**
+     * The currently active language. This setting changes the accessible labels to match the
+     * chosen language.
+     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
+     */
+    this.language = languageUtils.getLanguage();
+    /**
+     * Defaults for Label
+     * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
+     */
+    this.labelDefaults = {
+      fi: "Valitse",
+      en: "Choose",
+      sv: "Välj",
+    };
+    /**
+     * Label for the select element which gets shown on mobile.
+     * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
+     */
+    this.label = languageUtils.getLocaleString(this.labelDefaults, this.language);
+    /**
+     * Determines whether the label for the select element shown on mobile is visually hidden.
+     */
+    this.labelHidden = true;
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Controls the padding of the component.
+     */
+    this.padding = "auto";
+    /**
+     * 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.renderTab = () => {
+      const renderedTabs = this.tabs.map((element, index$1) => {
+        return (index.h("button", { role: "tab", id: this.getButtonId(index$1), "aria-controls": this.getTabId(index$1), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index$1), type: "button", class: {
+            "duet-p-0": this.padding === "none",
+            "duet-tab-button": true,
+            selected: element.selected,
+          }, onClick: () => this.openTab(index$1), onKeyDown: ev => this.handleKeyDown(ev) }, element.label));
+      });
+      if (this.scrolls) {
+        return index.h("duet-scrollable", { selected: this.selected }, renderedTabs);
+      }
+      return renderedTabs;
+    };
+  }
+  /**
+   * 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();
+  }
+  disconnectedCallback() {
+    if (this.mutationO) {
+      this.mutationO.disconnect();
+      this.mutationO = undefined;
+    }
+  }
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  /**
+   * 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`);
+    }
+    this.selected = tabIndex;
+    this.tabs.forEach((tab, i) => {
+      tab.selected = i === tabIndex;
+    });
+    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");
+    }
+    // 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.tabs = this.getTabs();
+    this.tabs.forEach((tab, index) => {
+      tab.id = this.getTabId(index);
+      tab.setAttribute("aria-labelledby", this.getButtonId(index));
+      if (tab.selected) {
+        this.selected = index;
+      }
+    });
+    return;
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h("div", { class: {
+        "duet-tab-group": true,
+        "duet-theme-turva": this.theme === "turva",
+        [`duet-tab-variation-${this.variation}`]: true,
+        "duet-tab-group-scrolls": this.scrolls,
+        "duet-tab-group-collapses": this.collapses,
+      } }, 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.openTab(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",
+        "duet-tab-group-tabs": true,
+        "duet-tab-group-hidden": this.tabs.length > 3,
+        "duet-tab-group-collapses": this.collapses,
+      } }, this.renderTab()), index.h("div", { class: { "duet-tab-group-content": true, "duet-m-0": this.margin === "none" } }, index.h("slot", null))));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetTabGroup.style = duetTabGroupCss;
+
+exports.duet_scrollable = DuetScrollable;
+exports.duet_tab = DuetTab;
+exports.duet_tab_group = DuetTabGroup;

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const createId = require('./create-id-c3b984b1.js');
 const stringUtils = require('./string-utils-267e3dbb.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-b4e3d1d3.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const createId = require('./create-id-c3b984b1.js');
 const inputUtils = require('./input-utils-f3e3854c.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const createId = require('./create-id-c3b984b1.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');
 

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-aa282901.js');
 const themeableComponent = require('./themeable-component-0c1be552.js');

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 const tokens_module = require('./tokens.module-6b2df1c2.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-aa282901.js');

package/lib/cjs/duet-upload-aria-status.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 
 let DuetUploadAriaStatus = class {
   constructor(hostRef) {

package/lib/cjs/duet-visually-hidden.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1c10bbfb.js');
+const index = require('./index-ebc216a6.js');
 
 const duetVisuallyHiddenCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}";