@deriv-web-design/ui 0.1.36 → 0.1.38

package/block-registry.json

@@ -7525,7 +7525,8 @@
     "optionalFields": [
       "variant",
       "title",
-      "description"
+      "description",
+      "labels"
     ],
     "variants": [
       "margin",
@@ -7563,6 +7564,73 @@
         "required": false,
         "maxLength": 200
       },
+      "labels": {
+        "type": "object",
+        "required": false,
+        "description": "Optional UI copy overrides for Raven / Makima i18n. Flat keys replace strings in the active block; swapPoints/swapPercentage cover each swap tab. Omit any key to keep the English default. Does not add variants.",
+        "objectFields": {
+          "calculations": {
+            "type": "array",
+            "required": false,
+            "description": "Replaces the annotated calculation strips when set."
+          },
+          "exampleHeading": {
+            "type": "string",
+            "required": false,
+            "maxLength": 40
+          },
+          "exampleIntro": {
+            "type": "string",
+            "required": false,
+            "maxLength": 400
+          },
+          "exampleLead": {
+            "type": "string",
+            "required": false,
+            "maxLength": 120
+          },
+          "formulaBlocks": {
+            "type": "array",
+            "required": false,
+            "description": "Replaces the Formula column blocks when set."
+          },
+          "formulaHeading": {
+            "type": "string",
+            "required": false,
+            "maxLength": 40
+          },
+          "note": {
+            "type": "string",
+            "required": false,
+            "maxLength": 400
+          },
+          "resultText": {
+            "type": "string",
+            "required": false,
+            "maxLength": 300
+          },
+          "swapPercentage": {
+            "type": "object",
+            "required": false,
+            "description": "Body overrides for the swap In-percentage tab (same shape as swapPoints)."
+          },
+          "swapPoints": {
+            "type": "object",
+            "required": false,
+            "description": "Body overrides for the swap In-points tab (formulaBlocks, exampleIntro, calculations, resultText, note, …)."
+          },
+          "swapTabPercentage": {
+            "type": "string",
+            "required": false,
+            "maxLength": 60
+          },
+          "swapTabPoints": {
+            "type": "string",
+            "required": false,
+            "maxLength": 60
+          }
+        }
+      },
       "title": {
         "type": "string",
         "required": false,

package/components.manifest.json

@@ -4103,6 +4103,11 @@
           "required": false,
           "description": "Section description, shown under the title. Defaults to the canonical copy for `variant`."
         },
+        "labels": {
+          "type": "TradingCalculatorHowToLabels",
+          "required": false,
+          "description": "Optional UI copy overrides for Raven / Makima i18n. Omit to keep English formula/example/chip defaults."
+        },
         "title": {
           "type": "string",
           "required": false,

package/dist/index.css

@@ -11266,7 +11266,8 @@
 }
 .tchow-stripWrap {
   width: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: visible;
 }
 .tchow-strip {
   display: inline-grid;
@@ -11297,41 +11298,45 @@
   text-align: center;
 }
 .tchow-stripValueText--labeled {
-  min-width: 4rem;
+  min-width: 4.5rem;
 }
 .tchow-stripCaption {
+  justify-self: center;
   align-self: start;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--spacing-4);
-  min-height: 1px;
+  min-width: 0;
+}
+.tchow-stripCaption--labeled {
+  box-sizing: border-box;
+  width: 5.5rem;
+  max-width: 5.5rem;
 }
 .tchow-stripArrow {
   color: var(--color-slate-500);
   flex-shrink: 0;
 }
 .tchow-stripLabel {
-  position: relative;
-  width: 0;
-  overflow: visible;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  text-align: center;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.25;
   font-family: var(--font-family-base);
   font-size: var(--typography-body-xs-font-size);
   color: var(--text-secondary);
-  white-space: nowrap;
 }
 .tchow-stripLabelText {
-  position: absolute;
-  left: 0;
-  transform: translateX(-50%);
-}
-.tchow-stripLabel--edge {
-  width: auto;
-  text-align: center;
-}
-.tchow-stripLabel--edge .tchow-stripLabelText {
-  position: static;
-  transform: none;
+  display: block;
+  width: 100%;
+  min-width: 0;
 }
 
 /* templates/CryptoTradeConverter/CryptoTradeConverter.css */