@watermarkinsights/ripple 6.0.2-alpha.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-button/wm-button.js

@@ -27,8 +27,6 @@ import { generateId, hideTooltip, handleDisabledAttribute, showTooltip, toBool,
  *   important action.
  * - **pairpositive / pairnegative**: Must always be used together for binary choices where
  *   neither option is preferred (e.g. Approve / Reject). Do not use one without the other.
- * - **AI variants** (`primary-ai`, `secondary-ai`, etc.): Do not set the `icon` prop —
- *   the AI icon is applied automatically.
  * - **icononly / navigational**: Both `icon` and `tooltip` are required.
  * - Do not use slotted text (emoji, Unicode glyphs, or characters styled to look like an icon)
  *   to simulate an icon. Use the `icon` prop so the icon is rendered as a proper SVG/MDI glyph
@@ -103,11 +101,11 @@ import { generateId, hideTooltip, handleDisabledAttribute, showTooltip, toBool,
  * @example {react} Button on dark background
  * <WmButton buttonType="secondary" customBackground="dark">Continue</WmButton>
  *
- * @example {html} AI primary button — icon is applied automatically, do not set icon prop.
- * <wm-button button-type="primary-ai">Generate summary</wm-button>
+ * @example {html} AI primary button.
+ * <wm-button button-type="primary-ai" icon="#ai-sparkles">Generate summary</wm-button>
  *
  * @example {react} AI primary button
- * <WmButton buttonType="primary-ai">Generate summary</WmButton>
+ * <WmButton buttonType="primary-ai" icon="#ai-sparkles">Generate summary</WmButton>
  *
  * @example {html} Rotated icon — reuse directional icons with icon-rotate.
  * <wm-button button-type="icononly" icon="#back" icon-rotate="180" tooltip="Forward">Forward</wm-button>
@@ -133,7 +131,7 @@ export class Button {
          */
         this.disabled = false;
         /**
-         * @description Visual style of the button. 'primary' for the single preferred action (use sparingly, ideally once per page/section). 'secondary' for other actions, often alongside a primary. 'textonly' for low-emphasis actions. 'icononly' requires icon and tooltip. 'navigational' for icon-only back/forward navigation (e.g. flyout back button). 'pairpositive' and 'pairnegative' must be used together for binary choices (neither is preferred, e.g. Approve/Reject). AI variants apply AI styling automatically — do not set the icon property on AI types. 'selector' and 'selector-primary' are internal types used by wm-select — do not use directly.
+         * @description Visual style of the button. 'primary' for the single preferred action (use sparingly, ideally once per page/section). 'secondary' for other actions, often alongside a primary. 'textonly' for low-emphasis actions. 'icononly' requires icon and tooltip. 'navigational' for icon-only back/forward navigation (e.g. flyout back button). 'pairpositive' and 'pairnegative' must be used together for binary choices (neither is preferred, e.g. Approve/Reject). AI variants apply AI styling automatically. 'selector' and 'selector-primary' are internal types used by wm-select — do not use directly.
          * @default "secondary"
          */
         this.buttonType = "secondary";
@@ -400,7 +398,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'b749ef5c8a7d00dd7cd3eec74aa11c5e97390d7c', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '02b082ae9c6f7cbccdca1092efe39da628ff54db', id: this.buttonId, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-expanded": this.isAriaExpanded !== undefined ? this.isAriaExpanded.toString() : undefined, "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && this.renderIcon(), !this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly") && (h("span", { key: 'dcbccae9331b3346928b95a3b67a5ca91c7b5784', class: "button-text" }, h("slot", { key: 'cfe1df4108b70b857f5de7c573c44f75857e6c18' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: '2b85459fda79337827e0bbf0075d565a288e5784', class: "selector-icon svg-icon svg-expand-more" })))));
+        return (h(Host, { key: '7d8076cd91df68d9dca5418d85dd1c8c03a50326', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: 'ac8288ec3b5ad052386f55f2a80072a1669d4f99', id: this.buttonId, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-expanded": this.isAriaExpanded !== undefined ? this.isAriaExpanded.toString() : undefined, "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && this.renderIcon(), !this.buttonType.startsWith("navigational") && !this.buttonType.startsWith("icononly") && (h("span", { key: 'f69049c1e94953af19f18a7e5003cc6a897d986e', class: "button-text" }, h("slot", { key: 'cede22b51b19ea3a1c37a1da06d6df500f567888' }))), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'aacfe1f84361a06f2e5cb624a1563bc99822f418', class: "selector-icon svg-icon svg-expand-more" })))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }
@@ -463,7 +461,7 @@ export class Button {
                 "docs": {
                     "tags": [{
                             "name": "description",
-                            "text": "Visual style of the button. 'primary' for the single preferred action (use sparingly, ideally once per page/section). 'secondary' for other actions, often alongside a primary. 'textonly' for low-emphasis actions. 'icononly' requires icon and tooltip. 'navigational' for icon-only back/forward navigation (e.g. flyout back button). 'pairpositive' and 'pairnegative' must be used together for binary choices (neither is preferred, e.g. Approve/Reject). AI variants apply AI styling automatically \u2014 do not set the icon property on AI types. 'selector' and 'selector-primary' are internal types used by wm-select \u2014 do not use directly."
+                            "text": "Visual style of the button. 'primary' for the single preferred action (use sparingly, ideally once per page/section). 'secondary' for other actions, often alongside a primary. 'textonly' for low-emphasis actions. 'icononly' requires icon and tooltip. 'navigational' for icon-only back/forward navigation (e.g. flyout back button). 'pairpositive' and 'pairnegative' must be used together for binary choices (neither is preferred, e.g. Approve/Reject). AI variants apply AI styling automatically. 'selector' and 'selector-primary' are internal types used by wm-select \u2014 do not use directly."
                         }, {
                             "name": "default",
                             "text": "\"secondary\""
@@ -489,7 +487,7 @@ export class Button {
                 "docs": {
                     "tags": [{
                             "name": "description",
-                            "text": "Icon to display. Required when button-type is 'icononly' or 'navigational'. Formats: '#icon-name' for a commonly-used Ripple icon (e.g. '#edit', '#add-person'), '/path/to/file.svg#symbol-id' for a local SVG sprite symbol, or an MDI character code like 'f3eb' (deprecated). Do not set on AI button types \u2014 their icon is applied automatically."
+                            "text": "Icon to display. Required when button-type is 'icononly' or 'navigational'. Formats: '#icon-name' for a commonly-used Ripple icon (e.g. '#edit', '#add-person'), '/path/to/file.svg#symbol-id' for a local SVG sprite symbol, or an MDI character code like 'f3eb' (deprecated)."
                         }, {
                             "name": "conditionallyRequired",
                             "text": "when button-type is 'icononly' or 'navigational' (conditionallyRequired means that the prop is required, but only if the button-type is 'icononly' or 'navigational')"

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);