@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -9,16 +9,39 @@ import { getAccessibleLinkLabel } from "../../utils/a11y-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
 export class DuetMenuBarItem {
     constructor() {
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * 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;
     }
     /**
@@ -48,11 +71,11 @@ export class DuetMenuBarItem {
      */
     render() {
         const TagName = this.url ? "a" : "button";
-        return (h(Host, { key: 'd0d1d66ae37940a4dd04e3d31b0c1131d95acd51', role: "listitem" }, h(TagName, { key: '903f68191b7ed0ef1774a65ef609ee24144cda5e', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: 'c8f1492389226bb51cdfb54ab5262d21292a19cb', role: "listitem" }, h(TagName, { key: '251da0ca6cb28157cb26ba5f90c770123cebc5c1', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-menu-bar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, 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("duet-icon", { key: 'a95ab784abc59a74b8cd517e70f58f0504563234', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '109a5169f518fe5959ee49d6c0ce39a3d80abcfb' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '528e49e98b5a56950ae991cdb53c00b4555e5a41', 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("duet-icon", { key: 'bc34c4cc34cd814ec124013da71d619f32986bd7', class: "leading-icon", size: "auto", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'a913f29ab5fd5e0f3a9aeb2115bae74b83c51a7e' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: 'efb44346bf1cc026263a16f0982981b6420ad298', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,
@@ -75,6 +98,7 @@ export class DuetMenuBarItem {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -95,12 +119,12 @@ export class DuetMenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -115,12 +139,12 @@ export class DuetMenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -135,11 +159,11 @@ export class DuetMenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": false
             },
             "leadingIcon": {
                 "type": "string",
+                "attribute": "leading-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -160,12 +184,12 @@ export class DuetMenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "leading-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "trailingIcon": {
                 "type": "string",
+                "attribute": "trailing-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -186,12 +210,12 @@ export class DuetMenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "trailing-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -206,11 +230,11 @@ export class DuetMenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleExpanded": {
                 "type": "boolean",
+                "attribute": "accessible-expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -225,11 +249,11 @@ export class DuetMenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-expanded",
                 "reflect": true
             },
             "accessiblePopup": {
                 "type": "string",
+                "attribute": "accessible-popup",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -244,12 +268,12 @@ export class DuetMenuBarItem {
                 },
                 "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",
@@ -273,12 +297,12 @@ export class DuetMenuBarItem {
                 },
                 "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",
@@ -296,12 +320,12 @@ export class DuetMenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
             },
             "external": {
                 "type": "boolean",
+                "attribute": "external",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -316,7 +340,6 @@ export class DuetMenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-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%;
 }
 
@@ -34,15 +34,18 @@
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: inherit;
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
 }
 .duet-menu-bar-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-menu-bar-link:focus, .duet-menu-bar-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-menu-bar-link:focus, .duet-menu-bar-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-link:focus, .duet-menu-bar-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-link .menu-bar-link-icon {
   width: 20px;
@@ -81,8 +84,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(2px);
+  transition: 300ms ease;
 }
 @media (min-width: 62em) {
   .duet-menu-bar-link.active::after {
@@ -103,4 +106,16 @@
   .duet-menu-bar-link:hover.duet-theme-turva {
     color: rgb(198, 12, 48);
   }
+}
+
+:host(.duet-theme-turva2) .duet-menu-bar-link.active.duet-theme-turva {
+  color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-menu-bar-link.active.duet-theme-turva::after {
+  background: rgb(230, 23, 64);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-menu-bar-link.duet-theme-turva:hover {
+    color: rgb(230, 23, 64);
+  }
 }

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.js

@@ -5,11 +5,22 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetMenuBarLink {
     constructor() {
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
-        this.accessibleLabel = undefined;
     }
     /**
      * Component lifecycle events.
@@ -22,11 +33,11 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'fdaeb3bbc3139a6031ea4b61f161d459206fc6d8', role: "listitem" }, h("a", { key: 'e2163ec995b08f3745ac33a2f456fde9a10de8f1', class: {
+        return (h(Host, { key: '997031f3159b6da185e25915d7241ba645b2b9d0', role: "listitem" }, h("a", { key: '8ef71373a7c481ca8dc93506eb8957c470489c2b', class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'e41a7f68a2184de5ed830ec665c80df3db14ed05', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '2b0673f8f66eb2d40694e33f031c5c2e5e85bade' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'f0439bbfecdf854d05fa818663e7e7e93fffa404', class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", { key: '426c1a3de2829a37aba8d4f30169d71425d81301' }))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }
@@ -44,6 +55,7 @@ export class DuetMenuBarLink {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -64,12 +76,12 @@ export class DuetMenuBarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -84,12 +96,12 @@ export class DuetMenuBarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -104,12 +116,12 @@ export class DuetMenuBarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -124,12 +136,12 @@ export class DuetMenuBarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -144,7 +156,6 @@ export class DuetMenuBarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             }
         };

package/lib/collection/components/duet-modal/duet-modal.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-modal-container {
@@ -29,9 +29,9 @@
   bottom: 0;
   left: 0;
   z-index: 900;
+  visibility: hidden;
   max-height: 100vh;
   overflow-y: auto;
-  visibility: hidden;
   opacity: 0;
   transition: 300ms ease;
   transition-delay: 200ms;
@@ -119,11 +119,11 @@
   line-height: 1.5;
   color: rgb(8, 42, 77);
   background: rgb(255, 255, 255);
-  border-radius: 4px;
+  border-radius: 16px;
   opacity: 0;
+  transform: scale(0.96);
   transition: 300ms ease;
   transition-delay: 0ms;
-  transform: scale(0.96);
 }
 .duet-theme-turva .duet-modal {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -131,9 +131,9 @@
 }
 .duet-modal-active .duet-modal {
   opacity: 1;
+  transform: none;
   transition: 300ms ease;
   transition-delay: 200ms;
-  transform: none;
 }
 .duet-modal-active .duet-modal.slide-up {
   top: 0;
@@ -157,9 +157,9 @@
 .duet-modal.loader duet-paragraph.duet-loader-message {
   position: absolute;
   opacity: 0;
-  transition: all 300ms ease;
   transform: scaleY(0);
   transform-origin: top;
+  transition: all 300ms ease;
 }
 .duet-modal.loader duet-paragraph.duet-loader-message.show {
   opacity: 1;
@@ -187,15 +187,10 @@
   top: 100vh;
   margin: 0;
   overflow: auto;
-  border-radius: 4px 4px 0 0;
+  border-radius: 16px 16px 0 0;
   opacity: 1;
   transition: top 600ms ease;
 }
-@media (max-width: 35.9375em) {
-  .duet-modal.slide-up {
-    border-radius: 16px 16px 0 0;
-  }
-}
 .duet-modal.duet-modal-has-sticky-header {
   height: 100%;
   overflow: auto;
@@ -289,12 +284,7 @@
   text-align: left;
   background: rgb(240, 247, 250);
   border-bottom: 1px solid rgb(212, 223, 229);
-  border-radius: 4px 4px 0 0;
-}
-@media (max-width: 35.9375em) {
-  .duet-modal-sticky-header {
-    border-radius: 16px 16px 0 0;
-  }
+  border-radius: 16px 16px 0 0;
 }
 .duet-theme-turva .duet-modal-sticky-header {
   background: rgb(245, 247, 250);
@@ -303,14 +293,15 @@
 
 .duet-modal-close {
   position: absolute;
-  top: 12px;
-  right: 12px;
+  top: 8px;
+  right: 8px;
 }
 
 .duet-modal-heading {
   width: 100%;
   padding-right: 60px;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1.25rem;
   font-style: normal;
@@ -318,14 +309,21 @@
   font-variant-numeric: tabular-nums;
   line-height: 1.25;
   color: rgb(8, 42, 77);
-  text-decoration: none;
-  text-overflow: ellipsis;
   letter-spacing: -0.01rem;
   white-space: nowrap;
+  text-decoration: none;
 }
 .duet-modal-heading.duet-p-0 {
   padding: 0 !important;
 }
 .duet-modal-heading.duet-m-0 {
   margin: 0 !important;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-modal {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-modal-sticky-header {
+  background: rgb(253, 247, 242);
+  border-bottom: 1px solid rgb(212, 221, 226);
 }