@reuters-graphics/graphics-components 3.0.2 → 3.0.4

package/dist/scss/tokens/spacers/mixins/_fluid-padding.scss

@@ -26,16 +26,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '0');
 }
 @mixin fpt-0 {
-  padding-top: map.get($fluid-padding-levels, '0');
+  padding-block-start: map.get($fluid-padding-levels, '0');
 }
 @mixin fpb-0 {
-  padding-bottom: map.get($fluid-padding-levels, '0');
+  padding-block-end: map.get($fluid-padding-levels, '0');
 }
 @mixin fpl-0 {
-  padding-left: map.get($fluid-padding-levels, '0');
+  padding-inline-start: map.get($fluid-padding-levels, '0');
 }
 @mixin fpr-0 {
-  padding-right: map.get($fluid-padding-levels, '0');
+  padding-inline-end: map.get($fluid-padding-levels, '0');
 }
 @mixin \!fp-0 {
   padding: map.get($fluid-padding-levels, '0') !important;
@@ -47,16 +47,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '0') !important;
 }
 @mixin \!fpt-0 {
-  padding-top: map.get($fluid-padding-levels, '0') !important;
+  padding-block-start: map.get($fluid-padding-levels, '0') !important;
 }
 @mixin \!fpb-0 {
-  padding-bottom: map.get($fluid-padding-levels, '0') !important;
+  padding-block-end: map.get($fluid-padding-levels, '0') !important;
 }
 @mixin \!fpl-0 {
-  padding-left: map.get($fluid-padding-levels, '0') !important;
+  padding-inline-start: map.get($fluid-padding-levels, '0') !important;
 }
 @mixin \!fpr-0 {
-  padding-right: map.get($fluid-padding-levels, '0') !important;
+  padding-inline-end: map.get($fluid-padding-levels, '0') !important;
 }
 
 @mixin fp-1 {
@@ -69,16 +69,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '1');
 }
 @mixin fpt-1 {
-  padding-top: map.get($fluid-padding-levels, '1');
+  padding-block-start: map.get($fluid-padding-levels, '1');
 }
 @mixin fpb-1 {
-  padding-bottom: map.get($fluid-padding-levels, '1');
+  padding-block-end: map.get($fluid-padding-levels, '1');
 }
 @mixin fpl-1 {
-  padding-left: map.get($fluid-padding-levels, '1');
+  padding-inline-start: map.get($fluid-padding-levels, '1');
 }
 @mixin fpr-1 {
-  padding-right: map.get($fluid-padding-levels, '1');
+  padding-inline-end: map.get($fluid-padding-levels, '1');
 }
 @mixin \!fp-1 {
   padding: map.get($fluid-padding-levels, '1') !important;
@@ -90,16 +90,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '1') !important;
 }
 @mixin \!fpt-1 {
-  padding-top: map.get($fluid-padding-levels, '1') !important;
+  padding-block-start: map.get($fluid-padding-levels, '1') !important;
 }
 @mixin \!fpb-1 {
-  padding-bottom: map.get($fluid-padding-levels, '1') !important;
+  padding-block-end: map.get($fluid-padding-levels, '1') !important;
 }
 @mixin \!fpl-1 {
-  padding-left: map.get($fluid-padding-levels, '1') !important;
+  padding-inline-start: map.get($fluid-padding-levels, '1') !important;
 }
 @mixin \!fpr-1 {
-  padding-right: map.get($fluid-padding-levels, '1') !important;
+  padding-inline-end: map.get($fluid-padding-levels, '1') !important;
 }
 
 @mixin fp-2 {
@@ -112,16 +112,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '2');
 }
 @mixin fpt-2 {
-  padding-top: map.get($fluid-padding-levels, '2');
+  padding-block-start: map.get($fluid-padding-levels, '2');
 }
 @mixin fpb-2 {
-  padding-bottom: map.get($fluid-padding-levels, '2');
+  padding-block-end: map.get($fluid-padding-levels, '2');
 }
 @mixin fpl-2 {
-  padding-left: map.get($fluid-padding-levels, '2');
+  padding-inline-start: map.get($fluid-padding-levels, '2');
 }
 @mixin fpr-2 {
-  padding-right: map.get($fluid-padding-levels, '2');
+  padding-inline-end: map.get($fluid-padding-levels, '2');
 }
 @mixin \!fp-2 {
   padding: map.get($fluid-padding-levels, '2') !important;
@@ -133,16 +133,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '2') !important;
 }
 @mixin \!fpt-2 {
-  padding-top: map.get($fluid-padding-levels, '2') !important;
+  padding-block-start: map.get($fluid-padding-levels, '2') !important;
 }
 @mixin \!fpb-2 {
-  padding-bottom: map.get($fluid-padding-levels, '2') !important;
+  padding-block-end: map.get($fluid-padding-levels, '2') !important;
 }
 @mixin \!fpl-2 {
-  padding-left: map.get($fluid-padding-levels, '2') !important;
+  padding-inline-start: map.get($fluid-padding-levels, '2') !important;
 }
 @mixin \!fpr-2 {
-  padding-right: map.get($fluid-padding-levels, '2') !important;
+  padding-inline-end: map.get($fluid-padding-levels, '2') !important;
 }
 
 @mixin fp-3 {
@@ -155,16 +155,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '3');
 }
 @mixin fpt-3 {
-  padding-top: map.get($fluid-padding-levels, '3');
+  padding-block-start: map.get($fluid-padding-levels, '3');
 }
 @mixin fpb-3 {
-  padding-bottom: map.get($fluid-padding-levels, '3');
+  padding-block-end: map.get($fluid-padding-levels, '3');
 }
 @mixin fpl-3 {
-  padding-left: map.get($fluid-padding-levels, '3');
+  padding-inline-start: map.get($fluid-padding-levels, '3');
 }
 @mixin fpr-3 {
-  padding-right: map.get($fluid-padding-levels, '3');
+  padding-inline-end: map.get($fluid-padding-levels, '3');
 }
 @mixin \!fp-3 {
   padding: map.get($fluid-padding-levels, '3') !important;
@@ -176,16 +176,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '3') !important;
 }
 @mixin \!fpt-3 {
-  padding-top: map.get($fluid-padding-levels, '3') !important;
+  padding-block-start: map.get($fluid-padding-levels, '3') !important;
 }
 @mixin \!fpb-3 {
-  padding-bottom: map.get($fluid-padding-levels, '3') !important;
+  padding-block-end: map.get($fluid-padding-levels, '3') !important;
 }
 @mixin \!fpl-3 {
-  padding-left: map.get($fluid-padding-levels, '3') !important;
+  padding-inline-start: map.get($fluid-padding-levels, '3') !important;
 }
 @mixin \!fpr-3 {
-  padding-right: map.get($fluid-padding-levels, '3') !important;
+  padding-inline-end: map.get($fluid-padding-levels, '3') !important;
 }
 
 @mixin fp-4 {
@@ -198,16 +198,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '4');
 }
 @mixin fpt-4 {
-  padding-top: map.get($fluid-padding-levels, '4');
+  padding-block-start: map.get($fluid-padding-levels, '4');
 }
 @mixin fpb-4 {
-  padding-bottom: map.get($fluid-padding-levels, '4');
+  padding-block-end: map.get($fluid-padding-levels, '4');
 }
 @mixin fpl-4 {
-  padding-left: map.get($fluid-padding-levels, '4');
+  padding-inline-start: map.get($fluid-padding-levels, '4');
 }
 @mixin fpr-4 {
-  padding-right: map.get($fluid-padding-levels, '4');
+  padding-inline-end: map.get($fluid-padding-levels, '4');
 }
 @mixin \!fp-4 {
   padding: map.get($fluid-padding-levels, '4') !important;
@@ -219,16 +219,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '4') !important;
 }
 @mixin \!fpt-4 {
-  padding-top: map.get($fluid-padding-levels, '4') !important;
+  padding-block-start: map.get($fluid-padding-levels, '4') !important;
 }
 @mixin \!fpb-4 {
-  padding-bottom: map.get($fluid-padding-levels, '4') !important;
+  padding-block-end: map.get($fluid-padding-levels, '4') !important;
 }
 @mixin \!fpl-4 {
-  padding-left: map.get($fluid-padding-levels, '4') !important;
+  padding-inline-start: map.get($fluid-padding-levels, '4') !important;
 }
 @mixin \!fpr-4 {
-  padding-right: map.get($fluid-padding-levels, '4') !important;
+  padding-inline-end: map.get($fluid-padding-levels, '4') !important;
 }
 
 @mixin fp-5 {
@@ -241,16 +241,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '5');
 }
 @mixin fpt-5 {
-  padding-top: map.get($fluid-padding-levels, '5');
+  padding-block-start: map.get($fluid-padding-levels, '5');
 }
 @mixin fpb-5 {
-  padding-bottom: map.get($fluid-padding-levels, '5');
+  padding-block-end: map.get($fluid-padding-levels, '5');
 }
 @mixin fpl-5 {
-  padding-left: map.get($fluid-padding-levels, '5');
+  padding-inline-start: map.get($fluid-padding-levels, '5');
 }
 @mixin fpr-5 {
-  padding-right: map.get($fluid-padding-levels, '5');
+  padding-inline-end: map.get($fluid-padding-levels, '5');
 }
 @mixin \!fp-5 {
   padding: map.get($fluid-padding-levels, '5') !important;
@@ -262,16 +262,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '5') !important;
 }
 @mixin \!fpt-5 {
-  padding-top: map.get($fluid-padding-levels, '5') !important;
+  padding-block-start: map.get($fluid-padding-levels, '5') !important;
 }
 @mixin \!fpb-5 {
-  padding-bottom: map.get($fluid-padding-levels, '5') !important;
+  padding-block-end: map.get($fluid-padding-levels, '5') !important;
 }
 @mixin \!fpl-5 {
-  padding-left: map.get($fluid-padding-levels, '5') !important;
+  padding-inline-start: map.get($fluid-padding-levels, '5') !important;
 }
 @mixin \!fpr-5 {
-  padding-right: map.get($fluid-padding-levels, '5') !important;
+  padding-inline-end: map.get($fluid-padding-levels, '5') !important;
 }
 
 @mixin fp-6 {
@@ -284,16 +284,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '6');
 }
 @mixin fpt-6 {
-  padding-top: map.get($fluid-padding-levels, '6');
+  padding-block-start: map.get($fluid-padding-levels, '6');
 }
 @mixin fpb-6 {
-  padding-bottom: map.get($fluid-padding-levels, '6');
+  padding-block-end: map.get($fluid-padding-levels, '6');
 }
 @mixin fpl-6 {
-  padding-left: map.get($fluid-padding-levels, '6');
+  padding-inline-start: map.get($fluid-padding-levels, '6');
 }
 @mixin fpr-6 {
-  padding-right: map.get($fluid-padding-levels, '6');
+  padding-inline-end: map.get($fluid-padding-levels, '6');
 }
 @mixin \!fp-6 {
   padding: map.get($fluid-padding-levels, '6') !important;
@@ -305,16 +305,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '6') !important;
 }
 @mixin \!fpt-6 {
-  padding-top: map.get($fluid-padding-levels, '6') !important;
+  padding-block-start: map.get($fluid-padding-levels, '6') !important;
 }
 @mixin \!fpb-6 {
-  padding-bottom: map.get($fluid-padding-levels, '6') !important;
+  padding-block-end: map.get($fluid-padding-levels, '6') !important;
 }
 @mixin \!fpl-6 {
-  padding-left: map.get($fluid-padding-levels, '6') !important;
+  padding-inline-start: map.get($fluid-padding-levels, '6') !important;
 }
 @mixin \!fpr-6 {
-  padding-right: map.get($fluid-padding-levels, '6') !important;
+  padding-inline-end: map.get($fluid-padding-levels, '6') !important;
 }
 
 @mixin fp-7 {
@@ -327,16 +327,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '7');
 }
 @mixin fpt-7 {
-  padding-top: map.get($fluid-padding-levels, '7');
+  padding-block-start: map.get($fluid-padding-levels, '7');
 }
 @mixin fpb-7 {
-  padding-bottom: map.get($fluid-padding-levels, '7');
+  padding-block-end: map.get($fluid-padding-levels, '7');
 }
 @mixin fpl-7 {
-  padding-left: map.get($fluid-padding-levels, '7');
+  padding-inline-start: map.get($fluid-padding-levels, '7');
 }
 @mixin fpr-7 {
-  padding-right: map.get($fluid-padding-levels, '7');
+  padding-inline-end: map.get($fluid-padding-levels, '7');
 }
 @mixin \!fp-7 {
   padding: map.get($fluid-padding-levels, '7') !important;
@@ -348,16 +348,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '7') !important;
 }
 @mixin \!fpt-7 {
-  padding-top: map.get($fluid-padding-levels, '7') !important;
+  padding-block-start: map.get($fluid-padding-levels, '7') !important;
 }
 @mixin \!fpb-7 {
-  padding-bottom: map.get($fluid-padding-levels, '7') !important;
+  padding-block-end: map.get($fluid-padding-levels, '7') !important;
 }
 @mixin \!fpl-7 {
-  padding-left: map.get($fluid-padding-levels, '7') !important;
+  padding-inline-start: map.get($fluid-padding-levels, '7') !important;
 }
 @mixin \!fpr-7 {
-  padding-right: map.get($fluid-padding-levels, '7') !important;
+  padding-inline-end: map.get($fluid-padding-levels, '7') !important;
 }
 
 @mixin fp-8 {
@@ -370,16 +370,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '8');
 }
 @mixin fpt-8 {
-  padding-top: map.get($fluid-padding-levels, '8');
+  padding-block-start: map.get($fluid-padding-levels, '8');
 }
 @mixin fpb-8 {
-  padding-bottom: map.get($fluid-padding-levels, '8');
+  padding-block-end: map.get($fluid-padding-levels, '8');
 }
 @mixin fpl-8 {
-  padding-left: map.get($fluid-padding-levels, '8');
+  padding-inline-start: map.get($fluid-padding-levels, '8');
 }
 @mixin fpr-8 {
-  padding-right: map.get($fluid-padding-levels, '8');
+  padding-inline-end: map.get($fluid-padding-levels, '8');
 }
 @mixin \!fp-8 {
   padding: map.get($fluid-padding-levels, '8') !important;
@@ -391,16 +391,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '8') !important;
 }
 @mixin \!fpt-8 {
-  padding-top: map.get($fluid-padding-levels, '8') !important;
+  padding-block-start: map.get($fluid-padding-levels, '8') !important;
 }
 @mixin \!fpb-8 {
-  padding-bottom: map.get($fluid-padding-levels, '8') !important;
+  padding-block-end: map.get($fluid-padding-levels, '8') !important;
 }
 @mixin \!fpl-8 {
-  padding-left: map.get($fluid-padding-levels, '8') !important;
+  padding-inline-start: map.get($fluid-padding-levels, '8') !important;
 }
 @mixin \!fpr-8 {
-  padding-right: map.get($fluid-padding-levels, '8') !important;
+  padding-inline-end: map.get($fluid-padding-levels, '8') !important;
 }
 
 @mixin fp-9 {
@@ -413,16 +413,16 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '9');
 }
 @mixin fpt-9 {
-  padding-top: map.get($fluid-padding-levels, '9');
+  padding-block-start: map.get($fluid-padding-levels, '9');
 }
 @mixin fpb-9 {
-  padding-bottom: map.get($fluid-padding-levels, '9');
+  padding-block-end: map.get($fluid-padding-levels, '9');
 }
 @mixin fpl-9 {
-  padding-left: map.get($fluid-padding-levels, '9');
+  padding-inline-start: map.get($fluid-padding-levels, '9');
 }
 @mixin fpr-9 {
-  padding-right: map.get($fluid-padding-levels, '9');
+  padding-inline-end: map.get($fluid-padding-levels, '9');
 }
 @mixin \!fp-9 {
   padding: map.get($fluid-padding-levels, '9') !important;
@@ -434,37 +434,37 @@ $fluid-padding-levels: (
   padding-block: map.get($fluid-padding-levels, '9') !important;
 }
 @mixin \!fpt-9 {
-  padding-top: map.get($fluid-padding-levels, '9') !important;
+  padding-block-start: map.get($fluid-padding-levels, '9') !important;
 }
 @mixin \!fpb-9 {
-  padding-bottom: map.get($fluid-padding-levels, '9') !important;
+  padding-block-end: map.get($fluid-padding-levels, '9') !important;
 }
 @mixin \!fpl-9 {
-  padding-left: map.get($fluid-padding-levels, '9') !important;
+  padding-inline-start: map.get($fluid-padding-levels, '9') !important;
 }
 @mixin \!fpr-9 {
-  padding-right: map.get($fluid-padding-levels, '9') !important;
+  padding-inline-end: map.get($fluid-padding-levels, '9') !important;
 }
 
 %fp-auto {
   padding: auto;
 }
 %fpx-auto {
-  padding-right: auto;
-  padding-left: auto;
+  padding-inline-start: auto;
+  padding-inline-end: auto;
 }
 %fpy-auto {
-  padding-top: auto;
-  padding-bottom: auto;
+  padding-block-start: auto;
+  padding-block-end: auto;
 }
 %\!fp-auto {
   padding: auto !important;
 }
 %\!fpx-auto {
-  padding-right: auto !important;
-  padding-left: auto !important;
+  padding-inline-start: auto !important;
+  padding-inline-end: auto !important;
 }
 %\!fpy-auto {
-  padding-top: auto !important;
-  padding-bottom: auto !important;
+  padding-block-start: auto !important;
+  padding-block-end: auto !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -92,6 +92,7 @@
     "proper-url-join": "^2.1.2",
     "pym.js": "^1.3.2",
     "slugify": "^1.6.6",
+    "storybook-addon-rtl": "^1.1.0",
     "svelte-fa": "^4.0.3",
     "svelte-intersection-observer": "^1.0.0"
   },