@transferwise/neptune-css 14.29.0 → 14.29.2

package/dist/css/popovers.css

@@ -72,6 +72,7 @@ button.close {
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   background-clip: padding-box;
@@ -79,6 +80,34 @@ button.close {
   box-shadow: 0 20px 66px 0 rgba(34, 48, 73, 0.2);
   position: absolute;
 }
+@supports (hyphenate-limit-chars: 1) {
+  .popover {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-theme-personal--forest-green .popover,
 .np-theme-personal--bright-green .popover,
 .np-theme-personal--dark .popover {
@@ -236,6 +265,7 @@ button.close {
   line-height: 1.2;
   line-height: var(--line-height-title);
   letter-spacing: 0;
+  word-wrap: break-word;
   font-size: 1.125rem;
   font-size: var(--font-size-18);
   font-weight: 600;
@@ -293,9 +323,38 @@ button.close {
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   color: #5d7079;
   color: var(--color-content-secondary);
 }
+@supports (hyphenate-limit-chars: 1) {
+  .popover-content {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover-content {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover-content {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover-content {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover-content {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .popover-content > :last-child {
   margin-block-end: 0;
 }

package/dist/css/process.css

@@ -55,6 +55,9 @@
   inset-inline-start: 25%;
   inset-block-start: 25%;
 }
+[dir="rtl"] .process-icon-container {
+  transform: rotate(45deg) scaleX(-1);
+}
 .process-icon-horizontal,
 .process-icon-vertical {
   position: absolute;
@@ -134,37 +137,37 @@
 .process-stopped .process-icon-container {
   display: none;
 }
-.process-xs {
+.process-xxs {
   inline-size: 12px;
   block-size: 12px;
 }
-.process-xs .process-circle {
+.process-xxs .process-circle {
   /* Hide before animation to prevent glitching */
   stroke-dashoffset: 31.41592654px;
   stroke-dasharray: 31.41592654px;
   stroke-width: 1.5px;
 }
-.process-xs.process-danger .process-icon-horizontal {
+.process-xxs.process-danger .process-icon-horizontal {
   inset-block-start: 2.5px;
   block-size: 1px;
 }
-.process-xs.process-danger .process-icon-vertical {
+.process-xxs.process-danger .process-icon-vertical {
   inset-inline-start: 2.5px;
   inline-size: 1px;
 }
-.process-xs .process-icon-horizontal,
-.process-xs .process-icon-vertical {
+.process-xxs .process-icon-horizontal,
+.process-xxs .process-icon-vertical {
   border-radius: 0.5px;
 }
-.process-xs.process-success .process-icon-container {
+.process-xxs.process-success .process-icon-container {
   inline-size: 2.5px;
   block-size: 5px;
   inset-inline-start: 4.5px;
 }
-.process-xs.process-success .process-icon-horizontal {
+.process-xxs.process-success .process-icon-horizontal {
   block-size: 1px;
 }
-.process-xs.process-success .process-icon-vertical {
+.process-xxs.process-success .process-icon-vertical {
   inline-size: 1px;
 }
 .process-xs {
@@ -266,6 +269,9 @@
 .process-xl.process-success .process-icon-vertical {
   inline-size: 8px;
 }
+.process-xxs .process-icon-container {
+  display: none;
+}
 .process-xxs .process-circle {
   animation-name: process-chase-circle-xxs;
 }

package/dist/css/tick.css

@@ -10,10 +10,13 @@
   position: absolute;
   background: #ffffff;
   background: var(--color-background-screen);
-  transform: translateX(0.5px) rotate(-45deg);
+  transform: translateX(-1.5px) rotate(-45deg);
   transform-origin: left bottom;
-  inset-inline-start: 8px;
-  inset-inline-start: var(--size-8);
+}
+[dir="rtl"] .tw-checkbox-check::before,
+[dir="rtl"] .tw-checkbox-check::after {
+  transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
+  transform-origin: right bottom;
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {

package/dist/css/tooltip.css

@@ -51,6 +51,7 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;
   padding-block: 16px;
@@ -65,6 +66,34 @@
   border-radius: 3px;
   box-shadow: 0 1px 28px 0 rgba(34, 48, 73, 0.2);
 }
+@supports (hyphenate-limit-chars: 1) {
+  .tooltip-inner {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .tooltip-inner {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-theme-personal--forest-green .tooltip-inner,
 .np-theme-personal--bright-green .tooltip-inner,
 .np-theme-personal--dark .tooltip-inner {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "14.29.0",
+  "version": "14.29.2",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/less/addons/_spacing-utilities.less

@@ -48,6 +48,8 @@
 }
 
 .np-text-hyphenated {
+  overflow-wrap: break-word;
+
   @supports (hyphenate-limit-chars: 1) {
     hyphens: auto;
     hyphenate-limit-chars: 7 3;

package/src/less/buttons.less

@@ -647,18 +647,10 @@ input[type="button"] {
     display: inline-flex;
     align-items: center;
 
-    .btn-loader {
+    .btn-loader[class] {
       margin-bottom: 0;
-
-      :not([dir="rtl"]) & {
-        margin-left: 16px;
-        margin-right: 0;
-      }
-
-      [dir="rtl"] & {
-        margin-left: 0 !important;
-        margin-right: 16px !important;
-      }
+      margin-left: 16px;
+      margin-right: 0;
     }
   }
 

package/src/less/chevron.less

@@ -7,6 +7,10 @@
 
   &.top {
     transform: rotate(0deg);
+
+    [dir="rtl"] & {
+      transform: rotate(360deg);
+    }
   }
 
   &.right {

package/src/less/core/_typography.less

@@ -135,6 +135,7 @@ small,
   line-height: 155%;
   letter-spacing: -0.006em;
   font-weight: var(--font-weight-regular);
+  .np-text-hyphenated;
 }
 
 /* DEPRECATED: use .np-text-body-default-bold instead */
@@ -149,6 +150,7 @@ small,
   line-height: 155%;
   letter-spacing: -0.006em;
   font-weight: var(--font-weight-semi-bold);
+  .np-text-hyphenated;
 }
 
 /* DEPRECATED: use .np-text-body-large instead  */
@@ -160,6 +162,7 @@ small,
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  .np-text-hyphenated;
 }
 
 /* DEPRECATED: use np-text-body-large-bold instead */
@@ -170,6 +173,7 @@ small,
   font-size: var(--font-size-16);
   line-height: 150%;
   letter-spacing: -0.011em;
+  .np-text-hyphenated;
 }
 
 // LINK
@@ -280,6 +284,14 @@ a,
   }
 }
 
+/* Disable hyphenation for Japanese, Thai, and Chinese — these languages use character-level breaks and should never insert hyphens. */
+:lang(ja),
+:lang(th),
+:lang(zh-CN),
+:lang(zh-HK) {
+  hyphens: none;
+}
+
 :lang(af),
 :lang(sq),
 :lang(eu),

package/src/less/process.less

@@ -84,6 +84,11 @@
   width: 50%;
   left: 25%;
   top: 25%;
+
+  // Icon is purely decorative — keep physical positioning in RTL
+  [dir="rtl"] & {
+    transform: rotate(45deg) scaleX(-1);
+  }
 }
 
 .process-icon-horizontal,
@@ -231,7 +236,7 @@
   }
 }
 .process-size(
-  xs, @process-xxs-radius, @process-xxs-circumference, @process-xxs-stroke, @process-xxs-icon-size, @process-xxs-icon-stroke
+  xxs, @process-xxs-radius, @process-xxs-circumference, @process-xxs-stroke, @process-xxs-icon-size, @process-xxs-icon-stroke
 );
 .process-size(
   xs, @process-xs-radius, @process-xs-circumference, @process-xs-stroke, @process-xs-icon-size, @process-xs-icon-stroke
@@ -244,6 +249,10 @@
 );
 
 .process-xxs {
+  .process-icon-container {
+    display: none;
+  }
+
   .process-circle {
     animation-name: process-chase-circle-xxs;
   }
@@ -379,11 +388,9 @@
 }
 
 .btn .process:first-child {
-  .margin(left, -12px);
-
-  .margin(right, 12px);
-
-  .float(left);
+  margin-left: -12px;
+  margin-right: 12px;
+  float: left;
 }
 
 .btn-block .process:first-child {

package/src/less/tick.less

@@ -11,9 +11,13 @@
     content: "";
     position: absolute;
     background: var(--color-background-screen);
-    transform: translateX(0.5px) rotate(-45deg);
+    transform: translateX(-1.5px) rotate(-45deg);
     transform-origin: left bottom;
-    left: var(--size-8);
+
+    [dir="rtl"] & {
+      transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
+      transform-origin: right bottom;
+    }
   }
 
   .has-error {
@@ -34,4 +38,4 @@
     height: 2px;
     width: 11px;
   }
-}
+}