@duetds/components 8.1.0 → 8.1.1

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

@@ -3,6 +3,7 @@
  */
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 export class DuetNotification {
     constructor() {
@@ -27,9 +28,11 @@ export class DuetNotification {
     }
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "accessibleLabelUnread", defaults: "accessibleLabelUnreadDefaults" });
+        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
     }
     /**
      * Move focus to the notification's link element.

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -4,6 +4,7 @@
 import arrowDownIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 const ESC_KEY = 27;
 export class DuetNotificationDrawer {
@@ -49,10 +50,12 @@ export 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;

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -6,7 +6,7 @@ import subtractIcon from "@duetds/icons/lib/assets/action-subtract";
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, } from "../../utils/keyboard-utils";
+import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocale, getLocaleString, } from "../../utils/language-utils";
 import { clamp, roundTo, SafeParseFloat } from "../../utils/math.utils";
 export class DuetNumberInput {
@@ -241,9 +241,11 @@ export 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

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

@@ -6,6 +6,7 @@ import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import isInternetExplorer from "../../utils/is-internet-explorer";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 const colors = {
     turva: {
         active: colorPrimaryTurva,
@@ -77,6 +78,12 @@ export 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()`.

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

@@ -20,16 +20,18 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  position: absolute;
   height: 100%;
 }
 
-:host slot:not([name=toggle])::slotted(*) {
+::slotted(*) {
   position: relative;
+  width: 100%;
   visibility: hidden;
   opacity: 0;
 }
 
-:host([open]) slot:not([name=toggle])::slotted(*) {
+:host([open]) ::slotted(*) {
   visibility: visible;
   opacity: 1;
 }
@@ -149,17 +151,9 @@
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 
-::slotted(*) {
-  width: 100%;
-}
-
 slot {
   color: rgb(0, 41, 77);
 }
 .duet-theme-turva slot {
   color: rgb(23, 28, 58);
-}
-
-slot[name=toggle] {
-  color: inherit;
 }

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

@@ -5,7 +5,7 @@ import editIcon from "@duetds/icons/lib/assets/action-edit-2";
 import { Build, h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-import { isKeyboardClick } from "../../utils/keyboard-utils";
+import { isKeyboardClick, subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot heading-content - Step heading content. Use this slot to show additional content next to step heading.
@@ -47,6 +47,12 @@ export class DuetStep {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
+    connectedCallback() {
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        unsubscribeTabbingChange(this);
+    }
     /**
      * Programmatically shift focus to the step's heading.
      */

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

