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

package/lib/collection/components/duet-table/duet-table-styles.js

@@ -0,0 +1,499 @@
+/*!
+ * Built with Duet Design System
+ */
+import { colorGrayDarker, colorGrayDarkerTurva, colorGrayDarkTurva, colorGrayLight, colorGrayLightest, colorGrayLightTurva, colorPrimary, colorSecondary, colorSecondaryTurva, fontFamilyText, fontFamilyTextTurva, fontSizeMedium, fontWeightSemiBold, lineHeightSmall, mediaQueryXSmall, spaceLarge, spaceMedium, spaceSmall, spaceXxSmall, } from "@duetds/tokens";
+const styles = `
+duet-table {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  margin-bottom: ${spaceLarge} !important;
+  display: block;
+  font-variant-numeric: tabular-nums;
+
+  table,
+  thead,
+  tbody,
+  tfoot,
+  th,
+  td,
+  tr {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: 0;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  &.duet-m-0 {
+    margin: 0 !important;
+  }
+
+  table {
+    width: 100%;
+    font-family: ${fontFamilyText};
+    font-size: ${fontSizeMedium};
+    text-align: left;
+    border-spacing: 0;
+    border-collapse: separate;
+  }
+
+  &.duet-table-hide-head-visually.duet-table-hide-head-visually {
+    thead,
+    thead * {
+      position: absolute !important;
+      top: 0;
+      width: 1px !important;
+      height: 1px !important;
+      padding: 0 !important;
+      overflow: hidden !important;
+      clip: rect(1px, 1px, 1px, 1px) !important;
+      border: 0 !important;
+    }
+  }
+
+  &.duet-theme-turva table {
+    font-family: ${fontFamilyTextTurva};
+  }
+
+  td {
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    color: ${colorSecondary};
+  }
+
+  &.duet-theme-turva td {
+    color: ${colorSecondaryTurva};
+  }
+
+  th {
+    font-weight: ${fontWeightSemiBold};
+    line-height: ${lineHeightSmall};
+    color: ${colorGrayDarker};
+    text-align: left;
+  }
+
+  &.duet-theme-turva th {
+    color: ${colorGrayDarkTurva};
+  }
+
+  tbody th {
+    font-weight: ${fontWeightSemiBold};
+    color: ${colorSecondary};
+  }
+
+  &.duet-theme-turva tbody th {
+    color: ${colorSecondaryTurva};
+  }
+
+  & .duet-table-action-row {
+    & td:last-child {
+      justify-self: end;
+      padding-right: ${spaceLarge} !important;
+      white-space: nowrap;
+    }
+  }
+
+  span.duet-table-cell-heading {
+    display: none;
+  }
+}
+
+.duet-table-flattened {
+  table,
+  thead,
+  tbody,
+  tfoot,
+  th,
+  td,
+  tr {
+    display: block;
+  }
+
+  thead tr {
+    position: absolute !important;
+    top: 0;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    border: 0 !important;
+  }
+
+  td {
+    line-height: ${lineHeightSmall};
+
+    &:not(:last-child) {
+      margin-bottom: ${spaceMedium};
+    }
+
+    span.duet-table-cell-heading {
+      margin-bottom: ${spaceXxSmall};
+      display: block;
+      font-size: ${fontSizeMedium};
+      font-weight: ${fontWeightSemiBold};
+      color: ${colorSecondary};
+    }
+  }
+
+  &.duet-theme-turva td span.duet-table-cell-heading {
+    color: ${colorSecondaryTurva};
+  }
+
+  tbody td,
+  tbody th,
+  tfoot td {
+    padding: 0 !important;
+    text-align: left !important;
+  }
+
+  tbody th {
+    font-weight: ${fontWeightSemiBold};
+    line-height: ${lineHeightSmall};
+    color: ${colorGrayDarker};
+    text-align: left;
+  }
+}
+
+.duet-table-sticky thead th {
+  position: sticky;
+  top: 0;
+  background: ${colorGrayLightest};
+}
+
+.duet-table-striped {
+  td,
+  th {
+    padding: ${spaceLarge} !important;
+    @media ${mediaQueryXSmall.replace("'", "").replace("'", "")} {
+      padding: ${spaceLarge} ${spaceSmall} !important;
+    }
+  }
+
+  tbody th {
+    background: ${colorGrayLightest};
+  }
+
+  &.duet-table-sticky {
+    thead th {
+      border-bottom: 1px solid ${colorGrayLight};
+    }
+
+    &.duet-theme-turva thead th {
+      border-bottom-color: ${colorGrayLightTurva};
+    }
+  }
+
+  tbody:not(:first-of-type) th {
+    padding-top: calc(${spaceLarge} * 2) !important;
+  }
+
+  tbody:only-of-type tr:nth-of-type(odd) {
+    background: rgba(4, 81, 128, 0.04);
+  }
+
+  &.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
+    background: rgba(${colorSecondaryTurva}, 0.04);
+  }
+
+  tbody:not(:only-of-type) tr:nth-of-type(even) {
+    background: rgba(4, 81, 128, 0.04);
+  }
+
+  &.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even) {
+    background: rgba(${colorSecondaryTurva}, 0.04);
+  }
+
+  tfoot td {
+    border-top: 1px solid ${colorGrayLight};
+  }
+
+  &.duet-theme-turva tfoot td {
+    border-top-color: ${colorGrayLightTurva};
+  }
+
+  &.duet-table-flattened {
+    tbody:not(:first-of-type) th {
+      padding-top: ${spaceLarge} !important;
+    }
+
+    tr {
+      padding: ${spaceLarge} !important;
+    }
+
+    tfoot {
+      td {
+        border-top: 0;
+      }
+
+      tr {
+        border-top: 1px solid ${colorGrayLight};
+      }
+    }
+
+    &.duet-theme-turva tfoot tr {
+      border-top-color: ${colorGrayLightTurva};
+    }
+  }
+}
+
+.duet-table-plain, .duet-table-fixed, .duet-table-minimal {
+  th {
+    padding: ${spaceMedium} !important;
+    border-bottom: 1px solid ${colorGrayDarker};
+
+    &:first-child {
+      padding-left: 0 !important;
+    }
+
+    &:last-child {
+      padding-right: 0 !important;
+    }
+  }
+
+  &.duet-theme-turva th {
+    border-bottom-color: ${colorGrayDarkerTurva};
+  }
+
+  tbody th {
+    padding-top: calc(${spaceLarge} * 2) !important;
+    border-bottom-color: ${colorGrayLight};
+  }
+
+  &.duet-theme-turva tbody th {
+    border-bottom-color: ${colorGrayLightTurva};
+  }
+
+  td {
+    padding: ${spaceMedium} !important;
+
+    &:first-child {
+      padding-left: 0 !important;
+    }
+
+    &:last-child {
+      padding-right: 0 !important;
+    }
+  }
+
+  tbody td {
+    border-bottom: 1px solid ${colorGrayLight};
+  }
+
+  &.duet-theme-turva tbody td {
+    border-bottom-color: ${colorGrayLightTurva};
+  }
+
+  &.duet-table-flattened {
+    tbody:first-of-type th {
+      padding-top: 0 !important;
+    }
+
+    td,
+    tbody th {
+      border-bottom: 0;
+    }
+
+    tr {
+      padding: ${spaceLarge} 0 !important;
+    }
+
+    tbody th {
+      padding-top: ${spaceLarge} !important;
+    }
+
+    tfoot td {
+      margin-bottom: ${spaceXxSmall} !important;
+    }
+
+    tbody:not(:only-of-type) tr:first-child {
+      border-bottom: 0;
+    }
+  }
+}
+
+.duet-table-plain {
+
+  &.duet-table-flattened {
+    tbody tr {
+      border-bottom: 1px solid ${colorGrayLight};
+    }
+
+    &.duet-theme-turva tbody tr {
+      border-bottom-color: ${colorGrayLightTurva};
+    }
+  }
+}
+
+.duet-table-minimal {
+
+  tbody tr,
+  tbody tr td {
+    vertical-align: top;
+    border-bottom: 0 none;
+  }
+
+  tbody tr:last-of-type,
+  tbody tr:last-of-type td {
+    border-bottom: 1px solid ${colorGrayLight};
+  }
+
+  &.duet-table-flattened {
+    tbody tr,
+    tbody tr td {
+      border-bottom: 0 none;
+    }
+
+    tbody tr td[data-heading]::before {
+      display: none;
+    }
+
+    tfoot {
+      border-top: 1px solid ${colorGrayLight};
+    }
+
+    &.duet-theme-turva tfoot {
+      border-top-color: ${colorGrayLightTurva};
+    }
+  }
+}
+
+.duet-table-fixed {
+
+  table {
+    table-layout: fixed;
+  }
+
+  tbody tr,
+  tbody tr td,
+  tbody tr td:first-child {
+    padding: 4px !important;
+    vertical-align: text-bottom;
+    border-bottom: 0 none;
+  }
+
+  thead {
+    display: none;
+  }
+
+  tbody tr,
+  tbody tr td {
+    border-bottom: 0 none;
+  }
+
+  &:not(.duet-table-flattened) {
+    tfoot {
+      border-top: 1px solid ${colorGrayLight};
+    }
+
+    &.duet-theme-turva tfoot {
+      border-top-color: ${colorGrayLightTurva};
+    }
+  }
+}
+.duet-table-scrollable {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0)), linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 100% 0%;
+  background-repeat: no-repeat;
+  background-attachment: local, local, scroll, scroll;
+  background-size: 100px 100%, 100px 100%, 12px 100%, 12px 100%;
+}
+
+.duet-table-selected-column {
+  background: rgba(${colorPrimary}, 0.08);
+
+  .duet-theme-turva & {
+    background: rgba(${colorGrayDarkerTurva}, 0.08);
+  }
+}
+
+.duet-table-sortable {
+  tbody tr td:first-child,
+  thead tr th:first-child {
+    padding: ${spaceLarge};
+  }
+
+  &:not(.duet-table-flattened) {
+    tfoot {
+      border-top: 1px solid ${colorGrayLight};
+    }
+
+    &.duet-theme-turva tfoot {
+      border-top-color: ${colorGrayLightTurva};
+    }
+  }
+}
+
+
+.duet-table-actions {
+  table {
+    table-layout: auto;
+  }
+
+  thead {
+    & th:last-child {
+      width: 1px;
+      white-space: nowrap;
+    }
+  }
+}
+
+.duet-editable-table-table.duet-table-flattened {
+  tr {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: auto;
+    gap: 10px;
+
+    &.duet-table-action-row td:last-child::before {
+      padding: 0;
+      content: "";
+    }
+  }
+
+  td {
+    grid-column: 1 / 2;
+
+    &:first-child {
+      grid-row: 1;
+      grid-column: 1;
+    }
+
+    &:last-child {
+      grid-row: 1;
+      grid-column: 2;
+    }
+  }
+}
+`.replace(/[\n\r\t]/gm, "");
+export function createStyles(element) {
+    const rootNode = element.getRootNode();
+    const isInShadowRoot = rootNode instanceof ShadowRoot;
+    if (isInShadowRoot) {
+        const sheet = new CSSStyleSheet();
+        sheet.replace(styles).then(() => {
+            rootNode.adoptedStyleSheets.push(sheet);
+        });
+    }
+    else {
+        const previousStyleElement = document.querySelector("style#duet-table-styles");
+        if (previousStyleElement) {
+            return;
+        }
+        const styleElement = document.createElement("style");
+        styleElement.id = "duet-table-styles";
+        styleElement.innerHTML = styles;
+        document.head.append(styleElement);
+    }
+}

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

