@reuters-graphics/graphics-components 3.0.2 → 3.0.4

package/dist/components/SiteFooter/LegalLinks.svelte

@@ -74,8 +74,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 }
 
 .legal {
-  padding-top: 24px;
-  padding-bottom: 24px;
+  padding-block-start: 24px;
+  padding-block-end: 24px;
   box-sizing: border-box;
 }
 .legal .content-container {
@@ -108,25 +108,25 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   box-sizing: border-box;
 }
 .legal .content-container {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 .legal .content-container {
-  padding-right: 2.2222222222vw;
+  padding-inline-end: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   .legal .content-container {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
   .legal .content-container {
-    padding-right: 4.2666666667vw;
+    padding-inline-end: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .legal .content-container {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   .legal .content-container {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
 }
 
@@ -199,7 +199,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 }
 .link-group li {
   display: inline-flex;
-  margin-right: 16px;
+  margin-inline-end: 16px;
   list-style: none;
   align-items: center;
 }

package/dist/components/SiteFooter/QuickLinks.svelte

@@ -161,8 +161,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 }
 
 .quick-links {
-  padding-top: 24px;
-  padding-bottom: 24px;
+  padding-block-start: 24px;
+  padding-block-end: 24px;
   box-sizing: border-box;
 }
 .quick-links .content-container {
@@ -212,25 +212,25 @@ section.quick-links .content-container {
   box-sizing: border-box;
 }
 section.quick-links .content-container {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 section.quick-links .content-container {
-  padding-right: 2.2222222222vw;
+  padding-inline-end: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   section.quick-links .content-container {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
   section.quick-links .content-container {
-    padding-right: 4.2666666667vw;
+    padding-inline-end: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   section.quick-links .content-container {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   section.quick-links .content-container {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
 }
 section.quick-links h3 {
@@ -267,7 +267,7 @@ section.quick-links h3 {
   grid-row: 1;
 }
 .quick-links .content-container .latest-and-media .media {
-  margin-top: 24px;
+  margin-block-start: 24px;
 }
 .quick-links .content-container .about-and-stay-informed {
   grid-column: 7/span 3;
@@ -285,12 +285,12 @@ section.quick-links h3 {
   }
 }
 .quick-links .content-container .stay-informed {
-  margin-top: 24px;
+  margin-block-start: 24px;
 }
 
 .symbol {
   width: 20px;
-  margin-right: 16px;
+  margin-inline-end: 16px;
 }
 
 .visually-hidden {

package/dist/components/SiteFooter/SiteFooter.stories.svelte

@@ -24,6 +24,6 @@
 <style>
   div {
     width: calc(100% + 30px);
-    margin-left: -15px;
+    margin-inline-start: -15px;
   }
 </style>

package/dist/components/SiteFooter/SiteFooter.svelte

@@ -68,7 +68,7 @@
 </footer>
 
 <style>footer {
-  margin-top: 0;
+  margin-block-start: 0;
   background-color: var(--nav-background, #fff);
 }
 footer div {

package/dist/components/SiteHeader/MobileMenu/index.svelte

@@ -88,7 +88,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   left: 0;
   width: 100%;
   height: 100%;
-  padding-bottom: 60px;
+  padding-block-end: 60px;
   box-sizing: border-box;
   background: var(--nav-background);
   color: var(--nav-primary);
@@ -115,7 +115,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 .close-button {
   width: 40px;
   height: 40px;
-  margin-left: auto;
+  margin-inline-start: auto;
   display: inline-block;
   vertical-align: top;
   outline: none;
@@ -151,55 +151,55 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
 }
 .header {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 .header {
-  padding-right: 2.2222222222vw;
+  padding-inline-end: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   .header {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
   .header {
-    padding-right: 4.2666666667vw;
+    padding-inline-end: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .header {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   .header {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
 }
 
 .section {
-  padding-top: 16px;
-  padding-bottom: 16px;
+  padding-block-start: 16px;
+  padding-block-end: 16px;
   border-bottom: 1px solid var(--tr-muted-grey);
   width: 100%;
   max-width: 100%;
 }
 .section {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 .section {
-  padding-right: 2.2222222222vw;
+  padding-inline-end: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   .section {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
   .section {
-    padding-right: 4.2666666667vw;
+    padding-inline-end: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .section {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   .section {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
 }
 .section .subsections {

package/dist/components/SiteHeader/NavBar/DownArrow.svelte

@@ -20,7 +20,7 @@
 </svg>
 
 <style>svg {
-  margin-left: 4px;
+  margin-inline-start: 4px;
   width: 10px;
   fill: var(--nav-primary, var(--tr-dark-grey));
   transition: transform 0.15s ease;

package/dist/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte

@@ -60,7 +60,7 @@ a:hover {
 }
 
 .more-section-group.has-children {
-  margin-bottom: 20px;
+  margin-block-end: 20px;
 }
 .more-section-group .subsections {
   display: grid;
@@ -92,7 +92,7 @@ a:hover {
   font-weight: 400;
   display: inline-block;
   padding: 4px 0;
-  margin-bottom: 2px;
+  margin-block-end: 2px;
   text-decoration: none;
 }
 .more-section-group .subsections .subsection-link:hover {
@@ -100,7 +100,7 @@ a:hover {
 }
 .more-section-group .section-link {
   grid-column: 1/-1;
-  margin-bottom: 16px;
+  margin-block-end: 16px;
   line-height: 18px;
   font-size: 16px;
   display: inline-block;

package/dist/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte

@@ -73,11 +73,11 @@ a:hover {
   margin: 0;
 }
 .sections .sections-group:first-child {
-  margin-right: 16px;
+  margin-inline-end: 16px;
 }
 @media (max-width: 1023px) {
   .sections .sections-group:nth-child(2) {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 }
 
@@ -86,7 +86,7 @@ a:hover {
   font-weight: 400;
   display: inline-block;
   padding: 4px 0;
-  margin-bottom: 2px;
+  margin-block-end: 2px;
   font-family: var(--theme-font-family-sans-serif);
 }
 .subsection-link:hover {

package/dist/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte

@@ -12,7 +12,7 @@
 .spinner-container {
   position: relative;
   height: 0;
-  padding-bottom: 100%;
+  padding-block-end: 100%;
   color: var(--nav-primary, var(--tr-dark-grey));
 }
 

package/dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte

@@ -52,7 +52,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   text-decoration: underline;
 }
 .story-card a .story-text {
-  margin-right: 10px;
+  margin-inline-end: 10px;
   width: 100%;
 }
 .story-card a .story-text.has-thumbnail {
@@ -71,7 +71,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 }
 .story-card a .story-text time {
   font-family: var(--theme-font-family-sans-serif);
-  margin-top: 8px;
+  margin-block-start: 8px;
   display: block;
   font-size: 12px;
   font-weight: 400;

package/dist/components/SiteHeader/NavBar/NavDropdown/index.svelte

@@ -149,25 +149,25 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   }
 }
 .dropdown-container > .inner {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 .dropdown-container > .inner {
-  padding-right: 2.2222222222vw;
+  padding-inline-end: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   .dropdown-container > .inner {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
   .dropdown-container > .inner {
-    padding-right: 4.2666666667vw;
+    padding-inline-end: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .dropdown-container > .inner {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   .dropdown-container > .inner {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
 }
 
@@ -204,16 +204,16 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   border-left: 1px solid var(--nav-rules, var(--tr-muted-grey));
 }
 .stories-container .inner {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   .stories-container .inner {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .stories-container .inner {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
 }
 @media (min-width: 1440px) {
@@ -259,7 +259,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 }
 
 .story-item {
-  padding-bottom: 20px;
+  padding-block-end: 20px;
   margin: 0;
   animation: fadein 0.5s both cubic-bezier(0.19, 1, 0.22, 1);
 }
@@ -267,11 +267,11 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
 }
 .story-item:nth-child(3), .story-item:nth-child(4) {
-  padding-top: 20px;
+  padding-block-start: 20px;
 }
 @media (max-width: 1023px) {
   .story-item:nth-child(2) {
-    padding-top: 20px;
+    padding-block-start: 20px;
   }
   .story-item:nth-child(3) {
     border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
@@ -280,7 +280,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 
 .spinner {
   width: 40px;
-  margin-left: -20px;
+  margin-inline-start: -20px;
   position: absolute;
   top: 60px;
   left: 50%;

package/dist/components/SiteHeader/NavBar/index.svelte

@@ -139,7 +139,7 @@ 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 */
 .nav-bar {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 @media (max-width: 745px) {
   .nav-bar {

package/dist/components/SiteHeader/SiteHeader.stories.svelte

@@ -41,5 +41,5 @@
 <style>div {
   min-height: 625px;
   width: calc(100% + 30px);
-  margin-left: -15px;
+  margin-inline-start: -15px;
 }</style>

package/dist/components/SiteHeader/SiteHeader.svelte

@@ -144,25 +144,25 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   max-width: 1440px;
 }
 .main-bar {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 .main-bar {
-  padding-right: 2.2222222222vw;
+  padding-inline-end: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   .main-bar {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
   .main-bar {
-    padding-right: 4.2666666667vw;
+    padding-inline-end: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .main-bar {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   .main-bar {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
 }
 @media (max-width: 745px) {
@@ -188,7 +188,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 }
 
 .spacer-container {
-  margin-left: auto;
+  margin-inline-start: auto;
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -209,7 +209,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 }
 
 .mobile-button-group {
-  margin-left: auto;
+  margin-inline-start: auto;
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -221,7 +221,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
 }
 
 .mobile-menu {
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 @media (min-width: 746px) {
   .mobile-menu {

package/dist/components/Spinner/Spinner.svelte

@@ -59,7 +59,7 @@
 }
 .spinner-container {
   height: 0;
-  padding-bottom: 100%;
+  padding-block-end: 100%;
   color: var(--spinner-colour, #666);
 }
 

package/dist/components/Table/Table.svelte

@@ -308,7 +308,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   border-spacing: 0;
 }
 .table table thead tr th {
-  border-bottom: 1px solid var(--theme-colour-text-primary);
+  border-block-end: 1px solid var(--theme-colour-text-primary);
   background-color: var(--theme-colour-background);
   text-align: inherit;
 }
@@ -319,19 +319,20 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 .table table thead tr th .table--thead--sortarrow {
   display: inline-block;
   position: relative;
-  top: 5px;
+  inset-inline-start: 5px;
 }
 .table table tbody td {
   font-size: var(--theme-font-size-sm);
   font-weight: 400;
+  font-variant-numeric: tabular-nums;
   vertical-align: top;
-  border-bottom: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
+  border-block-end: 1px solid var(--theme-colour-brand-rules, var(--tr-muted-grey));
 }
 .table table tbody td.no-results {
   color: var(--theme-colour-text-secondary);
 }
 .table table tfoot.table--tfoot tr {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 .table table tfoot.table--tfoot td {
   font-family: var(--theme-font-family-note);
@@ -339,11 +340,11 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }
 .table table.truncated tbody tr:last-child:not(:first-child) {
-  border-bottom: none;
+  border-block-end: none;
   mask-image: linear-gradient(to bottom, var(--theme-colour-text-primary) 0%, transparent 100%);
   -webkit-mask-image: linear-gradient(to bottom, var(--theme-colour-text-primary) 0%, transparent 100%);
 }

package/dist/components/Table/components/{RightArrow.svelte → NextArrow.svelte}

@@ -15,4 +15,7 @@
     width: 1rem;
     fill: currentColor;
   }
+  :global([dir='rtl']) .icon {
+    transform: rotate(180deg);
+  }
 </style>

package/dist/components/Table/components/{LeftArrow.svelte.d.ts → NextArrow.svelte.d.ts}

@@ -1,12 +1,12 @@
-export default LeftArrow;
-type LeftArrow = SvelteComponent<{
+export default NextArrow;
+type NextArrow = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const LeftArrow: $$__sveltets_2_IsomorphicComponent<{
+declare const NextArrow: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/components/Table/components/Pagination.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { intcomma } from 'journalize';
-  import LeftArrow from './LeftArrow.svelte';
-  import RightArrow from './RightArrow.svelte';
+  import PrevArrow from './PrevArrow.svelte';
+  import NextArrow from './NextArrow.svelte';
 
   interface Props {
     /**
@@ -49,7 +49,7 @@
 <nav aria-label="pagination" class="pagination fmt-4">
   <button onclick={goToPreviousPage} disabled={pageNumber === 1}
     ><div class="icon-wrapper">
-      <LeftArrow />
+      <PrevArrow />
       <span class="visually-hidden">Previous page</span>
     </div></button
   >
@@ -62,7 +62,7 @@
     onclick={goToNextPage}
     disabled={pageNumber === Math.ceil(n / pageSize)}
     ><div class="icon-wrapper">
-      <RightArrow />
+      <NextArrow />
       <span class="visually-hidden">Next page</span>
     </div></button
   >
@@ -79,6 +79,7 @@ nav.pagination {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: row;
 }
 nav.pagination button {
   border: 1px solid var(--theme-colour-text-secondary, var(--tr-light-grey));

package/dist/components/Table/components/{LeftArrow.svelte → PrevArrow.svelte}

@@ -15,4 +15,7 @@
     width: 1rem;
     fill: currentColor;
   }
+  :global([dir='rtl']) .icon {
+    transform: rotate(180deg);
+  }
 </style>

package/dist/components/Table/components/{RightArrow.svelte.d.ts → PrevArrow.svelte.d.ts}

@@ -1,12 +1,12 @@
-export default RightArrow;
-type RightArrow = SvelteComponent<{
+export default PrevArrow;
+type PrevArrow = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const RightArrow: $$__sveltets_2_IsomorphicComponent<{
+declare const PrevArrow: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/components/Table/components/Select.svelte

@@ -23,7 +23,7 @@
   }
 </script>
 
-<div class="select">
+<div class="select relative inline-flex">
   <select
     class="select--input body-caption fpx-2"
     name="select--input"
@@ -34,6 +34,18 @@
       <option value={obj.value}>{obj.text} {label.toLowerCase()}</option>
     {/each}
   </select>
+  <div class="arrow absolute">
+    <svg
+      width="15"
+      height="9"
+      viewBox="0 0 15 9"
+      xmlns="http://www.w3.org/2000/svg"
+      ><path
+        d="M6.76474 8.30466L0.236082 1.54523C-0.0786943 1.21934 -0.0786943 0.69069 0.236082 0.364804C0.550521 0.0392666 1.19794 0.0403099 1.51305 0.364804L7.33483 6.49522L12.9249 0.475171C13.3549 0.0451683 14.1195 0.0396141 14.4339 0.365152C14.7487 0.691037 14.7487 1.21969 14.4339 1.54557L7.90492 8.30466C7.59015 8.63054 7.07952 8.63054 6.76474 8.30466Z"
+        fill="var(--theme-colour-brand-rules)"
+      /></svg
+    >
+  </div>
 </div>
 
 <style>.select {
@@ -48,11 +60,13 @@
   -moz-appearance: none; /* Firefox */
   -webkit-appearance: none; /* Safari and Chrome */
   appearance: none; /* Remove the default arrow */
-  background: transparent;
-  background-image: url('data:image/svg+xml;utf8,<svg width="15" height="9" viewBox="0 0 15 9" xmlns="http://www.w3.org/2000/svg"><path d="M6.76474 8.30466L0.236082 1.54523C-0.0786943 1.21934 -0.0786943 0.69069 0.236082 0.364804C0.550521 0.0392666 1.19794 0.0403099 1.51305 0.364804L7.33483 6.49522L12.9249 0.475171C13.3549 0.0451683 14.1195 0.0396141 14.4339 0.365152C14.7487 0.691037 14.7487 1.21969 14.4339 1.54557L7.90492 8.30466C7.59015 8.63054 7.07952 8.63054 6.76474 8.30466Z" fill="gray"/></svg>');
-  background-repeat: no-repeat;
-  background-position-x: 225px;
-  background-position-y: 55%;
+}
+.select .arrow {
+  pointer-events: none;
+  inset-inline-end: 0;
+  inset-block-start: 0.55rem;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 .select .select--input::-ms-expand {
   display: none; /* Remove the default arrow in Internet Explorer 11 */

package/dist/components/ToolsHeader/ToolsHeader.stories.svelte

@@ -17,6 +17,6 @@
 <style>
   div {
     width: calc(100% + 30px);
-    margin-left: -15px;
+    margin-inline-start: -15px;
   }
 </style>