@duetds/components 6.5.3 → 6.6.1

package/lib/collection/components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.css

@@ -118,6 +118,11 @@
   color: #00294d;
   visibility: visible;
   transition: max-height 0.3s ease-in, padding 0.3s ease-in;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.duet-submenu-bar-dropdown .items::-webkit-scrollbar {
+  display: none;
 }
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown .items {
@@ -137,7 +142,7 @@
   padding: 0;
   overflow: hidden;
   visibility: hidden;
-  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
+  transition: max-height 0.3s ease-in, padding 0.3s ease-in;
 }
 .duet-submenu-bar-dropdown.duet-theme-turva button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

package/lib/collection/components/duet-tab/duet-tab.js

@@ -6,6 +6,7 @@ import { getLocaleString } from "../../utils/language-utils";
 export class DuetTab {
   constructor() {
     this.label = undefined;
+    this.caption = undefined;
     this.selected = undefined;
     this.accessibleDescriptionDefault = null;
     this.accessibleDescription = this.accessibleDescriptionDefault
@@ -52,6 +53,23 @@ export class DuetTab {
         "attribute": "label",
         "reflect": true
       },
+      "caption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Caption for the tab."
+        },
+        "attribute": "caption",
+        "reflect": true
+      },
       "selected": {
         "type": "boolean",
         "mutable": false,

package/lib/collection/components/duet-tab-group/duet-tab-group.css

@@ -51,6 +51,28 @@
   border-bottom-color: #e4e4e6;
 }
 
+.duet-tab-variation-checked .duet-tab-group-tabs {
+  display: flex;
+  gap: 8px;
+  padding-right: 16px;
+  padding-left: 16px;
+  overflow-x: scroll;
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+  /* Hide scrollbar for Chrome, Safari and Opera */
+}
+.duet-tab-variation-checked .duet-tab-group-tabs::-webkit-scrollbar {
+  display: none;
+}
+@media (min-width: 36em) {
+  .duet-tab-variation-checked .duet-tab-group-tabs {
+    overflow: visible;
+  }
+}
+
 @media (min-width: 36em) {
   duet-select {
     display: none !important;
@@ -66,6 +88,7 @@
   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;
@@ -179,6 +202,108 @@
   border-bottom-color: #c60c30;
 }
 
+.duet-tab-variation-checked .duet-tab-button {
+  position: relative;
+  display: inline-block;
+  flex-basis: 0;
+  flex-grow: 1;
+  width: 200px;
+  min-width: 200px;
+  padding: 16px;
+  border-color: #cfd2d4;
+  border-bottom-color: #0077b3;
+  border-radius: 4px 4px 0 0;
+  transition: none;
+}
+.duet-theme-turva.duet-tab-variation-checked .duet-tab-button {
+  border-color: #cfd2d4;
+  border-bottom-color: #444445;
+}
+
+@media (min-width: 36em) {
+  .duet-tab-variation-checked .duet-tab-button {
+    min-width: 0;
+  }
+}
+.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: #0077b3;
+  background: linear-gradient(180deg, #f3f9fc 0%, white 100%);
+  border-color: #0077b3;
+  border-bottom-color: #fff;
+}
+.duet-theme-turva.duet-tab-variation-checked .duet-tab-button.selected {
+  color: #171c3a;
+  background: linear-gradient(180deg, #f5f5f7 0%, white 100%);
+  border-color: #444445;
+  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-weight: 400;
+  color: #657787;
+}
+.duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption {
+  color: #444445;
+}
+
+.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected {
+  color: #0077b3;
+}
+.duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected {
+  color: #444445;
+}
+
+.duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark {
+  order: -1;
+}
+@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%;
@@ -189,7 +314,22 @@
   color: #00294d;
   text-align: left;
 }
+.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: #0077b3;
+}
 .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;
