@reuters-graphics/graphics-components 3.0.2 → 3.0.4

package/dist/components/Video/Video.stories.svelte

@@ -95,8 +95,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 */
 /* Scales by 1.125 */
 p.notes {
-  margin-top: 0;
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   font-family: var(--theme-font-family-note);
   font-size: calc(0.9 * var(--theme-font-size-base));
   color: var(--theme-colour-text-primary);

package/dist/scss/tokens/borders/_border-radius.scss

@@ -26,254 +26,254 @@
   border-radius: 9999px;
 }
 .rounded-t-none {
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
+  border-start-start-radius: 0px;
+  border-start-end-radius: 0px;
 }
 .rounded-t-sm {
-  border-top-left-radius: 0.125rem;
-  border-top-right-radius: 0.125rem;
+  border-start-start-radius: 0.125rem;
+  border-start-end-radius: 0.125rem;
 }
 .rounded-t {
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
+  border-start-start-radius: 0.25rem;
+  border-start-end-radius: 0.25rem;
 }
 .rounded-t-md {
-  border-top-left-radius: 0.375rem;
-  border-top-right-radius: 0.375rem;
+  border-start-start-radius: 0.375rem;
+  border-start-end-radius: 0.375rem;
 }
 .rounded-t-lg {
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
+  border-start-start-radius: 0.5rem;
+  border-start-end-radius: 0.5rem;
 }
 .rounded-t-xl {
-  border-top-left-radius: 0.75rem;
-  border-top-right-radius: 0.75rem;
+  border-start-start-radius: 0.75rem;
+  border-start-end-radius: 0.75rem;
 }
 .rounded-t-2xl {
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
+  border-start-start-radius: 1rem;
+  border-start-end-radius: 1rem;
 }
 .rounded-t-3xl {
-  border-top-left-radius: 1.5rem;
-  border-top-right-radius: 1.5rem;
+  border-start-start-radius: 1.5rem;
+  border-start-end-radius: 1.5rem;
 }
 .rounded-t-full {
-  border-top-left-radius: 9999px;
-  border-top-right-radius: 9999px;
+  border-start-start-radius: 9999px;
+  border-start-end-radius: 9999px;
 }
 .rounded-r-none {
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
+  border-start-end-radius: 0px;
+  border-end-end-radius: 0px;
 }
 .rounded-r-sm {
-  border-top-right-radius: 0.125rem;
-  border-bottom-right-radius: 0.125rem;
+  border-start-end-radius: 0.125rem;
+  border-end-end-radius: 0.125rem;
 }
 .rounded-r {
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
+  border-start-end-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
 }
 .rounded-r-md {
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
+  border-start-end-radius: 0.375rem;
+  border-end-end-radius: 0.375rem;
 }
 .rounded-r-lg {
-  border-top-right-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
+  border-start-end-radius: 0.5rem;
+  border-end-end-radius: 0.5rem;
 }
 .rounded-r-xl {
-  border-top-right-radius: 0.75rem;
-  border-bottom-right-radius: 0.75rem;
+  border-start-end-radius: 0.75rem;
+  border-end-end-radius: 0.75rem;
 }
 .rounded-r-2xl {
-  border-top-right-radius: 1rem;
-  border-bottom-right-radius: 1rem;
+  border-start-end-radius: 1rem;
+  border-end-end-radius: 1rem;
 }
 .rounded-r-3xl {
-  border-top-right-radius: 1.5rem;
-  border-bottom-right-radius: 1.5rem;
+  border-start-end-radius: 1.5rem;
+  border-end-end-radius: 1.5rem;
 }
 .rounded-r-full {
-  border-top-right-radius: 9999px;
-  border-bottom-right-radius: 9999px;
+  border-start-end-radius: 9999px;
+  border-end-end-radius: 9999px;
 }
 .rounded-b-none {
-  border-bottom-right-radius: 0px;
-  border-bottom-left-radius: 0px;
+  border-end-end-radius: 0px;
+  border-end-start-radius: 0px;
 }
 .rounded-b-sm {
-  border-bottom-right-radius: 0.125rem;
-  border-bottom-left-radius: 0.125rem;
+  border-end-end-radius: 0.125rem;
+  border-end-start-radius: 0.125rem;
 }
 .rounded-b {
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
 }
 .rounded-b-md {
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
+  border-end-end-radius: 0.375rem;
+  border-end-start-radius: 0.375rem;
 }
 .rounded-b-lg {
-  border-bottom-right-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
+  border-end-end-radius: 0.5rem;
+  border-end-start-radius: 0.5rem;
 }
 .rounded-b-xl {
-  border-bottom-right-radius: 0.75rem;
-  border-bottom-left-radius: 0.75rem;
+  border-end-end-radius: 0.75rem;
+  border-end-start-radius: 0.75rem;
 }
 .rounded-b-2xl {
-  border-bottom-right-radius: 1rem;
-  border-bottom-left-radius: 1rem;
+  border-end-end-radius: 1rem;
+  border-end-start-radius: 1rem;
 }
 .rounded-b-3xl {
-  border-bottom-right-radius: 1.5rem;
-  border-bottom-left-radius: 1.5rem;
+  border-end-end-radius: 1.5rem;
+  border-end-start-radius: 1.5rem;
 }
 .rounded-b-full {
-  border-bottom-right-radius: 9999px;
-  border-bottom-left-radius: 9999px;
+  border-end-end-radius: 9999px;
+  border-end-start-radius: 9999px;
 }
 .rounded-l-none {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
+  border-start-start-radius: 0px;
+  border-end-start-radius: 0px;
 }
 .rounded-l-sm {
-  border-top-left-radius: 0.125rem;
-  border-bottom-left-radius: 0.125rem;
+  border-start-start-radius: 0.125rem;
+  border-end-start-radius: 0.125rem;
 }
 .rounded-l {
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-start-start-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
 }
 .rounded-l-md {
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
+  border-start-start-radius: 0.375rem;
+  border-end-start-radius: 0.375rem;
 }
 .rounded-l-lg {
-  border-top-left-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
+  border-start-start-radius: 0.5rem;
+  border-end-start-radius: 0.5rem;
 }
 .rounded-l-xl {
-  border-top-left-radius: 0.75rem;
-  border-bottom-left-radius: 0.75rem;
+  border-start-start-radius: 0.75rem;
+  border-end-start-radius: 0.75rem;
 }
 .rounded-l-2xl {
-  border-top-left-radius: 1rem;
-  border-bottom-left-radius: 1rem;
+  border-start-start-radius: 1rem;
+  border-end-start-radius: 1rem;
 }
 .rounded-l-3xl {
-  border-top-left-radius: 1.5rem;
-  border-bottom-left-radius: 1.5rem;
+  border-start-start-radius: 1.5rem;
+  border-end-start-radius: 1.5rem;
 }
 .rounded-l-full {
-  border-top-left-radius: 9999px;
-  border-bottom-left-radius: 9999px;
+  border-start-start-radius: 9999px;
+  border-end-start-radius: 9999px;
 }
 .rounded-tl-none {
-  border-top-left-radius: 0px;
+  border-start-start-radius: 0px;
 }
 .rounded-tl-sm {
-  border-top-left-radius: 0.125rem;
+  border-start-start-radius: 0.125rem;
 }
 .rounded-tl {
-  border-top-left-radius: 0.25rem;
+  border-start-start-radius: 0.25rem;
 }
 .rounded-tl-md {
-  border-top-left-radius: 0.375rem;
+  border-start-start-radius: 0.375rem;
 }
 .rounded-tl-lg {
-  border-top-left-radius: 0.5rem;
+  border-start-start-radius: 0.5rem;
 }
 .rounded-tl-xl {
-  border-top-left-radius: 0.75rem;
+  border-start-start-radius: 0.75rem;
 }
 .rounded-tl-2xl {
-  border-top-left-radius: 1rem;
+  border-start-start-radius: 1rem;
 }
 .rounded-tl-3xl {
-  border-top-left-radius: 1.5rem;
+  border-start-start-radius: 1.5rem;
 }
 .rounded-tl-full {
-  border-top-left-radius: 9999px;
+  border-start-start-radius: 9999px;
 }
 .rounded-tr-none {
-  border-top-right-radius: 0px;
+  border-start-end-radius: 0px;
 }
 .rounded-tr-sm {
-  border-top-right-radius: 0.125rem;
+  border-start-end-radius: 0.125rem;
 }
 .rounded-tr {
-  border-top-right-radius: 0.25rem;
+  border-start-end-radius: 0.25rem;
 }
 .rounded-tr-md {
-  border-top-right-radius: 0.375rem;
+  border-start-end-radius: 0.375rem;
 }
 .rounded-tr-lg {
-  border-top-right-radius: 0.5rem;
+  border-start-end-radius: 0.5rem;
 }
 .rounded-tr-xl {
-  border-top-right-radius: 0.75rem;
+  border-start-end-radius: 0.75rem;
 }
 .rounded-tr-2xl {
-  border-top-right-radius: 1rem;
+  border-start-end-radius: 1rem;
 }
 .rounded-tr-3xl {
-  border-top-right-radius: 1.5rem;
+  border-start-end-radius: 1.5rem;
 }
 .rounded-tr-full {
-  border-top-right-radius: 9999px;
+  border-start-end-radius: 9999px;
 }
 .rounded-br-none {
-  border-bottom-right-radius: 0px;
+  border-end-end-radius: 0px;
 }
 .rounded-br-sm {
-  border-bottom-right-radius: 0.125rem;
+  border-end-end-radius: 0.125rem;
 }
 .rounded-br {
-  border-bottom-right-radius: 0.25rem;
+  border-end-end-radius: 0.25rem;
 }
 .rounded-br-md {
-  border-bottom-right-radius: 0.375rem;
+  border-end-end-radius: 0.375rem;
 }
 .rounded-br-lg {
-  border-bottom-right-radius: 0.5rem;
+  border-end-end-radius: 0.5rem;
 }
 .rounded-br-xl {
-  border-bottom-right-radius: 0.75rem;
+  border-end-end-radius: 0.75rem;
 }
 .rounded-br-2xl {
-  border-bottom-right-radius: 1rem;
+  border-end-end-radius: 1rem;
 }
 .rounded-br-3xl {
-  border-bottom-right-radius: 1.5rem;
+  border-end-end-radius: 1.5rem;
 }
 .rounded-br-full {
-  border-bottom-right-radius: 9999px;
+  border-end-end-radius: 9999px;
 }
 .rounded-bl-none {
-  border-bottom-left-radius: 0px;
+  border-end-start-radius: 0px;
 }
 .rounded-bl-sm {
-  border-bottom-left-radius: 0.125rem;
+  border-end-start-radius: 0.125rem;
 }
 .rounded-bl {
-  border-bottom-left-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
 }
 .rounded-bl-md {
-  border-bottom-left-radius: 0.375rem;
+  border-end-start-radius: 0.375rem;
 }
 .rounded-bl-lg {
-  border-bottom-left-radius: 0.5rem;
+  border-end-start-radius: 0.5rem;
 }
 .rounded-bl-xl {
-  border-bottom-left-radius: 0.75rem;
+  border-end-start-radius: 0.75rem;
 }
 .rounded-bl-2xl {
-  border-bottom-left-radius: 1rem;
+  border-end-start-radius: 1rem;
 }
 .rounded-bl-3xl {
-  border-bottom-left-radius: 1.5rem;
+  border-end-start-radius: 1.5rem;
 }
 .rounded-bl-full {
-  border-bottom-left-radius: 9999px;
+  border-end-start-radius: 9999px;
 }

