@duetds/components 10.3.1 → 10.5.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: '70a82f2c22f0f4f4550e15b1e7ec8c526e3c122e' }, this.accessibleLabel);
-        return (h(Host, { key: '19556e89ed879d642f95db9e14dfe6350af14858' }, h("button", { key: '2b2fab3108b3575da91c00ad81a763d776476b28', 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: 'ded762f4e7856c8f1c4d095463a406e98f7b82f0' }, this.accessibleLabel);
+        return (h(Host, { key: '6711d2a89b2dc210baf333a0c0023e78b7d5697f' }, h("button", { key: '1d9e860f68303cbe9f78df1b29643d27d266168c', 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: 'b665bf9fc4f777eed4e4e152c394adce11fc4f4e', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2f25f9fefa3c82c6f182507c79d3a9cf904fa009', 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: '2b0bea40ebef849a5faf6958f2d6da457180eaa1', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '44744f79a997b131473388d0e02347277d04c42e', 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: 'c9891f25e887b6d7a7a4abac4df3a70e4ddf384a', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9bd8e387ee6d5a371c80a5f2804661463b044875', 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: '438bd9ee6f284ee38e3dab022b945fce9f1623ed', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '210feefcda3be6b66e077942f3e55129a2492277', 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: 'cf44855d08d69141e629987f9ba2fdccdcdc21d7' }, h("div", { key: 'bf7580b8ecdf58b6c93c3c21cbb362234cc699b4', class: {
+        return (h(Host, { key: '29d3de91254dc1a869484f580648311e15f56b30' }, h("div", { key: '662564b5f5fc5f057084ca43fbe0d5d63fa2dc9f', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '6f5a516e23035e8e0b9c2951ef4a10243b564d17', moveFocusTo: this.buttonEl }), h("div", { key: '3d1031a521b8085ee786692f678a599fe7c02512', ref: element => (this.contentEl = element), class: {
+            } }, h(FocusGuard, { key: '92e046c9658d3e58aa005493211c2e80b7f6d4e9', moveFocusTo: this.buttonEl }), h("div", { key: '13dec9440e718fa77cb153d95cc85767b363b560', 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: 'f40fff5023fe51f2413b7a2cc3fd4fcae353502e' })), h("div", { key: 'e549848c426e3056c540a3b7aa808f05416bb5b3', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '21e7fddb4ee364c03887c4238dfe3d23beb97ac3', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'fbef02a023d8b1943a812811e574c9953dce843e', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '7b4b8aaac8a97ede79cb3390f2e85159dbc0e61f', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '9fd02bc99e3fdb9791575525da12a2998d40334a' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '794b71cceb911fbcfdf27110c0d08bd5da230944', moveFocusTo: this.contentEl }))));
+            }, tabindex: -1, id: this.tooltipId }, h("slot", { key: '2b64af48cdfa6caeed19a5f2d013b46d99e4bfde' })), h("div", { key: '77032302c1bef1d1b58194dfae5cc3f4e53a2bd4', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '5cf2ad060245b552eacc2cb4baf7d23bd167fefa', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'd2c072d73e9c1830d9dda8cbdddcabb926741a58', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '3139344fdf52410ea53e3fd84fc2c464c446e696', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '45770929e752f3292cfb55a302c4bbb788ae7d52' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'b88bd4a634b78548fb910db91e2b3263cb7e5bd2', 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"; }
@@ -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: '4feb3ea8d6067ec6d82c6eaf9225fe6728bd4acc', class: {
+        return (h("div", { key: '62e6d87f9a5ff9a959bd15fea1a0b6d4f2f78018', 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: 'c51904bcc9f3d0297da08c32952be7ea690bafc8', class: "duet-tray-default-content", role: "status" }, h("slot", { key: '52e8b11bdf354f65b34fb1d6d2facbf636a01758' })), this.hasAdditionalContent && (h(Fragment, { key: '86e6560df02094fcc7b7df9146c34c47923d89eb' }, h("button", { key: '000c5472ff2f7f1a0ffe6e796817a51fcaecd856', "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: '02489a52896b40ce4916a3b6dfcdd40d36212251', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '866528d950899fe557f6023f8f9ca79e9545fd15' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: 'c3400e3dda10617ffd45395e46247ef88a2157a8', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: 'f2176a2e171dfae93254cba98d31e13855c3b0e5', class: "duet-tray-expandable-content" }, h("slot", { key: '21d7e1276815c885a9832fcdb87ffbd96fe8a03c', name: "additional" })))))));
+            } }, h("div", { key: 'f1c78227de8998333acf857905e95c6d6be25937', class: "duet-tray-default-content", role: "status" }, h("slot", { key: 'd7748f81620cd98c5a8b35a18e344302d756a0a0' })), this.hasAdditionalContent && (h(Fragment, { key: 'f87597291a46075ceda6d114fe67ffa1df52870b' }, h("button", { key: '2886b0325718e16d0c904fa327ceb3d8c318d7bf', "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: 'afe046c5fc6baf22268fe063cd0c6d2bd0e661ea', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '44c04a86d76063ef62ecd3544f25a09a1d6901dc' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: '89aa1e7d332a1d8aa649eaff0c798bfaf6349964', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: 'ad9f9814c60e70a8a19a0872d3006fcdd4d36f62', class: "duet-tray-expandable-content" }, h("slot", { key: 'd319a5002fb41dbd3f7d036c881a064a5f2dd832', 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: 'dc222a10613a05aa4d56526accf4f20d09a85524', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: 'afd3bbefc25846e30ea0a4a3dd6fef490cfce55d', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: '9927e358eb190f2023f863d4de2306390d71fc8b', name: "header" }), !this.files.size && (h("duet-empty-state", { key: '843385b600508604aeed2894ae0d13134c4726d0', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: 'c75ef6ac779000de5dee49f7793a01dcad735808', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: 'f9756746a31507f1dca930bdf7fea75ccf2c577b', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: 'b88ca83dcc669708410ac4ff2ab95c171909bcfd', 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: 'cf7410f30e64f19d7dfc05848cae516c3c4c4998', name: "filefooter" }), h("slot", { key: '3d6ae7f015427bc576b46bcbad37ad21c75c5cff', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'd9839e2f61e00879f0fe4d804b76884eb3a3c426', margin: "none", size: "small" }, h("div", { key: '0793e849c010f2611e8c30fc9a1adfd5739036ca', class: "upload-bottom-caption" }, caption))), h("slot", { key: 'aea1cf5e8be9c04cfe942a63b609304b89dbd3bf', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '5bc3f7808057aecbe5a082aa960cfd0179a5ebb8' }, h("duet-spacer", { key: 'dea860e2657fdd9d826a56ed1cbd3c29c27a6566', size: "large" }), h("duet-button", { key: 'd2e2120f450bd44190d819bcc8b7d3193a2fd7f1', 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: 'fe296e7a1f173e1f9d106725647de568270f7381', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '72451c8e8021c8efdbef350e92d5d00db671f5eb', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: '120762b8d74276d518b1a4aa5ebc9267bb821b86', name: "header" }), !this.files.size && (h("duet-empty-state", { key: '7d1685f051c1607ed5984f21ca0306cffb135f9c', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: '4341d78e97e8842976517a9427dad1fb79f15600', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: 'ebd5fcbee689a2d69689a66da5770057f959e05b', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: 'da8d067ccff2b9de4ef7036d28538c3e1a99813a', 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: '72fb36ce235d388cf811d0b1e2689e673f166aee', name: "filefooter" }), h("slot", { key: '1f0f3dc31f01636b94567622dc365a743bb9c555', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: '071ab836a62ea4c49ab66af59eebf8fd8e6ac0a1', margin: "none", size: "small" }, h("div", { key: '8cb3bbe8afe46260ee01de1ccfec1171ad7d15b3', class: "upload-bottom-caption" }, caption))), h("slot", { key: '6ccb7bba76d874455cb6c6e4cde19fb4f3118c84', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: 'fb69a17ce2cd8ab89382b3a88aaf11c3ec5111d3' }, h("duet-spacer", { key: 'd12382964296660b0138d5e7cb23119d9ba51315', size: "large" }), h("duet-button", { key: '585b1a6670caf0810ea89a1dc930b4cb7a45c09a', 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: 'fcf6947ea9fd60eb05745627ea9bcfdc0a186ae2' }, h("duet-spacer", { key: '0d8d15f15c9dcecb7749d481e29073be66c1e77f', size: "medium" }), h("duet-alert", { key: '392a1d62012973d5e0b730a58ad3d97c48db3256', 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: 'ecf1098f5d21721d322bc382ff218b2b374e907a', "aria-hidden": "true" }, h("input", { key: 'd47f7522e739d1bda7407882e7ceda5f3e416b3d', ref: input => {
+            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '2c6faea7f05f92b8156afb6125ed218230d03a9b' }, h("duet-spacer", { key: '0a03717e16ad6080343f46e9cea6235fe7c95fb3', size: "medium" }), h("duet-alert", { key: '6e455df241d9c0371a4ac45e9d7f11f9d5b2469a', 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: '0dcf57e2b593b8b4581b9516300d7fcf93a94ded', "aria-hidden": "true" }, h("input", { key: '8c8089792d4049c26b827d1b543bd9ddaaba326b', 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,

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: '2084d67e27f201170cb0915e97235481a8f42ff6', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: 'f774f8926c1f2500866e4b50781cf83a1263b0c2' }, this.statusMessage)));
+        return (h(Host, { key: '8da58752d98bfb8c52ddcd1d48112711fd2ea5c6', role: "status", "aria-live": "assertive", "aria-atomic": "true", "aria-relevant": "all" }, h("duet-visually-hidden", { key: '78ecb9ee37907bdbdb174bf58b75af88b2edfbd1' }, 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: 'a4236da565d327c0745c1d0838cb8521c9aeacd2', class: {
+        return (h("div", { key: '6ce0c4b0b64b9726755ba74c037759bfa90d0a1a', class: {
                 "upload-item-row": true,
-            } }, this.showCategory && (h("div", { key: 'ded27f92a61d2f8e793c6132eefce939935f4560', class: "item-categories" }, h("duet-heading", { key: '945bf9ec37ef6aa7abfec637e991ec9fa531e998', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: 'f1bddfee393d02f814bc46ff678ca6ecfffde402', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '40831fd68ebd159d9c1ed6fa01c1563b25842f92', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '36bb6e40d039ff13d87b6499a27db274a4ad47a9', class: "item-actions" }, this.actions.map(actionItem => {
+            } }, this.showCategory && (h("div", { key: 'a54b15975dfb0b72019838f7b77009c974b9e4bf', class: "item-categories" }, h("duet-heading", { key: '1f71cfd6a0573e176e7874fa14005afc36d7a885', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { key: '5788235ef6265f08adbc17020fccb8fa8ba5bb77', class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { key: '43235e4073c7cb9c3b81c9efd2c58c3938c5503c', class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { key: '5d69daba599aec48c4a98ca0f1543a9dbbead4b3', 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) }));
         }))));
     }

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: '2ac2536c5fb762954d328da1080105d92292c8b4', class: "duet-visually-hidden" }, h("slot", { key: '4f58c2bdca5f9d629586174be225448f22662155' })));
+        return (h(Host, { key: 'ef47dba78565c8af97e21ac63b93ca377c20f0dc', class: "duet-visually-hidden" }, h("slot", { key: '228e005804125169d172ba680bed0f6955aa13a0' })));
     }
     static get is() { return "duet-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

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);

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

@@ -96,7 +96,7 @@ export const proxyInputToSlot = (element, id, name, value, required, checked = u
         return;
     }
     input.id = id;
-    if (name !== undefined && name !== null) {
+    if (name !== undefined && name !== null && input.name !== name) {
         input.name = name;
     }
     if (required) {