@duetds/components 8.2.2 → 8.3.0

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

@@ -2,9 +2,48 @@
  * Built with Duet Design System
  */
 import { Build, h } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
+import { getShadowByName } from "../../utils/token-utils";
 export class DuetTab {
     constructor() {
+        this.setupContentElement = () => {
+            if (this.contentId) {
+                this.tabpanelElement = document.getElementById(this.contentId);
+                if (this.tabpanelElement) {
+                    this.tabpanelElement.setAttribute("role", "tabpanel");
+                    this.tabpanelElement.setAttribute("tabindex", "-1");
+                    this.tabpanelElement.removeEventListener("focus", this.tabpanelElementFocusListener);
+                    this.tabpanelElement.removeEventListener("blur", this.tabpanelElementBlurListener);
+                    this.tabpanelElement.addEventListener("focus", this.tabpanelElementFocusListener);
+                    this.tabpanelElement.addEventListener("blur", this.tabpanelElementBlurListener);
+                    if (this.accessibleDescription) {
+                        this.tabpanelElement.setAttribute("aria-description", this.accessibleDescription);
+                    }
+                    if (this.accessibleLabelledBy) {
+                        this.tabpanelElement.setAttribute("aria-labelledby", this.accessibleLabelledBy);
+                    }
+                    if (this.selected) {
+                        this.tabpanelElement.toggleAttribute("hidden", false);
+                    }
+                    else {
+                        this.tabpanelElement.toggleAttribute("hidden", true);
+                    }
+                }
+            }
+        };
+        this.tabpanelElementFocusListener = () => {
+            if (this.element.classList.contains("user-is-tabbing")) {
+                this.tabpanelElement.style.outline = "0";
+                this.tabpanelElement.style.boxShadow = getShadowByName(this.theme === "turva" ? "focus-turva" : "focus");
+            }
+        };
+        this.tabpanelElementBlurListener = () => {
+            this.tabpanelElement.style.outline = null;
+            this.tabpanelElement.style.boxShadow = null;
+        };
+        this.theme = "";
         this.label = undefined;
         this.caption = undefined;
         this.selected = undefined;
@@ -14,15 +53,44 @@ export class DuetTab {
             ? getLocaleString(this.accessibleDescriptionDefault)
             : null;
         this.accessibleLabelledBy = undefined;
+        this.contentId = undefined;
+    }
+    componentWillLoad() {
+        inheritGlobalTheme(this);
     }
     /**
      * Component lifecycle events.
      */
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
+        subscribeTabbingChange(this);
+        this.setupContentElement();
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
+        if (this.tabpanelElement) {
+            this.tabpanelElement.removeAttribute("role");
+            this.tabpanelElement.removeAttribute("tabindex");
+            this.tabpanelElement.removeAttribute("aria-description");
+            this.tabpanelElement.removeAttribute("aria-labelledby");
+            this.tabpanelElement.removeAttribute("hidden");
+            this.tabpanelElement.removeEventListener("focus", this.tabpanelElementFocusListener.bind(this));
+            this.tabpanelElement.removeEventListener("blur", this.tabpanelElementBlurListener.bind(this));
+            this.tabpanelElement = undefined;
+        }
+    }
+    setupSelected(newValue, oldValue) {
+        if (!!newValue === !!oldValue) {
+            return;
+        }
+        this.setupContentElement();
+    }
+    /**
+     * Sets focus on the tab panel.
+     */
+    async setFocus(options) {
+        this.tabpanelElement.focus(options);
     }
     /**
      * render() function
@@ -32,7 +100,16 @@ export class DuetTab {
         if (Build.isServer) {
             return;
         }
-        return (h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy }, h("slot", null)));
+        return (h("div", { ref: element => {
+                if (!this.contentId) {
+                    this.tabpanelElement = element;
+                }
+            }, role: "tabpanel", class: {
+                "duet-theme-turva": this.theme === "turva",
+                "duet-tab": true,
+                selected: this.selected,
+                "has-content-id": !!this.contentId,
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", null)));
     }
     static get is() { return "duet-tab"; }
     static get encapsulation() { return "scoped"; }
@@ -48,6 +125,30 @@ export class DuetTab {
     }
     static get properties() {
         return {
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -164,8 +265,61 @@ export class DuetTab {
                 "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
+            },
+            "contentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML id of element that is to be used when opening this tab.\nThis enables decoupling the content from the tab buttons."
+                },
+                "attribute": "content-id",
+                "reflect": false,
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the tab panel.",
+                    "tags": []
+                }
             }
         };
     }
     static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "setupSelected"
+            }];
+    }
 }

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

@@ -4,7 +4,7 @@
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
+import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isShiftTabKey, isTabKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 /**
  * @part ${identifier}-button - piercing selector for styling tab buttons
@@ -24,6 +24,10 @@ export class DuetTabGroup {
             else if (isArrowRightKey(ev) || isArrowDownKey(ev)) {
                 button = ev.target.nextElementSibling;
             }
+            if (isTabKey(ev) && !isShiftTabKey(ev)) {
+                ev.preventDefault();
+                this.element.querySelector("duet-tab[selected]").setFocus();
+            }
             if (button) {
                 ev.preventDefault();
                 button.click();
@@ -56,7 +60,7 @@ export class DuetTabGroup {
         };
         this.renderTab = () => {
             const renderedTabs = this.tabs.map((element, index) => {
-                return (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: index === 0 ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
+                return (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: element.selected ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
                         "duet-p-0": this.padding === "none",
                         "duet-tab-button": true,
                         "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
@@ -214,7 +218,7 @@ export class DuetTabGroup {
                 "duet-tab-group-collapses": this.collapses,
             }, ref: el => {
                 this.tabsContainer = el;
-            } }, this.renderTab()), h("div", { role: "tabpanel", tabindex: this.setTabIndex ? "0" : null, class: {
+            } }, this.renderTab()), h("div", { class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
@@ -321,7 +325,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabVariation"
                         }
                     }
@@ -509,8 +513,11 @@ export class DuetTabGroup {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Controls if tab content should have tab index and be accessible by pressing tab"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "in favour of Duet Tab component owning the tab indexing\nControls if tab container should have tab index and be accessible by pressing tab"
+                        }],
+                    "text": ""
                 },
                 "attribute": "set-tab-index",
                 "reflect": false,
@@ -562,7 +569,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     }
@@ -583,7 +590,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     }
@@ -604,7 +611,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     }
@@ -628,7 +635,7 @@ export class DuetTabGroup {
                         },
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     },

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

@@ -806,7 +806,7 @@ export class DuetTextarea {
                     "references": {
                         "DuetTextareaEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
                             "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
                         }
                     }
@@ -827,7 +827,7 @@ export class DuetTextarea {
                     "references": {
                         "DuetTextareaEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
                             "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
                         }
                     }
@@ -848,7 +848,7 @@ export class DuetTextarea {
                     "references": {
                         "DuetTextareaEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
                             "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
                         }
                     }
@@ -869,7 +869,7 @@ export class DuetTextarea {
                     "references": {
                         "DuetTextareaEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx",
                             "id": "src/components/duet-textarea/duet-textarea.tsx::DuetTextareaEvent"
                         }
                     }

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

@@ -486,7 +486,7 @@ export class DuetToggle {
                     "references": {
                         "DuetToggleChangeEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-toggle/duet-toggle.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-toggle/duet-toggle.tsx",
                             "id": "src/components/duet-toggle/duet-toggle.tsx::DuetToggleChangeEvent"
                         }
                     }

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.js

@@ -58,7 +58,7 @@ export class DuetToolbarDropdown {
             } }, h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
             } }, h("slot", null)))));

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

@@ -14,30 +14,35 @@ async function openWithClick(page) {
     const popup = await getPopup(page);
     await trigger.click();
     await popup.waitForVisible();
+    await page.waitForChanges();
 }
 async function closeWithClick(page) {
     const trigger = await getTrigger(page);
     const popup = await getPopup(page);
     await trigger.click();
     await popup.waitForNotVisible();
+    await page.waitForChanges();
 }
 async function clickOutside(page) {
     const popup = await getPopup(page);
     await page.mouse.click(0, 0);
     await page.waitForChanges();
     await popup.waitForNotVisible();
+    await page.waitForChanges();
 }
 async function clickCloseButton(page) {
     const popup = await getPopup(page);
     const closeButton = await page.find(`duet-tooltip-popup >>> .duet-tooltip-close`);
     await closeButton.click();
     await popup.waitForNotVisible();
+    await page.waitForChanges();
 }
 async function closeWithEsc(page) {
     const popup = await getPopup(page);
     await page.keyboard.press("Escape");
     await page.waitForChanges();
     await popup.waitForNotVisible();
+    await page.waitForChanges();
 }
 describe("duet-tooltip", () => {
     it("should render a tooltip", async () => {

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

@@ -28,13 +28,21 @@ export class DuetTooltip {
          */
         this.openTooltip = () => {
             this.active = true;
-            this.focusTarget = "tooltip";
+            setTimeout(() => {
+                this.contentEl.focus({ preventScroll: true });
+                this.buttonActive = true;
+            }, 200);
         };
         this.closeTooltip = (moveFocusToButton = false) => {
             this.active = false;
             if (moveFocusToButton) {
-                this.focusTarget = "trigger";
+                setTimeout(() => {
+                    this.buttonEl.setFocus({ preventScroll: true });
+                }, 200);
             }
+            setTimeout(() => {
+                this.buttonActive = false;
+            }, 201);
             setTimeout(() => {
                 this.updatePlacement();
             }, 200);
@@ -73,6 +81,7 @@ export class DuetTooltip {
         this.tooltipX = undefined;
         this.arrowX = undefined;
         this.arrowY = undefined;
+        this.buttonActive = undefined;
         this.theme = "";
         this.language = getLanguage();
         this.accessibleLabelDefault = {
@@ -106,6 +115,7 @@ export class DuetTooltip {
         if (Build.isServer) {
             return;
         }
+        this.buttonActive = this.active;
         this.arrowEl = await this.popupElement.getArrowElement();
         this.contentEl = await this.popupElement.getContentElement();
         this.updatePlacement();
@@ -115,19 +125,6 @@ export class DuetTooltip {
         this.intersectionObserver = new IntersectionObserver(this.updatePlacement, { root: document.body });
         this.intersectionObserver.observe(this.element);
     }
-    componentDidUpdate() {
-        switch (this.focusTarget) {
-            case "tooltip":
-                // delay focus so button is correctly announced as "expanded"
-                setTimeout(() => this.contentEl.focus({ preventScroll: true }));
-                break;
-            case "trigger":
-                // delay focus so button is correctly announced as "collapsed"
-                setTimeout(() => this.buttonEl.setFocus({ preventScroll: true }));
-                break;
-        }
-        this.focusTarget = null;
-    }
     connectedCallback() {
         connectLanguageChangeObserver(this, [
             { prop: "accessibleLabel", defaults: "accessibleLabelDefault" },
@@ -210,7 +207,7 @@ export class DuetTooltip {
             top: this.arrowY ? `${this.arrowY}px` : undefined,
             left: this.arrowX ? `${this.arrowX}px` : undefined,
         };
-        return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.active, tooltipId: this.tooltipId, label: this.label, accessibleLabel: (this.accessibleInputLabel && `${this.accessibleInputLabel}, ${this.accessibleLabel}`) ||
+        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 }), h("div", { style: popupContainerStyles }, h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null)))));
@@ -443,7 +440,7 @@ export class DuetTooltip {
                     "references": {
                         "DuetTooltipBreakpoint": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tooltip/duet-tooltip.tsx",
                             "id": "src/components/duet-tooltip/duet-tooltip.tsx::DuetTooltipBreakpoint"
                         }
                     }
@@ -544,7 +541,8 @@ export class DuetTooltip {
             "tooltipY": {},
             "tooltipX": {},
             "arrowX": {},
-            "arrowY": {}
+            "arrowY": {},
+            "buttonActive": {}
         };
     }
     static get elementRef() { return "element"; }

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

@@ -991,7 +991,7 @@ export class DuetUpload {
                     "references": {
                         "XHRInternalMiddleWare": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::XHRInternalMiddleWare"
                         }
                     }
@@ -1377,7 +1377,7 @@ export class DuetUpload {
                     "references": {
                         "StringMap": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::StringMap"
                         }
                     }
@@ -1923,7 +1923,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadTableGroupName": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadTableGroupName"
                         }
                     }