package/dist/scss/tokens/borders/_border-width.scss

@@ -14,102 +14,102 @@
   border-width: 1px;
 }
 .border-x-0 {
-  border-left-width: 0px;
-  border-right-width: 0px;
+  border-inline-start-width: 0px;
+  border-inline-end-width: 0px;
 }
 .border-x-2 {
-  border-left-width: 2px;
-  border-right-width: 2px;
+  border-inline-start-width: 2px;
+  border-inline-end-width: 2px;
 }
 .border-x-4 {
-  border-left-width: 4px;
-  border-right-width: 4px;
+  border-inline-start-width: 4px;
+  border-inline-end-width: 4px;
 }
 .border-x-8 {
-  border-left-width: 8px;
-  border-right-width: 8px;
+  border-inline-start-width: 8px;
+  border-inline-end-width: 8px;
 }
 .border-x {
-  border-left-width: 1px;
-  border-right-width: 1px;
+  border-inline-start-width: 1px;
+  border-inline-end-width: 1px;
 }
 .border-y-0 {
-  border-top-width: 0px;
-  border-bottom-width: 0px;
+  border-block-start-width: 0px;
+  border-block-end-width: 0px;
 }
 .border-y-2 {
-  border-top-width: 2px;
-  border-bottom-width: 2px;
+  border-block-start-width: 2px;
+  border-block-end-width: 2px;
 }
 .border-y-4 {
-  border-top-width: 4px;
-  border-bottom-width: 4px;
+  border-block-start-width: 4px;
+  border-block-end-width: 4px;
 }
 .border-y-8 {
-  border-top-width: 8px;
-  border-bottom-width: 8px;
+  border-block-start-width: 8px;
+  border-block-end-width: 8px;
 }
 .border-y {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
+  border-block-start-width: 1px;
+  border-block-end-width: 1px;
 }
 .border-t-0 {
-  border-top-width: 0px;
+  border-block-start-width: 0px;
 }
 .border-t-2 {
-  border-top-width: 2px;
+  border-block-start-width: 2px;
 }
 .border-t-4 {
-  border-top-width: 4px;
+  border-block-start-width: 4px;
 }
 .border-t-8 {
-  border-top-width: 8px;
+  border-block-start-width: 8px;
 }
 .border-t {
-  border-top-width: 1px;
+  border-block-start-width: 1px;
 }
 .border-r-0 {
-  border-right-width: 0px;
+  border-inline-end-width: 0px;
 }
 .border-r-2 {
-  border-right-width: 2px;
+  border-inline-end-width: 2px;
 }
 .border-r-4 {
-  border-right-width: 4px;
+  border-inline-end-width: 4px;
 }
 .border-r-8 {
-  border-right-width: 8px;
+  border-inline-end-width: 8px;
 }
 .border-r {
-  border-right-width: 1px;
+  border-inline-end-width: 1px;
 }
 .border-b-0 {
-  border-bottom-width: 0px;
+  border-block-end-width: 0px;
 }
 .border-b-2 {
-  border-bottom-width: 2px;
+  border-block-end-width: 2px;
 }
 .border-b-4 {
-  border-bottom-width: 4px;
+  border-block-end-width: 4px;
 }
 .border-b-8 {
-  border-bottom-width: 8px;
+  border-block-end-width: 8px;
 }
 .border-b {
-  border-bottom-width: 1px;
+  border-block-end-width: 1px;
 }
 .border-l-0 {
-  border-left-width: 0px;
+  border-inline-start-width: 0px;
 }
 .border-l-2 {
-  border-left-width: 2px;
+  border-inline-start-width: 2px;
 }
 .border-l-4 {
-  border-left-width: 4px;
+  border-inline-start-width: 4px;
 }
 .border-l-8 {
-  border-left-width: 8px;
+  border-inline-start-width: 8px;
 }
 .border-l {
-  border-left-width: 1px;
+  border-inline-start-width: 1px;
 }

