@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

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

@@ -6,15 +6,29 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 export class DuetToolbarDropdown {
     constructor() {
-        this.onClick = () => {
-            this.open = !this.open;
-        };
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Variation.
+         */
         this.variation = "default";
-        this.accessibleLabel = undefined;
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Open
+         */
         this.open = false;
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        this.onClick = () => {
+            this.open = !this.open;
+        };
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -50,18 +64,18 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: 'b9c82af8341d828827b7c5536dda939aca2f2cda', role: "listitem" }, h("div", { key: 'a8d047838de2e4b01362bf0cd8e7c1ba25490d23', class: {
+        return (h(Host, { key: '7af8e188b72d1dd79f3445c543736d3c18d694e4', role: "listitem" }, h("div", { key: '128c0412da716469ad79877951bf5b81f7987515', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: '02b9012547af6361406a20419a042e19317e5cb4', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
+            } }, h("button", { key: 'efc3cbf2c159c3b8a528e8ee58312bc9546b561e', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'b6ebb6cb14ebcb9d6d9763c915dcb4b0299c842d', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'c12058a53fa6dd527225b99c19afe407728915b5', class: "label" }, h("slot", { key: '32968bac767897e9da6913bd81eabcc7db113006', name: "label" }), h("duet-icon", { key: '6f02485c14f602b5f9147de5d85a10296341d5bf', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '69af428a1a3159f77134ec15939af57d8b2a5ee0', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '502ded69ce168a1de15bd937aa8c1995f2b5df88', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '8c4851a8137ab50f524c9d24618f612834f38669', class: "label" }, h("slot", { key: 'eebb0b4107c2060e48b334f35cff1458fc7b4d7c', name: "label" }), h("duet-icon", { key: '961bcc314c446a4b85ae1259b67d5566a0dd0656', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '843d1e28eb1a821021ff4e6c96269bb437980de7', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '80bd5bf933f8fe6af768ee625f4fcaea1bd961b0' })))));
+            } }, h("slot", { key: '60c2a9af5229e10192605b60f2aaf8d65e136d42' })))));
     }
     static get is() { return "duet-toolbar-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -79,6 +93,7 @@ export class DuetToolbarDropdown {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -99,12 +114,12 @@ export class DuetToolbarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": true,
                 "complexType": {
                     "original": "\"default\" | \"negative\"",
@@ -119,12 +134,12 @@ export class DuetToolbarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -139,11 +154,11 @@ export class DuetToolbarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -158,12 +173,12 @@ export class DuetToolbarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -178,12 +193,12 @@ export class DuetToolbarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -198,7 +213,6 @@ export class DuetToolbarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             }

package/lib/collection/components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-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;
   width: 100%;
   height: 100%;
 }
