@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

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: '64511b39c68988b15d35f49ae4d6416b0937d6f2', 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",
@@ -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: '3d5bf5011822ef87cfa0e0286c8cf91e8496bae2', 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: 'ec986291dd0b4a8210449af3dd0f233e7ea5951b', 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: '1ae7b6227d4fb16d38ca46fcd3c164ba625cf18d', role: this.accessibleRole }, h("caption", { key: 'a78c14e03fad988f4b985eecb07674d90be9dafc' }, h("slot", { key: '3ab4a9d8f4f7a6818c4051e811d222bb31731fca', name: "tcaption" })), h("thead", { key: 'aca3450e23a6981df8a9bfefc6d4942914900138' }, this.hasHeadSlotFirst && (h("tr", { key: '95caf52351b79194f468e5f1b537e27514e3558e' }, h("td", { key: '35bea84e7baa12021a122bf6851d3a6b0a0105b3', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '6969c828d8f6717d2bc16daa2bb4d34225aacdcc', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '64dc523c0369648863e076499b0ebb18f8f56ff4' }, h("td", { key: '64816f523901cd17e0f4481cb86e1596a0a079c3', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '6d69e2ee753e7dce6d3f47a7e7268cc5c0c10e12', name: "thead-last" }))))), h("tbody", { key: 'f5a526b833834a5d3601a479a9be3fd7de341d80' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: '87bb8cfcad29c6033f95205666c0e09ae18f946b' }, h("tr", { key: '373cf5a124095988d9917422fd6c63da0bdd11b7' }, h("td", { key: 'ac6478d51c42552576d8e4f1708faebbec2d04fb', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: 'b1257579708c35c4be3cb8148c63fd9d221ac8b3', 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",
@@ -331,6 +386,7 @@ export class DuetEditableTable {
             },
             "columns": {
                 "type": "unknown",
+                "attribute": "columns",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetEditableTableColumns",
@@ -358,6 +414,7 @@ export class DuetEditableTable {
             },
             "rows": {
                 "type": "unknown",
+                "attribute": "rows",
                 "mutable": true,
                 "complexType": {
                     "original": "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"
             }

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: '993a6ef0e6325e25bb547113748f9ddb5a564561' }, h("div", { key: '8a8d7bf1d9d47b9302566e1106f712a77049e1ec', 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: 'b4fc41715d1bba5aa632b7d85916997d4ec33a76', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '2d67fc5a87eab015934a6255187312023b906128' }, h("slot", { key: '66b103aa15ead0d1efeb6967798443edfc5c1d42' })))));
+            } }, 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",
@@ -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);
 }