@duetds/components 6.3.5 → 6.5.0

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

@@ -307,6 +307,26 @@ duet-caption:not(:last-of-type) {
   margin-right: -28px;
 }
 
+.duet-label-has-tooltip {
+  display: inline-flex;
+}
+@media (min-width: 48em) {
+  .duet-label-has-tooltip {
+    display: inline;
+  }
+}
+.duet-label-has-tooltip::before {
+  display: block;
+  margin-top: 7px;
+  content: " ";
+}
+
+.duet-input-tooltip::after {
+  display: block;
+  height: 49px;
+  content: " ";
+}
+
 .duet-input-help {
   display: block;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

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

@@ -248,7 +248,7 @@ export class DuetInput {
             (this.type !== "text" && this.type !== "tel" && this.type !== "password" && this.type !== "time")),
         "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)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.type, class: {
+      } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-label-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.type, class: {
         "duet-input": true,
         disabled: this.disabled,
         "is-number": this.component === "number",

package/lib/collection/components/duet-menu-bar/duet-menu-bar.css

@@ -147,4 +147,26 @@
 }
 .duet-menu-bar.duet-theme-turva {
   background: white;
+}
+
+slot[name=center] {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25;
+  color: #00294d;
+}
+.duet-theme-turva slot[name=center] {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: #940925;
+}
+
+slot[name=right] {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: #004d80;
+}
+.duet-theme-turva slot[name=right] {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: #940925;
 }

package/lib/collection/components/{duet-slideout-panel-link/duet-slideout-panel-link.css → duet-menu-bar-button/duet-menu-bar-button.css}

@@ -20,28 +20,38 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
-  width: 100%;
   height: 100%;
 }
 
