@duetds/components 9.2.2 → 9.2.3

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

@@ -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"
@@ -439,7 +467,7 @@ export class DuetShowMore {
                     "references": {
                         "DuetShowMoreToggleEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-show-more/duet-show-more.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-show-more/duet-show-more.tsx",
                             "id": "src/components/duet-show-more/duet-show-more.tsx::DuetShowMoreToggleEvent"
                         }
                     }

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\""
@@ -362,7 +444,7 @@ export class DuetSlideout {
                     "references": {
                         "DuetSlideoutEventDetails": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-slideout/duet-slideout.tsx",
                             "id": "src/components/duet-slideout/duet-slideout.tsx::DuetSlideoutEventDetails"
                         }
                     }

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

@@ -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

@@ -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;

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

@@ -53,6 +53,7 @@ export class DuetSlideoutPanel {
         this.icon = undefined;
         this.labelSize = "medium";
         this.backgroundColor = "primary-lightest";
+        this.badge = false;
     }
     /**
      * Component lifecycle events.
@@ -158,21 +159,23 @@ export class DuetSlideoutPanel {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '85cf2add8e070d2f95b325f17fd3888ef083b452' }, h("div", { key: '669f9374c0582745503772912e8994f0d80fab7f', class: {
+        return (h(Host, { key: '2647678315ed56e1fe335c37736ee23c004dd21d' }, h("div", { key: '905482d53e0735d94f4b642cb1451313ba5a1b34', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '05bc5386920089fbd1989e0c264164bf75cc0d90', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '45f9e616201b64655cfadf30e3e6f2c4a57c835e', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && h("duet-icon", { key: '5ae33e802c26d6855b0188566c471d9e14455ea2', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'cc0e3bafc2edf37d33ae03f04e6e35dd7bc6a8bf', class: "label" }, h("span", { key: '5d485ef3892c579a2b356d050f63e70d55c59a81', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '66e9cf07933f415e19ef15cec9fefde9bfbeaa79', name: "label" })), h("duet-icon", { key: '230b0a6b97baf7820f59d6b9eecd371b554b1a80', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '6c62b1fedab912d257de8b8921c5cf1e05bc1f3e', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: '008d3982b7842feefbdf0e1a26143baca78feb98', class: "duet-slideout-icon" }, h("duet-icon", { key: 'cd08bf2de91cbf0cae51750ae70ac39a6886718b', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '546c0233c3479f5ae94f5d175b38a5bbd5a62ec3', class: "duet-slideout-badge" }))), h("span", { key: 'd5d36cc9179fcf3217d991bc40250e05cd462bd1', class: "label" }, h("span", { key: 'f9cdaf84aaea94b0960779018ab0ebe92db3cded', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '87277fe5dd9340b05758ed62641ebf4521c2c988', name: "label" })), h("duet-icon", { key: 'efd21892344ca510453d903c6099ef38700dcd64', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'e0891e52f2734290947fb7bab8e732ea19db4ca7', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: 'de5845c8cda4523a2fb34b3f0e1b24176fffb23e', moveFocusTo: this.closeButton }), h("div", { key: '3348199d135e2886b2324e28b5d1cf0b8b5f1ae8', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '379ee13d14ee14ebe08bdc16ead2f4c6b1b44224', class: "top" }, h("button", { key: '8bfc0961203fe8b7529257f3c22f0ea36629fa8c', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '78fbbf6a49c26699a681d53e8664fa9cdc04607d', moveFocusTo: this.closeButton }), h("div", { key: 'ff3ae73aedbf253a194fbf5ec5e03558a6253eeb', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'a1a3eed79130adbe6b32c2ab2a8ca0aab5cef454', class: "top" }, h("button", { key: 'ec03ca7ae63fbabe2a8a72dd174d45dfe3a43cbc', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onClick }, h("duet-icon", { key: '88da885f77d6a1bf04a94688f62051fe8919d3d2', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'eeae988e8f287320ce366a80beb333415bc5342b' }, this.label.innerHTML), h("button", { key: '7533c4fdc5b5c59ec06579ad0656d44505a51c55', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'e1520bf9ec14b782f25b13a6c139a0bf260dc961', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'f7ffaa74e560bdda5d8f9364b65fc1960b7b5a94', class: "sticky-header" }, h("slot", { key: 'ea473e76641c6705cd2dca5afb3f84f7b9217cc8', name: "sticky-header" }))), h("div", { key: 'c3c70db81e357383a4629d095c082c024bbc6e0e', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, h("duet-icon", { key: 'cccfd5be6b2f45a819c9f4d5e2be98fb550f9052', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '6ef5585f68075fb83da70e1d0957a271baa40e8d' }, this.label.innerHTML), h("button", { key: '025d0b7774d3ab4d2212a41dcfbf335dbdcbe75b', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'c75bc1256d277e8e78feff4feccea9ddbb76076e', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '2ea243cde023eae58163c13933950ae567cc4fb8', class: "sticky-header" }, h("slot", { key: '216f3007ee7fd66367bb1ecc7c633f81def538de', name: "sticky-header" }))), h("div", { key: 'b63972a5c65747caa92dd13ec99059748afa72e0', tabindex: "-1", role: "menu",
+            //TODO: slideout menu fades out, needs to be instant
+            id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: '0bf5ecbaad2132d5d2da8be4d74a9b2653414fdd' })), h(FocusGuard, { key: 'f70457896fa82645d77260ef4762c9cb4a775d86', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '82da64daad4e4c5445bacd92c115e658819341ce' })), h(FocusGuard, { key: 'fd769f1269b9562291f1198976e3258148a696dc', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -208,6 +211,8 @@ export class DuetSlideoutPanel {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -226,6 +231,8 @@ export class DuetSlideoutPanel {
                     "tags": [],
                     "text": "Active"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
@@ -244,6 +251,8 @@ export class DuetSlideoutPanel {
                     "tags": [],
                     "text": "Open"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
@@ -262,6 +271,8 @@ export class DuetSlideoutPanel {
                     "tags": [],
                     "text": "Icon"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
@@ -280,6 +291,8 @@ export class DuetSlideoutPanel {
                     "tags": [],
                     "text": "Size. Small, medium or large."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-size",
                 "reflect": true,
                 "defaultValue": "\"medium\""
@@ -304,9 +317,31 @@ export class DuetSlideoutPanel {
                     "tags": [],
                     "text": "Background color. Use one of the color tokens."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "background-color",
                 "reflect": true,
                 "defaultValue": "\"primary-lightest\""
+            },
+            "badge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a badge that indicates something has changed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "badge",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }