@duetds/components 6.7.1 → 6.8.0

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

@@ -23,6 +23,10 @@
   display: inline;
 }
 
+:host(.duet-link-block) {
+  display: block;
+}
+
 .duet-link {
   display: inline;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -98,4 +102,27 @@
   height: auto;
   outline: 0;
   opacity: 1;
+}
+
+.block.duet-link {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 16px;
+  align-items: center;
+  padding: 16px;
+  font-weight: 600;
+  color: rgb(0, 41, 77);
+  text-decoration: none;
+}
+.block.duet-link.duet-link-has-icon {
+  grid-template-columns: auto 1fr auto;
+}
+.block.duet-link.none {
+  padding: 0;
+}
+.block .block__chevron-icon {
+  transition: 300ms ease;
+}
+.block:hover .block__chevron-icon {
+  transform: translateX(4px);
 }

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

@@ -1,6 +1,7 @@
 /*!
  * Built with Duet Design System
  */
+import chevronIcon from "@duetds/icons/lib/assets/action-arrow-right";
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Build, Fragment, h, Host } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
@@ -11,6 +12,7 @@ import { getLanguage, getLocaleString } from "../../utils/language-utils";
  */
 export class DuetLink {
   constructor() {
+    this.variation = "default";
     this.accessibleLabel = undefined;
     this.language = getLanguage();
     this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
@@ -20,6 +22,8 @@ export class DuetLink {
     this.url = "#";
     this.external = false;
     this.tabToLink = false;
+    this.icon = undefined;
+    this.padding = "auto";
   }
   /**
    * Component lifecycle events.
@@ -34,6 +38,12 @@ export class DuetLink {
   async setFocus(options) {
     this.nativeLink.focus(options);
   }
+  renderContent() {
+    return (h(Fragment, null, h("slot", null), Build.isBrowser && this.external && (h(Fragment, null, "\u00A0\u00A0", h("duet-visually-hidden", null, this.accessibleLabelExternal), "\u00A0", h("span", { class: "duet-link-external" }, "\u00A0", h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
+  }
+  renderGrid() {
+    return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }))), h("span", { class: "block__content" }, this.renderContent()), h("span", { class: "block__chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -41,12 +51,18 @@ export class DuetLink {
   render() {
     // Notice that the external icon needs to be places right after the last word of the link.
     // This is why we use &nbps; to keep everything on the same line.
-    return (h(Host, null, h("a", { href: this.url, class: {
+    return (h(Host, { class: {
+        "duet-link-block": this.variation === "block",
+      } }, h("a", { href: this.url, class: {
         "duet-link": true,
         "duet-link-is-external": this.external,
+        "duet-link-has-icon": !!this.icon,
         "duet-tab-to-link": this.tabToLink,
         "duet-theme-turva": this.theme === "turva",
-      }, 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 }, h("slot", null), Build.isBrowser && this.external && (h(Fragment, null, "\u00A0\u00A0", h("duet-visually-hidden", null, this.accessibleLabelExternal), "\u00A0", h("span", { class: "duet-link-external" }, "\u00A0", h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))));
+        "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())));
   }
   static get is() { return "duet-link"; }
   static get encapsulation() { return "shadow"; }
@@ -63,6 +79,29 @@ export class DuetLink {
   }
   static get properties() {
     return {
+      "variation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLinkVariation",
+          "resolved": "\"block\" | \"default\"",
+          "references": {
+            "DuetLinkVariation": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Style variation of the link."
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "accessibleLabel": {
         "type": "string",
         "mutable": false,
@@ -249,6 +288,51 @@ export class DuetLink {
         "attribute": "tab-to-link",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon to display on the left side of the ink text. (only with variations other than \"default\")"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "padding": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetPadding",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetPadding": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the padding of the component (only with variations other than \"default\")"
+        },
+        "attribute": "padding",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       }
     };
   }

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

@@ -58,6 +58,10 @@ export class DuetList {
       this.toggleClass(item, "duet-list-breakpoint-large", this.breakpoint === "large");
       // Create zebra striping if striped variation is used
       this.toggleClass(item, "duet-list-striped", this.variation === "striped");
+      // Create borders if bordered variation is used
+      this.toggleClass(item, "duet-list-bordered", this.variation === "bordered");
+      // Create inner borders if inner-bordered variation is used
+      this.toggleClass(item, "duet-list-inner-bordered", this.variation === "inner-bordered");
       // Finally apply turva theme if necessary
       this.toggleClass(item, "duet-theme-turva", this.theme === "turva");
     });
@@ -161,7 +165,7 @@ export class DuetList {
           "references": {
             "DuetListMobileAlignment": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },
@@ -184,7 +188,7 @@ export class DuetList {
           "references": {
             "DuetListBreakpoint": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },
@@ -203,11 +207,11 @@ export class DuetList {
         "mutable": false,
         "complexType": {
           "original": "DuetListVariation",
-          "resolved": "\"default\" | \"striped\"",
+          "resolved": "\"bordered\" | \"default\" | \"inner-bordered\" | \"striped\"",
           "references": {
             "DuetListVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },
@@ -230,7 +234,7 @@ export class DuetList {
           "references": {
             "DuetListLabelWidth": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-list/duet-list.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },

package/lib/collection/components/duet-list-item/duet-list-item.css

@@ -112,6 +112,30 @@
   background: rgb(245, 245, 247);
 }
 
+:host(.duet-list-bordered) {
+  border-block-start: 1px solid rgb(225, 227, 230);
+}
+
+:host(.duet-list-bordered:last-child) {
+  border-block-end: 1px solid rgb(225, 227, 230);
+}
+
+:host(.duet-list-bordered.duet-theme-turva) {
+  border-block-start: 1px solid rgb(228, 228, 230);
+}
+
+:host(.duet-list-bordered.duet-theme-turva:last-child) {
+  border-block-end: 1px solid rgb(228, 228, 230);
+}
+
+:host(.duet-list-inner-bordered:not(:last-child)) {
+  border-block-end: 1px solid rgb(225, 227, 230);
+}
+
+:host(.duet-list-inner-bordered.duet-theme-turva:not(:last-child)) {
+  border-block-end: 1px solid rgb(228, 228, 230);
+}
+
 :host(.duet-list-width-30) dt {
   flex-basis: 33%;
 }

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

@@ -168,7 +168,7 @@ export class DuetLogo {
           "references": {
             "DuetLogoSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-logo/duet-logo.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-logo/duet-logo.tsx"
             }
           }
         },

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

@@ -23,7 +23,13 @@ export class DuetMenuBar {
       this.rightMoreVisible = this.container.scrollLeft !== this.container.scrollWidth - this.container.clientWidth;
     };
     this.scrollToActive = () => {
-      const active = this.element.querySelector("[active]");
+      const actives = this.element.querySelectorAll("[active]");
+      let active;
+      actives.forEach(a => {
+        if (a.active) {
+          active = a;
+        }
+      });
       if (active && active.offsetLeft) {
         if (active.offsetLeft > 50) {
           this.container.scrollLeft = active.offsetLeft - this.element.offsetWidth / 2 + active.offsetWidth / 2;
@@ -201,7 +207,7 @@ export class DuetMenuBar {
           "references": {
             "DuetMenuBarChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx"
             }
           }
         }

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

@@ -167,22 +167,21 @@ export class DuetModal {
       iconColor = "primary-turva";
       closeColor = "secondary-turva";
     }
-    return (h("div", { ref: modal => (this.modalEl = modal), "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy ? `${this.slotDefaultId} ${this.accessibleDescribedBy}` : this.slotDefaultId, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
+    return (h("div", { ref: modal => (this.modalEl = modal), "aria-labelledby": this.modalId, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
         "duet-modal-overlay": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-modal-active": this.open,
-      } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { class: {
+      } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
         "duet-modal-inner": true,
         "duet-modal-large": this.size === "large",
-      }, role: "document", onClick: e => {
+      }, onClick: e => {
         if (this.closeOnBlur) {
-          this.closeModal(e);
-        }
-      } }, h("div", { class: { "duet-modal": true, [this.size]: true }, onClick: e => {
-        if (this.closeOnBlur) {
-          e.stopPropagation();
+          const source = e.target || e.srcElement;
+          if (source === this.modalInnerEl) {
+            this.closeModal(e);
+          }
         }
-      } }, h("duet-spacer", null), h("div", { class: "duet-modal-close" }, h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), h("div", { class: {
+      } }, h("div", { class: { "duet-modal": true, [this.size]: true } }, h("duet-spacer", null), h("div", { class: "duet-modal-close" }, h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), h("div", { class: {
         "duet-modal-body": true,
         "duet-modal-gutter-small": this.gutterSize === "small",
         "duet-modal-gutter-medium": this.gutterSize === "medium",
@@ -288,7 +287,7 @@ export class DuetModal {
           "references": {
             "DuetModalSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx"
             }
           }
         },
@@ -381,7 +380,7 @@ export class DuetModal {
           "references": {
             "DuetModalSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx"
             }
           }
         },
@@ -617,7 +616,7 @@ export class DuetModal {
           "references": {
             "DuetModalCloseEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-modal/duet-modal.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx"
             }
           }
         }

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

@@ -247,7 +247,7 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
             }
           }
         },
@@ -362,7 +362,7 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectItem": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
             }
           }
         },
@@ -478,7 +478,7 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
             }
           }
         }
@@ -498,7 +498,7 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
             }
           }
         }
@@ -518,7 +518,7 @@ export class DuetMultiselect {
           "references": {
             "DuetMultiselectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-multiselect/duet-multiselect.tsx"
             }
           }
         }

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

@@ -278,7 +278,7 @@ export class DuetNotificationDrawer {
           "references": {
             "DuetNotificationDrawerDirection": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx"
             }
           }
         },

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

@@ -976,7 +976,7 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx"
             }
           }
         }
@@ -996,7 +996,7 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx"
             }
           }
         }
@@ -1016,7 +1016,7 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx"
             }
           }
         }
@@ -1036,7 +1036,7 @@ export class DuetNumberInput {
           "references": {
             "DuetNumberInputEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-number-input/duet-number-input.tsx"
             }
           }
         }

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

@@ -329,7 +329,7 @@ export class DuetPagination {
           "references": {
             "DuetPaginationVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-pagination/duet-pagination.tsx"
             }
           }
         },
@@ -572,7 +572,7 @@ export class DuetPagination {
           "references": {
             "DuetPaginationPageEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-pagination/duet-pagination.tsx"
             }
           }
         }

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

@@ -107,7 +107,7 @@ export class DuetParagraph {
           "references": {
             "DuetParagraphSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
             }
           }
         },
@@ -130,7 +130,7 @@ export class DuetParagraph {
           "references": {
             "DuetParagraphWeight": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
             }
           }
         },
@@ -153,7 +153,7 @@ export class DuetParagraph {
           "references": {
             "DuetParagraphVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx"
             }
           }
         },

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

@@ -534,7 +534,7 @@ export class DuetRadio {
           "references": {
             "DuetRadioEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx"
             }
           }
         }
@@ -554,7 +554,7 @@ export class DuetRadio {
           "references": {
             "DuetRadioEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx"
             }
           }
         }
@@ -574,7 +574,7 @@ export class DuetRadio {
           "references": {
             "DuetRadioEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-radio/duet-radio.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx"
             }
           }
         }

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

@@ -512,7 +512,7 @@ export class DuetRangeSlider {
           "references": {
             "DuetRangeChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx"
             }
           }
         }
@@ -532,7 +532,7 @@ export class DuetRangeSlider {
           "references": {
             "DuetRangeChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx"
             }
           }
         }

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

@@ -333,7 +333,7 @@ export class DuetRangeStepper {
           "references": {
             "DuetRangeStepperUpdateEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx"
             }
           }
         }

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

@@ -170,7 +170,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -465,7 +465,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectItems": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -614,7 +614,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -634,7 +634,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -654,7 +654,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }

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

@@ -189,7 +189,7 @@ export class DuetSlideout {
           "references": {
             "DuetSlideoutEventDetails": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-slideout/duet-slideout.tsx"
             }
           }
         }

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

@@ -78,6 +78,13 @@
   font-size: 1.5rem;
   font-weight: 800;
 }
+.duet-slideout-link .label {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
 
 slot[name=description]::slotted(*) {
   display: block;

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

@@ -31,7 +31,7 @@ export class DuetSlideoutLink {
         "duet-theme-turva": this.theme === "turva",
         active: this.active,
         [this.size]: true,
-      }, href: this.href, role: this.menuItem && "menuitem", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { name: this.icon, color: this.menuItem && "currentColor", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("span", null, h("slot", null), h("slot", { name: "description" })), this.caret && h("duet-icon", { name: "action-arrow-right", color: "primary", size: "x-small", margin: "none" }))));
+      }, href: this.href, role: this.menuItem && "menuitem", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { name: this.icon, color: this.menuItem && "currentColor", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { class: "label" }, h("span", null, h("slot", null), h("slot", { name: "description" })), this.caret && (h("duet-icon", { name: "action-arrow-right", color: "primary", size: "x-small", margin: "none" }))))));
   }
   static get is() { return "duet-slideout-link"; }
   static get encapsulation() { return "shadow"; }