+}
+.duet-theme-turva .duet-tab-group-content.checked-group-content::after {
+  background-color: #444445;
 }

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -30,13 +30,20 @@ export class DuetTabGroup {
         button.focus();
       }
     };
+    this.scrollToActive = () => {
+      const active = this.tabsContainer.querySelector(".selected");
+      if (active) {
+        active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+      }
+    };
     this.renderTab = () => {
       const renderedTabs = this.tabs.map((element, index) => {
         return (h("button", { role: "tab", id: this.getButtonId(index), "aria-controls": this.getTabId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: index === 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.openTab(index), onKeyDown: ev => this.handleKeyDown(ev) }, element.label));
+          }, onClick: () => this.openTab(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label)));
       });
       if (this.scrolls) {
         return (h("duet-scrollable", { selected: this.selected, identifier: this.identifier }, renderedTabs));
@@ -90,6 +97,13 @@ export class DuetTabGroup {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  componentDidLoad() {
+    if (this.variation === "checked") {
+      setTimeout(() => {
+        this.scrollToActive();
+      }, 50);
+    }
+  }
   /**
    * 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.
@@ -102,6 +116,11 @@ export class DuetTabGroup {
     this.tabs.forEach((tab, i) => {
       tab.selected = i === tabIndex;
     });
+    if (this.variation === "checked") {
+      setTimeout(() => {
+        this.scrollToActive();
+      }, 50);
+    }
     const event = {
       value: tabIndex,
       component: "duet-tab-group",
@@ -161,14 +180,20 @@ export class DuetTabGroup {
         [`duet-tab-variation-${this.variation}`]: true,
         "duet-tab-group-scrolls": this.scrolls,
         "duet-tab-group-collapses": this.collapses,
-      }, "aria-label": this.accessibleLabel }, this.tabs.length > 3 && this.collapses && (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) => {
+      }, "aria-label": this.accessibleLabel }, this.variation !== "checked" && this.tabs.length > 3 && this.collapses && (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() };
       }) })), h("div", { role: "tablist", class: {
-        "duet-m-0": this.margin === "none",
+        "duet-m-0": this.margin === "none" || this.variation === "checked",
         "duet-tab-group-tabs": true,
-        "duet-tab-group-hidden": this.tabs.length > 3,
+        "duet-tab-group-hidden": this.tabs.length > 3 && this.variation !== "checked",
         "duet-tab-group-collapses": this.collapses,
-      } }, this.renderTab()), h("div", { role: "tabpanel", tabindex: this.setTabIndex ? null : "0", class: { "duet-tab-group-content": true, "duet-m-0": this.margin === "none" } }, h("slot", null))));
+      }, ref: el => {
+        this.tabsContainer = el;
+      } }, this.renderTab()), 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",
+      } }, h("slot", null))));
   }
   static get is() { return "duet-tab-group"; }
   static get encapsulation() { return "shadow"; }
@@ -266,7 +291,7 @@ export class DuetTabGroup {
         "mutable": false,
         "complexType": {
           "original": "DuetTabVariation",
-          "resolved": "\"default\" | \"plain\"",
+          "resolved": "\"checked\" | \"default\" | \"plain\"",
           "references": {
             "DuetTabVariation": {
               "location": "local"

package/lib/collection/components/duet-table/duet-table.js

@@ -18,7 +18,7 @@ const stickyTopValues = {
  */
 export class DuetTable {
   constructor() {
-    this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu";
+    this.headingSelector = "thead tr > :not(*.duet-editable-table-actions-menu)";
     this.handleMediaQueryChange = (mq) => {
       this.matchesBreakpoint = mq.matches;
     };

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-637de545.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-e9377a6f.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-f51c6f0d.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-0f388d82.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-e41dcc90.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-fc736d50.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-2973295e.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-d2ab6c91.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-ff814bad.js';
+import { d as defineCustomElement$2 } from './p-d555c27d.js';
 
 const duetBreadcrumbCss = "*,*::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;width:100%}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;color:#00294d;text-decoration:none}.duet-breadcrumb:hover{color:#004d80}.duet-breadcrumb.duet-theme-turva{color:#171c3a}.duet-breadcrumb.duet-theme-turva:hover{color:#940925}.duet-breadcrumb:focus{outline:0}.duet-breadcrumb:active{opacity:0.75}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
 

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment, b as Host } from './p-2973295e.js';
+import { p as proxyCustomElement, H, h, F as Fragment, b as Host } from './p-d2ab6c91.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$2 } from './p-ff814bad.js';
+import { d as defineCustomElement$2 } from './p-d555c27d.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

package/lib/dist-custom-elements/duet-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-1c1d12e6.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-22d5db87.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-caption.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-c58ed6c1.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-cc44f2ef.js';
 
 const DuetCaption = DuetCaption$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-card.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, b as Host } from './p-2973295e.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, b as Host } from './p-d2ab6c91.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
 import { s as sanitizeString } from './p-5a9d75e1.js';
 import { g as getColorByName } from './p-535ce3ec.js';
-import { d as defineCustomElement$3 } from './p-ff814bad.js';
-import { d as defineCustomElement$2 } from './p-f0e97570.js';
+import { d as defineCustomElement$3 } from './p-d555c27d.js';
+import { d as defineCustomElement$2 } from './p-c40c2037.js';
 
 var actionArrowUp={"title":"action-arrow-up","tags":"action arrow up caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 17.939a.752.752 0 0 1-.53-1.281L10.94 5.94c.283-.284.659-.44 1.059-.44.401 0 .777.156 1.06.438l10.721 10.72a.752.752 0 0 1-.53 1.281.743.743 0 0 1-.53-.22L12 7 1.28 17.719a.743.743 0 0 1-.53.22z\"/></svg>"};
 

package/lib/dist-custom-elements/duet-checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-b33885be.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-ce3c83bd.js';
 
 const DuetCheckbox = DuetCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-checkmark.d.ts

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

package/lib/dist-custom-elements/duet-checkmark.js

@@ -0,0 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
+import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-799128c4.js';
+
+const DuetCheckmark = DuetCheckmark$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DuetCheckmark, defineCustomElement };

package/lib/dist-custom-elements/duet-choice-group.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-2973295e.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-d2ab6c91.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { f as findCheckedOption, w as watchForOptions } from './p-12721178.js';
-import { d as defineCustomElement$6 } from './p-c58ed6c1.js';
-import { d as defineCustomElement$5 } from './p-19f6ccfd.js';
-import { d as defineCustomElement$4 } from './p-ff814bad.js';
-import { d as defineCustomElement$3 } from './p-2cc693bd.js';
-import { d as defineCustomElement$2 } from './p-4385956a.js';
+import { d as defineCustomElement$6 } from './p-cc44f2ef.js';
+import { d as defineCustomElement$5 } from './p-72fd3c82.js';
+import { d as defineCustomElement$4 } from './p-d555c27d.js';
+import { d as defineCustomElement$3 } from './p-641086b9.js';
+import { d as defineCustomElement$2 } from './p-bd9de5b1.js';
 
 const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-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%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex;margin-bottom:0}}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";
 

