@duetds/components 8.0.4 → 8.0.6

package/lib/collection/components/duet-file-chooser/duet-file-chooser.js

@@ -0,0 +1,189 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+export class DuetUploadItem {
+  constructor() {
+    this.onChange = (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.duetChange.emit({
+        originalEvent: ev,
+        data: { files: this.nativeInput.files },
+        component: "duet-file-chooser",
+      });
+    };
+    this.theme = "";
+    this.multiple = false;
+    this.accept = undefined;
+  }
+  /**
+   * Opens file choose dialog.
+   */
+  async open() {
+    var _a;
+    (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click();
+  }
+  /**
+   * Returns actually selected files in file chooser.
+   */
+  async getFiles() {
+    return this.nativeInput.files;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  render() {
+    return (h(Host, null, h("duet-visually-hidden", { "aria-hidden": "true" }, h("input", { ref: input => {
+        this.nativeInput = input;
+      }, type: "file", class: {
+        "duet-upload": true,
+      }, "aria-hidden": "true", tabIndex: -1, onChange: this.onChange, multiple: this.multiple, accept: this.accept }))));
+  }
+  static get is() { return "duet-file-chooser"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-file-chooser.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-file-chooser.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetTheme"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "theme."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use multiple to allow the user to select multiple files when uploading"
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "accept": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The accept attribute takes as its value a comma-separated list of one or more file types,\nor unique file type specifiers, describing which file types to allow."
+        },
+        "attribute": "accept",
+        "reflect": false,
+        "defaultValue": "undefined"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "duetChange",
+        "name": "duetChange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the value has changed."
+        },
+        "complexType": {
+          "original": "DuetFileChooserEvent",
+          "resolved": "{ originalEvent?: Event; data?: Record<string, any>; component: \"duet-file-chooser\"; }",
+          "references": {
+            "DuetFileChooserEvent": {
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-file-chooser/duet-file-chooser.tsx",
+              "id": "src/components/duet-file-chooser/duet-file-chooser.tsx::DuetFileChooserEvent"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "open": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Opens file choose dialog.",
+          "tags": []
+        }
+      },
+      "getFiles": {
+        "complexType": {
+          "signature": "() => Promise<FileList>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "FileList": {
+              "location": "global",
+              "id": "global::FileList"
+            }
+          },
+          "return": "Promise<FileList>"
+        },
+        "docs": {
+          "text": "Returns actually selected files in file chooser.",
+          "tags": []
+        }
+      }
+    };
+  }
+}

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

