@duetds/components 9.2.2 → 9.2.4

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

@@ -48,6 +48,27 @@
 .duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-toolbar-item .duet-toolbar-icon {
+  position: relative;
+  display: inline-flex;
+  font-size: 0;
+  line-height: normal;
+  vertical-align: baseline;
+}
+.duet-toolbar-item .duet-toolbar-icon .duet-toolbar-badge {
+  position: absolute;
+  top: 0;
+  left: 11px;
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: rgb(247, 178, 40);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px #c18b1f;
+}
+.duet-theme-turva .duet-toolbar-item .duet-toolbar-icon .duet-toolbar-badge {
+  background: rgb(247, 178, 40);
+}
 .duet-toolbar-item .trailing-icon {
   width: 16px;
   height: 16px;

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

@@ -21,6 +21,7 @@ export class DuetToolbarItem {
         this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
         this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
         this.external = false;
+        this.badge = false;
     }
     /**
      * Component lifecycle events.
@@ -56,17 +57,17 @@ export class DuetToolbarItem {
             : this.variation === "secondary"
                 ? "secondary"
                 : "default";
-        return (h(Host, { key: '83f80d7e668d1177d5f9d0e836bdfb1e3acf7871', role: "listitem" }, h(TagName, { key: '850c973bb8f9558ab4253454f2687afac75e41dd', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
+        return (h(Host, { key: '2ef7297d5c2f9b09536b757fe0b747caa6b2840c', role: "listitem" }, h(TagName, { key: '8b1a44bc3d37cad54e429b1523fbe404c97f5f03', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: {
                 "duet-toolbar-item": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '9aa6189b20be3fd6906aadc63e97842d78fe5f71', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: 'e7d6bd17b81c8222d598747f64f306d7d0735b4b' }), (this.trailingIcon || this.external) && (h("duet-icon", { key: '4bc521b1a39492b49c2685687279b699be209305', class: {
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("div", { key: '44269de51ebbfc87725a86ba4a84d75ecfba3b4e', class: "duet-toolbar-icon" }, h("duet-icon", { key: '5111f0d067e0964fdef11617baf9958ec40d6576', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: 'a92775b051d1c5c9eecc67b05c77a28cd64de8d5', class: "duet-toolbar-badge" }))), h("slot", { key: 'a7ddc45472cc0f2ddae38a069f87a9d675e8f1ff' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: '162e333175a2afce39599db1495b4a2db75405b8', class: "duet-toolbar-icon" }, h("duet-icon", { key: 'edbc553ef82f801d17f4e62c798031da2500157d', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
-                "external-icon": !!this.external,
+                "external-icon": !!(this.url && this.external),
                 rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
-            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" })))));
+            }, theme: this.theme, name: this.trailingIcon ? this.trailingIcon : this.url && this.external ? newWindowIcon.title : "", margin: "none", size: "auto", color: "currentColor" }), this.badge && this.trailingIcon !== "action-arrow-down-small" && h("div", { key: '9a1318e69e40d5d55677154d482ba08b9fc2e72e', class: "duet-toolbar-badge" }))))));
     }
     static get is() { return "duet-toolbar-item"; }
     static get encapsulation() { return "shadow"; }
@@ -102,6 +103,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -120,6 +123,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Variation. Secondary is not supported for Turva theme. Negative is deprecated."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
@@ -138,6 +143,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Active"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
@@ -156,6 +163,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Url"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "url",
                 "reflect": false
             },
@@ -179,6 +188,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Left icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "leading-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -203,6 +214,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Right icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "trailing-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -221,6 +234,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -238,6 +253,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-expanded",
                 "reflect": true
             },
@@ -255,6 +272,8 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Use this property to add an aria-haspopup attribute to a button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-popup",
                 "reflect": true,
                 "defaultValue": "\"false\""
@@ -282,6 +301,8 @@ export class DuetToolbarItem {
                         }],
                     "text": "Defaults for accessibleLabelExternal"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-external-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
@@ -303,6 +324,8 @@ export class DuetToolbarItem {
                         }],
                     "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
@@ -321,9 +344,31 @@ export class DuetToolbarItem {
                     "tags": [],
                     "text": "Forces URL to open in a new browser tab. Used together with URL prop."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "badge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a badge that indicates something has changed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "badge",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -24,12 +24,12 @@ export class DuetToolbarLink {
      */
     render() {
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, { key: 'aabe5d2605c9a03e071001a702185a1466c83613', role: "listitem" }, h("a", { key: '78a079007a827d89ad01fef55594c77b81a2ed0f', class: {
+        return (h(Host, { key: 'f8e4c9503e468b1d2912a6c633f8eebc7118176b', role: "listitem" }, h("a", { key: '9319a32f6d0731c1f473dbffd23b9f21c2d5103f', class: {
                 "duet-toolbar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [variation]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '408a6a6bc5bff16d4d4793ce23e34c7d7c295009', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '8c8479842b94400a142de9e1b571e68a1405c04d' }))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'bca12006695c45a33577fe1821081f3c07a0bb53', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '3bfc36ea53b227990d0ab7a26ae2ea0b9caa13c7' }))));
     }
     static get is() { return "duet-toolbar-link"; }
     static get encapsulation() { return "shadow"; }
@@ -65,6 +65,8 @@ export class DuetToolbarLink {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -83,6 +85,8 @@ export class DuetToolbarLink {
                     "tags": [],
                     "text": "Variation."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
@@ -101,6 +105,8 @@ export class DuetToolbarLink {
                     "tags": [],
                     "text": "Active"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
@@ -119,6 +125,8 @@ export class DuetToolbarLink {
                     "tags": [],
                     "text": "Href"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
@@ -137,6 +145,8 @@ export class DuetToolbarLink {
                     "tags": [],
                     "text": "Icon"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
@@ -155,6 +165,8 @@ export class DuetToolbarLink {
                     "tags": [],
                     "text": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             }

package/lib/collection/components/duet-tooltip/duet-tooltip-button.css

@@ -41,12 +41,18 @@
 .duet-tooltip-button.duet-theme-turva {
   color: rgb(198, 12, 48);
 }
+.duet-tooltip-button.duet-tooltip-button-negative {
+  color: rgb(255, 255, 255);
+}
 .duet-tooltip-button:hover {
   color: rgb(0, 75, 129);
 }
 .duet-tooltip-button:hover.duet-theme-turva {
   color: rgb(126, 2, 35);
 }
+.duet-tooltip-button:hover.duet-tooltip-button-negative {
+  color: rgb(255, 255, 255);
+}
 .duet-tooltip-button:focus {
   background: transparent !important;
   outline: 0;

package/lib/collection/components/duet-tooltip/duet-tooltip-button.js

@@ -13,6 +13,7 @@ export class DuetTooltipButton {
         this.label = "";
         this.accessibleLabel = undefined;
         this.theme = "";
+        this.negative = false;
         this.active = undefined;
         this.tooltipId = undefined;
     }
@@ -38,11 +39,12 @@ export class DuetTooltipButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '360bc435fef7b15aa942d401e90445ed308649f0' }, h("button", { key: '0caa0a28506e68c0e70dd723177dccbb01654d70', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
+        return (h(Host, { key: 'a93b648a97705995e9c16ed407d6a85edd146a1e' }, h("button", { key: '3908a9b2c7e7424835a9b52345bf37f9cf72b9fb', ref: el => (this.buttonElement = el), "aria-controls": this.tooltipId, "aria-expanded": this.active ? "true" : "false", type: "button", class: {
                 "duet-tooltip-button": true,
                 "duet-tooltip-button-has-label": !!this.label,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("svg", { key: '6efc80b2caaa461f37a50eed0db34d9021d2e9cd', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ff0015bdd563f7974c9e017947da732e9f3486d8', d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { key: '3dc766b793c4a4bf697f9f78b9f742c6f9c1e1ab', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: 'd5c64375ff914fd586b9c0a54458c2498cc7b0dc', d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleLabel)))));
+                "duet-tooltip-button-negative": this.negative,
+            } }, h("svg", { key: '864c8fa62979a5f154fba4bdb917e294981bf69d', "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '541766a3747147b8584825d78fb255907e8a118d', d: "m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z" }), h("circle", { key: 'f7a83bdf5e8532f9696c2877ab76aa6b13fd6fd2', cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { key: '52f85b09a3d9f99fdb775549b7936bab53e00686', d: "m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z" })), this.label ? (h("span", { class: "duet-tooltip-label" }, this.label)) : (h("duet-visually-hidden", null, this.accessibleLabel)))));
     }
     static get is() { return "duet-tooltip-button"; }
     static get encapsulation() { return "shadow"; }
@@ -72,6 +74,8 @@ export class DuetTooltipButton {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -90,6 +94,8 @@ export class DuetTooltipButton {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -113,10 +119,32 @@ export class DuetTooltipButton {
                     "tags": [],
                     "text": "Theme of the card. Can be one of: \"default\", \"turva\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "negative": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "negative",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "active": {
                 "type": "boolean",
                 "mutable": false,
@@ -131,6 +159,8 @@ export class DuetTooltipButton {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false
             },
@@ -148,6 +178,8 @@ export class DuetTooltipButton {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip-id",
                 "reflect": false
             }

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.js

@@ -53,11 +53,11 @@ export class DuetTooltipPopup {
         this.contentEl.focus();
     }
     render() {
-        return (h(Host, { key: '9343f1579c908ded68ce8100b7fd2b3564627607' }, h("div", { key: '5fe8a03ff3fdb177498bc623aeb8f852b81b22b2', class: {
+        return (h(Host, { key: 'a79306700e7d7aee441cc03ad36320a104b7089d' }, h("div", { key: '97992b1ebaf1998d33984716a013e69d5ba1d2d6', class: {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '99bd903d13fedaef62d858ec84716a86b68fec81', moveFocusTo: this.buttonEl }), h("div", { key: '03e42cf23c0116034b2632c49073d59674c36401', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: '4c1aa1b66580eba27c55b6dd6f2f2a2207992937' })), h("div", { key: '00572971db0f698532d313358b0061f1663886d7', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '369a932964660a82b4e30a479059dddd14bc944b', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '0aa05fa0c54d83a82b8b0ec77d72e80976dddaae', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '7d951071b8525d3d29e5949b1643067ed83f4f7c', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: 'c4c392ec261bd9f0f63a8f94acba93e697afe580' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'e3a763bc0c245f43d9bf128064be5d3140f20f3b', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: '45e71382f2b78cf134a3bc5c66523b17b9645df7', moveFocusTo: this.buttonEl }), h("div", { key: '4972fbadbaa78dcc0a89a26f084703d2f5af7722', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", { key: 'cd6485f243b063d2c155c995e5c025d94b63a339' })), h("div", { key: '9a7ee974d7bb598cb64fff09e36c15560fe5eaf6', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: 'ed588d4767c18b62132ee7869ddd0daa1c128b5c', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'c8bc5eda535b9f4990a1a4ea1d643802f81b0d28', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '6ac9b3e52c00914617f310f38ce5ec6ba2a43a82', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '280130951a6dc65a419d913c246fbbda69605e38' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'f23c9116b56c9451e2c82eef602c057f3b38835c', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }
@@ -93,6 +93,8 @@ export class DuetTooltipPopup {
                     "tags": [],
                     "text": "Theme of the tooltip."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -111,6 +113,8 @@ export class DuetTooltipPopup {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false
             },
@@ -128,6 +132,8 @@ export class DuetTooltipPopup {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip-id",
                 "reflect": false
             },
@@ -144,7 +150,9 @@ export class DuetTooltipPopup {
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "placement": {
                 "type": "string",
@@ -160,6 +168,8 @@ export class DuetTooltipPopup {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placement",
                 "reflect": false
             },
@@ -177,6 +187,8 @@ export class DuetTooltipPopup {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-close-label",
                 "reflect": false
             }

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

@@ -104,6 +104,7 @@ export class DuetTooltip {
         this.positionVertical = "0";
         this.positionHorizontal = "0";
         this.active = false;
+        this.negative = false;
     }
     /**
      * Component lifecycle events.
@@ -194,7 +195,7 @@ export class DuetTooltip {
         return (h(Host, { style: tooltipStyles }, h("duet-tooltip-button", { ref: element => (this.buttonEl = element), active: this.buttonActive, tooltipId: this.tooltipId, label: this.label, accessibleLabel: (this.accessibleInputLabel && `${this.accessibleInputLabel}, ${this.accessibleLabel}`) ||
                 (this.accessibleAboutLabel &&
                     `${this.accessibleLabel} ${this.aboutString[this.language]} ${this.accessibleAboutLabel}`) ||
-                this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme }), h("div", { style: popupContainerStyles }, h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null)))));
+                this.accessibleLabel, onClick: this.toggleOpen, theme: this.theme, negative: this.negative }), h("div", { style: popupContainerStyles }, h("duet-tooltip-popup", { ref: element => (this.popupElement = element), active: this.active, tooltipId: this.tooltipId, arrowStyles: arrowStyles, style: positionStyles, placement: this.placement, accessibleCloseLabel: this.accessibleCloseLabel, theme: this.theme }, h("slot", null)))));
     }
     static get is() { return "duet-tooltip"; }
     static get encapsulation() { return "scoped"; }
@@ -230,6 +231,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "Theme of the tooltip."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -260,6 +263,8 @@ export class DuetTooltip {
                         }],
                     "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
@@ -287,6 +292,8 @@ export class DuetTooltip {
                         }],
                     "text": "Default language strings for the accessibleLabel"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"N\u00E4yt\u00E4 lis\u00E4tietoja\",\n    en: \"Show more information\",\n    sv: \"Visa mer till\u00E4ggsuppgifter\",\n  }"
@@ -308,6 +315,8 @@ export class DuetTooltip {
                         }],
                     "text": "Adds accessible label for the info icon that is only shown for screen\nreaders. This property is always required to create an accessible interface!"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelDefault, this.language)"
@@ -326,6 +335,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "String to add after the accessibleLabel to give more context to the tooltip. Preposition \"about\" is\nadded between the strings. In Finnish, the preposition is \"aiheesta\" and in Swedish \"om\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-about-label",
                 "reflect": false
             },
@@ -346,6 +357,8 @@ export class DuetTooltip {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-input-label",
                 "reflect": false
             },
@@ -372,6 +385,8 @@ export class DuetTooltip {
                         }],
                     "text": "Default language strings for the accessibleCloseLabel"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-close-label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Sulje lis\u00E4tiedot\",\n    en: \"Close details\",\n    sv: \"St\u00E4ng till\u00E4ggsuppgifter\",\n  }"
@@ -393,6 +408,8 @@ export class DuetTooltip {
                         }],
                     "text": "Adds accessible label for the close icon that is only shown for screen\nreaders. This property is always required to create an accessibly interface!"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-close-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleCloseLabelDefault,\n    this.language\n  )"
@@ -411,6 +428,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "Label of the tooltip. If used, replaces the accessibleLabel option."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -435,6 +454,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "Adjust the responsive breakpoint where tooltip starts opening towards left."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -459,6 +480,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -477,6 +500,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "Adjust the vertical positioning of the tooltip toggle in pixels. Can be a\nnegative value as well. E.g. \"-13px\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "position-vertical",
                 "reflect": true,
                 "defaultValue": "\"0\""
@@ -495,6 +520,8 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "Adjust the horizontal positioning of the tooltip toggle in pixels. Can be a\nnegative value as well. E.g. \"-13px\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "position-horizontal",
                 "reflect": true,
                 "defaultValue": "\"0\""
@@ -513,9 +540,31 @@ export class DuetTooltip {
                     "tags": [],
                     "text": "Toggle whether the tooltip is initially visible or not. This property should\nnot be used in production in most cases."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "negative": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Negative variation for tooltip button on dark background"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "negative",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }