@duetds/components 6.11.1 → 7.0.0

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -357,7 +357,7 @@ export class DuetRangeStepper {
           "references": {
             "DuetRangeStepperUpdateEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx"
             }
           }
         }

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

@@ -184,7 +184,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -497,7 +497,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectItems": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         },
@@ -646,7 +646,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -666,7 +666,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }
@@ -686,7 +686,7 @@ export class DuetSelect {
           "references": {
             "DuetSelectEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-select/duet-select.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-select/duet-select.tsx"
             }
           }
         }

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

@@ -391,7 +391,7 @@ export class DuetShowMore {
           "references": {
             "DuetShowMoreToggleEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-show-more/duet-show-more.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-show-more/duet-show-more.tsx"
             }
           }
         }

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

@@ -233,7 +233,7 @@ export class DuetSlideout {
           "references": {
             "DuetSlideoutEventDetails": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-slideout/duet-slideout.tsx"
             }
           }
         }

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

@@ -49,7 +49,7 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx"
             }
           }
         },
@@ -95,7 +95,7 @@ export class DuetSpacer {
           "references": {
             "DuetSpacerBreakpoint": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spacer/duet-spacer.tsx"
             }
           }
         },

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

@@ -95,7 +95,7 @@ export class DuetSpinner {
           "references": {
             "DuetSpinnerSize": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-spinner/duet-spinner.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-spinner/duet-spinner.tsx"
             }
           }
         },

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

@@ -193,7 +193,7 @@ export class DuetStep {
           "references": {
             "DuetStepState": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx"
             }
           }
         },
@@ -270,7 +270,7 @@ export class DuetStep {
           "references": {
             "DuetStepClickEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-step/duet-step.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-step/duet-step.tsx"
             }
           }
         }

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

@@ -223,7 +223,7 @@ export class DuetStepper {
           "references": {
             "DuetStepChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-stepper/duet-stepper.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-stepper/duet-stepper.tsx"
             }
           }
         }

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

