@duetds/components 10.4.0 → 10.6.0

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

@@ -66,6 +66,19 @@
   height: 20px;
   pointer-events: none;
 }
+.duet-tooltip-button.duet-tooltip-button-in-badge {
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  color: inherit;
+}
+.duet-tooltip-button.duet-tooltip-button-in-badge:focus {
+  outline: 0 !important;
+}
+.duet-tooltip-button.duet-tooltip-button-in-badge svg {
+  width: 12px;
+  height: 12px;
+}
 
 .duet-tooltip-button-has-label {
   margin-right: 0;
@@ -86,14 +99,15 @@
   white-space: normal;
 }
 
-.duet-tooltip-button.duet-theme-turva {
+.duet-theme-turva.duet-tooltip-button {
   color: rgb(230, 23, 64);
 }
-
-.duet-tooltip-button.duet-theme-turva:hover {
+.duet-theme-turva.duet-tooltip-button:hover {
   color: rgb(230, 23, 64);
 }
-
+.duet-theme-turva.duet-tooltip-button.duet-tooltip-button-in-badge {
+  color: inherit;
+}
 .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";
 }

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

@@ -13,6 +13,7 @@ export class DuetTooltipButton {
         this.label = "";
         this.theme = "";
         this.negative = false;
+        this.inBadge = false;
     }
     /**
      * Component lifecycle events.
@@ -36,13 +37,14 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        const visuallyHidden = h("duet-visually-hidden", { key: 'bf8e82beb39bca3f67c6ffcdbaf684671f551ffa' }, this.accessibleLabel);
-        return (h(Host, { key: 'c014d004ab6a355f122447e806b5c12f62aba277' }, h("button", { key: 'eda0bd6c55287d8ac393c2af3f65cbb910cd8c50', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        const visuallyHidden = h("duet-visually-hidden", { key: '0feec5f01a66092aeb84f7d046b784dc3751530b' }, this.accessibleLabel);
+        return (h(Host, { key: 'db94478bf79285a1393bb6c9f670a9e866c30bec' }, h("button", { key: 'c3799f4bd23520384035f33845c6ddf0c1675b2b', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
                 "duet-tooltip-button": true,
                 "duet-tooltip-button-has-label": !!this.label,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-button-negative": this.negative,
-            } }, h("svg", { key: 'f6d4082627cb5a653bdd3668cc899bb885d204a1', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '21df01e868e6f304a33a50d4ac2442d6f43376aa', 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", { key: 'ba4e4c5cb1bf9f5e91e5ab8746485ca140b9a597', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '0a3e24ec139b2442be22ebc85c663c891a050c08', 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, visuallyHidden)) : (visuallyHidden))));
+                "duet-tooltip-button-in-badge": this.inBadge,
+            } }, h("svg", { key: 'cd8ae6afbe8856114e6acfd5f238ccdef96bf5ec', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ee341df24b231902d95a09634d155f1f3f90bd0c', 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", { key: '5b0878e6e0b20c1bb40f14578cf8e75597b27bb1', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '85e8d046ab8d8de4eebb29c345d0a706484c3a0d', 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, visuallyHidden)) : (visuallyHidden))));
     }
     static get is() { return "duet-tooltip-button"; }
     static get encapsulation() { return "shadow"; }
@@ -180,6 +182,26 @@ export class DuetTooltipButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "inBadge": {
+                "type": "boolean",
+                "attribute": "in-badge",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -49,7 +49,7 @@
   pointer-events: none;
 }
 .duet-tooltip .arrow.bottom, .duet-tooltip .arrow.bottom-start, .duet-tooltip .arrow.bottom-end {
-  top: -20px;
+  top: -21px;
 }
 .duet-tooltip .arrow-container {
   position: relative;

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

@@ -53,14 +53,14 @@ export class DuetTooltipPopup {
         this.contentEl.focus();
     }
     render() {
-        return (h(Host, { key: '63f303082985a668ae51759122ae462ae25404e0' }, h("div", { key: 'e3da6a6995872c70fb5d690ea87cf240240a2d0d', class: {
+        return (h(Host, { key: '9deff2cfd70a65940c7ab5ccb4e0ef20f8242205' }, h("div", { key: 'f602ad4390d1a2c739dd40ae286cb4f681b7c0d3', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '428ef9ad1157017747e93d3b0f6b45e6dd4d8854', moveFocusTo: this.buttonEl }), h("div", { key: 'cf4af07ba0054be6658c5724c7552854b3471472', ref: element => (this.contentEl = element), class: {
+            } }, h(FocusGuard, { key: '636c36bd6510ea79aafc2b00cafe8554f0b13293', moveFocusTo: this.buttonEl }), h("div", { key: '0b7bc86af9aee1f48ace5549ff30a0b613c9441e', ref: element => (this.contentEl = element), class: {
                 "duet-tooltip-content-area": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, tabindex: -1, id: this.tooltipId }, h("slot", { key: '3d21605221e8f16c59a2a62790dfce1a9cd15ea5' })), h("div", { key: 'e2e7ae6376f8dd497ef19ff673f22b699f8a55e6', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '0bd6b8b42c5e1b2b6eaf89c19a5ad2a968f3e541', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '1b7be53d18b09050af7fc192f65c2e9e01ec62a8', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '91636953a64d83fc88e888dab06b1ca482f47dd4', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '487a4c4b37a1891f07f203bb5cf22f8dc999c8e5' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'cd18c3c009967eca235de7d7d5e9f7208692bb56', moveFocusTo: this.contentEl }))));
+            }, tabindex: -1, id: this.tooltipId }, h("slot", { key: 'f7d35e94bca2a7d45eb37b1dfa98bb95003e601d' })), h("div", { key: 'd34a92246923a554c6fa9997b6f5cc81033cfb93', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'd77b4f9b62211f1bc657143a42be59009b30b74f', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '0c24b8f406b74f4ffc3334b53319ca43404236c3', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '313ebabda3b0c3720434e6b620c23d65b5d9cecd', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'f494b2c6cef9b38a872153474cc5880dbc07e9e4' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'a12f546822ce65cf3c23fde365389dcdf01952e9', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { media_query_large, media_query_medium } from "@duetds/tokens/lib/tokens.json";
-import { arrow, autoUpdate, computePosition, flip, shift } from "@floating-ui/dom";
+import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
@@ -163,9 +163,13 @@ export class DuetTooltip {
                 // Not closing via this.closeTooltip() as it calls this.updatePlacement() causing an infinite loop
                 this.active = false;
             }
-            const position = await computePosition(this.buttonEl, this.popupElement, {
+            const middleware = [flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })];
+            if (this.badgeElement) {
+                middleware.unshift(offset(10));
+            }
+            const position = await computePosition(this.badgeElement || this.buttonEl, this.popupElement, {
                 placement,
-                middleware: [flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })],
+                middleware,
             });
             this.tooltipY = position.y;
             this.tooltipX = position.x;
@@ -173,6 +177,12 @@ export class DuetTooltip {
             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.badgeClick = (ev) => {
+            if (ev.composedPath().includes(this.buttonEl)) {
+                return;
+            }
+            this.buttonEl.click();
+        };
     }
     /**
      * Component lifecycle events.
@@ -216,9 +226,16 @@ export class DuetTooltip {
             cloneDefaultSlotContent(this.element, this.popupElement);
             this.firstRender = false;
         }
+        if (this.badgeElement) {
+            this.badgeElement.removeEventListener("click", this.badgeClick);
+            this.badgeElement.addEventListener("click", this.badgeClick);
+        }
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        if (this.badgeElement) {
+            this.badgeElement.removeEventListener("click", this.badgeClick);
+        }
     }
     handleDocumentClick(e) {
         if (!this.active) {
@@ -273,7 +290,7 @@ export class DuetTooltip {
         return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.buttonActive, tooltipId: this.tooltipId, label: this.label, accessibleLabel: (this.accessibleInputLabel && `${this.accessibleInputLabel}, ${this.accessibleLabel}`) ||
                 (this.accessibleAboutLabel &&
                     `${this.accessibleLabel} ${this.aboutString[this.language]} ${this.accessibleAboutLabel}`) ||
-                this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme, negative: this.negative }), h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, hidden: this.hidePopUp, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null))));
+                this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme, negative: this.negative, "in-badge": !!this.badgeElement }), h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, hidden: this.hidePopUp, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null))));
     }
     static get is() { return "duet-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -522,7 +539,7 @@ export class DuetTooltip {
                     "references": {
                         "DuetTooltipBreakpoint": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
                             "id": "src/components/duet-tooltip/duet-tooltip.tsx::DuetTooltipBreakpoint"
                         }
                     }
@@ -643,6 +660,32 @@ export class DuetTooltip {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "badgeElement": {
+                "type": "unknown",
+                "attribute": "badge-element",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLDuetBadgeElement",
+                    "resolved": "HTMLDuetBadgeElement",
+                    "references": {
+                        "HTMLDuetBadgeElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetBadgeElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "When used inside a duet-badge"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }

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

@@ -129,14 +129,14 @@ export class DuetTray {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: 'f214ce1bc33434f910d47ad3eb6c32f9def079a6', class: {
+        return (h("div", { key: 'b61dd691c3f9aa656b3561879fa32316b75d32a8', class: {
                 "duet-tray": true,
                 "duet-tray-is-active": this.active,
                 "duet-tray-is-hidden": this.hiddenState,
                 "duet-tray-is-responsive": this.responsive,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tray-is-expandable": this.hasAdditionalContent,
-            } }, h("div", { key: '4b233933831bb971fdfcbcfeb1a45a24376c9334', class: "duet-tray-default-content", role: "status" }, h("slot", { key: 'dd4e32bc8ac1287203ae396fe8c21184971ed452' })), this.hasAdditionalContent && (h(Fragment, { key: '978f4eac8618d6e6806c2b949e61555881739314' }, h("button", { key: '733c5973d36830c6c93d80e74d943f89d6cc02ea', "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { key: '84843a2d3b1481545f27f6dd15854e7382f712ea', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: 'c071fa18c128c620dd838dd8a0d6fce553bb60aa' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '85ae38a4a6b17d8acec9bbd7948eba44ed6bf28c', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '3cf4e3889f982c47287b962430c62596aad7f81c', class: "duet-tray-expandable-content" }, h("slot", { key: 'ea85e6c58ed79bc61d885f859d296ec9a6a590d3', name: "additional" })))))));
+            } }, h("div", { key: '03161a80eb3c11cd5825830827633be3b0ff13e0', class: "duet-tray-default-content", role: "status" }, h("slot", { key: 'b8f6995244f5d395cd8ee53923466dac43158c56' })), this.hasAdditionalContent && (h(Fragment, { key: 'e6698c1b607ce8531a07b0aecb5c21e43eb1675e' }, h("button", { key: 'c22d5dd724b08d03dee467e88d5a567a4ab38813', "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { key: '40ecef7b962408021a3366de1622f67274c043bd', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: 'fae082943ef437bac9e8cf627f5591376d32f135' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '90b5db0741a93877341df58d3d940ed2d5e4abcc', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: '8d4c2d660ce015567c2b1af4a1830df54e2687a5', class: "duet-tray-expandable-content" }, h("slot", { key: '3dd3fe954e0304e64b64bf7d19a3ca8d481b547f', name: "additional" })))))));
     }
     static get is() { return "duet-tray"; }
     static get encapsulation() { return "shadow"; }

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

@@ -953,10 +953,10 @@ export class DuetUpload {
             this.externalUploadButton.accessibleLabel = `${this.externalUploadButton.innerText}. ${caption}`;
         }
         // @ts-ignore
-        return (h(Host, { key: '855e27e55645747625669bf080e6f65423b9bbf0', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '89d6b1b88260ccb7ffa2f4a3130fdf74d904e048', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: '10b9cdc44bd94871f538a9299ea6252f4375a864', name: "header" }), !this.files.size && (h("duet-empty-state", { key: '924905b1aafa76175b93f12dd6e7d7ac8ac5b5e3', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: 'f744c2afdb520cd0e69a15c0a942f6ecd8e30b75', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: 'da55dafcb732e24b895185995040decfe40382c6', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: '199e78733f262f857124540bbd055e7c6cbcaf6a', invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { key: 'd6327694548a1ee39188af3935c67d0a6eaead79', name: "filefooter" }), h("slot", { key: '718e1e5d1f7041d2d596ada75a717942b74999f6', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'd15f3fd09b07de11dc1f725bc9ee344889b6445f', margin: "none", size: "small" }, h("div", { key: '1e4e1c3a29338fa3339cd2de701ba3c776c1166a', class: "upload-bottom-caption" }, caption))), h("slot", { key: '90f1e8de4c8359df2b8dded1bf5211857ce48a79', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '431fb04536068eefdf974fc34f89f56e712674c9' }, h("duet-spacer", { key: 'c98d3f3e0f06d17b1b86ab40486a663ef8c6a75e', size: "large" }), h("duet-button", { key: '1f057848bdacb5e69ef63e2bfdc81e216271f455', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
+        return (h(Host, { key: '56a66fb13e2d5b1e975502e6c02e0374b464dab1', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '402d0cd0bfc53a1fd6d981227186277cf58ef428', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: '2e9c7748bbd2e39175cb19e2d3fa2a6c5b5e0d90', name: "header" }), !this.files.size && (h("duet-empty-state", { key: 'a7c200b271571a9758bbc92c91d0c0d761a8383f', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: '5bd08aa838e2b2fe41c7cda3895dea43ad14cdc2', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: '1e874d98480606d31435b4e8c18e78b5562d5af3', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: '2093949b2d42328009e91051a6c8e2cd3c8d66cb', invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { key: '7f5376e608450c72e17e44360074667501fab26f', name: "filefooter" }), h("slot", { key: '0786ed3f222fea600dbe962f9fc8567de54fc612', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'c2a67358020739bb490e36f573fd9bf7f60cbb48', margin: "none", size: "small" }, h("div", { key: 'fdd83feb31ce19b351e40e28005c3081d69e0a6c', class: "upload-bottom-caption" }, caption))), h("slot", { key: 'bf1265497a10a890adc43104eebf251f1876cc32', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '3e1d242d5a44cac89bf099556b2323a249d615b4' }, h("duet-spacer", { key: '664591d6c28c59f626e14e691fcdc9434c37a23b', size: "large" }), h("duet-button", { key: 'b688f7277f2d77bcc7bac03bb357b6a71302b1bf', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
             this.bytesMaxReached ||
             this.filesToUploadExceedsLimit ||
-            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '8169162805d7ec3a093344e09a4bd9241c1b9c58' }, h("duet-spacer", { key: '0f6500a4ada6c4b3c73f6524bf224ee1d79f0ae6', size: "medium" }), h("duet-alert", { key: '8bbc63eb777fa98ff0f797d970d66835ac6155a5', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { key: '5fb70459ca757cc24041ce6e01414165ba6497b5', "aria-hidden": "true" }, h("input", { key: '808b15c23e12cf691f85e48e1a03106409b81565', ref: input => {
+            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '1d525d949fe3b1f16cbad102b17ccb1662b6ebda' }, h("duet-spacer", { key: '0f9192d41feeb38243181a24cd8282f88f1c8615', size: "medium" }), h("duet-alert", { key: '6ff272d122f622205262c116a25a99dc889ffa6f', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { key: '9c819c3fa17b4954699fe60bd343ff32188ae5da', "aria-hidden": "true" }, h("input", { key: 'bb9d9c02d82c35b46c9ed91a8f7340aeb6f69fb1', ref: input => {
                 this.nativeInput = input;
             }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
                 "duet-upload": true,
@@ -1256,7 +1256,7 @@ export class DuetUpload {
                     "references": {
                         "XHRInternalMiddleWare": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::XHRInternalMiddleWare"
                         }
                     }
@@ -1682,7 +1682,7 @@ export class DuetUpload {
                     "references": {
                         "StringMap": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::StringMap"
                         }
                     }
@@ -2331,7 +2331,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadTableGroupName": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadTableGroupName"
                         }
                     }
@@ -2376,7 +2376,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2397,7 +2397,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2418,7 +2418,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2439,7 +2439,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2460,7 +2460,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2481,7 +2481,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2502,7 +2502,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2523,7 +2523,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2544,7 +2544,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2565,7 +2565,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2586,7 +2586,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }

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

@@ -85,7 +85,7 @@ export class DuetUploadAriaStatus {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'dfba0ccef69bd34b3c4f8980caa95375ed480f83', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '20bd47d50fbc2097aae0656ffb367299284ff441' }, this.statusMessage)));
+        return (h(Host, { key: '5287943c19687aeea0e9b06a40e5650ff04cac6d', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '642e4b4e31d449ef0fb6ad1ec988d6e5d175f179' }, this.statusMessage)));
     }
     static get is() { return "duet-upload-aria-status"; }
     static get encapsulation() { return "shadow"; }

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

@@ -73,9 +73,9 @@ export class DuetUploadItem {
         const { uid, meta, item } = this.data;
         const Badges = meta && meta.badges ? (h("span", null, meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
         const actionDescription = `${meta && meta.badges ? meta.badges.join(",") : ""} ${item.name}`;
-        return (h("div", { key: 'af4b480a7c50c90ebf35c2744a0c6d301c026ee9', class: {
+        return (h("div", { key: 'a1edd9a770aa019bd6604d67b2cd4fc5ec1ff7a1', class: {
                 "upload-item-row": true,
-            } }, this.showCategory && (h("div", { key: '4717379f9f4b5848066dd29975972f19b46e2ca2', class: "item-categories" }, h("duet-heading", { key: '629de4c001a31d3ac9e509f4d8c4e48453b861bb', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: '0bab4d7664d6f2032dac1ea95b2b608297ab4d2a', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '65d2a44a4b4b3353766658557242ad53c357236e', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '5e5cce5f36a34f4b24c21a1055874ba9bc59493b', class: "item-actions" }, this.actions.map(actionItem => {
+            } }, this.showCategory && (h("div", { key: '2e74eca5c89a77975cba75685acbdb4f517da81c', class: "item-categories" }, h("duet-heading", { key: '90dc1251073ef07085b355c82f17f7f6aa5aff72', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: '75ab96c30689b58829224123ac875d567f882b47', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '52b7124f793247f2b4d55873c4c47f8d2682660b', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '2430a9c7e24ea14056ba78c3ddd672cbc86bae40', class: "item-actions" }, this.actions.map(actionItem => {
             return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} `, accessibleTitle: this.getActionButtonTitle(actionItem), ref: button => (this.actionButton = button) }));
         }))));
     }
@@ -152,7 +152,7 @@ export class DuetUploadItem {
                     "references": {
                         "ItemType": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload-item/duet-upload-item.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload-item/duet-upload-item.tsx",
                             "id": "src/components/duet-upload-item/duet-upload-item.tsx::ItemType"
                         }
                     }
@@ -215,7 +215,7 @@ export class DuetUploadItem {
                     "references": {
                         "UploadActionButtonTitles": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-upload-item/duet-upload-item.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-upload-item/duet-upload-item.tsx",
                             "id": "src/components/duet-upload-item/duet-upload-item.tsx::UploadActionButtonTitles"
                         }
                     }

package/lib/collection/components/duet-visually-hidden/duet-visually-hidden.js

@@ -8,7 +8,7 @@ export class DuetVisuallyHidden {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0b6d7c8ffd99088d9679558cf45fd682f17754b8', class: "duet-visually-hidden" }, h("slot", { key: 'a1fd4a31404091a50c989a4ccbe6ea9b8233fa73' })));
+        return (h(Host, { key: '4404c44b59f635d9165c960341fbdd957d8f451c', class: "duet-visually-hidden" }, h("slot", { key: 'caa2aef6f4faf8ca34300b885d2de0772e272ad3' })));
     }
     static get is() { return "duet-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/utils/keyboard-utils.js

@@ -17,6 +17,7 @@ export const isQuestionKey = (e) => e.key === "?";
 export const isEnterKey = (e) => e.key === "Enter";
 export const isKeyboardClick = (e) => isEnterKey(e) || isSpaceKey(e);
 export const isNumber = (e) => e.key >= "0" && e.key <= "9";
+export const isCharacterInsertKey = (e) => e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
 /**
  * Component instances that have subscribed to tabbing change.
  */

package/lib/collection/utils/math.utils.js

@@ -57,3 +57,4 @@ export function ConvertToEnUS(value, locale, replaceThousands = false) {
 }
 export const roundTo = (val, multiple) => Math.round(val / multiple) * multiple;
 export const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
+export const isInteger = (val) => val === Math.round(val);