package/dist/scss/tokens/sizing/_width.scss

@@ -3,7 +3,7 @@
 }
 .w-full-fluid {
   width: calc(100% + 30px);
-  margin-left: -15px !important;
+  margin-inline-start: -15px !important;
 }
 .w-screen {
   width: 100vw;
@@ -91,7 +91,7 @@
 }
 .\!w-full-fluid {
   width: calc(100% + 30px) !important;
-  margin-left: -15px !important;
+  margin-inline-start: -15px !important;
 }
 .\!w-screen {
   width: 100vw !important;

package/dist/scss/tokens/spacers/_fluid-margin.scss

@@ -5,48 +5,48 @@
     margin: $value;
   }
   %fmt-#{$level} {
-    margin-top: $value;
+    margin-block-start: $value;
   }
   %fmr-#{$level} {
-    margin-right: $value;
+    margin-inline-end: $value;
   }
   %fmb-#{$level} {
-    margin-bottom: $value;
+    margin-block-end: $value;
   }
   %fml-#{$level} {
-    margin-left: $value;
+    margin-inline-start: $value;
   }
   %fmx-#{$level} {
-    margin-left: $value;
-    margin-right: $value;
+    margin-inline-start: $value;
+    margin-inline-end: $value;
   }
   %fmy-#{$level} {
