@duetds/components 9.2.2 → 9.2.3

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

@@ -119,6 +119,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Theme of the card."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -143,6 +145,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Controls the margin of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -161,6 +165,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Indicates the id of a related component\u2019s visually focused element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-active-descendant",
                 "reflect": false
             },
@@ -178,6 +184,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Use this prop to add an aria-controls attribute. Use the attribute to indicate\nthe id of a component controlled by this component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-controls",
                 "reflect": false
             },
@@ -195,6 +203,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Indicates the id of a component owned by the toggle."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-owns",
                 "reflect": false
             },
@@ -212,6 +222,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Indicates the id of a component that describes the toggle."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-described-by",
                 "reflect": false
             },
@@ -229,6 +241,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Aria Details of the component"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -247,6 +261,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "String of id's that indicate alternative labels elements"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -265,6 +281,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Aria description the button"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -283,6 +301,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Label for the toggle."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"label\""
@@ -301,6 +321,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Color of the label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-color",
                 "reflect": false
             },
@@ -324,6 +346,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Font weight of the label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-weight",
                 "reflect": false
             },
@@ -341,6 +365,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Position of the label"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-position",
                 "reflect": false,
                 "defaultValue": "\"top\""
@@ -359,6 +385,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Set whether the input is required or not. Please note that this is necessary for\naccessible inputs when the user is required to fill them. When using this property\nyou need to also set \u201Cnovalidate\u201D attribute to your form element to prevent\nbrowser from displaying its own validation errors."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -377,6 +405,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Makes the input component disabled. This prevents users from being able to\ninteract with the input, and conveys its inactive state to assistive technologies."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -395,6 +425,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Check state of the checkbox."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
@@ -413,6 +445,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "The value of the checkbox does not mean if it's checked or not, use the checked\nproperty for that."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true
             },
@@ -430,6 +464,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Adds a unique identifier for the checkbox."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": false
             },
@@ -447,6 +483,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Name of the checkbox."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -464,6 +502,8 @@ export class DuetToggle {
                     "tags": [],
                     "text": "Defines a specific role attribute for the input."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "role",
                 "reflect": false
             }
@@ -486,7 +526,7 @@ export class DuetToggle {
                     "references": {
                         "DuetToggleChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-toggle/duet-toggle.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-toggle/duet-toggle.tsx",
                             "id": "src/components/duet-toggle/duet-toggle.tsx::DuetToggleChangeEvent"
                         }
                     }

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: 'f755504caccff50555f478c9de6cf384e624cb3b' }, h("nav", { key: '1e261ae52e6c364e3ed7f3bb524f37da5a4f276e', class: {
+        return (h(Host, { key: '91c10cd51874090bfa321e80557b0af866158ec1' }, h("nav", { key: '20468b9364a8b4ab5c294b720e18b98e435479d6', class: {
                 "duet-toolbar": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '50bfcdb065a530ced06715d880523406eaa58218', class: "container" }, h("div", { key: 'a1cf4a216b6305cd40bf86c17344b756d297b7a4', class: "list", role: "list" }, h("slot", { key: 'a0ca3b6d619470916a39fc71bc8fa9e9dbd931fe', name: "left" })), h("div", { key: '9b6649d061d2815641f8270d02f92fbad4680c4e', class: "list", role: "list" }, h("slot", { key: '2925618229a35ae1c92c2cf712449dde5e43c73a', name: "right" }))))));
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'f253ec42bdc5c5c5ae9f556e31c25a0aa3406438', class: "container" }, h("div", { key: 'e71e6f8fc61221463fff4296b6543176353437a1', class: "list", role: "list" }, h("slot", { key: '9f3a7862ccb69db13aee70c9bc89825c0a0d46a2', name: "left" })), h("div", { key: 'debbe197eae3b509a885db277ccab37885730107', class: "list", role: "list" }, h("slot", { key: 'cb71021ba0bf0a12fd9fd635cec16568ac25180a', name: "right" }))))));
     }
     static get is() { return "duet-toolbar"; }
     static get encapsulation() { return "shadow"; }