@@ -1966,7 +1966,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -1987,7 +1987,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2008,7 +2008,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2029,7 +2029,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2050,7 +2050,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2071,7 +2071,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2092,7 +2092,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2113,7 +2113,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2134,7 +2134,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2155,7 +2155,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }
@@ -2176,7 +2176,7 @@ export class DuetUpload {
                     "references": {
                         "DuetUploadEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload/duet-upload.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-upload/duet-upload.tsx",
                             "id": "src/components/duet-upload/duet-upload.tsx::DuetUploadEvent"
                         }
                     }

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

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

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

@@ -7,6 +7,7 @@ export const isArrowRightKey = (e) => e.key === "ArrowRight" || e.key === "Right
 export const isArrowDownKey = (e) => e.key === "ArrowDown" || e.key === "Down";
 export const isArrowKey = (e) => isArrowDownKey(e) || isArrowRightKey(e) || isArrowUpKey(e) || isArrowLeftKey(e);
 export const isEscapeKey = (e) => e.key === "Escape" || e.key === "Esc";
+export const isShiftTabKey = (e) => e.shiftKey && e.key === "Tab";
 export const isTabKey = (e) => e.key === "Tab";
 export const isBackspaceKey = (e) => e.key === "Backspace";
 export const isSpaceKey = (e) => e.key === " " || e.key === "Spacebar";

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

@@ -103,6 +103,9 @@ export function getFontSizeByName(name) {
 export function getFontWeightByName(name) {
     return getTokenByName("fontWeight", name);
 }
+export function getShadowByName(name) {
+    return getTokenByName("shadow", name);
+}
 export function rgbaColorFromRgb(color, opacity) {
     if (!color || (opacity !== 0 && !opacity)) {
         return undefined;