@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.20

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

@@ -15,6 +15,9 @@ export class DuetSlideoutLang {
             sv: "Välj språk",
         };
         this.language = getLanguage();
+        /**
+         * Theme.
+         */
         this.theme = "";
     }
     /**
@@ -35,7 +38,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: 'd163f56230650efc540cf21892239905271a775e' }, h("div", { key: '7b1d95d36da23db34a90055407a7f307ab0d4ffa', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '07ed0679705221e14ba5e20d0db83a5b3073a7cf', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: 'e847d0a2bf84e7099988d6bc9f6e59dfa0ba99d7' }))));
+        return (h(Host, { key: '81d1f6d9e2c6d9f6dd8b5218608be304ffde350f' }, h("div", { key: '26b3a9e6224f4a53c13998466b62f5430c1d944e', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '4fd6ea04d3f884ee1a58979d4d7bb74151aa3331', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: 'ea0b580bbccc19ab497e06b4e668cf4825af3307' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }
@@ -53,6 +56,7 @@ export class DuetSlideoutLang {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -73,7 +77,6 @@ export class DuetSlideoutLang {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             }

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

@@ -54,7 +54,7 @@
 .duet-slideout-link.active span {
   position: relative;
 }
-.duet-slideout-link.active span::after {
+.duet-slideout-link.active .label-content::after {
   position: absolute;
   top: auto;
   bottom: 0;
@@ -87,11 +87,26 @@
 }
 .duet-slideout-link .label {
   display: flex;
-  gap: 0.5rem;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 }
+.duet-slideout-link .label-container {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+}
+.duet-slideout-link .external-icon {
+  width: 10px;
+  height: 10px;
+}
+.duet-slideout-link.medium .external-icon, .duet-slideout-link.large .external-icon {
+  width: 12px;
+  height: 12px;
+}
 
 slot[name=description]::slotted(*) {
   display: block;

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

@@ -1,19 +1,61 @@
 /*!
  * Built with Duet Design System
  */