-    margin-top: $value;
-    margin-bottom: $value;
+    margin-block-start: $value;
+    margin-block-end: $value;
   }
 
   %\!fm-#{$level} {
     margin: $value !important;
   }
   %\!fmt-#{$level} {
-    margin-top: $value !important;
+    margin-block-start: $value !important;
   }
   %\!fmr-#{$level} {
-    margin-right: $value !important;
+    margin-inline-end: $value !important;
   }
   %\!fmb-#{$level} {
-    margin-bottom: $value !important;
+    margin-block-end: $value !important;
   }
   %\!fml-#{$level} {
-    margin-left: $value !important;
+    margin-inline-start: $value !important;
   }
   %\!fmx-#{$level} {
-    margin-left: $value !important;
-    margin-right: $value !important;
+    margin-inline-start: $value !important;
+    margin-inline-end: $value !important;
   }
   %\!fmy-#{$level} {
-    margin-top: $value !important;
-    margin-bottom: $value !important;
+    margin-block-start: $value !important;
+    margin-block-end: $value !important;
   }
 }
 

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

@@ -5,48 +5,48 @@
     padding: $value;
   }
   %fpt-#{$level} {
-    padding-top: $value;
+    padding-block-start: $value;
   }
   %fpr-#{$level} {
-    padding-right: $value;
+    padding-inline-end: $value;
   }
   %fpb-#{$level} {