@@ -188,7 +188,7 @@ export class DuetInput {
     this.tooltipDirection = "auto";
   }
   disallowedPatternChange() {
-    this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
+    this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
   }
   valueChanged() {
     var _a;

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

@@ -24,6 +24,8 @@
 }
 
 .duet-menu-bar {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;

package/lib/collection/components/duet-radio-group/duet-radio-group.js

@@ -31,6 +31,8 @@ export class DuetRadioGroup {
     this.responsive = false;
     this.value = undefined;
     this.disabled = undefined;
+    this.required = false;
+    this.accessibleLiveError = "polite";
   }
   /**
    * Component lifecycle events.
@@ -81,6 +83,7 @@ export class DuetRadioGroup {
     // Walk the DOM in reverse order, since the last selected one wins
     for (const radio of radios) {
       radio.name = this.name;
+      radio.required = this.required;
       radio.groupDisabled = this.disabled;
       radio.groupDirection = this.direction;
       radio.groupResponsive = this.responsive;
@@ -105,7 +108,7 @@ export class DuetRadioGroup {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("div", { class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
+    return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("div", { class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
   }
   static get is() { return "duet-radio-group"; }
   static get encapsulation() { return "scoped"; }
@@ -375,6 +378,42 @@ export class DuetRadioGroup {
         },
         "attribute": "disabled",
         "reflect": false
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets whether making a choice is required or optional. Will set contained duet-radio components to required as well."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "accessibleLiveError": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"off\" | \"polite\" | \"assertive\"",
+          "resolved": "\"assertive\" | \"off\" | \"polite\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
+        },
+        "attribute": "accessible-live-error",
+        "reflect": false,
+        "defaultValue": "\"polite\""
       }
     };
   }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -63,6 +63,8 @@ export class DuetShowMore {
     };
     this.showLessAccessibleLabel = getLocaleString(this.showLessAccessibleLabelDefaults);
     this.margin = "auto";
+    this.buttonMargin = "auto";
+    this.buttonPadding = "auto";
     this.open = false;
   }
   /**
@@ -93,7 +95,7 @@ export class DuetShowMore {
         "duet-theme-turva": this.theme === "turva",
         "duet-m-0": this.margin === "none",
         open: this.open,
-      } }, h("div", { ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { class: { "slotted-content": true } }, h("slot", null))), h("duet-button", { id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small" }, this.open ? this.showLessLabel : this.showMoreLabel))));
+      } }, h("div", { ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { class: { "slotted-content": true } }, h("slot", null))), h("duet-button", { id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding }, this.open ? this.showLessLabel : this.showMoreLabel))));
   }
   static get is() { return "duet-show-more"; }
   static get encapsulation() { return "shadow"; }
@@ -347,6 +349,54 @@ export class DuetShowMore {
         "reflect": false,
         "defaultValue": "\"auto\""
       },
+      "buttonMargin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetMargin"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the button component inside of show more."
+        },
+        "attribute": "button-margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "buttonPadding": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetPadding",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetPadding": {
+              "location": "import",
+              "path": "../../common-types",
+              "id": "src/common-types.d.ts::DuetPadding"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the padding of the button component inside of show more."
+        },
+        "attribute": "button-padding",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
       "open": {
         "type": "boolean",
         "mutable": true,

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

@@ -16,6 +16,11 @@ export class DuetSlideout {
       fi: "Poistu valikosta",
       sv: "Avsluta menyn",
     };
+    this.topLevelOpenMenuBarLangObject = {
+      en: "Exit this menu to find top level items",
+      fi: "Poistu tästä valikosta löytääksesi ylätason kohteet",
+      sv: "Stäng den här menyn för att hitta objekt på toppnivå",
+    };
     this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
     this.handleBodyScrolling = () => {
       if (this.displaying && this.open) {
@@ -25,6 +30,9 @@ export class DuetSlideout {
         enableBodyScroll(this.dialog);
       }
     };
+    this.getOpenPanel = () => {
+      return this.element.querySelector("duet-slideout-panel[open]");
+    };
     this.toggleMenu = (e) => {
       this.open = !this.open;
       if (this.openButton) {
@@ -36,7 +44,7 @@ export class DuetSlideout {
         component: "duet-slideout",
       });
       if (this.open) {
-        const openPanel = this.element.querySelector("duet-slideout-panel[open]");
+        const openPanel = this.getOpenPanel();
         this.teleport.go(true);
         if (openPanel) {
           openPanel.setFocus();
@@ -63,6 +71,7 @@ export class DuetSlideout {
     };
     this.language = getLanguage();
     this.displaying = false;
+    this.openPanel = false;
     this.theme = "";
     this.open = false;
     this.opener = undefined;
@@ -139,11 +148,23 @@ export class DuetSlideout {
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);
+    if (Build.isServer) {
+      return;
+    }
+    this.mutationObserver = new MutationObserver(() => {
+      this.openPanel = !!this.getOpenPanel();
+    });
+    this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
   }
   disconnectedCallback() {
     disconnectLanguageChangeObserver(this);
     enableBodyScroll(this.dialog);
-    this.intersectionObserver.disconnect();
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+    }
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
   }
   /**
    * Component event handling.
@@ -171,6 +192,7 @@ export class DuetSlideout {
     const styles = {
       background: getColorByName(this.backgroundColor, this.theme),
     };
+    const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
     const exitTranslation = getLocaleString(this.exitLangObject);
     return (h(Host, null, h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, h("div", { class: {
         "desktop-bg": true,
@@ -183,7 +205,7 @@ export class DuetSlideout {
       }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
         "slideout-close": true,
         active: this.open,
-      }, onClick: this.onClick }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { id: "menubar", role: "menubar", class: {
+      }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { id: "menubar", role: "menubar", "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
         items: true,
       } }, h("slot", null)), h(FocusGuard, { moveFocusTo: this.closeButton })))));
   }
@@ -289,7 +311,8 @@ export class DuetSlideout {
   static get states() {
     return {
       "language": {},
-      "displaying": {}
+      "displaying": {},
+      "openPanel": {}
     };
   }
   static get events() {

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -27,11 +27,21 @@ export class DuetSlideoutPanel {
       this.open = toggle;
       if (toggle) {
         setTimeout(() => {
+          const siblings = Array.from(this.element.parentElement.children);
+          siblings.forEach(sibling => {
+            if (sibling !== this.element) {
+              sibling.inert = true;
+            }
+          });
           this.closeButton.focus();
         }, 200);
       }
       else {
         setTimeout(() => {
+          const siblings = Array.from(this.element.parentElement.children);
+          siblings.forEach(sibling => {
+            sibling.inert = false;
+          });
           this.openButton.focus();
         }, 200);
       }
@@ -103,7 +113,7 @@ export class DuetSlideoutPanel {
       } }, h("button", { ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
         link: true,
         active: this.active,
-      }, onClick: this.onToggleClick }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("div", { class: "label" }, h("span", { class: { "label-text": true, [this.labelSize]: true } }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { class: {
+      }, onClick: this.onToggleClick, inert: this.open }, this.icon && h("duet-icon", { name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("div", { class: "label" }, h("span", { class: { "label-text": true, [this.labelSize]: true } }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { class: {
         dialog: true,
         hidden: !this.open,
       }, style: styles }, h(FocusGuard, { moveFocusTo: this.closeButton }), h("div", { class: "top" }, h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {

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

@@ -36,26 +36,6 @@
   position: relative;
   background: rgb(243, 249, 252);
 }
-.duet-submenu-bar .shadow-container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-.duet-submenu-bar .shadow-container .top-shadow {
-  position: absolute;
-  top: -52px;
-  width: 100%;
-  height: 52px;
-  box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
-}
-@media (min-width: 62em) {
-  .duet-submenu-bar .shadow-container .top-shadow {
-    top: -80px;
-    height: 80px;
-    box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1);
-  }
-}
 @media (min-width: 62em) {
   .duet-submenu-bar {
     border-bottom: 1px solid rgb(205, 229, 241);

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

@@ -106,7 +106,7 @@ export class DuetSubmenuBar {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, h("div", { class: "shadow-container", role: "presentation" }, h("div", { class: "top-shadow" })), this.hasItems && (h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+    return (h(Host, null, h("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
         active: this.open,
       }, onClick: this.onClick }, h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { class: {
         "menu-container": true,

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

@@ -194,12 +194,16 @@
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown.duet-theme-turva button.active, .duet-submenu-bar-dropdown.duet-theme-turva button.open {
     color: rgb(148, 9, 37);
-    background: rgb(228, 228, 230);
   }
 }
 .duet-submenu-bar-dropdown.duet-theme-turva button.active::after, .duet-submenu-bar-dropdown.duet-theme-turva button.open::after {
   background: rgb(148, 9, 37);
 }
+@media (min-width: 62em) {
+  .duet-submenu-bar-dropdown.duet-theme-turva button.open {
+    background: rgb(228, 228, 230);
+  }
+}
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown.duet-theme-turva .items {
     background: rgb(255, 255, 255);

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

@@ -51,7 +51,6 @@
   .duet-submenu-bar-dropdown-link {
     padding: 0.675rem 16px;
     font-size: 0.875rem;
-    text-align: center;
   }
 }
 .duet-submenu-bar-dropdown-link.active .label {

package/lib/collection/components/duet-tab-group/duet-tab-group.a11y.e2e.js

@@ -1,11 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { formatViolations, mergeRules, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
-const disabledRules = {
-  // ShadowDOM isolates identifiers (needed for aria-controls) https://github.com/w3c/aria/issues/864
-  "aria-valid-attr-value": { enabled: false },
-};
+import { formatViolations, options as axeRunOptions, testWithAxe } from "../../utils/axe-core-utils";
 describe("[a11y] duet-tab-group", () => {
   it("should render an accessible component", async () => {
     const result = await testWithAxe(`
@@ -13,7 +9,7 @@ describe("[a11y] duet-tab-group", () => {
           <duet-tab label="Yhteenveto">Tab 1 content</duet-tab>
           <duet-tab label="Säästösuunnitelma" selected>Tab 2 content</duet-tab>
         </duet-tab-group>
-      `, mergeRules(axeRunOptions, disabledRules));
+      `, axeRunOptions);
     expect(result).not.toBeNull();
     expect(formatViolations(result.violations)).toEqual([]);
   });

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -56,7 +56,7 @@ export class DuetTabGroup {
     };
     this.renderTab = () => {
       const renderedTabs = this.tabs.map((element, index) => {
-        return (h("button", { role: "tab", id: this.getButtonId(index), "aria-controls": this.getTabId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: index === 0 ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
+        return (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: index === 0 ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
             "duet-p-0": this.padding === "none",
             "duet-tab-button": true,
             "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
@@ -174,7 +174,6 @@ export class DuetTabGroup {
     this.tabs = this.getTabs();
     this.tabs.forEach((tab, index) => {
       tab.id = this.getTabId(index);
-      tab.setAttribute("accessible-labelled-by", this.getButtonId(index));
       if (tab.selected) {
         if (this.selected === undefined) {
           this.selected = index;

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

@@ -115,7 +115,7 @@ export class DuetTextarea {
     this.counterLabel = undefined;
   }
   disallowedPatternChange() {
-    this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
+    this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
   }
   /**
    * Component lifecycle events.

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

@@ -54,9 +54,21 @@
   justify-content: center;
   height: 100%;
 }
+.duet-toolbar.negative {
+  background: rgb(0, 119, 179);
+}
+.duet-toolbar.negative .container {
+  border-bottom: 0;
+}
 .duet-toolbar.duet-theme-turva {
   background: rgb(255, 255, 255);
 }
 .duet-toolbar.duet-theme-turva .container {
   border-bottom: 1px solid rgb(228, 228, 230);
+}
+.duet-toolbar.duet-theme-turva.negative {
+  background: rgb(198, 12, 48);
+}
+.duet-toolbar.duet-theme-turva.negative .container {
+  border-bottom: 0;
 }

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

@@ -10,6 +10,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetToolbar {
   constructor() {
     this.theme = "";
+    this.variation = "default";
     this.accessibleLabel = undefined;
   }
   /**
@@ -36,7 +37,8 @@ export class DuetToolbar {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("nav", { class: { "duet-toolbar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, h("div", { class: "container" }, h("div", { class: "list", role: "list" }, h("slot", { name: "left" })), h("div", { class: "list", role: "list" }, h("slot", { name: "right" }))))));
+    const variation = this.variation === "negative" ? "negative" : "default";
+    return (h(Host, null, h("nav", { class: { "duet-toolbar": true, "duet-theme-turva": this.theme === "turva", [variation]: true }, "aria-label": this.accessibleLabel }, h("div", { class: "container" }, h("div", { class: "list", role: "list" }, h("slot", { name: "left" })), h("div", { class: "list", role: "list" }, h("slot", { name: "right" }))))));
   }
   static get is() { return "duet-toolbar"; }
   static get encapsulation() { return "shadow"; }
@@ -76,6 +78,24 @@ export class DuetToolbar {
         "reflect": false,
         "defaultValue": "\"\""
       },
+      "variation": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "\"default\" | \"negative\"",
+          "resolved": "\"default\" | \"negative\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variation."
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "accessibleLabel": {
         "type": "string",
         "mutable": false,