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

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-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;
   display: flex;
   flex-direction: row;
   gap: 8px;
@@ -28,6 +28,8 @@
 }
 
 .duet-popup-menu-item {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-grow: 1;
   gap: 12px;
@@ -42,19 +44,24 @@
   text-align: left;
   text-decoration: none;
   cursor: pointer;
+  border-radius: 4px;
 }
 .duet-popup-menu-item: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-popup-menu-item:focus, .duet-popup-menu-item: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-popup-menu-item:focus, .duet-popup-menu-item:focus.duet-theme-turva, .duet-theme-turva2 .duet-popup-menu-item:focus, .duet-popup-menu-item:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-popup-menu-item.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: rgb(23, 28, 58);
 }
 .duet-popup-menu-item.active {
+  z-index: 0;
   background: rgb(240, 247, 250);
 }
 .duet-popup-menu-item.active.duet-theme-turva {
@@ -74,9 +81,20 @@
 }
 
 .active-descendant {
-  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 .active-descendant, .active-descendant.duet-theme-turva, .duet-theme-turva2 .active-descendant, .active-descendant.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
+
+:host(.duet-theme-turva2) .duet-popup-menu-item.duet-theme-turva {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-popup-menu-item.active.duet-theme-turva {
+  background: rgb(253, 247, 242);
 }
-.duet-theme-turva .active-descendant, .active-descendant.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+:host(.duet-theme-turva2) .duet-popup-menu-item:hover.duet-theme-turva {
+  background: rgb(251, 235, 225);
 }

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js

@@ -6,6 +6,53 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetPopupMenuItem {
     constructor() {
+        this.focus = false;
+        this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
+        /**
+         * Accessible role.
+         */
+        this.accessibleRole = "menuitem";
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        this.external = false;
+        /**
+         * Language of the link. Use this only for language selection links.
+         */
+        this.targetLanguage = undefined;
+        /**
+         * Value
+         */
+        this.value = undefined;
+        /**
+         * Left icon.
+         */
+        this.leadingIcon = undefined;
+        /**
+         * Left icon color.
+         */
+        this.leadingIconColor = undefined;
+        /**
+         * Right icon.
+         */
+        this.trailingIcon = undefined;
+        /**
+         * Short text to display after the label, e.g. keyboard shortcut.
+         */
+        this.trailingText = undefined;
+        /**
+         * Is the item currently active (e.g. selected)
+         */
+        this.active = false;
+        /**
+         * @internal
+         * Focus simulation when parent element uses aria-activedescendant
+         */
+        this.activeDescendant = false;
         /**
          * Component event handling.
          */
@@ -25,20 +72,6 @@ export class DuetPopupMenuItem {
                 component: "duet-popup-menu-item",
             });
         };
-        this.focus = false;
-        this.accessibleLabel = undefined;
-        this.accessibleRole = "menuitem";
-        this.theme = "";
-        this.url = undefined;
-        this.external = false;
-        this.targetLanguage = undefined;
-        this.value = undefined;
-        this.leadingIcon = undefined;
-        this.leadingIconColor = undefined;
-        this.trailingIcon = undefined;
-        this.trailingText = undefined;
-        this.active = false;
-        this.activeDescendant = false;
     }
     /**
      * Component lifecycle events.
@@ -66,11 +99,13 @@ export class DuetPopupMenuItem {
             "duet-theme-turva": this.theme === "turva",
             "active-descendant": this.activeDescendant,
         };
-        return (h(Host, { key: 'cba4450c5f4e743f1c54c4736930fd263acba1db', role: this.accessibleRole }, h(TagName, { key: '94c16ad9906c2ea626f186a405a044f8c0fdc38b', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: 'bc37f155bb1a3c6e0519f1b673682840e7cc2838', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '641cb769d15e68d2e05893737b2712cb22916084', class: "duet-popup-menu-item-label" }, h("slot", { key: 'c4e79af7b0a972b68a6a30ca479d3fe49ec0ac57' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'd5ae36ac91afb6b5f9a6bfe461a10b68ee0f916e', name: this.url && this.external
+        // Without the role ternary Safari/iPhone wouldn't announce the label for role menuitem.
+        // This is a tradeoff and now Safari announces these items as buttons and links with the label.
+        return (h(Host, { key: '69c44a1d58780969eb4ac52879cd12d91f138a54', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: 'b4a7e9fc9c862bd2ef7e82abde09d9454e9b1585', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: '8a4412f1d2aa25c099780b3441d4ed06699fe987', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'a08f5aef8339a1c96e16c05f87cf60bf0fda3a0e', class: "duet-popup-menu-item-label" }, h("slot", { key: '1ccdab3f89ce6fc1ce8222e7219c6d68f99ab61e' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'bd891c106163c5bc13ae83420199b2ec6108c1c4', name: this.url && this.external
                 ? newWindowIcon.title
                 : this.active
                     ? "messaging-checked-small"
-                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '79631aaffd5c2b020ebc6f37f0770147ae8291fa', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '4c88625e8599b8ef038cf37236e8be4c06aaf3e7', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -88,6 +123,7 @@ export class DuetPopupMenuItem {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -102,11 +138,11 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleRole": {
                 "type": "string",
+                "attribute": "accessible-role",
                 "mutable": false,
                 "complexType": {
                     "original": "\"menuitem\" | \"listitem\" | \"option\"",
@@ -121,12 +157,12 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-role",
                 "reflect": false,
                 "defaultValue": "\"menuitem\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -147,12 +183,12 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -167,11 +203,11 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": false
             },
             "external": {
                 "type": "boolean",
+                "attribute": "external",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -186,12 +222,12 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "targetLanguage": {
                 "type": "string",
+                "attribute": "target-language",
                 "mutable": false,
                 "complexType": {
                     "original": "\"en\" | \"fi\" | \"sv\"",
@@ -206,12 +242,12 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target-language",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -226,12 +262,12 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "leadingIcon": {
                 "type": "string",
+                "attribute": "leading-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -252,12 +288,12 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "leading-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "leadingIconColor": {
                 "type": "string",
+                "attribute": "leading-icon-color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconColor",
@@ -278,12 +314,12 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "leading-icon-color",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "trailingIcon": {
                 "type": "string",
+                "attribute": "trailing-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -304,12 +340,12 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "trailing-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "trailingText": {
                 "type": "string",
+                "attribute": "trailing-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -324,12 +360,12 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "trailing-text",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -344,12 +380,12 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "activeDescendant": {
                 "type": "boolean",
+                "attribute": "active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -367,7 +403,6 @@ export class DuetPopupMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active-descendant",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-progress/duet-progress.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: inherit;
 }
@@ -28,11 +28,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
   width: 100%;
   min-height: 1px;
@@ -68,12 +68,12 @@
   min-height: 1px;
   /* For IE10 */
   color: rgb(0, 119, 179);
-  /* Get rid of default border in Firefox. */
-  border: 0 none;
   /* Reset the default appearance */
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  /* Get rid of default border in Firefox. */
+  border: 0 none;
 }
 .duet-progress progress[value]::-webkit-progress-bar {
   background-color: rgb(240, 247, 250);
@@ -100,4 +100,23 @@
 }
 .duet-progress.duet-theme-turva progress[value] ::-moz-progress-bar {
   background-color: rgb(255, 241, 241);
+}
+
+.duet-theme-turva2 .duet-progress.duet-theme-turva .progress-bar {
+  background-color: rgb(253, 247, 242);
+}
+.duet-theme-turva2 .duet-progress.duet-theme-turva .progress-bar > span {
+  background-color: rgb(230, 23, 64);
+}
+.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value] {
+  color: rgb(230, 23, 64);
+}
+.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar {
+  background-color: rgb(253, 247, 242);
+}
+.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-webkit-progress-value {
+  background-color: rgb(230, 23, 64);
+}
+.duet-theme-turva2 .duet-progress.duet-theme-turva progress[value]::-moz-progress-bar {
+  background-color: rgb(253, 247, 242);
 }

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

