@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -4,31 +4,33 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: absolute;
   height: 100%;
 }
 
 ::slotted(*) {
   position: relative;
-  width: 100%;
   visibility: hidden;
+  width: 100%;
   opacity: 0;
+  transition: opacity 300ms ease;
+  transition-delay: 300ms;
 }
 
 :host([open]:not([open=false])) ::slotted(*) {
@@ -62,35 +64,27 @@
 .duet-slideout .dialog {
   position: fixed;
   top: 0;
+  right: 0;
   bottom: 0;
-  left: 0;
+  left: auto;
   z-index: 600;
-  width: 100%;
-  height: 100%;
+  width: min(450px, 100%);
   padding-bottom: 75px;
   overflow-y: auto;
   box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1) inset;
+  transition: bottom 300ms ease;
+  transition-delay: 0s;
 }
 .duet-slideout .dialog:not(.modal) {
   box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.2);
 }
-@media (min-width: 62em) {
-  .duet-slideout .dialog {
-    right: 0;
-    left: auto;
-    width: 500px;
-    padding-bottom: 0;
-    transition: right 300ms ease;
-    transition-delay: 0s;
-  }
-}
 .duet-slideout .dialog .top-container.has-sticky-header-slot {
   position: sticky;
   top: 0;
   z-index: 200;
 }
 .duet-slideout .dialog .top-container.has-sticky-header-slot .top {
-  background: rgb(240, 247, 250);
+  background: rgb(255, 255, 255);
 }
 .duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header {
   display: block;
@@ -102,13 +96,21 @@
   align-items: center;
   justify-content: flex-end;
   padding: 4px;
+  opacity: 1;
+  transition: opacity 300ms ease;
 }
 .duet-slideout .dialog .top button {
   cursor: pointer;
 }
 .duet-slideout .dialog .top button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-slideout .dialog .top button:focus, .duet-slideout .dialog .top button:focus.duet-theme-turva, .duet-theme-turva2 .duet-slideout .dialog .top button:focus, .duet-slideout .dialog .top button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-slideout .dialog .top duet-icon {
   padding: 16px;
@@ -116,28 +118,44 @@
 .duet-slideout .dialog .sticky-header {
   display: none;
   width: 100%;
-  padding: 0 1.5rem;
+  padding: 0 20px 20px;
   margin-bottom: 20px;
-  background: rgb(240, 247, 250);
+  background: rgb(255, 255, 255);
   border-bottom: 1px solid rgb(212, 223, 229);
 }
+@media (min-width: 36em) {
+  .duet-slideout .dialog .sticky-header {
+    padding: 0 28px 28px;
+  }
+}
 .duet-slideout .dialog .items {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   width: 100%;
-  padding: 0 1.5rem;
+  padding: 12px 20px;
+  opacity: 1;
+  transition: padding 600ms ease, opacity 300ms ease;
+  transition-delay: 300ms;
+}
+@media (min-width: 36em) {
+  .duet-slideout .dialog .items {
+    padding: 16px 28px;
+  }
 }
 .duet-slideout .dialog.hidden {
-  pointer-events: none;
+  bottom: 100vh;
   visibility: hidden;
+  pointer-events: none;
+  transition: 300ms ease;
 }
-@media (min-width: 62em) {
-  .duet-slideout .dialog.hidden {
-    right: -500px;
-    transition: 300ms ease;
-  }
+.duet-slideout .dialog.hidden .items {
+  padding-top: 28px;
+  opacity: 0;
+}
+.duet-slideout .dialog.hidden .top {
+  opacity: 0;
 }
 .duet-slideout.duet-theme-turva .dialog {
   box-shadow: 0 3px 6px 0 rgba(23, 28, 58, 0.1) inset;
@@ -149,29 +167,43 @@
   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-slideout.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-slideout.duet-theme-turva button.active {
   color: rgb(198, 12, 48);
 }
 .duet-slideout.duet-theme-turva button.active::after {
   background: rgb(198, 12, 48);
 }
-.duet-slideout.duet-theme-turva .has-sticky-header-slot .top {
-  background: rgb(245, 247, 250);
-}
 .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header {
-  background: rgb(245, 247, 250);
   border-bottom: 1px solid rgb(222, 224, 228);
 }
-.duet-slideout.duet-theme-turva .dialog .top button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 
 slot {
   color: rgb(8, 42, 77);
 }
 .duet-theme-turva slot {
   color: rgb(23, 28, 58);
+}
+
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva {
+  color: rgb(23, 42, 59);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .desktop-bg {
+    background: rgb(23, 42, 59);
+  }
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active {
+  color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after {
+  background: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header {
+  border-bottom-color: rgb(212, 221, 226);
+}
+:host(.duet-theme-turva2) slot {
+  color: rgb(23, 42, 59);
 }

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

@@ -4,6 +4,7 @@
 import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { disableBodyScroll, enableBodyScroll } from "../../utils/body-scroll";
+import { setOpenerExpanded } from "../../utils/a11y-utils";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
@@ -29,7 +30,50 @@ export class DuetSlideout {
         this.hasStickyHeaderSlot = false;
         this.disconnectController = new AbortController();
         this.eventListenerController = new AbortController();
-        this.setOpenButton = (element, addClickListener = false) => {
+        this.language = getLanguage();
+        this.displaying = false;
+        this.openPanel = false;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Role of the slot's container. By default this is menubar and the slideout should by default contain menuitems.
+         */
+        this.accessibleRole = "menubar";
+        /**
+         * Open
+         */
+        this.open = false;
+        /**
+         * Background color. Use one of the color tokens.
+         */
+        this.backgroundColor = "gray-lightest";
+        /**
+         * Whether the slideout behaves as a modal, i.e. with an overlay and preventing scrolling of the page content.
+         * Note that even when false, we still use focus guards to contain keyboard navigation within, as moving focus out
+         * could result in unexpected behavior.
+         */
+        this.modal = true;
+        this.setOpenButton = (givenElement) => {
+            let element;
+            let addClickListener;
+            if (givenElement || givenElement === null) {
+                element = givenElement;
+                addClickListener = false;
+            }
+            else {
+                if (typeof this.opener === "string") {
+                    element = typeof this.opener === "string" ? document.getElementById(this.opener) : undefined;
+                }
+                else {
+                    element = this.opener;
+                }
+                if (element && this.openButton === element) {
+                    return;
+                }
+                addClickListener = true;
+            }
             if (this.eventListenerController) {
                 this.eventListenerController.abort();
             }
@@ -39,8 +83,7 @@ export class DuetSlideout {
             }
             try {
                 const button = element;
-                button.accessiblePopup = "true";
-                button.accessibleExpanded = false;
+                setOpenerExpanded(button, false);
                 this.openButton = button;
                 if (addClickListener && !this.disconnectController.signal.aborted) {
                     this.eventListenerController = new AbortController();
@@ -78,35 +121,12 @@ export class DuetSlideout {
         this.onClick = (e) => {
             this.toggleMenu(e);
         };
-        this.language = getLanguage();
-        this.displaying = false;
-        this.openPanel = false;
-        this.theme = "";
-        this.accessibleRole = "menubar";
-        this.open = false;
-        this.backgroundColor = "gray-lightest";
-        this.modal = true;
-    }
-    /**
-     * 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) {
-        const isString = typeof value === "string";
-        const element = isString ? document.getElementById(value) : value;
-        if (this.openButton !== element) {
-            this._opener = value;
-            this.setOpenButton(element, isString);
-        }
     }
     /**
      * Alias for property opener.
      */
     get controller() {
-        return this._opener;
+        return this.opener;
     }
     set controller(value) {
         this.opener = value;
@@ -129,9 +149,11 @@ export class DuetSlideout {
         if (!this.teleport) {
             this.teleport = new Teleport(this.element);
         }
-        if (this.teleport) {
+        if (!this.teleport.isActive) {
             this.teleport.activate();
+            return;
         }
+        this.teleport.observeDeletion();
         this.setStickHeaderStyleMutations();
         if (!this.mutationObserver) {
             this.mutationObserver = new MutationObserver(() => {
@@ -141,6 +163,7 @@ export class DuetSlideout {
         if (this.mutationObserver) {
             this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
         }
+        this.setOpenButton();
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
@@ -153,7 +176,7 @@ export class DuetSlideout {
         if (this.disconnectController) {
             this.disconnectController.abort();
         }
-        this.setOpenButton(undefined);
+        this.setOpenButton(null);
         this.setStickHeaderStyleMutations(true);
     }
     handleOpenChange(newValue, oldValue) {
@@ -162,7 +185,7 @@ export class DuetSlideout {
         }
         if (this.open && !oldValue) {
             if (this.openButton) {
-                this.openButton.accessibleExpanded = true;
+                setOpenerExpanded(this.openButton, true);
             }
             const openPanel = this.getOpenPanel();
             this.teleport.makeSiblingsInert();
@@ -180,7 +203,7 @@ export class DuetSlideout {
         }
         else if (!this.open && oldValue) {
             if (this.openButton) {
-                this.openButton.accessibleExpanded = false;
+                setOpenerExpanded(this.openButton, false);
             }
             setTimeout(() => {
                 focusElement(this.openButton);
@@ -191,6 +214,17 @@ export class DuetSlideout {
             }, 200);
         }
     }
+    handleOpenerChange(newValue, oldValue) {
+        if (newValue === oldValue) {
+            return;
+        }
+        if (typeof newValue === "string") {
+            this.setOpenButton();
+        }
+        else {
+            this.setOpenButton(newValue);
+        }
+    }
     /**
      * Component event handling.
      */
@@ -260,16 +294,17 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: 'c299a850fff6c11bcca6e85576c04bf74e367619' }, h("div", { key: '76b69d00087367d0cfcf5de14d4023180b4fa42d', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '6daa912479f25ecd3e5527ab40861590fc36f150', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '9dc84e8113b5243b44224407df8d4c89eafdf2b7', 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: 'fc8b5893c7783b60a166c82acaac01ede594e43a' }, h("div", { key: '57b51e3b1224155ce14db9ecb22b2655cfecf63c', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '415b8638b3df2ded878996d2190f27c6e7405b6d', visible: this.open, zIndex: "600" }), h("div", { key: '7f7e122f27d2cf36ab6768543b6e311b4ef6dec4', 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,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '132b28a73aa0dc07ee1f159c59c0f6ca5c7c5e09', moveFocusTo: this.closeButton }), h("div", { key: 'cb528ca9e0ee385299a9e042d8f1a42d422d7a1a', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'b9e5deae2f2cf48c3d652e885002f30cc434660d', class: "top" }, h("button", { key: 'fc5ab74ac6519c2c503131d21fc9239ddf3a1bf8', 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: '1ca9f5168c94535babbd4438d532efe528edd02b', moveFocusTo: this.closeButton }), h("div", { key: '4c3f037a457ef9cb0443cd4c299c03b4a19f2370', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '9666004103f958a0ce43497706ca6dba3543c787', class: "top" }, h("button", { key: '5a68f86a03e7500d8685e48db89e8db791b63a9e', 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: '2c2217a591e73c3121d123a9e3f6062e8d243d9a', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '1bf96970d244ee1941f3db97c89cac30c4d71f9e', class: "sticky-header" }, h("slot", { key: '1d6dca6fc160b198115c7d1469576c6bc4f863ac', name: "sticky-header" }))), h("div", { key: '514f42edc0e6477bf154e0de2fdaa9bbe7c3ffea', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: 'dad816041c74637f1939c86bf7b84713309476f9', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '07c8ab3b5d1a02e457a8631934d9bb7348abba29', class: "sticky-header" }, h("slot", { key: 'baaa3a79e2626a3d484ceab504da10cf90c44ef6', name: "sticky-header" }))), h("div", { key: '4024ba5ad42da1d50c4964caa0c20c50e1fb0f10', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '982778a16720e0b741c702729b87aa3f805da499' })), h(FocusGuard, { key: 'ee76635f5ccb38cc512e1d8a862fc9fd85f72666', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'fc3ed36022c9cee52f7f299fe28d223bc8c71544' })), h(FocusGuard, { key: '8055e66cb43e26f56174b1246630b4e75b927ddc', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }
@@ -287,6 +322,7 @@ export class DuetSlideout {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -307,12 +343,12 @@ export class DuetSlideout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleRole": {
                 "type": "string",
+                "attribute": "accessible-role",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -327,12 +363,12 @@ export class DuetSlideout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-role",
                 "reflect": false,
                 "defaultValue": "\"menubar\""
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -347,16 +383,16 @@ export class DuetSlideout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "opener": {
                 "type": "string",
-                "mutable": false,
+                "attribute": "opener",
+                "mutable": true,
                 "complexType": {
-                    "original": "string | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "| string\n    | HTMLElement\n    | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
@@ -380,17 +416,17 @@ export class DuetSlideout {
                     "tags": [],
                     "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
+                "getter": false,
+                "setter": false,
+                "reflect": true
             },
             "controller": {
                 "type": "string",
+                "attribute": "controller",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | (HTMLElement & FocusableComponent & OpenerComponent)",
-                    "resolved": "HTMLElement & FocusableComponent & OpenerComponent | string",
+                    "original": "string | HTMLElement | (HTMLElement & FocusableComponent & OpenerComponent)",
+                    "resolved": "HTMLElement | HTMLElement & FocusableComponent & OpenerComponent | string",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
@@ -416,11 +452,11 @@ export class DuetSlideout {
                 },
                 "getter": true,
                 "setter": true,
-                "attribute": "controller",
                 "reflect": false
             },
             "backgroundColor": {
                 "type": "string",
+                "attribute": "background-color",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetColor",
@@ -441,12 +477,12 @@ export class DuetSlideout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background-color",
                 "reflect": true,
                 "defaultValue": "\"gray-lightest\""
             },
             "modal": {
                 "type": "boolean",
+                "attribute": "modal",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -461,7 +497,6 @@ export class DuetSlideout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "modal",
                 "reflect": false,
                 "defaultValue": "true"
             }
@@ -583,6 +618,9 @@ export class DuetSlideout {
         return [{
                 "propName": "open",
                 "methodName": "handleOpenChange"
+            }, {
+                "propName": "opener",
+                "methodName": "handleOpenerChange"
             }];
     }
     static get listeners() {

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

@@ -4,27 +4,27 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 .duet-slideout-lang {
   display: flex;
-  gap: 20px;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   width: min-content;
@@ -43,7 +43,7 @@
 ::slotted(:not(:last-child))::after {
   position: absolute;
   top: 25%;
-  right: -16px;
+  right: -14px;
   width: 2px;
   height: 50%;
   content: "";
@@ -52,4 +52,8 @@
 
 .duet-theme-turva ::slotted(:not(:last-child))::after {
   background: rgb(23, 28, 58);
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva ::slotted(:not(:last-child))::after {
+  background: rgb(23, 42, 59);
 }

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: '82d609a07657275a896f954d42228e38dc7ca182' }, h("div", { key: '45d49c23924aa9683a2f9e98dab285adaa2ea875', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '66225e67ec928fa394d67bb50a932f629488014a', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '71c3a499a32c1ed8f398120a7ee4f7e8ce1613e4' }))));
+        return (h(Host, { key: '8847b4894f616c58b889e51d183c71ec672554fc' }, h("div", { key: '86a6652e67569a898f9aceea571fd656ae22bfa6', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '038bdf514daccd3f28a27ad0225f4a46ea84ecea', name: "navigation-language", margin: "none", color: "secondary", size: "small" }), h("slot", { key: '49e912e3e178c2d4c3042c4d9d1ae39991bbef52' }))));
     }
     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": "\"\""
             }