@duetds/components 10.0.0-alpha.9 → 10.1.0

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
   width: 100%;
 }
@@ -30,8 +30,10 @@
   display: block;
   width: 100%;
   height: 1px;
-  margin-top: 36px !important;
-  margin-bottom: 28px;
+  margin-top: var(--divider-margin, 36px) !important;
+  margin-right: var(--divider-margin, 0);
+  margin-bottom: var(--divider-margin, 28px);
+  margin-left: var(--divider-margin, 0);
   background: rgb(212, 223, 229);
 }
 .duet-divider.duet-p-0 {
@@ -46,4 +48,8 @@
 }
 .duet-divider.duet-theme-turva {
   background: rgb(222, 224, 228);
+}
+
+:host(.duet-theme-turva2) .duet-divider.duet-theme-turva {
+  background: rgb(212, 221, 226);
 }

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

@@ -6,8 +6,18 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetDivider {
     constructor() {
+        /**
+         * Theme of the divider.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Custom color, as a design token entered in camelCase or kebab-case.
+         * Example: "color-primary".
+         */
         this.color = "";
     }
     /**
@@ -22,7 +32,7 @@ export class DuetDivider {
      */
     render() {
         const background = getColorByName(this.color);
-        return (h("div", { key: 'a833c22a31c93caea94753696848ad720b5dc06d', class: {
+        return (h("div", { key: '99327b6d34622f91cf6916aecf6b544075d53573', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-m-s": this.margin === "small",
                 "duet-divider": true,
@@ -45,6 +55,7 @@ export class DuetDivider {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -65,12 +76,12 @@ export class DuetDivider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDividerMargin",
@@ -78,7 +89,7 @@ export class DuetDivider {
                     "references": {
                         "DuetDividerMargin": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-divider/duet-divider.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-divider/duet-divider.tsx",
                             "id": "src/components/duet-divider/duet-divider.tsx::DuetDividerMargin"
                         }
                     }
@@ -91,12 +102,12 @@ export class DuetDivider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -117,7 +128,6 @@ export class DuetDivider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "\"\""
             }

package/lib/collection/components/duet-editable-table/duet-editable-table.css

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 .duet-editable-table-actions-menu,

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

@@ -12,6 +12,74 @@ export class DuetEditableTable {
         this.hasHeadSlotFirst = false;
         this.hasHeadSlotLast = false;
         this.hasFootSlot = false;
+        this.language = getLanguage();
+        /**
+         * Duet-table: margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Duet-table: Style variation of the table.
+         */
+        this.variation = "striped";
+        /**
+         * Duet-table: Controls whether the table has a sticky header.
+         * Sticky headers are not compatible with breakpoint="none-scrollable".
+         */
+        this.sticky = false;
+        /**
+         * Duet-table: Adjust the distance from top of the viewport (in pixels) when the
+         * table header becomes sticky.
+         */
+        this.stickyDistance = "with-links";
+        /**
+         * Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths.
+         * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+         * Set to "none" to disable the responsive functionality.
+         * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+         * this is useful for comparison tables where it's important to maintain column and row layout.
+         */
+        this.breakpoint = "small";
+        /**
+         * Define actions for all items in a table
+         * An alternative to inline HTML table.
+         * required for Sortable tables
+         * @default undefined
+         */
+        this.actions = undefined;
+        /**
+         * Define columns for a table
+         * An alternative to inline HTML table.
+         * required for Sortable tables
+         * @default undefined
+         */
+        this.columns = undefined;
+        /**
+         * Define rows for a table
+         * An alternative to inline HTML table.
+         * required for Sortable tables
+         * @default undefined
+         */
+        this.rows = undefined;
+        /**
+         * Controls whether the table is sortable by headers
+         */
+        this.sortable = false;
+        /**
+         * Optional id that get passed to the table and used to setup ::parts
+         */
+        this.groupId = "";
+        /**
+         * Theme of the table.
+         */
+        this.theme = "";
+        /**
+         * Exposes the aria role for optimizing accessibility.
+         */
+        this.accessibleRole = undefined;
+        /**
+         * Hide a thead section visually. The content is still available to screen readers.
+         */
+        this.hideHeadVisually = false;
         this.sortableDefaultLabel = {
             fi: "Järjestä",
             en: "Click to sort",
@@ -42,20 +110,6 @@ export class DuetEditableTable {
                 this.toggleColumn(column, e);
             }
         };
-        this.language = getLanguage();
-        this.margin = "auto";
-        this.variation = "striped";
-        this.sticky = false;
-        this.stickyDistance = "with-links";
-        this.breakpoint = "small";
-        this.actions = undefined;
-        this.columns = undefined;
-        this.rows = undefined;
-        this.sortable = false;
-        this.groupId = "";
-        this.theme = "";
-        this.accessibleRole = undefined;
-        this.hideHeadVisually = false;
     }
     /**
      * Component lifecycle events.
@@ -152,7 +206,7 @@ export class DuetEditableTable {
      * Render Methods
      */
     render() {
-        return (h(Host, { key: 'a0c3202194fcc3910b50193f2a4fcb3bd7d3a5d8', class: {
+        return (h(Host, { key: '05720c6ef38164df71b02c23fb45d3d84808c2ac', class: {
                 [`duet-editable-table-${this.variation}`]: true,
                 "duet-editable-table": true,
                 [`duet-editable-table-${this.theme}`]: true,
@@ -162,7 +216,7 @@ export class DuetEditableTable {
                 "duet-editable-table-actions": !!this.actions,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("duet-table", { key: '6e53631c212527e8702f9e9c8a1b9bc2b390c830', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { key: '990481c1affeb11d6a6541a36a8f0118c961915c', role: this.accessibleRole }, h("caption", { key: 'f7b1bc44ab9fef0194485fdd6e49e11a306e365c' }, h("slot", { key: '2caecec6e5c024bdde6fa6bf72917914e2626752', name: "tcaption" })), h("thead", { key: 'c892dcd586814dcecddc46fbaf0319b04b6d9f16' }, this.hasHeadSlotFirst && (h("tr", { key: 'bfbac21dbab8afab7f34e952bd5803954be4991d' }, h("td", { key: '0a491ed1c4855d55b4dbc493a52029d657a08cc5', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '87c033e72a1bd3b87a51a4981b1b4939de66578d', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '2ab66f9b14fe592f7ee7e6293cdd56b3aed0190e' }, h("td", { key: 'edb3ae066371b6f5dc990f10f088246c0d9388d9', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: 'f57ebf07ee01c40cb47469b2fa07a706c4724dae', name: "thead-last" }))))), h("tbody", { key: '538b2de606132fcb272e5af1650cafb947fc5b2a' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: '2f1a98dd550705933222f7179bc3ff4d6554d117' }, h("tr", { key: 'ecb9667d57ea85de7efa6fa0035fbfbb16c78a9e' }, h("td", { key: 'c78b25495de0621c55f70cce5131b1d192fc5e0e', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: 'ed051b0e66c28fdbee565b33c1c394034a817a82', name: "tfoot" })))))))));
+            } }, h("duet-table", { key: '52033d6f9c4e8ca460bacee6e2b8ea93da3b9eb8', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { key: '7f0689d1e576d5f0c5324715feaf21ce21c42e97', role: this.accessibleRole }, h("caption", { key: '4e18555d5513dde6724a449d12030cc666937367' }, h("slot", { key: 'df9bcd3bde75a2669a08eb2ff0c67720750e5450', name: "tcaption" })), h("thead", { key: 'efbbe81840f6e9ae9e0cc91fee5653c43181f131' }, this.hasHeadSlotFirst && (h("tr", { key: '36d1a860bf16229740501f3b076b02125d1b3d85' }, h("td", { key: '24c22fca3cbfef4ab9e2582cf32bf967654b8b43', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: 'a02148a1d13dc8c3147b26da2f5aa84e3b359cdf', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '7b7ab392f982f5f7ce4caa5e86f7a1062412aad2' }, h("td", { key: 'cd739dea8b81f3290bb86d7e977fa83d124fdd03', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '068a9f86388a25ca00944d8e9ecfbed6cf0e2cfe', name: "thead-last" }))))), h("tbody", { key: 'f65077b6dee57c962826c459ddb044d4230753c5' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: 'eceeface4ad0a0bbb15dc188a343291cef04ec72' }, h("tr", { key: 'aff41dc81c24e09a03db4742bf6d51c17b8ce937' }, h("td", { key: '5d332218393462356c02ca19ff9c3398fbeb89a7', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: 'b438187cfa67ef90452783e9522d106ecf9ab9d3', name: "tfoot" })))))))));
     }
     static get is() { return "duet-editable-table"; }
     static get encapsulation() { return "shadow"; }
@@ -180,6 +234,7 @@ export class DuetEditableTable {
         return {
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -200,12 +255,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTableVariant",
@@ -226,12 +281,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"striped\""
             },
             "sticky": {
                 "type": "boolean",
+                "attribute": "sticky",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -246,12 +301,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sticky",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "stickyDistance": {
                 "type": "string",
+                "attribute": "sticky-distance",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTableStickyDistance",
@@ -272,12 +327,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sticky-distance",
                 "reflect": false,
                 "defaultValue": "\"with-links\""
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTableBreakpoint",
@@ -298,12 +353,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "actions": {
                 "type": "unknown",
+                "attribute": "actions",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetEditableTableActions",
@@ -311,7 +366,7 @@ export class DuetEditableTable {
                     "references": {
                         "DuetEditableTableActions": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
                             "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableActions"
                         }
                     }
@@ -331,6 +386,7 @@ export class DuetEditableTable {
             },
             "columns": {
                 "type": "unknown",
+                "attribute": "columns",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetEditableTableColumns",
@@ -338,7 +394,7 @@ export class DuetEditableTable {
                     "references": {
                         "DuetEditableTableColumns": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
                             "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableColumns"
                         }
                     }
@@ -358,6 +414,7 @@ export class DuetEditableTable {
             },
             "rows": {
                 "type": "unknown",
+                "attribute": "rows",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetEditableTableRows",
@@ -365,7 +422,7 @@ export class DuetEditableTable {
                     "references": {
                         "DuetEditableTableRows": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
                             "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetEditableTableRows"
                         }
                     }
@@ -385,6 +442,7 @@ export class DuetEditableTable {
             },
             "sortable": {
                 "type": "boolean",
+                "attribute": "sortable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -399,12 +457,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sortable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "groupId": {
                 "type": "string",
+                "attribute": "group-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -419,12 +477,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-id",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -445,12 +503,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleRole": {
                 "type": "string",
+                "attribute": "accessible-role",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -465,12 +523,12 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-role",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "hideHeadVisually": {
                 "type": "boolean",
+                "attribute": "hide-head-visually",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -485,7 +543,6 @@ export class DuetEditableTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-head-visually",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -513,7 +570,7 @@ export class DuetEditableTable {
                     "references": {
                         "DuetTableToggleEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
                             "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetTableToggleEvent"
                         }
                     }
@@ -534,7 +591,7 @@ export class DuetEditableTable {
                     "references": {
                         "DuetTableMenuEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-editable-table/duet-editable-table.tsx",
                             "id": "src/components/duet-editable-table/duet-editable-table.tsx::DuetTableMenuEvent"
                         }
                     }

package/lib/collection/components/duet-empty-state/duet-empty-state.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
   width: 100%;
   height: 100%;
@@ -29,11 +29,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   width: 100%;
   height: 100%;
   padding: 48px;
@@ -45,4 +45,9 @@
 .duet-empty-state.duet-theme-turva {
   color: rgb(23, 28, 58);
   background: rgb(245, 247, 250);
+}
+
+:host(.duet-theme-turva2) .duet-empty-state.duet-theme-turva {
+  color: rgb(23, 42, 59);
+  background: rgb(245, 246, 247);
 }

package/lib/collection/components/duet-empty-state/duet-empty-state.js

@@ -5,8 +5,17 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetEmptyState {
     constructor() {
+        /**
+         * Theme of the empty state component.
+         */
         this.theme = "";
+        /**
+         * Icon shown in the empty state component.
+         */
         this.icon = "messaging-question";
+        /**
+         * The size of the empty state message.
+         */
         this.size = "medium";
     }
     /**
@@ -20,11 +29,11 @@ export class DuetEmptyState {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '9018087936c4abe5adead5d4fe62991ea84b3dc1' }, h("div", { key: 'a0aa84fb06673f4d741891019a98fd7d4f03b174', class: {
+        return (h(Host, { key: '53de43734389ae17bb5cbbc201ea8221411a074a' }, h("div", { key: 'fea68b243812a88775a726280481b66fa1126920', class: {
                 "duet-empty-state": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-is-small": this.size === "small",
-            } }, h("duet-icon", { key: '8d9265fb0946a832c1c386b139b28b775ade9936', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '87abfa72d165e96e3ca1798ab0023e13d540d757' }, h("slot", { key: 'fc437b4821cbc146906f8c33aa06d4718a0584b2' })))));
+            } }, h("duet-icon", { key: '06f82828a03af6f565d8d9713da804c69142ed68', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '1f4ff8862530081a93e9ed5da5db580fc4a310d9' }, h("slot", { key: '0b4a5d2aac8b20b27d08efea357960190a737507' })))));
     }
     static get is() { return "duet-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -42,6 +51,7 @@ export class DuetEmptyState {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -62,12 +72,12 @@ export class DuetEmptyState {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -88,12 +98,12 @@ export class DuetEmptyState {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"messaging-question\""
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetEmptyStateSize",
@@ -101,7 +111,7 @@ export class DuetEmptyState {
                     "references": {
                         "DuetEmptyStateSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
                             "id": "src/components/duet-empty-state/duet-empty-state.tsx::DuetEmptyStateSize"
                         }
                     }
@@ -114,7 +124,6 @@ export class DuetEmptyState {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 12px !important;
   display: block;
   width: 100%;
@@ -42,8 +42,8 @@ fieldset legend {
   height: 1px !important;
   padding: 0 !important;
   overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
   border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
 }
 
 .duet-legend-wrapper {
@@ -105,6 +105,9 @@ fieldset legend {
   display: block;
   margin-top: 12px;
 }
+.duet-fieldset-help span.duet-m-0 {
+  margin-top: 0;
+}
 .duet-theme-turva .duet-fieldset-help {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(214, 28, 82);
@@ -129,6 +132,10 @@ fieldset legend {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   border: 0;
+  clip: rect(0 0 0 0);
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-legend-wrapper {
+  color: rgb(23, 42, 59);
 }