package/lib/dist-custom-elements/duet-choice.js

@@ -1,17 +1,17 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-2973295e.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-d2ab6c91.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { D as DuetStringsExternalDefaults } from './p-76f00bd5.js';
 import { c as createID } from './p-c1325e35.js';
 import { F as FocusGuard } from './p-9986919d.js';
 import { i as isKeyboardClick, a as isQuestionKey, b as isEscapeKey } from './p-d8549efe.js';
 import { g as getLocaleString, a as getLanguage } from './p-ede854e1.js';
-import { d as defineCustomElement$5 } from './p-c58ed6c1.js';
-import { d as defineCustomElement$4 } from './p-ff814bad.js';
-import { d as defineCustomElement$3 } from './p-f0e97570.js';
-import { d as defineCustomElement$2 } from './p-4385956a.js';
+import { d as defineCustomElement$5 } from './p-cc44f2ef.js';
+import { d as defineCustomElement$4 } from './p-d555c27d.js';
+import { d as defineCustomElement$3 } from './p-c40c2037.js';
+import { d as defineCustomElement$2 } from './p-bd9de5b1.js';
 
 var messagingInfo={"title":"messaging-info","tags":"messaging info information circle","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z\"/><circle cx=\"11.625\" cy=\"7.125\" r=\"1.125\"/><path d=\"M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.5C6.21 1.5 1.5 6.21 1.5 12S6.21 22.5 12 22.5 22.5 17.79 22.5 12 17.79 1.5 12 1.5z\"/></svg>"};
 
