@duetds/components 5.1.1 → 5.1.4

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-header/duet-header.js

@@ -290,7 +290,9 @@ export class DuetHeader {
         this.isSegmentOpen = false;
         this.isSessionOpen = false;
         el = this.navigationEl;
-        this.isSlideOutOpen = !this.isSlideOutOpen;
+        const toggle = !this.isSlideOutOpen;
+        this.isSlideOutOpen = toggle;
+        this.duetMobileNavToggle.emit({ originalEvent: ev, open: toggle });
         if (this.isSlideOutOpen) {
           disableBodyScroll(this.navigationEl, { reserveScrollBarGap: true });
         }
@@ -419,6 +421,9 @@ export class DuetHeader {
     if (this.renderDesktopNav !== this.mql[0].matches) {
       this.renderDesktopNav = this.mql[0].matches;
       this.openMenu = null;
+      if (this.isSlideOutOpen) {
+        this.toggleMenu(document.createEvent("UIEvents"), "mobile");
+      }
     }
     this.processedItems = parsePossibleJSON(this.items);
     this.processedLanguageItems = parsePossibleJSON(this.languageItems);
@@ -556,7 +561,7 @@ export class DuetHeader {
             h("div", { class: "duet-header-top" },
               skipToLabel,
               h("div", { class: "logo-and-segment" },
-                largeLogo,
+                h("div", null, largeLogo),
                 this.processedItems && (h(DuetHeaderDropdown, { id: segmentId, label: activeSegment.label, active: this.isSegmentOpen, isOpen: this.isSegmentOpen, badge: false, toggleRef: el => (this.segmentItemsButtonEl = el), itemsRef: el => (this.segmentItemsEl = el), onToggle: event => this.toggleMenu(event, "segment") }, this.processedItems.map(item => (h("a", { class: { active: activeSegment === item }, role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleItemClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: item.external ? "_blank" : "_self" },
                   item.icon && (h("div", { class: "duet-header-icon" },
                     h("duet-icon", { margin: "none", size: "x-small", name: item.icon, color: "currentColor" }))),
@@ -648,7 +653,7 @@ export class DuetHeader {
                         secondLevelItem.items.map(thirdLevelItem => (h("a", { class: {
                             "duet-header-item": true,
                             active: thirdLevelItem.active === true,
-                          }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: thirdLevelItem.external ? "_blank" : "_self" },
+                          }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), target: thirdLevelItem.external ? "_blank" : "_self" },
                           thirdLevelItem.icon && (h("div", { class: "duet-header-icon" },
                             h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))),
                           h("span", null, thirdLevelItem.label),
@@ -1311,6 +1316,25 @@ export class DuetHeader {
           }
         }
       }
+    }, {
+      "method": "duetMobileNavToggle",
+      "name": "duetMobileNavToggle",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event raised mobile navigation is toggled. **event.detail.open** shows the current status of the navigation."
+      },
+      "complexType": {
+        "original": "DuetHeaderMobileNavToggleEvent",
+        "resolved": "{ originalEvent: Event; open: boolean; }",
+        "references": {
+          "DuetHeaderMobileNavToggleEvent": {
+            "location": "local"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "closeMenus": {

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;
 }

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

@@ -6,6 +6,8 @@ import searchIcon from "@duetds/icons/lib/assets/form-search";
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
+import { isEscapeKey } from "../../utils/keyboard-utils";
+import { getLocaleString } from "../../utils/language-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 const icons = {
   search: searchIcon,
@@ -17,11 +19,17 @@ export class DuetInput {
      * Own Properties
      */
     this.inputId = createID("DuetInput");
+    this.clearId = createID("DuetInputClear");
     this.labelId = createID("DuetLabel");
     this.topCaptionId = createID("DuetCaptionTop");
     this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
     this.errorId = createID("DuetError");
     this.disallowPatternRegex = null;
+    this.clearLabel = getLocaleString({
+      en: "Clear",
+      fi: "Tyhjennä",
+      sv: "Rensa",
+    });
     /**
      * Indicates the id of a component that describes the input.
      */
@@ -35,6 +43,10 @@ export class DuetInput {
      * event after each keystroke.
      */
     this.debounce = 0;
+    /**
+     * If set, the input field will display a clear button that can be accessed with tabbing.
+     */
+    this.clear = false;
     /**
      * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
      * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
@@ -68,6 +80,10 @@ export class DuetInput {
      * Type of the input.
      */
     this.type = "text";
+    /**
+     * Variation of button.
+     */
+    this.variation = "default";
     /**
      * Label for the input.
      */
@@ -135,6 +151,13 @@ export class DuetInput {
         component: "duet-input",
       });
     };
+    this.onClear = (ev) => {
+      this.duetFocus.emit({
+        originalEvent: ev,
+        value: this.value,
+        component: "duet-input",
+      });
+    };
     /** Private functions
      *
      */
@@ -154,6 +177,17 @@ export class DuetInput {
       }
       return describedBy;
     };
+    this.handleClearClick = event => {
+      const clearing = this.clearInput();
+      this.onClear(event);
+      return clearing;
+    };
+    this.keyHandler = event => {
+      if (isEscapeKey(event) && this.clear) {
+        this.handleClearClick(event);
+      }
+      return event;
+    };
   }
   disallowedPatternChange() {
     this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
@@ -208,6 +242,16 @@ export class DuetInput {
       restoreCursor();
     }
   }
+  /**
+   * Reset the cursor position on the native element
+   * `input.resetCursor()`.
+   */
+  async clearInput() {
+    if (this.nativeInput) {
+      this.nativeInput.value = "";
+      this.value = "";
+    }
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -225,14 +269,16 @@ export class DuetInput {
     else if (!this.pattern && this.type === "tel") {
       inputProps.pattern = "[0-9+ ]+";
     }
-    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } },
+    return (h(Host, { class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) },
       h("div", { class: {
           "duet-input-container": true,
           "duet-theme-turva": this.theme === "turva",
+          [`duet-input-variation-${this.variation}`]: true,
           "duet-label-hidden": this.labelHidden,
           "duet-input-top-caption-shown": this.isCaptionVisible,
           "has-icon": !!this.icon || (this.type !== "text" && this.type !== "tel" && this.type !== "password"),
           "has-error": !!this.error,
+          "has-clear": this.clear,
         } },
         h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label),
         this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)),
@@ -245,10 +291,18 @@ export class DuetInput {
               "is-number": this.component === "number",
               "is-date": this.component === "date",
             }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)),
-          !this.icon && this.type !== "text" && this.type !== "tel" && this.type !== "password" && (h("div", { class: "duet-input-icon" },
+          !this.icon &&
+            this.type !== "text" &&
+            this.type !== "tel" &&
+            this.type !== "password" &&
+            this.variation !== "button" && (h("div", { class: "duet-input-icon" },
             h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))),
-          this.icon && (h("div", { class: "duet-input-icon" },
+          this.clear && this.value && (h("div", { class: "duet-input-clear-icon" },
+            h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel, "aria-keyshortcuts": "Escape" },
+              h("duet-icon", { margin: "none", size: "xx-small", name: "activity-close", color: "currentColor" })))),
+          this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" },
             h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
+          this.variation === "button" && h("slot", { name: "button" }),
           h("slot", null)),
         h("span", { class: "duet-input-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
   }
@@ -400,6 +454,24 @@ export class DuetInput {
       "reflect": false,
       "defaultValue": "0"
     },
+    "clear": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If set, the input field will display a clear button that can be accessed with tabbing."
+      },
+      "attribute": "clear",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "caption": {
       "type": "string",
       "mutable": false,
@@ -574,6 +646,28 @@ export class DuetInput {
       "reflect": false,
       "defaultValue": "\"text\""
     },
+    "variation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetVariationType",
+        "resolved": "\"button\" | \"default\"",
+        "references": {
+          "DuetVariationType": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Variation of button."
+      },
+      "attribute": "variation",
+      "reflect": false,
+      "defaultValue": "\"default\""
+    },
     "label": {
       "type": "string",
       "mutable": false,
@@ -944,6 +1038,25 @@ export class DuetInput {
           }
         }
       }
+    }, {
+      "method": "duetClear",
+      "name": "duetClear",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the input is cleared."
+      },
+      "complexType": {
+        "original": "DuetInputEvent",
+        "resolved": "{ originalEvent?: Event; value: string; component: \"duet-input\"; }",
+        "references": {
+          "DuetInputEvent": {
+            "location": "local"
+          }
+        }
+      }
     }, {
       "method": "duetFocus",
       "name": "duetFocus",
@@ -1002,6 +1115,22 @@ export class DuetInput {
         "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
         "tags": []
       }
+    },
+    "clearInput": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "element"; }

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

@@ -96,7 +96,7 @@ export class DuetStep {
           "rounded-bottom": this.roundedBottom,
           "duet-theme-turva": this.theme === "turva",
         } },
-        h("div", { class: "duet-step-heading", id: this.buttonId, role: "button", tabindex: this.state !== "incomplete" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) },
+        h("div", { class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) },
           h("div", { "aria-hidden": "true" },
             h("div", { class: "duet-step-counter" }, this.renderStepCounter())),
           h("duet-spacer", { direction: "horizontal", size: "large", breakpoint: "small" }),

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

@@ -203,7 +203,7 @@ export class DuetStepper {
     },
     "selected": {
       "type": "number",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "number",
         "resolved": "number",