@@ -309,7 +309,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabVariation": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         },
@@ -545,7 +545,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -565,7 +565,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -585,7 +585,7 @@ export class DuetTabGroup {
           "references": {
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -606,7 +606,7 @@ export class DuetTabGroup {
             },
             "DuetTabGroupEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           },
           "return": "Promise<void>"

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

@@ -81,6 +81,9 @@ duet-table .duet-table-action-row td:last-child {
   padding-right: 20px !important;
   white-space: nowrap;
 }
+duet-table span.duet-table-cell-heading {
+  display: none;
+}
 
 .duet-table-flattened table,
 .duet-table-flattened thead,
@@ -107,6 +110,16 @@ duet-table .duet-table-action-row td:last-child {
 .duet-table-flattened td:not(:last-child) {
   margin-bottom: 16px !important;
 }
+.duet-table-flattened td span.duet-table-cell-heading {
+  margin-bottom: 4px !important;
+  display: block;
+  font-size: 1rem;
+  font-weight: 600;
+  color: rgb(0, 41, 77);
+}
+.duet-table-flattened.duet-theme-turva td span.duet-table-cell-heading {
+  color: rgb(23, 28, 58);
+}
 .duet-table-flattened tbody td,
 .duet-table-flattened tbody th,
 .duet-table-flattened tfoot td {
@@ -119,17 +132,6 @@ duet-table .duet-table-action-row td:last-child {
   color: rgb(101, 119, 135);
   text-align: left;
 }
-.duet-table-flattened td[data-heading]::before {
-  margin-bottom: 4px !important;
-  display: block;
-  font-size: 1rem;
-  font-weight: 600;
-  color: rgb(0, 41, 77);
-  content: attr(data-heading);
-}
-.duet-table-flattened.duet-theme-turva td[data-heading]::before {
-  color: rgb(23, 28, 58);
-}
 
 .duet-table-sticky thead th {
   position: sticky;

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

@@ -95,7 +95,16 @@ export class DuetTable {
     rowElements.forEach(tr => {
       tr.querySelectorAll("td").forEach((td, i) => {
         if (headings[i]) {
-          td.dataset.heading = headings[i];
+          const previousSpan = td.querySelector(".duet-table-cell-heading");
+          if (!previousSpan || previousSpan.textContent !== headings[i]) {
+            previousSpan === null || previousSpan === void 0 ? void 0 : previousSpan.remove();
+            const span = document.createElement("span");
+            span.textContent = headings[i];
+            span.classList.add("duet-table-cell-heading");
+            span.setAttribute("aria-hidden", "true");
+            span.inert = true;
+            td.prepend(span);
+          }
         }
       });
     });

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

@@ -754,7 +754,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }
@@ -774,7 +774,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }
@@ -794,7 +794,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }
@@ -814,7 +814,7 @@ export class DuetTextarea {
           "references": {
             "DuetTextareaEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-textarea/duet-textarea.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-textarea/duet-textarea.tsx"
             }
           }
         }

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

@@ -432,7 +432,7 @@ export class DuetToggle {
           "references": {
             "DuetToggleChangeEvent": {
               "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-toggle/duet-toggle.tsx"
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-toggle/duet-toggle.tsx"
             }
           }
         }

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

@@ -0,0 +1,87 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.duet-tooltip-button {
+  z-index: 100;
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  min-width: 48px;
+  height: 48px;
+  padding: 0 !important;
+  margin-right: -12px;
+  line-height: normal !important;
+  color: rgb(0, 119, 179);
+  white-space: nowrap;
+  cursor: pointer;
+  background: transparent !important;
+  border-radius: 4px;
+}
+.duet-tooltip-button.duet-theme-turva {
+  color: rgb(198, 12, 48);
+}
+.duet-tooltip-button:hover {
+  color: rgb(0, 77, 128);
+}
+.duet-tooltip-button:hover.duet-theme-turva {
+  color: rgb(148, 9, 37);
+}
+.duet-tooltip-button:focus {
+  background: transparent !important;
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-tooltip-button:focus {
+  background: transparent !important;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179) !important;
+}
+:host(.user-is-tabbing) .duet-tooltip-button.duet-theme-turva:focus {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58) !important;
+}
+.duet-tooltip-button svg {
+  width: 20px;
+  height: 20px;
+  pointer-events: none;
+}
+
+.duet-tooltip-button-has-label {
+  margin-right: 0;
+}
+
+.duet-tooltip-label {
+  position: relative;
+  z-index: 100;
+  display: inline-block;
+  max-width: calc(100% - 30px);
+  margin-left: 12px !important;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25;
+  text-align: left;
+  white-space: normal;
+  vertical-align: top;
+}
+.duet-theme-turva .duet-tooltip-label {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}

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

@@ -0,0 +1,175 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+/**
+ * @internal
+ * This component is solely for internal use by duet-tooltip.
+ */
+export class DuetTooltipButton {
+  constructor() {
+    this.label = "";
+    this.accessibleLabel = undefined;
+    this.theme = "";
+    this.active = undefined;
+    this.tooltipId = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  async setFocus(options) {
+    if (this.buttonElement) {
+      this.buttonElement.focus(options);
+    }
+  }
+  /**
+   * render() function.
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null, h("button", { 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", { "aria-hidden": "true", role: "img", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { 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", { cx: "11.625", cy: "7.125", r: "1.125" }), h("path", { 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"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-tooltip-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-tooltip-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "accessible-label",
+        "reflect": false
+      },
+      "theme": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetTheme",
+          "resolved": "\"\" | \"default\" | \"turva\"",
+          "references": {
+            "DuetTheme": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the card. Can be one of: \"default\", \"turva\"."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "active",
+        "reflect": false
+      },
+      "tooltipId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tooltip-id",
+        "reflect": false
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}

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

@@ -25,6 +25,7 @@
 }
 
 .duet-tooltip {
+  position: relative;
   width: 282px;
   min-height: 48px;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -58,6 +59,7 @@
 }
 .duet-tooltip .arrow-container {
   position: relative;
+  left: 4px;
   width: 100%;
   height: 100%;
   pointer-events: none;

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

@@ -3,17 +3,15 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
+import { FocusGuard } from "../../utils/focus-utils";
 /**
  * @internal
  * This component is solely for internal use by duet-tooltip.
  */
 export class DuetTooltipPopup {
   constructor() {
-    this.handleCloseClick = (evt) => {
-      this.tooltipPopupClosed.emit({
-        originalEvent: evt,
-        component: "duet-tooltip-popup",
-      });
+    this.handleCloseClick = () => {
+      this.tooltipPopupClosed.emit();
     };
     this.theme = "";
     this.active = undefined;
@@ -42,10 +40,10 @@ export class DuetTooltipPopup {
         "duet-tooltip": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-tooltip-active": this.active === true,
-      }, onClick: e => e.stopPropagation() }, h("div", { ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", null)), h("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { class: { "arrow-container": true, [this.placement]: true } })), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)))));
+      } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: 0, id: this.tooltipId }, h("slot", null)), h("div", { ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { class: { "arrow-container": true, [this.placement]: true } })), h("button", { type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", null, this.accessibleCloseLabel)), h(FocusGuard, { moveFocusTo: this.contentEl }))));
   }
   static get is() { return "duet-tooltip-popup"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["duet-tooltip-popup.scss"]
@@ -178,12 +176,11 @@ export class DuetTooltipPopup {
           "text": "Component event handling."
         },
         "complexType": {
-          "original": "DuetTooltipPopupEvent",
-          "resolved": "{ originalEvent?: Event; component: \"duet-tooltip-popup\"; }",
+          "original": "CustomEvent",
+          "resolved": "CustomEvent<any>",
           "references": {
-            "DuetTooltipPopupEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tooltip/duet-tooltip-popup.tsx"
+            "CustomEvent": {
+              "location": "global"
             }
           }
         }