@duetds/components 10.0.0-alpha.0 → 10.0.0-alpha.2

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

@@ -1,3 +1,71 @@
+.duet-internal-label {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin-bottom: 12px !important;
+  position: relative;
+  z-index: 100;
+  display: inline-flex;
+  width: auto;
+  margin-top: 8px !important;
+  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;
+  line-height: 1.25;
+  color: rgb(8, 42, 77);
+  text-align: left;
+  word-break: break-word;
+  cursor: default;
+}
+.duet-internal-label.duet-p-0 {
+  padding: 0 !important;
+}
+.duet-internal-label.duet-m-0 {
+  margin: 0 !important;
+}
+.duet-internal-label span {
+  font-size: 1rem;
+  font-weight: 600 !important;
+  word-break: break-word;
+}
+.duet-internal-label.duet-m-0 {
+  margin-bottom: 0 !important;
+}
+.duet-internal-label.duet-small-margin {
+  margin-top: 8px !important;
+  margin-bottom: 4px !important;
+}
+.duet-internal-label.duet-has-tooltip {
+  padding-right: 48px;
+}
+@media (min-width: 48em) {
+  .duet-internal-label.duet-has-tooltip {
+    padding-right: 0;
+  }
+}
+.duet-internal-label.duet-internal-label-small {
+  font-size: 0.875rem;
+}
+.duet-internal-label.duet-internal-label-small span {
+  font-size: 0.875rem;
+}
+.duet-internal-label.duet-weight-normal {
+  font-weight: 400 !important;
+}
+.duet-internal-label.duet-weight-normal span {
+  font-weight: 400 !important;
+}
+.duet-internal-label.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);
+}
+
 *,
 *::after,
 *::before {
@@ -11,6 +79,15 @@
   appearance: none;
 }
 
+:host {
+  margin-right: 16px !important;
+}
+
+:host(:last-child),
+:host(:last-of-type) {
+  margin-right: 0 !important;
+}
+
 :host {
   box-sizing: border-box;
   padding: 0;
@@ -20,7 +97,6 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
-  margin-right: 16px !important;
   margin-bottom: 12px !important;
   display: inline-flex;
   width: 100%;
@@ -29,9 +105,6 @@
   text-align: left;
   vertical-align: bottom;
 }
