@duetds/components 8.1.0 → 8.1.1

package/hydrate/index.js

@@ -6682,33 +6682,7 @@ const setupLoggers = () => {
     }
 };
 
-const TAB_KEY = 9;
 var appGlobalScript = () => {
-    function listenKeys(event) {
-        if (event.keyCode === TAB_KEY) {
-            var components = document.querySelectorAll(".hydrated");
-            for (var i = 0; i < components.length; i++) {
-                components[i].classList.add("user-is-tabbing");
-            }
-            if (typeof window !== "undefined") {
-                window.removeEventListener("keydown", listenKeys);
-                window.addEventListener("mousedown", listenMouse, false);
-            }
-        }
-    }
-    function listenMouse() {
-        var components = document.querySelectorAll(".hydrated");
-        for (var i = 0; i < components.length; i++) {
-            components[i].classList.remove("user-is-tabbing");
-        }
-        if (typeof window !== "undefined") {
-            window.removeEventListener("mousedown", listenMouse);
-            window.addEventListener("keydown", listenKeys, false);
-        }
-    }
-    if (typeof window !== "undefined") {
-        window.addEventListener("keydown", listenKeys, false);
-    }
     setupLoggers();
 };
 
@@ -7655,21 +7629,52 @@ function fieldSorter(fields) {
     };
 }
 
-const isArrowLeftKey = (e) => e.keyCode === 37;
-const isArrowUpKey = (e) => e.keyCode === 38;
-const isArrowRightKey = (e) => e.keyCode === 39;
-const isArrowDownKey = (e) => e.keyCode === 40;
+const isArrowLeftKey = (e) => e.key === "ArrowLeft" || e.key === "Left";
+const isArrowUpKey = (e) => e.key === "ArrowUp" || e.key === "Up";
+const isArrowRightKey = (e) => e.key === "ArrowRight" || e.key === "Right";
+const isArrowDownKey = (e) => e.key === "ArrowDown" || e.key === "Down";
 const isArrowKey = (e) => isArrowDownKey(e) || isArrowRightKey(e) || isArrowUpKey(e) || isArrowLeftKey(e);
-const isEscapeKey = (e) => e.key === "Escape" || e.key === "Esc" || e.keyCode === 27;
-const isTabKey = (e) => e.key === "Tab" || e.keyCode === 9;
-const isBackspaceKey = (e) => e.keyCode === 8;
-const isSpaceKey = (e) => e.key === "Space" || e.keyCode === 32;
-const isPlusKey = (e) => e.key === "+" || e.keyCode === 43;
-const isMinusKey = (e) => e.key === "-" || e.keyCode === 45;
+const isEscapeKey = (e) => e.key === "Escape" || e.key === "Esc";
+const isTabKey = (e) => e.key === "Tab";
+const isBackspaceKey = (e) => e.key === "Backspace";
+const isSpaceKey = (e) => e.key === " " || e.key === "Spacebar";
+const isPlusKey = (e) => e.key === "+" || e.key === "Add";
+const isMinusKey = (e) => e.key === "-" || e.key === "Subtract";
 const isQuestionKey = (e) => e.key === "?";
-const isEnterKey = (e) => e.key === "Enter" || e.keyCode === 13;
+const isEnterKey = (e) => e.key === "Enter";
 const isKeyboardClick = (e) => isEnterKey(e) || isSpaceKey(e);
