@watermarkinsights/ripple 5.2.0 → 5.3.0-0

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

@@ -2,16 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
-const functions = require('./functions-48a748f0.js');
+const index = require('./index-3c3d6c9f.js');
+const functions = require('./functions-b73604c3.js');
 
-const wmDatepickerCss = ":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 .inner-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.5rem;border:1px solid;border-color:var(--wmcolor-datepicker-input-border);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;-ms-flex-pack:justify;justify-content:space-between;position:relative}:host .wrapper .inner-wrapper .date-input{-moz-border-top-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;border:none;color:var(--wmcolor-datepicker-input-text);font-size:0.875rem;padding:0.625rem 0.9375rem 0.5rem;min-width:0;height:100%;-ms-flex:1;flex:1;margin:0;background-color:var(--wmcolor-datepicker-input-background)}:host .wrapper .inner-wrapper .date-input:disabled{background-color:var(--wmcolor-datepicker-input-background-disabled);color:var(--wmcolor-datepicker-input-text-disabled)}:host .wrapper .inner-wrapper .date-input:focus{outline:none}:host .wrapper.invalid .inner-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{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-bottom:4px;top:100%;left:0}:host .wrapper.invalid .error:not(:empty){margin-top:0.25rem}:host .wrapper.focus .inner-wrapper{outline:2px solid var(--wmcolor-input-border-focus);border-color:var(--wmcolor-input-border-focus)}:host .toggle:focus-visible:not(:active){border:none;z-index:11}";
+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 WmDatepickerStyle0 = datepickerCss;
 
 const DatePicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.wmDatepickerDateSelected = index.createEvent(this, "wmDatepickerDateSelected", 7);
         this.wmDatepickerInputBlurred = index.createEvent(this, "wmDatepickerInputBlurred", 7);
+        this.openUp = false;
+        this.popupClicked = false;
+        this.buttonClicked = false;
+        this.isExpanded = false;
         this.value = "";
         this.disabled = false;
         this.dateFormat = "mm/dd/yyyy";
