@watermarkinsights/ripple 5.16.0-alpha.0 → 5.16.0-alpha.10

package/dist/collection/components/wm-textarea/wm-textarea.js

@@ -1,21 +1,17 @@
 import { h } from "@stencil/core";
-import { handleDisabledAttribute, toBool } from "../../global/functions";
+import { handleDisabledAttribute, toBool, showTooltip, hideTooltip } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class Textarea {
     constructor() {
-        this.previousValue = "";
-        this.label = undefined;
         this.labelPosition = "top";
         this.value = "";
         this.disabled = false;
-        this.info = undefined;
         this.placeholder = "";
         this.requiredField = false;
-        this.errorMessage = undefined;
-        this.characterLimit = undefined;
         this.inputWidth = "";
         this.inputHeight = "";
         this.announcement = "";
+        this.previousValue = "";
     }
     get charCount() {
         return this.value.length;
@@ -58,6 +54,12 @@ export class Textarea {
         }
         this.previousValue = this.value;
     }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
     announce(message) {
         if (this.liveRegionEl.textContent === message) {
             message += "\u00A0";
@@ -65,7 +67,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: '51737864a8a2007cd82214adfb9917318eac76ae', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '5dd0a741e86fd626019c3ccfb25cb2741c405a65', class: "label-wrapper" }, h("label", { key: 'a3843d5240a623a31725bb94d73a80616a6c7f70', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '5d9e488db01668a794bdaa1c0b8b2d29c94874b4', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: 'cfca0f1f18ddc808dd90d300d35de54918aaea80', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '3d91905f9dd67127c4f84ecc4d5bc8eb011a12e0', class: "inner-wrapper" }, h("div", { key: '603c2ed498216be12a757d1725c96d25a726f1fa', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: 'cdeaa4d4dd779682a7bcc9118119ce120d82489e', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '32e14b8d7bc414f4d75d6dbce66805c6c8658574', id: "info", class: "info" }, this.info)), h("div", { key: '6bb6d301754a4305704eab7db1285e60d6ebae91', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '9c01d2c255d163bc461cd8cffdf8530831b6858e', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: '5bd7daf935fa75bec3fccc000c4674b23da1c043', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '52f18f7ef95fb4505f19ec57b3328db9706af750', class: "label-wrapper" }, h("label", { key: '510bf29970364b1caacfd1eef164a2f766217df2', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '47024a21e0940c6c40dde2b131c337636fe1bbdf', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("span", { key: 'dff37fb5a589b44b4eb249b0b3a572e9944a15cb', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '8dda587667514bbf0db310491cf58d2b3ea00fea', class: "inner-wrapper" }, h("div", { key: '8782435cdc9150197ac29a09fd6b3d6b95413c59', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '3d7a017570a79669f03914e00be725a633717c66', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '7cfb20e30f1413096a861089e932aabc46be0593', id: "info", class: "info" }, this.info)), h("div", { key: '2f450eb52e3bf5e805e125f19e59766c4d45a75c', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '024947b6fa1ef096bb09c1c9183984e647ed5432', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }
@@ -83,6 +85,7 @@ export class Textarea {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -95,11 +98,13 @@ export class Textarea {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "labelPosition": {
                 "type": "string",
+                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"top\" | \"left\" | \"none\"",
@@ -112,12 +117,14 @@ export class Textarea {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"top\""
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -130,12 +137,14 @@ export class Textarea {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -148,12 +157,14 @@ export class Textarea {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "info": {
                 "type": "string",
+                "attribute": "info",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -166,11 +177,13 @@ export class Textarea {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "info",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -183,12 +196,14 @@ export class Textarea {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "placeholder",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "requiredField": {
                 "type": "boolean",
+                "attribute": "required-field",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -201,12 +216,14 @@ export class Textarea {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "required-field",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "errorMessage": {
                 "type": "string",
+                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -219,11 +236,13 @@ export class Textarea {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-message",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "characterLimit": {
                 "type": "number",
+                "attribute": "character-limit",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -236,11 +255,13 @@ export class Textarea {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "character-limit",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "inputWidth": {
                 "type": "string",
+                "attribute": "input-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -253,12 +274,14 @@ export class Textarea {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "input-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "inputHeight": {
                 "type": "string",
+                "attribute": "input-height",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -271,7 +294,8 @@ export class Textarea {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "input-height",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             }

package/dist/collection/components/wm-timepicker/wm-timepicker.css

@@ -847,37 +847,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }
@@ -921,21 +890,28 @@
   flex-direction: column;
   font-size: 0.875rem;
 }
+:host .wrapper .label-wrapper {
+  display: flex;
+}
 :host .wrapper .label {
-  display: block;
+  display: inline-block;
   line-height: normal;
   font-weight: 600;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin-bottom: 0.25rem;
 }
-:host .wrapper .label .required {
+:host .wrapper .required {
+  display: inline-block;
   color: var(--wmcolor-text-required);
 }
 :host .wrapper.label-left {
   flex-direction: row;
 }
 :host .wrapper.label-left .label-wrapper {
-  line-height: 2.5rem;
+  height: fit-content;
+  margin-right: 0.75rem;
 }
 :host .wrapper.label-left .label-wrapper .label {
   display: flex;
@@ -943,7 +919,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 :host .wrapper.label-none label {
   position: absolute !important;
@@ -957,11 +932,11 @@
   white-space: nowrap !important;
   margin: -1px !important;
 }
-:host .wrapper.invalid .label {
+:host .wrapper.invalid .label-wrapper {
   color: var(--wmcolor-text-error);
   position: relative;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   content: "";
   display: block;
   background-color: var(--icon-fill, currentColor);
@@ -970,14 +945,14 @@
   -webkit-mask-size: 100%;
   mask-size: 100%;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   display: inline-block;
   margin-inline-start: 0.25rem;
-  vertical-align: middle;
+  align-self: center;
   flex-shrink: 0;
   transform: translateY(-1px);
 }

package/dist/collection/components/wm-timepicker/wm-timepicker.js

@@ -1,7 +1,13 @@
 import { h, Host } from "@stencil/core";
-import { intl, shouldOpenUp, toBool, handleDisabledAttribute } from "../../global/functions";
+import { intl, shouldOpenUp, toBool, handleDisabledAttribute, showTooltip, hideTooltip } from "../../global/functions";
 export class Timepicker {
     constructor() {
+        this.disabled = false;
+        this.value = "";
+        this.label = "";
+        this.labelPosition = "top";
+        this.requiredField = false;
+        this.isExpanded = false;
         this.twelveHrValid = /^(0?[0-9]|1[0-2])\s*:?\s*([0-5][0-9])?\s?(a|p|am|pm)?$/i;
         this.twentyFourHrValid = /^(0?[0-9]|1[0-9]|2[0-4])\s*:?\s*([0-5][0-9])?$/;
         this.timeFormat = "hh:mm";
@@ -12,14 +18,6 @@ export class Timepicker {
             defaultMessage: "Select time",
             description: "Button text for screen readers.",
         });
-        this.disabled = false;
-        this.value = "";
-        this.errorMessage = undefined;
-        this.label = "";
-        this.labelPosition = "top";
-        this.requiredField = false;
-        this.preselected = undefined;
-        this.isExpanded = false;
     }
     get selectedOption() {
         return this.optionsList.filter((option) => option.tabIndex === 0)[0];
@@ -168,6 +166,12 @@ export class Timepicker {
         this.wmTimepickerInputBlurred.emit();
         this.tpWrapper.classList.remove("focus");
     }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", ev.target, this.label);
+        }
+    }
     generateTimeIntervals() {
         let timeIntervals = [];
         let startTime = 0;
@@ -275,13 +279,13 @@ export class Timepicker {
         return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (h(Host, { key: '75c58eb3889b4608731626a626c3e258d0ec847f', onBlur: () => this.close(false) }, h("div", { key: 'ca41df7312aee146f9bba55a014db11a4bc7bdca', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '9b23e549863796691cd801d1f7dc4aa2647cd500', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '0a2962b5f6012d7e574a7514c754fd50c6d799a3', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (h("span", { key: '4dd27ce330c1576bcd95c414686504e843b7f383', class: "required", "aria-hidden": "true" }, "*"))))), h("div", { key: 'f25c696ee97660f53339083b8fd8350c6fef3709' }, h("div", { key: '09a6c2e7d95170af417bfb9ec25ba8a57532d666', class: "inner-wrapper" }, h("input", { key: 'c5ab576ef84f9909530fd0ab04f634019ce8ac9a', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: '9669a42ba3897487e8c5ba2096ccbd69431ed6d0', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
+        return (h(Host, { key: 'fd0acc447628174ea8551c1ea7cafdc8b0b6ec74', onBlur: () => this.close(false) }, h("div", { key: 'a8c7c453558df7a33fc42d71eff78894a36306d6', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '9f259605e513d12e32716f12b4d5dee9fb97d10a', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '1b1b596a992a66f6738cab61086c9d7298934e8c', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '4fc12427a1b3c62b9a6e7cd53c83cec311b46f1e', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '6f299347f62dd5299f0223bbdee82fc55dafe06a' }, h("div", { key: 'd78e3b28b110714558d94ba03bedc4d63e8a41d7', class: "inner-wrapper" }, h("input", { key: '1af64c4c0ab7bd983d3e926ad1ea146bed0dadea', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: 'a99cd67d7bfa17c4ba512b73097b5987b8d5d4f8', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
             // This addresses an issue in Safari, where clicking buttons does not focus them
             // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
             onMouseDown: (ev) => {
                 ev.preventDefault();
                 this.buttonEl.focus();
-            } }, h("span", { key: '1895dd0bb547ff6538c7c9c71ef908789cf0a063', class: "svg-icon svg-time" })), h("ul", { key: 'ff29ad47af475536ee5ff28b331d119a1a62d34f', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '1bfc84ec0632852c000dc94ef8e63ec55689174e', id: "error", class: "error" }, this.errorMessage)), h("div", { key: 'd7c1b581e3441cadeb547f29399aee7412011670', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { key: 'd50582487d9860716e0bdc67b99ac75b346d62aa', class: "svg-icon svg-time" })), h("ul", { key: '63a9ed95dc1c238d12d84150c406e5ff877d71b3', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '25ea586bea9676a7d18c2fdeada1dcaf0a224471', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '4985d6ee5df49f687eaeeb06a1b5a0c8b14b7119', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get is() { return "wm-timepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -300,6 +304,7 @@ export class Timepicker {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -312,12 +317,14 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -330,12 +337,14 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "errorMessage": {
                 "type": "string",
+                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -348,11 +357,13 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-message",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -365,12 +376,14 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "labelPosition": {
                 "type": "string",
+                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"top\" | \"left\" | \"none\"",
@@ -383,12 +396,14 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"top\""
             },
             "requiredField": {
                 "type": "boolean",
+                "attribute": "required-field",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -401,12 +416,14 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "required-field",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "preselected": {
                 "type": "string",
+                "attribute": "preselected",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -419,7 +436,8 @@ export class Timepicker {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "preselected",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

package/dist/collection/components/wm-toggletip/wm-toggletip.js

@@ -2,6 +2,10 @@ import { Host, h } from "@stencil/core";
 import { showTooltip, hideTooltip, shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl, debounce, findAllScrollableParents, getCumulativeScrollOffset, } from "../../global/functions";
 export class Toggletip {
     constructor() {
+        this.tooltipPosition = "bottom-right";
+        this.targetSize = "small";
+        this.toggletipType = "info";
+        this.isHidden = true; // initially toggletip is hidden so it can be measured and replaced before it is displayed. It is also hidden while the user is scrolling in browsers that don't fully implement the popover API (as of this day FF and Safari don't know about anchor())
         this.scrollableParents = [];
         this.tooltipInfoMessage = intl.formatMessage({
             id: "toggletip.moreInformation",
@@ -20,12 +24,6 @@ export class Toggletip {
         this.debouncedResize = debounce(() => {
             this.scrollableParents = findAllScrollableParents(this.el);
         }, 200);
-        this.label = undefined;
-        this.tooltip = undefined;
-        this.tooltipPosition = "bottom-right";
-        this.targetSize = "small";
-        this.toggletipType = "info";
-        this.isHidden = true;
     }
     get isOpen() {
         return this.toggletipEl.matches(":popover-open");
@@ -221,9 +219,9 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: '5d8d7bd25f7ed0e9626944a09f18c7a534b35181', class: `size-${this.targetSize}` }, h("button", { key: '414f8f09f3a1d20b9e8641cab03632ccd91f8f71', class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+        return (h(Host, { key: '653e8a3a21b1a63ebae98f4813393ae2c3020aa0', class: `size-${this.targetSize}` }, h("button", { key: '15a4de61c15d32091643bbabaf438f5116e5bea9', class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: '8d032e897502ded7631b494314f201d35dd3acb3', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: '4cc15a0db02fb19faa8d8ac7e9253c29e74e7ac5', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: '96e4c18106ed35a41a0fc4ff2ea2b239cac541e1', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip" }, this.tooltip), h("div", { key: 'd6cf716efcd55983e0b86854eac118a9bbb01d76', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }
@@ -242,6 +240,7 @@ export class Toggletip {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -254,11 +253,13 @@ export class Toggletip {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -271,11 +272,13 @@ export class Toggletip {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "tooltip",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "tooltipPosition": {
                 "type": "string",
+                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPlacement",
@@ -294,12 +297,14 @@ export class Toggletip {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "tooltip-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"bottom-right\""
             },
             "targetSize": {
                 "type": "string",
+                "attribute": "target-size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"small\" | \"large\"",
@@ -312,12 +317,14 @@ export class Toggletip {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "target-size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "toggletipType": {
                 "type": "string",
+                "attribute": "toggletip-type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"info\" | \"ai\"",
@@ -330,7 +337,8 @@ export class Toggletip {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "toggletip-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"info\""
             }