@duetds/components 10.0.0-alpha.9 → 10.1.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: '9b9d0dfa8199f89acfbe21f9132c66ac5d27f19d', role: "listitem" }, h(TagName, { key: '40f2142c0e777156f9e171213b08dc51737544b5', 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: '028001dafa87b1c9b3827b169c6a0eebe9dc1cc5', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'a151a4bb04e949ffbdab6b65cfaf6444dab7bb9d', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '2f765f55f3a0d524fe3c97dd6570b0ab1f15a01e', class: "duet-toolbar-badge" }))), h("slot", { key: '4004ed2e53664041a6a1e8d020fa01bdd83f0e53' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'a2f27e67c6c38dbab06db879d79ffee7de1d5425', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'c48acfbf6301b8585d53f191c182751c4aca1442', 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: 'c552f767cf28200fd01e2d0a4d123b58880eee10', 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: '3623e63f85f9fdb7fbd59112cc560e003a7ca568', role: "listitem" }, h("a", { key: 'b81d74dada0b3c634c92305881ad7f58a04157e0', 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: 'e9388c724ba10f7290f7819f94f3b40d37857f2a', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '5c2564a4a153aa0d7595b40fb4588bacbd32bbdf' }))));
+            }, 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);
 }