@watermarkinsights/ripple 6.0.2 → 6.1.0-alpha.0

package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.css

@@ -30,6 +30,15 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);
@@ -954,13 +963,11 @@ priv-chart-popover.user-is-keying .button-text {
   background: var(--wmcolor-background-transparent);
   cursor: pointer;
   text-decoration: none;
-  letter-spacing: 0;
   text-transform: none;
   text-align: initial;
   font-size: 0.875rem;
   font-weight: 700;
   color: var(--wmcolor-interactive);
-  line-height: normal;
 }
 .popover .popover-button .button-text {
   display: inline-block;
@@ -993,4 +1000,13 @@ priv-chart-popover.user-is-keying .button-text {
 .popover .popover-button:hover span {
   color: var(--wmcolor-link-text-hover);
   text-decoration-thickness: 0.1428571429em;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/charts/priv-chart-popover-old/priv-chart-popover-old.css

@@ -30,6 +30,15 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);
@@ -954,13 +963,11 @@ priv-chart-popover-old.user-is-tabbing .button-text {
   background: var(--wmcolor-background-transparent);
   cursor: pointer;
   text-decoration: none;
-  letter-spacing: 0;
   text-transform: none;
   text-align: initial;
   font-size: 0.875rem;
   font-weight: 700;
   color: var(--wmcolor-link-text);
-  line-height: normal;
 }
 .popover .popover-button .button-text {
   display: inline-block;
@@ -988,4 +995,13 @@ priv-chart-popover-old.user-is-tabbing .button-text {
 .popover .popover-button:hover span {
   color: var(--wmcolor-link-text-hover);
   text-decoration-thickness: 0.1428571429em;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/charts/wm-chart/wm-chart.css

@@ -445,7 +445,6 @@
 }
 :host .component-wrapper .legend-wrapper .legend .legend-text {
   font-size: 0.875rem;
-  line-height: normal;
 }
 :host .component-wrapper .legend-wrapper .legend .legend-color {
   inline-size: 0.6875rem;
@@ -470,6 +469,15 @@
 }
 
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);

package/dist/collection/components/charts/wm-chart-bar/wm-chart-bar.css

@@ -230,6 +230,15 @@
   }
 }
 
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);

package/dist/collection/components/charts/wm-chart-column/wm-chart-column.css

@@ -230,6 +230,15 @@
   }
 }
 
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);
@@ -1146,7 +1155,6 @@
   --offset: 0px;
   position: absolute;
   inset-inline-end: 0;
-  line-height: 1;
   white-space: nowrap;
   transform: translateY(-50%);
   inset-block-start: var(--offset);

package/dist/collection/components/charts/wm-chart-legend/wm-chart-legend.css

@@ -30,6 +30,15 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);

package/dist/collection/components/charts/wm-chart-stack/wm-chart-stack.css

@@ -230,6 +230,15 @@
   }
 }
 
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);

package/dist/collection/components/charts/wm-line-chart/wm-line-chart.css

@@ -30,6 +30,15 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);
@@ -966,14 +975,12 @@
   position: absolute;
   inset-inline-end: 0;
   text-align: end;
-  line-height: 1;
   transform: translateY(-50%);
 }
 :host .x-intervals {
   display: grid;
   grid-template-columns: var(--columns);
   grid-area: 2/3/3/4;
-  line-height: 1;
   margin-block-start: 4px;
 }
 :host .x-intervals .x-interval {
@@ -1091,7 +1098,6 @@
   border-radius: 5px;
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.09);
   transform: translateY(-50%);
-  line-height: 1;
   z-index: 3;
   grid-column: 3/4;
   grid-row: 1/2;
@@ -1116,9 +1122,6 @@
 :host .popover .popover-table {
   margin-block-start: 16px;
 }
-:host .popover .popover-table .popover-row {
-  line-height: 1;
-}
 :host .popover .popover-table .popover-row td:first-child .svg-icon {
   margin-inline-end: 0.25rem;
 }

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.css

@@ -445,7 +445,6 @@
 }
 :host .component-wrapper .legend-wrapper .legend .legend-text {
   font-size: 0.875rem;
-  line-height: normal;
 }
 :host .component-wrapper .legend-wrapper .legend .legend-color {
   inline-size: 0.6875rem;
@@ -470,6 +469,15 @@
 }
 
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.css

@@ -60,7 +60,6 @@
 }
 :host .legend-wrapper .legend .legend-text {
   font-size: 0.875rem;
-  line-height: normal;
 }
 :host .legend-wrapper .legend .legend-color {
   inline-size: 0.6875rem;
@@ -85,6 +84,15 @@
 }
 
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);

