@duetds/components 6.10.4 → 6.11.1

package/lib/collection/components/duet-tooltip/duet-tooltip.css

@@ -29,106 +29,6 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-.duet-tooltip {
-  position: absolute;
-  z-index: 950;
-  display: none;
-  width: 282px;
-  min-height: 48px;
-  max-height: 340px;
-  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;
-  font-weight: 400;
-  line-height: 1.25;
-  color: rgb(0, 41, 77);
-  visibility: hidden;
-  background: rgb(255, 255, 255);
-  border: 1px solid rgb(225, 227, 230);
-  border-radius: 4px;
-  box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.07);
-  opacity: 0;
-  transition: 300ms ease;
-  transform-origin: 100% 100%;
-}
-.duet-tooltip.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: rgb(23, 28, 58);
-  border-color: rgb(228, 228, 230);
-  box-shadow: 0 2px 10px 0 rgba(117, 117, 117, 0.13);
-}
-.duet-tooltip .arrow {
-  position: absolute;
-  width: 22px;
-  height: 22px;
-  pointer-events: none;
-}
-.duet-tooltip .arrow.bottom, .duet-tooltip .arrow.bottom-start, .duet-tooltip .arrow.bottom-end {
-  top: -21px;
-}
-.duet-tooltip .arrow-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-.duet-tooltip .arrow-container::after {
-  position: absolute;
-  z-index: 200;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-  content: "";
-}
-.duet-tooltip .arrow-container::before {
-  position: absolute;
-  z-index: 100;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-  content: "";
-}
-.duet-tooltip .arrow-container.top::after, .duet-tooltip .arrow-container.top-start::after, .duet-tooltip .arrow-container.top-end::after {
-  bottom: 2px;
-  left: 2px;
-  border: 10px solid transparent;
-  border-top: 10px solid rgb(255, 255, 255);
-}
-.duet-tooltip .arrow-container.top::before, .duet-tooltip .arrow-container.top-start::before, .duet-tooltip .arrow-container.top-end::before {
-  bottom: -1px;
-  left: 1px;
-  border: 11px solid transparent;
-  border-top: 11px solid rgb(225, 227, 230);
-}
-.duet-theme-turva .duet-tooltip .arrow-container.top::before, .duet-theme-turva .duet-tooltip .arrow-container.top-start::before, .duet-theme-turva .duet-tooltip .arrow-container.top-end::before {
-  border-top: 11px solid rgb(228, 228, 230);
-}
-.duet-tooltip .arrow-container.bottom::after, .duet-tooltip .arrow-container.bottom-start::after, .duet-tooltip .arrow-container.bottom-end::after {
-  bottom: 1px;
-  left: 2px;
-  border: 10px solid transparent;
-  border-bottom: 10px solid rgb(255, 255, 255);
-}
-.duet-tooltip .arrow-container.bottom::before, .duet-tooltip .arrow-container.bottom-start::before, .duet-tooltip .arrow-container.bottom-end::before {
-  bottom: 1px;
-  left: 1px;
-  border: 11px solid transparent;
-  border-bottom: 11px solid rgb(225, 227, 230);
-}
-.duet-theme-turva .duet-tooltip .arrow-container.bottom::before, .duet-theme-turva .duet-tooltip .arrow-container.bottom-start::before, .duet-theme-turva .duet-tooltip .arrow-container.bottom-end::before {
-  border-top: 11px solid rgb(228, 228, 230);
-}
-.duet-tooltip.duet-tooltip-has-label {
-  right: auto !important;
-  left: 0;
-  width: 282px !important;
-  transform-origin: 0 0 !important;
-}
-.duet-tooltip.duet-tooltip-active {
-  visibility: visible;
-  opacity: 1;
-  transition-property: transform, opacity;
-}
-
 .duet-tooltip-button {
   z-index: 100;
   display: inline-block;
@@ -175,40 +75,6 @@
   margin-right: 0;
 }
 
