@watermarkinsights/ripple 5.3.0-2 → 5.3.0-3

package/dist/cjs/wm-datepicker.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
-const functions = require('./functions-be4156cf.js');
+const index = require('./index-788526f5.js');
+const functions = require('./functions-05e7ad5a.js');
 
-const datepickerCss = ":host{--wmcolor-datepicker-background:var(--wmcolor-background);--wmcolor-datepicker-day-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-day-background-selected:var(--wmcolor-interactive);--wmcolor-datepicker-day-text-outside:var(--wmcolor-interactive-disabled);--wmcolor-datepicker-day-text-selected:var(--wmcolor-interactive-text-selected);--wmcolor-datepicker-day-text:var(--wmcolor-text);--wmcolor-datepicker-input-background-disabled:var(--wmcolor-input-background-disabled);--wmcolor-datepicker-input-background:var(--wmcolor-input-background);--wmcolor-datepicker-input-border:var(--wmcolor-input-border);--wmcolor-datepicker-input-text-disabled:var(--wmcolor-input-text-disabled);--wmcolor-datepicker-input-text:var(--wmcolor-input-text);--wmcolor-datepicker-month-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-month-background-selected:var(--wmcolor-interactive);--wmcolor-datepicker-month-background:var(--wmcolor-text);--wmcolor-datepicker-month-border:var(--wmcolor-border-light);--wmcolor-datepicker-month-text-selected:var(--wmcolor-text-ondark);--wmcolor-datepicker-month-text:var(--wmcolor-interactive);--wmcolor-datepicker-navigation-background-hover:var(--wmcolor-button-background-navigational-hover);--wmcolor-datepicker-navigation-background:var(--wmcolor-button-background-navigational);--wmcolor-datepicker-navigation-text:var(--wmcolor-button-icon-navigational);--wmcolor-datepicker-selector-background:var(--wmcolor-button-background-secondary);--wmcolor-datepicker-selector-border:var(--wmcolor-button-border-secondary);--wmcolor-datepicker-selector-text:var(--wmcolor-button-text-secondary);--wmcolor-datepicker-toggle-background-disabled:var(--wmcolor-input-background-disabled);--wmcolor-datepicker-toggle-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-toggle-background:var(--wmcolor-input-background);--wmcolor-datepicker-toggle-icon-disabled:var(--wmcolor-interactive-disabled);--wmcolor-datepicker-toggle-icon:var(--wmcolor-interactive);--wmcolor-datepicker-weekdays-background:var(--wmcolor-table-header-background);--wmcolor-datepicker-weekdays-text:var(--wmcolor-text);font-family:inherit}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required{color:var(--wmcolor-text-required)}:host .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label{color:var(--wmcolor-text-error)}:host .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper{position:relative}:host .wrapper .single-wrapper,:host .wrapper .range-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;position:relative}:host .wrapper .date-input{border-radius:3px;color:var(--wmcolor-datepicker-input-text);font-size:0.875rem;padding:0.625rem 0.9375rem 0.5rem;min-width:0;-ms-flex:1;flex:1;margin:0;background-color:var(--wmcolor-datepicker-input-background)}:host .wrapper .date-input:disabled{background-color:var(--wmcolor-datepicker-input-background-disabled);color:var(--wmcolor-datepicker-input-text-disabled)}:host .wrapper .date-input:focus{outline:none}:host .wrapper .input{height:2.5rem;border:1px solid var(--wmcolor-datepicker-input-border);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;}:host .wrapper #single-date-input{height:100%;border:none;border-top-right-radius:0;border-bottom-right-radius:0;border-start-end-radius:0;border-end-end-radius:0}:host .wrapper .range-wrapper{width:303px}:host .wrapper #start-date-input,:host .wrapper #end-date-input{max-width:120px}:host .wrapper #start-date-input:focus,:host .wrapper #end-date-input:focus{outline:2px solid var(--wmcolor-input-border-focus);border-color:var(--wmcolor-input-border-focus)}:host .wrapper.invalid .input,:host .wrapper .date-input.invalid{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}:host .wrapper .error{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-bottom:4px;top:100%;left:0}:host .wrapper .error:not(:empty){margin-top:0.25rem}:host .wrapper.focus #single-date-input{outline:2px solid var(--wmcolor-input-border-focus);border-color:var(--wmcolor-input-border-focus)}";
+const datepickerCss = ":host{--wmcolor-datepicker-background:var(--wmcolor-background);--wmcolor-datepicker-day-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-day-background-selected:var(--wmcolor-interactive);--wmcolor-datepicker-day-text-outside:var(--wmcolor-interactive-disabled);--wmcolor-datepicker-day-text-selected:var(--wmcolor-interactive-text-selected);--wmcolor-datepicker-day-text:var(--wmcolor-text);--wmcolor-datepicker-input-background-disabled:var(--wmcolor-input-background-disabled);--wmcolor-datepicker-input-background:var(--wmcolor-input-background);--wmcolor-datepicker-input-border:var(--wmcolor-input-border);--wmcolor-datepicker-input-text-disabled:var(--wmcolor-input-text-disabled);--wmcolor-datepicker-input-text:var(--wmcolor-input-text);--wmcolor-datepicker-month-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-month-background-selected:var(--wmcolor-interactive);--wmcolor-datepicker-month-background:var(--wmcolor-text);--wmcolor-datepicker-month-border:var(--wmcolor-border-light);--wmcolor-datepicker-month-text-selected:var(--wmcolor-text-ondark);--wmcolor-datepicker-month-text:var(--wmcolor-interactive);--wmcolor-datepicker-navigation-background-hover:var(--wmcolor-button-background-navigational-hover);--wmcolor-datepicker-navigation-background:var(--wmcolor-button-background-navigational);--wmcolor-datepicker-navigation-text:var(--wmcolor-button-icon-navigational);--wmcolor-datepicker-selector-background:var(--wmcolor-button-background-secondary);--wmcolor-datepicker-selector-border:var(--wmcolor-button-border-secondary);--wmcolor-datepicker-selector-text:var(--wmcolor-button-text-secondary);--wmcolor-datepicker-toggle-background-disabled:var(--wmcolor-input-background-disabled);--wmcolor-datepicker-toggle-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-toggle-background:var(--wmcolor-input-background);--wmcolor-datepicker-toggle-icon-disabled:var(--wmcolor-interactive-disabled);--wmcolor-datepicker-toggle-icon:var(--wmcolor-interactive);--wmcolor-datepicker-weekdays-background:var(--wmcolor-table-header-background);--wmcolor-datepicker-weekdays-text:var(--wmcolor-text);font-family:inherit}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required{color:var(--wmcolor-text-required)}:host .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label{color:var(--wmcolor-text-error)}:host .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper{position:relative}:host .wrapper .single-wrapper,:host .wrapper .range-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;position:relative}:host .wrapper .date-input{border-radius:3px;color:var(--wmcolor-datepicker-input-text);font-size:0.875rem;padding:0.625rem 0.9375rem 0.5rem;min-width:0;-ms-flex:1;flex:1;margin:0;background-color:var(--wmcolor-datepicker-input-background)}:host .wrapper .date-input:disabled{background-color:var(--wmcolor-datepicker-input-background-disabled);color:var(--wmcolor-datepicker-input-text-disabled)}:host .wrapper .date-input:focus{outline:none}:host .wrapper .input{height:2.5rem;border:1px solid var(--wmcolor-datepicker-input-border);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;}:host .wrapper #single-date-input{height:100%;border:none;border-radius:3px;-webkit-margin-end:3px;margin-inline-end:3px}:host .wrapper .range-wrapper{max-width:257px;display:grid;grid-template-rows:minmax(21px, 1fr) 38px;grid-template-columns:120px 17px 120px;grid-template-areas:\"start-label-wrapper . end-label-wrapper\" \"start-date-input hyphen end-date-input\"}:host .wrapper .range-wrapper #start-label-wrapper{grid-area:start-label-wrapper}:host .wrapper .range-wrapper #end-label-wrapper{grid-area:end-label-wrapper}:host .wrapper .range-wrapper #start-date-input{grid-area:start-date-input}:host .wrapper .range-wrapper #hyphen{grid-area:hyphen}:host .wrapper .range-wrapper #end-date-input{grid-area:end-date-input}:host .wrapper .range-wrapper .label{text-wrap:wrap}:host .wrapper .range-wrapper.cal{max-width:305px;-webkit-column-gap:4px;-moz-column-gap:4px;column-gap:4px;grid-template-columns:120px 17px 120px 36px;grid-template-areas:\"start-label-wrapper . end-label-wrapper .\" \"start-date-input hyphen end-date-input toggle-wrapper\"}:host .wrapper .range-wrapper.cal #toggle-wrapper{grid-area:toggle-wrapper}:host .wrapper #start-date-input,:host .wrapper #end-date-input{max-width:120px}:host .wrapper #start-date-input:focus,:host .wrapper #end-date-input:focus{outline:2px solid var(--wmcolor-input-border-focus);border-color:var(--wmcolor-input-border-focus)}:host .wrapper.invalid .input,:host .wrapper .date-input.invalid{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}:host .wrapper .error{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-bottom:4px;top:100%;left:0}:host .wrapper .error:not(:empty){margin-top:0.25rem}:host .wrapper.focus #single-date-input{outline:2px solid var(--wmcolor-input-border-focus);border-color:var(--wmcolor-input-border-focus)}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
+const WmDatepickerStyle0 = datepickerCss;
 
 const DatePicker = class {
     constructor(hostRef) {
@@ -14,8 +15,7 @@ const DatePicker = class {
         this.wmDatepickerInputBlurred = index.createEvent(this, "wmDatepickerInputBlurred", 7);
         this.openUp = false;
         this.popupClicked = false;
-        this.buttonClicked = false;
-        this.isExpanded = false;
+        this.toggleButtonClicked = false;
         this.value = "";
         this.disabled = false;
         this.dateFormat = "mm/dd/yyyy";
@@ -24,6 +24,7 @@ const DatePicker = class {
         this.label = "";
         this.requiredField = false;
         this.preselected = undefined;
+        this.isExpanded = false;
     }
     get isDisabled() {
         // string "false" needs to be treated as bool False because react wrappers convert bool to string.
@@ -56,10 +57,12 @@ const DatePicker = class {
     }
     togglePopup() {
         this.isExpanded ? this.closePopup() : this.openPopup();
-        this.buttonClicked = true;
+        this.toggleButtonClicked = true;
     }
     closePopup(returnFocus = false) {
         this.isExpanded = false;
+        this.calEl.view = "day";
+        this.calEl.view = "day";
         this.popupEl.classList.remove("open");
         window.setTimeout(() => {
             //not using display none in order to get measurements of the popup while hidden
@@ -115,11 +118,11 @@ const DatePicker = class {
         }
     }
     blurHandler() {
-        if (!this.popupClicked && !this.buttonClicked && this.isExpanded) {
+        if (!this.popupClicked && !this.toggleButtonClicked && this.isExpanded) {
             this.closePopup();
         }
         this.popupClicked = false;
-        this.buttonClicked = false;
+        this.toggleButtonClicked = false;
     }
     // for cases where the user clicks or uses a shortcut to leave the document
     handleBlurOnWindow() {
@@ -133,7 +136,7 @@ const DatePicker = class {
             "-" +
             dateElement.getAttribute("data-month") +
             "-" +
-            dateElement.textContent;
+            dateElement.textContent.padStart(2, "0");
         this.wmDatepickerDateSelected.emit({ date: isoDate });
         // Create events to trigger onInput and onChange on host element, to get the updated value
         // Because there are more ways to input than just typing, we are firing this event upon cellTriggered
@@ -141,6 +144,7 @@ const DatePicker = class {
         this.el.dispatchEvent(inputEvent);
         const changeEvent = new CustomEvent("change");
         this.el.dispatchEvent(changeEvent);
+        this.closePopup(true);
     }
     async reformatDate(inputFormat, outputFormat, date) {
         return this.reformatDateInternal(inputFormat, outputFormat, date);
@@ -221,19 +225,19 @@ const DatePicker = class {
         this.liveRegionEl.textContent = message;
     }
     render() {
-        return (index.h(index.Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, index.h("div", { ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (index.h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (index.h("span", { "aria-hidden": "true", class: "required" }, "*"))))), index.h("div", null, index.h("div", { class: "single-wrapper input" }, index.h("input", { disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), index.h("div", { class: "container", id: "wm-container" }, index.h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, index.h("span", { class: "calendar", title: functions.intl.formatMessage({
+        return (index.h(index.Host, { key: 'c5739ead4cef950a636aa152ff9caa26c0af6ba7', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '87e16bb8f5ad49a6972a1cbe2c4c853d7d4959c1', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '42e447e58668e5a88edd7437047bce54a704e5f9', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (index.h("label", { key: 'c803538365fbfd82aff60cb5711b640645018d04', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (index.h("span", { key: 'fecdbe9851bead9d751458b11af3835fd693b8b6', "aria-hidden": "true", class: "required" }, "*"))))), index.h("div", { key: 'be0620df5dd65aa3521bc2aaa61b881239e2bc2c' }, index.h("div", { key: 'd07d72abb6196ba353efbabe1910c79d25ba6f0e', class: "single-wrapper input" }, index.h("input", { key: '1efbc40afe855b8ae5fc1e45f46598bbec95e021', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), index.h("div", { key: '790d19d2b945b7f612e02859a7b272b8ddfb474b', class: "container", id: "wm-container" }, index.h("button", { key: 'd68d5a01656a8b923b378ce73e0ddc58f2fdf5b2', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, index.h("span", { key: 'ca5412bd92e1cb3fcb416ad44b1faedb348c4a03', class: "calendar", title: functions.intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })), index.h("div", { class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, index.h("div", { tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), index.h("priv-calendar", { ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), index.h("div", { tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), index.h("div", { id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), index.h("div", { id: "month-title", class: "sr-only" }, functions.intl.formatMessage({
+            }) })), index.h("div", { key: '63b8992bdd6c18d6ba41961556b8987f4a5a6f59', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, index.h("div", { key: 'c37920368093dbb3413d71125cc11caa8afd9cad', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), index.h("priv-calendar", { key: 'c7cba9c54e9a5125fb328886ab7350600ecaf31b', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), index.h("div", { key: 'd5b893546196e25eaddf0f3462f0c0e5bfb10cf7', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), index.h("div", { key: 'f172e8e33ecb8360ea8bfb079aa135009b053a8e', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), index.h("div", { key: '52d12573fe421d84f2224643a074d1b4af232122', id: "month-title", class: "sr-only" }, functions.intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), index.h("div", { id: "year-title", class: "sr-only" }, functions.intl.formatMessage({
+        })), index.h("div", { key: '0c795cb7c6869d75700b47fce4113f248590caef', id: "year-title", class: "sr-only" }, functions.intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), index.h("div", { id: "error", class: "error" }, this.errorMessage), index.h("div", { ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        })))), index.h("div", { key: '4f5913a92b1661108bcb6600afea8e13a84b2379', id: "error", class: "error" }, this.errorMessage), index.h("div", { key: '62836f0a396222d065026a1b277fdd89eb3162cb', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -243,6 +247,6 @@ const DatePicker = class {
         "errorMessage": ["announceError"]
     }; }
 };
-DatePicker.style = datepickerCss;
+DatePicker.style = WmDatepickerStyle0;
 
 exports.wm_datepicker = DatePicker;

package/dist/cjs/wm-file-list.cjs.entry.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
+const index = require('./index-788526f5.js');
 
 const wmFileListCss = ":host{display:block}.list-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:0.5rem}";
+const WmFileListStyle0 = wmFileListCss;
 
 const FileList = class {
     constructor(hostRef) {
@@ -12,11 +13,11 @@ const FileList = class {
         this.showInfo = "last-updated";
     }
     render() {
-        return (index.h("div", { role: "list", class: "list-wrapper" }, index.h("slot", null)));
+        return (index.h("div", { key: '7517d9199e320a918e7b87501e2a6841d17e70f5', role: "list", class: "list-wrapper" }, index.h("slot", { key: 'c90eaf77aa45b5b146ad71cfa3891cbc0a26ab9a' })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
 };
-FileList.style = wmFileListCss;
+FileList.style = WmFileListStyle0;
 
 exports.wm_file_list = FileList;

package/dist/cjs/wm-file.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
-const functions = require('./functions-be4156cf.js');
+const index = require('./index-788526f5.js');
+const functions = require('./functions-05e7ad5a.js');
 
 const wmFileCss = ":host{--wmcolor-file-background-error:var(--wmcolor-background-error);--wmcolor-file-background:var(--wmcolor-background-readonly);--wmcolor-file-border-error:var(--wmcolor-border-error);--wmcolor-file-border:var(--wmcolor-border);--wmcolor-file-checkmark-icon:var(--wmcolor-positive);--wmcolor-file-progress:var(--wmcolor-progress);display:block;width:100%}.file-wrapper{font-size:0.875rem;position:relative;list-style:none}.file-wrapper .file{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;min-height:3.5rem;padding:0.5rem 1.25rem;position:relative;background:var(--wmcolor-file-background);border:1px solid var(--wmcolor-file-border);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.file-wrapper .file .filename{display:inline-block;white-space:nowrap}.file-wrapper .file .left-group{overflow:hidden;min-width:5.3125rem;-ms-flex-positive:1;flex-grow:1}.file-wrapper .file .right-group{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:end;-ms-flex-align:center;align-items:center;gap:1rem;min-width:0;padding-left:5rem}.file-wrapper .file .right-group.condensed{padding-left:2.5rem}.file-wrapper .file .right-group .file-controls{display:-ms-flexbox;display:flex;gap:1rem}.file-wrapper .file .right-group .file-info{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:end;gap:0.25rem;text-align:right;min-width:8.5rem;max-width:450px;-ms-flex:1;flex:1}.file-wrapper .file .right-group .file-info .uploader-name{max-width:100%;overflow-wrap:break-word}.file-wrapper .file.--error{border:1px solid var(--wmcolor-file-border-error);background-color:var(--wmcolor-file-background-error);height:3.75rem}.file-wrapper.checked .file:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f133\";position:absolute;right:-44px;color:var(--wmcolor-file-checkmark-icon);font-size:28px;line-height:1}.name-wrapper{overflow:hidden}.progress{position:absolute;left:0;top:0;right:0;height:8px}.error-message{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem}.error-message:not(:empty){margin-top:0.25rem}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
+const WmFileStyle0 = wmFileCss;
 
 const File = class {
     constructor(hostRef) {
@@ -180,11 +181,11 @@ const File = class {
         return (index.h("div", { class: `file-wrapper ${this.progress === 100 ? "checked" : ""}` }, index.h("div", { class: `file ${this.errorMessage ? "--error" : ""}` }, this.renderFileName(), !this.errorMessage && (index.h("div", { class: `right-group ${this.isCondensed ? "condensed" : ""}` }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (index.h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.errorMessage && index.h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return index.h(index.Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return index.h(index.Host, { key: '0943b20ae9ce90cb1687ff3c092622d2169f9c47', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
 };
-File.style = wmFileCss;
+File.style = WmFileStyle0;
 
 exports.wm_file = File;

package/dist/cjs/wm-input.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
-const functions = require('./functions-be4156cf.js');
-const intl = require('./intl-a13884e8.js');
+const index = require('./index-788526f5.js');
+const functions = require('./functions-05e7ad5a.js');
+const intl = require('./intl-2b550151.js');
 
 const wmInputCss = ":host{font-family:inherit;width:100%}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required{color:var(--wmcolor-text-required)}:host .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label{color:var(--wmcolor-text-error)}:host .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper{width:100%}:host .wrapper .text-after-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px}:host .wrapper .text-after{-ms-flex:0 1 fit-content;flex:0 1 fit-content}:host .wrapper .inputfield-wrapper{height:2.5rem;min-width:6.25rem;border:1px solid var(--wmcolor-input-border);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:-ms-flexbox;display:flex}:host .wrapper .inputfield-wrapper.disabled{background-color:var(--wmcolor-input-background-disabled);color:var(--wmcolor-input-text-disabled)}:host .wrapper .inputfield-wrapper.disabled .symbol{background:none}:host .wrapper .symbol{display:-ms-flexbox;display:flex;background-color:var(--wmcolor-input-unit-background);-ms-flex:0 0 44px;flex:0 0 44px;padding-inline:8px;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .wrapper .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:var(--wmcolor-input-charcount-background);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;align-self:stretch}:host .wrapper input{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:none;font-family:inherit;font-size:0.875rem;height:100%;-ms-flex:1;flex:1;padding:0.75rem 1rem;width:100%}:host .wrapper input:focus{outline:none}:host .wrapper input[type=number]{padding-right:0}:host .wrapper .info{font-style:italic;line-height:100%;margin:4px 0}:host .wrapper.invalid .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}:host .wrapper.invalid .error-message{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;line-height:100%}:host .wrapper.invalid .error-message:not(:empty){margin-top:0.25rem}:host .wrapper:focus .inputfield-wrapper,:host .wrapper.focus .inputfield-wrapper{outline:2px solid var(--wmcolor-input-border-focus);border-color:var(--wmcolor-input-border-focus)}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
+const WmInputStyle0 = wmInputCss;
 
 const Input = class {
     constructor(hostRef) {
@@ -110,7 +111,7 @@ const Input = class {
             : `info error`;
     }
     render() {
-        return (index.h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, index.h("div", { class: "label-wrapper" }, index.h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (index.h("span", { class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (index.h("span", { class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { class: "inner-wrapper" }, index.h("div", { class: "text-after-wrapper" }, index.h("div", { class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (index.h("span", { class: "symbol", id: "symbol-before" }, this.symbolBefore)), index.h("input", { ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (index.h("span", { class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (index.h("span", { class: "text-after", id: "text-after" }, this.textAfter))), this.info && (index.h("div", { id: "info", class: "info" }, this.info)), index.h("div", { id: "error", class: "error-message" }, this.errorMessage), index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (index.h("div", { key: '6bff33a353bd632527d8ebd95031db8c8138ae87', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, index.h("div", { key: 'c04c1edf83bb49604e4ca504abc51e6647d5487c', class: "label-wrapper" }, index.h("label", { key: '35d3cf8433a915d548717e7eac14308b1d7a7490', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (index.h("span", { key: 'a4d9d478d893bde516031f2b0e7097fb17755b28', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (index.h("span", { key: '7fa0965a9c325e24aac64c522ef354d9bcf841bd', class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { key: '4df1efa5078a5d5a6edfd6538923545d3945a34c', class: "inner-wrapper" }, index.h("div", { key: '0c879dc570054b620eb424e0d660c930e2e580bb', class: "text-after-wrapper" }, index.h("div", { key: '76886618707f4ca0d5e3ef46ccc7a3561569cb8b', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (index.h("span", { key: 'fe346fecf4fa7f0f030354de9d37ac03af8df5d4', class: "symbol", id: "symbol-before" }, this.symbolBefore)), index.h("input", { key: 'd3ac5033a0aa7e49c2af2a786a3e09d46bec0e51', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (index.h("span", { key: '948bcf0ca5186a924b7b7e0099fb072ef78658e4', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (index.h("span", { key: '59ab9c5a6530828b9fbf021de2baa98e0306555b', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (index.h("div", { key: '981aed3eb22a54accce593c1791f496b4641bc1f', id: "info", class: "info" }, this.info)), index.h("div", { key: 'cb8fb8d79193f4505204d4bc1bdc62a52675387f', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: 'a319ec8aa8f23c7a51af1de3a65e3778b7cadb67', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -119,6 +120,6 @@ const Input = class {
         "errorMessage": ["announceError"]
     }; }
 };
-Input.style = wmInputCss;
+Input.style = WmInputStyle0;
 
 exports.wm_input = Input;

package/dist/cjs/wm-line-chart.cjs.entry.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
-const functions = require('./functions-be4156cf.js');
-const chartFunctions = require('./chartFunctions-246529c5.js');
-const intl = require('./intl-a13884e8.js');
+const index = require('./index-788526f5.js');
+const functions = require('./functions-05e7ad5a.js');
+const chartFunctions = require('./chartFunctions-a8999ce1.js');
+const intl = require('./intl-2b550151.js');
 
 const wmLineChartCss = ":host{--wmcolor-linechart-currentposition:var(--wmcolor-lavender);--wmcolor-linechart-delta-text-negative:var(--wmcolor-text-negative);--wmcolor-linechart-delta-text-positive:var(--wmcolor-text-positive);--wmcolor-linechart-gridline:var(--wmcolor-chart-gridline);--wmcolor-linechart-highlight-background:var(--wmcolor-background-highlight);--wmcolor-linechart-popover-background:var(--wmcolor-chart-popover-background);display:block;height:500px;width:100%;font-size:14px;overflow-y:visible;overflow-x:auto}:host .component-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:562px;width:100%;height:100%;outline:none}:host .icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;position:relative;color:var(--iconColor);-webkit-transform:var(--translation, unset);transform:var(--translation, unset)}:host .icon:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:var(--icon);padding:0 3px;z-index:1}:host .icon:after{color:white;position:absolute;left:3px;-webkit-transform:scale(180%);transform:scale(180%);display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:var(--icon);z-index:0}:host .legend{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px 16px;margin-top:4px;margin-bottom:16px}:host .legend .legend-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:default;font-weight:600}:host .legend .legend-label.faded{opacity:0.3}:host .legend .legend-label .icon{margin-right:4px}:host .legend .visibility-toggle{margin-left:4px}:host .chart-wrapper{position:relative;-ms-flex-positive:1;flex-grow:1;display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:1fr auto auto;margin-right:16px}:host .chart-label{font-size:14px;font-weight:600}:host .chart-label.--y-axis{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:var(--labelWidth);align-self:center;margin-right:16px;grid-area:1/1/2/2;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}:host .chart-label.--x-axis{margin-top:16px;text-align:center;grid-area:3/3/4/4}:host .y-intervals{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;grid-area:1/2/2/3;margin-right:4px}:host .y-intervals .y-interval{text-align:right}:host .x-intervals{display:grid;grid-template-columns:var(--columns);grid-area:2/3/3/4;line-height:1;margin-top:4px}:host .x-intervals .x-interval{text-align:center}:host .x-intervals .x-interval:first-child{text-align:left}:host .x-intervals .x-interval:last-child{text-align:right}:host .x-intervals .x-interval.hidden{visibility:hidden}:host .plot-area{position:relative;grid-area:1/3/2/4;background-image:linear-gradient(90deg, var(--wmcolor-linechart-gridline) 1px, transparent 1px);border-bottom:1px solid var(--wmcolor-linechart-gridline);background-size:var(--backgroundSize)}:host .plot-area.right-border{border-right:1px solid var(--wmcolor-linechart-gridline)}:host .line{position:absolute;width:100%;height:100%}:host .line .icon{position:absolute;-webkit-transform:var(--translation);transform:var(--translation);left:var(--xPosition);top:var(--yPosition);z-index:1}:host .line .icon:focus{z-index:2;outline:none}:host .line .icon:focus:before{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:0;border-radius:3px}:host .line .line-svg{height:100%;width:100%}:host .line.faded{opacity:0.3}:host .line.focused{z-index:1}:host .line.hidden{visibility:hidden}:host .hover-area-wrapper{position:absolute;width:100%;height:100%;top:0;left:0;display:grid;grid-template-rows:1fr;grid-template-columns:var(--columns)}:host .hover-indicator{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;height:100%;width:2px;border:1px solid var(--wmcolor-linechart-currentposition);-webkit-transform:translateX(-50%);transform:translateX(-50%);left:var(--xPosition);grid-column:3/4;grid-row:1/2;pointer-events:none}:host .popover{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:400px;background-color:var(--wmcolor-linechart-popover-background);position:absolute;top:var(--topPosition, 0);left:var(--leftPosition, unset);right:var(--rightPosition, unset);padding:16px;border-radius:5px;-webkit-box-shadow:0px 2px 10px 0px rgba(0, 0, 0, 0.09);box-shadow:0px 2px 10px 0px rgba(0, 0, 0, 0.09);-webkit-transform:translateY(-50%);transform:translateY(-50%);line-height:1;z-index:3;grid-column:3/4;grid-row:1/2;pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box}:host .popover .title{font-size:16px;font-weight:600}:host .popover .comparison-title{font-style:italic;margin-top:4px}:host .popover .unit{font-size:12px;font-weight:600}:host .popover .unit.--x{margin-left:4px}:host .popover .popover-table{margin-top:16px}:host .popover .popover-table .popover-row{line-height:1}:host .popover .popover-table .popover-row:not(:last-child) td{padding-bottom:8px}:host .popover .popover-table .popover-row .row-label{font-weight:600;padding-right:16px;overflow-wrap:anywhere}:host .popover .popover-table .popover-row .row-label .icon{margin-right:4px}:host .popover .popover-table .popover-row .row-value,:host .popover .popover-table .popover-row .delta{text-align:right;white-space:nowrap}:host .popover .popover-table .popover-row .delta{padding-left:12px;font-weight:600}:host .popover .popover-table .popover-row .delta.--positive{color:var(--wmcolor-linechart-delta-text-positive)}:host .popover .popover-table .popover-row .delta.--negative{color:var(--wmcolor-linechart-delta-text-negative)}:host .highlight{position:absolute;height:100%;background-color:color-mix(in srgb, var(--wmcolor-linechart-highlight-background) 60%, transparent);left:var(--startPercentage);right:var(--endPercentage)}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
+const WmLineChartStyle0 = wmLineChartCss;
 
 const LineChart = class {
     constructor(hostRef) {
@@ -20,12 +21,12 @@ const LineChart = class {
         this.displayedXIntervals = [];
         this.yIntervals = [];
         this.lineStyles = [
-            { color: "#8b86ca", icon: "f536" },
-            { color: "#2e1b46", icon: "f12f" },
-            { color: "#0089e4", icon: "f763" },
-            { color: "#088000", icon: "f4ce" },
-            { color: "#ea8500", icon: "f70a" },
-            { color: "#d54f41", icon: "f536" },
+            { color: "#8b86ca", icon: "f536" }, // lavender, triangle
+            { color: "#2e1b46", icon: "f12f" }, // midnight, circle
+            { color: "#0089e4", icon: "f763" }, // blue, square
+            { color: "#088000", icon: "f4ce" }, // forest, star
+            { color: "#ea8500", icon: "f70a" }, // orange, rhombus
+            { color: "#d54f41", icon: "f536" }, // red, upside down triangle
             { color: "#146ca9", icon: "f6ff" }, // blue, upside down triangle
         ];
         this.debouncedResize = functions.debounce(async () => {
@@ -421,7 +422,7 @@ const LineChart = class {
             popoverStyle = {
                 "--leftPosition": `0%`,
                 "--topPosition": "0%",
-                maxWidth: Math.min(this.el.clientWidth - 2, 400) + "px",
+                maxWidth: Math.min(this.el.clientWidth - 2, 400) + "px", // take up no more max-width than is visually available
                 transform: `translateX(calc(${displaceLeft}))`, // align with left edge of component
             };
         }
@@ -461,9 +462,9 @@ const LineChart = class {
         return index.h("div", { class: "highlight", style: highlightStyle });
     }
     render() {
-        return (index.h(index.Host, { onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, index.h("div", { class: "component-wrapper", role: "application", "aria-roledescription": intl.chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), index.h("div", { class: "chart-wrapper" }, index.h("div", { class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), index.h("div", { ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
+        return (index.h(index.Host, { key: '9817eea8765cce513a0848cd222a6409c8f1f912', onBlur: () => this.resetDataPointFocus(), onMouseLeave: () => (this.popoverIndex = -1) }, index.h("div", { key: '60de41437bb425483be4b5a24fc2468c8e8f8d4e', class: "component-wrapper", role: "application", "aria-roledescription": intl.chartMessages.interactiveChart, "aria-label": this.label, "aria-describedby": "chart-description" }, this.renderLegend(), index.h("div", { key: '2029ed03f09b8c133ee430f7b1d70c9dded326f3', class: "chart-wrapper" }, index.h("div", { key: '4e9123177b8c02cf1fef010d370b2b1a23b2015c', class: "chart-label --y-axis", style: { "--labelWidth": this.labelWidth } }, this.yAxisLabel, this.parsedUnits[1] && ` (${this.parsedUnits[1]})`), this.renderYIntervals(), index.h("div", { key: '3cbe51169818095cd830e7b8099d3a10980e3cf2', ref: (el) => (this.plotAreaEl = el), class: `plot-area ${this.hasPartialInterval ? "" : "right-border"}`, style: {
                 "--backgroundSize": `${this.dataPointMatrix[0][this.xIntervals.indexOf(this.displayedXIntervals[1])].xPositionPercent}%`,
-            } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), index.h("div", { class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), index.h("div", { id: "chart-description", class: "sr-only" }, `${intl.lineChartMessages.instructions} ${this.description}`), index.h("div", { ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
+            } }, this.highlightStart && this.renderHighlight(), this.renderData(), this.renderHoverAreas()), this.popoverIndex !== -1 && this.renderHoverIndicator(), this.popoverIndex !== -1 && this.renderPopover(), this.renderXIntervals(), index.h("div", { key: 'dad130dfb9063769dd36316cb060c90a8f1c8cb8', class: "chart-label --x-axis" }, this.xAxisLabel, this.parsedUnits[0] && ` (${this.parsedUnits[0]})`)), index.h("div", { key: 'bb4ffc7fbae6ab63e6f3e16c1d7e8a98c382e243', id: "chart-description", class: "sr-only" }, `${intl.lineChartMessages.instructions} ${this.description}`), index.h("div", { key: 'de40d0eecd0db387912b45fb2b4576b37e3876aa', ref: (el) => (this.liveRegionEl = el), "aria-live": "polite", class: "sr-only" }, this.announcement))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -471,6 +472,6 @@ const LineChart = class {
         "intervalSkip": ["handleIntervalSkip"]
     }; }
 };
-LineChart.style = wmLineChartCss;
+LineChart.style = WmLineChartStyle0;
 
 exports.wm_line_chart = LineChart;

package/dist/cjs/wm-modal-footer.cjs.entry.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
+const index = require('./index-788526f5.js');
 
 const wmModalFooterCss = "wm-modal-footer{display:block;-webkit-border-radius:0px 0px 5px 5px;-moz-border-radius:0px 0px 5px 5px;-ms-border-radius:0px 0px 5px 5px;border-radius:0px 0px 5px 5px}wm-modal-footer .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}@media only screen and (max-width: 650px){wm-modal-footer .wm-wrapper.footer-text{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}}wm-modal-footer .wm-wrapper wm-button+wm-button{margin-left:1rem}wm-modal-footer .wm-wrapper .wm-info{font-size:0.875rem;font-style:italic}@media only screen and (max-width: 650px){wm-modal-footer .wm-wrapper .wm-info{padding-bottom:0.625rem}}wm-modal-footer .wm-wrapper .wm-info:focus{outline:none}";
+const WmModalFooterStyle0 = wmModalFooterCss;
 
 const ModalFooter = class {
     constructor(hostRef) {
@@ -38,10 +39,10 @@ const ModalFooter = class {
         }
     }
     render() {
-        return (index.h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), index.h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
+        return (index.h("div", { key: '09b1182d96ad0f65ad6e2d865901ca600ef6bdc6', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { key: '1e8d2e33fb67996cf2e6d3827ad566da2af0121f', class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { key: '3ef4184bbfe126af97339c495c21f78b82f96fbc', class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { key: '3eb4cb51d51cf7d7e4d61d16399b036cccfb5825', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), index.h("wm-button", { key: '449c91c2c7af5810a8f8e3ab64c63a212a2df541', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
     }
     get el() { return index.getElement(this); }
 };
-ModalFooter.style = wmModalFooterCss;
+ModalFooter.style = WmModalFooterStyle0;
 
 exports.wm_modal_footer = ModalFooter;

package/dist/cjs/wm-modal-header.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
-const intl = require('./intl-a13884e8.js');
-require('./functions-be4156cf.js');
+const index = require('./index-788526f5.js');
+const intl = require('./intl-2b550151.js');
+require('./functions-05e7ad5a.js');
 
 const wmModalHeaderCss = "wm-modal-header{display:block;-webkit-border-radius:5px 5px 0 0px;-moz-border-radius:5px 5px 0 0px;-ms-border-radius:5px 5px 0 0px;border-radius:5px 5px 0 0px}wm-modal-header .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}wm-modal-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:var(--wmcolor-modal-heading);line-height:normal}wm-modal-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-header .wm-wrapper .title:focus{outline:none}";
+const WmModalHeaderStyle0 = wmModalHeaderCss;
 
 const ModalHeader = class {
     constructor(hostRef) {
@@ -30,10 +31,10 @@ const ModalHeader = class {
         parentModal.emitCloseEvent();
     }
     render() {
-        return (index.h(index.Host, null, index.h("div", { class: "wm-wrapper" }, index.h("div", null, index.h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { class: "subtitle" }, this.subheading))), index.h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: intl.globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (index.h(index.Host, { key: '5f19057a411235360621a94b35d8bbd0cafeb756' }, index.h("div", { key: 'cd92ce876d1c46693afde4216b07c975505943a0', class: "wm-wrapper" }, index.h("div", { key: '288de703687da76c9c19cb7c9d585291511858af' }, index.h("h2", { key: 'e4336d48cd65b5d2edce772ecede4d55d8742490', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { key: '4039bf3b3193af1c15c4fa0d4127965bb4af0fdc', class: "subtitle" }, this.subheading))), index.h("wm-button", { key: 'b745264b5bc4d84ce93d8f71fd6fbea9951481c5', "button-type": "navigational", icon: "f156", tooltip: intl.globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     get el() { return index.getElement(this); }
 };
-ModalHeader.style = wmModalHeaderCss;
+ModalHeader.style = WmModalHeaderStyle0;
 
 exports.wm_modal_header = ModalHeader;

package/dist/cjs/wm-modal.cjs.entry.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
-const functions = require('./functions-be4156cf.js');
+const index = require('./index-788526f5.js');
+const functions = require('./functions-05e7ad5a.js');
 
-const wmModalCss = "wm-modal{--wmcolor-modal-background:var(--wmcolor-background);--wmcolor-modal-border:var(--wmcolor-border);--wmcolor-modal-heading:var(--wmcolor-text);--wmcolor-modal-overlay:var(--wmcolor-overlay)}wm-modal *{-webkit-box-sizing:border-box;box-sizing:border-box}wm-modal dialog{color:inherit;overflow:hidden;padding:0;width:80vw;max-width:750px;max-height:80vh;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;-ms-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;border:none;background:var(--wmcolor-modal-background)}wm-modal dialog>:not(wm-modal-header):not(wm-modal-footer){max-height:calc(80vh - 166px)}wm-modal dialog::-webkit-backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog::-ms-backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog::backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog[open]{-webkit-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);-moz-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14)}wm-modal dialog.wm-modal>wm-modal-header{border-bottom:1px solid var(--wmcolor-modal-border)}wm-modal dialog.wm-modal>wm-modal-footer{border-top:1px solid var(--wmcolor-modal-border)}@media only screen and (max-width: 768px){wm-modal dialog.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal dialog.wm-modal>*{max-width:none;width:100vw}wm-modal dialog.wm-modal>*:not(wm-modal-header):not(wm-modal-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal dialog.wm-dialog>:not(wm-modal-header):not(wm-modal-footer):not(.wm-tooltip){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal wm-modal-header,wm-modal wm-modal-footer{padding:1.25rem 1.875rem;width:100%}wm-modal .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}";
+const wmModalCss = "wm-modal{--wmcolor-modal-background:var(--wmcolor-background);--wmcolor-modal-border:var(--wmcolor-border);--wmcolor-modal-heading:var(--wmcolor-text);--wmcolor-modal-overlay:var(--wmcolor-overlay)}wm-modal *{-webkit-box-sizing:border-box;box-sizing:border-box}wm-modal dialog{color:inherit;padding:0;width:80vw;max-width:750px;max-height:80vh;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;-ms-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;border:none;background:var(--wmcolor-modal-background)}wm-modal dialog>:not(wm-modal-header):not(wm-modal-footer){max-height:calc(80vh - 166px)}wm-modal dialog::-webkit-backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog::-ms-backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog::backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog[open]{-webkit-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);-moz-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14)}wm-modal dialog.wm-modal>wm-modal-header{border-bottom:1px solid var(--wmcolor-modal-border)}wm-modal dialog.wm-modal>wm-modal-footer{border-top:1px solid var(--wmcolor-modal-border)}@media only screen and (max-width: 768px){wm-modal dialog.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal dialog.wm-modal>*{max-width:none;width:100vw}wm-modal dialog.wm-modal>*:not(wm-modal-header):not(wm-modal-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal dialog.wm-dialog>:not(wm-modal-header):not(wm-modal-footer):not(.wm-tooltip){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal wm-modal-header,wm-modal wm-modal-footer{padding:1.25rem 1.875rem;width:100%}wm-modal .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}";
+const WmModalStyle0 = wmModalCss;
 
 const Modal = class {
     constructor(hostRef) {
@@ -121,11 +122,11 @@ const Modal = class {
         }
     }
     render() {
-        return (index.h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (index.h("dialog", { key: 'f9804007b3075d04567628d467538b268f2005cc', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("div", { key: '40c848ef5e791eeaf3fc116764f0007f3e14132d', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && index.h("div", { class: "wm-tooltip" }), index.h("slot", null), index.h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && index.h("div", { key: '8bec0c492699e1544dde7219ec704a5ef3a3b6ee', class: "wm-tooltip" }), index.h("slot", { key: '2646b7ab94b1426e9166fd589680f6e1e401643f' }), index.h("div", { key: 'fddae069851ee02bdda40853a46e9b70bc311c99', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }
@@ -134,6 +135,6 @@ const Modal = class {
         "open": ["toggleModal"]
     }; }
 };
-Modal.style = wmModalCss;
+Modal.style = WmModalStyle0;
 
 exports.wm_modal = Modal;

package/dist/cjs/wm-navigation_3.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
-const functions = require('./functions-be4156cf.js');
-const intl = require('./intl-a13884e8.js');
+const index = require('./index-788526f5.js');
+const functions = require('./functions-05e7ad5a.js');
+const intl = require('./intl-2b550151.js');
 
 const wmNavigationCss = ":host{--wmcolor-navigation-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigation-background-selected:var(--wmcolor-background-selected);--wmcolor-navigation-background:var(--wmcolor-background);--wmcolor-navigation-border-selected:var(--wmcolor-interactive);--wmcolor-navigation-focus:var(--wmcolor-interactive-focus);--wmcolor-navigation-icon-selected:var(--wmcolor-interactive);--wmcolor-navigation-icon:var(--wmcolor-icon);--wmcolor-navigation-text-selected:var(--wmcolor-interactive);z-index:10}:host([aria-expanded=true]){z-index:5000}.tray{-webkit-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);-moz-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:7.5625rem;background-color:var(--wmcolor-navigation-background);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:0.875rem;height:100%}.navlist{margin:0;padding:0}.toggle-wrapper{display:none}@media screen and (max-width: 1023px){.tray{-ms-transition:transform 0.33s ease;-webkit-transition:transform 0.33s ease;-moz-transition:transform 0.33s ease;-webkit-transition:-webkit-transform 0.33s ease;transition:-webkit-transform 0.33s ease;transition:transform 0.33s ease;transition:transform 0.33s ease, -webkit-transform 0.33s ease;position:fixed;top:0;bottom:0;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.tray ul{visibility:hidden}.tray .toggle-wrapper{display:inline-block;min-height:5rem;width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([aria-expanded=true]) .tray{-webkit-transform:translateX(0);transform:translateX(0)}:host([aria-expanded=true]) .tray ul{visibility:visible}.overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:0;bottom:0;left:0;right:0;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out}}";
+const WmNavigationStyle0 = wmNavigationCss;
 
 const Navigation = class {
     constructor(hostRef) {
@@ -105,9 +106,9 @@ const Navigation = class {
             } }));
     }
     render() {
-        return (index.h(index.Host, { role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (index.h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), index.h("div", { class: "tray" }, index.h("div", { class: "toggle-wrapper" }, index.h("wm-button", { ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? intl.globalMessages.close : intl.globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (index.h(index.Host, { key: '07253bd6d752aa41a1715cf2d28e600b7aae4355', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (index.h("div", { key: 'dbb1d92bad6c1f59f159f63758cc0110e1d6b94b', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), index.h("div", { key: '93b63fb63bb94b32f25d250836c1d8b98cc20d08', class: "tray" }, index.h("div", { key: '89a4323868c66a84bb4f12921103b150068906bc', class: "toggle-wrapper" }, index.h("wm-button", { key: '0de023f3c6dd6e396adf0a248ca8333095a43359', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? intl.globalMessages.close : intl.globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
                 this.open = !this.open;
-            } })), index.h("ul", { class: "navlist" }, index.h("slot", null))), this.isCollapsible && (index.h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), index.h("ul", { key: '1d7b6fc3268583b27b2a0dc46859b6ca1c6d8e52', class: "navlist" }, index.h("slot", { key: '870cf6f8c01dba37611097c836880792ddddefd6' }))), this.isCollapsible && (index.h("div", { key: '2d89c522803c67ea290e054ac2a8040f3f257282', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -115,9 +116,10 @@ const Navigation = class {
         "open": ["handleStateChange"]
     }; }
 };
-Navigation.style = wmNavigationCss;
+Navigation.style = WmNavigationStyle0;
 
 const wmNavigationHamburgerCss = "button{--wmcolor-navigation-hamburger-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigation-hamburger-icon:var(--wmcolor-interactive);display:none;width:100%;height:100%;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;outline:none;padding:0}button:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:0}button:hover{background-color:var(--wmcolor-navigation-hamburger-background-hover)}.icon:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f35c\";font-size:1.5rem;color:var(--wmcolor-navigation-hamburger-icon)}@media screen and (max-width: 1023px){:host{width:3.75rem;height:3.75rem}button{display:initial}}";
+const WmNavigationHamburgerStyle0 = wmNavigationHamburgerCss;
 
 const NavigationHamburger = class {
     constructor(hostRef) {
@@ -155,14 +157,15 @@ const NavigationHamburger = class {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (index.h(index.Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, index.h("button", { "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => functions.showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => this.isTabbing && functions.showTooltip("right", this.el, this.showNavMessage), onBlur: () => functions.hideTooltip(), onClick: () => this.handleClick() }, index.h("span", { class: "icon" }))));
+        return (index.h(index.Host, { key: 'b813a9264454c413f65eef5389e394ef1b291317', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, index.h("button", { key: '4e623dd65471a455bc352940ea99a2ed1e10ff63', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => functions.showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => this.isTabbing && functions.showTooltip("right", this.el, this.showNavMessage), onBlur: () => functions.hideTooltip(), onClick: () => this.handleClick() }, index.h("span", { key: '6754b962ff1a87cabe636bad94e953c7bbdde09e', class: "icon" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
 };
-NavigationHamburger.style = wmNavigationHamburgerCss;
+NavigationHamburger.style = WmNavigationHamburgerStyle0;
 
 const wmNavigationItemCss = ".link{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:inherit;text-decoration:none;min-height:4.5rem;text-align:center;padding:1.25rem 0.5rem;font-weight:500;outline:none;position:relative;background:var(--wmcolor-navigation-background)}.link:hover{background-color:var(--wmcolor-navigation-background-hover)}.link .icon{font-size:1.375rem;color:var(--wmcolor-navigation-icon)}.link .text{font-size:0.875rem}.link:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:-3px}.link.active{background-color:var(--wmcolor-navigation-background-selected)}.link.active:before{content:\"\";background-color:var(--wmcolor-navigation-border-selected);position:absolute;height:100%;width:5px;left:0}.link.active .text{color:var(--wmcolor-navigation-text-selected)}.link.active .icon{color:var(--wmcolor-navigation-icon-selected)}";
+const WmNavigationItemStyle0 = wmNavigationItemCss;
 
 const NavigationItem = class {
     constructor(hostRef) {
@@ -173,12 +176,12 @@ const NavigationItem = class {
         this.active = undefined;
     }
     render() {
-        return (index.h(index.Host, { role: "listitem" }, index.h("a", { class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, index.h("div", { class: "icon", "aria-hidden": "true" }, index.h("slot", null)), index.h("div", { class: "text" }, this.text))));
+        return (index.h(index.Host, { key: '59d24293849944df41c1d904458413e8f201e348', role: "listitem" }, index.h("a", { key: '4e0e4717b961c7020ab19a5564ed8328789c5f34', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, index.h("div", { key: '8ce442d2d492faba715138bbc7a0e2c2d2bc1a75', class: "icon", "aria-hidden": "true" }, index.h("slot", { key: '898d3ec6a650f7a2e2d59f2c01d777b7d061420c' })), index.h("div", { key: 'e1858a03da5dbb807adbaed86e50cac95f59edc3', class: "text" }, this.text))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
 };
-NavigationItem.style = wmNavigationItemCss;
+NavigationItem.style = WmNavigationItemStyle0;
 
 exports.wm_navigation = Navigation;
 exports.wm_navigation_hamburger = NavigationHamburger;

package/dist/cjs/wm-navigator.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
+const index = require('./index-788526f5.js');
 const interfaces = require('./interfaces-85d78ae9.js');
-const functions = require('./functions-be4156cf.js');
+const functions = require('./functions-05e7ad5a.js');
 
 const getRequest = async (url) => {
     const response = await fetch(url);
@@ -17,6 +17,7 @@ const getRequest = async (url) => {
 };
 
 const wmNavigatorCss = ":host{--wmcolor-navigator-background:var(--wmcolor-background);--wmcolor-navigator-header-background:var(--wmcolor-brand-dark);--wmcolor-navigator-header-text:var(--wmcolor-text-ondark);--wmcolor-navigator-item-background-focus:var(--wmcolor-interactive-background-focus);--wmcolor-navigator-item-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigator-item-background:var(--wmcolor-background);--wmcolor-navigator-item-border:var(--wmcolor-border);--wmcolor-navigator-item-text:var(--wmcolor-text);--wmcolor-navigator-user-background:var(--wmcolor-background-readonly);min-width:0;position:relative;display:inline-block}:host .wrapper{overflow:auto;font-size:1.125rem;min-width:13.125rem;width:auto;max-height:80vh;text-align:left;position:absolute;z-index:50;top:100%;right:20px;left:auto;background:var(--wmcolor-navigator-background);letter-spacing:normal;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper .user{background:var(--wmcolor-navigator-user-background);padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper .user p{margin:0}:host .wrapper .user p:first-child{font-weight:700;text-transform:capitalize}:host .wrapper h2{background:var(--wmcolor-navigator-header-background);color:var(--wmcolor-navigator-header-text);font-weight:700;margin:0;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper [role=listbox]{list-style:none;margin:0;padding-left:0}:host .wrapper.hide{-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0)}:host .wrapper.right{right:auto;left:20px}:host img{-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transform-origin:left center;transform-origin:left center;display:block}:host .logout{text-align:center;text-transform:capitalize}priv-navigator-item:focus{outline:none}";
+const WmNavigatorStyle0 = wmNavigatorCss;
 
 const Navigator = class {
     constructor(hostRef) {
@@ -325,6 +326,6 @@ const Navigator = class {
         "products": ["parseData"]
     }; }
 };
-Navigator.style = wmNavigatorCss;
+Navigator.style = WmNavigatorStyle0;
 
 exports.wm_navigator = Navigator;