@duetds/components 6.9.6 → 6.9.7

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

@@ -1048,6 +1048,16 @@
     width: 80%;
   }
 }
+.duet-hero.duet-hero-content .duet-hero-text .duet-hero-pre {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-content .duet-hero-text .duet-hero-pre {
+    margin-top: 1.5rem;
+    margin-bottom: 0;
+  }
+}
 .duet-hero.duet-hero-content.duet-theme-turva {
   background: rgb(255, 255, 255);
 }

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

@@ -13,6 +13,7 @@ import { parsePossibleJSON } from "../../utils/string-utils";
  * @slot default - This is an unamed slot for a text or extra button that is placed after any buttons (or list item)
  * @slot badge - This is a slot for a status badge that sits next to pre-heading inside the hero component.
  * @slot bottom - This is a slot for content under the main hero content.
+ * @slot pre-heading - This is a slot for pre-heading content inside the hero component.
  * @slot heading - This is a slot for heading content inside the hero component.
  * @slot subheading - This is a slot for heading content inside the hero component. Only usable with campaign, section variations.
  */
@@ -70,6 +71,7 @@ export class DuetHero {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.hasPreHeadingSlot = !!this.element.querySelector('[slot="pre-heading"]');
     this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
     this.hasSubHeadingSlot = !!this.element.querySelector('[slot="subheading"]');
     this.refresh();
@@ -172,7 +174,7 @@ export class DuetHero {
         href: this.processedBack.href,
         id: this.processedBack.id,
         analyticsId: this.processedBack.analyticsId,
-      }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, this.preHeading && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre" }, this.preHeading)), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { name: "subheading" }))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("span", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+      }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? this.preHeading : h("slot", { name: "pre-heading" }))), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { name: "subheading" }))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("span", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
       this.variation !== "image" &&
       !campaignOrSection &&
       this.variation !== "product" &&

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

@@ -31,10 +31,8 @@
 
 .duet-tooltip {
   position: absolute;
-  right: -141px;
-  bottom: 100%;
   z-index: 950;
-  display: block;
+  display: none;
   width: 282px;
   min-height: 48px;
   max-height: 340px;
@@ -50,7 +48,6 @@
   box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.07);
   opacity: 0;
   transition: 300ms ease;
-  transform: scale(0.9) translateZ(0) translateY(20px);
   transform-origin: 100% 100%;
 }
 .duet-tooltip.duet-theme-turva {
@@ -59,78 +56,66 @@
   border-color: rgb(228, 228, 230);
   box-shadow: 0 2px 10px 0 rgba(117, 117, 117, 0.13);
 }
-.duet-tooltip::after {
+.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;
-  right: 142px;
-  bottom: -20px;
   z-index: 200;
   width: 0;
   height: 0;
+  pointer-events: none;
   content: "";
-  border: 10px solid transparent;
-  border-top: 10px solid rgb(255, 255, 255);
 }