-.duet-tooltip-scrollable {
-  padding: 20px !important;
-  width: 100%;
-  max-height: 250px;
-  padding-right: 25px !important;
-  overflow-y: auto;
-  -webkit-hyphens: auto;
-  hyphens: auto;
-  border-radius: 4px;
-  -webkit-overflow-scrolling: touch;
-}
-.duet-tooltip-scrollable:focus {
-  outline: none;
-}
-:host(.user-is-tabbing) .duet-tooltip-scrollable:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
-:host(.user-is-tabbing) .duet-theme-turva .duet-tooltip-scrollable:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
-.duet-tooltip-scrollable::-webkit-scrollbar {
-  width: 4px;
-}
-.duet-tooltip-scrollable::-webkit-scrollbar-track {
-  border-radius: 4px;
-}
-.duet-tooltip-scrollable::-webkit-scrollbar-thumb {
-  background: rgb(225, 227, 230);
-  border-radius: 4px;
-}
-.duet-theme-turva .duet-tooltip-scrollable::-webkit-scrollbar-thumb {
-  background: rgb(228, 228, 230);
-}
-
 .duet-tooltip-label {
   position: relative;
   z-index: 100;
@@ -225,33 +91,4 @@
 }
 .duet-theme-turva .duet-tooltip-label {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.duet-tooltip-close {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 17px;
-  height: 17px;
-  min-height: 0 !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  line-height: normal;
-  color: rgb(0, 41, 77);
-  cursor: pointer;
-  background: rgb(245, 248, 250);
-  border-radius: 50%;
-  -webkit-appearance: none;
-  appearance: none;
-}
-.duet-tooltip-close:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px rgb(0, 119, 179);
-}
-.duet-theme-turva .duet-tooltip-close:focus {
-  color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 2px rgb(23, 28, 58);
 }

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

@@ -52,14 +52,11 @@ export class DuetTooltip {
     };
     this.handleKeyDown = (e) => {
       const isEscapeKey = e.keyCode === 27;
-      const isTabbingOut = e.target === this.scrollableEl && e.shiftKey && e.keyCode === 9;
+      const isTabbingOut = e.target === this.popupElement && e.shiftKey && e.keyCode === 9;
       if (isEscapeKey || isTabbingOut) {
         this.closeTooltip(true);
       }
     };
-    this.handleCloseClick = () => {
-      this.closeTooltip(true);
-    };
     this.updatePlacement = async () => {
       var _a, _b;
       let preferRight = true;
@@ -76,10 +73,11 @@ export class DuetTooltip {
       else if (this.direction === "right") {
         placement = "top-start";
       }
-      const position = await computePosition(this.buttonEl, this.tooltipEl, {
+      const position = await computePosition(this.buttonEl, this.popupElement, {
         placement,
         middleware: [flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })],
       });
+      // magic number adjustment for the tooltip position to cater for the arrow
       this.tooltipY = position.y;
       this.tooltipX = position.x;
       this.placement = position.placement;
@@ -127,7 +125,9 @@ export class DuetTooltip {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  componentDidLoad() {
+  async componentDidLoad() {
+    this.arrowEl = await this.popupElement.getArrowElement();
+    this.contentEl = await this.popupElement.getContentElement();
     if (!Build.isServer) {
       this.updatePlacement();
     }
@@ -135,7 +135,14 @@ export class DuetTooltip {
   componentDidUpdate() {
     switch (this.focusTarget) {
       case "tooltip":
-        this.scrollableEl.focus({ preventScroll: true });
+        this.contentEl.focus({ preventScroll: true });
+        // workaround for "user-is-tabbing" class not being applied inside shadow DOM
+        if (this.element.classList.contains("user-is-tabbing")) {
+          this.popupElement.classList.add("user-is-tabbing");
+        }
+        else {
+          this.popupElement.classList.remove("user-is-tabbing");
+        }
         break;
       case "trigger":
         this.buttonEl.focus({ preventScroll: true });
@@ -176,6 +183,9 @@ export class DuetTooltip {
       this.closeTooltip();
     }
   }
+  handlePopupClose() {
+    this.closeTooltip(true);
+  }
   async handleActiveChange(newActiveValue) {
     if (newActiveValue) {
       this.updatePlacement();
@@ -210,12 +220,7 @@ export class DuetTooltip {
         "duet-theme-turva": this.theme === "turva",
       } }, h("svg", { "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleInputLabel
       ? `${this.accessibleInputLabel}, ${this.accessibleLabel}`
-      : this.accessibleLabel))), h("div", { ref: element => (this.tooltipEl = element), style: positionStyles, class: {
-        "duet-tooltip": true,
-        "duet-theme-turva": this.theme === "turva",
-        "duet-tooltip-has-label": !!this.label,
-        "duet-tooltip-active": this.active === true,
-      }, onClick: e => e.stopPropagation(), onKeyDown: this.handleKeyDown, onFocusout: this.handleFocusOut }, h("div", { ref: element => (this.scrollableEl = element), class: "duet-tooltip-scrollable", tabindex: "0", id: this.tooltipId }, h("slot", null)), h("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: arrowStyles }, h("div", { class: { "arrow-container": true, [this.placement]: true } })), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)))));
+      : this.accessibleLabel))), h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, onKeyDown: this.handleKeyDown, onFocusout: this.handleFocusOut }, h("slot", null))));
   }
   static get is() { return "duet-tooltip"; }
   static get encapsulation() { return "shadow"; }
@@ -424,7 +429,7 @@ export class DuetTooltip {
           "references": {
             "DuetTooltipBreakpoint": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tooltip/duet-tooltip.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx"
             }
           }
         },