@@ -41,11 +41,14 @@
   text-decoration: none;
 }
 .duet-toolbar-dropdown-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: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-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-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-dropdown-link:focus, .duet-toolbar-dropdown-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-toolbar-dropdown-link .label {
   flex: 1;
@@ -66,4 +69,14 @@
 }
 .duet-toolbar-dropdown-link:hover.duet-theme-turva {
   background: rgb(222, 224, 228);
+}
+
+:host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva.active {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-toolbar-dropdown-link.duet-theme-turva:hover {
+  background: rgb(251, 225, 209);
 }

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

@@ -6,11 +6,25 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 export class DuetToolbarDropdownLink {
     constructor() {
-        this.accessibleLabel = undefined;
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Language of the link. Use this only for language selection links.
+         */
         this.targetLanguage = undefined;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        /**
+         * Active
+         */
         this.active = false;
     }
     /**
@@ -31,11 +45,11 @@ export class DuetToolbarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e6284cb0d289f8b64e26d5588c12aac7d490b170' }, h("a", { key: '56812f3a45834d09c37c304491daa0a7b8573c8e', class: {
+        return (h(Host, { key: '34a5369d2806e4474bbb32400d5563fddcc3590a' }, h("a", { key: 'b16d10c8be40329d90136c486d568fb9511524d7', class: {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '3a1f39a9f5c3fdfba1b4849b289b874ee6d0d3bf', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: 'ad7c40813561cb6d3c215b0986a25f0aeadac435', class: "label" }, h("slot", { key: 'ee1ffcf539b6fc36dab482151cbea393d7582ef0' })), this.active && (h("duet-icon", { key: 'b95754e56d673cd0330bc41aefd6a6a48e25cff6', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'cce54b8721ad1d017e32ac331ebcc54d53fbd88c', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '515f4c68a3917e3403e59f938fc2a2ba296e1f63', class: "label" }, h("slot", { key: '43e7eddd00dc07766e9842a4070f09e908021551' })), this.active && (h("duet-icon", { key: 'e69da314290045e523944a6d3554158627151d48', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }
@@ -53,6 +67,7 @@ export class DuetToolbarDropdownLink {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -67,11 +82,11 @@ export class DuetToolbarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -92,12 +107,12 @@ export class DuetToolbarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "targetLanguage": {
                 "type": "string",
+                "attribute": "target-language",
                 "mutable": false,
                 "complexType": {
                     "original": "\"en\" | \"fi\" | \"sv\"",
@@ -112,12 +127,12 @@ export class DuetToolbarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target-language",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -132,12 +147,12 @@ export class DuetToolbarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -152,12 +167,12 @@ export class DuetToolbarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -172,7 +187,6 @@ export class DuetToolbarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-toolbar-item/duet-toolbar-item.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,22 +37,19 @@
   line-height: 1.25;
   color: rgb(0, 75, 129);
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
   cursor: pointer;
 }
 .duet-toolbar-item:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-.duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
-.duet-toolbar-item:focus.primary {
-  box-shadow: 0 0 0 4px rgba(8, 42, 77, 0.3), 0 0 0 1px #033866;
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-item:focus.primary, .duet-toolbar-item:focus.primary.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-item:focus, .duet-toolbar-item:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-toolbar-item .duet-toolbar-icon {
   position: relative;
@@ -61,20 +58,6 @@
   line-height: normal;
   vertical-align: baseline;
 }
-.duet-toolbar-item .duet-toolbar-icon .duet-toolbar-badge {
-  position: absolute;
-  top: 0;
-  left: 11px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  background: rgb(247, 178, 40);
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px #c18b1f;
-}
-.duet-theme-turva .duet-toolbar-item .duet-toolbar-icon .duet-toolbar-badge {
-  background: rgb(247, 178, 40);
-}
 .duet-toolbar-item .trailing-icon {
   width: 16px;
   height: 16px;
@@ -93,6 +76,11 @@
 .duet-toolbar-item.primary, .duet-toolbar-item.secondary {
   color: rgb(255, 255, 255);
 }
+.duet-toolbar-item.primary:focus, .duet-toolbar-item.secondary:focus {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgb(255, 255, 255);
+}
 .duet-toolbar-item.primary[aria-expanded=true], .duet-toolbar-item.secondary[aria-expanded=true] {
   background: rgba(8, 42, 77, 0.2);
 }
@@ -165,8 +153,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(1px);
+  transition: 300ms ease;
 }
 .duet-toolbar-item.active::after.duet-theme-turva {
   background: rgb(198, 12, 48);
@@ -180,4 +168,38 @@
 .duet-toolbar-item.active.duet-theme-turva.primary {
   color: rgb(255, 255, 255);
   background: rgba(23, 28, 58, 0.2);
+}
+
+duet-indicator {
+  top: 4px;
+  left: 16px;
+  z-index: 1;
+}
+duet-indicator:has(+ .duet-toolbar-item .duet-toolbar-icon) {
+  left: 36px;
+}
+
+:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:not(.primary) {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva.primary[aria-expanded=true] {
+  background: rgba(23, 42, 59, 0.2);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover:not(.primary) {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover.primary {
+  background: rgba(23, 42, 59, 0.2);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva::after {
+  background: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva:not(.primary) {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva.primary {
+  background: rgba(23, 42, 59, 0.2);
 }