@watermarkinsights/ripple 6.0.2 → 6.1.0-alpha.0

package/dist/collection/components/wm-button/wm-button.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);
@@ -1604,6 +1609,7 @@
 }
 
 :host {
+  letter-spacing: 0.01875rem;
   display: inline-block;
   inline-size: fit-content;
   max-inline-size: 100%;
@@ -1627,5 +1633,15 @@
 }
 
 :host(.-textonly) {
+  letter-spacing: 0;
   min-inline-size: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/wm-file/wm-file.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/wm-file-list/wm-file-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);

package/dist/collection/components/wm-flyout/wm-flyout.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/wm-input/wm-input.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);
@@ -919,7 +928,6 @@
 }
 :host .wrapper .label {
   display: inline-block;
-  line-height: normal;
   font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
@@ -1058,7 +1066,6 @@
 }
 :host .wrapper .info {
   font-style: italic;
-  line-height: 100%;
   margin: 4px 0;
 }
 :host .wrapper.invalid .inputfield-wrapper {
@@ -1076,9 +1083,6 @@
 :host .wrapper.invalid .error-message:not(:empty) {
   margin-block-start: 0.25rem;
 }
-:host .wrapper.invalid .error-message {
-  line-height: 100%;
-}
 :host .wrapper:focus .inputfield-wrapper, :host .wrapper.focus .inputfield-wrapper {
   outline: 2px solid var(--wmcolor-border-focus);
   border-color: var(--wmcolor-border-focus);
@@ -1094,4 +1098,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/wm-menuitem/wm-menuitem.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/wm-modal/wm-modal-footer.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/wm-modal/wm-modal-header.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);
@@ -914,7 +923,6 @@ wm-modal-header .wm-wrapper .title {
   font-weight: 600;
   font-size: 1.125rem;
   color: var(--wmcolor-modal-heading);
-  line-height: normal;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
@@ -923,4 +931,13 @@ wm-modal-header .wm-wrapper .title .subtitle {
   display: block;
   font-size: 0.875rem;
   font-weight: normal;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/wm-modal/wm-modal.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/wm-modal-pss/wm-modal-pss-footer.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/wm-modal-pss/wm-modal-pss-header.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);
@@ -913,7 +922,6 @@ wm-modal-pss-header .wm-wrapper .title {
   font-weight: 600;
   font-size: 1.125rem;
   color: var(--wmcolor-modal-heading);
-  line-height: normal;
 }
 wm-modal-pss-header .wm-wrapper .title .subtitle {
   display: block;
@@ -922,4 +930,13 @@ wm-modal-pss-header .wm-wrapper .title .subtitle {
 }
 wm-modal-pss-header .wm-wrapper .title:focus {
   outline: none;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/wm-modal-pss/wm-modal-pss.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/wm-navigation/wm-navigation-hamburger.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,4 +932,12 @@ button:hover {
   button {
     display: flex;
   }
+}
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/wm-navigation/wm-navigation-item.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/wm-navigation/wm-navigation.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/wm-navigator/priv-navigator-button/priv-navigator-button.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/wm-navigator/priv-navigator-item/priv-navigator-item.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/wm-navigator/wm-navigator.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);
@@ -916,7 +925,6 @@
   inset-inline-end: 20px;
   inset-inline-start: 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);
@@ -987,4 +995,13 @@
 
 priv-navigator-item:focus {
   outline: none;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/wm-pagination/wm-pagination.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);
@@ -892,6 +901,10 @@ wm-pagination {
   display: block;
 }
 
+:host {
+  letter-spacing: 0.01875rem;
+}
+
 nav .largescreen,
 nav .smallscreen {
   display: -webkit-box;
@@ -931,7 +944,6 @@ nav .smallscreen .paginationbtn {
   block-size: 2.5rem;
   inline-size: 2.5rem;
   font-family: inherit;
-  letter-spacing: 0.3px;
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;
@@ -1041,4 +1053,13 @@ nav .largescreen .paginationbtn[aria-current=page]:hover {
   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/wm-search/wm-search.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);
@@ -981,4 +990,13 @@
   text-decoration-thickness: 0.1428571429em;
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/wm-snackbar/wm-snackbar.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);
@@ -977,14 +986,12 @@
   }
 }
 :host .wm-snack-wrapper .wm-snackbar .link {
-  letter-spacing: 0;
   text-transform: none;
   font-size: 0.875rem;
   border: none;
   padding-inline: 0;
   block-size: auto;
   border-radius: 0;
-  line-height: 1;
   text-decoration: none;
   font-weight: 600;
   cursor: pointer;
@@ -1066,11 +1073,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;
 }
 :host .wm-snack-wrapper .wm-snackbar .content-wrapper .closesnack .svg-close {
   --icon-size: 1.125rem;
@@ -1147,4 +1152,13 @@
 .user-is-tabbing .wm-snack-wrapper .wm-snackbar .content-wrapper .link:focus:not(:active) {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.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/wm-tabs/wm-tab-list/wm-tab-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);

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.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/wm-tag-input/wm-tag-input.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;
@@ -1432,4 +1440,13 @@
 }
 :host #error:not(:empty) {
   margin-block-start: 0.25rem;
+}
+
+button,
+input,
+select,
+textarea {
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  line-height: inherit;
 }