@@ -555,6 +560,12 @@ export class DuetTooltip {
         "target": "document",
         "capture": false,
         "passive": false
+      }, {
+        "name": "tooltipPopupClosed",
+        "method": "handlePopupClose",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }

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

@@ -973,7 +973,7 @@ export class DuetUpload {
           "references": {
             "XHRInternalMiddleWare": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         },
@@ -1352,7 +1352,7 @@ export class DuetUpload {
           "references": {
             "StringMap": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         },
@@ -1850,7 +1850,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadTableGroupName": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         },
@@ -1892,7 +1892,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1912,7 +1912,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1932,7 +1932,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1952,7 +1952,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1972,7 +1972,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -1992,7 +1992,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -2012,7 +2012,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -2032,7 +2032,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -2052,7 +2052,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -2072,7 +2072,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }
@@ -2092,7 +2092,7 @@ export class DuetUpload {
           "references": {
             "DuetUploadEvent": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx"
             }
           }
         }

package/lib/collection/components/duet-upload-item/duet-upload-item.js

@@ -126,7 +126,7 @@ export class DuetUploadItem {
           "references": {
             "ItemType": {
               "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload-item/duet-upload-item.tsx"
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload-item/duet-upload-item.tsx"
             }
           }
         },

package/lib/collection/utils/teleport.js