+import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { h, Host } from "@stencil/core";
+import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { getAccessibleLinkLabel } from "../../utils/a11y-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
 export class DuetSlideoutLink {
     constructor() {
-        this.accessibleLabel = undefined;
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Language of the link. Use this only for language selection links.
+         */
         this.targetLanguage = undefined;
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        /**
+         * Size. Inherit, small, medium or large. Inherit value inherits styles from the value in the underlying slot.
+         */
         this.size = "inherit";
+        /**
+         * Caret
+         */
         this.caret = false;
+        /**
+         * @internal
+         * Indicates the component is used where aria-role menuitem is expected
+         */
         this.menuItem = false;
+        /**
+         * Defaults for accessibleLabelExternal
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        this.external = false;
     }
     /**
      * Component lifecycle events.
@@ -21,17 +63,26 @@ export class DuetSlideoutLink {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
+    connectedCallback() {
+        connectLanguageChangeObserver(this, {
+            prop: "accessibleLabelExternal",
+            defaults: "accessibleLabelExternalDefaults",
+        });
+    }
+    disconnectedCallback() {
+        disconnectLanguageChangeObserver(this);
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'dbcb8bf6b8c65743fb716cbdda625cf4ea5162f8' }, h("a", { key: '542c9910bad183af64eff3b965ef1cec19b4ac7b', class: {
+        return (h(Host, { key: 'b10e39b4c103edf993040842ca1d3c5bd2947309' }, h("a", { key: 'd02c6217e0adcf138405342a30d92531d7f3092a', target: !this.href ? null : this.external ? "_blank" : "_self", 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: 'c192e191c1323e742022c48651a75c16017b4837', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: 'b0e214e358e524f13a884c78e1d78118b171e3ed', class: "label" }, h("span", { key: 'af8697663031dc729bc98cf7c15cd2d58a03f861' }, h("slot", { key: '84b1b365ac8fabcbf3c6451a8aa51caa18010aa9' }), h("slot", { key: '82b78e911b41cfd441fb9eab798093f6b726c993', name: "description" })), this.caret && (h("duet-icon", { key: 'ee835e2bd7427531239041e03b19ed4335b8ad74', 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.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: 'f3ffdad987835f9fe725488811516df41ebc1804', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '15e073801cc1649271724ce8ba557fc6a0595f5e', class: "label" }, h("span", { key: '54b7d1a19b38f4fc75363f35b761972e8591f121' }, h("span", { key: '727d4e01ef993eea033f9f6aabf055c142847f0a', class: "label-container" }, h("span", { key: 'ccedbbd2c4c2222335a448d7a7282bf475def69c', class: "label-content" }, h("slot", { key: '23a61b0a7cba001323c158b2ba476555948dc0c1' })), this.external && (h("duet-icon", { key: 'c026a8a54f2ba4ef095d4e581c44bdbb64037869', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: '148bed5c517070f08c819790debfff17f8e6b61a', name: "description" })), this.caret && (h("duet-icon", { key: '1028cc2f997369cc2e0eddc6221ac78b0c30c584', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }
@@ -49,6 +100,7 @@ export class DuetSlideoutLink {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -63,11 +115,11 @@ export class DuetSlideoutLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -88,12 +140,12 @@ export class DuetSlideoutLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "targetLanguage": {
                 "type": "string",
+                "attribute": "target-language",
                 "mutable": false,
                 "complexType": {
                     "original": "\"en\" | \"fi\" | \"sv\"",
@@ -108,12 +160,12 @@ export class DuetSlideoutLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target-language",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -128,12 +180,12 @@ export class DuetSlideoutLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -148,12 +200,12 @@ export class DuetSlideoutLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -168,12 +220,12 @@ export class DuetSlideoutLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "\"inherit\" | \"small\" | \"medium\" | \"large\"",
@@ -188,12 +240,12 @@ export class DuetSlideoutLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": true,
                 "defaultValue": "\"inherit\""
             },
             "caret": {
                 "type": "boolean",
+                "attribute": "caret",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -208,12 +260,12 @@ export class DuetSlideoutLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caret",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "menuItem": {
                 "type": "boolean",
+                "attribute": "menu-item",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -231,7 +283,78 @@ export class DuetSlideoutLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "menu-item",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "accessibleLabelExternalDefaults": {
+                "type": "string",
+                "attribute": "accessible-label-external-default",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+                        }],
+                    "text": "Defaults for accessibleLabelExternal"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "DuetStringsExternalDefaults"
+            },
+            "accessibleLabelExternal": {
+                "type": "string",
+                "attribute": "accessible-label-external",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+                        }],
+                    "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
+            },
+            "external": {
+                "type": "boolean",
+                "attribute": "external",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forces URL to open in a new browser tab. Used together with URL prop."
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -24,6 +24,36 @@ export class DuetSlideoutPanel {
             sv: "Tillbaka till huvudmenyn",
         };
         this.hasStickyHeaderSlot = false;
+        this.language = getLanguage();
+        this.bodyScrollLocked = false;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Active
+         */
+        this.active = false;
+        /**
+         * Open
+         */
+        this.open = false;
+        /**
+         * Icon
+         */
+        this.icon = undefined;
+        /**
+         * Size. Small, medium or large.
+         */
+        this.labelSize = "medium";
+        /**
+         * Background color. Use one of the color tokens.
+         */
+        this.backgroundColor = "primary-lightest";
+        /**
+         * Show a badge that indicates something has changed.
+         */
+        this.badge = false;
         this.updateLabel = () => {
             const labelSlotElement = this.element.querySelector("[slot='label']");
             this.label = labelSlotElement;
@@ -44,16 +74,6 @@ export class DuetSlideoutPanel {
                 slideout.toggle();
             }
         };
-        this.label = undefined;
-        this.language = getLanguage();
-        this.bodyScrollLocked = false;
-        this.theme = "";
-        this.active = false;
-        this.open = false;
-        this.icon = undefined;
-        this.labelSize = "medium";
-        this.backgroundColor = "primary-lightest";
-        this.badge = false;
     }
     /**
      * Component lifecycle events.
@@ -159,23 +179,23 @@ export class DuetSlideoutPanel {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '0318776fab9cea36b44efcbd8a066fc7a71aa59e' }, h("div", { key: '1d95822243d5c86ec5b5173e4e681b4146e4476f', class: {
+        return (h(Host, { key: '856a3c28f69371f9863319381ba48c8405b85403' }, h("div", { key: 'f735dbda0ac874c43051bd1c447dbbf9a03ca433', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'a45e36b09686a148c2ba62e9984627920710ecb7', 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: 'f50326b2238fdb0a7125680c6f69b0f56bf0e934', 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("div", { key: '6f2dee22c324bf4ead87048ebff2a20c47ca896a', class: "duet-slideout-icon" }, h("duet-icon", { key: '44e1cac15f61dab325132fcc3514c8e0354cc43a', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '024312ec408282554844e751ab4b49d05b96b548', class: "duet-slideout-badge" }))), h("span", { key: '283051aa5c3b14ee17ca9da70c094a57235e749e', class: "label" }, h("span", { key: '81b5642422add92e13dbf34d95a26c0588858de7', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: 'd44a3600f9a66a1768a530317ee8e97d61d7d5a4', name: "label" })), h("duet-icon", { key: '4e27c46508e15f8a57b08025121d7a30386fd7e1', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '0e7fce1743db4fe772c3165ea76ddd2b5215e3c3', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (h("div", { key: 'f2d2f6cdc62f73b881c776a0d3bf092ccaa772eb', class: "duet-slideout-icon" }, h("duet-icon", { key: '443b1d6d94c4aae294778b8f5955891bb2a97ce8', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && h("div", { key: '44b1ca70447f6bb60a6f46102e67f333db652e44', class: "duet-slideout-badge" }))), h("span", { key: '8fbc117daa4a781ecbf670e062b68207e0ef5343', class: "label" }, h("span", { key: 'ab39a93c3c74b3b76aa0b3c90d185bfdc9dd86ca', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '45b890262469efe9b02656921d421777e8bdc57d', name: "label" })), h("duet-icon", { key: '059783af433a31f4ab3f1c68849c804251800cef', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: 'de567359a310f1677a485c4bdface6e8268bbff0', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '40a3ed99c1bf1bceb7378326804d3f5e76a2caf0', moveFocusTo: this.closeButton }), h("div", { key: '513ce8191e12b73aa0ec22360499905c9a120aca', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'f6d518848785f147415050e356dcfe42e00e64af', class: "top" }, h("button", { key: '6c6d3320016eeabed6b06b5d997bf0fe871b7d5b', 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: 'b0e6eefb79b61d9b84d9e8b8a2be5b23d8975b66', moveFocusTo: this.closeButton }), h("div", { key: 'c388f06159034df8600c1bd91bc6cf874650a91a', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '7cbb9d38f3a3fa287257184c9c9849e4d3e34ded', class: "top" }, h("button", { key: 'fc3d908b932b7210f65ffdcafb8708ab0084977c', 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: 'e68686b85946c9e54babfb2aa7012e37048b6a23', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'b2082182002d6fc1687fdbe1a75c30a62061a083' }, this.label.innerHTML), h("button", { key: 'b6cfea3156d9398f6ff290c6abbdbdff55a16edd', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '4f973e329f5254a4d6fbb230bb2e1c815d07fab5', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'b2f3ca3d5bd5e4881cfbe6acd61b8ff209408f35', class: "sticky-header" }, h("slot", { key: '9a1594cd89ffce28613a575b53219736fcf02bae', name: "sticky-header" }))), h("div", { key: '74a5a1eefa940a78f4904f118fbb22da52177d83', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, h("duet-icon", { key: 'd0940ecd67c9db3eff30cc4ef4472e69a517ce14', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '922ee0e0256014693e614ff2af701380ede3d801' }, this.label.innerHTML), h("button", { key: '1a0edf1eb5d33b8fb39880c56fa38a325e32e3ae', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '7ba128ad0a1baae2e60460dd1bea08f126261770', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '885f062bf863f93627bc69adf47f8b1aa5497cb2', class: "sticky-header" }, h("slot", { key: '0a03e76ed75ae40af294be6bdd147b0b753ededa', name: "sticky-header" }))), h("div", { key: '129bdf60417ccdd47d197a130ab35fac219052fe', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: '59168289af3be6afbf35af828da4800c1209809c' })), h(FocusGuard, { key: '688c55a2b0881c10204aa353123bc524c88a23b9', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '4af5b5b2c46331a5929922371cfb464d1340edff' })), h(FocusGuard, { key: '1bb13f60085d50f72727261352cd96d5c375cc5c', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -193,6 +213,7 @@ export class DuetSlideoutPanel {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -213,12 +234,12 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -233,12 +254,12 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -253,12 +274,12 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -273,12 +294,12 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             },
             "labelSize": {
                 "type": "string",
+                "attribute": "label-size",
                 "mutable": true,
                 "complexType": {
                     "original": "\"small\" | \"medium\" | \"large\"",
@@ -293,12 +314,12 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-size",
                 "reflect": true,
                 "defaultValue": "\"medium\""
             },
             "backgroundColor": {
                 "type": "string",
+                "attribute": "background-color",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetColor",
@@ -319,12 +340,12 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background-color",
                 "reflect": true,
                 "defaultValue": "\"primary-lightest\""
             },
             "badge": {
                 "type": "boolean",
+                "attribute": "badge",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -339,7 +360,6 @@ export class DuetSlideoutPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "badge",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -5,13 +5,25 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetSlideoutPanelDropdown {
     constructor() {
-        this.onClick = () => {
-            this.open = !this.open;
-        };
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Open
+         */
         this.open = false;
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        this.onClick = () => {
+            this.open = !this.open;
+        };
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -40,16 +52,16 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f7a1b3521e799c7792945551a66c1c295dd5ffdc' }, h("div", { key: 'd63da6a1f3650e633c97795042a7b34b8ad48302', class: {
+        return (h(Host, { key: 'ab2fb8ed37ca46adc9817852fb83eafe507a59dc' }, h("div", { key: '280c92d9bd0abe3b60c229207a6c6ccb48c485e9', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'ed40e8b4d2a431e4f578ea26583a70b8977d951c', ref: element => (this.button = 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: 'e6772eb5237776b11a952582abb425295451a6e0', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '44a4510103738db121e37e1d18f3a5f2484e7683', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'b2ce145800f498a7382885190458bb49205b7ada', class: "label" }, h("slot", { key: '6ce00dfcd2d2ef3ac62143b9150b80f1ecc9a69d', name: "label" }), h("duet-icon", { key: 'e6890351789e07002b0b9fc85d79baf6862bd239', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '81a201018140f6519e9ed18baec3855790ef4cb4', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '2f964bc5915bd7ef297d26649ce08c34ee0b9839', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: '1c60593c6cd70eb2d1a088573f156bb3e9c74f0a', class: "label" }, h("slot", { key: '4108636046644f87e1cc9c7dd63f67af26705061', name: "label" }), h("duet-icon", { key: 'aef84319ce001579f0d616eed817a35ea0ef2e58', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '5e9852b7e56b05ad347c63deeea0b6e0043d708f', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '473c54c7f46f6cb77f5656ff8c7d60106836aa73' })))));
+            } }, h("slot", { key: 'f8d087bfa9da070cb47cb6797e81f8259d54c80b' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -67,6 +79,7 @@ export class DuetSlideoutPanelDropdown {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -87,12 +100,12 @@ export class DuetSlideoutPanelDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -107,12 +120,12 @@ export class DuetSlideoutPanelDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -127,12 +140,12 @@ export class DuetSlideoutPanelDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -147,7 +160,6 @@ export class DuetSlideoutPanelDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             }