@@ -175,6 +175,12 @@ const DuetChoice$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
   async setFocus(options) {
     this.nativeInput.focus(options);
   }
+  /**
+   * This method toggles the info section.
+   */
+  async toggleInfoMethod() {
+    this.isInfoOpen = !this.isInfoOpen;
+  }
   getAriaDescribedby() {
     if (this.accessibleDescribedBy) {
       return this.accessibleDescribedBy;
@@ -277,7 +283,8 @@ const DuetChoice$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     "isHovering": [32],
     "isInfoOpen": [32],
     "isBlurred": [32],
-    "setFocus": [64]
+    "setFocus": [64],
+    "toggleInfoMethod": [64]
   }, [[2, "blur", "handleHostBlur"], [2, "keydown", "handleHostKeyDown"], [2, "keyup", "handleHostKeyUp"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/lib/dist-custom-elements/duet-collapsible.js

@@ -1,21 +1,22 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-2973295e.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-d2ab6c91.js';
 import { a as actionArrowDownSmall } from './p-115c79b6.js';
 import { f as font_size_medium, t as tokens } from './p-738bd3c5.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { c as createID } from './p-c1325e35.js';
 import { i as isKeyboardClick } from './p-d8549efe.js';
 import { s as sanitizeString } from './p-5a9d75e1.js';
-import { d as defineCustomElement$2 } from './p-ff814bad.js';
+import { d as defineCustomElement$2 } from './p-d555c27d.js';
 
-const duetCollapsibleCss = "*.sc-duet-collapsible,*.sc-duet-collapsible::after,*.sc-duet-collapsible::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-collapsible-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:16px !important;display:block;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.5;color:#00294d}.duet-theme-turva.sc-duet-collapsible-h{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}.duet-m-0.sc-duet-collapsible-h{margin:0 !important}.duet-collapsible-content.sc-duet-collapsible{display:none;padding-left:18px;margin-top:8px;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;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:#00294d}@media (max-width: 35.9375em){.duet-collapsible-content.sc-duet-collapsible{font-size:0.875rem}}.duet-collapsible-content.duet-theme-turva.sc-duet-collapsible{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}[open].sc-duet-collapsible-h>.duet-collapsible-content.sc-duet-collapsible{display:block}.duet-collapsible-heading.sc-duet-collapsible{-webkit-user-select:none;user-select:none;display:flex;align-items:center;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.5;color:#00294d;cursor:pointer;border-radius:4px}.duet-collapsible-heading.duet-collapsible-normal-weight.sc-duet-collapsible{font-weight:400}.duet-collapsible-heading.duet-theme-turva.sc-duet-collapsible{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}.duet-collapsible-heading.sc-duet-collapsible .duet-collapsible-heading-content.sc-duet-collapsible{flex:0 auto;min-width:0}.duet-collapsible-heading.has-after-heading.sc-duet-collapsible .duet-collapsible-heading-content.sc-duet-collapsible+div.sc-duet-collapsible{flex:1 0 auto;margin-left:16px}.duet-collapsible-heading.sc-duet-collapsible:focus{outline:0}.user-is-tabbing.sc-duet-collapsible-h .duet-collapsible-heading.sc-duet-collapsible:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.user-is-tabbing.duet-theme-turva.sc-duet-collapsible-h .duet-collapsible-heading.sc-duet-collapsible:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-collapsible-heading-icon.sc-duet-collapsible{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:#00294d;transition:transform 300ms ease}.duet-collapsible-heading-icon.sc-duet-collapsible:last-child,.duet-collapsible-heading-icon.sc-duet-collapsible:last-of-type{margin-right:0 !important}[aria-expanded=true].sc-duet-collapsible .duet-collapsible-heading-icon.sc-duet-collapsible{transform:rotate(180deg)}";
+const duetCollapsibleCss = "*,*::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;margin-bottom:16px !important;display:block;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.5;color:#00294d}:host(.duet-theme-turva){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}:host(.duet-m-0){margin:0 !important}.duet-collapsible-content{display:none;padding-left:18px;margin-top:8px;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;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:#00294d}@media (max-width: 35.9375em){.duet-collapsible-content{font-size:0.875rem}}.duet-collapsible-content.duet-theme-turva{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}:host([open])>.duet-collapsible-content{display:block}.duet-collapsible-heading{-webkit-user-select:none;user-select:none;display:flex;align-items:center;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.5;color:#00294d;cursor:pointer;border-radius:4px}.duet-collapsible-heading.duet-collapsible-normal-weight{font-weight:400}.duet-collapsible-heading.duet-theme-turva{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}.duet-collapsible-heading .duet-collapsible-heading-content{flex:0 auto;min-width:0}.duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content+div{flex:1 0 auto;margin-left:16px}.duet-collapsible-heading:focus{outline:0}:host(.user-is-tabbing) .duet-collapsible-heading:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing.duet-theme-turva) .duet-collapsible-heading:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-collapsible-heading-icon{margin-right:8px !important;display:flex;align-items:center;justify-content:center;color:#00294d;transition:transform 300ms ease}.duet-collapsible-heading-icon:last-child,.duet-collapsible-heading-icon:last-of-type{margin-right:0 !important}[aria-expanded=true] .duet-collapsible-heading-icon{transform:rotate(180deg)}";
 
 const DuetCollapsible$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.duetToggle = createEvent(this, "duetToggle", 7);
     this.id = createID("DuetCollapsible");
     this.handleKeyDown = (e) => {
@@ -95,16 +96,16 @@ const DuetCollapsible$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
    */
   render() {
     const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h(HeadingTagName, { class: {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h(HeadingTagName, null, h("button", { class: {
         "duet-collapsible-heading": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-collapsible-normal-weight": this.headingWeight === "normal",
         "has-after-heading": this.hasAfterHeading,
-      }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", tabindex: "0", ref: button => (this.nativeButton = button), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "duet-collapsible-heading-icon" }, h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.svg })), h("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", null, h("slot", { name: "after-heading" })))), h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", null))));
+      }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "duet-collapsible-heading-icon" }, h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.svg })), h("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", null, h("slot", { name: "after-heading" }))))), h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", null))));
   }
   get element() { return this; }
   static get style() { return duetCollapsibleCss; }