@@ -0,0 +1,30 @@
+/*!
+ * Built with Duet Design System
+ */
+/**
+ * Teleport helps resolving z-index issues of overlapping popup elements.
+ * Initiate it in your component's willLoad or didLoad lifecycle hook.
+ * When you open the popup, call teleport.go() and move focus to the popup.
+ * When you close the popup, call teleport.resume() and move focus to the element that opened the popup.
+ * If your popup has closing animation, use the timeout parameter.
+ */
+import { zIndexPopup } from "@duetds/tokens";
+export class Teleport {
+  constructor(element, target) {
+    this.element = element;
+    this.target = target || document.body;
+  }
+  go() {
+    this.stub = document.createElement("div");
+    this.element.insertAdjacentElement("afterend", this.stub);
+    this.target.appendChild(this.element);
+    this.element.style.zIndex = zIndexPopup;
+  }
+  resume(timeout = 0) {
+    setTimeout(() => {
+      this.element.style.zIndex = "";
+      this.stub.insertAdjacentElement("beforebegin", this.element);
+      this.stub.remove();
+    }, timeout);
+  }
+}

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-dbb9df4e.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-fa37a369.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-80cd62f8.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-05ab48bf.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-5c48ca92.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-8319ca94.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-25fa826f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-215e9694.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { g as getColorByName } from './p-de68431d.js';
-import { d as defineCustomElement$4 } from './p-226f50bb.js';
-import { d as defineCustomElement$3 } from './p-171c70e8.js';
-import { d as defineCustomElement$2 } from './p-26a65533.js';
+import { g as getColorByName } from './p-661e7864.js';
+import { d as defineCustomElement$4 } from './p-0d04d137.js';
+import { d as defineCustomElement$3 } from './p-7be4444a.js';
+import { d as defineCustomElement$2 } from './p-8badaab4.js';
 
 const duetBannerCss = "*,*::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-right:4px !important;margin-bottom:2px !important;display:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-banner{display:grid;width:100%;height: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-style:normal;text-align:left;border-radius:24px}.duet-banner.duet-p-0{padding:0 !important}.duet-banner.duet-m-0{margin:0 !important}.duet-banner .visual{position:relative;overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner .visual .image-container{position:relative;width:400px;height:400px;overflow:hidden;border-radius:20%;transform:rotate(7deg)}.duet-banner .visual .image{position:relative;top:20px;width:100%;height:100%;transform:rotate(-7deg);object-fit:cover}.duet-banner .visual .icon{position:absolute}.duet-banner .content{display:flex;flex-direction:column;gap:8px;padding:0 20px 36px}.duet-banner .action{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:flex-end;padding-top:16px}.duet-banner.small{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.small .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.small .visual .image-container{top:-130px;left:-40px}.duet-banner.small .visual .icon{bottom:30px;left:15px}.duet-banner.large{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.large .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.large .visual .image-container{top:-30px;left:-30px}.duet-banner.large .visual .image{top:-15px;left:30px}.duet-banner.large .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.large .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.large .action{flex-grow:0}.duet-banner.auto{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.auto .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.auto .visual .image-container{top:-130px;left:-40px}.duet-banner.auto .visual .icon{bottom:30px;left:15px}@media (min-width: 62em){.duet-banner.auto{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.auto .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.auto .visual .image-container{top:-30px;left:-30px}.duet-banner.auto .visual .image{top:-15px;left:30px}.duet-banner.auto .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.auto .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.auto .action{flex-grow:0}}.duet-banner.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\"}.duet-banner.duet-theme-turva .visual .image-container{width:526px;height:456px;transform:none;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}.duet-banner.duet-theme-turva .visual .image{transform:none}.duet-banner.duet-theme-turva.small .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.small .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.small .visual .icon{bottom:15px}.duet-banner.duet-theme-turva.large .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.large .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.large .visual .icon{bottom:auto;left:295px}.duet-banner.duet-theme-turva.auto .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:15px}@media (min-width: 62em){.duet-banner.duet-theme-turva.auto .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:auto;left:295px}}";
 

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

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-25fa826f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-215e9694.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-171c70e8.js';
+import { d as defineCustomElement$2 } from './p-7be4444a.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;font-weight:inherit;color:inherit;text-decoration:none}.duet-breadcrumb:focus{outline:0}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179)}: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 rgb(23, 28, 58)}";
 

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, d as Host } from './p-25fa826f.js';
+import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-215e9694.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { a as getLocaleString } from './p-076452be.js';
-import { d as defineCustomElement$2 } from './p-171c70e8.js';
+import { d as defineCustomElement$2 } from './p-7be4444a.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-ffc196f5.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-f3b91052.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-25fa826f.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-215e9694.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$3 } from './p-171c70e8.js';
-import { d as defineCustomElement$2 } from './p-26a65533.js';
+import { d as defineCustomElement$3 } from './p-7be4444a.js';
+import { d as defineCustomElement$2 } from './p-8badaab4.js';
 
 const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;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\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout .author{color:rgb(0, 41, 77)}.duet-callout.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\"}.duet-callout.duet-theme-turva .author{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
 

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-1f14a267.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-98bca605.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, d as Host } from './p-25fa826f.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-215e9694.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-de68431d.js';
-import { d as defineCustomElement$3 } from './p-171c70e8.js';
-import { d as defineCustomElement$2 } from './p-7681059e.js';
+import { g as getColorByName } from './p-661e7864.js';
+import { d as defineCustomElement$3 } from './p-7be4444a.js';
+import { d as defineCustomElement$2 } from './p-1888263b.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";

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-7c2e755b.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-b7cc653b.js';
 
 const DuetCheckbox = DuetCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

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

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