@@ -12,20 +12,42 @@ export class DuetProgress {
          */
         this.progressId = createID("DuetProgress");
         this.progressLabelId = createID("DuetProgressLabel");
-        this.accessibleDescribedBy = undefined;
+        /**
+         * Aria Details of the component
+         */
         this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
         this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
         this.accessibleDescription = undefined;
-        this.accessibleLabel = undefined;
+        /**
+         * Defaults for accessibleLabel
+         */
         this.accessibleLabelUploadDefaults = {
             fi: ["lähetys valmis", "lähetys käynnissä"],
             sv: ["Uppladdningen är klar", "Uppladdning pågår"],
             en: ["upload completed", "upload in progress"],
         };
+        /**
+         * Adds accessible label for upload in progress and upload complete states
+         * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en:  ["completed", "in progress"]}
+         */
         this.accessibleLabelUpload = getLocaleString(this.accessibleLabelUploadDefaults);
+        /**
+         * Progress of the bar, a value from 0-100
+         */
         this.progress = 0;
-        this.caption = undefined;
+        /**
+         * Height of progressbar
+         */
         this.height = "10px";
+        /**
+         * Theme of the input.
+         */
         this.theme = "";
     }
     /**
@@ -74,6 +96,7 @@ export class DuetProgress {
         return {
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -88,11 +111,11 @@ export class DuetProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -107,12 +130,12 @@ export class DuetProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -127,12 +150,12 @@ export class DuetProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -147,12 +170,12 @@ export class DuetProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -167,11 +190,11 @@ export class DuetProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleLabelUploadDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-upload-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -192,12 +215,12 @@ export class DuetProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-upload-defaults",
                 "reflect": false,
                 "defaultValue": "{\n    fi: [\"l\u00E4hetys valmis\", \"l\u00E4hetys k\u00E4ynniss\u00E4\"],\n    sv: [\"Uppladdningen \u00E4r klar\", \"Uppladdning p\u00E5g\u00E5r\"],\n    en: [\"upload completed\", \"upload in progress\"],\n  }"
             },
             "accessibleLabelUpload": {
                 "type": "string",
+                "attribute": "accessible-label-upload",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -215,12 +238,12 @@ export class DuetProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-upload",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelUploadDefaults)"
             },
             "progress": {
                 "type": "number",
+                "attribute": "progress",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -235,12 +258,12 @@ export class DuetProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "progress",
                 "reflect": true,
                 "defaultValue": "0"
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -255,11 +278,11 @@ export class DuetProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "height": {
                 "type": "string",
+                "attribute": "height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -274,12 +297,12 @@ export class DuetProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "height",
                 "reflect": false,
                 "defaultValue": "\"10px\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -300,7 +323,6 @@ export class DuetProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             }