@duetds/components 8.4.3 → 8.4.5

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

@@ -3,12 +3,13 @@
  */
 import chevronIcon from "@duetds/icons/lib/assets/action-arrow-right";
 import downloadIcon from "@duetds/icons/lib/assets/action-download-small";
+import newWindowIconLarge from "@duetds/icons/lib/assets/action-new-window";
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Build, Fragment, h, Host } from "@stencil/core";
 import { DuetStringsDownloadLinkDefaults, DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { breakpointToToken } from "../../utils/token-utils";
+import { breakpointToToken, getColorByName } from "../../utils/token-utils";
 /**
  * @part duet-link - piercing selector for styling the link
  * @part duet-link-content - piercing selector for styling the link content wrapper
@@ -31,9 +32,11 @@ export class DuetLink {
         this.tabToLink = false;
         this.icon = undefined;
         this.iconColor = "currentColor";
+        this.iconBackground = null;
         this.iconResponsive = false;
         this.padding = "auto";
         this.isSmallScreen = false;
+        this.isMediumScreen = false;
     }
     /**
      * Component lifecycle events.
@@ -42,6 +45,10 @@ export class DuetLink {
         inheritGlobalTheme(this);
         this.initMediaQuery();
         this.resolvedDownload = this.resolveDownload();
+        // button variation renders a button element when no url is provided
+        if (this.variation === "button" && this.url === "#") {
+            this.url = undefined;
+        }
     }
     connectedCallback() {
         connectLanguageChangeObserver(this, {
@@ -65,15 +72,18 @@ export class DuetLink {
             return;
         }
         this.screenTestBound = this.screenTest.bind(this);
-        this.mediaQuery = window.matchMedia(breakpointToToken["xx-small"]);
-        this.isSmallScreen = this.mediaQuery.matches;
-        this.mediaQuery.addEventListener("change", this.screenTestBound);
+        this.mediaQuerySmall = window.matchMedia(breakpointToToken["xx-small"]);
+        this.mediaQueryMedium = window.matchMedia(breakpointToToken["medium"]);
+        this.isSmallScreen = this.mediaQuerySmall.matches;
+        this.mediaQuerySmall.addEventListener("change", this.screenTestBound);
+        this.mediaQueryMedium.addEventListener("change", this.screenTestBound);
     }
     destroyMediaQuery() {
-        if (Build.isServer || !this.mediaQuery) {
+        if (Build.isServer) {
             return;
         }
-        this.mediaQuery.removeEventListener("change", this.screenTestBound);
+        this.mediaQuerySmall.removeEventListener("change", this.screenTestBound);
+        this.mediaQueryMedium.removeEventListener("change", this.screenTestBound);
     }
     screenTest(event) {
         this.isSmallScreen = event.matches;
@@ -96,32 +106,50 @@ export class DuetLink {
         }
         return this.download;
     }
-    renderContent() {
-        return (h(Fragment, null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), Build.isBrowser && (this.resolvedDownload || this.external) && (h(Fragment, null, h("span", { class: "duet-link-icon-tail" }, "\u00A0", h("duet-icon", { icon: this.resolvedDownload ? downloadIcon.svg : newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
+    renderDefaultContent() {
+        // Notice that the external icon needs to be placed right after the last word of the link.
+        // This is why we use &nbps; to keep everything on the same line.
+        return (h(Fragment, null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), Build.isBrowser && (this.resolvedDownload || this.external) && this.variation === "default" && (h(Fragment, null, h("span", { class: "duet-link-icon-tail" }, "\u00A0", h("duet-icon", { icon: this.resolvedDownload ? downloadIcon.svg : newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
     }
-    renderGrid() {
-        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: this.iconResponsive ? (this.isSmallScreen ? "medium" : "large") : "x-small", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+    renderBlockContent() {
+        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: this.iconResponsive ? (this.isSmallScreen ? "medium" : "large") : "x-small", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+    }
+    renderButtonContent() {
+        const iconWrapStyle = {
+            "background-color": getColorByName(this.iconBackground, this.theme),
+        };
+        return (h(Fragment, null, h("span", { class: "icon-wrap", style: iconWrapStyle }, h("duet-icon", { size: this.isMediumScreen ? "small" : "medium", name: this.icon, margin: "none", color: this.iconColor })), h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" })));
+    }
+    renderContent() {
+        switch (this.variation) {
+            case "default":
+                return this.renderDefaultContent();
+            case "block":
+                return this.renderBlockContent();
+            case "button":
+                return this.renderButtonContent();
+        }
     }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        // Notice that the external icon needs to be places right after the last word of the link.
-        // This is why we use &nbps; to keep everything on the same line.
+        const Tag = this.variation === "button" && !this.url ? "button" : "a";
         return (h(Host, { class: {
-                "duet-link-block": this.variation === "block",
-            } }, h("a", { href: this.url, class: {
+                [`duet-link-${this.variation}`]: true,
+            } }, h(Tag, { href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
                 "duet-link-has-icon": !!this.icon,
+                "duet-link-has-icon-background": !!this.iconBackground,
                 "duet-tab-to-link": this.tabToLink,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-p-0": this.padding === "none",
                 [this.padding]: true,
                 [this.variation]: true,
-            }, target: this.download ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.getAccessibleLabel(), id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.variation === "block" ? this.renderGrid() : this.renderContent())));
+            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.getAccessibleLabel(), id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
     }
     static get is() { return "duet-link"; }
     static get encapsulation() { return "shadow"; }
@@ -143,7 +171,7 @@ export class DuetLink {
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLinkVariation",
-                    "resolved": "\"block\" | \"default\"",
+                    "resolved": "\"block\" | \"button\" | \"default\"",
                     "references": {
                         "DuetLinkVariation": {
                             "location": "import",
@@ -348,7 +376,7 @@ export class DuetLink {
             },
             "url": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -436,7 +464,7 @@ export class DuetLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon to display on the left side of the ink text (only with \"block\" variation)"
+                    "text": "Icon to display on the left side of the link text (only with \"block\" and \"button\" variations)"
                 },
                 "attribute": "icon",
                 "reflect": false
@@ -459,12 +487,36 @@ export class DuetLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Color of the icon to display (only with \"block\" variation)"
+                    "text": "Color of the icon to display (only with \"block\" and \"button\" variations)"
                 },
                 "attribute": "icon-color",
                 "reflect": false,
                 "defaultValue": "\"currentColor\""
             },
+            "iconBackground": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the icon to display (only with \"button\" variation)"
+                },
+                "attribute": "icon-background",
+                "reflect": false,
+                "defaultValue": "null"
+            },
             "iconResponsive": {
                 "type": "boolean",
                 "mutable": false,
@@ -511,7 +563,8 @@ export class DuetLink {
     }
     static get states() {
         return {
-            "isSmallScreen": {}
+            "isSmallScreen": {},
+            "isMediumScreen": {}
         };
     }
     static get methods() {

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

@@ -22,7 +22,7 @@
   appearance: none;
 }
 
-.duet-modal-overlay {
+.duet-modal-container {
   position: fixed;
   top: 0;
   right: 0;
@@ -32,24 +32,20 @@
   max-height: 100vh;
   overflow-y: auto;
   visibility: hidden;
-  background: rgba(0, 41, 77, 0.3);
   opacity: 0;
   transition: 300ms ease;
   transition-delay: 200ms;
 }
-.duet-modal-overlay.duet-theme-turva {
-  background: rgba(23, 28, 58, 0.3);
-}
-.duet-modal-overlay.duet-modal-active {
+.duet-modal-container.duet-modal-active {
   visibility: visible;
   opacity: 1;
   transition: 300ms ease;
   transition-delay: 0s;
 }
-.duet-modal-overlay.duet-disable-transitions {
+.duet-modal-container.duet-disable-transitions {
   transition: none;
 }
-.duet-modal-overlay.duet-modal-slide-up {
+.duet-modal-container.duet-modal-slide-up {
   overflow: hidden;
 }
 

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

@@ -16,7 +16,7 @@ describe("duet-modal", () => {
     });
     it("should provide a property that switches the theme", async () => {
         const page = await createPage(`<duet-modal theme="turva"></duet-modal>`);
-        const element = await page.find("duet-modal >>> .duet-modal-overlay");
+        const element = await page.find("duet-modal >>> .duet-modal-container");
         expect(element).toHaveClass("duet-theme-turva");
     });
     it("should provide a property that changes the size", async () => {
@@ -56,7 +56,7 @@ describe("duet-modal", () => {
     });
     it("should provide a property that makes the modal active", async () => {
         const page = await createPage(`<duet-modal active></duet-modal>`);
-        const element = await page.find("duet-modal >>> .duet-modal-overlay");
+        const element = await page.find("duet-modal >>> .duet-modal-container");
         expect(element).toHaveClass("duet-modal-active");
     });
     it("traps focus", async () => {

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

@@ -183,12 +183,12 @@ export class DuetModal {
             closeColor = "secondary-turva";
         }
         return (h("div", { ref: modal => (this.modalEl = modal), "aria-label": this.accessibleLabel, "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
-                "duet-modal-overlay": true,
+                "duet-modal-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-modal-active": this.open,
                 "duet-modal-slide-up": this.variation === "slide-up",
                 "duet-modal-has-sticky-header": this.hasStickyHeader,
-            } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
+            } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("duet-overlay", { "z-index": "-1", visible: this.open }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
                 "duet-modal-inner": true,
                 [this.size]: true,
                 "duet-modal-slide-up": this.variation === "slide-up",
@@ -210,7 +210,7 @@ export class DuetModal {
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), h("span", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
+            } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), h("div", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,97 @@
+.duet-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  visibility: visible;
+  background: rgb(0, 41, 77);
+  opacity: 0.3;
+}
+.duet-overlay.duet-theme-turva {
+  background: rgb(23, 28, 58);
+}
+.duet-overlay.keep-stacking-context {
+  position: absolute;
+  top: unset;
+  left: unset;
+  z-index: unset !important;
+}
+.duet-overlay.modal-overlay {
+  z-index: -1;
+}
+.duet-overlay.hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+.duet-overlay.display-x-small {
+  display: none;
+}
+@media (max-width: 35.9375em) {
+  .duet-overlay.display-x-small {
+    display: block;
+  }
+}
+.duet-overlay.display-x-small.not {
+  display: block;
+}
+@media (max-width: 35.9375em) {
+  .duet-overlay.display-x-small.not {
+    display: none;
+  }
+}
+.duet-overlay.display-small {
+  display: none;
+}
+@media (min-width: 36em) {
+  .duet-overlay.display-small {
+    display: block;
+  }
+}
+.duet-overlay.display-small.not {
+  display: block;
+}
+@media (min-width: 36em) {
+  .duet-overlay.display-small.not {
+    display: none;
+  }
+}
+.duet-overlay.display-medium {
+  display: none;
+}
+@media (min-width: 48em) {
+  .duet-overlay.display-medium {
+    display: block;
+  }
+}
+.duet-overlay.display-medium.not {
+  display: block;
+}
+@media (min-width: 48em) {
+  .duet-overlay.display-medium.not {
+    display: none;
+  }
+}
+.duet-overlay.display-large {
+  display: none;
+}
+@media (min-width: 62em) {
+  .duet-overlay.display-large {
+    display: block;
+  }
+}
+.duet-overlay.display-large.not {
+  display: block;
+}
+@media (min-width: 62em) {
+  .duet-overlay.display-large.not {
+    display: none;
+  }
+}
+.duet-overlay.transition-slowly {
+  transition: 600ms ease;
+}
+.duet-overlay.transition-quickly {
+  transition: 300ms ease;
+}

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

@@ -0,0 +1,204 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+/**
+ * @internal
+ * This component is for internal use.
+ */
+export class DuetOverlay {
+    constructor() {
+        this.getDisplayBreakpoint = () => {
+            if (this.displayDevice.startsWith("not")) {
+                return this.displayDevice.substring(this.displayDevice.indexOf("-") + 1);
+            }
+            return this.displayDevice;
+        };
+        this.visible = true;
+        this.keepStackingContext = false;
+        this.modalOverlay = false;
+        this.theme = "";
+        this.displayDevice = "all";
+        this.transition = "slowly";
+        this.zIndex = "400";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        return (h(Host, null, h("div", { style: { zIndex: this.zIndex }, class: {
+                "duet-overlay": true,
+                "duet-theme-turva": this.theme === "turva",
+                "keep-stacking-context": this.keepStackingContext,
+                [`transition-${this.transition}`]: this.transition !== "immediate",
+                "display-x-small": this.getDisplayBreakpoint() === "x-small",
+                "display-small": this.getDisplayBreakpoint() === "small",
+                "display-medium": this.getDisplayBreakpoint() === "medium",
+                "display-large": this.getDisplayBreakpoint() === "large",
+                not: this.displayDevice.startsWith("not"),
+                hidden: !this.visible,
+            } })));
+    }
+    static get is() { return "duet-overlay"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-overlay.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-overlay.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Open"
+                },
+                "attribute": "visible",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "keepStackingContext": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keep stacking context"
+                },
+                "attribute": "keep-stacking-context",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "modalOverlay": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Modal overlay"
+                },
+                "attribute": "modal-overlay",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "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"
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "displayDevice": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "OverlayDisplayDevice",
+                    "resolved": "\"all\" | \"large\" | \"medium\" | \"not-large\" | \"not-medium\" | \"not-small\" | \"not-x-small\" | \"small\" | \"x-small\"",
+                    "references": {
+                        "OverlayDisplayDevice": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-overlay/duet-overlay.tsx",
+                            "id": "src/components/duet-overlay/duet-overlay.tsx::OverlayDisplayDevice"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode"
+                },
+                "attribute": "display-device",
+                "reflect": false,
+                "defaultValue": "\"all\""
+            },
+            "transition": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"quickly\" | \"slowly\" | \"immediate\"",
+                    "resolved": "\"immediate\" | \"quickly\" | \"slowly\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Transition"
+                },
+                "attribute": "transition",
+                "reflect": false,
+                "defaultValue": "\"slowly\""
+            },
+            "zIndex": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Z-index"
+                },
+                "attribute": "z-index",
+                "reflect": false,
+                "defaultValue": "\"400\""
+            }
+        };
+    }
+}

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