@@ -7,6 +7,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { debounce } from "../../utils/js-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
 import { breakpointTokensUpTo, breakpointToToken } from "../../utils/token-utils";
+import { createStyles } from "./duet-table-styles";
 const stickyTopValues = {
     none: 0,
     "with-links": parseFloat(sizeNavigation) * 16, // convert rem -> px
@@ -39,6 +40,7 @@ export class DuetTable {
         }
     }
     connectedCallback() {
+        createStyles(this.element);
         if (Build.isServer) {
             return;
         }
@@ -113,7 +115,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: 'fe804ab98faa5a67150c751bb1c75fffd76d9979', class: {
+        return (h(Host, { key: '15e609b307b99f28efe4daac634c7f978f43b1dc', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -122,19 +124,10 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: '5771327fbab3d42432e014a2f527de6c865d4999' })));
+            } }, h("slot", { key: '1af0a343ef68668f75358fdbc91a601ef62e8dd4' })));
     }
     static get is() { return "duet-table"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["duet-table.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["duet-table.css"]
-        };
-    }
+    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "theme": {

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

@@ -168,17 +168,17 @@ export class DuetTextarea {
      */
     render() {
         const identifier = this.identifier || this.textareaId;
-        return (h(Host, { key: '3464ae302a0a5d5c887a331e3550c8fa3dcd7162', class: {
+        return (h(Host, { key: 'b821aec8b3ee59b348a011e0140e2387f26da39d', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-has-counter": this.counter && !this.error,
                 "duet-expand": this.expand,
-            } }, h("div", { key: '978e5736c81e0166f9268c875e6688d528b5962a', class: {
+            } }, h("div", { key: 'f56d97bff7e94644241d19d049585364157adade', class: {
                 "duet-textarea-container": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h(DuetInternalLabel, { key: 'acdfc1c7ff2213b9bc2ae22d0df671dc662530c5', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '744fc7ed55f9e6e309d085d2b4d7b6570ab082c1', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'e30e5ff63c68f40f67659852379b94900d7766e7', name: "tooltip" }), this.caption && (h("duet-caption", { key: '1c45d6d2fcf37e765fa52e71fddb5bf4501ad684', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '3ecae1e53fde36ad09855189ded9f4db6ae66186', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: '130a8a8ab7da05cb546a7062868dce091ddc37b8', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: 'e0bb89af0dc04035955549f847426a3a556ceaa9', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: 'c0c8298e15d3c59ed98fb4360ee8f51e720be244', alignment: "stretch" }, h("duet-grid-item", { key: '897903be716ae4f138a75f6fbce0a8cb43abbc73', margin: "none", fill: true }, h("div", { key: '668f83d7eeb1d96e8450568a37a6134dc80ca7c0', class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'c3d07dc5c524d1fb9c3dba1878bf3dbc2c7baeeb' }, this.error))), h("duet-grid-item", { key: '32452898c098f736f18daed1a7adcc33bc64869c', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: '794d07d1f318b92f803c092c13187abb6b3102b7', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: '25fd4397e3d9139040bd3eb54449ba1183fa4131', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
+            } }, h(DuetInternalLabel, { key: '7c1e03e07b39d7e6191202bade688fc75728a3aa', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: 'f708a87ffcb1b8747ca9debe71883387fbddbc6d', direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { key: 'ac2de37430f5b367a3ca4da1174dba381a7b1f70', name: "tooltip" }), this.caption && (h("duet-caption", { key: '57784c29c408fb624a5f150f5312ea0037f08e09', id: this.topCaptionId, size: "medium", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { key: '752b526a970df90cd09e641ce57d6b1b496d4045', class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'e72d261a72b99e94fedb8db94bcc02e0f4a92e32', id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { key: 'c25b836cac3ba19e15eb9cf223321da6e2776320', onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { key: '996a289b27bce9161f2c1d008a57f8d1ea22e9c0', alignment: "stretch" }, h("duet-grid-item", { key: '028ae3bb7e264bda3d8b4ed4397fcce4057faf6f', margin: "none", fill: true }, h("div", { key: 'a5de4b40049dba2fd5eb737f56691b26aba77026', class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'f9d50772c6ab039b7d4a7455eb7c15a89d3a0408' }, this.error))), h("duet-grid-item", { key: '9c3b3984287d07b8ac4ebd0f9ed72dbd5ce0596e', margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { key: '8c50c85b05c0df4fad9ebcccdc74b89149b7888d', theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { key: '421074dd95f8ba8955cc95554a8efa7fd3df4969', class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
                 this.hiddenCounterLabel = el;
             } })))));
     }

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

@@ -81,12 +81,12 @@ export class DuetToggle {
      */
     render() {
         const identifier = this.identifier || this.toggleId;
-        return (h(Host, { key: '72296626084b22e1e913073a7cab579306a9351f', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '27f25315d1e9fe41194f3234bb8a9981e9a6a182', class: {
+        return (h(Host, { key: 'bf8502b497d41349ab2fd1bb0abca6b16c87fb6c', onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '17d971af6ec2d5bc251ffd734bea74dd1f3ee749', class: {
                 "duet-toggle": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-side-label": this.labelPosition !== "top",
                 "duet-reverse-label": this.labelPosition === "right",
-            } }, h(DuetInternalLabel, { key: '717144b9f527406c0c865f2b361b307fd0405adc', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: 'd142c9a5d7972009c5f3a287547f54206776550f', class: "duet-switch" }, h("input", { key: 'b41af320a24f9b2baabe3051a44c4b1d60400e37', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { key: '51ba5bed4ddbcdea28fe16ff61b0b5889e3c0eb8', class: "duet-slider" })))));
+            } }, h(DuetInternalLabel, { key: 'ee79a22afd025e1c86d7f4526eb27af6d5e68d85', theme: this.theme, color: this.labelColor, weight: this.labelWeight, for: identifier, margin: this.labelPosition === "top" ? "auto" : "none" }, this.label), h("label", { key: '9c4488aed6bafaf974b4389cb02809bb0ea2c478', class: "duet-switch" }, h("input", { key: '8140d3b60b2e094489f89788cc34d29427bce990', type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), h("div", { key: '3c207d4e7ede368ebbaf589a9bda47b1f73abfef', class: "duet-slider" })))));
     }
     static get is() { return "duet-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,11 +31,11 @@ export class DuetToolbar {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '21d533cd790fd3160001662f405fd6d576238601' }, h("nav", { key: '7b6dd43ab8c737929acec750be80136d3f5bb007', class: {
+        return (h(Host, { key: '623f017e9ed4beb5b7a48bd2e1f2fc84c1c249c3' }, h("nav", { key: 'dacb193ee88a1e8445a0b662de8f5a717f9883dd', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c6858334c5f7a5a760775d6cb1d5f3c8439f10a7', class: "container" }, h("div", { key: '28485640df44e2daf65bee426b757931d7fe01e8', class: "list", role: "list" }, h("slot", { key: '7fe71028d8cd2e938ec176fcf8a3bf9dd1d2e446', name: "left" })), h("div", { key: 'a5fa75c98324be554112c6bead973905e2144371', class: "list", role: "list" }, h("slot", { key: '277f1bafd019f0e03080d3c830be989eac1dd461', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '10f9e7ede421701301e1e1ee45ae85b61c54184a', class: "container" }, h("div", { key: '7bde8fc12ca6d1267484a0f5d2d0aa9146dfe220', class: "list", role: "list" }, h("slot", { key: '71515d752a76eed3236b91e158221a39ea7f9984', name: "left" })), h("div", { key: 'b731edf335cceac55399e111e45f67425e8c28ae', class: "list", role: "list" }, h("slot", { key: 'b079f0298ca68bdc17d45001797e3b759e0ea226', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,18 +50,18 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: '3f216acdbee35637a06bba1ad6bd31c79060c485', role: "listitem" }, h("div", { key: 'f327067f1cca48416dbadf416c81beb395f68bf6', class: {
+        return (h(Host, { key: 'fd5e7e1fb2af68f79aa4aa4799dc11bc85403e9a', role: "listitem" }, h("div", { key: 'de3b994b5ec7045967a4736ff96a1e8564dded5b', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: '7dc771dbb2a86dea2b8765ce9913edf088f789f6', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
+            } }, h("button", { key: 'd97d3ac97857caddc2f42cf2d610c7c6bfd5415c', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, id: "button", type: "button", class: {
                 active: this.active,
                 open: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'dddf695359ec083dc8f227c5e1deae8a5506b73f', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'd334e49d8815344ab29ac8db03eb694ddb496a54', class: "label" }, h("slot", { key: '348fcd3dd00b6a81b94d33771f6e4557284bd16d', name: "label" }), h("duet-icon", { key: '7dc2d3d54ff3117e2f48e687f3a762db43a837d4', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '90d305c6cecfb3fd7ee23ce5169cdcad6c4dd66f', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '75e4c173df866a7dc3a6141bb4d1cbd406877f65', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: 'b622b49718364a9c18f4fd364029eafd63e7f415', class: "label" }, h("slot", { key: '6d5093ee7b444d1bd73a3ddea2cabb32618d9c83', name: "label" }), h("duet-icon", { key: '0c2bdc620ad95743d6cfba1eb8591f0a195afa48', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '7f06bf77c02ff8113ae54ea64a7e951dac7ff492', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'eda0a71fd30d9a00a11d61a797243b2da1d4e19a' })))));
+            } }, h("slot", { key: '7b7b9a440494c81a4ea1c8e40bb22a8e48b25c1d' })))));
     }
     static get is() { return "duet-toolbar-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,11 +31,11 @@ export class DuetToolbarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '8cb69dd33c2d35233088309fd5cdad8c1d16ed01' }, h("a", { key: 'c805b960def6061680c14e5b401d1854c52f94a6', class: {
+        return (h(Host, { key: '34d25bff907ba75e14bb51f500bffea729b32482' }, h("a", { key: 'e9a8a7450c3e0f3c3835e7646384b52545b8b418', class: {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'aa73a86d1c127f99f803b772bd2ae89b207fab30', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '7435a9263b6389e3a4a2e980a6528741c3b7a46f', class: "label" }, h("slot", { key: '5bdd6f17bf41ee7a6f6dec80b9f3c9f741a1fc27' })), this.active && (h("duet-icon", { key: '6d9294ed304b2652d8cf535f549edad17fc6965d', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '7f22b9e1f170f2c6b4a08df11be5cb4e11a2efd0', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '78c798a19faa674e60d34672d1db627c8b47ab08', class: "label" }, h("slot", { key: '9f7e624dc12e4e35f51eb97e5bf01b5182f45635' })), this.active && (h("duet-icon", { key: 'a85b6330a153a4d6acb61d74a10f538a7fbf95f7', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }