@duetds/components 6.0.7 → 6.2.0

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.js

@@ -0,0 +1,181 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetToolbarDropdown {
+  constructor() {
+    /**
+     * Theme.
+     */
+    this.theme = "";
+    /**
+     * Active
+     */
+    this.active = false;
+    /**
+     * Open
+     */
+    this.open = false;
+    /**
+     * Icon
+     */
+    this.icon = undefined;
+    this.toggleMenu = (e) => {
+      const toggle = !this.open;
+      this.open = toggle;
+      this.duetToolbarDropdownEvent.emit({
+        originalEvent: e,
+        data: { element: this.element, open: this.open },
+        component: "duet-toolbar-dropdown",
+      });
+    };
+    this.onClick = (e) => {
+      this.toggleMenu(e);
+      e.stopImmediatePropagation();
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    let itemsAlign = "right";
+    if (this.element && this.element.parentElement) {
+      itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
+    }
+    return (h(Host, null,
+      h("div", { class: {
+          "duet-toolbar-dropdown": true,
+          "duet-theme-turva": this.theme === "turva",
+          [itemsAlign]: true,
+        } },
+        h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            active: this.active,
+            open: this.open,
+          }, onClick: this.onClick },
+          this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }),
+          h("div", { class: "label" },
+            h("slot", { name: "label" }),
+            h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))),
+        h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            items: true,
+            hidden: !this.open,
+          } },
+          h("slot", null)))));
+  }
+  static get is() { return "duet-toolbar-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-toolbar-dropdown.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-toolbar-dropdown.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": "\"\""
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Active"
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Open"
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "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 events() { return [{
+      "method": "duetToolbarDropdownEvent",
+      "name": "duetToolbarDropdownEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event raised when the dropdown has been opened. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
+      },
+      "complexType": {
+        "original": "DuetToolbarDropdownEventDetails",
+        "resolved": "{ originalEvent: Event; data: { element: HTMLElement; open: boolean; }; component: \"duet-toolbar-dropdown\"; }",
+        "references": {
+          "DuetToolbarDropdownEventDetails": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+}

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.css

@@ -0,0 +1,60 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 100%;
+}
+
+.duet-toolbar-dropdown-link {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%;
+  padding: 0.5rem 20px;
+  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: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: #00294d;
+  text-align: center;
+  text-decoration: none;
+}
+.duet-toolbar-dropdown-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: #171c3a;
+}
+.duet-toolbar-dropdown-link.active, .duet-toolbar-dropdown-link.active:hover {
+  color: white;
+  background: #0077b3;
+}
+.duet-toolbar-dropdown-link.active.duet-theme-turva, .duet-toolbar-dropdown-link.active:hover.duet-theme-turva {
+  color: white;
+  background: #c60c30;
+}
+.duet-toolbar-dropdown-link:hover {
+  background: #e6f2f8;
+}
+.duet-toolbar-dropdown-link:hover.duet-theme-turva {
+  background: #e4e4e6;
+}

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.js

@@ -0,0 +1,133 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetToolbarDropdownLink {
+  constructor() {
+    /**
+     * Theme.
+     */
+    this.theme = "";
+    /**
+     * Href
+     */
+    this.href = "#";
+    /**
+     * Icon
+     */
+    this.icon = undefined;
+    /**
+     * Active
+     */
+    this.active = false;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null,
+      h("a", { class: {
+          "duet-toolbar-dropdown-link": true,
+          "duet-theme-turva": this.theme === "turva",
+          active: this.active,
+        }, href: this.href, role: "menuitem" },
+        this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }),
+        h("slot", null))));
+  }
+  static get is() { return "duet-toolbar-dropdown-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-toolbar-dropdown-link.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-toolbar-dropdown-link.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": "\"\""
+    },
+    "href": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Href"
+      },
+      "attribute": "href",
+      "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"
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Active"
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "element"; }
+}

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

