@duetds/components 10.0.0-alpha.9 → 10.0.0

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: '0d729b5e1cb791fb65c1071d23d0f2c00ec8b14b', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '4cd95f6f84bb5db41a80afa3cb86ca5dbf8a1272', "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: 'fd90f2bcea56a278ad8a9e46f0612da7084faf32', id: this.labelId }, h(this.labelHeadingLevel, { key: '40978d955040610ba7ed9fcd528602f09d278cf4' }, this.label), this.caption && h("span", { key: '652639176a29765a060e6d93394d1be15f85b655' }, this.caption)), h("div", { key: '8c1ce047394b16dc8aa72920a20872dcc5c40a62', 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: 'c9d8dd0b4a04ba5290400a792bb514dbeb48797b', class: "duet-fieldset-label" }, h("span", { key: 'dfd7c45d9d06013245bcb6151580e9a5c388c6bb', "aria-hidden": "true" }, this.label), h("slot", { key: 'fedce73421fc47341ccf5780b70decd6ae633488', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '16bf1bc0efed25c741a563780b1b4821dcfccb4a', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '3f1df4743f396f70df19ab467775db8b2c23706b', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '7fa0fd68a5b63c72bbcea5ff663d27c9ff4a041b' }), h("span", { key: '6aaac6a4abd35a44e85866bed2affd2b48416a89', class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '5b6df0d8797262bd9ce412985f39d2e750fc9e7f' }, 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: '4990de1bf699e3f0daea24f507a9b9e252b11d9a' }, h("duet-visually-hidden", { key: '0a226f6f53a8da89230e81df8be61a2413c44af1', "aria-hidden": "true" }, h("input", { key: 'a8a8e3bfc73847a74ea8dc8dff0da0c16d510e15', 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: '7ae4293b454d64394607de43e760c64f4644003a', 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: '98ad43f9effced4943cdd6b9903fff536837ceb0', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: 'b06a863d3bf6043b4aea1daa3c3792f5f75aa1fb', 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: 'b4c000b6e5f933bab8b99f6a662fff8e31f4958c', class: "footer-top-logo" }, h("duet-logo", { key: '1dd4789774e55c30390ab703b5b8ad384c51f8cf', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '1eca3d87feb76d9d4854a622cfd8ae88c474d775', class: "footer-top-right-container" }, h("slot", { key: 'df47caa012189f4e21e604a705b7d8c7c8a13d11', name: "info" }), h("div", { key: '143327524232e37b5174397da10401204149f90e', 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: '6cb5f4f380025c8bbdaa2ac5451f5229bf3187f1', name: "extra" }), h("p", { key: 'cd54917ff7f57ad3575241e75df45f6eb856e54c', class: "duet-footer-menu", part: "menu" }, h("span", { key: '528f6fdec2f93b1ab7babbfbe7aec319263ac95a', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '4eeb4bf5ec30d4e8d3a1d14e9224c48dfbf1796b', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'd985c3412bc83d4f558fb8ec8b21dd1adb1da256' }, 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: 'eac6be8cb430f9fdf6cef0fcef71eb38debde6e7', 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
             }
         };