@duetds/components 10.0.0-alpha.8 → 10.0.0

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

@@ -9,18 +9,47 @@ import { getAccessibleLinkLabel } from "../../utils/a11y-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
 export class DuetToolbarItem {
     constructor() {
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Variation. Secondary is not supported for Turva theme. Negative is deprecated.
+         */
         this.variation = "default";
+        /**
+         * Active
+         */
         this.active = false;
-        this.url = undefined;
+        /**
+         * Left icon.
+         */
         this.leadingIcon = undefined;
+        /**
+         * Right icon.
+         */
         this.trailingIcon = undefined;
-        this.accessibleLabel = undefined;
-        this.accessibleExpanded = undefined;
+        /**
+         * Use this property to add an aria-haspopup attribute to a button.
+         */
         this.accessiblePopup = "false";
+        /**
+         * Defaults for accessibleLabelExternal
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
         this.external = false;
+        /**
+         * Show a badge that indicates something has changed.
+         */
         this.badge = false;
     }
     /**
@@ -57,17 +86,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '3becaa0c2599123283c9bc82fdd95133effb64bd', role: "listitem" }, h(TagName, { key: '6ff40a280d9f098a9ba5a2b7d85b5d19cbb58ae7', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'f36d0228f8546f61bd7f1a21fc94bbfacb229270', role: "listitem" }, this.badge && h("duet-indicator", { key: 'a46dc8ea7f76a4f8c76664dc4e1ad56941028a10', variation: "change" }), h(TagName, { key: 'e488df937c34dadf25be1f2beacfe29161ba73cf', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-toolbar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: 'bffad519bf392abd549da7a06c2d59808dca6064', class: "duet-toolbar-icon" }, h("duet-icon", { key: '513c5e9bc2795a7732f2a6d96fbc3c632456faa0', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'a399e7afa30d550289f267f28e783bae282fbed9', class: "duet-toolbar-badge" }))), h("slot", { key: '063f628fd7668ae6d634e0c72789c1887938d592' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '42df1db8d19a9e10e0c0bebbaeb3c4ed14d5d742', class: "duet-toolbar-icon" }, h("duet-icon", { key: '301e8033a857c9e76dd50d2b7ac4e797e235231e', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: 'fb792acb4d635caf2dbe6d6b34eb7ca0257c6425', class: "duet-toolbar-icon" }, h("duet-icon", { key: '7aeb14377fab6bbba397bdcb85942bc7f9026f99', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'f2a6ed7704a7d21782c32fe02f1d768203a0e543', class: "duet-toolbar-badge" }))), h("slot", { key: 'c5f8d0d4644d68d9ae8bae97f3b26d9cb7ff2693' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '1258c07b9515853adcc3461d186240ba86fdc491', class: "duet-toolbar-icon" }, h("duet-icon", { key: '3472d1724fb3d148dd2ac58a964db4ab2ae7908e', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!(this.url && this.external),
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: '9c9f58a6044c5d87041f9c03f1ff50a999314d7f', class: "duet-toolbar-badge" }))))));
+            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: 'df9aa0697ed176678be4f45596c3276da1218a33', class: "duet-toolbar-badge" }))))));
     }
     static get is() { return "duet-toolbar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -85,6 +114,7 @@ export class DuetToolbarItem {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -105,12 +135,12 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": true,
                 "complexType": {
                     "original": "\"default\" | \"primary\" | \"negative\" | \"secondary\"",
@@ -125,12 +155,12 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -145,12 +175,12 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -165,11 +195,11 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": false
             },
             "leadingIcon": {
                 "type": "string",
+                "attribute": "leading-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -190,12 +220,12 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "leading-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "trailingIcon": {
                 "type": "string",
+                "attribute": "trailing-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -216,12 +246,12 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "trailing-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -236,11 +266,11 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleExpanded": {
                 "type": "boolean",
+                "attribute": "accessible-expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -255,11 +285,11 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-expanded",
                 "reflect": true
             },
             "accessiblePopup": {
                 "type": "string",
+                "attribute": "accessible-popup",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -274,12 +304,12 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-popup",
                 "reflect": true,
                 "defaultValue": "\"false\""
             },
             "accessibleLabelExternalDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-external-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -303,12 +333,12 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
             },
             "accessibleLabelExternal": {
                 "type": "string",
+                "attribute": "accessible-label-external",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -326,12 +356,12 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
             },
             "external": {
                 "type": "boolean",
+                "attribute": "external",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -346,12 +376,12 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "badge": {
                 "type": "boolean",
+                "attribute": "badge",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -366,7 +396,6 @@ export class DuetToolbarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "badge",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   height: 100%;
 }
 
@@ -37,19 +37,27 @@
   line-height: 1.25;
   color: rgb(0, 75, 129);
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
 }
 .duet-toolbar-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-toolbar-link.negative {
   color: rgb(255, 255, 255);
 }
+.duet-toolbar-link.negative:focus {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgb(255, 255, 255);
+}
 .duet-toolbar-link.negative duet-icon {
   color: rgb(198, 225, 238);
 }
@@ -100,8 +108,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(1px);
+  transition: 300ms ease;
 }
 .duet-toolbar-link.active::after.duet-theme-turva {
   background: rgb(198, 12, 48);
@@ -115,4 +123,46 @@
 .duet-toolbar-link.active.duet-theme-turva.negative {
   color: rgb(255, 255, 255);
   background: rgba(23, 28, 58, 0.2);
+}
+
+:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva {
+  color: rgb(23, 42, 59);
+  background: transparent;
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva.negative duet-icon {
+  color: rgb(255, 229, 230);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover {
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover.negative {
+  color: rgb(255, 255, 255);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover.negative duet-icon {
+  color: rgb(255, 229, 230);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover.negative {
+  background: rgba(23, 42, 59, 0.2);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva.negative duet-icon {
+  color: rgb(255, 229, 230);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva::after {
+  background: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.active.negative {
+  background: rgba(23, 42, 59, 0.2);
+}
+:host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva.negative {
+  background: rgba(23, 42, 59, 0.2);
 }

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

@@ -5,12 +5,26 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetToolbarLink {
     constructor() {
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Variation.
+         */
         this.variation = "default";
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
-        this.accessibleLabel = undefined;
     }
     /**
      * Component lifecycle events.
@@ -24,12 +38,12 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: 'c9d22540b2fe11472be1334ac0048b27c6b06d9e', role: "listitem" }, h("a", { key: '6df17c00c386d080b450dee6056ae0d3f770cac3', class: {
+        return (h(Host, { key: '37bc6a6543039418aa1450349f23f7eba45adadb', role: "listitem" }, h("a", { key: '55cc4a44d00c2d228ab14686063417d471beec5d', class: {
                 "duet-toolbar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'ad8e3b8bf4fc7b4049948cb12ed148eb4383a931', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'c295aeacea2d6efe9892ec06cf8ba0070599212e' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '363fec506c3668d762b5a706b720f4ab8efb0bb5', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '086cbb4a926a01fcee0ce4d7ca417ad031c60110' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }
@@ -47,6 +61,7 @@ export class DuetToolbarLink {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -67,12 +82,12 @@ export class DuetToolbarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": true,
                 "complexType": {
                     "original": "\"default\" | \"negative\"",
@@ -87,12 +102,12 @@ export class DuetToolbarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -107,12 +122,12 @@ export class DuetToolbarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -127,12 +142,12 @@ export class DuetToolbarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -147,12 +162,12 @@ export class DuetToolbarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -167,7 +182,6 @@ export class DuetToolbarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             }
         };

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 .duet-tooltip-button {
@@ -38,6 +38,17 @@
   background: transparent !important;
   border-radius: 4px;
 }
+.duet-tooltip-button:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-tooltip-button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-tooltip-button.duet-theme-turva {
   color: rgb(198, 12, 48);
 }
@@ -53,16 +64,8 @@
 .duet-tooltip-button:hover.duet-tooltip-button-negative {
   color: rgb(255, 255, 255);
 }
-.duet-tooltip-button:focus {
-  background: transparent !important;
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-tooltip-button:focus {
+.duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus {
   background: transparent !important;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
-}
-:host(.user-is-tabbing) .duet-tooltip-button.duet-theme-turva:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
 }
 .duet-tooltip-button svg {
   width: 20px;
@@ -84,10 +87,17 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.25;
+  vertical-align: top;
   text-align: left;
   white-space: normal;
-  vertical-align: top;
 }
 .duet-theme-turva .duet-tooltip-label {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+:host(.duet-theme-turva2) .duet-tooltip-button.duet-theme-turva {
+  color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-tooltip-button.duet-theme-turva:hover {
+  color: rgb(230, 23, 64);
 }