package/dist/collection/components/datepickers/datepicker.css

@@ -30,6 +30,15 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);
@@ -940,7 +949,6 @@
 }
 :host .wrapper .label {
   display: inline-block;
-  line-height: normal;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -1126,7 +1134,6 @@
 }
 :host .wrapper .date-format {
   font-style: italic;
-  line-height: 100%;
 }
 :host .wrapper .error {
   display: block;
@@ -1163,4 +1170,13 @@
   clip-path: inset(50%) !important;
   white-space: nowrap !important;
   margin: -1px !important;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.css

@@ -30,6 +30,15 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);
@@ -1017,7 +1026,6 @@
   background: var(--wmcolor-datepicker-navigation-background);
   padding: 0;
   box-shadow: none;
-  line-height: 2.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1114,11 +1122,12 @@
 }
 .popup-wrapper .month-view .date-grid .header-cell {
   block-size: 2.0625rem;
-  line-height: 2.0625rem;
   inline-size: 2.75rem;
   margin: 0 calc((14.28% - 44px) / 2);
   padding: 0;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 0.8125rem;
   font-weight: bold;
   color: var(--wmcolor-datepicker-weekdays-text);
@@ -1324,7 +1333,6 @@
   cursor: pointer;
   inline-size: 7rem;
   block-size: 4rem;
-  line-height: 4rem;
   font-family: inherit;
   font-weight: 500;
   color: var(--wmcolor-datepicker-month-text);
@@ -1416,4 +1424,13 @@
   clip-path: inset(50%) !important;
   white-space: nowrap !important;
   margin: -1px !important;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/selects/priv-option-list/priv-option-list.css

@@ -30,6 +30,15 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);
@@ -995,4 +1004,13 @@
 .return-btn .return-btn-label .selection-count {
   font-weight: 400;
   font-style: italic;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.css

@@ -30,6 +30,15 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);
@@ -907,7 +916,6 @@
 }
 .wrapper .label {
   display: inline-block;
-  line-height: normal;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -999,7 +1007,6 @@
   padding-inline: 0.9375rem 1.875rem;
   cursor: pointer;
   block-size: 2.5rem;
-  line-height: normal;
   font-family: inherit;
   color: var(--wmcolor-interactive);
   font-weight: 400;
@@ -1259,4 +1266,13 @@
   clip-path: inset(50%) !important;
   white-space: nowrap !important;
   margin: -1px !important;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/selects/wm-optgroup/wm-optgroup.css

@@ -30,6 +30,15 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);

package/dist/collection/components/selects/wm-option/wm-option.css

@@ -30,6 +30,15 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);

package/dist/collection/components/selects/wm-select/wm-select.css

@@ -30,6 +30,15 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);
@@ -923,7 +932,6 @@
 }
 .wrapper .label {
   display: inline-block;
-  line-height: normal;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -1016,7 +1024,6 @@
   padding-inline: 0.9375rem 1.875rem;
   cursor: pointer;
   block-size: 2.5rem;
-  line-height: normal;
   font-family: inherit;
   font-size: 0.875rem;
   color: var(--wmcolor-interactive);
@@ -1117,7 +1124,6 @@
 
 .info {
   font-style: italic;
-  line-height: 100%;
   margin: 4px 0;
 }
 
@@ -1174,4 +1180,12 @@
   .dropdown.hidden {
     visibility: hidden;
   }
+}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/wm-action-menu/wm-action-menu.css

@@ -151,7 +151,6 @@
   align-items: center;
   text-decoration: none;
   text-transform: uppercase;
-  letter-spacing: 0.01875rem;
   overflow-wrap: break-word;
   box-shadow: none;
 }
@@ -239,7 +238,6 @@
   text-decoration-thickness: 0.0714285714em;
   text-underline-offset: 0.1428571429em;
   box-shadow: none;
-  letter-spacing: 0;
   text-transform: none;
   text-align: initial;
   font-size: 0.875rem;
@@ -280,11 +278,9 @@
   font-size: 1rem;
   padding: 0;
   block-size: auto;
-  line-height: 1;
   min-inline-size: 2.75rem;
   min-block-size: 2.75rem;
   text-align: center;
-  letter-spacing: normal;
 }
 @media screen and (min-width: 48rem) {
   :host .wm-button.-icononly, :host .wm-button.-navigational {
@@ -737,6 +733,15 @@
 }
 
 @container chart-measure (max-width: 414px) {}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
+}
+
 .svg-icon {
   display: block;
   inline-size: var(--icon-size, 0.875rem);
@@ -1595,6 +1600,7 @@
 }
 
 :host {
+  letter-spacing: 0.01875rem;
   --wmcolor-actionmenu-text: var(--wmcolor-interactive);
   --wmcolor-actionmenu-text-disabled: var(--wmcolor-option-text-disabled);
   position: relative;
@@ -1617,6 +1623,10 @@
   margin: -1px !important;
 }
 