-}, [6, "duet-collapsible", {
+}, [1, "duet-collapsible", {
     "theme": [1025],
     "heading": [1],
     "headingWeight": [1, "heading-weight"],

package/lib/dist-custom-elements/duet-combobox.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h as h$1, b as Host } from './p-2973295e.js';
+import { p as proxyCustomElement, H, c as createEvent, h as h$1, b as Host } from './p-d2ab6c91.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { d as debounce } from './p-0b3f675e.js';
 import { c as isEnterKey, b as isEscapeKey, d as isTabKey, e as isArrowUpKey, f as isArrowDownKey } from './p-d8549efe.js';
 import { g as getLocaleString, a as getLanguage } from './p-ede854e1.js';
 import { p as parsePossibleJSON } from './p-5a9d75e1.js';
 import { h, F as Fragment } from './p-e4a60f42.js';
-import { d as defineCustomElement$2 } from './p-ff814bad.js';
+import { d as defineCustomElement$2 } from './p-d555c27d.js';
 
 const SelectSingle = ({ item, search = "", selected }) => {
   const regEx = search !== "" ? new RegExp("(" + search.split(" ").join("|") + ")", "gi") : undefined;

package/lib/dist-custom-elements/duet-cookie-consent.js

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-2973295e.js';
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-d2ab6c91.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$6 } from './p-1c1d12e6.js';
-import { d as defineCustomElement$5 } from './p-ff814bad.js';
-import { d as defineCustomElement$4 } from './p-f0e97570.js';
-import { d as defineCustomElement$3 } from './p-29ac3d37.js';
-import { d as defineCustomElement$2 } from './p-4385956a.js';
+import { d as defineCustomElement$6 } from './p-22d5db87.js';
+import { d as defineCustomElement$5 } from './p-d555c27d.js';
+import { d as defineCustomElement$4 } from './p-c40c2037.js';
+import { d as defineCustomElement$3 } from './p-9087725f.js';
+import { d as defineCustomElement$2 } from './p-bd9de5b1.js';
 
 const duetCookieConsentCss = "*,*::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;position:fixed;right:0;bottom:0;left:0;z-index:950;display:block;width:100%;box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 48em){:host{right:28px;bottom:28px;left:auto;width:25rem}}:host(:focus){outline:0}:host(.user-is-tabbing:focus){border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing.duet-theme-turva:focus){box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-cookie-consent{padding:20px;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:0.875rem;color:white !important;background-color:rgba(0, 21, 39, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent{background:rgba(0, 21, 39, 0.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.duet-cookie-consent.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";background-color:rgba(12, 14, 29, 0.9)}@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){.duet-cookie-consent.duet-theme-turva{background:rgba(12, 14, 29, 0.8)}}@media (min-width: 48em){.duet-cookie-consent{padding:20px;border-radius:4px}}.duet-cookie-consent-content{display:flex;align-items:center;max-width:1110px;margin:0 auto}.duet-cookie-consent-content .expand{flex:1}::slotted(a){font-weight:600;color:white !important;text-decoration:underline;white-space:nowrap}::slotted(a[target=_blank]){padding-right:16px;background:url(\"data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjUgMmExLjUgMS41IDAgMDEuMTQgM0gzLjc1Yy0uMzggMC0uNy4yOC0uNzQuNjVsLS4wMS4xdjE0LjVjMCAuMzguMjguNy42NS43NGwuMS4wMWgxNC41Yy4zOCAwIC43LS4yOC43NC0uNjVsLjAxLS4xdi02Ljg5YTEuNSAxLjUgMCAwMTMgMHY2Ljg5QTMuNzUgMy43NSAwIDAxMTguMjUgMjRIMy43NUEzLjc1IDMuNzUgMCAwMTAgMjAuMjVWNS43NUEzLjc1IDMuNzUgMCAwMTMuNzUgMnptMTItMmMuNzggMCAxLjQyLjYgMS41IDEuMzZWNy41YTEuNSAxLjUgMCAwMS0zIC4xNFY1LjEybC01LjQ0IDUuNDRhMS41IDEuNSAwIDAxLTIuMjItMmwuMS0uMTJMMTguODggM0gxNi41QTEuNSAxLjUgMCAwMTE1IDEuNjRWMS41YzAtLjc4LjYtMS40MiAxLjM2LTEuNWguMTR6Ii8+PC9zdmc+\") no-repeat right 50%;background-size:12px 10px}::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva ::slotted(a:focus){outline:0;box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";