-.duet-tooltip::before {
+.duet-tooltip .arrow-container::before {
   position: absolute;
-  right: 141px;
-  bottom: -22px;
   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::before {
+.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.duet-tooltip-down {
-  top: 100%;
-  bottom: auto;
-  transform: scale(0.9) translateZ(0) translateY(-20px);
-  transform-origin: 100% 0;
-}
-.duet-tooltip.duet-tooltip-down::after {
-  top: -20px;
-  bottom: auto;
+.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.duet-tooltip-down::before {
-  top: -22px;
-  bottom: auto;
+.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.duet-tooltip-down::before {
-  border-bottom: 11px solid rgb(228, 228, 230);
-}
-.duet-tooltip.duet-tooltip-left {
-  right: -21px !important;
-  transform-origin: 100% 100% !important;
-}
-.duet-tooltip.duet-tooltip-left::after {
-  right: 22px !important;
-  transform: none !important;
-}
-.duet-tooltip.duet-tooltip-left::before {
-  right: 21px !important;
-  transform: none !important;
-}
-.duet-tooltip.duet-tooltip-right {
-  right: auto !important;
-  left: -9px !important;
-  transform-origin: 100% 100% !important;
-}
-.duet-tooltip.duet-tooltip-right::after {
-  right: auto !important;
-  left: 22px !important;
-  transform: none !important;
-}
-.duet-tooltip.duet-tooltip-right::before {
-  right: auto !important;
-  left: 21px !important;
-  transform: none !important;
+.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;
@@ -138,24 +123,10 @@
   width: 282px !important;
   transform-origin: 0 0 !important;
 }
-.duet-tooltip.duet-tooltip-has-label::after {
-  right: auto !important;
-  left: 1px !important;
-  transform: none !important;
-}
-.duet-tooltip.duet-tooltip-has-label::before {
-  right: auto !important;
-  left: 0 !important;
-  transform: none !important;
-}
 .duet-tooltip.duet-tooltip-active {
   visibility: visible;
   opacity: 1;
   transition-property: transform, opacity;
-  transform: scale(1.0001) translateZ(0) translateY(-8px);
-}
-.duet-tooltip.duet-tooltip-active.duet-tooltip-down {
-  transform: scale(1.0001) translateZ(0) translateY(8px);
 }
 
 .duet-tooltip-button {
@@ -283,42 +254,4 @@
 .duet-theme-turva .duet-tooltip-close:focus {
   color: rgb(23, 28, 58);
   box-shadow: 0 0 0 2px rgb(23, 28, 58);
-}
-
-@media (min-width: 48em) {
-  .duet-tooltip.duet-mq-medium {
-    right: -148px;
-    width: 320px;
-    transform-origin: 50% 100%;
-  }
-  .duet-tooltip.duet-mq-medium::after {
-    right: 50%;
-    transform: translateX(50%);
-  }
-  .duet-tooltip.duet-mq-medium::before {
-    right: 50%;
-    transform: translateX(50%);
-  }
-  .duet-tooltip.duet-mq-medium.duet-tooltip-down {
-    transform-origin: 50% 0;
-  }
-}
-
-@media (min-width: 62em) {
-  .duet-tooltip.duet-mq-large {
-    right: -148px;
-    width: 320px;
-    transform-origin: 50% 100%;
-  }
-  .duet-tooltip.duet-mq-large::after {
-    right: 50%;
-    transform: translateX(50%);
-  }
-  .duet-tooltip.duet-mq-large::before {
-    right: 50%;
-    transform: translateX(50%);
-  }
-  .duet-tooltip.duet-mq-large.duet-tooltip-down {
-    transform-origin: 50% 0;
-  }
 }

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

@@ -1,6 +1,8 @@
 /*!
  * Built with Duet Design System
  */
+import { media_query_large, media_query_medium } from "@duetds/tokens/lib/tokens.json";
+import { arrow, computePosition, flip, shift } from "@floating-ui/dom";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
@@ -10,8 +12,11 @@ export class DuetTooltip {
     /**
      * Own Properties.
      */
+    this.mql = [
+      window.matchMedia(media_query_medium.replace(/'/g, "")),
+      window.matchMedia(media_query_large.replace(/'/g, "")),
+    ];
     this.tooltipId = createID("DuetTooltip");
-    this.lastScrollTop = 0;
     /**
      * Local methods
      */
@@ -55,42 +60,37 @@ export class DuetTooltip {
     this.handleCloseClick = () => {
       this.closeTooltip(true);
     };
-    this.isElementInViewportVertically = () => {
-      if (!this.tooltipEl) {
-        return false;
+    this.updatePlacement = async () => {
+      var _a, _b;
+      let preferRight = true;
+      if (this.breakpoint === "large" && !this.mql[1].matches) {
+        preferRight = false;
       }
-      var rect = this.tooltipEl.getBoundingClientRect();
-      return (
-      // This takes the possible Nav component into account
-      rect.top >= 100 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight));
-    };
-    this.handleVerticalVisibility = () => {
-      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-      if (!this.isElementInViewportVertically()) {
-        this.openDown = scrollTop > this.lastScrollTop;
-      }
-      this.lastScrollTop = Math.max(0, scrollTop);
-    };
-    this.handleHorizontalVisibility = () => {
-      var rect = this.tooltipEl.getBoundingClientRect();
-      const isLeftSideVisible = rect.left >= 0;
-      const isRightSideVisible = rect.right < (window.innerWidth || document.documentElement.clientWidth);
-      if (!isLeftSideVisible || (this.direction !== "right" && this.openRight)) {
-        this.openRight = true;
+      else if (this.breakpoint === "medium" && !this.mql[0].matches) {
+        preferRight = false;
       }
-      else {
-        this.openRight = this.direction === "right";
+      let placement = preferRight ? "top-start" : "top-end";
+      if (this.direction === "left") {
+        placement = "top-end";
       }
-      if (!isRightSideVisible || (this.direction !== "left" && this.openLeft)) {
-        this.openLeft = true;
-      }
-      else {
-        this.openLeft = this.direction === "left";
+      else if (this.direction === "right") {
+        placement = "top-start";
       }
+      const position = await computePosition(this.buttonEl, this.tooltipEl, {
+        placement,
+        middleware: [flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })],
+      });
+      this.tooltipY = position.y;
+      this.tooltipX = position.x;
+      this.placement = position.placement;
+      this.arrowY = (_a = position.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.y;
+      this.arrowX = (_b = position.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x;
     };
-    this.openDown = false;
-    this.openLeft = false;
-    this.openRight = false;
+    this.placement = "bottom";
+    this.tooltipY = undefined;
+    this.tooltipX = undefined;
+    this.arrowX = undefined;
+    this.arrowY = undefined;
     this.theme = "";
     this.language = getLanguage();
     this.accessibleLabelDefault = {
@@ -128,7 +128,7 @@ export class DuetTooltip {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
-    this.handleHorizontalVisibility();
+    this.updatePlacement();
   }
   componentDidUpdate() {
     switch (this.focusTarget) {
@@ -154,15 +154,14 @@ export class DuetTooltip {
     clearTimeout(this.scrollTimer);
     this.scrollTimer = setTimeout(() => {
       if (this.active) {
-        this.handleHorizontalVisibility();
-        this.handleVerticalVisibility();
+        this.updatePlacement();
       }
     }, 100);
   }
   handleWindowResize() {
     clearTimeout(this.resizeTimer);
     this.resizeTimer = setTimeout(() => {
-      this.handleHorizontalVisibility();
+      this.updatePlacement();
     }, 100);
   }
   handleDocumentClick(e) {
@@ -177,11 +176,10 @@ export class DuetTooltip {
   }
   async handleActiveChange(newActiveValue) {
     if (newActiveValue) {
-      this.handleHorizontalVisibility();
-      this.openDown = !this.isElementInViewportVertically();
+      this.updatePlacement();
     }
     else {
-      setTimeout(() => (this.openDown = false), 300);
+      setTimeout(() => this.updatePlacement(), 300);
     }
   }
   /**
@@ -195,23 +193,27 @@ export class DuetTooltip {
       // top of other tooltips and the header.
       zIndex: this.active ? "201" : "",
     };
+    const positionStyles = {
+      top: `${this.tooltipY}px`,
+      left: `${this.tooltipX}px`,
+      display: "block",
+    };
+    const arrowStyles = {
+      top: this.arrowY ? `${this.arrowY}px` : undefined,
+      left: this.arrowX ? `${this.arrowX}px` : undefined,
+    };
     return (h(Host, { style: tooltipStyles }, h("button", { ref: element => (this.buttonEl = element), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", onClick: this.toggleOpen, type: "button", class: {
         "duet-tooltip-button": true,
         "duet-tooltip-button-has-label": !!this.label,
         "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), class: {
+      : this.accessibleLabel))), h("div", { ref: element => (this.tooltipEl = element), style: positionStyles, class: {
         "duet-tooltip": true,
-        "duet-mq-large": this.breakpoint === "large",
-        "duet-mq-medium": this.breakpoint === "medium",
         "duet-theme-turva": this.theme === "turva",
-        "duet-tooltip-down": this.openDown,
         "duet-tooltip-has-label": !!this.label,
-        "duet-tooltip-left": this.openLeft,
-        "duet-tooltip-right": this.openRight,
         "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("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)))));
+      }, 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)))));
   }
   static get is() { return "duet-tooltip"; }
   static get encapsulation() { return "shadow"; }
@@ -515,9 +517,11 @@ export class DuetTooltip {
   }
   static get states() {
     return {
-      "openDown": {},
-      "openLeft": {},
-      "openRight": {}
+      "placement": {},
+      "tooltipY": {},
+      "tooltipX": {},
+      "arrowX": {},
+      "arrowY": {}
     };
   }
   static get elementRef() { return "element"; }

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

@@ -499,7 +499,7 @@ export class DuetUpload {
         inProgress: "Lähetetään {filesUploaded} lähetettävästä {filesTotal} tiedostosta",
         inProgressWithErrors: "Lähetetään {filesInProgress} tiedostoa, lähetetty {filesUploaded} lähetettävästä {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheitä",
         done: "Kaikki {filesTotal} tiedostoa lähetetty onnistuneesti",
-        doneWithErrors: "Lähetys valmis, {filesUploaded} tiedostoa on lähetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
+        doneWithErrors: "Lataus valmis, {filesUploaded} tiedostoa ladattu onnistuneesti, {filesWithErrors} tiedostossa oli virheitä",
         files: "tiedostot",
         file: "tiedosto",
       },
@@ -1078,13 +1078,13 @@ export class DuetUpload {
         "docs": {
           "tags": [{
               "name": "default",
-              "text": "{\nfi: {\ninProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\ninProgressWithErrors:\n\"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\ndone: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\ndoneWithErrors:\n\"L\u00E4hetys valmis, {filesUploaded} tiedostoa on l\u00E4hetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\nfiles: \"tiedostot\",\nfile: \"tiedosto\",\n},\nsv: {\ninProgress: \"Adding {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\ndone: \"Alla {filesTotal} har lagts till\",\ndoneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\nfiles: \"filer\",\nfile: \"fil\",\n},\nen: {\ninProgress: \"Adding {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\ndone: \"All {filesTotal} added successfully\",\ndoneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\nfiles: \"tiedostoa\",\nfile: \"tiedosto\",\n},\n}"
+              "text": "{\nfi: {\ninProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\ninProgressWithErrors:\n\"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\ndone: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\ndoneWithErrors:\n\"Lataus valmis, {filesUploaded} tiedostoa ladattu onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\nfiles: \"tiedostot\",\nfile: \"tiedosto\",\n},\nsv: {\ninProgress: \"Adding {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\ndone: \"Alla {filesTotal} har lagts till\",\ndoneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\nfiles: \"filer\",\nfile: \"fil\",\n},\nen: {\ninProgress: \"Adding {filesUploaded} of {filesTotal}\",\ninProgressWithErrors:\n\"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\ndone: \"All {filesTotal} added successfully\",\ndoneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\nfiles: \"tiedostoa\",\nfile: \"tiedosto\",\n},\n}"
             }],
           "text": "Property to change the aria upload progress text read aloud by screenreaders"
         },
         "attribute": "status-label-default",
         "reflect": false,
-        "defaultValue": "{\n    fi: {\n      inProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\n      inProgressWithErrors:\n        \"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\n      done: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\n      doneWithErrors:\n        \"L\u00E4hetys valmis, {filesUploaded} tiedostoa on l\u00E4hetetty onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\n      files: \"tiedostot\",\n      file: \"tiedosto\",\n    },\n    sv: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\n      done: \"Alla {filesTotal} har lagts till\",\n      doneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\n      files: \"filer\",\n      file: \"fil\",\n    },\n    en: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\n      done: \"All {filesTotal} added successfully\",\n      doneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\n      files: \"File\",\n      file: \"file\",\n    },\n  }"
+        "defaultValue": "{\n    fi: {\n      inProgress: \"L\u00E4hetet\u00E4\u00E4n {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta\",\n      inProgressWithErrors:\n        \"L\u00E4hetet\u00E4\u00E4n {filesInProgress} tiedostoa, l\u00E4hetetty {filesUploaded} l\u00E4hetett\u00E4v\u00E4st\u00E4 {filesTotal} tiedostosta, {filesWithErrors} tiedostossa on virheit\u00E4\",\n      done: \"Kaikki {filesTotal} tiedostoa l\u00E4hetetty onnistuneesti\",\n      doneWithErrors:\n        \"Lataus valmis, {filesUploaded} tiedostoa ladattu onnistuneesti, {filesWithErrors} tiedostossa oli virheit\u00E4\",\n      files: \"tiedostot\",\n      file: \"tiedosto\",\n    },\n    sv: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Laddar upp {filesInProgress}, {filesUploaded} uppladdad av {filesTotal}, {filesWithErrors} misslyckades\",\n      done: \"Alla {filesTotal} har lagts till\",\n      doneWithErrors: \"Handling slutf\u00F6rd, {filesUploaded} har lagts till, {filesWithErrors} misslyckades\",\n      files: \"filer\",\n      file: \"fil\",\n    },\n    en: {\n      inProgress: \"Adding {filesUploaded} of {filesTotal}\",\n      inProgressWithErrors:\n        \"Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed\",\n      done: \"All {filesTotal} added successfully\",\n      doneWithErrors: \"Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors\",\n      files: \"File\",\n      file: \"file\",\n    },\n  }"
       },
       "statusMessageLabel": {
         "type": "string",

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

@@ -5,13 +5,19 @@ import { h } from "@stencil/core";
 import { getLocaleString } from "../../utils/language-utils";
 import { getI18nError } from "./errorcodes.utils";
 import { formatBytes } from "./upload.helpers";
+//tiedosto latautuu
+const fileUploadingInfo = {
+  fi: "Tiedosto latautuu",
+  sv: "Filen laddas upp",
+  en: "File is uploading",
+};
 export const UploadItem = ({ data, showLinks, type, actions, errorCodes, theme, label, categoryLabel, showCategory, }) => {
   const { uid, item, size, uploaded, url, meta, progress, error } = data;
   const { name } = item;
   const getFileNameLine = () => {
     switch (type) {
       case "inprogress":
-        return (h("span", { class: "duet-upload-item-name" }, h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name), h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
+        return (h("span", { class: "duet-upload-item-name", role: "status" }, h("duet-paragraph", { class: "duet-upload-item-name", color: "gray-darker", margin: "none", weight: "semi-bold" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name), h("visually-hidden", null, h("duet-paragraph", null, getLocaleString(fileUploadingInfo))), h("duet-progress", { progress: Math.ceil(progress), "aria-hidden": true })));
       case "pending":
         return (h("span", { class: "duet-upload-item-name" }, h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), name));
       case "failure":
@@ -27,6 +33,6 @@ export const UploadItem = ({ data, showLinks, type, actions, errorCodes, theme,
   return (h("div", { class: {
       "upload-item-row": true,
     } }, showCategory && (h("div", { class: "item-categories" }, h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(categoryLabel)), Badges)), h("div", { class: { "item-name": true, "no-category": !showCategory } }, !!label && (h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(label))), getFileNameLine()), h("div", { class: "item-actions" }, actions.map(actionItem => {
-    return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} ` }));
+    return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} `, accessibleTitle: false }));
   }))));
 };

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-f9c288b5.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-369a9e6b.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-70ef0e9d.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-5119f1dc.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-f5252ae4.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-cbb67f4e.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, d as Host } from './p-a1863bda.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-efa5255b.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-f5d77e8e.js';
+import { d as defineCustomElement$2 } from './p-67365843.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-a1863bda.js';
+import { p as proxyCustomElement, H, h, F as Fragment, d as Host } from './p-efa5255b.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { a as getLocaleString } from './p-076452be.js';
-import { d as defineCustomElement$2 } from './p-f5d77e8e.js';
+import { d as defineCustomElement$2 } from './p-67365843.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-6f0966d2.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-1d207f70.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-a1863bda.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-efa5255b.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$3 } from './p-f5d77e8e.js';
-import { d as defineCustomElement$2 } from './p-5962ecc8.js';
+import { d as defineCustomElement$3 } from './p-67365843.js';
+import { d as defineCustomElement$2 } from './p-5183d2cf.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}";
 
@@ -13,6 +13,7 @@ const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.hasAuthorSlot = false;
     this.theme = "";
     this.margin = "auto";
   }
@@ -21,6 +22,7 @@ const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
   }
   /**
    * render() function
@@ -35,8 +37,9 @@ const DuetCallout$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
         "duet-callout": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-m-0": this.margin === "none",
-      } }, h("figure", { class: "container" }, h("duet-icon", { class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none" }), h("blockquote", null, h("duet-paragraph", { variation: "intro", weight: "semi-bold", margin: "none" }, h("slot", null))), h("figcaption", { class: "author" }, h("span", null, "\u2014 "), h("span", null, h("slot", { name: "author" })))))));
+      } }, h("figure", { class: "container" }, h("duet-icon", { class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), h("blockquote", null, h("duet-paragraph", { variation: "intro", weight: "semi-bold", margin: "none", theme: this.theme }, h("slot", null))), this.hasAuthorSlot && (h("figcaption", { class: "author" }, h("span", null, "\u2014 "), h("span", null, h("slot", { name: "author" }))))))));
   }
+  get element() { return this; }
   static get style() { return duetCalloutCss; }
 }, [1, "duet-callout", {
     "theme": [1025],

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