+:host(.-textonly) {
+  letter-spacing: 0;
+}
+
 :host(:focus) {
   outline: none;
 }
@@ -1688,4 +1698,12 @@ wm-action-menu:focus {
   .dropdown.hidden {
     visibility: hidden;
   }
+}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/wm-action-menu/wm-action-menu.js

@@ -505,7 +505,7 @@ export class ActionMenu {
         }
     }
     render() {
-        return (h(Host, { key: 'f17d23b014109e1e287ed9ac0436adccc30c9286', onBlur: () => this.close(false) }, h("div", { key: '330a45a26358b2eeb473f6dd924969133839b317', class: getTextDir() }, h("button", { key: '0a42c5fdc473338458dbb3418ea628e861e47217', ref: (el) => (this.menubtnEl = el), id: "menubtn", class: `wm-button -${this.internalButtonType}${this.darkMode ? " dark" : ""}${this.isTabbing ? " user-is-tabbing" : ""}`, disabled: this.disabled, "aria-label": this.internalButtonType === "icononly"
+        return (h(Host, { key: '7f8596f5b3cef298410df9806667ebdc2485b1fe', class: `-${this.internalButtonType}`, onBlur: () => this.close(false) }, h("div", { key: '846dfac8f0851764e647a28fef104e309f1231d9', class: getTextDir() }, h("button", { key: 'e583e84d26afba9ea6a8bfd9fe67774f84deba29', ref: (el) => (this.menubtnEl = el), id: "menubtn", class: `wm-button -${this.internalButtonType}${this.darkMode ? " dark" : ""}${this.isTabbing ? " user-is-tabbing" : ""}`, disabled: this.disabled, "aria-label": this.internalButtonType === "icononly"
                 ? this.labelForIdenticalButtons || this.tooltip
                 : this.labelForIdenticalButtons || undefined, "aria-expanded": this.isExpanded ? "true" : "false", "aria-haspopup": "menu", popoverTarget: "menu", popoverTargetAction: "toggle", onMouseEnter: () => this.actionMenuType === "icon" &&
                 showTooltip(this.tooltipPosition || this.horizontalPosition, this.menubtnEl, this.tooltip), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing &&
@@ -513,9 +513,9 @@ export class ActionMenu {
                 showTooltip(this.tooltipPosition || this.horizontalPosition, this.menubtnEl, this.tooltip), onBlur: (ev) => {
                 hideTooltip();
                 this.handleButtonBlur(ev);
-            } }, this.resolvedIcon && this.renderIcon(), this.actionMenuType !== "icon" && h("span", { key: '86242e737d2fdaf8ed3fc8b3daa3a927505daa73', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (h("div", { key: 'f9ad339a4ce6c401cc5d46540e1cb7c7b1f755e8', class: "selector-icon svg-icon svg-expand-more" }))), h("div", { key: 'fec6f9fb5205ef67a52dcb885db650cb684ae3af', class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "open-up" : ""} ${this.horizontalPosition}`, id: "menu", popover: "auto", tabindex: -1, role: "menu", style: { "--dropdown-max-width": this.maxWidth }, ref: (el) => (this.dropdownEl = el),
+            } }, this.resolvedIcon && this.renderIcon(), this.actionMenuType !== "icon" && h("span", { key: '19f0197bb8ab8d2f62c0ea72b2f79b2f14b10255', class: "button-text" }, this.buttonText), (this.actionMenuType === "selector" || this.actionMenuType === "selector-primary") && (h("div", { key: '96ee611f3582627a8fc29b02ff08071b52be10ed', class: "selector-icon svg-icon svg-expand-more" }))), h("div", { key: '1431fd42aae7810f17e70cff3d78a3a43e0b2fd0', class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "open-up" : ""} ${this.horizontalPosition}`, id: "menu", popover: "auto", tabindex: -1, role: "menu", style: { "--dropdown-max-width": this.maxWidth }, ref: (el) => (this.dropdownEl = el),
             // @ts-ignore -- don't tell typescript but we're in the future
-            onToggle: (ev) => this.handleToggle(ev) }, h("slot", { key: '3fb778c1bfbe64f50573e2feac714efc475caca0' })))));
+            onToggle: (ev) => this.handleToggle(ev) }, h("slot", { key: '0829471a5d08871a788bdac18a316a6e7bd27f2b' })))));
     }
     static get is() { return "wm-action-menu"; }
     static get encapsulation() { return "shadow"; }