-.duet-slideout-panel-link {
+.duet-menu-bar-button {
   position: relative;
   display: flex;
-  gap: 20px;
+  gap: 8px;
   align-items: center;
-  justify-content: flex-start;
-  width: 100%;
+  justify-content: center;
   height: 100%;
-  padding: 8px 0;
+  padding: 0 12px;
   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: 1.25rem;
-  font-weight: 800;
-  line-height: 1.25;
-  color: #00294d;
+  color: inherit;
   text-align: center;
   text-decoration: none;
+  cursor: pointer;
 }
-.duet-slideout-panel-link.duet-theme-turva {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #940925;
+@media (min-width: 62em) {
+  .duet-menu-bar-button {
+    padding: 0 20px;
+  }
+}
+@media (min-width: 64.0625em) {
+  .duet-menu-bar-button {
+    padding: 0 28px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-menu-bar-button:hover {
+    color: #0077b3;
+  }
+  .duet-menu-bar-button:hover.duet-theme-turva {
+    color: #c60c30;
+  }
 }

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

@@ -0,0 +1,156 @@
+/*!
+ * Built with Duet Design System
+ */
+import { media_query_large } from "@duetds/tokens/lib/tokens.json";
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetMenuBarButton {
+  constructor() {
+    this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
+    this.boundMqlFunctions = [];
+    this.changeIconSize = () => {
+      if (this.mql[0].matches) {
+        this.iconSize = "x-small";
+      }
+      else {
+        this.iconSize = "small";
+      }
+    };
+    this.iconSize = "x-small";
+    this.theme = "";
+    this.icon = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  connectedCallback() {
+    this.changeIconSize();
+    for (let i = 0; i < this.mql.length; i++) {
+      // addEventListener is not available in Stencil hydrate
+      if (this.mql[i].addEventListener) {
+        const bound = this.changeIconSize.bind(this);
+        this.mql[i].addEventListener("change", bound);
+        this.boundMqlFunctions[i] = bound;
+      }
+    }
+  }
+  disconnectedCallback() {
+    for (let i = 0; i < this.mql.length; i++) {
+      // removeEventListener is not available in Stencil hydrate
+      if (this.mql[i].removeEventListener) {
+        this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
+      }
+    }
+    this.boundMqlFunctions = [];
+  }
+  /**
+   * Sets focus on underlying button element.
+   */
+  async setFocus(options) {
+    if (this.nativeButton) {
+      this.nativeButton.focus(options);
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, { onfocus: () => this.setFocus() }, h("button", { ref: button => (this.nativeButton = button), class: {
+        "duet-menu-bar-button": true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, this.icon && h("duet-icon", { size: this.iconSize, name: this.icon, margin: "none" }), h("slot", null))));
+  }
+  static get is() { return "duet-menu-bar-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-menu-bar-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-menu-bar-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "icon": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon"
+        },
+        "attribute": "icon",
+        "reflect": true,
+        "defaultValue": "undefined"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "iconSize": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on underlying button element.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.css

@@ -32,6 +32,7 @@
   height: 100%;
   padding: 0 12px;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: inherit;
   text-align: center;
   text-decoration: none;
 }
@@ -48,9 +49,6 @@
 .duet-menu-bar-link.active {
   color: #0077b3;
 }
-.duet-theme-turva .duet-menu-bar-link.active {
-  color: #c60c30;
-}
 .duet-menu-bar-link.active::after {
   position: absolute;
   top: auto;
@@ -71,42 +69,17 @@
     height: 2px;
   }
 }
-.duet-menu-bar-link--slot-center {
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 1.25;
-  color: #00294d;
-}
-.duet-menu-bar-link--slot-center.duet-theme-turva {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #940925;
+.duet-menu-bar-link.active.duet-theme-turva {
+  color: #c60c30;
 }
-.duet-menu-bar-link--slot-center.active.duet-theme-turva::after {
+.duet-menu-bar-link.active.duet-theme-turva::after {
   background: #c60c30;
 }
 @media (min-width: 62em) {
-  .duet-menu-bar-link--slot-center:hover {
-    color: #0077b3;
-  }
-  .duet-menu-bar-link--slot-center:hover.duet-theme-turva {
-    color: #c60c30;
-  }
-}
-.duet-menu-bar-link--slot-right {
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.25;
-  color: #004d80;
-}
-.duet-menu-bar-link--slot-right.duet-theme-turva {
-  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #940925;
-}
-@media (min-width: 62em) {
-  .duet-menu-bar-link--slot-right:hover {
+  .duet-menu-bar-link:hover {
     color: #0077b3;
   }
-  .duet-menu-bar-link--slot-right:hover.duet-theme-turva {
+  .duet-menu-bar-link:hover.duet-theme-turva {
     color: #c60c30;
   }
 }

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.js

@@ -19,19 +19,6 @@ export class DuetMenuBarLink {
         this.iconSize = "small";
       }
     };
-    this.getVariant = () => {
-      const slot = this.element.parentElement.getAttribute("slot");
-      switch (slot) {
-        case "center":
-          return "center";
-        case "right":
-          return "right";
-        case "below":
-          return "below";
-        default:
-          return "center";
-      }
-    };
     this.iconSize = "x-small";
     this.theme = "";
     this.active = false;
@@ -73,7 +60,6 @@ export class DuetMenuBarLink {
         "duet-menu-bar-link": true,
         "duet-theme-turva": this.theme === "turva",
         active: this.active,
-        [`duet-menu-bar-link--slot-${this.getVariant()}`]: true,
       }, href: this.href }, this.icon && h("duet-icon", { size: this.iconSize, name: this.icon, margin: "none" }), h("slot", null))));
   }
   static get is() { return "duet-menu-bar-link"; }

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

@@ -70,11 +70,10 @@ export class DuetRangeStepper {
     }
   }
   handleStepClick(e) {
-    const from = this.stepIndex * this.stepSize - this.stepSize;
     this.duetRangeStepUpdate.emit({
       originalEvent: e,
       component: "duet-range-stepper",
-      from: from,
+      from: this.getFrom(),
       to: this.getTo(),
       index: this.stepIndex,
     });
@@ -94,23 +93,16 @@ export class DuetRangeStepper {
       this.stepIndex = Math.ceil(this.total / this.stepSize);
     }
   }
+  getFrom() {
+    return Math.floor((this.stepIndex - 1) * this.stepSize) + 1;
+  }
   getTo() {
-    const to = this.stepIndex * this.stepSize;
-    const result = to > this.total ? this.total : to;
-    return result;
+    return Math.min(Math.floor(this.stepIndex * this.stepSize), this.total);
   }
   generateStepSize() {
-    // this function uses this.stepIndex and this.range to generate a range of number like 1-100
-    // this is used to generate the step size
-    let start = Math.floor((this.stepIndex - 1) * this.stepSize);
-    //easy fix for starting position
-    if (start === 0) {
-      start = 1;
-    }
-    const end = Math.floor(this.stepIndex * this.stepSize);
     return this.ariaLabels.x_of_y
-      .replace("{0}", String(start))
-      .replace("{1}", String(end))
+      .replace("{0}", String(this.getFrom()))
+      .replace("{1}", String(this.getTo()))
       .replace("{2}", String(this.total));
   }
   //handle a11y keyboard navigation events

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

@@ -23,54 +23,22 @@
   height: 100%;
 }
 
