@duetds/components 5.1.3 → 5.1.6

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

@@ -39,6 +39,10 @@
   }
 }
 
+:host(.input-button) {
+  z-index: 250;
+}
+
 :host(.duet-small) {
   margin-right: 2px !important;
   margin-bottom: 8px !important;
@@ -85,7 +89,6 @@
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: 600;
-  font-variant-numeric: tabular-nums;
   -webkit-hyphens: auto;
   hyphens: auto;
   line-height: 1.1;
@@ -105,6 +108,9 @@
 .duet-button.duet-m-0 {
   margin: 0 !important;
 }
+.duet-button:not(.input-button-primary, .input-button-secondary) {
+  font-variant-numeric: tabular-nums;
+}
 .duet-button.duet-button-text-center {
   text-align: center !important;
 }
@@ -243,61 +249,61 @@
   color: #c60c30 !important;
   border-color: #c60c30;
 }
-.duet-button.primary {
+.duet-button.primary, .duet-button.input-button-primary {
   color: white !important;
   background: #0077b3;
   border-color: #0077b3;
 }
-.duet-theme-turva .duet-button.primary {
+.duet-theme-turva .duet-button.primary, .duet-theme-turva .duet-button.input-button-primary {
   color: white !important;
   background: #c60c30;
   border-color: #c60c30;
 }
-.duet-button.primary:hover {
+.duet-button.primary:hover, .duet-button.input-button-primary:hover {
   background: #005f8f;
   border-color: #005f8f;
   box-shadow: 0 4px 20px rgba(34, 34, 34, 0.1);
 }
-.duet-theme-turva .duet-button.primary:hover {
+.duet-theme-turva .duet-button.primary:hover, .duet-theme-turva .duet-button.input-button-primary:hover {
   background: #940925;
   border-color: #940925;
 }
-.duet-button.primary:focus {
+.duet-button.primary:focus, .duet-button.input-button-primary:focus {
   outline: 0;
   box-shadow: 0 0 0 1px white, 0 0 0 4px rgba(0, 119, 179, 0.75);
 }
-.duet-theme-turva .duet-button.primary:focus {
+.duet-theme-turva .duet-button.primary:focus, .duet-theme-turva .duet-button.input-button-primary:focus {
   box-shadow: 0 0 0 1px white, 0 0 0 4px rgba(23, 28, 58, 0.7);
 }
-.duet-button.secondary {
+.duet-button.secondary, .duet-button.input-button-secondary {
   color: #00294d !important;
   background: transparent;
   border-color: #00294d;
 }
-.duet-theme-turva .duet-button.secondary {
+.duet-theme-turva .duet-button.secondary, .duet-theme-turva .duet-button.input-button-secondary {
   color: #171c3a !important;
   border-color: #171c3a;
 }
-.duet-button.secondary:hover {
+.duet-button.secondary:hover, .duet-button.input-button-secondary:hover {
   color: #0077b3 !important;
   border-color: #0077b3;
 }
-.duet-theme-turva .duet-button.secondary:hover {
+.duet-theme-turva .duet-button.secondary:hover, .duet-theme-turva .duet-button.input-button-secondary:hover {
   color: #c60c30 !important;
   border-color: #c60c30;
 }
-.duet-button.secondary.duet-button-negative {
+.duet-button.secondary.duet-button-negative, .duet-button.input-button-secondary.duet-button-negative {
   color: #e1e3e6 !important;
   border-color: white;
 }
-.duet-theme-turva .duet-button.secondary.duet-button-negative {
+.duet-theme-turva .duet-button.secondary.duet-button-negative, .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative {
   color: #e4e4e6 !important;
 }
-.duet-button.secondary.duet-button-negative:hover {
+.duet-button.secondary.duet-button-negative:hover, .duet-button.input-button-secondary.duet-button-negative:hover {
   color: #0077b3 !important;
   border-color: #0077b3;
 }
-.duet-theme-turva .duet-button.secondary.duet-button-negative:hover {
+.duet-theme-turva .duet-button.secondary.duet-button-negative:hover, .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative:hover {
   color: #c60c30 !important;
   border-color: #c60c30;
 }
@@ -461,6 +467,32 @@
   margin: 0;
   transform: translateX(-50%) translateY(-50%);
 }
+.duet-button.duet-button.input-button-primary, .duet-button.duet-button.input-button-secondary {
+  box-sizing: content-box;
+  min-width: 48px;
+  min-height: 48px;
+  padding: 0 !important;
+  border-width: 1px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 0;
+}
+.duet-button.duet-button.input-button-primary .duet-button-contents, .duet-button.duet-button.input-button-secondary .duet-button-contents {
+  position: static;
+}
+.duet-button.duet-button.input-button-primary .duet-button-icon.left.large,
+.duet-button.duet-button.input-button-primary .duet-button-icon.left.medium,
+.duet-button.duet-button.input-button-primary .duet-button-icon.left.small, .duet-button.duet-button.input-button-secondary .duet-button-icon.left.large,
+.duet-button.duet-button.input-button-secondary .duet-button-icon.left.medium,
+.duet-button.duet-button.input-button-secondary .duet-button-icon.left.small {
+  position: absolute;
+  top: 50% !important;
+  left: 50% !important;
+  padding: 0;
+  margin: 0;
+  transform: translateX(-50%) translateY(-50%);
+}
 .duet-button[disabled], .duet-button[disabled]:hover, .duet-button.duet-button-negative[disabled], .duet-button.duet-button-negative[disabled]:hover {
   color: #657787 !important;
   background: #e1e3e6 !important;
@@ -473,7 +505,7 @@
   border-color: #e4e4e6 !important;
 }
 
-.duet-button-is-loading.primary {
+.duet-button-is-loading.primary, .duet-button-is-loading.input-button-primary {
   color: white;
 }
 .duet-button-is-loading.default {

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

@@ -229,6 +229,7 @@ export class DuetButton {
         "duet-small": this.size === "small",
         "duet-fixed": this.fixed,
         "duet-expand": this.expand,
+        "input-button": this.variation === "input-button-primary" || this.variation === "input-button-secondary",
       } },
       h("div", { class: {
           "duet-button-container": true,
@@ -413,7 +414,7 @@ export class DuetButton {
       "mutable": false,
       "complexType": {
         "original": "DuetButtonVariation",
-        "resolved": "\"default\" | \"destructive\" | \"destructive-primary\" | \"destructive-secondary\" | \"negative\" | \"plain\" | \"primary\" | \"secondary\"",
+        "resolved": "\"default\" | \"destructive\" | \"destructive-primary\" | \"destructive-secondary\" | \"input-button-primary\" | \"input-button-secondary\" | \"negative\" | \"plain\" | \"primary\" | \"secondary\"",
         "references": {
           "DuetButtonVariation": {
             "location": "local"

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

@@ -309,6 +309,160 @@ a:hover .duet-footer-arrow {
   color: #171c3a;
 }
 
+.duet-footer-multilevel duet-logo {
+  margin-left: 0.5rem !important;
+}
+@media (min-width: 62em) {
+  .duet-footer-multilevel duet-logo {
+    margin-left: -0.5rem !important;
+  }
+}
+.duet-footer-multilevel .duet-footer-link {
+  padding: 0.5rem 1.25rem !important;
+  border: 0;
+}
+.duet-footer-multilevel .duet-footer-link:first-of-type {
+  margin: 0;
+}
+.duet-footer-multilevel .duet-footer-link .duet-footer-arrow {
+  margin-left: 0.5rem;
+}
+.duet-footer-multilevel .duet-footer-link .duet-footer-arrow duet-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+@media (min-width: 62em) {
+  .duet-footer-multilevel .duet-footer-link {
+    padding: 0.75rem 0 !important;
+  }
+}
+.duet-footer-multilevel .duet-footer-top {
+  flex-direction: column;
+  gap: 1rem 0;
+  align-items: flex-start;
+}
+@media (min-width: 62em) {
+  .duet-footer-multilevel .multilevel {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+.duet-footer-multilevel .multilevel-main-item {
+  margin-top: 1.25rem;
+}
+@media (min-width: 62em) {
+  .duet-footer-multilevel .multilevel-main-item {
+    margin-top: 0;
+  }
+}
+.duet-footer-multilevel .multilevel-main-item .duet-footer-link {
+  padding: 0 0.5 1.25rem !important;
+  font-weight: 700;
+}
+@media (min-width: 62em) {
+  .duet-footer-multilevel .multilevel-main-item .duet-footer-link {
+    padding: 0 0 0.5rem !important;
+  }
+}
+@media (min-width: 62em) {
+  .duet-footer-multilevel .multilevel-primary-items {
+    column-gap: 0;
+    width: 100%;
+    columns: 3;
+  }
+  .duet-footer-multilevel .multilevel-primary-items .duet-footer-link {
+    display: inline-flex;
+  }
+}
+.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link {
+  padding: 0.875rem 1.25rem !important;
+  font-weight: 700;
+}
+.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link:first-child {
+  padding: 1.25rem 1.25rem 0.875rem !important;
+}
+@media (min-width: 62em) {
+  .duet-footer-multilevel .multilevel-secondary-items {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    width: 100%;
+  }
+  .duet-footer-multilevel .multilevel-secondary-items .duet-footer-link,
+.duet-footer-multilevel .multilevel-secondary-items .duet-footer-link:first-child {
+    display: inline-flex;
+    padding: 1rem 0 !important;
+  }
+}
+.duet-footer-multilevel .multilevel-right .duet-footer-link:first-child {
+  padding-top: 0.875rem !important;
+  font-weight: 700;
+}
+@media (min-width: 62em) {
+  .duet-footer-multilevel .multilevel-right .duet-footer-link {
+    padding: 0.375rem 0 !important;
+    font-size: 0.875rem;
+    font-weight: 400;
+  }
+  .duet-footer-multilevel .multilevel-right .duet-footer-link:first-child {
+    padding-top: 0 !important;
+    font-size: 1rem;
+    font-weight: 600;
+  }
+  .duet-footer-multilevel .multilevel-right .tertiary-main-item .duet-footer-arrow {
+    display: none;
+  }
+}
+.duet-footer-multilevel .duet-footer-menu {
+  padding: 1.25rem !important;
+  line-height: 2.5;
+}
+@media (min-width: 62em) {
+  .duet-footer-multilevel .duet-footer-menu {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+    text-align: right;
+  }
+}
+.duet-footer-multilevel .duet-footer-copyright {
+  display: none;
+  font-size: 0.875rem;
+}
+@media (min-width: 62em) {
+  .duet-footer-multilevel .duet-footer-copyright {
+    position: absolute;
+    left: 48px;
+    display: inline;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-footer-multilevel .duet-footer-copyright {
+    left: 0;
+  }
+}
+.duet-footer-multilevel .duet-footer-copyright.duet-footer-copyright-mobile {
+  display: block;
+  padding-top: 0.5rem;
+  padding-bottom: 1.25rem;
+  text-align: center;
+}
+@media (min-width: 62em) {
+  .duet-footer-multilevel .duet-footer-copyright.duet-footer-copyright-mobile {
+    display: none;
+  }
+}
+.duet-footer-multilevel.duet-theme-turva .duet-footer-copyright-mobile {
+  padding-left: 1.25rem;
+  text-align: left;
+}
+.duet-footer-multilevel.duet-theme-turva .duet-footer-icon {
+  color: #171c3a;
+  background: white;
+}
+.duet-footer-multilevel.duet-theme-turva a:hover .duet-footer-icon {
+  background: #e6e6e6;
+}
+
 .duet-footer-external {
   display: inline-block;
   margin-left: 4px;

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

@@ -1,7 +1,9 @@
 /*!
  * Built with Duet Design System
  */
+import arrowDownSmallIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import arrowRightIcon from "@duetds/icons/lib/assets/action-arrow-right";
+import arrowRightSmallIcon from "@duetds/icons/lib/assets/action-arrow-right-small";
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window";
 import newWindowIconSmall from "@duetds/icons/lib/assets/action-new-window-small";
 import { Component, Element, Event, Fragment, h, Prop, State, Watch } from "@stencil/core";
@@ -14,12 +16,18 @@ const i18n = {
   sv: { lahi: "© LokalTapiola", turva: "© Turva" },
   en: { lahi: "© LocalTapiola", turva: "© Turva" },
 };
+const i18nMultilevel = {
+  fi: { lahi: "© LähiTapiola", turva: "© Keskinäinen Vakuutusyhtiö Turva" },
+  sv: { lahi: "© LokalTapiola", turva: "© Keskinäinen Vakuutusyhtiö Turva" },
+  en: { lahi: "© LocalTapiola", turva: "© Keskinäinen Vakuutusyhtiö Turva" },
+};
 const createEvent = (ev, data) => ({
   component: "duet-footer",
   data,
   originalEvent: ev,
 });
 /**
+ * @slot extra - A slot for extra links.
  * @part top - piercing selector for styling the top part of the footer
  * @part menu - piercing selector for styling the menu section of the footer
  */
@@ -29,7 +37,11 @@ export class DuetFooter {
      * State() variables
      * Inlined decorator, alphabetical order.
      */
+    this.processedMainItem = null;
     this.processedItems = null;
+    this.processedSecondaryItems = null;
+    this.processedTertiaryMainItem = null;
+    this.processedTertiaryItems = null;
     this.processedMenu = null;
     /**
      * Theme of the navigation.
@@ -104,7 +116,11 @@ export class DuetFooter {
    * Local methods
    */
   async refresh() {
+    this.processedMainItem = parsePossibleJSON(this.mainItem);
     this.processedItems = parsePossibleJSON(this.items);
+    this.processedSecondaryItems = parsePossibleJSON(this.secondaryItems);
+    this.processedTertiaryMainItem = parsePossibleJSON(this.tertiaryMainItem);
+    this.processedTertiaryItems = parsePossibleJSON(this.tertiaryItems);
     this.processedMenu = parsePossibleJSON(this.menu);
   }
   /**
@@ -112,19 +128,21 @@ export class DuetFooter {
    * Always the last one in the class.
    */
   render() {
-    const text = getLocaleString(i18n);
+    const text = this.variation === "multilevel" ? getLocaleString(i18nMultilevel) : getLocaleString(i18n);
     const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
     return (h("footer", { class: {
         "duet-footer": true,
         "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
         "duet-footer-simple": this.variation === "simple",
+        "duet-footer-multilevel": this.variation === "multilevel",
       } },
       h("div", { class: "duet-footer-wrapper" },
         h("div", { class: "duet-footer-top", part: "top" },
           this.variation !== "simple" && (h("duet-logo", { href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })),
           this.processedItems &&
             this.variation !== "simple" &&
+            this.variation !== "multilevel" &&
             this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
               h("div", { class: "duet-footer-icon" },
                 h("duet-icon", { size: "medium", margin: "none", name: item.icon, color: "currentColor" })),
@@ -132,11 +150,50 @@ export class DuetFooter {
               item.external && h("duet-visually-hidden", null,
                 ", ",
                 this.accessibleLabelExternal),
-              h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: arrowRightIcon.svg, size: "auto", margin: "none", color: "currentColor" }))))))),
+              h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: arrowRightIcon.svg, size: "auto", margin: "none", color: "currentColor" })))))),
+          this.processedItems && this.variation === "multilevel" && (h("div", { class: "multilevel" },
+            h("div", { class: "multilevel-left" },
+              h("div", { class: "multilevel-main-item" }, this.processedMainItem && (h("a", { class: "duet-footer-link", href: this.processedMainItem.href, id: this.processedMainItem.id, target: this.processedMainItem.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, this.processedMainItem) },
+                h("span", null, this.processedMainItem.label),
+                this.processedMainItem.external && (h("duet-visually-hidden", null,
+                  ", ",
+                  this.accessibleLabelExternal)),
+                h("div", { class: "duet-footer-arrow" }, this.processedMainItem.external && (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))),
+              h("div", { class: "multilevel-primary-items" }, this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
+                h("div", { class: "duet-footer-icon" },
+                  h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor" })),
+                h("span", null, item.label),
+                item.external && h("duet-visually-hidden", null,
+                  ", ",
+                  this.accessibleLabelExternal),
+                h("div", { class: "duet-footer-arrow" }, item.external && (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))))),
+              h("div", { class: "multilevel-secondary-items" }, this.processedSecondaryItems &&
+                this.processedSecondaryItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
+                  h("span", null, item.label),
+                  item.external && (h("duet-visually-hidden", null,
+                    ", ",
+                    this.accessibleLabelExternal)),
+                  h("div", { class: "duet-footer-arrow" }, item.external ? (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })) : (h("duet-icon", { icon: arrowRightSmallIcon.svg, size: "auto", margin: "none", color: "currentColor" })))))))),
+            h("div", { class: "multilevel-right" },
+              this.processedTertiaryMainItem && (h("span", { class: "duet-footer-link tertiary-main-item", id: this.processedTertiaryMainItem.id },
+                h("span", null, this.processedTertiaryMainItem.label),
+                this.processedTertiaryMainItem.external && (h("duet-visually-hidden", null,
+                  ", ",
+                  this.accessibleLabelExternal)),
+                h("div", { class: "duet-footer-arrow" },
+                  h("duet-icon", { icon: arrowDownSmallIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))),
+              this.processedTertiaryItems &&
+                this.processedTertiaryItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
+                  h("span", null, item.label),
+                  item.external && h("duet-visually-hidden", null,
+                    ", ",
+                    this.accessibleLabelExternal),
+                  h("div", { class: "duet-footer-arrow" }, item.external && (h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))))),
+        h("slot", { name: "extra" }),
         h("p", { class: "duet-footer-menu", part: "menu" },
           h("span", { class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`),
           this.processedMenu && (h(Fragment, null,
-            h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"),
+            this.variation !== "multilevel" && (h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")),
             this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item) },
               item.label,
               item.external && (h(Fragment, null,
@@ -145,7 +202,8 @@ export class DuetFooter {
                   this.accessibleLabelExternal),
                 h("div", { 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("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/"))))))),
+        this.variation === "multilevel" && (h("p", { class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`)))));
   }
   static get is() { return "duet-footer"; }
   static get encapsulation() { return "shadow"; }
@@ -184,7 +242,7 @@ export class DuetFooter {
       "mutable": false,
       "complexType": {
         "original": "DuetFooterVariation",
-        "resolved": "\"default\" | \"simple\"",
+        "resolved": "\"default\" | \"multilevel\" | \"simple\"",
         "references": {
           "DuetFooterVariation": {
             "location": "local"
@@ -271,6 +329,23 @@ export class DuetFooter {
       "reflect": false,
       "defaultValue": "getLanguage()"
     },
+    "mainItem": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Main item of footer links. Item have to include mandatory\n\"label\" and \"href\". Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
+      },
+      "attribute": "main-item",
+      "reflect": false
+    },
     "items": {
       "type": "any",
       "mutable": false,
@@ -288,6 +363,57 @@ export class DuetFooter {
       "attribute": "items",
       "reflect": false
     },
+    "secondaryItems": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An array of items for the secondary footer links. Items have to include mandatory\n\"label\" and \"href\". Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
+      },
+      "attribute": "secondary-items",
+      "reflect": false
+    },
+    "tertiaryMainItem": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Main item of tertiary footer links. Item have to include mandatory\n\"label\" and \"href\". Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
+      },
+      "attribute": "tertiary-main-item",
+      "reflect": false
+    },
+    "tertiaryItems": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An array of items for the tertiary footer links. Items have to include mandatory\n\"label\" and \"href\". Additionally, you can pass an \"id\"\nthat is added as an HTML identifier for the anchor tag."
+      },
+      "attribute": "tertiary-items",
+      "reflect": false
+    },
     "accessibleLabelExternalDefaults": {
       "type": "string",
       "mutable": false,
@@ -354,7 +480,11 @@ export class DuetFooter {
     }
   }; }
   static get states() { return {
+    "processedMainItem": {},
     "processedItems": {},
+    "processedSecondaryItems": {},
+    "processedTertiaryMainItem": {},
+    "processedTertiaryItems": {},
     "processedMenu": {}
   }; }
   static get events() { return [{

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

@@ -100,6 +100,32 @@ duet-caption:not(:last-of-type) {
   width: 100%;
   height: 100%;
 }
+.duet-input-container.has-clear .duet-input-clear-icon {
+  position: relative;
+  z-index: 250;
+}
+.duet-input-container.has-clear .duet-input-clear-icon button {
+  position: absolute;
+  top: -24px;
+  right: 0;
+  min-width: 48px;
+  min-height: 48px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva .duet-input-container.has-clear .duet-input-clear-icon button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+.duet-input-container.has-clear .duet-input-clear-icon button:active {
+  opacity: 0.75;
+  transition: none;
+}
+.duet-input-container.has-clear.has-icon .duet-input-clear-icon {
+  top: -24px;
+  right: 24px;
+}
 
 .duet-input {
   position: relative;
@@ -299,4 +325,27 @@ duet-caption:not(:last-of-type) {
 .duet-input-relative {
   position: relative;
   width: 100%;
+}
+
+.duet-input-variation-button {
+  position: relative;
+  width: 100%;
+}
+.duet-input-variation-button .duet-input-relative {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-start;
+  width: auto;
+}
+.duet-input-variation-button .duet-input-relative duet-button {
+  z-index: 250;
+  margin-bottom: 0;
+}
+.duet-input-variation-button .duet-input-relative .duet-input {
+  border-right-width: 0 !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }