@duetds/components 7.0.10 → 7.0.12

package/lib/collection/components/duet-logo/duet-logo.css

@@ -43,10 +43,10 @@
 }
 .duet-logo:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 .duet-theme-turva .duet-logo:focus, .duet-logo:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-logo.duet-logo-en {
   width: 166px;

package/lib/collection/components/duet-menu-bar/duet-menu-bar.css

@@ -154,11 +154,11 @@
 }
 .duet-menu-bar.duet-theme-turva {
   background: rgb(255, 255, 255);
-  box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13);
+  box-shadow: 0 2px 6px 0 rgba(23, 28, 58, 0.07);
 }
 @media (min-width: 62em) {
   .duet-menu-bar.duet-theme-turva {
-    box-shadow: 0 3px 6px 0 rgba(117, 117, 117, 0.15);
+    box-shadow: 0 3px 6px 0 rgba(23, 28, 58, 0.1);
   }
 }
 

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.css

@@ -38,15 +38,15 @@
   text-decoration: none;
   cursor: pointer;
 }
-.duet-menu-bar-button.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";
-}
 .duet-menu-bar-button:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-.duet-menu-bar-button:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+.duet-theme-turva .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+.duet-menu-bar-button.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";
 }
 @media (min-width: 62em) {
   .duet-menu-bar-button {

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.css

@@ -70,7 +70,7 @@
 }
 .duet-menu-bar-dropdown button:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 .duet-menu-bar-dropdown button .label {
   display: flex;
@@ -126,12 +126,12 @@
   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-menu-bar-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
 .duet-menu-bar-dropdown.duet-theme-turva button:hover {
   color: rgb(198, 12, 48);
 }
+.duet-menu-bar-dropdown.duet-theme-turva button:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
 .duet-menu-bar-dropdown.duet-theme-turva button.active {
   color: rgb(198, 12, 48);
 }

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.css

@@ -44,19 +44,19 @@
   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-menu-bar-dropdown-link--slot-right:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva .duet-menu-bar-dropdown-link--slot-right:focus, .duet-menu-bar-dropdown-link--slot-right:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
 .duet-menu-bar-dropdown-link--slot-right:hover {
   background: rgb(230, 242, 248);
 }
 .duet-menu-bar-dropdown-link--slot-right:hover.duet-theme-turva {
   background: rgb(228, 228, 230);
 }
-.duet-menu-bar-dropdown-link--slot-right:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
-.duet-menu-bar-dropdown-link--slot-right:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
 .duet-menu-bar-dropdown-link--slot-below:hover {
   color: rgb(0, 77, 128);
   background: rgb(243, 249, 252);

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

@@ -37,6 +37,13 @@
   text-decoration: none;
   white-space: nowrap;
 }
+.duet-menu-bar-link:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.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-menu-bar-link.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";
 }
@@ -50,13 +57,6 @@
     padding: 0 28px;
   }
 }
-.duet-menu-bar-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
-.duet-menu-bar-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
 .duet-menu-bar-link.active {
   color: rgb(0, 119, 179);
 }

package/lib/collection/components/duet-multiselect/duet-multiselect.css

@@ -114,33 +114,33 @@
 }
 .duet-multiselect:hover {
   border-color: rgb(144, 149, 153);
-  box-shadow: 0 0 0 1px rgb(144, 149, 153);
+  box-shadow: 0 0 0 1px #909599;
 }
 .duet-theme-turva .duet-multiselect:hover {
   border-color: rgb(116, 116, 117);
-  box-shadow: 0 0 0 1px rgb(116, 116, 117);
+  box-shadow: 0 0 0 1px #0077b3;
 }
 .has-error .duet-multiselect:hover {
-  box-shadow: 0 0 0 1px rgb(222, 35, 98);
+  box-shadow: 0 0 0 1px #de2362;
 }
 .duet-theme-turva.has-error .duet-multiselect:hover {
-  box-shadow: 0 0 0 1px rgb(224, 42, 13);
+  box-shadow: 0 0 0 1px #e55039;
 }
 .duet-multiselect:focus, .duet-multiselect.duet-multiselect-active {
   border-color: rgb(0, 119, 179);
   outline: 0;
-  box-shadow: 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 1px #0077b3 !important;
   transition: none;
 }
 .duet-theme-turva .duet-multiselect:focus, .duet-theme-turva .duet-multiselect.duet-multiselect-active {
   border-color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 1px #171c3a !important;
 }
 .has-error .duet-multiselect:focus, .has-error .duet-multiselect.duet-multiselect-active {
-  box-shadow: 0 0 0 1px rgb(222, 35, 98);
+  box-shadow: 0 0 0 1px #de2362;
 }
 .duet-theme-turva.has-error .duet-multiselect:focus, .duet-theme-turva.has-error .duet-multiselect.duet-multiselect-active {
-  box-shadow: 0 0 0 1px rgb(224, 42, 13);
+  box-shadow: 0 0 0 1px #e55039;
 }
 .duet-multiselect[disabled] {
   color: rgb(0, 41, 77) !important;
@@ -238,6 +238,13 @@
   cursor: pointer;
   border-radius: 4px;
 }