-:host:last-child, :host:last-of-type {
-  margin-right: 0 !important;
-}
 @media (min-width: 36em) {
   :host {
     width: calc(50% - 16px - 3px);
@@ -205,10 +278,10 @@ duet-caption:not(:last-of-type) {
 .duet-input.after-chip {
   padding-left: 8px !important;
 }
-.has-error .duet-input {
+.has-error .duet-input, .has-error .duet-input[disabled] {
   border-color: rgb(214, 28, 82) !important;
 }
-.has-error .duet-input + .duet-input-icon {
+.has-error .duet-input + .duet-input-icon, .has-error .duet-input[disabled] + .duet-input-icon {
   color: rgb(214, 28, 82) !important;
 }
 .duet-theme-turva.has-error .duet-input {
@@ -361,7 +434,7 @@ duet-caption:not(:last-of-type) {
   color: rgb(214, 28, 82);
 }
 
-.duet-label-hidden duet-label {
+.duet-label-hidden label {
   position: absolute;
   width: 1px;
   height: 1px;

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

@@ -5,6 +5,7 @@ import emailIcon from "@duetds/icons/lib/assets/form-email";
 import searchIcon from "@duetds/icons/lib/assets/form-search";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { DuetInternalLabel } from "../../common/label";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { isArrowLeftKey, isArrowRightKey, isBackspaceKey, isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
@@ -432,7 +433,7 @@ export class DuetInput {
             this.type !== "password" &&
             this.type !== "time" &&
             this.variation !== "button";
-        return (h(Host, { key: 'e4e873f95bf94f97147a15b2587cce826ffe328d', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: '6c116b58cda98a99d0561e57f42478e6f95fe85b', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: 'dc417736dc38bf828bb78b5ef7c18b4fd0f55660', class: {
+        return (h(Host, { key: '333cc6592b2d5b9894fc4b988ad3ea168fa43364', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" }, onKeyUp: e => this.keyHandler(e) }, this.type === "time" && (h("duet-visually-hidden", { key: 'b82fbdf57c7808e651be27016b9a52d973ae91a0', "aria-live": "polite", "aria-atomic": "true" }, selectedTime ? `${this.timeAnnouncement[this.language]} ${selectedTime.toLocaleTimeString()}` : "")), h("div", { key: '84e07b5c88ebc1cff8aec3aa56503d9095be2bf4', class: {
                 "duet-input-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-input-variation-${this.variation}`]: true,
@@ -446,7 +447,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { key: '3120dd57e859e1f11c7f871046ff93ca379f7d33', class: "duet-input-label-container" }, h("duet-label", { key: '1625fdf912a8f117979ac70414b749e5920d6697', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '3e8fb18bae9803bd617d98fc326ff4879113505b', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'f9e4dca121a806252b7d523be78ae0db191ab05a', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'c3a0f5039b0a6a78600b26003cf742b6c100b715', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '6df3e2e0abb79ce6bf5347c6e52e03be6ac374e1', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: '3f6dec06ad90dba4cb28b08ed008252423f6db74', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: 'a53cd8aa2761ac6ebd7b5d6ee329573595c9aacf', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), h("input", Object.assign({ key: '37decf03a973f6fa26a76961afc0598ab976b1e7', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { key: '3807adacf6f68441add5bad31f2ab0e9879918f1', class: "duet-input-label-container" }, h(DuetInternalLabel, { key: '7eb559ce3bd02797f3e4c45d4b33732b75d4c1c1', theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '71c3501094f969cc96ed9a976dedb290a5ceb620', class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: '6baba9baf34d6bd0800ee51f21e61818336f8adf', name: "tooltip" })), this.caption && (h("duet-caption", { key: 'dbb04535b568f18aac343d4de36ab8210d982ce3', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '1ad89ab8fec2b2ead4f2bae22e2c4375dd5ba492', class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { key: 'f9583dc96cc5244f7bfc817c11743214bc2adf18', id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { key: '8f73030c01312a5439a2015e11401ee743bd3e63', id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), h("input", Object.assign({ key: '189cad1e64b76eca71acced6f128ad6d1eab4087', ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -454,16 +455,16 @@ export class DuetInput {
                 "after-chip": this.getAllChips().length > 0,
                 "align-right": this.inputAlign === "right",
                 [`input-padding-${this.inputPadding}`]: true,
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '2b06ed113322c4e03fdcb04bf528cc9425307013', class: "duet-input-icon" }, h("duet-icon", { key: 'b5d41a945b099d2c5ade8c121738a9d387599c80', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'f89624f414e9005f484f4d31b90edcf6ea81ca44', class: {
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { key: '9daad03593568dc78f055cbf40419505a5d025e3', class: "duet-input-icon" }, h("duet-icon", { key: '1b13db87a6de47d331b4380895c6595d30239a47', margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { key: 'b75b0fa5f2b3f07790f7d77cf9c4019767db0d7f', class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,
                 "duet-input-clear-icon-button": this.variation === "button",
-            } }, h("button", { key: 'aeedec82776de92e930bef230fdaed43552002a6', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '92d15bab69bbfc0ea9b635c94b0edc5e5ddf4f3f', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: 'e16da8f6c4c252309cd6cf2fd9ad1d3f5ccdb547', class: "duet-input-icon" }, h("duet-icon", { key: 'ee55dc419577e1bd21eca218717c1ec7a64f38c2', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: '104d0b90682cd0508d684bebc22b9d4893d7181e', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '838c0aef8ef924af565ad34a0004f4d5f187418f', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
+            } }, h("button", { key: '80c66c59708051be5f379fdd91a344cb0ed9f8f8', onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { key: '54deca04f6cdee8a182fb2aa3d51958d6010dbc5', margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { key: '4fec603dae85338565381f3ebeaed8bbf8819306', class: "duet-input-icon" }, h("duet-icon", { key: '3c70c1392d44731bd3dc3f4c4b68d93c8a6849df', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { key: 'c872cfaae6b7d0fdfd41d0a3b068d4d7e39b5aa7', name: "button" }), this.variation === "revealable" && (h("duet-button", { key: '4c7c6d7057023525b7872958b96df4342af1de66', ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
                 ? this.hidePasswordLabel[this.language]
-                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: '902ec5a2c111186ed9cda34dcd1ad0d6666b74c7' }, h("span", { key: '1c94535e903e542ff97a52cb871e91d4ab244646', "aria-live": "polite" }, this.isPasswordRevealed
+                : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", { key: '51ef610ac3de74e693645a1a1ef61abe92919150' }, h("span", { key: '9468f1b6652e6185e9eb6e8f74e94c8f09f35bb4', "aria-live": "polite" }, this.isPasswordRevealed
             ? this.passwordShownAriaAnnouncement[this.language]
-            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '9e346bbb5e1d4a0e78fe8ff3b79401c7988a4e91' })), h("span", { key: '661e5d3ae11da4b71c4b024b6835b230008ddf42', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '66b313ab9b88db56592c542e1294012f6fbf3c10', class: "duet-input-error" }, this.error)))));
+            : this.passwordHiddenAriaAnnouncement[this.language]))), h("slot", { key: '8314f654030ef6d2734821d8981d9cf99e3cec3a' })), h("span", { key: 'ea14b3e64d0cacef959eb1af64d8a9a4a9636dde', class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '2c33714525b3646ffa87e3ccb51b0c082d10a8f3', class: "duet-input-error" }, this.error)))));
     }
     static get is() { return "duet-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,10 +53,10 @@
 }
 .duet-link:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
 }
 .duet-theme-turva .duet-link:focus, .duet-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
 }
 .duet-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";

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

@@ -119,6 +119,7 @@ export class DuetMenuBar {
                 this.boundMqlFunctions[i] = bound;
             }
         }
+        this.checkCenterSlot();
     }
     disconnectedCallback() {
         for (let i = 0; i < this.mql.length; i++) {
@@ -152,14 +153,14 @@ export class DuetMenuBar {
     render() {
         const slideoutAvailable = document.querySelectorAll("duet-slideout").length > 0;
         const isUsedAsAdditionalHorizontalNav = slideoutAvailable && !this.logo;
-        return (h(Host, { key: 'e13a866fd4bd3ea3ae238bdfb4112afb068f0fab' }, h("nav", { key: 'db9045533c937a21efbc304286b5092f04243305', class: {
+        return (h(Host, { key: '7424032f4fe4cf9e7391b652faddecf381ffd039' }, h("nav", { key: '8c3201741b36da474a2241e8ba5b3e1dfb53a61e', class: {
                 "duet-menu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 "horizontal-nav": isUsedAsAdditionalHorizontalNav,
                 "duet-menu-bar-slim": !this.centerSlotUsed,
                 hidden: this.hidden && this.hideOnScroll,
                 bottom: this.onBottom,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '576b5b70223b4d2a3c3fe0d51b6463381ed02fd0', class: "top" }), h("div", { key: '3ea0281105040d3c08cad1f21d6da1b8a5fdb414', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '9705c47b5abafad8fca9cda63fc6210a6aa3db8d' }, h("duet-logo", { key: '75eeb4e66ec2fa1474406b004082ef0397daface', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: '2cd20b518c5f8ece27f1038a476d467b6a319563', class: "list center", role: "list" }, h("div", { key: '6306281ddee87b21b54998ceaa9d00452fdd207d', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '2bed6d063a3826b81a1f2e94562e4441ed26fa5c', name: "center" }), h("div", { key: '9ed25492a82ceafafca374e2466d86d3b6491acb', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'b1cfd7cdd4cfd0450fe01ec99ede3e9860ac365c', class: "list right", role: "list" }, h("slot", { key: '6e9e1132485a765842ef8c99fc98dadf0b11bc63', name: "right" }))), h("div", { key: '168346a69638fbc80bcd180c0582aa167a84bb2e', class: "bottom" }))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '343657eeb7bbc89db0881a7bb0fe485bfcd6cdd6', class: "top" }), h("div", { key: '7252aede6443560c0dd9d9b1da3be093312468aa', class: { container: true }, ref: el => (this.container = el), onScroll: () => this.scrollbarCheck() }, this.logo && (h("div", { key: '95c2d74cb086c7ae350a20b2f10555ac8a9ccf18' }, h("duet-logo", { key: '00d5ca62ce150e05e4015f1597692ed9122303e0', size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref, accessibleLabel: this.logoLinkAccessibleLabel, onClick: this.handleLogoClick, language: this.language }))), h("div", { key: 'd11a1fe47483eaa847dd6e1b33fe3f022182056f', class: "list center", role: "list" }, h("div", { key: '70d5324316868d9eac48fcf6f6519fce58f08411', class: "more-left", hidden: !this.leftMoreVisible, role: "presentation" }), h("slot", { key: '3565b69ae8c95cbe9dcda578b6870cfcb680fa3e', name: "center" }), h("div", { key: 'ea2d3738b94bcfec575da5cb1e2896e152780f2c', class: "more-right", hidden: !this.rightMoreVisible, role: "presentation" })), h("div", { key: 'bc825dee9988ee497c9df9ef96a94c76d58e0de9', class: "list right", role: "list" }, h("slot", { key: '3ebc272f053762d22d0fb80bc22093edf171fffa', name: "right" }))), h("div", { key: '6ee303d3e34ebda33fefbd13d0b13ea0d43fbfa6', class: "bottom" }))));
     }
     static get is() { return "duet-menu-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,71 @@
+.duet-internal-label {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin-bottom: 12px !important;
+  position: relative;
+  z-index: 100;
+  display: inline-flex;
+  width: auto;
+  margin-top: 8px !important;
+  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;
+  line-height: 1.25;
+  color: rgb(8, 42, 77);
+  text-align: left;
+  word-break: break-word;
+  cursor: default;
+}
+.duet-internal-label.duet-p-0 {
+  padding: 0 !important;
+}
+.duet-internal-label.duet-m-0 {
+  margin: 0 !important;
+}
+.duet-internal-label span {
+  font-size: 1rem;
+  font-weight: 600 !important;
+  word-break: break-word;
+}
+.duet-internal-label.duet-m-0 {
+  margin-bottom: 0 !important;
+}
+.duet-internal-label.duet-small-margin {
+  margin-top: 8px !important;
+  margin-bottom: 4px !important;
+}
+.duet-internal-label.duet-has-tooltip {
+  padding-right: 48px;
+}
+@media (min-width: 48em) {
+  .duet-internal-label.duet-has-tooltip {
+    padding-right: 0;
+  }
+}
+.duet-internal-label.duet-internal-label-small {
+  font-size: 0.875rem;
+}
+.duet-internal-label.duet-internal-label-small span {
+  font-size: 0.875rem;
+}
+.duet-internal-label.duet-weight-normal {
+  font-weight: 400 !important;
+}
+.duet-internal-label.duet-weight-normal span {
+  font-weight: 400 !important;
+}
+.duet-internal-label.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);
+}
+
 *,
 *::after,
 *::before {
@@ -315,7 +383,7 @@
   color: rgb(214, 28, 82);
 }
 
-.duet-label-hidden duet-label {
+.duet-label-hidden .duet-internal-label {
   position: absolute;
   width: 1px;
   height: 1px;

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

@@ -2,6 +2,7 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { DuetInternalLabel } from "../../common/label";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEnterKey, isEscapeKey, isTabKey, } from "../../utils/keyboard-utils";
@@ -223,23 +224,23 @@ export class DuetMultiselect {
      */
     render() {
         var _a;
-        return (h(Host, { key: '3a671559e08eccdf48ad44b9e9b52b7d7e48e0c6', class: {
+        return (h(Host, { key: 'f026bdeb8bb0f3a21e0d475184c114d991c8d34e', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: 'fdf19e2d8b4d3b2badc1578e9024bb2aa3eb0c79', class: {
+            } }, h("div", { key: '569bc0190751f00772059cbd51ba08f2d62777ee', class: {
                 "duet-multiselect-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { key: 'a0fbdb1c0e5fb5bec6fd6bca6e2664daf8167857', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'afa2b2750e582751ad2f939c06a926d642674d97', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '6de41caacf1f02a5c1a1d066fd374ff3c4a11c5a', name: "tooltip" }), this.caption && (h("duet-caption", { key: '27d956b0dda43a64bde53c69d5e09c3a1187aee7', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '4f7e7596be60a0108a21644d0673d5f80e28ecd3', class: "duet-multiselect-wrapper" }, h("button", { key: 'bbcf2b3c97dc20be60de1436ab54a12299fe249c', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: '6cbf96b0870b6bcce05de05913c5bb7c52fe0f52', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '314065c7594a074bc12181cb0e1ee435ee430430', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '7aad3d1e91e90de0a0dfe7f36033e136c748d0ed' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: 'e72d639f91e3d087689764dd2328c72e8d891702', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bb0c604921ecb5c00cf369fa4765093c88d62129', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: 'a0ca77aba5de16cd53113ded0103d776062b84c9', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '9ccfbdef3eda53f54915bceb8be96f0d54747856', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '4a8d21958a685c3cd6315993fd5b3d494dacd199', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '319372a0fc0afb4677c04ccb1299051cd37b10b7', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'e49778d6f971a2470b56dafa5d9c366547b0d97d', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'c16590fa2fe0ba12853e17418cba4fc448118cda', class: "duet-multiselect-wrapper" }, h("button", { key: '3efc98df5282fb803d1bc6a0c523fda27d73733c', id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { key: '4db581abd2111bf21ba6a9a1558e31d08941a829', role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { key: '204ef6ae4834f01ecc5cdddd5e1c2ad17d748e13', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '613f579cc5815b7afc078625a9950c4b2ff50678' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: '84f2d116cc6e8174dd4f2195188328eaf14bde41', class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '28e23226381c96642cca173e6e38f4f643dd408a', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { key: 'bd781fbf42bf6c0123228368f0018b16904e754c', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '867656e4631ed271950191a5144ef7ec14f782eb', class: "duet-multiselect-all-control-buttons" }, h("button", { key: 'b55d9d3e7f6726a76301c32276608b307353e9d9', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '94d9f908ea389d09f404906f75121a7d38eac415', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
+            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '0ede9f28954863adf658287122fa470e9e8ed06d', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '3fc7f60c219943b97faf4d68e0bafd82c9ec2e07', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: 'ca0f4aaaf9206e4474d72f0c70b6292200566f64', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
             this.processedGroups.map(group => (h("fieldset", null, group.label && h("legend", null, group.label), group.items.map((item, key) => {
                 var _a, _b;
                 return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-            })))))), h("span", { key: '823e0b5d814cf797b45c231fded5191e17911527', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '8ffa0864b4ff78136869432028f26f80957d38a2' }, this.error)))));
+            })))))), h("span", { key: 'e467be93fd702a5c5a902e1d2458f4fe25447083', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'ec391ad7dbf44a8b305a55fd7db7edf3497e6d71' }, this.error)))));
     }
     static get is() { return "duet-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -328,7 +328,7 @@ export class DuetPagination {
                 label: i.toString(),
             });
         }
-        const select = (h("duet-select", { disabled: this.disabled, 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) }));
+        const select = (h("duet-select", { disabled: this.disabled, 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), margin: "none" }));
         return (h("li", null, select, h("span", { class: "duet-pagination-total-pages", "aria-hidden": "true" }, "/ ", this.totalPages)));
     }
     shouldDisplayNavigation() {
@@ -342,32 +342,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '63ebab0bf7dea080db742a196ec6cadd4faf3422', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '5b4e1021fb02a66c75a69bd9d38aa122b02f0853', 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, { key: 'daea491f2370780c5e3e6a4cd10b222c6f204bad', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '0056afc5f4b9f874a19554b938d03df0b13caa5e', 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", { key: '93e3182cbbc58a95b98717a46d7b12493ec0818d', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: '2c4d460cefbb01010e16f981ee02a88c72676697', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '34474987dd9a26aea05634587138e95af4fe450c', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: 'c0fa6438d96e246e62a4ce15c1638c118cc63053', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: '09ae84b926b6e97750610c4428d192209311eb52', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: 'fcc9993c0f574de2425b2393371f56a5494521bb', 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 }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'c69df7d962b26a27a954c7d8bef8f535505a4cd1', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '8127fcbb52bfda473e30eeeaa34073717065aad5', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '901a11fde18ff828ab5ee44301b430f1551ff721', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: 'deb4f81302119384f87796c6c571d3bff92394cc', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'b3f562761d6472473e40aa2658c1d5382c7ac8a9', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: '0d47396b8bb09354305c09e4f0e587c8b433e8ea', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '43edc2b4276101f2a199656d97905fbb5c318d01', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '8fd72a014f15fdd035a3a9fa78ed220d55c3d9e7', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
                 (this.current <= 1 && this.processedPageLinks) ||
-                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: 'e7bb804999bcc0049a36cee1cfed6eace4f69a9d' }, h("li", { key: 'bc8e86d51a05ed7207c61130e03adab99972d990', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'c8cf1aa4d17fa21f4bac1df94d567ee7c6518926', disabled: this.disabled, 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, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: '949333bff2072db55bc94f2038c0dc17086075f7', class: "duet-pagination-page-number" }, "1"))), h("li", { key: 'a60a0b5db53ce3ab2d53ef5d621cb116bfc54a24', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'ac69e69536e75c62726f5d0ebc403575ff059b2b', disabled: this.disabled, 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", { key: 'e6fa249f0f887d99b24f8d98f8b2872c7d259ffe', 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, { key: '68d65a89a09e8f96f8079165c10677ea7e28eb16' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '2b3a962f01999ee98fa7404fb492d70facca7ce0', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '0007c2b7bfb175274c0d9bf0b6c44cb391573a4a', disabled: this.disabled, 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", { key: '6fe7f71ea889cf3338600fd1bd0eb4f7ded1c02a', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'e2e34841b26b18aca84c76f43ef2d185528fefe4', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '8947ea4940b1e8df4759fdf76fc53c2f77febaf7', disabled: this.disabled, 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, url: this.processedPageLinks
+                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: 'dc791af4a42d6a664dfe1baf2b1c35f47a7d627b' }, h("li", { key: 'd1d84353c99d4076b5bd8ac6383d0e95253f96bf', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '5cb0dc775e9ca49bf7bf667ae76ef0ee36b6d0c2', disabled: this.disabled, 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, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: '4062749e18165803b2c4937749e77dc230443aa7', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '6d07aebfe3bb2ddc457f3453b36eb7a837a2c5c8', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '1d465e129c648a19fa45c841dfcf19e90369513f', disabled: this.disabled, 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", { key: 'f73557f0b2e790a5b5cfff9cdff6a05eaab02d8c', 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, { key: '386478132136a68d5c922d38b667dc96a156576f' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '2c7367f40dd3a559cec343a371211d540a23b37b', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'df7704130f6009b9474f00b03e5c3671ea66a7a1', disabled: this.disabled, 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", { key: '366cb74b1e6b6966eae94e513a9fbda1ab8cdbd0', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '22971b983614be021c0669a769f7ede8f434364e', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'a7c6988541fe49affc34d3cdcc27f42fcc06f0ae', disabled: this.disabled, 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, url: this.processedPageLinks
                 ? this.processedPageLinks[this.processedPageLinks.length - 1]
-                : undefined }, h("div", { key: '60e347e323fd4361a1cf408ee51e4bc67a9230d3', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '978ffca86c84b3fed8deaa3842f5ce5d1176699e', class: {
+                : undefined }, h("div", { key: '4fffc0cf1c3272ba864a279d7d358f17d0ea71aa', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '7aeb378f34c1a3a5d7634dba9954fc313e1a2a5d', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '1d9c0a03632a95f0da443958fc9701410407ad24', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '692fb6352c1cfab7cb27e15196eae4cc492b4596', disabled: !!((this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
-                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '6387079d576477e9fd25739cc58563a16f3d7f00', class: {
+                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'cc45b6cc3f4e6ffb875ba66c879122404305370d', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '6b41bfa37ce32dbc2a977aa9110659c8720d04ab', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '3028a4c627308fd49384465465882bb4fd9be7f6', disabled: (this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
                 this.disabled, accessibleLabel: this.accessibleLabels.last_page, title: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), "icon-name": "action-move-to-last", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.totalPages - 1] : undefined })))))));
     }

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

@@ -1,3 +1,71 @@
+.duet-internal-label {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin-bottom: 12px !important;
+  position: relative;
+  z-index: 100;
+  display: inline-flex;
+  width: auto;
+  margin-top: 8px !important;
+  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;
+  line-height: 1.25;
+  color: rgb(8, 42, 77);
+  text-align: left;
+  word-break: break-word;
+  cursor: default;
+}
+.duet-internal-label.duet-p-0 {
+  padding: 0 !important;
+}
+.duet-internal-label.duet-m-0 {
+  margin: 0 !important;
+}
+.duet-internal-label span {
+  font-size: 1rem;
+  font-weight: 600 !important;
+  word-break: break-word;
+}
+.duet-internal-label.duet-m-0 {
+  margin-bottom: 0 !important;
+}
+.duet-internal-label.duet-small-margin {
+  margin-top: 8px !important;
+  margin-bottom: 4px !important;
+}
+.duet-internal-label.duet-has-tooltip {
+  padding-right: 48px;
+}
+@media (min-width: 48em) {
+  .duet-internal-label.duet-has-tooltip {
+    padding-right: 0;
+  }
+}
+.duet-internal-label.duet-internal-label-small {
+  font-size: 0.875rem;
+}
+.duet-internal-label.duet-internal-label-small span {
+  font-size: 0.875rem;
+}
+.duet-internal-label.duet-weight-normal {
+  font-weight: 400 !important;
+}
+.duet-internal-label.duet-weight-normal span {
+  font-weight: 400 !important;
+}
+.duet-internal-label.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);
+}
+
 *,
 *::after,
 *::before {
@@ -206,7 +274,7 @@
   background: rgb(199, 202, 207);
 }
 
-.duet-label-hidden duet-label,
+.duet-label-hidden .duet-internal-label,
 .duet-label-hidden output {
   position: absolute;
   width: 1px;

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

@@ -3,6 +3,7 @@
  */
 import { colorGray, colorGrayTurva, colorPrimary, colorPrimaryTurva } from "@duetds/tokens";
 import { h, Host } from "@stencil/core";
+import { DuetInternalLabel } from "../../common/label";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import isInternetExplorer from "../../utils/is-internet-explorer";
@@ -116,13 +117,13 @@ export class DuetRangeSlider {
         const rangeStyles = {
             background: `-webkit-linear-gradient(left,${active} 0%,${active} ${percentage}%,${inactive} ${percentage}%)`,
         };
-        return (h(Host, { key: '88829030a8bbb0f4f4029de9ec16b04e3e476798', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: 'be11c8a8f243506acbd30ee4676104dbcea9a1ba', class: {
+        return (h(Host, { key: '0462822be845868f320cd128459db2c4dd0c3d9b', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: '4dad1dcb14b05b79dad097337e2f99827eecaa1e', class: {
                 "duet-range-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-ie": isInternetExplorer(),
                 "duet-range-disabled": this.disabled,
-            } }, h("duet-label", { key: 'c732b5fee1e4bfdb9873dfea49c26fdc34d6b03d', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small" }, this.label), h("output", { key: '43e6503a9b071299e557c6e39b64679e32f8f483', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: '2cc4a064e002ac2c4ae45d6fd13f0bdc3401f5de', onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-label": this.label, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
+            } }, h(DuetInternalLabel, { key: '90a4b100e8b76d1acb45eb27a611bba1bbf49a69', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: 'e3bb3da27713b30b891522bb338688c03e26f630', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: 'a47f6a94847e123d96917777681312c340cc2b0d', onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
     }
     static get is() { return "duet-range-slider"; }
     static get encapsulation() { return "shadow"; }