-const isNumber = (e) => (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);
+const isNumber = (e) => e.key >= "0" && e.key <= "9";
+/**
+ * Component instances that have subscribed to tabbing change.
+ */
+const tabbingChangeSubscribers = new Set();
+function notifySubscribers(tabbing) {
+    tabbingChangeSubscribers.forEach(subscriber => {
+        subscriber.element.classList[tabbing ? "add" : "remove"]("user-is-tabbing");
+    });
+}
+function listenKeys(event) {
+    if (isTabKey(event)) {
+        notifySubscribers(true);
+        window.removeEventListener("keydown", listenKeys);
+        window.addEventListener("mousedown", listenMouse, false);
+    }
+}
+function listenMouse() {
+    notifySubscribers(false);
+    window.removeEventListener("mousedown", listenMouse);
+    window.addEventListener("keydown", listenKeys, false);
+}
+// start listening for tabbing (and mouse clicking through that) only if window is defined (i.e. not on server)
+if (typeof window !== "undefined") {
+    window.addEventListener("keydown", listenKeys, false);
+}
+const subscribeTabbingChange = component => {
+    tabbingChangeSubscribers.add(component);
+};
+const unsubscribeTabbingChange = component => {
+    tabbingChangeSubscribers.delete(component);
+};
 
 function isObject(maybeObj) {
     return Object.prototype.toString.call(maybeObj) === "[object Object]";
@@ -8514,12 +8519,14 @@ class DuetAlert {
     }
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" });
+        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         if (this.timeoutID) {
             clearTimeout(this.timeoutID);
         }
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
     }
     /**
      * Show.
@@ -8732,10 +8739,12 @@ class DuetBreadcrumb {
             sv: "disabled. Visa mer",
             en: "disabled. Nuvarande sida",
         };
+        this.hasSlottedContent = false;
         this.theme = "";
         this.language = getLanguage();
         this.href = "";
         this.icon = "";
+        this.iconSize = "x-small";
         this.accessibleLabel = undefined;
     }
     /**
@@ -8746,9 +8755,12 @@ class DuetBreadcrumb {
     }
     connectedCallback() {
         connectLanguageChangeObserver(this);
+        subscribeTabbingChange(this);
+        this.hasSlottedContent = Array.from(this.element.childNodes).length > 0;
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
     }
     /**
      * render() function
@@ -8759,7 +8771,10 @@ class DuetBreadcrumb {
         return (hAsync(Host, { role: "listitem" }, hAsync("div", { class: "container" }, !this.icon && (hAsync("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" })), hAsync("a", { class: {
                 "duet-breadcrumb": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon && hAsync("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }), !this.icon && hAsync("slot", null)))));
+            }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon && [
+            hAsync("duet-icon", { size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && hAsync("duet-spacer", { size: "x-small", direction: "horizontal" }),
+        ], hAsync("slot", null)))));
     }
     get element() { return getElement(this); }
     static get style() { return duetBreadcrumbCss; }
@@ -8770,6 +8785,7 @@ class DuetBreadcrumb {
             "theme": [1025],
             "href": [1025],
             "icon": [1025],
+            "iconSize": [1, "icon-size"],
             "accessibleLabel": [1, "accessible-label"],
             "language": [32]
         },
@@ -9262,6 +9278,12 @@ class DuetCard {
             ;
         this.hasFooter = !!this.element.querySelector("[slot='footer']");
     }
+    connectedCallback() {
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
+    }
     renderHeading() {
         const safeHeadingLevel = sanitizeString$1(this.headingLevel);
         const HeadingTag = [...duetHeadingLevels, duetBlock].some(tag => tag === safeHeadingLevel) ? safeHeadingLevel : "h2";
@@ -9659,6 +9681,12 @@ class DuetChip {
         inheritGlobalTheme(this);
         this.popupSetUp();
     }
+    connectedCallback() {
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
+    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
@@ -9887,10 +9915,12 @@ class DuetChoice {
             { prop: "infoLabel", defaults: "infoLabelDefaults" },
             { prop: "collapsibleNotification", defaults: "collapsibleNotificationDefaults" },
         ]);
+        subscribeTabbingChange(this);
         this.duetChoiceReady.emit();
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
         this.duetChoiceRemove.emit();
     }
     /**
@@ -10754,6 +10784,12 @@ class DuetCollapsible {
         inheritGlobalTheme(this);
         this.hasAfterHeading = hasSlot(this.element, "after-heading");
     }
+    connectedCallback() {
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
+    }
     /**
      * Sets focus on the specified `duet-collapsible`. Use this method instead of the global
      * `collapsible.focus()`.
@@ -11270,6 +11306,12 @@ class DuetCookieConsent {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
+    connectedCallback() {
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
+    }
     /**
      * render() function.
      * Always the last one in the class.
@@ -12291,9 +12333,11 @@ class DuetFooter {
             prop: "accessibleLabelExternal",
             defaults: "accessibleLabelExternalDefaults",
         });
+        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
     }
     /**
      * Local methods
@@ -13104,6 +13148,7 @@ class DuetHeader {
             { prop: "accessibleI18nLabels", defaults: "accessibleI18nLabelsDefaults" },
             { prop: "accessibleLabelExternal", defaults: "accessibleLabelExternalDefaults" },
         ]);
+        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         if (this.navigationEl) {
@@ -13117,6 +13162,7 @@ class DuetHeader {
         }
         this.boundMqlFunctions = [];
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
     }
     /**
      * Component event handling.
@@ -14389,6 +14435,16 @@ class DuetLink {
     screenTest(event) {
         this.isSmallScreen = event.matches;
     }
+    getAccessibleLabel() {
+        if (this.accessibleLabel) {
+            return this.accessibleLabel;
+        }
+        if (!this.element.innerHTML) {
+            return "";
+        }
+        const capitalized = this.element.innerHTML[0].toUpperCase() + this.element.innerHTML.slice(1);
+        return `${capitalized}. ${this.external ? `${this.accessibleLabelExternal}.` : ""}`;
+    }
     renderContent() {
         return (hAsync(Fragment, null, hAsync("span", { class: "duet-link-content", part: "duet-link-content" }, hAsync("slot", null)), Build.isBrowser  ));
     }
@@ -14413,7 +14469,7 @@ class DuetLink {
                 "duet-p-0": this.padding === "none",
                 [this.padding]: true,
                 [this.variation]: true,
-            }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, 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.external ? "_blank" : "_self", "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())));
     }
     static get delegatesFocus() { return true; }
     get element() { return getElement(this); }
@@ -15843,9 +15899,11 @@ class DuetNotification {
     }
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "accessibleLabelUnread", defaults: "accessibleLabelUnreadDefaults" });
+        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
     }
     /**
      * Move focus to the notification's link element.
@@ -15931,10 +15989,12 @@ class DuetNotificationDrawer {
     connectedCallback() {
         this.observer = new MutationObserver(this.updateNotificationState);
         this.observer.observe(this.element, { childList: true });
+        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         this.observer.disconnect();
         this.observer = null;
+        unsubscribeTabbingChange(this);
     }
     handleClickFocusOutside(e) {
         const target = e.target;
@@ -16327,9 +16387,11 @@ class DuetNumberInput {
             { prop: "accessibleSubtract", defaults: "accessibleSubtractDefaults" },
             { prop: "label", defaults: "labelDefaults" },
         ]);
+        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
     }
     /**
      * Sets focus on the specified `duet-number-input`. Use this method instead of the global
@@ -18890,6 +18952,12 @@ class DuetRangeSlider {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
+    connectedCallback() {
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
+    }
     /**
      * Sets focus on the specified `duet-range-slider`. Use this method instead of the global
      * `input.focus()`.
@@ -19719,7 +19787,7 @@ class DuetShowMore {
     }; }
 }
 
-const duetSlideoutCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-slideout,*.sc-duet-slideout::after,*.sc-duet-slideout::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-slideout-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}/*!@:host slot:not([name=toggle])::slotted(*)*/.sc-duet-slideout-h slot:not([name=toggle]).sc-duet-slideout-s>*{position:relative;visibility:hidden;opacity:0}/*!@:host([open]) slot:not([name=toggle])::slotted(*)*/.sc-duet-slideout-h[open] slot:not([name=toggle]).sc-duet-slideout-s>*{visibility:visible;opacity:1}/*!@:host(:not([open])) ::slotted(duet-slideout-panel)*/.sc-duet-slideout-h:not([open]) .sc-duet-slideout-s>duet-slideout-panel{display:none}/*!@.duet-slideout*/.duet-slideout.sc-duet-slideout{display:flex;align-items:center;height:100%}/*!@.duet-slideout .desktop-bg*/.duet-slideout.sc-duet-slideout .desktop-bg.sc-duet-slideout{display:none}@media (min-width: 62em){/*!@.duet-slideout .desktop-bg*/.duet-slideout.sc-duet-slideout .desktop-bg.sc-duet-slideout{position:fixed;top:0;left:0;z-index:400;display:block;width:100%;height:100%;visibility:hidden;background:rgba(0, 41, 77, 0.6);opacity:0;transition:600ms ease}/*!@.duet-slideout .desktop-bg:not(.hidden)*/.duet-slideout.sc-duet-slideout .desktop-bg.sc-duet-slideout:not(.hidden){visibility:visible;opacity:1;transition:600ms ease}}@media (min-width: 62em){/*!@.duet-slideout.duet-theme-turva .desktop-bg*/.duet-slideout.duet-theme-turva.sc-duet-slideout .desktop-bg.sc-duet-slideout{background:rgba(23, 28, 58, 0.6)}}/*!@.duet-slideout .dialog*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout{position:fixed;top:0;bottom:0;left:0;z-index:400;width:100%;height:100%;padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}@media (min-width: 62em){/*!@.duet-slideout .dialog*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout{right:0;left:auto;width:500px;padding-bottom:0;transition:right 300ms ease;transition-delay:0s}}/*!@.duet-slideout .dialog .top*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .top.sc-duet-slideout{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px}/*!@.duet-slideout .dialog .top button*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .top.sc-duet-slideout button.sc-duet-slideout{cursor:pointer}/*!@.duet-slideout .dialog .top button:focus*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .top.sc-duet-slideout button.sc-duet-slideout:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-slideout .dialog .top duet-icon*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .top.sc-duet-slideout duet-icon.sc-duet-slideout{padding:16px}/*!@.duet-slideout .dialog .items*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .items.sc-duet-slideout{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:0 1.5rem}/*!@.duet-slideout .dialog.hidden*/.duet-slideout.sc-duet-slideout .dialog.hidden.sc-duet-slideout{pointer-events:none;visibility:hidden}@media (min-width: 62em){/*!@.duet-slideout .dialog.hidden*/.duet-slideout.sc-duet-slideout .dialog.hidden.sc-duet-slideout{right:-500px;transition:300ms ease}}/*!@.duet-slideout.duet-theme-turva .dialog*/.duet-slideout.duet-theme-turva.sc-duet-slideout .dialog.sc-duet-slideout{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1) inset}/*!@.duet-slideout.duet-theme-turva button*/.duet-slideout.duet-theme-turva.sc-duet-slideout button.sc-duet-slideout{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.duet-theme-turva button:focus*/.duet-slideout.duet-theme-turva.sc-duet-slideout button.sc-duet-slideout:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-slideout.duet-theme-turva button.active*/.duet-slideout.duet-theme-turva.sc-duet-slideout button.active.sc-duet-slideout{color:rgb(198, 12, 48)}/*!@.duet-slideout.duet-theme-turva button.active::after*/.duet-slideout.duet-theme-turva.sc-duet-slideout button.active.sc-duet-slideout::after{background:rgb(198, 12, 48)}/*!@.duet-slideout.duet-theme-turva .dialog .top button:focus*/.duet-slideout.duet-theme-turva.sc-duet-slideout .dialog.sc-duet-slideout .top.sc-duet-slideout button.sc-duet-slideout:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@::slotted(*)*/.sc-duet-slideout-s>*{width:100%}/*!@slot*/slot.sc-duet-slideout{color:rgb(0, 41, 77)}/*!@.duet-theme-turva slot*/.duet-theme-turva.sc-duet-slideout slot.sc-duet-slideout{color:rgb(23, 28, 58)}/*!@slot[name=toggle]*/slot[name=toggle].sc-duet-slideout{color:inherit}";
+const duetSlideoutCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-slideout,*.sc-duet-slideout::after,*.sc-duet-slideout::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-slideout-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute;height:100%}/*!@::slotted(*)*/.sc-duet-slideout-s>*{position:relative;width:100%;visibility:hidden;opacity:0}/*!@:host([open]) ::slotted(*)*/.sc-duet-slideout-h[open] .sc-duet-slideout-s>*{visibility:visible;opacity:1}/*!@:host(:not([open])) ::slotted(duet-slideout-panel)*/.sc-duet-slideout-h:not([open]) .sc-duet-slideout-s>duet-slideout-panel{display:none}/*!@.duet-slideout*/.duet-slideout.sc-duet-slideout{display:flex;align-items:center;height:100%}/*!@.duet-slideout .desktop-bg*/.duet-slideout.sc-duet-slideout .desktop-bg.sc-duet-slideout{display:none}@media (min-width: 62em){/*!@.duet-slideout .desktop-bg*/.duet-slideout.sc-duet-slideout .desktop-bg.sc-duet-slideout{position:fixed;top:0;left:0;z-index:400;display:block;width:100%;height:100%;visibility:hidden;background:rgba(0, 41, 77, 0.6);opacity:0;transition:600ms ease}/*!@.duet-slideout .desktop-bg:not(.hidden)*/.duet-slideout.sc-duet-slideout .desktop-bg.sc-duet-slideout:not(.hidden){visibility:visible;opacity:1;transition:600ms ease}}@media (min-width: 62em){/*!@.duet-slideout.duet-theme-turva .desktop-bg*/.duet-slideout.duet-theme-turva.sc-duet-slideout .desktop-bg.sc-duet-slideout{background:rgba(23, 28, 58, 0.6)}}/*!@.duet-slideout .dialog*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout{position:fixed;top:0;bottom:0;left:0;z-index:400;width:100%;height:100%;padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}@media (min-width: 62em){/*!@.duet-slideout .dialog*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout{right:0;left:auto;width:500px;padding-bottom:0;transition:right 300ms ease;transition-delay:0s}}/*!@.duet-slideout .dialog .top*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .top.sc-duet-slideout{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px}/*!@.duet-slideout .dialog .top button*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .top.sc-duet-slideout button.sc-duet-slideout{cursor:pointer}/*!@.duet-slideout .dialog .top button:focus*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .top.sc-duet-slideout button.sc-duet-slideout:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-slideout .dialog .top duet-icon*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .top.sc-duet-slideout duet-icon.sc-duet-slideout{padding:16px}/*!@.duet-slideout .dialog .items*/.duet-slideout.sc-duet-slideout .dialog.sc-duet-slideout .items.sc-duet-slideout{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:0 1.5rem}/*!@.duet-slideout .dialog.hidden*/.duet-slideout.sc-duet-slideout .dialog.hidden.sc-duet-slideout{pointer-events:none;visibility:hidden}@media (min-width: 62em){/*!@.duet-slideout .dialog.hidden*/.duet-slideout.sc-duet-slideout .dialog.hidden.sc-duet-slideout{right:-500px;transition:300ms ease}}/*!@.duet-slideout.duet-theme-turva .dialog*/.duet-slideout.duet-theme-turva.sc-duet-slideout .dialog.sc-duet-slideout{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1) inset}/*!@.duet-slideout.duet-theme-turva button*/.duet-slideout.duet-theme-turva.sc-duet-slideout button.sc-duet-slideout{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.duet-theme-turva button:focus*/.duet-slideout.duet-theme-turva.sc-duet-slideout button.sc-duet-slideout:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-slideout.duet-theme-turva button.active*/.duet-slideout.duet-theme-turva.sc-duet-slideout button.active.sc-duet-slideout{color:rgb(198, 12, 48)}/*!@.duet-slideout.duet-theme-turva button.active::after*/.duet-slideout.duet-theme-turva.sc-duet-slideout button.active.sc-duet-slideout::after{background:rgb(198, 12, 48)}/*!@.duet-slideout.duet-theme-turva .dialog .top button:focus*/.duet-slideout.duet-theme-turva.sc-duet-slideout .dialog.sc-duet-slideout .top.sc-duet-slideout button.sc-duet-slideout:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@slot*/slot.sc-duet-slideout{color:rgb(0, 41, 77)}/*!@.duet-theme-turva slot*/.duet-theme-turva.sc-duet-slideout slot.sc-duet-slideout{color:rgb(23, 28, 58)}";
 
 class DuetSlideout {
     constructor(hostRef) {
@@ -20385,6 +20453,12 @@ class DuetStep {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
+    connectedCallback() {
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
+    }
     /**
      * Programmatically shift focus to the step's heading.
      */
@@ -21127,12 +21201,14 @@ class DuetTabGroup {
             });
         }
         await this.updateTabs();
+        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         if (this.mutationO) {
             this.mutationO.disconnect();
             this.mutationO = undefined;
         }
+        unsubscribeTabbingChange(this);
     }
     componentWillLoad() {
         inheritGlobalTheme(this);
@@ -21620,6 +21696,12 @@ class DuetToggle {
             this.value = this.identifier;
         }
     }
+    connectedCallback() {
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
+    }
     /**
      * Sets focus on the specified `duet-toggle`. Use this method instead of the global
      * `input.focus()`.
@@ -22129,7 +22211,6 @@ const duetTooltipButtonCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-tooltip-bu
 class DuetTooltipButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.userIsTabbing = false;
         this.label = "";
         this.accessibleLabel = undefined;
         this.theme = "";
@@ -22142,13 +22223,11 @@ class DuetTooltipButton {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
-    listenKeys(event) {
-        if (event.keyCode === 9) {
-            this.userIsTabbing = true;
-        }
+    connectedCallback() {
+        subscribeTabbingChange(this);
     }
-    listenMouse() {
-        this.userIsTabbing = false;
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
     }
     async setFocus(options) {
         if (this.buttonElement) {
@@ -22160,7 +22239,7 @@ class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        return (hAsync(Host, { class: { "user-is-tabbing": this.userIsTabbing } }, hAsync("button", { ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        return (hAsync(Host, null, hAsync("button", { ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
                 "duet-tooltip-button": true,
                 "duet-tooltip-button-has-label": !!this.label,
                 "duet-theme-turva": this.theme === "turva",
@@ -22177,10 +22256,9 @@ class DuetTooltipButton {
             "theme": [1025],
             "active": [4],
             "tooltipId": [1, "tooltip-id"],
-            "userIsTabbing": [32],
             "setFocus": [64]
         },
-        "$listeners$": [[8, "keydown", "listenKeys"], [9, "mousedown", "listenMouse"]],
+        "$listeners$": undefined,
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -22199,7 +22277,6 @@ class DuetTooltipPopup {
         this.handleCloseClick = () => {
             this.tooltipPopupClosed.emit();
         };
-        this.userIsTabbing = false;
         this.theme = "";
         this.active = undefined;
         this.tooltipId = undefined;
@@ -22222,13 +22299,11 @@ class DuetTooltipPopup {
         inheritGlobalTheme(this);
         this.teleport = new Teleport(this.element);
     }
-    listenKeys(event) {
-        if (event.keyCode === 9) {
-            this.userIsTabbing = true;
-        }
+    connectedCallback() {
+        subscribeTabbingChange(this);
     }
-    listenMouse() {
-        this.userIsTabbing = false;
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
     }
     async getArrowElement() {
         return this.arrowEl;
@@ -22240,7 +22315,7 @@ class DuetTooltipPopup {
         this.contentEl.focus();
     }
     render() {
-        return (hAsync(Host, { class: { "user-is-tabbing": this.userIsTabbing } }, hAsync("div", { class: {
+        return (hAsync(Host, null, hAsync("div", { class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
@@ -22261,12 +22336,11 @@ class DuetTooltipPopup {
             "arrowStyles": [16],
             "placement": [1],
             "accessibleCloseLabel": [1, "accessible-close-label"],
-            "userIsTabbing": [32],
             "getArrowElement": [64],
             "getContentElement": [64],
             "setFocusOnContentElement": [64]
         },
-        "$listeners$": [[8, "keydown", "listenKeys"], [9, "mousedown", "listenMouse"]],
+        "$listeners$": undefined,
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
@@ -22330,9 +22404,11 @@ class DuetTray {
             { prop: "accessibleOpenLabel", defaults: "accessibleOpenLabelDefaults" },
             { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" },
         ]);
+        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
     }
     /**
      * Component event handling.

package/lib/cjs/app-globals-aece069f.js

@@ -0,0 +1,28 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+const setupLoggers = () => {
+    {
+        globalThis.ds = {
+            log: () => {
+                return;
+            },
+            warn: () => {
+                return;
+            },
+            info: () => {
+                return;
+            },
+        };
+    }
+};
+
+const appGlobalScript = () => {
+    setupLoggers();
+};
+
+const globalScripts = appGlobalScript;
+
+exports.globalScripts = globalScripts;

package/lib/cjs/duet-action-button.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ce232ed8.js');
+const index = require('./index-2dc54a15.js');
 const themeableComponent = require('./themeable-component-83a2a0d4.js');
 const createId = require('./create-id-1f8c438f.js');
 const jsUtils = require('./js-utils-92e24ba1.js');
-const keyboardUtils = require('./keyboard-utils-02441bc5.js');
+const keyboardUtils = require('./keyboard-utils-7248dd0a.js');
 const languageUtils = require('./language-utils-e8a527e5.js');
 const tokenUtils = require('./token-utils-84b3bca6.js');
 require('./string-utils-053749ff.js');

package/lib/cjs/duet-alert.cjs.entry.js

@@ -5,9 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ce232ed8.js');
+const index = require('./index-2dc54a15.js');
 const themeableComponent = require('./themeable-component-83a2a0d4.js');
 const createId = require('./create-id-1f8c438f.js');
+const keyboardUtils = require('./keyboard-utils-7248dd0a.js');
 const languageUtils = require('./language-utils-e8a527e5.js');
 require('./string-utils-053749ff.js');
 
@@ -62,12 +63,14 @@ const DuetAlert = class {
     }
     connectedCallback() {
         languageUtils.connectLanguageChangeObserver(this, { prop: "accessibleLabel", defaults: "accessibleLabelDefaults" });
+        keyboardUtils.subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         if (this.timeoutID) {
             clearTimeout(this.timeoutID);
         }
         languageUtils.disconnectLanguageChangeObserver(this);
+        keyboardUtils.unsubscribeTabbingChange(this);
     }
     /**
      * Show.

package/lib/cjs/duet-badge.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ce232ed8.js');
+const index = require('./index-2dc54a15.js');
 const themeableComponent = require('./themeable-component-83a2a0d4.js');
 
 const duetBadgeCss = "*,*::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;margin-right:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-badge{width:100%;padding:4.4444444444px 12px 5.4444444444px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.75rem;font-style:normal;font-weight:600;line-height:1.25;color:rgb(0, 41, 77);text-align:center;word-break:break-word;vertical-align:middle;background:#d9ebf4;border-radius:20rem}.duet-badge.duet-p-0{padding:0 !important}.duet-badge.duet-m-0{margin:0 !important}.duet-badge.duet-theme-turva{padding:5.4444444444px 12px 4.4444444444px;font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:rgb(23, 28, 58);background:#e8e8eb}.duet-badge.warning{background:#fdecc9}.duet-badge.warning.duet-theme-turva{background:#fee8c3}.duet-badge.danger{background:#f8d3e0}.duet-badge.danger.duet-theme-turva{background:#f9d4cf}.duet-badge.success{background:#cce7de}.duet-badge.success.duet-theme-turva{background:#cee7dc}.duet-badge.subtle{color:rgb(101, 119, 135);background:none;outline:1px solid rgb(225, 227, 230);outline-offset:-1px}.duet-badge.subtle.duet-theme-turva{color:rgb(68, 68, 69);background:none;outline-color:rgb(228, 228, 230)}.duet-badge.background-strong.default{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-badge.background-strong.default.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(23, 28, 58)}.duet-badge.background-strong.warning{background:#f9c153}.duet-badge.background-strong.warning.duet-theme-turva{background:#fbb63f}.duet-badge.background-strong.danger{color:rgb(255, 255, 255);background:rgb(222, 35, 98)}.duet-badge.background-strong.danger.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(224, 42, 13)}.duet-badge.background-strong.success{color:rgb(255, 255, 255);background:rgb(0, 135, 90)}.duet-badge.background-strong.success.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(8, 135, 78)}.duet-badge.background-strong.subtle{border-color:rgb(207, 210, 212);outline-color:rgb(0, 41, 77)}.duet-badge.background-strong.subtle.duet-theme-turva{border-color:rgb(207, 207, 209);outline-color:rgb(23, 28, 58)}";

package/lib/cjs/duet-banner.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ce232ed8.js');
+const index = require('./index-2dc54a15.js');
 const themeableComponent = require('./themeable-component-83a2a0d4.js');
 const stringUtils = require('./string-utils-053749ff.js');
 const tokenUtils = require('./token-utils-84b3bca6.js');

package/lib/cjs/duet-breadcrumb.cjs.entry.js

@@ -5,8 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ce232ed8.js');
+const index = require('./index-2dc54a15.js');
 const themeableComponent = require('./themeable-component-83a2a0d4.js');
+const keyboardUtils = require('./keyboard-utils-7248dd0a.js');
 const languageUtils = require('./language-utils-e8a527e5.js');
 require('./string-utils-053749ff.js');
 
@@ -22,10 +23,12 @@ const DuetBreadcrumb = class {
             sv: "disabled. Visa mer",
             en: "disabled. Nuvarande sida",
         };
+        this.hasSlottedContent = false;
         this.theme = "";
         this.language = languageUtils.getLanguage();
         this.href = "";
         this.icon = "";
+        this.iconSize = "x-small";
         this.accessibleLabel = undefined;
     }
     /**
@@ -36,9 +39,12 @@ const DuetBreadcrumb = class {
     }
     connectedCallback() {
         languageUtils.connectLanguageChangeObserver(this);
+        keyboardUtils.subscribeTabbingChange(this);
+        this.hasSlottedContent = Array.from(this.element.childNodes).length > 0;
     }
     disconnectedCallback() {
         languageUtils.disconnectLanguageChangeObserver(this);
+        keyboardUtils.unsubscribeTabbingChange(this);
     }
     /**
      * render() function
@@ -49,7 +55,10 @@ const DuetBreadcrumb = class {
         return (index.h(index.Host, { role: "listitem" }, index.h("div", { class: "container" }, !this.icon && (index.h("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" })), index.h("a", { class: {
                 "duet-breadcrumb": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${languageUtils.getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon && index.h("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }), !this.icon && index.h("slot", null)))));
+            }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${languageUtils.getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon && [
+            index.h("duet-icon", { size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && index.h("duet-spacer", { size: "x-small", direction: "horizontal" }),
+        ], index.h("slot", null)))));
     }
     get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-breadcrumbs.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ce232ed8.js');
+const index = require('./index-2dc54a15.js');
 const themeableComponent = require('./themeable-component-83a2a0d4.js');
 const languageUtils = require('./language-utils-e8a527e5.js');
 require('./string-utils-053749ff.js');

package/lib/cjs/duet-button_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ce232ed8.js');
+const index = require('./index-2dc54a15.js');
 const themeableComponent = require('./themeable-component-83a2a0d4.js');
 const commonStrings = require('./common-strings-22c70ef0.js');
 const languageUtils = require('./language-utils-e8a527e5.js');