+.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus, .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:first-child {
   border-right: 1px solid rgb(225, 227, 230);
 }
@@ -245,16 +252,9 @@
   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(198, 12, 48);
 }
-.duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
-}
 .duet-theme-turva .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
   color: rgb(23, 28, 58);
 }
-.duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
-}
 .duet-multiselect-checkboxes .duet-multiselect-all-control-buttons button:hover {
   color: rgb(0, 41, 77);
 }

package/lib/collection/components/duet-notification/duet-notification.css

@@ -62,10 +62,10 @@
 }
 :host(.user-is-tabbing) .duet-notification:focus-within {
   z-index: 1;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 :host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 
 .duet-notification-container {

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.css

@@ -85,10 +85,10 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-drawer-toggle:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 :host(.user-is-tabbing) .duet-theme-turva .duet-drawer-toggle:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-drawer-toggle:hover {
   color: rgb(0, 77, 128);

package/lib/collection/components/duet-number-input/duet-number-input.css

@@ -89,10 +89,10 @@
 }
 :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
   z-index: 2;
-  box-shadow: 0 0 0 2px rgb(0, 119, 179);
+  box-shadow: 0 0 0 2px #0077b3 !important;
 }
 .duet-theme-turva :host(.user-is-tabbing) .duet-number-buttons .duet-number-button:focus {
-  box-shadow: 0 0 0 2px rgb(23, 28, 58);
+  box-shadow: 0 0 0 2px #171c3a !important;
 }
 .duet-number-buttons .duet-number-button:first-of-type {
   border-left: 1px solid rgb(207, 210, 212);

package/lib/collection/components/duet-pagination/duet-pagination.css

@@ -58,4 +58,22 @@
 }
 .duet-pagination.duet-pagination-is-dimmed {
   opacity: 0.5;
+}
+.duet-pagination .duet-pagination-select {
+  margin: 0 4px 0 12px !important;
+}
+
+.duet-pagination-total-pages {
+  margin: 0;
+  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: 1rem;
+  font-weight: 600 !important;
+  line-height: 1.25;
+  color: rgb(0, 41, 77);
+  text-align: left;
+}
+
+:host(.duet-theme-turva) .duet-pagination-total-pages {
+  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);
 }

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

