@duetds/components 8.7.5 → 9.0.0

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

@@ -19,6 +19,7 @@ export class DuetMenuBar {
             window.matchMedia(media_query_xx_large.replace(/'/g, "")),
         ];
         this.boundMqlFunctions = [];
+        this.previousYScroll = 0;
         this.scrollbarCheck = () => {
             this.leftMoreVisible = this.container.scrollLeft > 0;
             this.rightMoreVisible = this.container.scrollLeft !== this.container.scrollWidth - this.container.clientWidth;
@@ -56,6 +57,8 @@ export class DuetMenuBar {
                 originalEvent: e,
             });
         };
+        this.hidden = false;
+        this.onBottom = false;
         this.logoSize = "large";
         this.leftMoreVisible = false;
         this.rightMoreVisible = false;
@@ -65,6 +68,32 @@ export class DuetMenuBar {
         this.logoHref = undefined;
         this.logoLinkAccessibleLabel = undefined;
         this.accessibleLabel = undefined;
+        this.hideOnScroll = false;
+    }
+    checkScroll() {
+        if (!this.hideOnScroll) {
+            return;
+        }
+        if (window.scrollY > this.previousYScroll) {
+            if (window.scrollY > 100) {
+                if (this.hideOnScroll) {
+                    clearTimeout(this.zindexTimer);
+                    this.onBottom = true;
+                }
+                this.hidden = true;
+            }
+        }
+        else {
+            if (window.scrollY < 150) {
+                if (this.hideOnScroll) {
+                    this.zindexTimer = setTimeout(() => {
+                        this.onBottom = false;
+                    }, 300);
+                }
+                this.hidden = false;
+            }
+        }
+        this.previousYScroll = window.scrollY;
     }
     /**
      * Component lifecycle events.
@@ -114,11 +143,13 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: '967d5c3a2b52d99336f77c65189b5e458166e20a' }, h("nav", { key: '0269eca4392db3aee049ba6341719c4c6bd728bc', class: {
+        return (h(Host, { key: '6772191fb52ef833296d4591848722cdd716fd8a' }, h("nav", { key: 'bbfd138c4487382bf33cd2a27a11abae07c1cd84', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'f0714cac1580d0dad6109ce810a30cb9b8e31ea7', class: "top" }), h("div", { key: '6e2b8a7aeb95bd4edc59c71d6fd600c64668ca00', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '7b719a3581ec0aeb360c3968ac32f7e0bfef2f8d' }, h("duet-logo", { key: 'f195dc3f95e3b8c46e51921ec9097687a01482cd', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'cedfe9fd7cfd8b81fdc2192b29536842e86164cd', class: "list center", role: "list" }, h("div", { key: '1b47f13f17f7215107307a48aebf3af6eae98ceb', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '7ecd7b75b1e971dd03b5fa5c420d1482b106e37e', name: "center" }), h("div", { key: '57d6a671dc39903ae6feca1bc1e2d4296b67cd5f', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '58cfdf2175cfa15f900ebb368a57e2c66afcef19', class: "list right", role: "list" }, h("slot", { key: 'cce27bba83ad382ee7721085cf231dc229f19375', name: "right" }))), h("div", { key: 'dd61b57a21d74369d9b5d3a3bf33eb2079406a62', class: "bottom" }))));
+                hidden: this.hidden && this.hideOnScroll,
+                bottom: this.onBottom,
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '0e76aa9cf8e2088809c32ffb889ea7bd0e65f328', class: "top" }), h("div", { key: '3e0e929ab2dabd44122c86b3d89690084d49ee8c', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: 'daf3d473577d75062dbbdd2f4d277aecffddb806' }, h("duet-logo", { key: 'e560ec5ffbd0ab8c03a2284c6f5c24be44304595', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'f90de1dde38ffad772fd1db9ef1949bd69651a17', class: "list center", role: "list" }, h("div", { key: 'e21ef580e08ebefe3ff5a23da0a6df2d2714c2b0', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: 'fbfd2e2f6a9d69d0e5f0843d30f723beadde4c1b', name: "center" }), h("div", { key: '6d232d47954eb7590982353aa05a869353cd5103', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: '14d79bc82134dd5449172dadccdd94e39508e3ce', class: "list right", role: "list" }, h("slot", { key: '383cc225f16923f7538daf24ef5f5592ace15ece', name: "right" }))), h("div", { key: '5042a82358354e9a77e5f7d022d47bf46e9c6250', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -256,11 +287,31 @@ export class DuetMenuBar {
                 },
                 "attribute": "accessible-label",
                 "reflect": false
+            },
+            "hideOnScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the menu bar hide on top of the window when page is scrolled down\nShould be used only with sticky navigation."
+                },
+                "attribute": "hide-on-scroll",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
+            "hidden": {},
+            "onBottom": {},
             "logoSize": {},
             "leftMoreVisible": {},
             "rightMoreVisible": {}
@@ -293,6 +344,12 @@ export class DuetMenuBar {
     static get elementRef() { return "element"; }
     static get listeners() {
         return [{
+                "name": "scroll",
+                "method": "checkScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
                 "name": "resize",
                 "method": "onWindowResize",
                 "target": "window",

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

@@ -23,6 +23,11 @@
   width: 100%;
 }
 
+:host([sticky]) {
+  position: relative;
+  z-index: 300;
+}
+
 .container {
   position: relative;
   z-index: 400;
@@ -43,4 +48,14 @@
   ::slotted(*[slot=desktop]) {
     display: inherit;
   }
+}
+.sticky {
+  position: sticky;
+  top: 0;
+}
+@media (min-width: 62em) {
+  .sticky {
+    position: relative;
+    top: unset;
+  }
 }

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

@@ -11,6 +11,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetNav {
     constructor() {
         this.theme = "";
+        this.sticky = false;
     }
     /**
      * Component lifecycle events.
@@ -23,7 +24,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6f01a96aa430eb180dd010f28ef4510d15a7564b' }, h("div", { key: '1eaf8169259e16ce14ff53ce9f6de59e9c8da036', class: "container" }, h("slot", { key: '222156a46dd91ca689a508b26b14d20d698fcab5' }), h("slot", { key: 'da966bf777c9f8f6e06234113664f6334eb96c33', name: "mobile" }), h("slot", { key: '7979d5fef702cbad5f26fa4db2c9835a48762cec', name: "desktop" }))));
+        return (h(Host, { key: 'a92a1ddaae09ce96b5e5d11f75b90e890e405494' }, h("div", { key: '5ff997d4da49fc082af18866b7e19ded4d64566c', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'e18cbf0c99d69c3457eda1ff7f291161f10547d4' }), h("slot", { key: '70b3b0456c5e4e3307b12ad9a44f87c4861b98a5', name: "mobile" }), h("slot", { key: '2ad5781a32b89b6857505c0bb6bfba2c95422dbe', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -62,6 +63,24 @@ export class DuetNav {
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
+            },
+            "sticky": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes navigation sticky so it stays on top.\nwhen page is being scrolled. Works only for mobile."
+                },
+                "attribute": "sticky",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/lib/collection/components/duet-section-layout/duet-section-layout.css

@@ -55,6 +55,51 @@
   padding: 0 16px;
   margin: 48px auto 36px;
 }
+@media (max-width: 20.5em) {
+  .duet-layout.padding-xxx-small {
+    padding: 0;
+  }
+}
+@media (max-width: 22.5em) {
+  .duet-layout.padding-xx-small {
+    padding: 0;
+  }
+}
+@media (max-width: 35.9375em) {
+  .duet-layout.padding-x-small {
+    padding: 0;
+  }
+}
+@media (min-width: 36em) {
+  .duet-layout.padding-small {
+    padding: 0;
+  }
+}
+@media (min-width: 48em) {
+  .duet-layout.padding-medium {
+    padding: 0;
+  }
+}
+@media (min-width: 62em) {
+  .duet-layout.padding-large {
+    padding: 0;
+  }
+}
+@media (min-width: 64.0625em) {
+  .duet-layout.padding-x-large {
+    padding: 0;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-layout.padding-xx-large {
+    padding: 0;
+  }
+}
+@media (min-width: 106.25em) {
+  .duet-layout.padding-xxx-large {
+    padding: 0;
+  }
+}
 @media (min-width: 36em) {
   .duet-layout {
     margin-top: 72px;

package/lib/collection/components/duet-section-layout/duet-section-layout.js

@@ -7,19 +7,21 @@ export class DuetSectionLayout {
     constructor() {
         this.margin = "auto";
         this.middle = false;
+        this.paddingBreakpoint = undefined;
     }
     /**
      * render() function.
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '84860259acf32befb4dc83a1b84e58c49dffaaa9', class: {
+        return (h(Host, { key: '3eae73081b51390b86a3a85e507afe1f88da9d3c', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '8a91d29eb630fa72ac779644ff2c2df3c1e7b173', class: {
+            } }, h("div", { key: '2a40eedc09186d064eea410ea5235ba9ae257468', class: {
                 "duet-layout": true,
                 "duet-m-0": this.margin === "none",
-            } }, h("section", { key: '68c01ac54249408439dfab1d053533a01e868be1', class: "duet-main" }, h("slot", { key: '6b7df39ead8e612c0fcc1d67945e4f4b3b195536' })))));
+                [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
+            } }, h("section", { key: '1ad05f9fb04d37b682658463384fbb787990a432', class: "duet-main" }, h("slot", { key: '54c91da8da32c38aaae149c9279216d7e4c83820' })))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }
@@ -76,6 +78,30 @@ export class DuetSectionLayout {
                 "attribute": "middle",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "paddingBreakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetBreakpoints",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
+                    "references": {
+                        "DuetBreakpoints": {
+                            "location": "import",
+                            "path": "../../utils/token-utils",
+                            "id": "src/utils/token-utils.ts::DuetBreakpoints"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Breakpoint used to remove padding. These match to\nsimilar media query tokens: $media-query-small and $media-query-medium."
+                },
+                "attribute": "padding-breakpoint",
+                "reflect": false,
+                "defaultValue": "undefined"
             }
         };
     }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.css

@@ -34,8 +34,13 @@
 
 .duet-submenu-bar {
   position: relative;
+  top: 0;
   z-index: 1;
   background: rgb(243, 249, 252);
+  transition: top 0.4s;
+}
+.duet-submenu-bar.hidden {
+  top: -200px;
 }
 @media (min-width: 62em) {
   .duet-submenu-bar {

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -4,11 +4,12 @@
 import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
-import { inheritGlobalTheme } from "../../common/themeable-component";
+import { inheritGlobalTheme } from "../../common";
 export class DuetSubmenuBar {
     constructor() {
         this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
         this.boundMqlFunctions = [];
+        this.previousYScroll = 0;
         this.handleMobileView = () => {
             if (this.mql[0].matches) {
                 this.mobile = false;
@@ -46,9 +47,11 @@ export class DuetSubmenuBar {
             const hasItems = !!this.element.querySelector("duet-submenu-bar-item");
             return hasDropdownLinks || hasLinks || hasItems;
         };
+        this.hidden = false;
         this.mobile = true;
         this.bodyScroll = true;
         this.theme = "";
+        this.hideOnScroll = false;
         this.open = false;
         this.accessibleLabel = undefined;
     }
@@ -98,20 +101,40 @@ export class DuetSubmenuBar {
     async setFocus(options) {
         this.button.focus(options);
     }
+    checkScroll() {
+        if (!this.hideOnScroll) {
+            return;
+        }
+        if (window.scrollY > this.previousYScroll) {
+            if (window.scrollY > 100) {
+                this.hidden = true;
+            }
+        }
+        else {
+            if (window.scrollY < 150) {
+                this.hidden = false;
+            }
+        }
+        this.previousYScroll = window.scrollY;
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '993291b7d514d441a2877ba1b1d91bca382b47e8' }, h("nav", { key: '310d933ae6697e4d63fb144e3fa6e422065d0581', class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '151ed9a1623c2236e5bcd54f3e3867e6af389172', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        return (h(Host, { key: '5e92e1ecd485d3d9fcccc551830ab0048f4da4a5' }, h("nav", { key: '643b7b42e0a205886aabcc787e8f0c9b67b069f6', class: {
+                "duet-submenu-bar": true,
+                "duet-theme-turva": this.theme === "turva",
+                hidden: this.hidden,
+            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: 'd42069edb21dd9ffb3c5047dde1731c51ff1f703', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, h("span", { key: 'a2c08baef8703ed21db5144947c6e49d526fe5a5', class: "label" }, h("slot", { key: 'a9ed7880eb13671d773e05be1fe0687a43b0084d', name: "label" }), h("duet-icon", { key: '2ca5f860e1a18749afc203ad5a1af41ad8b9f15a', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'b7bbe3dff583f47338066cb04f21ce9284f30f3a', class: {
+            }, onClick: this.onClick }, h("span", { key: '7a92ee474b86be9117955083e72ca1a1e5645f62', class: "label" }, h("slot", { key: '606947cb035e7735c67747c43aae35ccc7841f5c', name: "label" }), h("duet-icon", { key: '2315dc51a812eb5b24d68876465dba0cc7d446cd', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '2b8d170c424e1fc3f540e2bcbfde7ba36d05a196', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: 'd6f65370ba46b6670031520fea6c2bafa73c9314', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, h("div", { key: 'bef9521e8a2a8797fda836db3c6098f0ac5a669c', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '3756cf919ec1acaf5ede5db401f177f2e79ed140', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '594cfb2081aa5c0a9511bbdca95898dc488077e9' }), h("div", { key: '01ef003bef8fa1549957dfc4815036f480474b12', class: "list-padding" }))), h("duet-overlay", { key: '9aad33941c7c06e071c2d2033e43297d3f1e7b1a', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '6760e457a9210522418dd07ff7275a6d8decec4b', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '2540ec6e2801b5bc8ee84df0e7a06792aeed2930' }), h("div", { key: '03993868de8dd80f325aa082c4838dfec1c65237', class: "list-padding" }))), h("duet-overlay", { key: 'e14ba08dd0ac6de076e8d74bf4adb4464fc9f315', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     static get is() { return "duet-submenu-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -151,6 +174,24 @@ export class DuetSubmenuBar {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "hideOnScroll": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the submenu bar hide on top of the window when page is scrolled down\nShould be used only with sticky navigation."
+                },
+                "attribute": "hide-on-scroll",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "open": {
                 "type": "boolean",
                 "mutable": true,
@@ -190,6 +231,7 @@ export class DuetSubmenuBar {
     }
     static get states() {
         return {
+            "hidden": {},
             "mobile": {},
             "bodyScroll": {}
         };
@@ -230,4 +272,13 @@ export class DuetSubmenuBar {
                 "methodName": "watchOpenStateHandler"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "scroll",
+                "method": "checkScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
-import { inheritGlobalTheme } from "../../common/themeable-component";
+import { inheritGlobalTheme } from "../../common";
 /**
  * @slot left - Slot for content in left side.
  * @slot right - Slot for content in right side.
@@ -25,7 +25,11 @@ export class DuetToolbar {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "default";
-        return (h(Host, { key: 'c5df9ceff6286d32e3a36f6c1a15da1bc72134d9' }, h("nav", { key: '14b077c64faf7ab00df4ef30be2238e47fa11237', class: { "duet-toolbar": true, "duet-theme-turva": this.theme === "turva", [variation]: true }, "aria-label": this.accessibleLabel }, h("div", { key: '198dab0024637a43dc25b0b262f69dbb5c7211c1', class: "container" }, h("div", { key: '6dd0c0844a50a82e79fd501778200f0a25bc147c', class: "list", role: "list" }, h("slot", { key: '66bd5d880189f5ce04f5396be8800ed3a6abdcec', name: "left" })), h("div", { key: '1d2880011584339889133310cca592ce02099b73', class: "list", role: "list" }, h("slot", { key: '572d0e97a6c358302e80fb424f6d60e6a8c4d8f3', name: "right" }))))));
+        return (h(Host, { key: '4facdd60bf2770ac4d23b3a197abd0922439a81e' }, h("nav", { key: 'a06f660682e41dfb2ab07f9035312d1ac69a37a7', class: {
+                "duet-toolbar": true,
+                "duet-theme-turva": this.theme === "turva",
+                [variation]: true,
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'eb4ad22e5e60557d5352b613e8f0997f410b8d6b', class: "container" }, h("div", { key: '6f61b75507ec89330908509fe11a74c0ee2828ad', class: "list", role: "list" }, h("slot", { key: '0e5058eec8df0653a688a21eada26a54e68c4cc8', name: "left" })), h("div", { key: '52218682d3a0daee51db5a199d905ed19e3f5904', class: "list", role: "list" }, h("slot", { key: 'ace123ab65ae117b0025a415bbdc35626e2d4233', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -120,7 +120,7 @@ const languagaChangeObserverCallback = mutationList => {
             break;
         }
     }
-    if (document.documentElement.dataset.duetLangObserve) {
+    if (document.documentElement.dataset.duetLangObserve !== "false") {
         languageChangeSubscribers.forEach((component) => {
             if (component.language) {
                 component.language = getLanguage();

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-ed44791c.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-f473f372.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-2a0caf1e.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-a88c8a83.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-dffd004f.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-ed7ebe18.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-banner.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-6f18089c.js';
+import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-1fcfc5cd.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { h } from './p-2f281743.js';
-import { h as hasSlot, c as checkNamedSlotElement } from './p-f9f0bae0.js';
+import { h } from './p-8764aea1.js';
+import { h as hasSlot, c as checkNamedSlotElement } from './p-fc9b988f.js';
 import { p as parsePossibleJSON } from './p-0e052642.js';
 import { g as getColorByName } from './p-3ec3eb5f.js';
-import { d as defineCustomElement$3 } from './p-c8fc5cc1.js';
-import { d as defineCustomElement$2 } from './p-514cdcf1.js';
+import { d as defineCustomElement$3 } from './p-ff219485.js';
+import { d as defineCustomElement$2 } from './p-64704a72.js';
 
 const DuetPicture = ({ img, sources }) => {
     return (h("picture", null,

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-6f18089c.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1fcfc5cd.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-785686e3.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-44837462.js';
-import { d as defineCustomElement$3 } from './p-514cdcf1.js';
-import { d as defineCustomElement$2 } from './p-95ee5452.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-7915de0a.js';
+import { d as defineCustomElement$3 } from './p-64704a72.js';
+import { d as defineCustomElement$2 } from './p-3d250ee3.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-6f18089c.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1fcfc5cd.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { g as getLocaleString } from './p-44837462.js';
+import { g as getLocaleString } from './p-7915de0a.js';
 import { g as getColorByName } from './p-3ec3eb5f.js';
 
 const duetBreadcrumbsCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}::slotted(*){font-weight:400}::slotted(:last-child){font-weight:600}:host([variation=plain]) ::slotted(:last-child){font-weight:400}.duet-breadcrumbs{position:relative;display:flex;align-items:center;justify-content:center;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-breadcrumbs .container{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1384px;min-height:36px;margin:0 28px}.duet-breadcrumbs .list{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;padding:10px 0;color:inherit;list-style:none}.duet-breadcrumbs .bottom-border{position:absolute;bottom:0;display:none;width:100%;height:1px}.duet-breadcrumbs.header{color:rgb(0, 41, 77);background:rgb(243, 249, 252)}.duet-breadcrumbs.header .list duet-breadcrumb[href]:hover{color:rgb(0, 77, 128)}.duet-breadcrumbs.header .bottom-border--nav{display:block;background:rgb(225, 227, 230)}.duet-breadcrumbs.header.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 245, 247)}.duet-breadcrumbs.header.duet-theme-turva ol duet-breadcrumb[href]:hover{color:rgb(148, 9, 37)}.duet-breadcrumbs.footer{color:rgb(255, 255, 255);background:rgb(0, 41, 77)}@media (min-width: 64.0625em){.duet-breadcrumbs.footer{justify-content:flex-start}}@media (min-width: 76.25em){.duet-breadcrumbs.footer{justify-content:center}}.duet-breadcrumbs.footer .container{max-width:1110px}@media (min-width: 62em){.duet-breadcrumbs.footer .container{margin:0 72px 0 48px}}.duet-breadcrumbs.footer .list{padding:20px 0}@media (min-width: 62em){.duet-breadcrumbs.footer .list{padding:20px 8px}}.duet-breadcrumbs.footer .list duet-breadcrumb[href]:hover{text-decoration:underline}.duet-breadcrumbs.footer .bottom-border--container{display:block;background:rgba(255, 255, 255, 0.2)}.duet-breadcrumbs.footer.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-breadcrumbs.plain .container{max-width:none;min-height:auto;margin:0}.duet-breadcrumbs.plain .list{padding:0}.duet-breadcrumbs.plain .bottom-border{display:none}";

package/lib/dist-custom-elements/duet-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-5190c77c.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-a6699e20.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-callout.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-6f18089c.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-1fcfc5cd.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { h as hasSlot, c as checkNamedSlotElement } from './p-f9f0bae0.js';
-import { d as defineCustomElement$2 } from './p-514cdcf1.js';
+import { h as hasSlot, c as checkNamedSlotElement } from './p-fc9b988f.js';
+import { d as defineCustomElement$2 } from './p-64704a72.js';
 
 const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout blockquote{font-size:2.7vw;font-weight:600;line-height:1.5;color:rgb(0, 41, 77)}@media (max-width: 37.037037037rem){.duet-callout blockquote{font-size:1rem}}@media (min-width: 46.2962962963rem){.duet-callout blockquote{font-size:1.25rem}}.duet-callout .author{color:rgb(0, 41, 77)}.duet-callout.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-callout.duet-theme-turva .author,.duet-callout.duet-theme-turva blockquote{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
 const DuetCalloutStyle0 = duetCalloutCss;

package/lib/dist-custom-elements/duet-caption.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-00e941ae.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-01d99db1.js';
 
 const DuetCaption = DuetCaption$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-card.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-6f18089c.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-1fcfc5cd.js';
 import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
 import { c as createID } from './p-5e59e970.js';
 import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-785686e3.js';
 import { s as sanitizeString } from './p-0e052642.js';
 import { g as getColorByName } from './p-3ec3eb5f.js';
-import { d as defineCustomElement$3 } from './p-514cdcf1.js';
-import { d as defineCustomElement$2 } from './p-95ee5452.js';
+import { d as defineCustomElement$3 } from './p-64704a72.js';
+import { d as defineCustomElement$2 } from './p-3d250ee3.js';
 
 const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
 const duetBlock = "div";

package/lib/dist-custom-elements/duet-checkbox.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-5b8c2322.js';
+import { D as DuetCheckbox$1, d as defineCustomElement$1 } from './p-43561600.js';
 
 const DuetCheckbox = DuetCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-checkmark.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-2b80cc8e.js';
+import { D as DuetCheckmark$1, d as defineCustomElement$1 } from './p-0f675524.js';
 
 const DuetCheckmark = DuetCheckmark$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-chip.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetChip$1, d as defineCustomElement$1 } from './p-6a6955ad.js';
+import { D as DuetChip$1, d as defineCustomElement$1 } from './p-f2c13723.js';
 
 const DuetChip = DuetChip$1;
 const defineCustomElement = defineCustomElement$1;