@@ -26,17 +31,17 @@ const DatePicker = class {
         return functions.toBool(this.disabled);
     }
     get calendarDate() {
-        let calendarDate = new Date().toISOString();
+        let calendarDate = functions.dateToISO(new Date());
         const dateFormatUnits = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
-        if (this.preselected) {
-            calendarDate = this.preselected;
-        }
-        else if (this.value &&
+        if (this.value &&
             dateFormatUnits[this.dateFormat] &&
             this.isValidIsoInternal(this.reformatDateInternal(dateFormatUnits[this.dateFormat], "ISO", this.value))) {
             // if component has value, and value can be parsed to valid ISO
             calendarDate = this.reformatDateInternal(dateFormatUnits[this.dateFormat], "ISO", this.value);
         }
+        else if (this.preselected) {
+            calendarDate = this.preselected;
+        }
         return calendarDate;
     }
     handleDisabledChange() {
@@ -50,33 +55,81 @@ const DatePicker = class {
             setTimeout(() => this.announce(this.errorMessage), 100);
         }
     }
+    togglePopup() {
+        this.isExpanded ? this.closePopup() : this.openPopup();
+        this.buttonClicked = true;
+    }
+    closePopup(returnFocus = false) {
+        this.isExpanded = false;
+        this.popupEl.classList.remove("open");
+        window.setTimeout(() => {
+            //not using display none in order to get measurements of the popup while hidden
+            this.popupEl.style.visibility = "hidden";
+        }, 250);
+        //Reset values so that menu reopens to day view with selected date in focus
+        if (returnFocus) {
+            this.toggleEl.focus();
+        }
+    }
+    openPopup() {
+        this.openUp = functions.shouldOpenUp(this.el, this.popupEl.clientHeight, this.labelWrapperEl.clientHeight);
+        if (functions.hasRoomRight(this.el, 336)) {
+            this.popupEl.style.left = "0";
+            this.popupEl.style.right = "auto";
+        }
+        else {
+            this.popupEl.style.right = "0";
+            this.popupEl.style.left = "auto";
+        }
+        this.popupEl.style.visibility = "visible";
+        window.requestAnimationFrame(() => {
+            this.popupEl.classList.add("open");
+        });
+        this.isExpanded = true;
+        this.calEl.focusDate = this.calendarDate;
+        this.calEl.startDate = this.calendarDate;
+        this.calEl.focusCell();
+    }
     handleInput(ev) {
         // keep component's value in sync with input's value
         this.value = ev.target.value;
     }
     handleInputBlur() {
-        this.dpWrapper.classList.remove("focus");
+        this.dpWrapperEl.classList.remove("focus");
         this.wmDatepickerInputBlurred.emit();
     }
     handleInputFocus() {
-        this.dpWrapper.classList.add("focus");
+        this.dpWrapperEl.classList.add("focus");
     }
     handleInputChange() {
         // forward change externally
         const event = new CustomEvent("change");
         this.el.dispatchEvent(event);
     }
-    handlePopupBlurred(ev) {
-        // emit blur event when leaving component from priv-datepicker
-        if (ev.detail.relatedTarget !== this.el) {
-            const event = new CustomEvent("blur");
-            // @ts-ignore
-            event.relatedTarget = ev.detail.relatedTarget;
-            this.el.dispatchEvent(event);
+    handleKey(ev) {
+        switch (ev.key) {
+            case "Escape":
+                ev.preventDefault();
+                ev.stopPropagation(); // prevents closing of parent modal
+                this.closePopup(true);
+                break;
+        }
+    }
+    blurHandler() {
+        if (!this.popupClicked && !this.buttonClicked && this.isExpanded) {
+            this.closePopup();
+        }
+        this.popupClicked = false;
+        this.buttonClicked = false;
+    }
+    // for cases where the user clicks or uses a shortcut to leave the document
+    handleBlurOnWindow() {
+        if (this.isExpanded) {
+            this.closePopup();
         }
     }
     handleCellTriggered(ev) {
-        let dateElement = ev.detail;
+        let dateElement = ev.detail.cell;
         let isoDate = dateElement.getAttribute("data-year") +
             "-" +
             dateElement.getAttribute("data-month") +
@@ -156,6 +209,11 @@ const DatePicker = class {
         }
         functions.handleDisabledAttribute(this.el, this.isDisabled);
     }
+    componentDidLoad() {
+        this.calEl.addEventListener("click", () => {
+            this.popupClicked = true;
+        });
+    }
     announce(message) {
         // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
         if (this.liveRegionEl.textContent === message) {
@@ -164,7 +222,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.dpWrapper = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { class: "label-wrapper" }, 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: "inner-wrapper" }, index.h("input", { disabled: this.isDisabled, type: "text", id: "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-controls": "popup", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), index.h("priv-datepicker", { disabled: this.isDisabled, date: new Date(this.calendarDate) })), 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" })))));
+        return (index.h(index.Host, { key: 'dc02ac52c52f2146b6818cfb44399df8a87f2eaf', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'b06cb70e114f2ce2cf1705a8e917e43d570e19c8', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '59d5e72dd35e30cdaf7c2e8b13b2725bdfab2c15', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (index.h("label", { key: '4d0dda8003a5b162a0fbf213e274fbf83bd749fb', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (index.h("span", { key: '9d8e26dceb6a9887e092fd14a1d1609c7a7a2035', "aria-hidden": "true", class: "required" }, "*"))))), index.h("div", { key: 'f50032f60bdd107f7863a922e342f0f0660da780' }, index.h("div", { key: 'ceb8ed6366d193974a9e0bf60564e2e8679ac95a', class: "single-wrapper input" }, index.h("input", { key: 'f827817fbca9ca48384b1f622606860d2b4c2427', 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: '55fe08e3fe5837a630b1c295fe871dd5fa716fcc', class: "container", id: "wm-container" }, index.h("button", { key: '7984c6a08ec8e61dd9fc57cbd5f219e1bb01822d', 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: 'd9767516cdfec1535d9085e8f1892a460a4236c3', class: "calendar", title: functions.intl.formatMessage({
+                id: "date.calendarView",
+                defaultMessage: "Calendar View",
+                description: "Calendar button",
+            }) })), index.h("div", { key: '940e5e487e2b2a695b3e47aff7a0d8efc065a15c', 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: '65b02880a0a9b4f2fe50854a7ad0fd669a2b4b43', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), index.h("priv-calendar", { key: '7354b8532fc298fbec125623ef91cbcc880d0c16', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), index.h("div", { key: '4a6b82416033fcc71588280ccd7aa59a3b8db264', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), index.h("div", { key: '48aa408267854e62134274f0e089b6fdae5ec247', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), index.h("div", { key: '6bb2169b1738e6e8b83c6c6cdc5bf2936cafcb64', id: "month-title", class: "sr-only" }, functions.intl.formatMessage({
+            id: "date.selectMonth",
+            defaultMessage: "Activate to select a month.",
+            description: "Calendar button",
+        })), index.h("div", { key: 'd7e7703c661440d8cd86959cfb31bd18cb65fd1b', id: "year-title", class: "sr-only" }, functions.intl.formatMessage({
+            id: "date.selectYear",
+            defaultMessage: "Activate to select a year.",
+            description: "Calendar button",
+        })))), index.h("div", { key: '2eb5183a34668d6fdc04960a3212f96998c80c9c', id: "error", class: "error" }, this.errorMessage), index.h("div", { key: '3a077f86b2332175c0ff853e13d5b903d7e0165f', 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); }
@@ -174,6 +244,6 @@ const DatePicker = class {
         "errorMessage": ["announceError"]
     }; }
 };
-DatePicker.style = wmDatepickerCss;
+DatePicker.style = WmDatepickerStyle0;
 
 exports.wm_datepicker = DatePicker;

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

@@ -2,21 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f8ef86de.js');
+const index = require('./index-3c3d6c9f.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) {
         index.registerInstance(this, hostRef);
-        this.showInfo = "time";
+        this.showInfo = "last-updated";
     }
     render() {
-        return (index.h("div", { role: "list", class: "list-wrapper" }, index.h("slot", null)));
+        return (index.h("div", { key: 'b89090890295428f5bebf1b79f209ac3289f0ac8', role: "list", class: "list-wrapper" }, index.h("slot", { key: 'd59cef60abfacc55d0620c0013c7026bd4b4b3af' })));
     }
     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-48a748f0.js');
+const index = require('./index-3c3d6c9f.js');
+const functions = require('./functions-b73604c3.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: 'ad4adea14b53d45d3e05793d42f8cf3d9bd73ccf', 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-48a748f0.js');
-const intl = require('./intl-29d2cc42.js');
+const index = require('./index-3c3d6c9f.js');
+const functions = require('./functions-b73604c3.js');
+const intl = require('./intl-b20d5420.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: 'b9598ed315d13b3f054d4155499dc00f6b8cc855', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, index.h("div", { key: '90b5fe4c5b579e1a520179db171a1d68e4bb7a9c', class: "label-wrapper" }, index.h("label", { key: '03f832e30622f6fd32178fa95c327feb7ea6638a', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (index.h("span", { key: '73d65801ae9fa94b946306076bf3622a40d56527', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (index.h("span", { key: '382a3b7293ba2f580ffd1f1e920bb392e872ce84', class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { key: '2463e3168a84fcf47b624ba3507afaf7c47726da', class: "inner-wrapper" }, index.h("div", { key: '3f4cf72b7af8dd980e4d0f34a7337addca76d170', class: "text-after-wrapper" }, index.h("div", { key: '6e7812958b117361e821a48926eb6347b0158da4', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (index.h("span", { key: '2839c13d5312ba38205d6d1aa82d3a9654d5f06c', class: "symbol", id: "symbol-before" }, this.symbolBefore)), index.h("input", { key: '741abc0a84608038a13f6432f28f02adc5dc4395', 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: '55ec76f3a809ca1491592875518c8e647843ac99', 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: '908591d6da6542bb2350aa7813429f451611734e', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (index.h("div", { key: '5dbc627b5db96879daf8c2335f7ae3bb9517e767', id: "info", class: "info" }, this.info)), index.h("div", { key: 'df38dbf928f9990d5a9d2c6ddaba67d49686f6e4', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: 'c08662f28c17c7eda3809fb73c2badecf8e42c49', 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-48a748f0.js');
-const chartFunctions = require('./chartFunctions-2195a9d2.js');
-const intl = require('./intl-29d2cc42.js');
+const index = require('./index-3c3d6c9f.js');
+const functions = require('./functions-b73604c3.js');
+const chartFunctions = require('./chartFunctions-9075d687.js');
+const intl = require('./intl-b20d5420.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-3c3d6c9f.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: '6a5fc998c2cb415c166bce85dc52d6e6e6e3a230', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { key: '3b9447834530659308618cdcd0bfb78e6ae5ee07', class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { key: '1eba03d1acf2ff2ff063778d7c44586f0bb1cf4c', class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { key: '804287ec369acc9f27f58cd3778b8bb28b0c45b1', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), index.h("wm-button", { key: '15b323af0a56f8ef60d4d09432fb9354b35d2cee', "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-29d2cc42.js');
-require('./functions-48a748f0.js');
+const index = require('./index-3c3d6c9f.js');
+const intl = require('./intl-b20d5420.js');
+require('./functions-b73604c3.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: 'f5719a0f2056c801f776efdc8c4b2c7c414627d4' }, index.h("div", { key: 'e5695a8b2d36f4f62cc0662e28ca54c28a865921', class: "wm-wrapper" }, index.h("div", { key: 'a6854d72f3972eeaf13667f04c8ec87773c4dd65' }, index.h("h2", { key: '5c2f249dd7467787c6fe7a68810f12c709084121', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { key: 'f8bde096f7807b4989249a2f85ed34d3eebeb0a5', class: "subtitle" }, this.subheading))), index.h("wm-button", { key: 'be27899f16d1c740c5d4b918939ee4fac281dbfe', "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-48a748f0.js');
+const index = require('./index-3c3d6c9f.js');
+const functions = require('./functions-b73604c3.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 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: '124097f92fff611f4f56f9ad3238517fd0dda19e', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("div", { key: 'd367e02d045c1c563ff6c310ec158b8a7b4e0287', 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: 'b6905495813d6e12e2690331fd3a5212c0769ba3', class: "wm-tooltip" }), index.h("slot", { key: '2360294f11e3ba94727b17df927aa37aea6ecdb3' }), index.h("div", { key: '51d05952f3e1b145e943e44d245cf9ed31e7f07e', 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-48a748f0.js');
-const intl = require('./intl-29d2cc42.js');
+const index = require('./index-3c3d6c9f.js');
+const functions = require('./functions-b73604c3.js');
+const intl = require('./intl-b20d5420.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: '7c5f113bb05143c981df504301dab0f30d3e0b81', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (index.h("div", { key: '05ab60106ff3b97cfe670ce6d12bad6905ae6f45', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), index.h("div", { key: 'ec3c3ebca88625ce03b0316acf7a45fe62c51644', class: "tray" }, index.h("div", { key: '6a6b9a0b8d0c0837d9dd7a18db84880b864b1bad', class: "toggle-wrapper" }, index.h("wm-button", { key: '261142287e111991df7647368b25fafbd036d8cc', 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: 'fc16fa9a144d04ae0c9052c8e35c4d0255c38540', class: "navlist" }, index.h("slot", { key: 'd8fbddab73f4614c544f59ceb7ac148306b2a67d' }))), this.isCollapsible && (index.h("div", { key: '7ee6cfee0409440f75a118dcf930aca526ceb60e', 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: 'c35b1c8c6558c87923c15e7b74575420d6263c9f', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, index.h("button", { key: '723b8603c13abf75a32f1d688c626b64efd8b32e', "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: '51e767410bc8436af9a6d8e56ed53485cb8b0350', 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: '130176ebd99c30c1c764436948a854f216d68e37', role: "listitem" }, index.h("a", { key: '1bd91657782fafe9fbb80e1efa87d2293f9c0cba', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, index.h("div", { key: '86bbd36f36f1559fd928880ce5cc916becab32bb', class: "icon", "aria-hidden": "true" }, index.h("slot", { key: 'd69b35303521eb558aba65dbd5846458f4c80641' })), index.h("div", { key: '22e322f554019928b41df9e6e56e8d83447de161', 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;