-    padding-bottom: $value;
+    padding-block-end: $value;
   }
   %fpl-#{$level} {
-    padding-left: $value;
+    padding-inline-start: $value;
   }
   %fpx-#{$level} {
-    padding-right: $value;
-    padding-left: $value;
+    padding-inline-start: $value;
+    padding-inline-end: $value;
   }
   %fpy-#{$level} {
-    padding-top: $value;
-    padding-bottom: $value;
+    padding-block-start: $value;
+    padding-block-end: $value;
   }
 
   %\!fp-#{$level} {
     padding: $value !important;
   }
   %\!fpt-#{$level} {
-    padding-top: $value !important;
+    padding-block-start: $value !important;
   }
   %\!fpr-#{$level} {
-    padding-right: $value !important;
+    padding-inline-end: $value !important;
   }
   %\!fpb-#{$level} {
-    padding-bottom: $value !important;
+    padding-block-end: $value !important;
   }
   %\!fpl-#{$level} {
-    padding-left: $value !important;
+    padding-inline-start: $value !important;
   }
   %\!fpx-#{$level} {
-    padding-right: $value !important;
-    padding-left: $value !important;
+    padding-inline-start: $value !important;
+    padding-inline-end: $value !important;
   }
   %\!fpy-#{$level} {
-    padding-top: $value !important;
-    padding-bottom: $value !important;
+    padding-block-start: $value !important;
+    padding-block-end: $value !important;
   }
 }