@@ -1,12 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { Fragment, h, Host } from "@stencil/core";
+import { Build, Fragment, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { isArrowDownKey, isArrowKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isNumber, } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
+import { breakpointTokensUpTo, breakpointToToken } from "../../utils/token-utils";
 import { shouldDisplayNavigation } from "./duet-pagination-utils";
 /**
  * @part navigation-arrow - this part enables style overrides for the navigation-arrow
@@ -19,6 +20,9 @@ export class DuetPagination {
     this.listId = createID("duet-pagination-list");
     // not in state because we don't want to trigger a render
     this.firstRenderDone = false;
+    this.handleMediaQueryChange = (mq) => {
+      this.matchesCompactBreakpoint = breakpointTokensUpTo.includes(this.compactBreakpoint) ? mq.matches : !mq.matches;
+    };
     /**
      * Private methods.
      */
@@ -27,6 +31,9 @@ export class DuetPagination {
       if (after === 0) {
         this.current = 1;
       }
+      else if (after > this.totalPages) {
+        this.current = this.totalPages;
+      }
       else if (before !== after) {
         const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
         if (calculatedSectionIndex !== this.internalSectionIndex) {
@@ -65,10 +72,10 @@ export class DuetPagination {
       });
     }, 500);
     this.numbersStore = "";
+    this.matchesCompactBreakpoint = false;
     this.totalPages = 10;
     this.internalSectionIndex = 0;
     this.theme = "";
-    this.jumpString = "...";
     this.variation = "default";
     this.accessibleDescribedBy = undefined;
     this.accessibleDetails = undefined;
@@ -84,6 +91,7 @@ export class DuetPagination {
         go_to: "Go to page",
         description: "You may use arrow keys to select page number",
         pagination_label: "Pagination, choose a number to jump to a page",
+        select_label: "Total pages {0}, choose a number to jump to a page",
         prev_section: "Show previous {0} page numbers, screen reader user should use arrowkeys to navigate",
         next_section: "Show next {0} page numbers, screen reader user should use arrowkeys to navigate",
       },
@@ -96,6 +104,7 @@ export class DuetPagination {
         go_to: "Siirry sivulle",
         description: "Voit käyttää nuolinäppäimiä sivunumeron valitsemiseen",
         pagination_label: "Sivutus, valitse sivunumero siirtyäksesi sivulle",
+        select_label: "Sivuja yhteensä {0}, valitse sivunumero siirtyäksesi sivulle",
         prev_section: "Näytä edelliset {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi",
         next_section: "Näytä seuraavat {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi",
       },
@@ -107,7 +116,8 @@ export class DuetPagination {
         jump_to: "Hoppa till sida",
         go_to: "Hoppa till sida",
         description: "Du kan använda piltangenterna för att välja sida",
-        pagination_label: "Sidutning, välj en siffra för att hoppa till en sida",
+        pagination_label: "Paginering, välj en siffra för att hoppa till en sida",
+        select_label: "Totalt antal sidor {0}, välj en siffra för att hoppa till en sida",
         prev_section: "Visa föregående {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
         next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
       },
@@ -116,6 +126,7 @@ export class DuetPagination {
     this.take = 5;
     this.visibleItems = 5;
     this.total = 1000;
+    this.compactBreakpoint = "x-small";
     this.ariaControls = "";
     this.current = 1;
   }
@@ -149,9 +160,22 @@ export class DuetPagination {
     }
   }
   connectedCallback() {
+    if (Build.isServer) {
+      return;
+    }
+    const token = this.compactBreakpoint === "none" ? "all" : breakpointToToken[this.compactBreakpoint];
+    this.mq = matchMedia(token);
+    this.mq.addEventListener("change", debounce(this.handleMediaQueryChange, 50));
+    this.handleMediaQueryChange(this.mq);
     connectLanguageChangeObserver(this, { prop: "accessibleLabels", defaults: "accessibleLabelsDefaults" });
   }
   disconnectedCallback() {
+    if (Build.isServer) {
+      return;
+    }
+    this.mq.removeEventListener("change", this.handleMediaQueryChange);
+    this.mq = null;
+    this.matchesCompactBreakpoint = false;
     disconnectLanguageChangeObserver(this);
   }
   //get totalpages from visible and total
@@ -204,6 +228,12 @@ export class DuetPagination {
     this.current = clickedId;
     this.emitPageEvent({}, clickedId);
   }
+  selectClickHandler(e) {
+    e.preventDefault();
+    const clickedId = Number(e.target.value);
+    this.current = clickedId;
+    this.emitPageEvent({}, clickedId);
+  }
   //handles click on the next section buttons
   sectionClickHandler(e, direction) {
     e.preventDefault();
@@ -253,8 +283,19 @@ export class DuetPagination {
     } while (i < this.visibleItems + this.internalSectionIndex * this.visibleItems);
     return items;
   }
