@duetds/components 9.2.2 → 9.2.4

package/lib/collection/components/duet-shaped-image/duet-shaped-image.js

@@ -25,9 +25,9 @@ export class DuetShapedImage {
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { key: '5df9410ffe66931da7f0559adbceaafd268eef43', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: 'abcaa854db75c947ce79be2b14b0a7ad47fbb59d', class: {
+        return (h(Host, { key: 'cb4154853051eec78a10658344407c1653d737b3', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '5cab0035d46b9e020cf7e4a18105a999646ad437', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '2891f9a50a69234a4caee374bedd5d145bc8e945', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'd6a4e824422d03984a69fdf34a815f569a30e636', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '8c2d2bb60ac9042377402dea4453e4ec17885aac', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '765b32769035c6746c0412be9fe3b70bf8c75039', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
     }
     static get is() { return "duet-shaped-image"; }
     static get encapsulation() { return "shadow"; }
@@ -63,6 +63,8 @@ export class DuetShapedImage {
                     "tags": [],
                     "text": "Theme of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -81,6 +83,8 @@ export class DuetShapedImage {
                     "tags": [],
                     "text": "Adds accessible label for the image that is only shown for screen readers."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -104,6 +108,8 @@ export class DuetShapedImage {
                     "tags": [],
                     "text": "Controls the margin of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -122,6 +128,8 @@ export class DuetShapedImage {
                     "tags": [],
                     "text": "A URL from which to load an image."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "src",
                 "reflect": false
             },
@@ -142,6 +150,8 @@ export class DuetShapedImage {
                         }],
                     "text": "Rotation. Note: in 'turva' theme there's no rotation."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "rotation",
                 "reflect": false,
                 "defaultValue": "7"

package/lib/collection/components/duet-show-more/duet-show-more.css

@@ -40,7 +40,14 @@
 .duet-show-more.open .slotted-content {
   display: block;
 }
+.duet-show-more .content:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
 .duet-show-more.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";
   color: rgb(23, 28, 58);
+}
+.duet-show-more.duet-theme-turva .content:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -131,6 +131,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -161,6 +163,8 @@ export class DuetShowMore {
                         }],
                     "text": "The currently active language. This setting also changes the logo to match\nthe chosen language."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
@@ -185,6 +189,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Default translations for show more label."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "{\n    fi: \"N\u00E4yt\u00E4 lis\u00E4\u00E4\",\n    sv: \"Visa mer\",\n    en: \"Show more\",\n  }"
             },
             "showMoreLabel": {
@@ -201,6 +207,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Show more label. Defaults to what is in showMoreLabelDefaults prop."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-more-label",
                 "reflect": true,
                 "defaultValue": "getLocaleString(this.showMoreLabelDefaults)"
@@ -225,6 +233,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Default translations for show less label."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "{\n    fi: \"N\u00E4yt\u00E4 v\u00E4hemm\u00E4n\",\n    sv: \"Visa mindre\",\n    en: \"Show less\",\n  }"
             },
             "showLessLabel": {
@@ -241,6 +251,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Show less label. Defaults to what is in showLessLabelDefaults prop."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-less-label",
                 "reflect": true,
                 "defaultValue": "getLocaleString(this.showLessLabelDefaults)"
@@ -265,6 +277,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Default translations for show more accessible label."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "{\n    fi: \"N\u00E4yt\u00E4 lis\u00E4\u00E4 t\u00E4st\u00E4 aiheesta\",\n    sv: \"Visa mer om detta \u00E4mne\",\n    en: \"Show more about this subject\",\n  }"
             },
             "showMoreAccessibleLabel": {
@@ -281,6 +295,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Show more accessible label. Defaults to what is in showMoreAccessibleLabelDefaults prop."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-more-accessible-label",
                 "reflect": true,
                 "defaultValue": "getLocaleString(\n    this.showMoreAccessibleLabelDefaults\n  )"
@@ -305,6 +321,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Default translations for show less accessible label."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "{\n    fi: \"N\u00E4yt\u00E4 v\u00E4hemm\u00E4n t\u00E4st\u00E4 aiheesta\",\n    sv: \"Visa mindre om detta \u00E4mne\",\n    en: \"Show less about this subject\",\n  }"
             },
             "showLessAccessibleLabel": {
@@ -321,6 +339,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Show less accessible label. Defaults to what is in showLessAccessibleLabelDefaults prop."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-less-accessible-label",
                 "reflect": true,
                 "defaultValue": "getLocaleString(\n    this.showLessAccessibleLabelDefaults\n  )"
@@ -345,6 +365,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Controls the margin of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -369,6 +391,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Controls the margin of the button component inside of show more."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -393,6 +417,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Controls the padding of the button component inside of show more."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -411,6 +437,8 @@ export class DuetShowMore {
                     "tags": [],
                     "text": "Is the component expanded or collapsed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Build, h, Host, } from "@stencil/core";
-import { inheritGlobalTheme } from "../../common/themeable-component";
+import { inheritGlobalTheme } from "../../common";
 import { disableBodyScroll, enableBodyScroll } from "../../utils/body-scroll";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
@@ -74,9 +74,38 @@ export class DuetSlideout {
         this.theme = "";
         this.accessibleRole = "menubar";
         this.open = false;
-        this.opener = undefined;
         this.backgroundColor = "gray-lightest";
     }
+    /**
+     * DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given,
+     * the component automatically sets the click event listener to open the slideout.
+     */
+    get opener() {
+        return this._opener;
+    }
+    set opener(value) {
+        if (this.opener === value) {
+            return;
+        }
+        if (typeof value === "string") {
+            this.setOpenButton(document.getElementById(value));
+            if (this.openButton) {
+                this.openButton.addEventListener("click", this.openButtonEventListener);
+            }
+        }
+        else {
+            this.setOpenButton(value);
+        }
+    }
+    /**
+     * Alias for property opener.
+     */
+    get controller() {
+        return this._opener;
+    }
+    set controller(value) {
+        this.opener = value;
+    }
     /**
      * Component lifecycle events.
      */
@@ -95,12 +124,6 @@ export class DuetSlideout {
         if (this.teleport) {
             this.teleport.activate();
         }
-        if (this.opener) {
-            this.setOpenButton(document.getElementById(this.opener));
-            if (this.openButton) {
-                this.openButton.addEventListener("click", this.openButtonEventListener);
-            }
-        }
         this.setStickHeaderStyleMutations();
         this.mutationObserver = new MutationObserver(() => {
             this.openPanel = !!this.getOpenPanel();
@@ -211,15 +234,15 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: '382d37300cf05dcb13fdf8824876e0148029ac41' }, h("div", { key: '308a1a6d818574db32fc48c2a001b2c7e49cb694', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-overlay", { key: '7fa43387656dea8e448e89b8c42e88af59edfcf9', onClick: this.bgOnClick, visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '2d0d1d2d1b7e7b914c71605ba2e99bad4535e3c7', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
+        return (h(Host, { key: '289093e61e89d5724e3bb15cd7945fd39734ed53' }, h("div", { key: '3514ce08bf8d7a529cfbff42be55b8bcf192cc8f', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("duet-overlay", { key: 'b78a47d52483e0eb360dc0ccc9e657b5ccb9b030', onClick: this.bgOnClick, visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '95a7f2593ddf2def5019b3d6c84d5374f67fefb3', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '1fff6c072160d4bd1f4cbd0a76c350423e61cd7e', moveFocusTo: this.closeButton }), h("div", { key: '099e9fa740e958a60b4be655fbb821a850613fab', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '0364ef69089b576a3d046ad18cea8e421fd78f47', class: "top" }, h("button", { key: '4801538fe2d60e45bfcdf34aa796443be783ff29', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '8d2774b7413c3a4348831ea8f3484763560496d4', moveFocusTo: this.closeButton }), h("div", { key: '0ab02fea0fc88c1cad4e7964cf64ddd4e0991d3c', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '12b34a66f05a9d7d65c8d06a36aab27b9190c8ac', class: "top" }, h("button", { key: '7ffb3f3bace1d7983094573171a38dbac5c8a410', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'adddff71eb7c2d717909330b4a1b952989de80a7', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '2532328955997fed29910a8ce59cf95a08a453bd', class: "sticky-header" }, h("slot", { key: 'e6938e50feec7af6a66335e655942ffd1912c96e', name: "sticky-header" }))), h("div", { key: '14489762ae9efcbdd60d2673202f2e6a514d70dd', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'f25d28342f722a6d4b7705e45498a8036468bf74', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '0162ecd6fc8db33a7053a1bf44bdb0b7b220ec6f', class: "sticky-header" }, h("slot", { key: '6d47a428f6f63a9ea306af7b1553dcc5144e84c7', name: "sticky-header" }))), h("div", { key: '7fe090f9ad0f6eb825809a17b8610f5aefbd2ab2', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: 'da507350699332f3630e4d327447cb11989029f7' })), h(FocusGuard, { key: 'd9a0a209bd64fc4d099de599e0ee4c3842a54f02', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'bf013947faa4f1951dbb34616040b35d90e4770c' })), h(FocusGuard, { key: '388318c3a94cd035f6e02eb83e49e0d97ad56995', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }
@@ -255,6 +278,8 @@ export class DuetSlideout {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -273,6 +298,8 @@ export class DuetSlideout {
                     "tags": [],
                     "text": "Role of the slot's container. By default this is menubar and the slideout should by default contain menuitems."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-role",
                 "reflect": false,
                 "defaultValue": "\"menubar\""
@@ -291,6 +318,8 @@ export class DuetSlideout {
                     "tags": [],
                     "text": "Open"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
@@ -299,19 +328,70 @@ export class DuetSlideout {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "string | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        },
+                        "FocusableComponent": {
+                            "location": "import",
+                            "path": "../../common",
+                            "id": "src/common/index.ts::FocusableComponent"
+                        },
+                        "OpenerComponent": {
+                            "location": "import",
+                            "path": "../../common",
+                            "id": "src/common/index.ts::OpenerComponent"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Id of the DuetMenuBarButton or DuetButton that opens the menu."
+                    "text": "DuetMenuBarButton or DuetButton element, or id of an element, that opens the slideout. If id is given,\nthe component automatically sets the click event listener to open the slideout."
                 },
+                "getter": true,
+                "setter": true,
                 "attribute": "opener",
                 "reflect": false
             },
+            "controller": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        },
+                        "FocusableComponent": {
+                            "location": "import",
+                            "path": "../../common",
+                            "id": "src/common/index.ts::FocusableComponent"
+                        },
+                        "OpenerComponent": {
+                            "location": "import",
+                            "path": "../../common",
+                            "id": "src/common/index.ts::OpenerComponent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alias for property opener."
+                },
+                "getter": true,
+                "setter": true,
+                "attribute": "controller",
+                "reflect": false
+            },
             "backgroundColor": {
                 "type": "string",
                 "mutable": true,
@@ -332,6 +412,8 @@ export class DuetSlideout {
                     "tags": [],
                     "text": "Background color. Use one of the color tokens."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "background-color",
                 "reflect": true,
                 "defaultValue": "\"gray-lightest\""

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

@@ -35,7 +35,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: '921d8705f5435def5fbb0254a369e3ec9a61388c' }, h("div", { key: 'e0fd2be895c43bf917241e6f1421ba2090b3b7b5', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '328021a2402da1595829e837789a20d840d2bde6', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '44b1d9993cc174aa8a8e5abb6fa94bf6cb6ed80e' }))));
+        return (h(Host, { key: 'a3f0902bcc3942cfdd9bd39d753bfcfeeebf8bd4' }, h("div", { key: 'e4b2d5245b065602e7b74bab03d2ad9a6390d5ab', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '10f383d1179787ca4dda410b10ac2785bcbbcc36', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '3a3f899dd72eb996f48ac588474810a95fa6fc19' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }
@@ -71,6 +71,8 @@ export class DuetSlideoutLang {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""

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

@@ -26,12 +26,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f45a422bb18c9f386e3d1dc65efb9ba5f10fafca' }, h("a", { key: 'f23111a05259c83100372f73c2c888d0226f69ff', class: {
+        return (h(Host, { key: '756d30871c5f34ca3520a5bdecf5269c6a0b4afb' }, h("a", { key: '16dfc8d2bcae2379ab25ce353eda255e79d6ad6b', class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '919dadfb6d0469813de5a142127eec1e7cce51c6', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: 'acac1e1208342d14df7f9f6027355754be3fb7c7', class: "label" }, h("span", { key: 'aef4befd5b30c33dfdfcadb49fe30f1c676c3467' }, h("slot", { key: 'd49e0cbb71c1d89f66c63a0d783d2033a6dc4248' }), h("slot", { key: 'abf210a92d2391fa5319533441fc05983c69b9f3', name: "description" })), this.caret && (h("duet-icon", { key: '8f4900f2baa7f402614c92315803e14611be8db6', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '6551aa92fee9498b1fc2b4ebb18a89ff1c72e607', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: 'f841f0d234ffca0d1dbaaae18e9de9f1de02de55', class: "label" }, h("span", { key: '452f28fecf67c0da43ea807dd572d1db83e10ae6' }, h("slot", { key: '896258d4f5fbcc5efa21d49cd867e0578302dbef' }), h("slot", { key: '6de4aa964201a5ffe68d7f894a499289db302527', name: "description" })), this.caret && (h("duet-icon", { key: '3b7c9337d8d76eb9bcc71fe7277e84599692bce4', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }
@@ -61,6 +61,8 @@ export class DuetSlideoutLink {
                     "tags": [],
                     "text": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -84,6 +86,8 @@ export class DuetSlideoutLink {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -102,6 +106,8 @@ export class DuetSlideoutLink {
                     "tags": [],
                     "text": "Language of the link. Use this only for language selection links."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "target-language",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -120,6 +126,8 @@ export class DuetSlideoutLink {
                     "tags": [],
                     "text": "Active"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
@@ -138,6 +146,8 @@ export class DuetSlideoutLink {
                     "tags": [],
                     "text": "Href"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
@@ -156,6 +166,8 @@ export class DuetSlideoutLink {
                     "tags": [],
                     "text": "Icon"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
@@ -174,6 +186,8 @@ export class DuetSlideoutLink {
                     "tags": [],
                     "text": "Size. Inherit, small, medium or large. Inherit value inherits styles from the value in the underlying slot."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": true,
                 "defaultValue": "\"inherit\""
@@ -192,6 +206,8 @@ export class DuetSlideoutLink {
                     "tags": [],
                     "text": "Caret"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "caret",
                 "reflect": false,
                 "defaultValue": "false"
@@ -213,6 +229,8 @@ export class DuetSlideoutLink {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "menu-item",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -57,6 +57,32 @@
   text-decoration: none;
   cursor: pointer;
 }
+.duet-slideout-panel .link .duet-slideout-icon {
+  position: relative;
+  display: inline-flex;
+  font-size: 0;
+  line-height: normal;
+  vertical-align: baseline;
+}
+.duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge {
+  position: absolute;
+  top: 0;
+  left: 16px;
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: rgb(247, 178, 40);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px #c18b1f;
+}
+.duet-theme-turva .duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge {
+  background: rgb(247, 178, 40);
+}
+@media (min-width: 62em) {
+  .duet-slideout-panel .link .duet-slideout-icon {
+    margin-right: 8px;
+  }
+}
 .duet-slideout-panel .link .label {
   display: flex;
   gap: 0.5rem;