@@ -71,6 +71,8 @@ export class DuetToolbar {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -89,6 +91,8 @@ export class DuetToolbar {
                     "tags": [],
                     "text": "Variation. Secondary is not supported for Turva theme. Negative is deprecated."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
@@ -107,6 +111,8 @@ export class DuetToolbar {
                     "tags": [],
                     "text": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             }

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: 'd43fd569731d6dc4a0bb5244105d0dd14ed7bc88', role: "listitem" }, h("div", { key: '5ca1536d28a1eac21dcbe812503fffbf872c86a2', class: {
+        return (h(Host, { key: 'b267de99df676578b5c5879bfc4b33e63f53eb40', role: "listitem" }, h("div", { key: '0f4a971d359bb6b05c6a0de70bd263b48ae42953', class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,
                 [variation]: true,
-            } }, h("button", { key: '2efdeb725e1699d458e1fe38973700bce864b002', 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: '7fe26d57c4e2df698aaf1677171e14999adcee31', 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: 'b717e79696bdb53c18e48144620f6dd705512c92', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '702072ed8713a9be42822e7965844d7ac6e5119e', class: "label" }, h("slot", { key: 'e821052ac4c40880b7ed145ea270efc790b33156', name: "label" }), h("duet-icon", { key: 'ba6322e41b4d25e9750209b9a65fb284e517e8ce', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '702e4f974c7fbc1305c202662b5df4a3b921be78', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: 'a1390f889f23f75052fd5c78915e12ee9e3c8930', theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("span", { key: '7b7b8ad3931cc78a60ae96ebafe19fed542db012', class: "label" }, h("slot", { key: 'fb9211a981fbbada64fd2b86c3583af226ebb626', name: "label" }), h("duet-icon", { key: 'aaf1a322508dee44ff0e60d5bfc68381a568a922', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: 'd68a0e8ff628d5739efbe9cf3233d94cfa43e26f', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: '71cc065f8c834a36224d881edee359b7c8c1c657' })))));
+            } }, h("slot", { key: '2d9b51cf80525f43ca11cc5e4b91dd6308251ad8' })))));
     }
     static get is() { return "duet-toolbar-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -97,6 +97,8 @@ export class DuetToolbarDropdown {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -115,6 +117,8 @@ export class DuetToolbarDropdown {
                     "tags": [],
                     "text": "Variation."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
@@ -133,6 +137,8 @@ export class DuetToolbarDropdown {
                     "tags": [],
                     "text": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -150,6 +156,8 @@ export class DuetToolbarDropdown {
                     "tags": [],
                     "text": "Active"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
@@ -168,6 +176,8 @@ export class DuetToolbarDropdown {
                     "tags": [],
                     "text": "Open"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
@@ -186,6 +196,8 @@ export class DuetToolbarDropdown {
                     "tags": [],
                     "text": "Icon"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"

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: 'ccfbeb7db46523d362f93d465201f2822d4663a7' }, h("a", { key: '9626df46ad17d4e77ea6f67eacdfcea61f7e2737', class: {
+        return (h(Host, { key: 'ca2c386337ef8052184214a47865bc93b192efea' }, h("a", { key: '2601354c27b7ff3858e561585176e040d2bfce25', 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: 'f7669f90d9803ec830e0173132ee626a61f8f955', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: '9a31e23862c3bee1f980f3c4d14905dbe360020b', class: "label" }, h("slot", { key: '63da45ba2b705145b779d6aab4d2be28b68c509b' })), this.active && (h("duet-icon", { key: '17822abef02ddca26ee57961e735957f17691655', 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: '0f941114682ef7527bf69e9e5a42ef0d095a1b2b', name: this.icon, size: "x-small", margin: "none" }), h("span", { key: 'f5eac01e244e0cf0bb48229c58076580fea8e5d6', class: "label" }, h("slot", { key: 'afc1ab27f5e67371e52fa2e4da46b453b24ab75c' })), this.active && (h("duet-icon", { key: '041c528108a13b672788bbc254d7d6c0ee362008', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }
@@ -65,6 +65,8 @@ export class DuetToolbarDropdownLink {
                     "tags": [],
                     "text": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -88,6 +90,8 @@ export class DuetToolbarDropdownLink {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -106,6 +110,8 @@ export class DuetToolbarDropdownLink {
                     "tags": [],
                     "text": "Language of the link. Use this only for language selection links."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "target-language",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -124,6 +130,8 @@ export class DuetToolbarDropdownLink {
                     "tags": [],
                     "text": "Href"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
@@ -142,6 +150,8 @@ export class DuetToolbarDropdownLink {
                     "tags": [],
                     "text": "Icon"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
@@ -160,6 +170,8 @@ export class DuetToolbarDropdownLink {
                     "tags": [],
                     "text": "Active"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"

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: 'afa849ce4f6ec1c066ee4462c84bf51146a8b1b6', role: "listitem" }, h(TagName, { key: '0af801b2ff5b432b0f41f72ab367932046671b7c', 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: 'b90f4fcad2b46e4cb1f39f204595ab30eda04274', class: "duet-toolbar-icon" }, h("duet-icon", { key: '76855f764087b7505ef5eea360be023d894b2d51', size: "x-small", name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" }), this.badge && h("div", { key: '291a2974a4972a973bbc6f989265a6c0779a1ff3', class: "duet-toolbar-badge" }))), h("slot", { key: '9899ea590965a155c9890dc1d68fe0e8bf874c15' }), (this.trailingIcon || (this.url && this.external)) && (h("div", { key: 'dc913307616babe431177341d31a5d0262d7b438', class: "duet-toolbar-icon" }, h("duet-icon", { key: '643938497cfc43a1f85587993a2b11cb54b967e1', 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: '795d10ab43384c774440487bdef889a0d3b59814', 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: 'c53a9b05b8bf38d7f393863392ec9ffa5eeea0d6', role: "listitem" }, h("a", { key: '633ff7b9e9e322eb33402d00a3da6ae9dca2a04c', 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: '4de0041a0235dae5494904de06785b214c6a1edf', size: "x-small", name: this.icon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", { key: '15fe5f1f6f641fa2c233aca8c0dd1802b22a5143' }))));
     }
     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
             }