@@ -4,7 +4,7 @@
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey } from "../../utils/keyboard-utils";
+import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 /**
  * @part ${identifier}-button - piercing selector for styling tab buttons
@@ -106,12 +106,14 @@ export class DuetTabGroup {
             });
         }
         await this.updateTabs();
+        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         if (this.mutationO) {
             this.mutationO.disconnect();
             this.mutationO = undefined;
         }
+        unsubscribeTabbingChange(this);
     }
     componentWillLoad() {
         inheritGlobalTheme(this);

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

@@ -4,6 +4,7 @@
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 export class DuetToggle {
     constructor() {
         /**
@@ -53,6 +54,12 @@ export 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()`.

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

@@ -3,13 +3,13 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 /**
  * @internal
  * This component is solely for internal use by duet-tooltip.
  */
 export class DuetTooltipButton {
     constructor() {
-        this.userIsTabbing = false;
         this.label = "";
         this.accessibleLabel = undefined;
         this.theme = "";
@@ -22,13 +22,11 @@ export 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) {
@@ -40,7 +38,7 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { class: { "user-is-tabbing": this.userIsTabbing } }, h("button", { ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        return (h(Host, null, h("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",
@@ -155,11 +153,6 @@ export class DuetTooltipButton {
             }
         };
     }
-    static get states() {
-        return {
-            "userIsTabbing": {}
-        };
-    }
     static get methods() {
         return {
             "setFocus": {
@@ -190,19 +183,4 @@ export class DuetTooltipButton {
         };
     }
     static get elementRef() { return "element"; }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "listenKeys",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "mousedown",
-                "method": "listenMouse",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
 }

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

@@ -4,6 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { FocusGuard } from "../../utils/focus-utils";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { Teleport } from "../../utils/teleport";
 /**
  * @internal
@@ -14,7 +15,6 @@ export class DuetTooltipPopup {
         this.handleCloseClick = () => {
             this.tooltipPopupClosed.emit();
         };
-        this.userIsTabbing = false;
         this.theme = "";
         this.active = undefined;
         this.tooltipId = undefined;
@@ -37,13 +37,11 @@ export 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;
@@ -55,7 +53,7 @@ export class DuetTooltipPopup {
         this.contentEl.focus();
     }
     render() {
-        return (h(Host, { class: { "user-is-tabbing": this.userIsTabbing } }, h("div", { class: {
+        return (h(Host, null, h("div", { class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
@@ -184,11 +182,6 @@ export class DuetTooltipPopup {
             }
         };
     }
-    static get states() {
-        return {
-            "userIsTabbing": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "tooltipPopupClosed",
@@ -282,19 +275,4 @@ export class DuetTooltipPopup {
                 "methodName": "handleActiveChange"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "listenKeys",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "mousedown",
-                "method": "listenMouse",
-                "target": "window",
-                "capture": false,
-                "passive": true
-            }];
-    }
 }

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

@@ -190,6 +190,10 @@ export class DuetTooltip {
             // top of other tooltips and the header.
             zIndex: this.active ? "201" : "",
         };
+        const popupContainerStyles = {
+            position: "relative",
+            overflow: this.active ? "visible" : "hidden",
+        };
         const positionStyles = {
             top: `${this.tooltipY}px`,
             left: `${this.tooltipX}px`,
@@ -200,7 +204,7 @@ export class DuetTooltip {
             top: this.arrowY ? `${this.arrowY}px` : undefined,
             left: this.arrowX ? `${this.arrowX}px` : undefined,
         };
-        return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.active, tooltipId: this.tooltipId, label: this.label, accessibleLabel: this.accessibleInputLabel ? `${this.accessibleInputLabel}, ${this.accessibleLabel}` : this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme }), h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null))));
+        return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.active, tooltipId: this.tooltipId, label: this.label, accessibleLabel: this.accessibleInputLabel ? `${this.accessibleInputLabel}, ${this.accessibleLabel}` : this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme }), h("div", { style: popupContainerStyles }, h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null)))));
     }
     static get is() { return "duet-tooltip"; }
     static get encapsulation() { return "scoped"; }

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

@@ -5,6 +5,7 @@ import { sizeHeader } from "@duetds/tokens";
 import { Fragment, h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
+import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 const topOffset = parseFloat(sizeHeader) * 2 * 16; // convert rem -> px
 /**
@@ -61,9 +62,11 @@ export class DuetTray {
             { prop: "accessibleOpenLabel", defaults: "accessibleOpenLabelDefaults" },
             { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" },
         ]);
+        subscribeTabbingChange(this);
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
     }
     /**
      * Component event handling.

package/lib/collection/global/duet-global.js

@@ -2,32 +2,6 @@
  * Built with Duet Design System
  */
 import { setupLoggers } from "./log-wrapper";
-const TAB_KEY = 9;
 export default () => {
-    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();
 };

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

@@ -1,18 +1,49 @@
 /*!
  * Built with Duet Design System
  */
-export const isArrowLeftKey = (e) => e.keyCode === 37;
-export const isArrowUpKey = (e) => e.keyCode === 38;
-export const isArrowRightKey = (e) => e.keyCode === 39;
-export const isArrowDownKey = (e) => e.keyCode === 40;
+export const isArrowLeftKey = (e) => e.key === "ArrowLeft" || e.key === "Left";
+export const isArrowUpKey = (e) => e.key === "ArrowUp" || e.key === "Up";
+export const isArrowRightKey = (e) => e.key === "ArrowRight" || e.key === "Right";
+export const isArrowDownKey = (e) => e.key === "ArrowDown" || e.key === "Down";
 export const isArrowKey = (e) => isArrowDownKey(e) || isArrowRightKey(e) || isArrowUpKey(e) || isArrowLeftKey(e);
-export const isEscapeKey = (e) => e.key === "Escape" || e.key === "Esc" || e.keyCode === 27;
-export const isTabKey = (e) => e.key === "Tab" || e.keyCode === 9;
-export const isBackspaceKey = (e) => e.keyCode === 8;
-export const isSpaceKey = (e) => e.key === "Space" || e.keyCode === 32;
-export const isPlusKey = (e) => e.key === "+" || e.keyCode === 43;
-export const isMinusKey = (e) => e.key === "-" || e.keyCode === 45;
+export const isEscapeKey = (e) => e.key === "Escape" || e.key === "Esc";
+export const isTabKey = (e) => e.key === "Tab";
+export const isBackspaceKey = (e) => e.key === "Backspace";
+export const isSpaceKey = (e) => e.key === " " || e.key === "Spacebar";
+export const isPlusKey = (e) => e.key === "+" || e.key === "Add";
+export const isMinusKey = (e) => e.key === "-" || e.key === "Subtract";
 export const isQuestionKey = (e) => e.key === "?";
-export const isEnterKey = (e) => e.key === "Enter" || e.keyCode === 13;
+export const isEnterKey = (e) => e.key === "Enter";
 export const isKeyboardClick = (e) => isEnterKey(e) || isSpaceKey(e);
-export const isNumber = (e) => (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);
+export 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);
+}
+export const subscribeTabbingChange = component => {
+    tabbingChangeSubscribers.add(component);
+};
+export const unsubscribeTabbingChange = component => {
+    tabbingChangeSubscribers.delete(component);
+};

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-402e81c0.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-fc1fa737.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-247a9d01.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-8b89622f.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-a6e6f578.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-10a15ea1.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-6f7dcc4d.js';
+import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-04a295c6.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { h } from './p-62c7d9d4.js';
 import { p as parsePossibleJSON } from './p-0e052642.js';
 import { g as getColorByName } from './p-57a1cba9.js';
-import { d as defineCustomElement$4 } from './p-ba0f907f.js';
-import { d as defineCustomElement$3 } from './p-76b345c8.js';
-import { d as defineCustomElement$2 } from './p-a45d0398.js';
+import { d as defineCustomElement$4 } from './p-adef0aaa.js';
+import { d as defineCustomElement$3 } from './p-65d472d7.js';
+import { d as defineCustomElement$2 } from './p-6222a43f.js';
 
 const DuetPicture = ({ img, sources }) => {
     return (h("picture", null,

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

@@ -1,10 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-6f7dcc4d.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-04a295c6.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-8f253845.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-2e36d5bf.js';
-import { d as defineCustomElement$2 } from './p-76b345c8.js';
+import { d as defineCustomElement$3 } from './p-65d472d7.js';
+import { d as defineCustomElement$2 } from './p-e034dfea.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>"};
 
@@ -20,10 +22,12 @@ const DuetBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class DuetBreadcrumb e
             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;
     }
     /**
@@ -34,9 +38,12 @@ const DuetBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class DuetBreadcrumb e
     }
     connectedCallback() {
         connectLanguageChangeObserver(this);
+        subscribeTabbingChange(this);
+        this.hasSlottedContent = Array.from(this.element.childNodes).length > 0;
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
+        unsubscribeTabbingChange(this);
     }
     /**
      * render() function
@@ -47,7 +54,10 @@ const DuetBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class DuetBreadcrumb e
         return (h(Host, { role: "listitem" }, h("div", { class: "container" }, !this.icon && (h("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" })), h("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 && h("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }), !this.icon && h("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 && [
+            h("duet-icon", { size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && h("duet-spacer", { size: "x-small", direction: "horizontal" }),
+        ], h("slot", null)))));
     }
     get element() { return this; }
     static get style() { return duetBreadcrumbCss; }
@@ -55,6 +65,7 @@ const DuetBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class DuetBreadcrumb e
         "theme": [1025],
         "href": [1025],
         "icon": [1025],
+        "iconSize": [1, "icon-size"],
         "accessibleLabel": [1, "accessible-label"],
         "language": [32]
     }]);
@@ -62,7 +73,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["duet-breadcrumb", "duet-icon"];
+    const components = ["duet-breadcrumb", "duet-icon", "duet-spacer"];
     components.forEach(tagName => { switch (tagName) {
         case "duet-breadcrumb":
             if (!customElements.get(tagName)) {
@@ -70,6 +81,11 @@ function defineCustomElement$1() {
             }
             break;
         case "duet-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "duet-spacer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-6f7dcc4d.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-04a295c6.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { g as getLocaleString } from './p-2e36d5bf.js';
 

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-5fe36e8b.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-1224c98d.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-6f7dcc4d.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-04a295c6.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
-import { d as defineCustomElement$3 } from './p-76b345c8.js';
-import { d as defineCustomElement$2 } from './p-a45d0398.js';
+import { d as defineCustomElement$3 } from './p-65d472d7.js';
+import { d as defineCustomElement$2 } from './p-6222a43f.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 .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{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";