@@ -0,0 +1,78 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 100%;
+}
+
+.duet-toolbar-link {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 16px;
+  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: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: #004d80;
+  text-align: center;
+  text-decoration: none;
+}
+.duet-toolbar-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-toolbar-link:hover {
+  color: #00294d;
+  background: #f3f9fc;
+}
+.duet-toolbar-link:hover.duet-theme-turva {
+  color: #171c3a;
+  background: #f5f5f7;
+}
+.duet-toolbar-link.active {
+  color: #00294d;
+}
+.duet-toolbar-link.active::after {
+  position: absolute;
+  top: auto;
+  bottom: 1px;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 1px;
+  content: "";
+  background: #0077b3;
+  transition: 300ms ease;
+  transform: translateY(1px);
+}
+.duet-toolbar-link.active::after.duet-theme-turva {
+  background: #c60c30;
+}
+.duet-toolbar-link.active.duet-theme-turva {
+  color: #171c3a;
+}
+.duet-toolbar-link.active.duet-theme-turva::after {
+  background: #c60c30;
+}

package/lib/collection/components/duet-toolbar-link/duet-toolbar-link.js

@@ -0,0 +1,129 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetToolbarLink {
+  constructor() {
+    /**
+     * Theme.
+     */
+    this.theme = "";
+    /**
+     * Active
+     */
+    this.active = false;
+    /**
+     * Href
+     */
+    this.href = "#";
+    /**
+     * Icon
+     */
+    this.icon = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null,
+      h("a", { class: { "duet-toolbar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href },
+        this.icon && h("duet-icon", { size: "x-small", name: this.icon, margin: "none" }),
+        h("slot", null))));
+  }
+  static get is() { return "duet-toolbar-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-toolbar-link.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-toolbar-link.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": "\"\""
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Active"
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "href": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Href"
+      },
+      "attribute": "href",
+      "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 elementRef() { return "element"; }
+}

package/lib/collection/utils/token-utils.js

@@ -117,3 +117,18 @@ export function shadeRGBColor(color, percent) {
   B = B > 255 ? 255 : B;
   return `rgb(${R},${G},${B})`;
 }
+// remove wrapping speech marks.
+// media query tokens are wrapped in speech marks,
+// which need to be removed before use with matchMedia.
+const unwrap = (str) => str.substring(1, str.length - 1);
+export const breakpointToToken = {
+  "xxx-small": unwrap(tokens.mediaQueryXxxSmall),
+  "xx-small": unwrap(tokens.mediaQueryXxSmall),
+  "x-small": unwrap(tokens.mediaQueryXSmall),
+  small: unwrap(tokens.mediaQuerySmall),
+  medium: unwrap(tokens.mediaQueryMedium),
+  large: unwrap(tokens.mediaQueryLarge),
+  "x-large": unwrap(tokens.mediaQueryXLarge),
+  "xx-large": unwrap(tokens.mediaQueryXxLarge),
+  "xxx-large": unwrap(tokens.mediaQueryXxxLarge),
+};

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-f42b7c16.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-629a7253.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-4e94138b.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-53aed47b.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-fbb39f58.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-bd7fbd74.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,9 +1,9 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, b as Host } from './p-1940df2f.js';
+import { p as proxyCustomElement, H, h, b as Host } from './p-f25401f4.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
-import { d as defineCustomElement$2 } from './p-565c7b5e.js';
+import { d as defineCustomElement$2 } from './p-914d8914.js';
 
 const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;color:#00294d;text-decoration:none}.duet-breadcrumb:hover{color:#004d80}.duet-breadcrumb.duet-theme-turva{color:#171c3a}.duet-breadcrumb.duet-theme-turva:hover{color:#940925}.duet-breadcrumb:focus{outline:0}.duet-breadcrumb:active{opacity:0.75}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
 

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, F as Fragment, b as Host } from './p-1940df2f.js';
+import { p as proxyCustomElement, H, h, F as Fragment, b as Host } from './p-f25401f4.js';
 import { i as inheritGlobalTheme } from './p-4ebf1618.js';
 import { g as getLocaleString } from './p-ede854e1.js';
-import { d as defineCustomElement$2 } from './p-565c7b5e.js';
+import { d as defineCustomElement$2 } from './p-914d8914.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

package/lib/dist-custom-elements/duet-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-0a3b3fbb.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-936e320e.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-caption.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-f20bce7d.js';
+import { D as DuetCaption$1, d as defineCustomElement$1 } from './p-c62a4b7f.js';
 
 const DuetCaption = DuetCaption$1;
 const defineCustomElement = defineCustomElement$1;