+  renderSelect() {
+    const items = [];
+    for (let i = 1; i <= this.totalPages; i++) {
+      items.push({
+        value: i.toString(),
+        label: i.toString(),
+      });
+    }
+    const select = (h("duet-select", { theme: this.theme, class: "duet-pagination-select", variation: "compact", items: JSON.stringify(items), value: this.current.toString(), label: this.accessibleLabels.select_label.replace("{0}", `${this.totalPages}`), labelHidden: true, onDuetChange: e => this.selectClickHandler(e) }));
+    return (h("li", null, select, h("span", { class: "duet-pagination-total-pages", "aria-hidden": "true" }, "/ ", this.totalPages)));
+  }
   shouldDisplayNavigation() {
-    if (this.variation !== "compact") {
+    if (this.variation !== "compact" && !this.matchesCompactBreakpoint) {
       return shouldDisplayNavigation(this.visibleItems, this.total, this.take);
     }
     return false;
@@ -264,21 +305,28 @@ export class DuetPagination {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { onKeyDown: e => this.onKeyboardDown(e) }, h("nav", { role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+    return (h(Host, { onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
         "duet-pagination-nav": true,
         [`duet-pagination-variation-${this.variation}`]: true,
       } }, this.numbersStore !== "" && (h("div", { "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { id: this.listId, class: {
         "duet-pagination": true,
         "duet-pagination-is-dimmed": this.numbersStore !== "",
-      }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, h("li", { class: {
+      }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { class: {
         "duet-pagination-page-button": true,
         "duet-pagination-button-first": true,
-      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, "1"))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))), this.renderPageNumbers(), this.internalSectionIndex * (this.visibleItems + 2) < this.totalPages && this.shouldDisplayNavigation() && // eslint-disable-line
-      (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { class: {
+      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme }))), h("li", { class: {
+        "duet-pagination-page-button": true,
+        "duet-pagination-button-first": true,
+      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, null, h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, "1"))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
+      this.shouldDisplayNavigation() && (h(Fragment, null, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme }, h("div", { class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { class: {
+        "duet-pagination-page-button": true,
+        "duet-pagination-button-last": true,
+      }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.current === this.totalPages &&
+        this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { class: {
         "duet-pagination-page-button": true,
         "duet-pagination-button-last": true,
       }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { disabled: this.current === this.totalPages &&
-        this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-arrow-right-small", theme: this.theme }))))));
+        this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1, accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), "icon-name": "action-move-to-last", theme: this.theme })))))));
   }
   static get is() { return "duet-pagination"; }
   static get encapsulation() { return "shadow"; }
@@ -317,24 +365,6 @@ export class DuetPagination {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "jumpString": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Characters to use for the jump buttons."
-        },
-        "attribute": "jump-string",
-        "reflect": false,
-        "defaultValue": "\"...\""
-      },
       "variation": {
         "type": "string",
         "mutable": false,
@@ -449,7 +479,7 @@ export class DuetPagination {
           "tags": [],
           "text": "Default pagination labels"
         },
-        "defaultValue": "{\n    en: {\n      next_page: \"Next page\",\n      previous_page: \"Previous page\",\n      first_page: \"First page\",\n      last_page: \"Last page\",\n      jump_to: \"Jump to page\",\n      go_to: \"Go to page\",\n      description: \"You may use arrow keys to select page number\",\n      pagination_label: \"Pagination, choose a number to jump to a page\",\n      prev_section: \"Show previous {0} page numbers, screen reader user should use arrowkeys to navigate\",\n      next_section: \"Show next {0} page numbers, screen reader user should use arrowkeys to navigate\",\n    },\n    fi: {\n      next_page: \"Seuraava sivu\",\n      previous_page: \"Edellinen sivu\",\n      first_page: \"Ensimm\u00E4inen sivu\",\n      last_page: \"Viimeinen sivu\",\n      jump_to: \"Siirry sivulle\",\n      go_to: \"Siirry sivulle\",\n      description: \"Voit k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 sivunumeron valitsemiseen\",\n      pagination_label: \"Sivutus, valitse sivunumero siirty\u00E4ksesi sivulle\",\n      prev_section: \"N\u00E4yt\u00E4 edelliset {0} sivunumerot, k\u00E4ytt\u00E4j\u00E4n pit\u00E4\u00E4 k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 navigoidaksesi\",\n      next_section: \"N\u00E4yt\u00E4 seuraavat {0} sivunumerot, k\u00E4ytt\u00E4j\u00E4n pit\u00E4\u00E4 k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 navigoidaksesi\",\n    },\n    sv: {\n      next_page: \"N\u00E4sta sida\",\n      previous_page: \"F\u00F6reg\u00E5ende sida\",\n      first_page: \"F\u00F6rsta sidan\",\n      last_page: \"Sista sidan\",\n      jump_to: \"Hoppa till sida\",\n      go_to: \"Hoppa till sida\",\n      description: \"Du kan anv\u00E4nda piltangenterna f\u00F6r att v\u00E4lja sida\",\n      pagination_label: \"Sidutning, v\u00E4lj en siffra f\u00F6r att hoppa till en sida\",\n      prev_section: \"Visa f\u00F6reg\u00E5ende {0} sidnummer, skrivbordsl\u00E4sare ska anv\u00E4nda piltangenterna f\u00F6r att navigera\",\n      next_section: \"Visa n\u00E4sta {0} sidnummer, skrivbordsl\u00E4sare ska anv\u00E4nda piltangenterna f\u00F6r att navigera\",\n    },\n  }"
+        "defaultValue": "{\n    en: {\n      next_page: \"Next page\",\n      previous_page: \"Previous page\",\n      first_page: \"First page\",\n      last_page: \"Last page\",\n      jump_to: \"Jump to page\",\n      go_to: \"Go to page\",\n      description: \"You may use arrow keys to select page number\",\n      pagination_label: \"Pagination, choose a number to jump to a page\",\n      select_label: \"Total pages {0}, choose a number to jump to a page\",\n      prev_section: \"Show previous {0} page numbers, screen reader user should use arrowkeys to navigate\",\n      next_section: \"Show next {0} page numbers, screen reader user should use arrowkeys to navigate\",\n    },\n    fi: {\n      next_page: \"Seuraava sivu\",\n      previous_page: \"Edellinen sivu\",\n      first_page: \"Ensimm\u00E4inen sivu\",\n      last_page: \"Viimeinen sivu\",\n      jump_to: \"Siirry sivulle\",\n      go_to: \"Siirry sivulle\",\n      description: \"Voit k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 sivunumeron valitsemiseen\",\n      pagination_label: \"Sivutus, valitse sivunumero siirty\u00E4ksesi sivulle\",\n      select_label: \"Sivuja yhteens\u00E4 {0}, valitse sivunumero siirty\u00E4ksesi sivulle\",\n      prev_section: \"N\u00E4yt\u00E4 edelliset {0} sivunumerot, k\u00E4ytt\u00E4j\u00E4n pit\u00E4\u00E4 k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 navigoidaksesi\",\n      next_section: \"N\u00E4yt\u00E4 seuraavat {0} sivunumerot, k\u00E4ytt\u00E4j\u00E4n pit\u00E4\u00E4 k\u00E4ytt\u00E4\u00E4 nuolin\u00E4pp\u00E4imi\u00E4 navigoidaksesi\",\n    },\n    sv: {\n      next_page: \"N\u00E4sta sida\",\n      previous_page: \"F\u00F6reg\u00E5ende sida\",\n      first_page: \"F\u00F6rsta sidan\",\n      last_page: \"Sista sidan\",\n      jump_to: \"Hoppa till sida\",\n      go_to: \"Hoppa till sida\",\n      description: \"Du kan anv\u00E4nda piltangenterna f\u00F6r att v\u00E4lja sida\",\n      pagination_label: \"Paginering, v\u00E4lj en siffra f\u00F6r att hoppa till en sida\",\n      select_label: \"Totalt antal sidor {0}, v\u00E4lj en siffra f\u00F6r att hoppa till en sida\",\n      prev_section: \"Visa f\u00F6reg\u00E5ende {0} sidnummer, skrivbordsl\u00E4sare ska anv\u00E4nda piltangenterna f\u00F6r att navigera\",\n      next_section: \"Visa n\u00E4sta {0} sidnummer, skrivbordsl\u00E4sare ska anv\u00E4nda piltangenterna f\u00F6r att navigera\",\n    },\n  }"
       },
       "accessibleLabels": {
         "type": "unknown",
@@ -525,6 +555,29 @@ export class DuetPagination {
         "reflect": false,
         "defaultValue": "1000"
       },
+      "compactBreakpoint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetBreakpoints | \"none\"",
+          "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
+          "references": {
+            "DuetBreakpoints": {
+              "location": "import",
+              "path": "../../utils/token-utils"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Breakpoint at which the pagination should be rendered as compact with a select element"
+        },
+        "attribute": "compact-breakpoint",
+        "reflect": false,
+        "defaultValue": "\"x-small\""
+      },
       "ariaControls": {
         "type": "string",
         "mutable": false,
@@ -566,6 +619,7 @@ export class DuetPagination {
   static get states() {
     return {
       "numbersStore": {},
+      "matchesCompactBreakpoint": {},
       "totalPages": {},
       "internalSectionIndex": {}
     };

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

@@ -45,10 +45,10 @@
 }
 .duet-popup-menu-item:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-.duet-popup-menu-item:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+.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-popup-menu-item.active, .duet-popup-menu-item.active:hover {
   color: rgb(255, 255, 255);

package/lib/collection/components/duet-radio/duet-radio.css

@@ -133,10 +133,10 @@
   border-color: rgb(23, 28, 58);
 }
 .duet-radio:focus + label::before {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
 .duet-theme-turva .duet-radio:focus + label::before {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-radio:checked + label::after {
   position: absolute;

package/lib/collection/components/duet-range-slider/duet-range-slider.css

@@ -105,10 +105,10 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-range:focus {
-  box-shadow: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgba(0, 119, 179, 0.75);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(0, 119, 179, 0.75);
 }
 :host(.user-is-tabbing) .duet-theme-turva .duet-range:focus {
-  box-shadow: 0 0 0 1px rgb(255, 255, 255), 0 0 0 3px rgb(23, 28, 58);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(23, 28, 58, 0.75);
 }
 .duet-range::-webkit-slider-runnable-track {
   background: transparent;