@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

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

@@ -13,23 +13,59 @@ export class DuetFieldset {
     constructor() {
         this.errorId = createID("DuetError");
         this.labelId = createID("DuetLabel");
-        this.checkHasTooltip = () => {
-            this.hasTooltip = hasSlot(this.element, "tooltip");
-        };
         this.hasTooltip = false;
+        this.lastItemIsChip = false;
+        /**
+         * Theme of the fieldset.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
-        this.caption = undefined;
-        this.label = undefined;
+        /**
+         * @internal
+         * Display label/legend with smaller lineheight to match it with DuetInput's label lineheight.
+         * Needed with DuetChoiceGroup.
+         * If caption is present, larger lineheight is used regardless of this prop.
+         */
         this.compactLabel = false;
-        this.error = undefined;
+        /**
+         * An error message to be shown next to the label.
+         */
+        this.error = "";
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
         this.accessibleLiveError = "polite";
+        /**
+         * Heading level for the label in the legend element. This is only used to give screen readers better logical structure.
+         * This does not affect visual appearance.
+         */
         this.labelHeadingLevel = "span";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
         this.labelHidden = false;
+        this.checkHasTooltip = () => {
+            this.hasTooltip = hasSlot(this.element, "tooltip");
+        };
+        this.checkLastItem = () => {
+            if (this.element) {
+                const lastChild = this.element.lastElementChild;
+                this.lastItemIsChip = lastChild ? lastChild.nodeName === "DUET-CHIP" : false;
+            }
+        };
     }
     /**
      * Component lifecycle events.
      */
+    connectedCallback() {
+        this.checkLastItem();
+    }
     componentWillLoad() {
         inheritGlobalTheme(this);
         this.checkHasTooltip();
@@ -39,20 +75,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c90be4dee8fe0279fbf6c4c3c928d137fe61f233', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '3ad5f101a81531194d9f6524cfc75b3287f0d28e', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: 'e1a788de39eaef07a1abaa996870dd726b226aee', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'e7d2b6ecb24666f6a563d4923bb228bdf7e8820d', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '213151ed1b0f84deb14a3e6a03b01bef9be36f6b', id: this.labelId }, h(this.labelHeadingLevel, { key: 'ab8f6890f78a7ae2c9b22e4c04bc38291bc5b164' }, this.label), this.caption && h("span", { key: '6aacc89f2c37744e16870ac20225109bc3313854' }, this.caption)), h("div", { key: '794ce3c1573e68c7cfb73d48ff7850511ac19109', class: {
+            } }, h("legend", { key: '9412c1763b18075c6c6d585389c3ac9d22542f64', id: this.labelId }, h(this.labelHeadingLevel, { key: '9c1c5cfef779deef96e68e7f3760f0eeec8d347a' }, this.label), this.caption && h("span", { key: 'd166f280495ee9e156e705fe52455b18c5a13ea2' }, this.caption)), h("div", { key: 'e390d201c421bbd2086946b4548dc98d5c58fead', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: '96448a08b7e74689135328c41823d0041e0460a1', class: "duet-fieldset-label" }, h("span", { key: '2ee830f8dc815dc2fe7a5cdd28a7c8e587d00aa5', "aria-hidden": "true" }, this.label), h("slot", { key: 'd466637b64d4233f5dd1ed3695311a46d1e7e284', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '12e9e36fefa42445a363148a516db4f906e8f91e', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '543f734d48f22df932e73d2b9907e1afda57187a', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '34ebf937cbd6e396647aba6282a527698a8a0a89' }), h("span", { key: 'e810b0f8f8ab440f4a8956b72ab1a2a66bc04274', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '3cf4d71eb3ce812d1a5848961740a2b9c98f22a0' }, this.error)))));
+            } }, h("div", { key: '10861fb7ec43cc4aec34ae9b04b1b191dd7a0d5c', class: "duet-fieldset-label" }, h("span", { key: '63b295dc887c75eb4bc062d214bb5b6a899e0f83', "aria-hidden": "true" }, this.label), h("slot", { key: 'dc154b5f9980e99c525884e32f7811e36fe634fc', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '1803a70997b3d2de928d501cfb86864bfa3af614', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'c574d64b9a375d0af50bc0bed35ea0418139f579', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '48665d8be4d66036d4d69090d7a98ee01f99dbac' }), h("span", { key: '9815f8bf073a39267673baf538de5908b52758e9', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '93bfa1f3fb33cf3bc23055948b416a18369b8497', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }
@@ -70,6 +106,7 @@ export class DuetFieldset {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -90,12 +127,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -116,12 +153,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -136,11 +173,11 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -155,11 +192,11 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "compactLabel": {
                 "type": "boolean",
+                "attribute": "compact-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -177,12 +214,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "compact-label",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -197,11 +234,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false
+                "reflect": true,
+                "defaultValue": "\"\""
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -216,12 +254,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             },
             "labelHeadingLevel": {
                 "type": "string",
+                "attribute": "label-heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel | \"span\"",
@@ -242,12 +280,12 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-heading-level",
                 "reflect": false,
                 "defaultValue": "\"span\""
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -262,7 +300,6 @@ export class DuetFieldset {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -270,7 +307,8 @@ export class DuetFieldset {
     }
     static get states() {
         return {
-            "hasTooltip": {}
+            "hasTooltip": {},
+            "lastItemIsChip": {}
         };
     }
     static get elementRef() { return "element"; }

package/lib/collection/components/duet-file-chooser/duet-file-chooser.css

@@ -4,11 +4,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 .container {

package/lib/collection/components/duet-file-chooser/duet-file-chooser.js

@@ -5,6 +5,19 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 export class DuetUploadItem {
     constructor() {
+        /**
+         * theme.
+         */
+        this.theme = "";
+        /**
+         * Use multiple to allow the user to select multiple files when uploading
+         */
+        this.multiple = false;
+        /**
+         * The accept attribute takes as its value a comma-separated list of one or more file types,
+         * or unique file type specifiers, describing which file types to allow.
+         */
+        this.accept = undefined;
         this.onChange = (ev) => {
             ev.preventDefault();
             ev.stopPropagation();
@@ -14,9 +27,6 @@ export class DuetUploadItem {
                 component: "duet-file-chooser",
             });
         };
-        this.theme = "";
-        this.multiple = false;
-        this.accept = undefined;
     }
     /**
      * Opens file choose dialog.
@@ -38,7 +48,7 @@ export class DuetUploadItem {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '926fcc76b3ab1a4b3487828c7e8c2b2c27d99908' }, h("duet-visually-hidden", { key: 'bae6ad6046effdb6fcd799f7f4402b9b28a338c5', "aria-hidden": "true" }, h("input", { key: 'e7e5106bbb4de343baa858eb76739022df33d5d6', ref: input => {
+        return (h(Host, { key: 'd6f332ceab0e71d4a1d4a31f67d8ebaaa1b2a74e' }, h("duet-visually-hidden", { key: 'd8a1e009bd303b11addfd69cde730a0158e65052', "aria-hidden": "true" }, h("input", { key: 'ed86a42e866d06c423e616b5b2ec3859483874e1', ref: input => {
                 this.nativeInput = input;
             }, type: "file", class: {
                 "duet-upload": true,
@@ -60,6 +70,7 @@ export class DuetUploadItem {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -80,12 +91,12 @@ export class DuetUploadItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -100,12 +111,12 @@ export class DuetUploadItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accept": {
                 "type": "string",
+                "attribute": "accept",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -120,7 +131,6 @@ export class DuetUploadItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accept",
                 "reflect": false,
                 "defaultValue": "undefined"
             }

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

@@ -4,22 +4,22 @@
   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;
   display: block;
   flex-shrink: 0;
   width: 100%;
@@ -72,20 +72,21 @@
   color: rgb(255, 255, 255);
   text-decoration: none;
 }
-@media (min-width: 62em) {
-  .duet-footer a {
-    border-radius: 4px;
-  }
-}
 .duet-footer a:focus {
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-footer a:focus {
-  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);
 }
-
-:host(.user-is-tabbing) .duet-theme-turva a:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing) .duet-footer a:focus, :host(.user-is-tabbing) .duet-footer a:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-footer a:focus, :host(.user-is-tabbing) .duet-footer a:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
+@media (min-width: 62em) {
+  .duet-footer a {
+    border-radius: 4px;
+  }
 }
 
 .duet-footer-wrapper {
@@ -223,8 +224,8 @@ duet-logo {
 }
 .duet-footer-menu a {
   display: inline-block;
-  text-decoration: none;
   overflow-wrap: break-word;
+  text-decoration: none;
 }
 .duet-footer-menu a:hover, .duet-footer-menu a:focus {
   text-decoration: underline;
@@ -327,4 +328,32 @@ duet-logo {
 }
 .duet-footer-simple.duet-theme-turva .duet-footer-external {
   color: rgb(198, 12, 48);
+}
+
+:host(.duet-theme-turva2) .duet-footer.duet-theme-turva {
+  background: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-footer-simple.duet-theme-turva {
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
+}
+:host(.duet-theme-turva2) .duet-footer-simple.duet-theme-turva .duet-footer-copyright,
+:host(.duet-theme-turva2) .duet-footer-simple.duet-theme-turva .duet-footer-menu a {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-footer-simple.duet-theme-turva .duet-footer-external {
+  color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) duet-logo {
+  margin-left: 28px !important;
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) duet-logo {
+    margin-left: 0 !important;
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) ::slotted([slot=info]) {
+    margin-top: 4px;
+  }
 }

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

@@ -27,6 +27,47 @@ const createEvent = (ev, data) => ({
  */
 export class DuetFooter {
     constructor() {
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.processedMainItem = null;
+        this.processedItems = null;
+        this.processedMenu = null;
+        /**
+         * Theme of the navigation.
+         */
+        this.theme = "";
+        /**
+         * Style variation of the footer.
+         */
+        this.variation = "default";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * URL that the logo link points to.
+         */
+        this.logoHref = "/";
+        /**
+         * The currently active language. This setting changes the logo to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
+        this.language = getLanguage();
+        /**
+         * Property to change accessibleLabelExternal defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelExternal when needed
+         * @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);
         /**
          * Component event handling.
          */
@@ -69,19 +110,6 @@ export class DuetFooter {
                 element.dataset[key] = item.data[key];
             }
         };
-        this.processedMainItem = null;
-        this.processedItems = null;
-        this.processedMenu = null;
-        this.theme = "";
-        this.variation = "default";
-        this.margin = "auto";
-        this.logoHref = "/";
-        this.language = getLanguage();
-        this.items = undefined;
-        this.accessibleLabel = undefined;
-        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-        this.menu = undefined;
     }
     /**
      * Component lifecycle events.
@@ -116,15 +144,15 @@ export class DuetFooter {
     render() {
         const text = getLocaleString(i18n, this.language);
         const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
-        return (h("footer", { key: '1cdd005df7644fd86ab52f88c8b291a4a117c257', class: {
+        return (h("footer", { key: '374b3e4cf00807da89a9742f3efdc2a4a0bc6b18', class: {
                 "duet-footer": true,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-footer-simple": this.variation === "simple",
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '2ae4978654a0581d936bf5ceb783983fff52f3f1', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: 'd7d006c75ecc0f652431fdab896396077bbbff14', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c8e124344783908ff121070042054f4d0c7947f5', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '1bbdf39de923762fc2fbe73b6aec50ef7ad9d6f1', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: '6a782f5bba005411db4a29657a3015ebefae6bc6', class: "footer-top-logo" }, h("duet-logo", { key: '6309f936a91496f2fac4fcd69c81b6dd41b81414', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '09e751f50a0229013c3b7f5ddf3ff8c5ca0bd4e3', class: "footer-top-right-container" }, h("slot", { key: 'c5fbd7a8d9132a2858a811dad7ad6d94ad31249f', name: "info" }), h("div", { key: '15559c461dc869347b68b44dbb1b2c7df5d5bba0', class: "footer-top-items" }, this.processedItems &&
+            }, part: "top" }, h("div", { key: 'eb1a893372576296ccf12fee8831c525a2632eee', class: "footer-top-logo" }, h("duet-logo", { key: '10de708506297ff9f3318912b81a2e8378c4270d', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: 'dc3946221202b4292f2e4fbc080178dca9ad73b1', class: "footer-top-right-container" }, h("slot", { key: '1ad763eaac02a6c7fbccd51e2236259ba1450b07', name: "info" }), h("div", { key: '54df55c2fc9dfdbaa774c841c3cd86f799684d81', class: "footer-top-items" }, this.processedItems &&
             this.processedItems.map((item, index) => {
                 var _a, _b, _c, _d, _e, _f;
                 return (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: ((_a = item.href) === null || _a === void 0 ? void 0 : _a.startsWith("tel:"))
@@ -134,7 +162,7 @@ export class DuetFooter {
                             : "navigation-arrow-right", "icon-right": !((_c = item.href) === null || _c === void 0 ? void 0 : _c.startsWith("tel:")) && !((_d = item.href) === null || _d === void 0 ? void 0 : _d.startsWith("mailto:")), "icon-size": ((_e = item.href) === null || _e === void 0 ? void 0 : _e.startsWith("tel:")) || ((_f = item.href) === null || _f === void 0 ? void 0 : _f.startsWith("mailto:"))
                         ? "medium"
                         : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)));
-            }))))), h("slot", { key: 'f4c7a3476693477b5c53f3877d40cb13c2e37ac1', name: "extra" }), h("p", { key: '795ec0bcbffd0df07b2cfecc96e0bac31a20d7af', class: "duet-footer-menu", part: "menu" }, h("span", { key: 'ebbd1b69487f6b698001c92641354f27c28ecac9', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '4f9ab134874edfce12a01631556a49762592b84a', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '6c299f198bdd74f1da639096ab73dc6b2e552285' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '7144f88dd4d2ca95506b609f77cfa752cda215f3', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }))))), h("slot", { key: '361a7bcbb2822507495f9ce3d2cba71c5787ad60', name: "extra" }), h("p", { key: 'd550a699008989e92c8ccb0f856f730a0f0d408a', class: "duet-footer-menu", part: "menu" }, h("span", { key: 'd0382fd0c48916c77ae76340f1797b35edb62863', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '085136a2a21443c434ef94fd8917616c07f764e9', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'df5f48b86ef46c1bfb03cf75e55ef2e402af1479' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '475e550d7b43e8a0ddd78b4ea001c78452b783e1', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     static get is() { return "duet-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -152,6 +180,7 @@ export class DuetFooter {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -172,12 +201,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetFooterVariation",
@@ -198,12 +227,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -224,12 +253,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "logoHref": {
                 "type": "string",
+                "attribute": "logo-href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -244,12 +273,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-href",
                 "reflect": false,
                 "defaultValue": "\"/\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -276,12 +305,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "items": {
                 "type": "any",
+                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -296,11 +325,11 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items",
                 "reflect": false
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -315,11 +344,11 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleLabelExternalDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-external-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -343,12 +372,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
             },
             "accessibleLabelExternal": {
                 "type": "string",
+                "attribute": "accessible-label-external",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -366,12 +395,12 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
             },
             "menu": {
                 "type": "any",
+                "attribute": "menu",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -386,7 +415,6 @@ export class DuetFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "menu",
                 "reflect": false
             }
         };