-:host slot::slotted(*) {
+:host slot:not([name=toggle])::slotted(*) {
   position: relative;
   top: 0.5rem;
   opacity: 0;
   transition: top 0.3s ease-in, opacity 0.3s ease-in;
 }
 
-:host([open]) slot::slotted(*) {
+:host([open]) slot:not([name=toggle])::slotted(*) {
   top: 0;
   opacity: 1;
 }
 
-.hamburger {
-  position: relative;
-  width: 24px;
-  height: 24px;
-  margin-top: 8px !important;
-  pointer-events: none;
-  transition: 0.4s ease-in-out;
-  backface-visibility: hidden;
-}
-.hamburger .bar {
-  position: absolute;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 2px;
-  background: #00294d;
-  border-radius: 20rem;
-}
-.duet-theme-turva .hamburger .bar {
-  background: #171c3a;
-}
-.hamburger .bar:nth-child(1) {
-  top: 0;
-}
-.hamburger .bar:nth-child(2), .hamburger .bar:nth-child(3) {
-  top: 7px;
-}
-.hamburger .bar:nth-child(4) {
-  top: 14px;
-}
-
 .duet-slideout {
   display: flex;
   align-items: center;
   height: 100%;
-  padding: 0 8px;
 }
 .duet-slideout .dialog {
   position: fixed;
@@ -84,6 +52,14 @@
   background: white;
   box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1) inset;
 }
+@media (min-width: 62em) {
+  .duet-slideout .dialog {
+    right: 0;
+    left: auto;
+    width: 500px;
+    transition: right 600ms ease;
+  }
+}
 .duet-slideout .dialog .top {
   display: flex;
   align-items: center;
@@ -104,6 +80,12 @@
 .duet-slideout .dialog.hidden {
   visibility: hidden;
 }
+@media (min-width: 62em) {
+  .duet-slideout .dialog.hidden {
+    right: -500px;
+    visibility: visible;
+  }
+}
 .duet-slideout.duet-theme-turva button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: #171c3a;
@@ -120,4 +102,15 @@
 
 ::slotted(*) {
   width: 100%;
+}
+
+slot {
+  color: #00294d;
+}
+.duet-theme-turva slot {
+  color: #940925;
+}
+
+slot[name=toggle] {
+  color: inherit;
 }

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { FocusGuard } from "../../utils/focus-utils";
 export class DuetSlideout {
@@ -30,6 +30,7 @@ export class DuetSlideout {
     };
     this.theme = "";
     this.open = false;
+    this.icon = "";
   }
   /**
    * Toggles the slideout.
@@ -38,7 +39,7 @@ export class DuetSlideout {
     const event = new CustomEvent("toggle");
     this.toggleMenu(event);
     setTimeout(() => {
-      this.openButton.focus();
+      this.closeButton.focus();
     }, 200);
   }
   /**
@@ -46,15 +47,31 @@ export class DuetSlideout {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    if (Build.isServer) {
+      const toggles = Array.from(this.element.children).filter(el => el.matches("[slot='toggle']"));
+      if (toggles.length > 0) {
+        this.openButton = toggles[0];
+      }
+    }
+    else {
+      this.openButton = this.element.querySelector(":scope > [slot='toggle']");
+    }
+    if (this.openButton) {
+      this.openButton.setAttribute("aria-haspopup", "dialog");
+      this.openButton.setAttribute("aria-expanded", "false");
+      this.openButton.addEventListener("click", e => {
+        e.preventDefault();
+        this.onClick(e);
+      });
+      this.openButton = this.openButton;
+    }
   }
   /**
    * render() function
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("button", { ref: element => (this.openButton = element), "aria-haspopup": "dialog", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
-        active: this.open,
-      }, onClick: this.onClick }, h("div", { class: "hamburger" }, h("span", { class: "bar" }), h("span", { class: "bar" }), h("span", { class: "bar" }), h("span", { class: "bar" }))), h("div", { tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": "true", "aria-flowto": "menubar", class: {
+    return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { name: "toggle" }), h("div", { tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": "true", "aria-flowto": "menubar", class: {
         dialog: true,
         hidden: !this.open,
       } }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", type: "button", class: {
@@ -118,6 +135,29 @@ export class DuetSlideout {
         "attribute": "open",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon name from Duet to display."
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"\""
       }
     };
   }

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

@@ -27,6 +27,7 @@
   gap: 20px;
   align-items: center;
   justify-content: flex-start;
+  width: min-content;
 }
 
 ::slotted(*) {

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

@@ -20,6 +20,7 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  width: 100%;
   height: 100%;
 }
 
@@ -33,14 +34,15 @@
   height: 100%;
   padding: 8px 0;
   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: inherit;
+  font-weight: inherit;
   line-height: 1.25;
-  color: #00294d;
-  text-align: center;
+  color: inherit;
+  text-align: left;
   text-decoration: none;
 }
 .duet-slideout-link.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #940925;
 }
 .duet-slideout-link.active span {
   position: relative;
@@ -52,10 +54,10 @@
   left: 0;
   display: block;
   width: 100%;
-  height: 2px;
+  height: var(--active-height, 2px);
   content: "";
   background: #0077b3;
-  transform: translateY(2px);
+  transform: var(--active-translate-y, translateY(2px));
 }
 .duet-slideout-link.active.duet-theme-turva span::after {
   background: #c60c30;
@@ -65,8 +67,8 @@
   font-weight: 600;
 }
 .duet-slideout-link.small span::after {
-  height: 1px;
-  transform: translateY(1px);
+  --active-height: 1px;
+  --active-translate-y: 1px;
 }
 .duet-slideout-link.medium {
   font-size: 1.25rem;