@@ -29,8 +29,12 @@ export class DuetPopupMenu {
             if (!this.openButton) {
                 return;
             }
+            const middleware = [
+                offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }),
+                flip({ mainAxis: !this.forcePlacement }),
+            ];
             const coordinates = await computePosition(this.openButton, this.menuElement, {
-                middleware: [offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }), flip()],
+                middleware,
                 placement: this.placement,
                 strategy: this.position,
             });
@@ -45,6 +49,7 @@ export class DuetPopupMenu {
         this.theme = "";
         this.controller = undefined;
         this.placement = "bottom-start";
+        this.forcePlacement = false;
         this.position = "absolute";
         this.mainAxisOffset = 0;
         this.crossAxisOffset = 0;
@@ -341,6 +346,24 @@ export class DuetPopupMenu {
                 "reflect": false,
                 "defaultValue": "\"bottom-start\""
             },
+            "forcePlacement": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force placement."
+                },
+                "attribute": "force-placement",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "position": {
                 "type": "string",
                 "mutable": true,

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -166,7 +166,7 @@ export class DuetRangeStepper {
         return (h("div", { class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small" }), h("duet-action-button", { class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small" })));
+            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small", title: "" }), h("duet-action-button", { class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small", title: "" })));
     }
     static get is() { return "duet-range-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,29 +54,6 @@
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
 }
-.duet-slideout .desktop-bg {
-  display: none;
-}
-@media (min-width: 62em) {
-  .duet-slideout .desktop-bg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 400;
-    display: block;
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    background: rgb(0, 41, 77);
-    opacity: 0;
-    transition: 600ms ease;
-  }
-  .duet-slideout .desktop-bg:not(.hidden) {
-    visibility: visible;
-    opacity: 0.3;
-    transition: 600ms ease;
-  }
-}
 @media (min-width: 62em) {
   .duet-slideout.duet-theme-turva .desktop-bg {
     background: rgb(23, 28, 58);